[Frontend] HeaderLanding Component

[aguilar1x]

🎯 Objective

Build the HeaderLanding top bar for the landing page, with branding on the left and actions on the right.

---

🏗 Component Structure

apps/webapp/components/home/header-landing.tsx

Integration:

• Import and render at the top of the landing page (e.g., apps/webapp/app/(landing)/page.tsx).
• Use only on the landing (not in the global layout).

---

🗂 Requirements

HeaderLanding

Left (brand):

• Circular gradient icon (blue→purple) with a “layers/stack” glyph.
• Title: Soroswap Template (medium/bold).
• Subtitle: by Scaffold Rust (small, muted).

Right (actions):

• Text link: Dashboard.
• Gradient pill button: Github with GitHub icon; hover elevation/opacity.

Layout & Responsiveness:

• Horizontal flex, items centered, space between.
• Constrain with site container width and horizontal padding.
• Mobile: keep single row when possible; otherwise wrap gracefully; ensure touch targets ≥44px.

Accessibility:

• Wrap in <header role="banner">.
• If logo links home, add aria-label="Go to homepage"; else mark decorative.
• “Github” button with aria-label="Open GitHub repository".
• Visible focus rings.

---

🎨 Design & Tokens

• Icon badge: blue→purple gradient.
• Typography: high-contrast title; muted text-sm subtitle.
• Button: rounded-full gradient (purple→blue), left icon, smooth transitions.
• Use Tailwind utilities consistent with project spacing (py-3/py-4, sensible gap-x-*).

---

✅ Acceptance Criteria

• Matches the reference (brand left, “Dashboard” link + “Github” gradient button right).
• Responsive at 360 / 768 / 1024 / 1280 without overflow.
• No TypeScript or console warnings.
• Present only on the landing page.

---

🔗 Reference

Figma design

[Sandijigs]

Hi , My name is Sandra , a full stack engineer and smart contract developer . I would like to work on this issue

[Stealth-cloud-droid]

I would like to work on this issue.
I will also use my knowledge to solve the issue
Recommended by OnlyDust for high-quality contributions.

[Marvelousmicheal]

hello, im a frontend developer and im part of the onlydust stellar fellowship, can i work on this

Recommended by OnlyDust for high-quality and dependable contributions.

[aguilar1x]

Hi, the issue has been assigned to you, you can start working on it now. You have to report your progress in less than 2 days, this in order to be aware that the contributor is developing the issue.


If you have any questions, don't hesitate to ask! 🚀


@Marvelousmicheal

[aguilar1x]

Any updates? @Marvelousmicheal

[Marvelousmicheal]

#24