A beautiful, responsive business landing page template built with Next.js 15, Tailwind CSS v4, and TypeScript. Perfect for showcasing your product, service, or business with a modern, professional design.
- 🎨 Modern Design: Clean, professional layout with beautiful animations
- 📱 Fully Responsive: Optimized for all devices and screen sizes
- ⚡ Next.js 15: Latest features with App Router and Turbopack
- 🎯 Tailwind CSS v4: Latest version with enhanced styling capabilities
- 🔧 TypeScript: Full type safety and better development experience
- 🎭 AOS Animations: Smooth scroll animations for enhanced UX
- 🎪 Headless UI: Accessible, unstyled UI components
- 🚀 Performance Optimized: Fast loading with optimized images and code splitting
- Next.js 15 - React framework with App Router
- Tailwind CSS v4 - Utility-first CSS framework
- TypeScript - Type-safe JavaScript
- React 19 - UI library
- AOS - Animate On Scroll library
- Headless UI - Unstyled, accessible UI components
- Node.js 18+
- pnpm (recommended) or npm
-
Clone the repository
git clone https://github.com/darkmage208/business-landing-page-template.git cd business-landing-page-template -
Install dependencies
pnpm install # or npm install -
Run the development server
pnpm dev # or npm run dev -
Open your browser Navigate to http://localhost:3000 to see the result.
├── app/ # Next.js App Router
│ ├── (auth)/ # Authentication pages
│ ├── (default)/ # Main landing pages
│ ├── api/ # API routes
│ └── css/ # Global styles
├── components/ # Reusable components
│ ├── ui/ # Base UI components
│ ├── hero-home.tsx # Hero section
│ ├── features-planet.tsx # Features section
│ ├── business-categories.tsx # Business categories
│ ├── large-testimonial.tsx # Testimonials
│ └── cta.tsx # Call-to-action
├── public/ # Static assets
│ └── images/ # Image files
└── package.json # Dependencies and scripts
The template uses Tailwind CSS v4 with custom CSS variables. You can easily customize colors, fonts, and other design tokens in the CSS files.
All components are modular and reusable. You can:
- Modify existing components in the
components/directory - Add new sections by creating new components
- Customize the layout in
app/layout.tsx
Update the content by editing the component files:
- Hero section:
components/hero-home.tsx - Features:
components/features-planet.tsx - Testimonials:
components/large-testimonial.tsx - Call-to-action:
components/cta.tsx
# Development
pnpm dev # Start development server with Turbopack
# Production
pnpm build # Build for production
pnpm start # Start production server
# Code Quality
pnpm lint # Run ESLint- Hero Section: Eye-catching header with call-to-action
- Business Categories: Showcase different business types
- Features: Highlight product features with animations
- Testimonials: Customer testimonials and social proof
- Call-to-Action: Final conversion section
- Lighthouse Score: 95+ across all metrics
- Core Web Vitals: Optimized for best user experience
- Image Optimization: Next.js Image component for optimal loading
- Code Splitting: Automatic code splitting for faster loads
Contributions are welcome! Please feel free to submit a Pull Request.
- Fork the project
- Create your feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
- Tailwind CSS for the amazing utility-first CSS framework
- Next.js for the powerful React framework
- Headless UI for accessible UI components
- AOS for smooth scroll animations
If you have any questions or need help, please:
- Open an issue
- Check the documentation
- Contact us at DarkMage
⭐ Star this repository if you found it helpful!
Made with ❤️ by DarkMage