EV Official Website

A modern, responsive electric vehicle official website built with Next.js 14, Tailwind CSS, and full internationalization support.

Features

• 🚗 Home Page with multiple sections:
  • Hero section with call-to-action buttons
  • Car introduction with performance specs
  • Appearance showcase with color options
  • Store locator with showroom information
  • Pricing section with buy buttons
• 🛠️ Configuration Page with interactive options:
  • Model selection
  • Color customization
  • Battery and range options
  • Interior choices
  • Autopilot features
  • Real-time price calculation
• 🌍 Full Internationalization:
  • Support for English, Chinese (Simplified), and Japanese
  • Global language state management
  • Persistent language selection
  • Complete UI translation coverage
• 📱 Responsive Design that works on all devices
• 🎨 Modern UI using Tailwind CSS and bits-ui

Technology Stack

• Next.js 14 - React framework with App Router
• TypeScript - Type-safe JavaScript
• Tailwind CSS - Utility-first CSS framework
• bits-ui - Modern React component library
• React Context API - Global state management
• localStorage - Client-side persistence

Internationalization

Supported Languages

• 🇺🇸 English - Default language
• 🇨🇳 中文 - Simplified Chinese
• 🇯🇵 日本語 - Japanese

Language Features

• 🔄 Instant Switching: Real-time language change across all components
• 💾 Persistent Selection: Language choice saved in localStorage
• 🌐 Complete Coverage: All UI elements fully translated
• 📱 Responsive: Language switcher works on all device sizes
• 🎯 Context Management: Global state using React Context API

Implementation

• Custom LanguageProvider wraps the entire application
• useTranslation hook provides translation function
• Language switcher component in header
• Automatic page reload on language change for consistency
• Type-safe translation keys with TypeScript

Getting Started

Prerequisites

• Node.js 18+
• npm or yarn

Installation

1. Clone the repository:

git clone https://github.com/imbinnng/ev-official.git
cd ev-official

2. Install dependencies:

npm install

3. Start the development server:

npm run dev

4. Open http://localhost:3000 in your browser.

Available Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm run start - Start production server
• npm run lint - Run ESLint

Project Structure

src/
├── app/
│   ├── layout.tsx          # Root layout with LanguageProvider
│   ├── page.tsx            # Home page
│   ├── globals.css         # Global styles
│   └── configure/
│       └── page.tsx        # Configuration page
├── components/
│   ├── ui/
│   │   ├── button.tsx       # Button component
│   │   └── language-switcher.tsx  # Language switcher
│   ├── layout/
│   │   ├── header.tsx       # Header component
│   │   └── footer.tsx       # Footer component
│   └── sections/
│       ├── hero-section.tsx
│       ├── car-intro-section.tsx
│       ├── appearance-section.tsx
│       ├── store-list-section.tsx
│       └── pricing-section.tsx
└── lib/
    ├── utils.ts             # Utility functions
    └── language-context.tsx # Internationalization system

Key Features

Home Page Sections

1. Hero Section: Eye-catching landing with main call-to-actions

   • Multilingual title and subtitle
   • Localized navigation buttons

2. Car Introduction: Detailed vehicle specifications and features

   • Performance metrics with translated labels
   • Technology features in all languages

3. Appearance Showcase: Visual display of design options and colors

   • Localized color names
   • Translated feature descriptions

4. Store Locator: Interactive list of showroom locations

   • Multilingual contact information
   • Localized action buttons

5. Pricing Section: Tiered pricing models with configuration links

   • Translated pricing tiers
   • Localized financing options

Configuration Page

Interactive vehicle builder with:

• Model selection with base prices and translated descriptions
• Color customization with localized color names
• Battery range options with multilingual labels
• Interior material choices with translated names
• Autopilot capabilities with localized descriptions
• Real-time price calculation with translated labels
• Order summary with fully localized interface

Language Switching

• Header Integration: Language switcher positioned in header navigation
• Dropdown Interface: Clean dropdown with flag icons and language names
• Visual Feedback: Selected language highlighted with checkmark
• Mobile Support: Responsive design works on mobile devices
• Instant Updates: Language change affects entire site immediately

Responsive Design

• Mobile-first approach
• Adaptive layouts for tablets and desktops
• Optimized navigation with hamburger menu
• Touch-friendly language switcher
• Consistent experience across all device sizes

Color Scheme

The website uses a consistent primary color scheme:

• Primary Color: #6b21d9 (Purple)
• Variants: Full color palette from 50 to 900
• Application: Used throughout UI for consistency
• Accessibility: High contrast ratios maintained

Customization

Adding New Languages

1. Add new language code to LanguageCode type in language-context.tsx
2. Extend translation object with new language keys
3. Update language switcher options in language-switcher.tsx
4. Add flag emoji for new language

Content Updates

• Update vehicle specs in component files
• Modify color schemes using Tailwind CSS variables
• Add new models to the configuration page
• Extend store locations in the store section
• Customize pricing and options

Translation Management

All translations are centralized in src/lib/language-context.tsx:

• Organized by feature sections
• Consistent key naming convention
• Type-safe translation lookup
• Fallback to English for missing translations

Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Run tests and linting
5. Test language switching functionality
6. Submit a pull request

License

This project is licensed under the ISC License.

---

Built with ❤️ for the future of electric mobility and global accessibility.