[Web] Landing page — hero section with @username demo and wallet connect CTA

[ryzen-xp]

📝 Description

Build the landing page hero section for Alien Protocol Web. This is the first thing visitors see — it must communicate the core value prop instantly: "Send crypto to @username instead of a wallet address."

The hero should include a live demo widget showing a username being typed and resolving to a Stellar address, plus a primary CTA to claim a username.

✅ Requirements

• Hero headline: "One username. One identity. Built for Stellar."
• Animated demo: user types @username → resolves to a truncated Stellar address (mock or live via SDK)
• Primary CTA button: "Claim your @username" → links to registration flow
• Secondary CTA: "Read the docs" → links to docs
• Fully responsive (mobile-first)
• Matches Alien Protocol brand (dark theme, green accent)

🎯 Acceptance Criteria

• Hero renders correctly on mobile, tablet, desktop
• Demo animation plays on page load
• CTA buttons link to correct routes
• Lighthouse performance score ≥ 90
• No console errors

📁 Expected files to change/structure

• src/components/Hero.tsx (or equivalent framework component)
• src/pages/index.tsx — hero mounted at root
• src/styles/hero.css or Tailwind classes

---

🌿 Branch: feat/web-landing-hero | Priority: MED | Difficulty: ☕ easy