Next.js Hero Section Web Template

CleanShot

A modern, responsive Next.js template featuring eye-catching designs, multiple layouts, and unique animations. Perfect for creating stunning hero sections for your web projects in 2024 and beyond.

This template may have its flaws. I’m a designer and haven’t been programming for long, so I appreciate your understanding if the structure isn’t clear or if there are coding mistakes. However, what’s important is that I’ve achieved some great animation effects, which I believe is the value designers bring, as we are more sensitive to graphical details. You are free to adjust it however you like, and with AI’s help, I’m sure you’ll be able to quickly incorporate this template into your project! Thank you for your support and understanding!

Features

  • Responsive design
  • Dynamic animations using Framer Motion
  • Custom UI components
  • Theme provider for dark mode support
  • Optimized font loading with next/font

Installation

  1. Clone the repository:

    git clone https://github.com/zouyuekun/template-1.git
    
  2. Navigate to the project directory:

    cd template-1
    
  3. Install dependencies:

    npm install
    

Usage

Run the development server:

bash npm run dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying src/app/page.tsx. The page auto-updates as you edit the file.

Configuration

This project uses Next.js 13+ with the App Router. Make sure your next.config.js is set up correctly for your needs.

Dependencies

  • Next.js: ^13.0.0
  • React: ^18.0.0
  • Framer Motion: ^10.0.0
  • Tailwind CSS: ^3.0.0

For a full list of dependencies, please refer to the package.json file.

Support the Project

If you find this project helpful, consider buying me a coffee ☕️

https://buymeacoffee.com/yuekun

License

This project is licensed under the MIT License.

Authors

Acknowledgments

  • Next.js team for the amazing framework
  • Framer Motion for the powerful animation library
  • Magic UI for the beautiful UI components
  • Shadcn UI for the responsive UI components
  • All contributors who have helped shape this template