feat: updates card design for kits and homepage

[WillHutt]

Type of change

• Feature
• Documentation change
• Bug fix

Summary of change

• This updates the homepage and kit pages to reflect the option 1 selection in the Figma designs found in the Slack PTA channel
  • Updates the homepage to include more icons with a layout of 4x3 and adds a title for the kit
  • Adds a showcase section to individual kits with a View Showcase option that navigates to the section on the page
  • Adds updated keywords and icons from [pods] - Update keywords and icons for kits #1283
  • Updates packages to reflect which kits have showcases
  • Resolves 2 failing checks

Screenshots

Homepage

Individual kit

Checklist

• These changes follow the contributing guidelines
• This starter kit has been approved by the maintainers
• All dependencies are version locked
• This fix resolves [Pods] - Update card designs for kits #1284
• I have verified the fix works and introduces no further errors

[netlify]

✅ Deploy Preview for starter-dev ready!

Name	Link
🔨 Latest commit	a6cedb5
🔍 Latest deploy log	https://app.netlify.com/sites/starter-dev/deploys/64a6e142646dde0008ee6c6a
😎 Deploy Preview	https://deploy-preview-1291--starter-dev.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.

[vyktoremario]

Left a question

[jdwilkin4]

Looks good.
Left a couple of small comments 👍

[lindakatcodes]

Code in general seems good to me! A few comments on showcases that aren't actually ready for display, but also a few things as I'm running it locally:

Homepage:

• Can we adjust the size of the cards or at least the icon spacing? Being the 3x4 like this, there's too much space in between each icon side by side as opposed to between the rows. It looks funky compared to the design (which I know does 4 across instead of the 3 we decided on). Feels like the spacing should match better somehow.

Individual kit page:

• In the design, the navigation is showing the actual showcase name. However on our site, it's showing "Kits". Can we fix that?

- I'm pretty sure we're meant to show both the repo and the live app here? Unless there's a conversation I've missed somewhere. We should have the info to show both links like the design does.

[lindakatcodes]

Looking wonderful! Nice job! 🥇

[WillHutt]

Feedback to address from Dustin:

• Columns/rows
  [ ] [ ] [ ] [ ]
  [ ] [ ] [ ] [ ]
  [ ] [ ] [ ] [ ]

• Container squares feel too skinny add more lr padding
  

• Remove duplicate logos
  

• Light mode title is too light
  

• Make plural
  

• Doesn't look good in light mode and feels too cramped in dark mode. Add more padding
  
  

• Skinny container feels really bad because it doesn't left align with the rest of the page
  

• Mobile, this should probably take the full width
  

• Header styles on mobile are off especially with CTAs
  

[WillHutt]

I have pushed a commit that handles the requested feedback from Dustin except for the duplicate logos.

[jdwilkin4]

Looks good.
Left a couple of small comments 👍

[sonarqubecloud]

Kudos, SonarCloud Quality Gate passed!   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
0 Code Smells

No Coverage information
0.0% Duplication

[jdwilkin4]

Left one small comment about an unused line of commented out code but otherwise I think is good to go