Nafahat Perfumes

**Nafahat Perfumes هو مشروع E-Commerce فاخر لبيع العطور، مبني باستخدام React و TypeScript و Vite و Tailwind CSS.**

يركز المشروع على تقديم تجربة تسوق أنيقة وسلسة، حيث يمكن للمستخدم تصفح مجموعات العطور، فلترة المنتجات حسب التصنيف، البحث عن عطر معين، عرض تفاصيل المنتج، إدارة عربة التسوق، وإكمال تجربة شراء تجريبية من خلال Checkout بسيط.

يعتمد المشروع على **localStorage** لحفظ منتجات عربة التسوق، بحيث تظل المنتجات محفوظة حتى بعد تحديث الصفحة أو إغلاق المتصفح. كما يستخدم **Framer Motion** لإضافة حركات انتقالية ناعمة وتجربة استخدام أكثر احترافية، مع تصميم Responsive مناسب للموبايل والتابلت والديسكتوب.

تم تنفيذ المشروع كواجهة أمامية احترافية لمتجر عطور، مع التركيز على جودة التصميم، تنظيم الكود، المكونات القابلة لإعادة الاستخدام، منطق عربة التسوق، التنقل بين الصفحات، البحث، الفلترة، وتجربة المستخدم.

**أهم المميزات:**

* واجهة متجر عطور فاخرة بتصميم حديث.

* عرض المنتجات مع تفاصيل كاملة لكل منتج.

* البحث والفلترة حسب التصنيفات مثل رجالي، حريمي، شرقي، فرنسي وغيرها.

* عربة تسوق مع إضافة وحذف المنتجات وتعديل الكمية وحساب السعر الإجمالي مباشرة.

* Checkout تجريبي يشمل بيانات الشحن واختيار طريقة الدفع.

* حفظ بيانات عربة التسوق باستخدام localStorage.

* حركات وانتقالات سلسة باستخدام Framer Motion.

* تصميم Responsive مناسب لجميع الشاشات.

* استخدام Lucide React للأيقونات الحديثة.

* أداء سريع بفضل React و Vite.

**Nafahat Perfumes is a premium e-commerce platform for luxury perfumes, built with React, TypeScript, Vite, and Tailwind CSS.**

The project focuses on delivering a smooth and elegant shopping experience where users can browse perfume collections, filter products by category, search for specific scents, view product details, manage their cart, and go through a simple checkout flow.

The platform uses **localStorage** to persist cart items, so users do not lose their selected products after refreshing or closing the browser. It also includes **Framer Motion** animations for smooth transitions and a modern, responsive UI optimized for mobile, tablet, and desktop screens.

The project was created as a polished frontend e-commerce demo that highlights clean UI, reusable components, cart logic, routing, filtering, and responsive design.

**Key Features:**

* Premium perfume storefront with modern design.

* Product browsing with detailed product information.

* Search and category filtering for Men, Women, Oriental, French, and more.

* Cart management with add, remove, quantity update, and real-time total calculation.

* Mock checkout flow with shipping information and payment method selection.

* Persistent cart storage using localStorage.

* Smooth animations and page transitions using Framer Motion.

* Fully responsive design for all screen sizes.

* Modern icons using Lucide React.

* Fast development and performance using React + Vite.