Template details

Looking for a modern, animated, and responsive landing page for your project, startup, or student portfolio? We’ve built a free template using Vite + React + Tailwind CSS v4 + Framer Motion. This template is fully open for students, small businesses, and anyone looking to kickstart a beautiful web presence.

In this post, we’ll walk through:

The features & sections of the template
How to customize each section/component
Documentation on installation, running locally, and hosting online

Template Overview

The landing page includes the following sections (screenshots to be inserted):

1. Header / Navbar

Animated mobile menu (slides down with Framer Motion)
Desktop links for navigation + call-to-action “Shop” button
Easily add/remove menu items in src/data/products.ts (navLinks array).

2. Hero Section

Eye-catching product showcase with gradient backgrounds.
Animated text + image reveal.
Call-to-action buttons: “Shop Best Sellers” and “Explore Collection.”
Edit hero headline, description, and button text inside Hero.tsx.

3. Popular Picks

Displays popular products dynamically filtered from product data.
Responsive product grid with hover animations.
Data comes from src/data/products.ts — add/remove products here.

4. Best Sellers

Similar to Popular Picks, but filtered for “bestseller” tagged products.
Perfect for showing high-demand items.

5. Recent Arrivals

Dynamically shows the newest products based on createdAt.
Highlights fresh product drops and limited editions.

6. Features Section

Four feature cards (warranty, Swiss movement, returns, support).
Uses icons from lucide-react.
Easy to edit text and icons in Features.tsx.

7. Newsletter Subscription

Simple subscription form with email input.
Text, placeholders, and button text are editable in Newsletter.tsx.

8. Footer

Brand logo, description, and quick links grouped under Shop, Company, and Support.
Copyright auto-updates the year dynamically.

9. Back to Top Button

Animated button appears after scrolling 800px.
Smooth scrolls the user back to the top.

How to Edit & Customize

Product Data

File: src/data/products.ts
Add new watches/products by editing the array:

{
  id: 9,
  name: "New Model",
  price: 299,
  rating: 4.5,
  image: "your-image-url",
  tags: ["popular", "recent"],
  createdAt: "2025-10-09"
}

Navigation Links

Same file (products.ts) → edit navLinks array to add/remove sections.

Styling

Tailwind utilities (bg-black, text-gray-600, etc.) are used throughout.
Swap classes to change colors, spacing, and typography.

Animations

All motion effects use Framer Motion.
Example from ProductCard.tsx: Tweak values to customize animation speed and style.

<motion.div initial={{opacity:0, y:20}} whileInView={{opacity:1, y:0}} />

Documentation

Installation

Clone the template:

git clone <your-repo-url>
cd wristco

Install dependencies:

npm install

Run the dev server:

npm run dev

Open the printed localhost URL.

Project Structure

src/
 ├─ components/     # Reusable UI components
 ├─ data/           # Product and navigation data
 ├─ App.tsx         # Main page composition
 ├─ main.tsx        # Entry point
 └─ index.css       # Tailwind imports + global styles

Hosting

You can host the built project on:

Vercel (1-click deploy from GitHub, optimized for React)
Netlify (connect repo and auto-deploy)
GitHub Pages (requires npm run build and pushing dist/)

Build command:

npm run build

The optimized files will be in the dist/ folder.

Wrap-Up

This free wristwatch landing page template is ready to use, mobile-first, and fully customizable. Students can adapt it for portfolio projects, businesses can launch quick product sites, and developers can build on it for client projects.

Free Responsive Wristwatch Landing Page Template