Add Projects and Teams sections to Home page

[rezwana-karim]

Summary

Enhance the Home page by adding two new modular, content-rich sections: Projects and Teams. These will further highlight CodeStorm Hub’s open-source initiatives and community structure, while preserving the existing style, layout, and theme. All new sections must utilize the current design system built with Next.js 15, TypeScript, Tailwind CSS 4, Radix UI, Lucide icons, and follow accessibility and performance best practices as detailed in our engineering guidelines.

---

Details

Projects Section

• Display a curated or dynamic list of key projects in a responsive grid or carousel format.
• Each project card should include: project name, 1-line description, key stats (stars, contributors), primary technology tag, and a link to the project page or repo.
• Optionally add category or filter chips if projects span multiple domains (e.g., research, dev tools, infrastructure).
• Ensure accessibility and responsive layout.

Teams Section

• Introduce a section highlighting active teams, working groups, or core maintainers.
• For each team: show team name, focus area, member avatars (with alt text), and a brief mission/role statement.
• Optionally include a call-to-action to join or learn more about each team.

---

Implementation Guidelines

• Use strict TypeScript, Tailwind CSS, Radix UI, and Lucide icons for all components.
• Place new components in src/components/home/ (e.g., ProjectsSection.tsx, TeamsSection.tsx).
• Reuse existing design tokens, colors, and spacing utilities.
• Ensure sections are fully responsive, accessible (WCAG 2.1 AA), and dark mode compatible.
• Provide sample data or placeholder content if live data is unavailable.

---

Acceptance Criteria

• Both Projects and Teams sections are visible on the Home page.
• Sections are visually and functionally consistent with the rest of the site.
• No breaking changes to the existing theme or layout.
• All code follows project engineering and accessibility standards.

---

References

• [Custom Copilot Instructions]
• [Current Home Page]
• [Design System Documentation]

[rezwana-karim]

Summary

Enhance the Home page by adding modular, content-rich sections that highlight the CodeStorm Hub’s mission, activity, and pathways for engagement, while preserving the existing style, layout, and theme. All new sections should utilize the current design system built with Next.js 15, TypeScript, Tailwind CSS 4, Radix UI, Lucide icons, and follow accessibility and performance best practices as detailed in our engineering guidelines.

---

Proposed Enhancements

1. Value Proposition Pillars

• Add a section with 3–4 concise pillars (e.g., Open Research, Robust Tooling, Learning Culture, Real Impact), each with icon, heading, and supporting text.
• Use existing iconography style and Tailwind utility classes.

2. Featured Projects

• Display a responsive grid of selected projects with description, stars, and language badges.
• Add filter chips for project categories if available.

3. Research & Innovation Spotlight

• Highlight recent research, experiments, or prototypes via a media card layout.

4. Community Activity Snapshot

• Show live/cached stats: contributors (recent), merged PRs, issues triaged, average PR review time.
• Use accessible stat tiles and aria-labels for screen readers.

5. Events / Sessions Preview

• List upcoming and recent events (title, date, type, register link).

6. Unified Knowledge Feed

• Merge blog posts, doc updates, and release notes into a tabbed or filtered stream.

7. Quick Start Pathways

• Create cards/accordions for Contributor, Researcher, Maintainer, and Student journeys with 3 actionable steps each.

8. Contribution On‑Ramp

• Visualize contribution flow (fork → issue → PR → review), and surface “first good issues.”

9. Tech Stack & Architecture Glimpse

• Display stack logos and a basic architecture diagram, linking to deeper docs.

10. Impact & Metrics

• Show growth/impact stats (collaborators, experiments, monthly visits, stars over time) with accessible sparklines.

11. Testimonials / Community Voices

• Carousel of short member/partner quotes (manual navigation, accessible controls).

12. Partner & Ecosystem Logos

• Optional: grayscale logo row, color on hover if available.

13. Newsletter Signup

• Simple input and CTA for updates (with privacy reassurance).

14. Accessibility & Inclusion Statement

• Include a brief statement and link to the full commitment.

15. Global Community Map (Optional)

• Show geo heatmap of community (static or interactive, lazy-loaded).

---

Implementation Guidelines

• All new components must follow atomic/component architecture in src/components/home/.
• Use strict TypeScript, Tailwind, Radix UI, and Lucide React icons.
• Ensure full accessibility (WCAG 2.1 AA), keyboard support, and proper alt text.
• Optimize for performance: code splitting, dynamic imports for heavy content, and Next.js Image for images.
• All styles must use Tailwind utilities and Radix Colors for dark/light mode.
• Provide sample content and mock data where live data is unavailable.

---

Acceptance Criteria

• The new sections are added in the recommended order and are responsive, accessible, and visually consistent with the current theme.
• No breaking changes to the existing theme, layout, or core styles.
• All code adheres to the project’s custom instructions and engineering standards.
• PR includes example data/content for each new section.

---

References

• [Custom Copilot Instructions]
• [Current Home Page]
• [Design System Documentation]

---

This enhancement will significantly boost the clarity, credibility, and engagement of the Home page while preserving the brand identity and technical excellence of CodeStorm Hub.