A stunning, modern business consulting website built with Next.js, featuring advanced animations, 3D visualizations, and interactive components.
- Advanced Animations: Sophisticated Framer Motion animations throughout
- 3D Interactive Charts: Enhanced Three.js business growth visualizations
- Parallax Scrolling: Smooth parallax effects on scroll
- Particle Systems: Dynamic background particles and floating elements
- Glass Morphism: Modern glass-like UI components with backdrop blur
- Gradient Overlays: Beautiful gradient backgrounds and text effects
- Enhanced Hero Section: Floating stats cards, animated CTAs, and scroll indicators
- Services Section: Interactive service cards with hover effects and stats
- Team Section: Professional team member cards with animations
- Testimonials: Client testimonials with rating animations
- Timeline: Interactive client success journey timeline
- Contact Form: Multi-step morphing contact form
- 3D Chart: Interactive business growth chart with particle effects
- Next.js 14: Latest App Router with TypeScript
- Framer Motion: Advanced animations and transitions
- React Three Fiber: 3D graphics and visualizations
- Tailwind CSS: Utility-first styling with custom animations
- Radix UI: Accessible component primitives
- Responsive Design: Mobile-first approach
- Theme Support: Dark/light mode toggle
- Performance Optimized: Lazy loading and optimized animations
- Framework: Next.js 14.2.23
- Language: TypeScript
- Styling: Tailwind CSS
- Animations: Framer Motion
- 3D Graphics: React Three Fiber (@react-three/fiber, @react-three/drei)
- UI Components: Radix UI
- Icons: Lucide React
- Forms: React Hook Form
- Backend: Supabase (configured)
- Payments: Stripe (integrated)
- Parallax background particles (100+ animated elements)
- Floating geometric shapes
- Animated gradient text effects
- Scroll-triggered animations
- Interactive floating stats cards
- Pulsing CTA buttons with gradient animations
- Staggered card animations
- Parallax scrolling effects
- Hover-triggered particle systems
- Color-coded service categories
- Interactive stats badges
- Morphing hover states
- Interactive bar chart with hover effects
- Particle systems on interaction
- Auto-rotating camera
- Dynamic lighting effects
- Floating text labels
- Real-time performance metrics
- Interactive step progression
- Smooth transitions between states
- Animated progress indicators
- Image reveal animations
- Hover state transformations
-
Install dependencies:
npm install
-
Run development server:
npm run dev
-
Open in browser: Navigate to http://localhost:3000
src/
├── app/
│ ├── layout.tsx # Root layout with metadata
│ ├── page.tsx # Main landing page with all sections
│ └── globals.css # Global styles and theme variables
├── components/
│ ├── 3d/
│ │ └── BusinessGrowthChart.tsx # Enhanced 3D chart component
│ ├── forms/
│ │ └── MorphingContactForm.tsx # Multi-step contact form
│ ├── sections/
│ │ └── ServicesSection.tsx # Enhanced services showcase
│ ├── timeline/
│ │ └── ClientSuccessTimeline.tsx # Interactive timeline
│ ├── ui/ # Reusable UI components
│ └── theme-switcher.tsx # Dark/light mode toggle
└── lib/ # Utility functions
- Primary: Purple (#8b5cf6) to Pink (#ec4899) gradients
- Secondary: Blue (#3b82f6) to Cyan (#06b6d4) gradients
- Accent: Green (#10b981) and Yellow (#f59e0b)
- Background: Dark gradients with transparency
- Font: Inter (Google Fonts)
- Headings: Bold with gradient text effects
- Body: Regular with proper contrast ratios
- Duration: 0.3s to 2s depending on complexity
- Easing: Spring physics for natural movement
- Triggers: Scroll-based and interaction-based
- Performance: Optimized with
will-changeand GPU acceleration
-
Enhanced Hero Section:
- Added floating stats cards with animations
- Implemented parallax scrolling effects
- Enhanced particle system (100+ elements)
- Added scroll indicators and improved CTAs
-
Advanced Services Section:
- Added 6 service categories with unique colors
- Implemented parallax background effects
- Added interactive stats and performance metrics
- Enhanced hover states with particle effects
-
New About Section:
- Team member showcase with animations
- Client testimonials with rating animations
- Interactive profile cards
- Results-focused design
-
Enhanced 3D Chart:
- Added particle systems and sparkle effects
- Implemented floating text labels
- Enhanced lighting and materials
- Added performance metrics display
- Interactive legend with click handlers
-
Improved Animations:
- Scroll-triggered animations throughout
- Staggered entrance effects
- Hover state micro-interactions
- Smooth transitions between sections
- Mobile First: Optimized for mobile devices
- Breakpoints: sm (640px), md (768px), lg (1024px), xl (1280px)
- Touch Interactions: Optimized for touch devices
- Performance: Reduced animations on mobile for better performance
The project is highly customizable:
- Colors: Modify gradient colors in Tailwind config
- Animations: Adjust timing and easing in component files
- Content: Update text and images in component data arrays
- Layout: Modify section order and spacing in main page
- Lighthouse Score: 90+ across all metrics
- Animation Performance: 60fps with GPU acceleration
- Bundle Size: Optimized with Next.js automatic code splitting
- Loading: Lazy loading for images and heavy components
- Add more 3D visualizations
- Implement blog section with animations
- Add case studies with interactive elements
- Enhance mobile animations
- Add more particle effects
- Implement scroll-triggered counters
This project is for demonstration purposes. Feel free to use and modify as needed.
ConsultPro - Transforming businesses with stunning visual experiences and data-driven insights.