The Diaspora AI landing page is the public-facing gateway to our AI-powered travel platform. Built to capture early access signups while showcasing our vision for intelligent travel planning tailored to the African diaspora.
The Vision
Traveling between continents as part of the diaspora comes with unique challenges:
- Complex visa requirements that change frequently
- Limited flight options on African corridors
- Pricing that doesn't match local purchasing power
- Scattered information across dozens of sources
This landing page communicates how Diaspora AI solves these problems—while building our waitlist of early adopters.
Key Features Showcased
🛫 Smart Flight Booking
AI-powered search for optimal routes and prices on African corridors.
📋 Visa Intelligence
Real-time visa requirements and documentation guidance for 12+ destinations.
👨👩👧👦 Family Travel Hub
Coordinate group trips and share itineraries with family members.
💰 Price Drop Alerts
Get notified when fares drop on your favorite routes.
🏛️ Consulate Appointments
Track embassy visits and document submissions in one place.
📊 Travel Statistics
Visualize your travel history and savings over time.
Technical Implementation
Server-Side Rendering
Every page is server-rendered via Next.js App Router for optimal SEO:
- Dynamic Metadata - Per-page meta tags and Open Graph data
- JSON-LD Schema - Structured data for rich search snippets
- Hybrid Architecture - SEO content renders server-side, animations hydrate client-side
GSAP Scroll Animations
The site features buttery-smooth scroll-based animations using GSAP ScrollTrigger:
- Section Reveals - Fade and slide up on scroll
- Parallax Effects - Depth and dimension
- Text Animations - Word-by-word reveals
- Staggered Cascades - Sequential element animations
AI Scraping Optimization
The site is specifically optimized for AI tools to understand our content:
- All routes server-rendered with full HTML
- JSON-LD schemas on every page
- robots.txt explicitly allows GPTBot, ClaudeBot, and other AI crawlers
- Comprehensive metadata descriptions
Design System
The visual language reinforces our premium positioning:
| Element | Style |
|---|---|
| Background | Deep dark #050509 |
| Cards | Glass-morphism with rounded-[32px] |
| Accents | Electric blue #3b82f6 |
| Typography | Geist font family |
| Borders | Subtle rgba(255,255,255,0.05) |
Site Structure
| Route | Purpose |
|---|---|
/ | Main landing with hero, features, achievements |
/features | AI-powered feature deep-dive |
/visa-guide | Visa requirements showcase |
/our-journey | Company story and technology |
/meet-the-team | Founders and team |
/contact | Support and contact info |
/careers | Job opportunities |
/privacy | Privacy policy |
/terms | Terms of service |
/get-started | Onboarding flow |
Tech Stack
- Next.js 16 - React framework with App Router
- React 18 - UI component library
- TypeScript - Full type safety
- Turbopack - Ultra-fast dev server
- Tailwind CSS - Utility-first styling
- GSAP + ScrollTrigger - Scroll-based animations
- Framer Motion - Additional micro-interactions
- Lucide React - Icon library
Performance
The landing page is optimized for speed and conversion:
- SSR/SSG - Pre-rendered pages at build time
- Turbopack - Sub-second hot reloads in development
- Code Splitting - Only load what's needed
- Image Optimization - Next.js automatic optimization
Accessibility
Built with accessibility as a first-class concern:
- Semantic HTML structure
- ARIA labels and roles
- Keyboard navigation support
- Reduced motion preferences respected
- High contrast mode compatible
- Screen reader optimized
🔗 Live: diasporaai.dev • App: app.diasporaai.dev