Modern Landing Page

A modern, animated landing page built with Next.js 14, TypeScript, Tailwind CSS, and Framer Motion. This project features a collection of reusable UI components and smooth animations to create an engaging user experience.

Screenshots

📸 To add screenshots:

1. Take screenshots of your components (recommended components to showcase):
   • Dark/Light mode toggle
   • Animated Dock
   • Tilt effect
   • Spotlight effect
   • Accordion in action
2. Save them in /public/screenshots/
3. Update the paths below

Dark Mode

Light Mode

Features

• 🎨 Modern UI components built with Radix UI
• 🌓 Dark/Light mode support using next-themes
• 🎭 Smooth animations powered by Framer Motion
• 📱 Fully responsive design
• 🎯 Custom UI components including:
  • Animated Dock
  • Tilt effect
  • Spotlight effect
  • Accordion
  • Dialog
  • And more!

Tech Stack

• Framework: Next.js 14
• Language: TypeScript
• Styling: Tailwind CSS
• Animation: Framer Motion
• UI Components: Radix UI
• Icons: Lucide React
• Development Tools: ESLint, PostCSS

Getting Started

1. Clone the repository:

git clone [your-repo-url]
cd landing

2. Install dependencies:

npm install
# or
yarn install
# or
bun install

3. Run the development server:

npm run dev
# or
yarn dev
# or
bun dev

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

Project Structure

• /app - Next.js app directory containing pages and layouts
• /components - Reusable UI components
• /components/ui - Core UI components (dock, tilt, spotlight, etc.)
• /lib - Utility functions and shared logic
• /public - Static assets including screenshots

Development

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

License

MIT