TRIDENT is a modern, premium restaurant website built with Next.js 16, featuring stunning animations powered by GSAP and buttery-smooth scrolling with Lenis. The website showcases a sophisticated dining experience with a dark, elegant design system centered around black, white, and signature red (#CB3A1A) accents.
- Premium Aesthetics: Curated color palette with black, white, and signature red accents
- Smooth Scrolling: Lenis integration for premium scroll feel
- Hero Parallax: Dynamic parallax effect on the hero background
- Reversible Animations: Scroll-triggered animations that play forward and backward
- Floating Navbar: Pill-shaped navigation bar with smooth slide-down animation
- Responsive Design: Fully optimized for desktop, tablet, and mobile devices
- Modern Typography: Clean, sans-serif fonts for excellent readability
- Micro-interactions: Hover effects and transitions throughout the site
- Hero Section: Full-screen hero with background image and compelling tagline
- Welcome Section: Dual-column layout introducing the restaurant's story
- Services Section: Interactive cards showcasing key offerings (Birthday Party, Catering, Events, Wedding)
- Gallery Section:
- Statistics showcase (Projects, Awards, Specialties, Team Members)
- Horizontal scrolling image carousel with custom navigation
- Hover effects with scale and overlay animations
- Testimonials Section: Customer feedback cards with decorative food icons
- Footer: 4-column layout with contact info, menu links, hours, and Instagram grid
- Hero Section: Striking full-screen introduction
- Our Story: Image and text layout with company history and statistics
- Meet the Team: Grid showcase of team members with hover effects
- Consistent Footer: Same footer across all pages
- On-Load Animations: Navbar and hero text reveal on page load
- Scroll-Triggered: Elements animate into view as you scroll down
- Parallax Effects: Hero background moves at different speed for depth
- Stagger Effects: Sequential animations for lists and grids
- Hover Interactions: Scale, translate, and color transitions on interactive elements
- Reversible Animations: Elements animate out when scrolling back up
- Next.js 16 (Turbopack): React framework with App Router and server components
- React 18: Modern UI library with hooks and functional components
- TypeScript: Type-safe JavaScript for better developer experience
- Tailwind CSS: Utility-first CSS framework for rapid development
- GSAP (GreenSock): Professional-grade animation library
- @gsap/react: React integration for GSAP with useGSAP hook
- ScrollTrigger: GSAP plugin for scroll-based animations
- Lenis: Smooth scrolling library for premium feel
- Next.js Image: Optimized image loading and rendering
- Unsplash: High-quality stock photography
- Custom Illustrations: SVG icons and decorative elements
- Node.js (v18 or higher)
- npm, yarn, or pnpm
- Git
# Clone the repository
git clone https://github.com/yourusername/restaurant-website.git
# Navigate to the project directory
cd restaurant-website
# Install dependencies
npm install
# or
yarn install
# or
pnpm install
# Start the development server
npm run dev
# or
yarn dev
# or
pnpm devVisit http://localhost:3000 to see the application running!
# Create an optimized production build
npm run build
# Start the production server
npm startrestaurant/
├── public/
│ └── images/
│ ├── hero-bg.jpg
│ └── logo.png
├── src/
│ ├── app/
│ │ ├── about/
│ │ │ └── page.tsx
│ │ ├── layout.tsx
│ │ ├── page.tsx
│ │ └── globals.css
│ └── components/
│ ├── Button.tsx
│ ├── Footer.tsx
│ ├── GallerySection.tsx
│ ├── Navbar.tsx
│ ├── ServiceCard.tsx
│ ├── SmoothScroll.tsx
│ └── TestimonialsSection.tsx
├── next.config.ts
├── tailwind.config.ts
├── tsconfig.json
└── package.json
Primary Red: #CB3A1A
Primary Black: #000000, #0B0B0B, #111111
Background White: #FFFFFF
Light Gray: #F9F9F9
Text Gray: #6B7280
Border Gray: #374151- Headings: Bold, uppercase, tracking-wide
- Body: Regular weight, comfortable line-height
- Labels: Small, uppercase, letter-spacing
- Buttons: Red background with white text, hover effects
- Cards: White background with subtle shadows, hover scale
- Navbar: Black floating pill with rounded corners
- Footer: Dark background with organized columns
The project uses Next.js 16 with Turbopack and custom image domain configuration:
// next.config.ts
const nextConfig = {
images: {
remotePatterns: [
{
protocol: 'https',
hostname: 'images.unsplash.com',
},
{
protocol: 'https',
hostname: 'www.transparenttextures.com',
},
],
},
};Custom configuration for extended color palette and utilities.
- Mobile: < 768px
- Tablet: 768px - 1024px
- Desktop: > 1024px
All components are built mobile-first and scale elegantly across all screen sizes.
- Next.js Image Optimization: Automatic image optimization and lazy loading
- Code Splitting: Automatic code splitting for faster page loads
- Turbopack: Fast bundler for development and production
- Static Generation: Pages pre-rendered at build time
- Smooth Scrolling: Hardware-accelerated scrolling with Lenis
- GSAP Optimization: Efficient animations with GPU acceleration
- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)
This project is licensed under the MIT License - see the LICENSE file for details.
Contributions, issues, and feature requests are welcome! Feel free to check the issues page.
- Frontend Development: Next.js, React, TypeScript
- Styling: Tailwind CSS, Custom CSS
- Animations: GSAP, Lenis
Made with ❤️ and ☕
© 2024 TRIDENT. All rights reserved.