One Piece

One Destination. Infinite Possibilities.

A premium, futuristic website showcasing the intersection of AI, Finance, and Engineering. Built with world-class design principles inspired by Apple.

🚀 Tech Stack

• React (Vite)
• Tailwind CSS - Modern utility-first styling
• Framer Motion - Apple-like animations
• React Router DOM - Multi-page routing

✨ Features

• 4 Distinct Pages: Home, About, Services, Contact
• Glassmorphism Design: Frosted glass effects throughout
• Smooth Animations: Scroll-triggered and page transitions
• Fully Responsive: Mobile-first approach
• Premium Typography: Inter font family with Apple-style hierarchy
• Dark Theme: Pure black background with gradient glows

📁 Project Structure

onepiece/
├── src/
│   ├── pages/
│   │   ├── Home.jsx
│   │   ├── About.jsx
│   │   ├── Services.jsx
│   │   └── Contact.jsx
│   ├── layout/
│   │   ├── Layout.jsx
│   │   ├── Navbar.jsx
│   │   └── Footer.jsx
│   ├── App.jsx
│   ├── main.jsx
│   └── index.css
├── index.html
├── package.json
├── vite.config.js
├── tailwind.config.js
└── postcss.config.js

🛠️ Installation & Setup

1. Install dependencies:

   npm install

2. Run development server:

   npm run dev

3. Build for production:

   npm run build

4. Preview production build:

   npm run preview

🎨 Design System

Colors

• Background: Pure black (#000000)
• Accents: Violet, Blue, Emerald gradients
• Text: White with gray variations for hierarchy

Typography

• Headlines: 72px–96px, bold, tight tracking
• Subtext: Small, muted gray, minimal

Components

• Glass Cards: backdrop-filter: blur(20px+)
• Hover Effects: Scale + glow intensification
• Animations: Fade in, float up, smooth easing

📄 Pages

Home (/)

• Full-viewport hero section
• Bento grid services preview
• CTA section

About (/about)

• Philosophy section with large typography
• Vision statement
• Intersection of disciplines

Services (/services)

• Detailed service breakdowns
• Feature lists with animations
• Premium glass cards

Contact (/contact)

• Premium contact form
• Glassmorphism styling
• Success animations

🚀 Deployment

This project can be deployed to:

• Vercel (recommended for Vite projects)
• Netlify
• GitHub Pages
• Any static hosting service

📱 Responsiveness

• Mobile-first design
• Hamburger menu on mobile
• Vertical stacking of bento grids
• Properly scaled typography

🎯 Performance

• Optimized animations
• Lazy loading
• Code splitting
• Production-ready build

---

Built with precision and passion.

© 2026 One Piece. All rights reserved.