Modern Landing Page Template | Nextjs 15 Course Landing Page Template

Overview

A modern, responsive landing page template built with Next.js 15, React 19, TypeScript, and TailwindCSS. The template focuses on educational/tech training institutes with comprehensive sections for courses, team profiles, testimonials, and more.

Tech Stack

• Framework: Next.js 15.3.2 with App Router
• Language: TypeScript
• UI Library: React 19.0.0
• Styling: TailwindCSS 3.4.1
• Animations: Framer Motion 12.4.0
• Icons: React Icons 5.4.0
• UI Components: Radix UI (Dialog, Label, Select, Slot)
• Development: TurboPack for faster development experience

Key Features

1. Modern Design System with Dark Mode Support
2. Responsive Layout
3. Smooth Page Transitions & Animations
4. Component-based Architecture
5. SEO Optimized
6. Performance Optimized Images
7. Custom UI Components

Project Structure

├── public/                  # Static assets
│   ├── course.jpg
│   ├── features.jpg
│   ├── hero.jpg
│   └── logo.png
├── src/
│   ├── app/                # Next.js App Router files
│   │   ├── globals.css     # Global styles
│   │   ├── layout.tsx      # Root layout
│   │   └── page.tsx        # Homepage
│   ├── components/         # React components
│   │   ├── landing/        # Landing page sections
│   │   │   ├── About.tsx
│   │   │   ├── Categories.tsx
│   │   │   ├── Courses.tsx
│   │   │   ├── Features.tsx
│   │   │   ├── hero.tsx
│   │   │   ├── TeamProfiles.tsx
│   │   │   └── ... 
│   │   ├── layout/        # Layout components
│   │   │   ├── footer.tsx
│   │   │   ├── Navbar.tsx
│   │   │   └── section-title.tsx
│   │   └── ui/           # Reusable UI components
│   │       ├── button.tsx
│   │       ├── card.tsx
│   │       ├── dialog.tsx
│   │       └── ...
│   └── lib/              # Utility functions
│       └── utils.ts

 

Component Sections

1. Hero Section

   • Full-width banner with animated elements
   • Call-to-action buttons
   • Floating statistics cards

2. Courses Section

   • Popular courses showcase
   • Course categories with expandable details
   • Interactive course cards with hover effects

3. Features Section

   • Grid layout of key features
   • Animated statistics
   • Image showcase with overlay

4. Team Profiles

   • Team member cards with hover effects
   • Social media links
   • Skills showcase

5. Training Approach

   • Benefits grid
   • Success metrics
   • Visual content integration

6. Testimonials

   • Student testimonials with ratings
   • Animated transitions
   • Profile images with quotes

7. Job Vacancies

   • Current openings listing
   • Filterable by categories
   • Detailed job information cards

8. Registration Form

   • Contact form with validation
   • Multiple input fields
   • Success/error handling

UI Components

The template uses a custom UI component library built with Radix UI primitives:

• Button: Versatile button component with multiple variants
• Card: Flexible card container with header/content/footer
• Dialog: Modal dialogs and popovers
• Input: Form input fields
• Select: Dropdown select menus
• Badge: Status and category indicators

Styling System

• Custom TailwindCSS configuration with:
  • Custom color scheme
  • Dark mode support
  • Custom animations
  • Responsive breakpoints
  • Font system using Google Fonts (Outfit, Inter, Geist Mono)

{
  "@radix-ui/react-*": "UI component primitives",
  "framer-motion": "Advanced animations",
  "react-icons": "Icon library",
  "clsx": "Conditional class names",
  "tailwind-merge": "Merge Tailwind classes",
  "class-variance-authority": "Component variants"
}

# Install dependencies
npm install

# Run development server with TurboPack
npm run dev

# Build for production
npm run build

# Start production server
npm run start