Project Management Template

A modern, animated marketing site template for a project management product. Built with Next.js (App Router), React, TypeScript, Tailwind CSS, and Framer Motion.

Highlights

• Clean, conversion-focused landing page layout
• Smooth, performant animations via Framer Motion
• Modular sections: hero, features, integrations, customer story, pricing, footer
• Tailwind CSS v4 utility-first styling

Tech Stack

• Next.js (App Router)
• React 19
• TypeScript
• Tailwind CSS v4
• Framer Motion

Getting Started

Install dependencies:

npm install

Run the dev server:

npm run dev

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

Scripts

• npm run dev - Start the development server
• npm run build - Build for production
• npm run start - Start the production server
• npm run lint - Run ESLint

Project Structure

• app/page.tsx - Main landing page composition
• components/ - Page sections and UI blocks
• public/ - Static assets
• lib/ - Utilities (if needed)

Customization

Most content lives in app/page.tsx and the section components in components/.

Common edits:

• Hero copy: components/HeroSection.tsx
• Features grid: components/FeaturesSection.tsx
• Integrations list: components/IntegrationSection.tsx
• Customer story: components/CustomerStory.tsx
• Pricing CTA: components/PricingSection.tsx
• Footer links: components/SiteFooter.tsx

Deployment

Build and run:

npm run build
npm run start

Deploy anywhere Next.js runs (Vercel, Render, Netlify, etc.).