feat: join growing community section

[owengretzinger]

TL;DR

Created the join a growing community section. Closes #6.

What changed?

• Created a new JoinGrowingCommunity.tsx component with the content for the section
• Created a Header.tsx component (and changed other sections to use this component)
• Added the section to index.tsx

Other Notes

• I made changes to index.tsx so that the purple background is a lower z-index. This way, we can easily add -z-10 to graphics and they will automatically show up in front of the purple background, but stay behind any other elements such as text.

Screenshots

Desktop:

Mobile:

Extra Wide Screen:

How to test?

• Pull the code for this PR and make sure everything looks right.

[netlify]

✅ Deploy Preview for deltahacks11 ready!

Name	Link
🔨 Latest commit	f6c4426
🔍 Latest deploy log	https://app.netlify.com/sites/deltahacks11/deploys/6703eacd40ac100008bada17
😎 Deploy Preview	https://deploy-preview-17--deltahacks11.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[owengretzinger]

@Shivermist assets for yellow and red dinos are good but the blue dino and the trails I got from Figma are pretty low res. Do you have higher quality ones you could send?

[demanr]

When I look at this on my monitor, the yellow dinos "trail" doesnt extend to the edge of the screen on the right

[owengretzinger]

When I look at this on my monitor, the yellow dinos "trail" doesnt extend to the edge of the screen on the right

What should we do about this? @Shivermist are you able to extend the trail? Or should I just stretch it out more on wide screens?

[Krish120003]

Waiting for #2 before reviewing this

[Shivermist]

@Shivermist assets for yellow and red dinos are good but the blue dino and the trails I got from Figma are pretty low res. Do you have higher quality ones you could send?

Hi

@Shivermist assets for yellow and red dinos are good but the blue dino and the trails I got from Figma are pretty low res. Do you have higher quality ones you could send?

Hi Owen! I've uploaded high quality versions of the assets on the google drive under "Design --> Website assets" and the trails are under it's own folder there. Also the trials are supposed to svgs unless there's some kind of visual artifacts that makes it look weird. Do let me know if that's the case. Thanks!

[Shivermist]

When I look at this on my monitor, the yellow dinos "trail" doesnt extend to the edge of the screen on the right

What should we do about this? @Shivermist are you able to extend the trail? Or should I just stretch it out more on wide screens?

I've also extended the trails considerably on the Figma (assets also available on the drive). If it's still not long enough, feel free to stretch it out to fit on the screen.

[owengretzinger]

Thanks @Shivermist! I updated this PR to use assets from the drive.

@kabirsg I also fixed that issue with the trail showing up over the tree.

[kabirsg]

Thanks @Shivermist! I updated this PR to use assets from the drive.

@kabirsg I also fixed that issue with the trail showing up over the tree.

It looks great now thanks Owen!

[Krish120003]

@owengretzinger Please install and setup the appropriate font for this section, otherwise this looks great!

https://fontsource.org/fonts/gochi-hand

[owengretzinger]

Updated other headers and added the font (see updated screenshots)

[owengretzinger]

fixed @Krish120003

[Krish120003]

There's this awkward break in colors on mobile (and on some desktop sizes as well). Could you adjust the background to be a gradient so this doesn't happen?

[owengretzinger]

@Krish120003 I changed the background color to make it match more. However, there's still a little line, which I think is because of a shadow baked into a hero section svg.

The Figma design also has a subtle gradient throughout the whole page. But I think that these things are outside the scope of this PR. Let me know what you think.