VPN Landing Page - Typography Emotion Journey

A stunning Next.js landing page that tells a story through typography and animations. This project showcases a 7-page emotional journey from fear to freedom, perfect for VPN services.

Features

🎨 7 Unique Pages - Each with its own emotional story and animations
🌓 Dark/Light Theme - Smooth theme transitions with ripple effects
🌍 Multi-language Support - 6 languages (English, Farsi, Chinese, Russian, Ukrainian, Hindi)
📱 Fully Responsive - Mobile-first design with swipe gestures
⚡ Performance Optimized - Smooth 60fps animations
♿ Accessible - WCAG compliant with reduced motion support

Pages Overview

Threats and Dangers - Fear and urgency through glitch effects
Tracked and Monitored - Surveillance anxiety with circular scanning
Restrictions and Censorship - Frustration with censor bars
Affordable for All - Hope emerging through warm light
VPN Solution - Confidence with flowing aurora effects
Open Source Philosophy - Trust through transparency
Product and Pricing - Joy and freedom with celebration animations

Getting Started

Prerequisites

Node.js 18+
npm or yarn

Installation

# Install dependencies
npm install

# Run development server
npm run dev

# Build for production
npm run build

# Start production server
npm start

Open http://localhost:3000 to view the landing page.

Project Structure

claude/
├── app/                    # Next.js app directory
│   ├── globals.css        # Global styles and CSS variables
│   ├── layout.tsx         # Root layout with theme provider
│   └── page.tsx           # Main page with navigation logic
├── components/            # Reusable components
│   ├── pages/            # Individual page components (Page1-Page7)
│   ├── Header.tsx        # Header with navigation
│   ├── Footer.tsx        # Footer with links
│   ├── PageIndicator.tsx # Vertical page indicator
│   ├── ScrollIndicator.tsx # Animated scroll hint
│   └── GlassCard.tsx     # Glass morphism card component
├── contexts/             # React contexts
│   └── ThemeContext.tsx  # Theme and language state management
├── public/               # Static assets (shared root folder)
│   ├── Lalezar.otf       # Primary font
│   ├── logo-*.png        # Logo files
│   └── *.svg/*.png       # Open source VPN icons
└── theme.json            # Design system specifications

Technologies Used

Next.js 14 - React framework
TypeScript - Type safety
Tailwind CSS - Utility-first styling
Framer Motion - Animation library
CSS Custom Properties - Dynamic theming

Desktop: Mouse scroll or page indicator clicks
Mobile: Swipe up/down gestures
Page 7: Normal scrolling within the page

Customization

Colors

Edit app/globals.css to modify theme colors using CSS variables:

:root {
  --color-primary: #2563EB;
  /* ... */
}

Typography

The project uses the Lalezar font. To change fonts, update:

Font import in app/globals.css
Font family in tailwind.config.ts

Content

Each page component (components/pages/Page*.tsx) can be individually customized for content and animations.

Performance

All animations are GPU-accelerated
Images are optimized with Next.js Image component
Lazy loading for off-screen content
Reduced motion support for accessibility

Browser Support

Chrome/Edge (latest)
Firefox (latest)
Safari (latest)
Mobile browsers (iOS Safari, Chrome Android)

License

This project is private and proprietary.

Acknowledgments

Design inspired by modern web animation trends
Icons from open source VPN projects
Font: Lalezar by Borna Izadpanah

huuthangntk/BimarzNext