Add landing page info sections
opened this issue · comments
Deleted user commented
Work out the text modules for the landing page, using the existing SplitSection
component.
- Add 2 new components to
components/landing
:connectingSection.svelte
andbuildingSection.svelte
. - Head to
routes/index.svelte
and add these 2 components belowheading.svelte
- In each component, paste in the header and body text. Use the
SplitSection
component toslot
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 withtranslateZ
). - 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.