🌐 Live Demo

Check it out on Vercel: https://clothora-amber.vercel.app/

👕 Clothora

A minimalistic clothing store web app built with Next.js, TypeScript, and Tailwind CSS. Clothora brings a clean, modern interface designed to make fashion browsing effortless and elegant. It features smooth animations, responsive layouts, and efficient state management powered by Zustand.

✨ Features

• Minimalist UI: Focused on simplicity and elegance with a modern design aesthetic.
• Product Carousel: Smooth and responsive carousel built with Keen Slider.
• Dynamic Loading Skeletons: Ensures a seamless browsing experience while data loads.
• Lucide Icons: Clean, lightweight icons for navigation and actions.
• State Management: Powered by Zustand for fast and reliable global state handling.
• Motion Animations: Beautiful transitions and interactive effects using Framer Motion-compatible library.
• Responsive Design: Optimized for mobile, tablet, and desktop devices.

🧩 Tech Stack

• Next.js 15
• React 19
• Tailwind CSS 4
• TypeScript 5
• Zustand 5
• Keen Slider
• Lucide React
• React Loading Skeleton
• Sonner (toast notifications)

⚙️ Prerequisites

• Node.js (version 18 or higher)
• NPM or Yarn

🚀 Installation

1. Clone the repository:

   git clone https://github.com/yourusername/clothora.git

2. Navigate to the project directory:

   cd clothora

3. Install dependencies:

   npm install

4. Start the development server:

   npm run dev

   Then open the app at http://localhost:3000 .

🧥 Usage

Browse Products

Discover clothing collections through an elegant, scroll-based interface. Each product features smooth hover animations and detailed previews.

Carousel

Highlight featured collections and new arrivals with the Keen Slider-powered carousel.

Animations

Motion provides fade, slide, and stagger effects to make transitions seamless and visually appealing.

import { motion } from "motion/react";
const fadeUp = {
hidden: { opacity: 0, y: 30 },
visible: { opacity: 1, y: 0, transition: { duration: 0.5 } }
};
export default function HeroText() {
return (
<motion.h1 variants={fadeUp} initial="hidden" animate="visible">
Discover Minimalism with Clothora
</motion.h1>
);
}

🤝 Contributing

Have ideas or want to improve the design? Contributions are welcome!

How to contribute:

1. Fork the repository.
2. Create a new branch for your feature or fix.
3. Make your changes and test thoroughly.
4. Submit a pull request with a detailed description.

📩 Contact

For inquiries or collaboration, feel free to email: rashidvisda@gmail.com.

---

Crafted with ❤️ using Next.js and Tailwind CSS.