GTBitsOfGood / website

Our website, built from the ground up with Svelte + Sapper to connect nonprofits, students, and everyone else in between with Bits of Good 🚀

Home Page:https://bitsofgood.org

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Add landing page info sections

opened this issue · comments

Work out the text modules for the landing page, using the existing SplitSection component.

  • Add 2 new components to components/landing: connectingSection.svelte and buildingSection.svelte.
  • Head to routes/index.svelte and add these 2 components below heading.svelte
  • In each component, paste in the header and body text. Use the SplitSection component to slot text into the left side.
  • Paste the image assets into the right section of each as an SVG. Try to add a parallax effect to the elements behind the human figures (reference components/dottedAccent.svelte to see how this is down with translateZ).
  • Adjust top margin on connectingSection so the text overlaps the swoosh as shown in the mockup.
  • Edit SplitSection to wrap correctly for narrow screens. Basically, each left and right slot should have a minimum width, and below this width, the text should wrap below the image. flex-wrap should work here.

image

image