A modern, high-end freelancing agency website built with Next.js, TypeScript, Tailwind CSS, and Framer Motion.
- Modern Design: Premium, luxury-inspired UI with glassmorphism effects
- Dark Mode: Full light & dark mode support with smooth transitions
- Animations: Smooth scroll-based animations, micro-interactions, and parallax effects
- Responsive: Fully responsive across all devices
- Performance: Optimized for fast loading and smooth interactions
- Accessibility: Clean navigation and accessibility-friendly
- Next.js 14 - React framework
- TypeScript - Type safety
- Tailwind CSS - Styling
- Framer Motion - Animations
- next-themes - Dark mode support
- Lucide React - Icons
- Install dependencies:
npm install- Run the development server:
npm run dev- Open http://localhost:3000 in your browser
To create a production build:
npm run build
npm startDevNest/
├── app/
│ ├── globals.css
│ ├── layout.tsx
│ └── page.tsx
├── components/
│ ├── sections/
│ │ ├── Hero.tsx
│ │ ├── Services.tsx
│ │ ├── IndustrySolutions.tsx
│ │ ├── WhyDevNest.tsx
│ │ ├── Portfolio.tsx
│ │ ├── Process.tsx
│ │ ├── Testimonials.tsx
│ │ ├── CTA.tsx
│ │ └── Contact.tsx
│ ├── Logo.tsx
│ ├── Navigation.tsx
│ ├── Footer.tsx
│ └── ThemeProvider.tsx
└── package.json
- Hero - Eye-catching hero section with animated background and CTAs
- Services - Interactive service cards with hover animations
- Industry Solutions - Tab-based industry-specific solutions
- Why DevNest - Feature highlights with icons and animations
- Portfolio - Project showcase with filterable grid and modal
- Process - Animated timeline showing our workflow
- Testimonials - Auto-sliding testimonial cards
- CTA - Bold call-to-action section
- Contact - Premium enquiry form with success animation
- Update colors in
tailwind.config.ts - Modify content in respective component files
- Add/remove sections in
app/page.tsx - Customize animations in component files using Framer Motion
This project is open source and available under the MIT License.