Redesign Homepage - Hero Section

[RUKAYAT-CODER]

Overview

Redesign the homepage hero section to create an engaging first impression with clear value proposition.

Background

Current homepage is minimal and doesn't effectively communicate platform benefits or drive user action.

Specifications

Design Requirements:

• Compelling headline with animation
• Clear value proposition (3 key benefits)
• Primary CTA buttons (Get Started, Browse Quests)
• Trust indicators (user count, total paid, active quests)
• Animated blockchain/network visualization
• Responsive design for mobile/tablet/desktop
• Dark mode support
• Accessibility compliant (WCAG 2.1 AA)

Components to Create:

• HeroSection component
• StatsCounter component (animated numbers)
• NetworkVisualization component
• CTAButtonGroup component
• TrustIndicators component

Tasks:

• Design hero layout in Figma
• Create responsive grid structure
• Implement animated headline
• Build stats counter animation
• Add network visualization (Three.js or Canvas)
• Optimize for mobile
• Add dark mode styles
• Write component tests
• Ensure keyboard navigation

Impacted Files:

• app/page.tsx (restructure)
• components/homepage/HeroSection.tsx (new)
• components/homepage/StatsCounter.tsx (new)
• components/homepage/NetworkVisualization.tsx (new)
• components/homepage/CTAButtons.tsx (new)
• styles/homepage.css (new)
• tests/components/homepage.test.tsx (new)

Labels: frontend, design, homepage, ui/ux, priority-high

Acceptance Criteria

• Hero section visually engaging
• Animations smooth (60fps)
• CTAs prominent and clickable
• Stats animate on scroll
• Network viz looks professional
• Mobile layout clean
• Dark mode renders correctly
• Keyboard accessible
• Lighthouse score >90

FIGMA link

🙌Contribution Guidelines:

Assignment required before PR submission
Timeframe: 96-120 hours
Create a screenshot of your implementation/s or sever running
PR description must include: Close #[issue-number]
Star the repo⭐
For more context, please refer to the backend README 🚀

[drips-wave]

This issue has been added to the Stellar Wave Program and is worth 200 Points.

🧑‍💻 Interested in contributing? Apply to work on this issue on Drips Wave, earn points, and receive rewards.

Warning

Only applications submitted via the apply link above will be considered. Please do not apply by commenting on the issue or opening a PR directly.

🤠 Repo maintainers: You can manage this issue's Points and Complexity on your Maintainer Dashboard here. Please keep an eye on applications and respond quickly 💙

ℹ️ Learn more about Drips Wave

[Just-Bamford]

Hi Rukayat, can you assign me to this

[Jerryvic911]

@Jerryvic911 has applied to work on this issue as part of the Stellar Wave Program's 3rd wave.

I’d like to work on this because the hero section plays a key role in first impressions and user conversion.

I have frontend experience building responsive and interactive UI components, including animations, layouts, and accessible designs.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @Jerryvic911 to this issue.

[drips-wave]

Congratulations, @samuelgodsgift! 🎉 Your application was accepted by the repo's maintainers, and the issue is due on March 30, 2026.

🧑‍💻 @samuelgodsgift: Please resolve the issue such that the repo's maintainers have enough time to review your contribution before the due date. You'll earn Points for completing the issue on-time, which will make you eligible for a share of the Stellar Wave Program's reward pool.

Warning

When opening a PR, please link it to this issue to ensure it gets tracked accurately. Points are awarded when this issue is marked as completed by the maintainer.

🤠 Repo maintainers: Please keep an eye on the contributor's progress and review their work before the due date. You can manage this issue, including adjusting its complexity and points, here.

🌊 Happy Wave 🌊