Tripura Documentation

A modern travel and tour booking website built with Next.js 16, React 19, and Tailwind CSS 4. Tripura showcases travel destinations, tour packages, and blog content with smooth scroll-triggered animations and a fully responsive design.

Tech Stack

Getting Started

Prerequisites

• Node.js 18+ (LTS recommended)
• npm, yarn, or pnpm

Install & Run

# Clone the repository
git clone <repository-url>
cd tripura-nextjs

# Install dependencies
npm install

# Start development server (Turbopack)
npm run dev

# Build for production
npm run build

# Start production server
npm start

Open http://localhost:3000 in your browser.

Available Scripts

Project Structure

tripura-nextjs/
├── package.json
├── next.config.ts          # Next.js configuration
├── tsconfig.json           # TypeScript config (strict, @/* alias)
├── postcss.config.mjs      # PostCSS → @tailwindcss/postcss
├── eslint.config.mjs       # ESLint + Next.js core web vitals
│
├── src/
│   ├── app/                  # App Router pages
│   │   ├── layout.tsx        # Root layout (fonts, vendor CSS, metadata)
│   │   ├── globals.css       # Tailwind import + custom utilities
│   │   ├── page.tsx          # Home page
│   │   ├── about/
│   │   ├── contact/
│   │   ├── destinations/
│   │   ├── destinations-details/
│   │   ├── home-two/
│   │   ├── news/
│   │   ├── news-details/
│   │   ├── tour-details/
│   │   ├── tours/
│   │   └── tours-list/
│   │
│   ├── components/           # Reusable UI components
│   │   ├── ClientLayout.tsx  # Page wrapper (header, footer, hooks)
│   │   ├── Header.tsx        # Desktop navigation
│   │   ├── MobileNav.tsx     # Mobile drawer navigation
│   │   ├── Footer.tsx        # Site footer
│   │   ├── FadeIn.tsx        # Framer Motion scroll animation
│   │   ├── Preloader.tsx     # Loading spinner
│   │   ├── BackToTop.tsx     # Scroll-to-top button
│   │   ├── SearchPopup.tsx   # Search modal
│   │   └── PageBanner.tsx    # Page header with breadcrumb
│   │
│   └── hooks/                # Custom React hooks
│       ├── useAnimations.ts  # Counter & progress bar animations
│       ├── useSwiperInit.ts  # Swiper carousel initializer
│       └── useUIPlugins.ts   # Sticky header, accordion, popups, slider
│
└── public/
    └── assets/
        ├── css/              # Template CSS
        │   ├── tripura.css
        │   └── tripura-responsive.css
        ├── images/           # Static images
        └── vendors/          # Third-party CSS (FontAwesome, Swiper, etc.)

Configuration

TypeScript — tsconfig.json

Strict mode is enabled. The @/* path alias maps to ./src/* for clean imports.

{
  "compilerOptions": {
    "target": "ES2017",
    "strict": true,
    "jsx": "react-jsx",
    "moduleResolution": "bundler",
    "paths": { "@/*": ["./src/*"] }
  }
}

PostCSS — postcss.config.mjs

Uses @tailwindcss/postcss as the only plugin — Tailwind CSS v4 style.

const config = {
  plugins: {
    "@tailwindcss/postcss": {},
  },
};
export default config;

ESLint — eslint.config.mjs

Next.js core web vitals and TypeScript rules. Ignores build output directories (.next, out, build).

Styling

CSS Architecture

Styling is organized in three layers:

Global CSS Utilities

/* globals.css */
@import "tailwindcss";

@layer base {
  .container {
    margin-inline: auto;
    padding-inline: 15px;
  }
}

@utility list-unstyled {
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
}

@utility clearfix {
  &::after {
    content: "";
    display: table;
    clear: both;
  }
}

Tailwind Breakpoints

Default Tailwind CSS v4 breakpoints are used throughout the project:

Pages & Routes

All pages live under src/app/ using the Next.js App Router convention. Each page wraps its content in <ClientLayout> for the shared header, footer, and client-side functionality. All 11 routes are statically prerendered at build time.

Home Page — /

