A premium, futuristic website for LuffyDesign featuring Fluid Glass + Shape Blur aesthetics.
- Framework: Next.js 14 with TypeScript
- Styling: Tailwind CSS 3 with custom design tokens
- Animations: Framer Motion
- Components: shadcn/ui + custom UI library
- Icons: Lucide React
- Aesthetic: Futuristic, premium, AI-native, blockchain-literate
- Color Palette: Deep Black (#0a0a0f) with Aurora accents (Violet, Cyan, Aqua)
- UI Pattern: Fluid Glass morphism with animated gradient backgrounds
- Typography: Modern sans-serif with precise scaling
- Interactions: Smooth, purposeful animations with magnetic buttons and spotlight cards
- Animated fluid background with organic gradient blobs
- Glass morphism UI components with backdrop blur
- Interactive components (MagneticButton, SpotlightCard)
- Scroll-triggered reveal animations
- Fully responsive design
# Install dependencies
npm install
# Run development server
npm run dev
# Build for production
npm run build
# Start production server
npm startsrc/
├── app/ # Next.js app directory
│ ├── layout.tsx # Root layout with header/footer
│ ├── page.tsx # Home page
│ ├── about/ # About page
│ ├── services/ # Services page
│ ├── case-studies/ # Case studies page
│ └── contact/ # Contact form
├── components/
│ └── ui/ # Custom UI components
│ ├── fluid-background.tsx
│ ├── magnetic-button.tsx
│ ├── spotlight-card.tsx
│ ├── scroll-fade.tsx
│ └── button.tsx
└── lib/
└── utils.ts # Utility functions
See CONTENT.md for complete content strategy and messaging.
See DELIVERABLES.md for technical documentation and implementation details.
This project is optimized for deployment on Vercel:
- Connect your repository to Vercel
- Vercel will automatically detect Next.js and configure build settings
- Deploy!
The build output is static and can also be deployed to any static hosting provider.
© 2025 LuffyDesign. All rights reserved.