travelapp-nextjs Tailwind Templates

Travelapp Nextjs

GlobTrek is a modern travel website featuring a fully responsive design and a stunning UI/UX experience. Built with Next.js, React.js, Tailwind CSS, and TypeScript, it offers smooth animations and a dynamic layout, ensuring a seamless user experience on any device.

GlobTrek šŸŒāœˆļø

GlobTrek is a modern travel website featuring a fully responsive design and a stunning UI/UX experience. Built with Next.js, React.js, Tailwind CSS, and TypeScript, it offers smooth animations and a dynamic layout, ensuring a seamless user experience on any device.

Screenshots

Screenshot 1 Screenshot2 Screenshot3

Features ✨

  • Responsive Design: Optimized for all screen sizes and devices.
  • Modern UI/UX: Clean, intuitive interface for easy navigation.
  • Dynamic Components: Smooth animations and effects.
  • Next.js: Server-side rendering for enhanced performance.
  • TypeScript: Strongly typed code for improved maintainability.
  • User-Friendly Interface: Simplified navigation and booking process.

Tech Stack šŸ› ļø

Next.js React Tailwind CSS TypeScript

Project Layout šŸ—‚ļø

Here's the general layout of the project:

GlobTrek/
│
ā”œā”€ā”€ app/
│   ā”œā”€ā”€ global.css
│   ā”œā”€ā”€ layout.tsx
│   └── page.tsx
│
ā”œā”€ā”€ components/
│   ā”œā”€ā”€ Button.tsx
│   ā”œā”€ā”€ Capm.tsx
│   ā”œā”€ā”€ Features.tsx
│   ā”œā”€ā”€ Footer.tsx
│   ā”œā”€ā”€ GetApp.tsx
│   ā”œā”€ā”€ Guide.tsx
│   ā”œā”€ā”€ Hero.tsx
│   └── Navbar.tsx
│
ā”œā”€ā”€ constants/
│   └── index.ts
│
ā”œā”€ā”€ public/
│   ā”œā”€ā”€ images/
│   └── Screenshots/
│
ā”œā”€ā”€ .gitignore
ā”œā”€ā”€ next.config.js
ā”œā”€ā”€ package.json
ā”œā”€ā”€ README.md
└── tsconfig.json
  • app/: Contains the global styles, layout, and main page component.
  • components/: Reusable UI components like buttons, navbar, hero section, and more.
  • constants/: Stores constant data and configuration files.
  • public/: Contains static assets such as images and screenshots.

Getting Started šŸš€

Prerequisites

Installation

  1. Clone the Repository

    git clone https://github.com/<your-github-username>/GlobTrek.git
    cd GlobTrek
    
  2. Install Dependencies

    npm install
    # or
    yarn install
    
  3. Run the Development Server

    npm run dev
    # or
    yarn dev
    

    Open your browser and go to http://localhost:3000.

Contributing šŸ¤

  1. Fork the Repository

  2. Create a Feature Branch

    git checkout -b feature/new-feature
    
  3. Commit Your Changes

    git add .
    git commit -m "Add new feature"
    
  4. Push to the Branch

    git push origin feature/new-feature
    
  5. Open a Pull Request on GitHub.

Live Preview 🌐

Check out the live version of the site at: GlobTrek Live

Contact šŸ“¬

License šŸ“

This project is licensed under the MIT License. See the LICENSE file for details.

Acknowledgements šŸ™

  • Next.js: Server-side rendering and static site generation.
  • React.js: Component-based UI development.
  • Tailwind CSS: Utility-first CSS for styling.
  • TypeScript: Enhanced code quality and maintainability.

Top categories

Loading Svelte Themes