Gabe - "Who We Are" and "Our Mission" Sections

[gabrielsessions]

Description

Created the "Who We Are" and "Our Mission" sections of the homepage.

Issues

Resolves #12

Screenshots

Desktop View:

Mobile View:

--- Screenshot Break --

Test

1. npm run dev
2. View the added sections under the dev/who-we-are path (localhost link)
3. Open browser dev tools (CRTL + Shift+ I)
4. Enable Responsive Device Mode, if not already enabled (CRTL + Shift + M)
5. Choose a device to emulate (or change the screen size using "Responsive" dimensions)

Possible Downsides

• The image carousel uses a bit of JS to position center the images, while maintaining some overflow to the left or right. I couldn't find a particularly clean way of matching the design specification in pure CSS.
• The carousel only becomes viewable once it has been centered (300ms fade-in animation)

Additional Documentations

• Added Inter font as a font-family to the Tailwind config file and globals.css. If it's not the right font, lmk.
• Added a global CSS class to hide scrollbars (not supported in Tailwind)
• Added all new components to the /components directory. Feel free to reorganize them if you'd like to have a consistent component organization scheme.

[github-actions]

https://jumbocode-org-2024-9ujmstd3u-tufts-jumbocode.vercel.app

[sristii]

Hi Gabe!! this looks awesome thank u so much! very very modular 👍

1 request --> there are 2 images to be added to the carousel that are on the left side of the Figma page (lmk if u cant find it!)

other than that u ate ‼️

[github-actions]

https://jumbocode-org-2024-a0qywr1dx-tufts-jumbocode.vercel.app

[github-actions]

https://jumbocode-org-2024-buknpwjud-tufts-jumbocode.vercel.app

[gabrielsessions]

Good catch! I've added the images (one on each side), merged in Ben's layout, and added both sections to the /dev page

[sristii]

Thank you Gabe!