Update homepage

[respp]

The current homepage design needs to be fully updated to match the new layout and style provided in the Figma file. The new design introduces structural and visual improvements that enhance usability, clarity, and conversion. This task involves implementing the updated homepage components and layout with close attention to design consistency, responsiveness, and performance.

🔍 Steps

• Analyze the Figma design and identify all visual and structural changes
• Review existing homepage implementation and list reusable components
• Refactor or create new components as needed to match the new design
• Implement updated layout, typography, and spacing
• Ensure responsive behavior across desktop, tablet, and mobile
• Integrate animations or transitions if specified in Figma
• Replace placeholder or outdated content with production-ready content
• Align colors, icons, and UI elements with the updated design system
• Ensure accessibility standards (contrast, keyboard navigation, etc.)

✅ Acceptance Criteria
[ ] Homepage layout and components match Figma design
[ ] Mobile, tablet, and desktop versions are fully responsive
[ ] Design system (colors, fonts, spacing) is consistently applied
[ ] All placeholder content is replaced with real content
[ ] No regressions on core functionality of the homepage
[ ] Accessibility is verified (basic WCAG checks)
[ ] Visual review passes design QA
[ ] Performance budget respected (e.g., LCP < 2.5s)

🌎 References
Figma Design File: [Insert Figma link here]
Current Homepage Code: apps/web/src/pages/index.tsx
Component Folder: apps/web/src/components/home/
Design System Tokens: apps/web/src/styles/tokens.ts

📜 Additional Notes
Coordinate with the design team if any layout conflicts arise. Document any trade-offs made during implementation. This update is a key milestone in aligning the visual identity of the platform with our product goals.

[martinvibes]

hello @respp, I’d like to apply for this issue. I have experience in both frontend development (React, Nextjs ethers.js/web3.js) and smart contract development with (solidity, cairo and rust). I can build responsive interfaces and securely connect them to blockchain networks. I’m excited to contribute to this project!

Kindly assign :)

Recommended by OnlyDust for exceptional experience, quality, and reliability.

[iGEORGE17]

Hi OnlyDust Team,

I’d love the opportunity to take on this homepage redesign task. I have solid experience working with React and translating Figma designs into clean, responsive, and accessible web pages. I’m detail-oriented, design-conscious, and always focused on performance and user experience.

Here’s how I plan to approach it:

Go through the Figma design and current code to understand what needs updating

Reuse or refactor components where possible, and build new ones as needed

Apply consistent design tokens for colors, spacing, and typography

Make sure the layout works smoothly on all screen sizes

Check for accessibility and optimize for fast load times (LCP < 2.5s)

Collaborate with the design team to ensure everything matches the vision

I’m available to start right away and can deliver within 3 days. Looking forward to contributing!

[Pvsaint]

Hi, I'm Victor, a frontend and smart contract developer, proficient in React.js, Typescript, Next.js, Solidity and Cairo, I'd love to contribute to this project by taking this issue if it's still available.

[kimcascante]

Hi! I’m Kim Cascante ⛩️
I’d love to take on this issue. I have experience with React, Next.js, and responsive design.
I'll follow the Figma closely, ensure accessibility, and keep performance in mind.
Excited to contribute and grow through this challenge!

Recommended by OnlyDust for high-quality and dependable contributions.

[BlessingEmejulu]

Hi, I will like to work on this but the figma design link is missing.

[JoelVR17]

Can I be assigned?