[MarginFrontend] Home page

[djeck1432]

🚨 Attention: Please read the guidelines before applying; otherwise, you will be ignored. 🚫📋

Guidelines

1. Telegram: Please join our Telegram group to keep in touch.
2. Read the guideline: Please read this guideline thoroughly before starting.

Tasks

0. **Changes should be made in margin_frontend project.

1. Implement Home Page

   • Create a Home component (named export) and place it in routes/index.tsx.
   • Import this Home component into the root (e.g., App.tsx or equivalent) so it renders by default.
   • Match the layout and styling from Figma.

2. Create Button Component

   • Place the button component in ui/core/button.tsx (named export).
   • Use class-variance-authority to manage multiple variants for size (e.g., lg, md) or other styles.
   • Adhere to Tailwind classes defined in our custom theme.

3. Header & Footer

   • Add a Header component to ui/layout/header.tsx (named export) and a Footer component to ui/layout/footer.tsx (named export).
   • Include dummy links or placeholders for navigation elements.
   • Ensure consistent styling with the Figma mockup.

4. Follow Tailwind v4 Principles

   • Place any custom colors, spacing, etc., in index.cssunder@theme as per tailwind v4 standard.
   • Apply Tailwind utility classes in all components.
   • Make sure the layout is responsive for desktop, tablet, and mobile.

5. Ensure Responsiveness & Consistency

   • Verify that the Home Page, Header, and Footer match the Figma design across different devices.
   • Use named exports (no default exports) and follow the folder structure strictly.

[EDOHWARES]

Hello maintainers,

I'm EDOHWARES, a web developer with several years of experience in building user-oriented web application. I'd like to jump on this issue if assigned.

Plan:
✅ Home Page: Create Home in routes/index.tsx, import into App.tsx, and match Figma design.
✅ Button Component: Add ui/core/button.tsx using class-variance-authority for styling consistency.
✅ Header & Footer: Implement in ui/layout/, ensuring proper navigation structure.
✅ Tailwind v4: Follow best practices, apply custom theme in index.css, and ensure responsiveness.

I’ll adhere to the folder structure, named exports, and maintain design accuracy. You can check my portfolio: Hello maintainers,

I'm EDOHWARES, a web developer with several years of experience in building user-oriented web application. I'd like to jump on this issue if assigned.

Plan:
✅ Home Page: Create Home in routes/index.tsx, import into App.tsx, and match Figma design.
✅ Button Component: Add ui/core/button.tsx using class-variance-authority for styling consistency.
✅ Header & Footer: Implement in ui/layout/, ensuring proper navigation structure.
✅ Tailwind v4: Follow best practices, apply custom theme in index.css, and ensure responsiveness.

I’ll adhere to the folder structure, named exports, and maintain design accuracy. You can check my portfolio: https://edohwares.netlify.app/

[Dario0731]

Hi, my name is Dario Zamora. I´m a software developer part of Dojo coding. With a lot of frontend experience in different languages.

I am very interested in contributing to this project and would like to kindly request access to this item. I believe my skills can add value to the team, and I’m eager to start collaborating.

[kcmikee]

Hi Team,

I’m Mike, a first contributor to contributor and a Diamond-tier contributor with over 5 years of experience in frontend development, specializing in React, Next.js, and Tailwind CSS. I’ve built and styled numerous landing pages and UI components, ensuring responsiveness, consistency, and adherence to design systems.

I’d love to take on the task of implementing the Home Page, Button Component, Header, and Footer for the margin_frontend project.

I’m available to dedicate 48 hours to this task and can start immediately. Let me know how I can help!

Looking forward to contributing

[djeck1432]

@kcmikee Please, leave your telegram handler here and read guideline before starting working on task

[kcmikee]

@kcmikee Please, leave your telegram handler here and read guideline before starting working on task

@djeck1432

here is my telegram handle: @kc_mikee

• I'll go through the guideline before starting