feat(frontend): Build Landing Page Hero Section with Futuristic Web3 Aesthetic

[Tybravo]

Description

Create a high-impact Hero section for the Arbellar landing page that immediately communicates the platform's core value proposition: user-funded, non-custodial atomic arbitrage on Stellar.

The Hero section should establish Arbellar as a secure, innovative, and professional DeFi platform while clearly communicating that users retain control of their capital while Arbellar automates arbitrage execution.

The design should use a futuristic Web3 aesthetic with a dark, premium visual language suitable for a financial/DeFi application.

---

📍 Page Scope

Applies to:

• / — Landing Page / Home
• app/(marketing)/page.tsx or the existing marketing home page location
• components/Hero.tsx

Follow the existing Arbellar project structure and reuse established components, utilities, and styling patterns where applicable.

---

🎯 Core Messaging

The Hero should communicate three primary ideas:

1. Automated arbitrage — Arbellar continuously identifies and executes eligible arbitrage opportunities.
2. User-controlled capital — Users retain custody of their funds through smart vaults and connected wallets.
3. Atomic execution on Stellar — Trades execute atomically, helping eliminate partial execution risk.

Headline

Use a strong headline such as:

Automated Stellar Arbitrage. Your Capital. Your Control.

Supporting Text

Use supporting copy that clearly explains the platform:

Arbellar automates arbitrage across Stellar liquidity while keeping your capital non-custodial and under your control.

The copy should be concise and understandable to retail DeFi users without requiring advanced arbitrage knowledge.

---

🎨 Design Specifications

Color & Visual Language

Use the project's existing Tailwind configuration and design tokens where available.

The visual direction should emphasize:

• Deep dark backgrounds
• Stellar-inspired blue/purple tones
• Subtle gradients
• Soft glowing elements
• High-contrast typography
• Premium DeFi dashboard aesthetics
• Minimal but purposeful visual effects

Do not introduce arbitrary colors that conflict with the existing Arbellar design system.

Headline

• Large and bold
• High contrast
• Responsive typography
• Optional subtle gradient or glow treatment
• Clear visual hierarchy

Supporting Text

• Readable width
• Muted contrast relative to the headline
• Comfortable line height
• Responsive typography

CTA Buttons

Provide two primary actions:

Primary CTA

Start Arbitraging

Should:

• Use the project's primary accent color
• Have a strong visual hierarchy
• Include an appropriate hover/focus state
• Navigate toward the application's wallet/vault onboarding flow where such routing exists

Secondary CTA

How It Works

Should:

• Use an outline/ghost treatment
• Provide clear hover and focus states
• Navigate or scroll to the appropriate explanatory section

If the corresponding destination does not yet exist, implement the CTA as a clearly defined placeholder interaction without introducing unrelated routes.

---

Reference the STYLE-GUIDE.md

Follow the global Arbellar-Frontend STYLE-GUIDE.md for all visual implementation decisions.

For the Hero section:

• Use the dark-first futuristic DeFi aesthetic defined by the style guide.
• Use #0D9488 as the primary brand teal and #2FF3E0 for neon highlights, hover states, and controlled glow effects.
• Use #0B1020 / #111827 for the primary dark background and surfaces.
• Use #FDDA24 sparingly as a Stellar ecosystem accent.
• Use subtle gradients, atmospheric effects, and teal glow without making the UI visually noisy.
• Maintain strong typography hierarchy, high contrast, responsive behavior, and WCAG 2.1 AA accessibility.
• Animations should be subtle and purposeful, with prefers-reduced-motion support.
• Do not introduce colors, shadows, or visual patterns outside the established global style tokens without justification.

---

🌌 Background & Visual Effects

Create a sophisticated Web3/DeFi background featuring:

• Dark gradient base
• Subtle Stellar-inspired radial gradients
• Soft glowing orbital or abstract elements
• Low-intensity floating visual elements
• Subtle depth behind the primary content

Animations should remain restrained and professional rather than distracting.

Avoid excessive particle effects or animations that could negatively affect performance.

---

✨ Animation

Implement smooth animations where appropriate.

Recommended:

• Fade/slide-in animation for headline and supporting content
• Staggered entrance for CTA buttons
• Slow floating movement for decorative background elements
• Subtle hover transitions on interactive elements

If Framer Motion is already installed, it may be used. Do not add a new animation dependency unnecessarily.

Animations must respect:

prefers-reduced-motion

Users who disable motion should receive an accessible static version of the Hero.

---

📱 Responsive Design

The Hero must work correctly across:

• Mobile
• Tablet
• Laptop
• Desktop
• Large desktop displays

Ensure:

• No horizontal overflow
• Headline scales appropriately
• CTA buttons remain usable on small screens
• Decorative elements do not obscure content
• Adequate spacing around content
• Touch targets remain accessible

The project README specifies mobile-first development and accessibility as core principles.

---

🛠️ Technical Requirements

• Framework: Next.js 14+
• Architecture: App Router
• Language: TypeScript with strict typing
• Styling: Tailwind CSS
• Package Manager: pnpm
• Icons: Use existing icon libraries if already installed
• Animation: Use existing project dependencies where possible

Component Structure

Create:

components/
└── Hero.tsx

Then integrate:

<Hero />

into the appropriate landing-page entry point.

Follow the repository's existing component and folder conventions rather than creating duplicate structures.

---

🔐 Security & Product Messaging

The Hero must not make misleading financial promises.

Do not use claims such as:

• Guaranteed profits
• Risk-free arbitrage
• Guaranteed returns
• Guaranteed principal protection

The Hero may communicate Arbellar's non-custodial architecture and atomic execution model, but financial risk should not be misrepresented.

---

🧪 Verification

Run:

pnpm dev

Verify the landing page locally.

Then run:

pnpm lint
pnpm type-check
pnpm build

Verify:

• Hero renders without runtime errors
• No TypeScript errors
• No lint violations
• Production build succeeds
• Responsive layouts work correctly
• Animations perform smoothly
• CTA interactions work correctly
• Keyboard navigation works
• Focus states are visible
• Reduced-motion preference is respected

---

✅ Acceptance Criteria

• Hero is the first major content section on the Arbellar landing page
• Arbellar's automated arbitrage value proposition is immediately clear
• Non-custodial user-controlled capital is communicated clearly
• Stellar is correctly represented as the underlying ecosystem
• Primary and secondary CTAs are present and functional
• Futuristic, premium Web3 visual design is implemented
• Responsive across mobile, tablet, and desktop
• Animations are smooth and performance-conscious
• Reduced-motion users receive an accessible experience
• Semantic HTML is used
• Keyboard focus states are visible
• No layout shifts or horizontal overflow
• Existing Arbellar design tokens/components are respected
• pnpm lint passes
• pnpm type-check passes
• pnpm build passes

---

🌿 Suggested Branch

git checkout -b feature/landing-hero

---

📝 Suggested Commit Message

feat(frontend): build Arbellar landing page hero section

---

📦 PR Requirements

• Assignment required before starting
• Time Limit: ETA 24 hrs

The implementation should remain focused strictly on the landing-page Hero section and should not introduce unrelated application features.