Official landing page for Initium
- 🎨 Modern UI/UX - Clean design inspired by Linear, Vercel, and Notion
- 🧊 3D Background - Interactive background using Three.js + React Three Fiber
- 🎬 Smooth Animations - Scroll & hover animations powered by Framer Motion
- 🌐 Multi-language Support - Switch between English and Korean
- 📱 Fully Responsive - Mobile, tablet, and desktop support
- ⚡ Fast Development - Instant updates with Vite HMR
| Category | Technology |
|---|---|
| Framework | React 19 |
| Language | TypeScript |
| Build Tool | Vite |
| 3D Graphics | Three.js, React Three Fiber, Drei |
| Animation | Framer Motion |
| Icons | Lucide React |
| Routing | React Router DOM |
├── components/
│ ├── Sections/ # Page section components
│ │ ├── Header.tsx # Navigation header
│ │ ├── Hero.tsx # Hero section
│ │ ├── Features.tsx # Features showcase
│ │ ├── Pricing.tsx # Pricing plans
│ │ ├── FAQ.tsx # Frequently asked questions
│ │ └── Footer.tsx # Footer
│ ├── Three/ # 3D related components
│ │ └── BackgroundScene.tsx
│ └── UI/ # Reusable UI components
│ └── Button.tsx
├── contexts/
│ └── LanguageContext.tsx # Multi-language support
├── public/
│ └── logo.svg # Logo file
├── App.tsx # Main app component
├── index.tsx # Entry point
└── types.ts # Type definitions
- Node.js 18+
- npm or yarn
# Install dependencies
npm install
# Start development server
npm run dev
# Build for production
npm run build
# Preview production build
npm run preview| Command | Description |
|---|---|
npm run dev |
Start dev server (default: http://localhost:3000) |
npm run build |
Build for production |
npm run preview |
Preview production build |
Replace the public/logo.svg file with your own logo.
Modify the brand colors in your Tailwind CSS configuration.
All text content is managed in contexts/LanguageContext.tsx for both English and Korean.