Main landing page featuring a Swiper hero carousel (3 slides) with 4.6-star rating display and call-to-action buttons. Below the slider is a tour search form with destination and date filters, animated into view with the FadeIn component.

• Swiper config: fade effect, 5s autoplay, pagination bullets
• Star rating SVG icons with numeric display
• Search redesign section with dropdown selectors

Home Two — /home-two

Alternate landing with a Vegas background slideshow (rotating background images) and a tour search CTA. Displays 6 tour cards with pricing, duration, and feature lists. Each card uses staggered FadeIn animations.

About — /about

Company information page with a hero banner, breadcrumb navigation, and content sections. Uses the standard page header pattern with background image.

Destinations — /destinations, /destinations-details

Destinations displays locations in a masonry grid layout with varied card sizes. Destination Details shows an individual location with an image gallery, description, and two-column layout (8/12 content + 4/12 sidebar).

Tours — /tours, /tours-list, /tour-details

Tours shows packages in a responsive grid (3 cols on xl, 2 on md). Tours List offers a list view with a sidebar containing a price range slider (noUiSlider). Tour Details has an image slider (Swiper with fade + pagination), FAQ accordion, and booking form.

News — /news, /news-details

News lists 6 articles with staggered fade-in animations. Topics include travel stories and destination guides. News Details shows a full article in a two-column layout.

Contact — /contact

Contact page with a form (left column) and contact details. Uses responsive flex grid layout.

Components

ClientLayout

src/components/ClientLayout.tsx "use client"

<Preloader />
<div.announcement-bar>
<div.page-wrapper>
  <Header />
  {children}
  <Footer />
</div>
<MobileNav />
<SearchPopup />
<BackToTop />

Header

src/components/Header.tsx "use client"

MobileNav

src/components/MobileNav.tsx "use client"

Footer

src/components/Footer.tsx

FadeIn

src/components/FadeIn.tsx "use client"

<FadeIn direction="up" delay={0.2}>
  <div className="tour-card">...</div>
</FadeIn>

<FadeIn as="li" direction="left" duration={0.8}>
  <span>Animated list item</span>
</FadeIn>

Preloader

src/components/Preloader.tsx "use client"

BackToTop

src/components/BackToTop.tsx "use client"

SearchPopup

src/components/SearchPopup.tsx "use client"

PageBanner

src/components/PageBanner.tsx

<PageBanner
  title="About Us"
  breadcrumbs={[
    { label: "Home", href: "/" },
    { label: "Pages" },
    { label: "About" },
  ]}
/>

Hooks

useAnimations

src/hooks/useAnimations.ts

useSwiperInit

src/hooks/useSwiperInit.ts

<div
  class="thm-swiper__slider swiper-container"
  data-swiper-options='{
    "slidesPerView": 1,
    "effect": "fade",
    "autoplay": { "delay": 5000 },
    "pagination": { "el": ".swiper-pagination", "clickable": true }
  }'
>
  <div class="swiper-wrapper">
    <div class="swiper-slide">...</div>
  </div>
</div>

useUIPlugins

src/hooks/useUIPlugins.ts

Vendor CSS

External vendor stylesheets are loaded in the root layout via <link> tags. These files live in public/assets/vendors/.

Deployment

All pages are statically prerendered at build time. The output can be deployed to any static hosting platform or Node.js server.

Build Output

npm run build

✓ Compiled successfully
✓ Generating static pages (14/14)

Routes:
  ○ /
  ○ /_not-found
  ○ /about
  ○ /contact
  ○ /destinations
  ○ /destinations-details
  ○ /home-two
  ○ /news
  ○ /news-details
  ○ /tour-details
  ○ /tours
  ○ /tours-list

Vercel (Recommended)

Deploy directly from your Git repository to Vercel. No additional configuration is required — Vercel auto-detects Next.js projects.

Self-Hosted

# Build and start
npm run build
npm start

# Or export as static HTML (add output: 'export' to next.config.ts)
npm run build
# Serve the 'out' directory with any static server

Tripura - Travel & Tour Next.js Template • Built with Next.js, React, and Tailwind CSS