colindamelio / saraswati

This project was bootstrapped with Create React App.

saraswati's Issues

Feature: Landing Page

If desired, this can be broken down to build out specific components of landing page. For example, hero tout, discover more smooth-scroll, information grid, etc.

Desktop

Tablet

Mobile

Prod: Router throws a 404 on refresh

Describe the bug

In Production, React-Router throws a 404 on refresh.

To Reproduce
Steps to reproduce the behavior:

1. Go to prod
2. Navigate to any route
3. Refresh the page
4. Observe a 404 page

Expected behavior
The page refreshes

2-column Hero width not restricted (IE)

IE navigation stretching

Width of our nav is too wide. Currently, appears to be caused by justify-content: flex-end
cc @nsbtr

We also need to fix our SVG to not have extra white-spacing

VIsual References

Feature: Application Form

baseline work already exists under components/ApplicationForm.js

• create and style application form
• form validation
• connect with desirable form processing service (focuspocus?)

Visual Reference:

Copy Feedback (to be implemented)

Please check when complete! And update with the PR (or commit) beside the line-item:

Landing Page

• Hero: "Apply" Could be on it's own line, the CTA would stand out better. (5449e54)
• Header: Feels tall; we could shrink it to a smaller "truncated" height on scroll
• "our goal is to ensure you have a strong foundation", of what? (2a7cd0f)
• Why is "JavaScript" in all caps? (a182df5)
• "Providing you an authentic Balinese Experience.". Shouldn't this be "Providing you WITH an authentic Balinese Experience." (93f8756)
• "Without a doubt, Bali is beautiful. However, most people who visit the island miss an opportunity to discover authentic Balinese Culture." What is the goal of this copy? I know there is authentic cuisine here, but why comment negatively about other travellers? (97f91c4)
• "Saraswati Retreats strives to educate our guests beyond coding their website ". "Coding their website" sounds sloppy. (cabbf66)
• A lot of "APPLY NOW" + "SEE ALL ACTIVITIES" CTA groups; would you be better off fixing it to the bottom of the screen? (5c237a4)
• We could Hyperlink a map to the accomodations, to provide more credibility.
• "Located in the charming village of Umalas, near Seminyak, Villa Malaathina – set among 5,000 square metres of immaculate tropical gardens and surrounded by traditional Balinese rice paddies – is home for the duration of our retreat." is gramatically incorrect. (e29a224)
• Under "What's Included" the Note section could use smaller text, as it is lesser prominence (924edf7)
• "Save big when you register early for upcoming retreats! See retreat dates for Early Bird cut-off." This is gramatically incorrect. Personalize it by injecting "Our" where possible; "Our Early Bird cut-off", "our upcoming retreats. (9e0ec45)
• Form textarea; great work on the max-width, should have a max-height too. I dislike how that scales the image... feels sloppy (6308d7b)

Culture Page

• Find a better way to communicate it's FRANCES who is from Bali. The team is from Canada.

Feature: Navigation Menu

baseline work already exists under components/Navigation.js

• create and style the desktop navigation menu
• create and style the mobile menu
• create and style the expanded mobile menu

Visual References:

@johnathanfong Can you provide mocks for the open mobile menu when possible

Feature: Culture Page

Desktop

Tablet

Mobile

Feature: Footer

Designs for reference. The padding values are already in place (to make things aligned with page content).

Desktop

Tablet

Mobile

Mobile navigation does not work on Firefox

Describe the bug
The menu does not expand when the menu icon is clicked. The navigation element appears to be there, but this may just be an issue with positioning.

To Reproduce
Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

CTA text wrapping on mobile breakpoint

Describe the bug

Smartphone (please complete the following information):

• Device: 375px width (iPhone 6/7/8)

Images stretched (IE)

It appears our IMAGE component <img> heights are stretched.

Feature: Curriculum Page

Desktop

Tablet

Mobile