Skip to content

feat: add hero section to Landing page#444

Open
GreatShinro wants to merge 1 commit into
dev-fatima-24:mainfrom
GreatShinro:feat/landing-hero
Open

feat: add hero section to Landing page#444
GreatShinro wants to merge 1 commit into
dev-fatima-24:mainfrom
GreatShinro:feat/landing-hero

Conversation

@GreatShinro
Copy link
Copy Markdown
Contributor

feat: Landing page hero section

Branch: feat/landing-heromain

Summary

Implements the hero section for the Landing page with a clear value proposition, prominent CTA, and visual elements that communicate the blockchain/healthcare context of VacciChain.

Changes

  • Headline — "Tamper-Proof Vaccination Records on the Blockchain" with accent colour on the blockchain phrase
  • Subheadline — existing i18n landing.subtitle string (no new copy added)
  • Primary CTA — "Connect Freighter Wallet" button triggers the wallet connection flow; toggles to a disconnect state when a wallet is already connected
  • Secondary CTA — "Verify a Record" link routes to /verify for unauthenticated visitors
  • Visual context — dark blue-to-purple gradient background; "Stellar Testnet" network badge; four feature pills (🔗 Stellar Blockchain, 🛡️ Soulbound NFTs, ✅ Instant Verification, 🏥 Issuer-Gated Minting)
  • Responsiveclamp() font sizes, flexWrap on CTA row and feature list, minHeight: 100vh keeps content above the fold at 768px

Files Changed

File Change
frontend/src/pages/Landing.jsx Rewrote hero section

Acceptance Criteria

  • Hero includes headline, subheadline, and primary CTA button
  • CTA button links to wallet connection flow
  • Hero is responsive on mobile and desktop
  • Visual elements reinforce the blockchain/healthcare product concept
  • Hero content is above the fold on a 768px viewport

Testing

  1. Run cd frontend && npm install && npm run dev
  2. Open http://localhost:3000
  3. Verify hero is fully visible without scrolling at 768px viewport width
  4. Click "Connect Freighter Wallet" — Freighter extension prompt should appear
  5. After connecting, confirm wallet address is shown and "Disconnect" button appears
  6. Click "Verify a Record" — should navigate to /verify
  7. Toggle dark mode and confirm gradient and text remain legible

closes #289

- Headline, subheadline, and primary CTA button
- CTA triggers wallet connection flow; secondary link to /verify
- Dark gradient background with feature pills for blockchain/healthcare context
- Responsive layout using clamp() and flexWrap, above fold at 768px
@drips-wave
Copy link
Copy Markdown

drips-wave Bot commented Jun 1, 2026

@GreatShinro Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[UI/UX] Design and implement Landing page hero section

1 participant