Completed

client/package.json

@@ -11,10 +11,11 @@
   "dependencies": {
     "@hookform/resolvers": "^5.2.1",
     "lucide-react": "^0.535.0",
-    "next": "15.4.5",
+    "next": "16.0.7",
     "react": "19.1.0",
     "react-dom": "19.1.0",
     "react-hook-form": "^7.61.1",
+    "react-icons": "^5.5.0",
     "react-toastify": "^11.0.5",
     "zod": "^4.0.14",
     "zustand": "^5.0.7"

client/src/app/cart/page.tsx

@@ -3,7 +3,7 @@
 import PaymentForm from "@/components/PaymentForm";
 import ShippingForm from "@/components/ShippingForm";
 import useCartStore from "@/stores/cartStore";
-import { CartItemsType, ShippingFormInputs } from "@/types";
+import { ShippingFormInputs } from "@/types";
 import { ArrowRight, Trash2 } from "lucide-react";
 import Image from "next/image";
 import { useRouter, useSearchParams } from "next/navigation";
@@ -92,19 +92,19 @@ const CartPage = () => {
   return (
     <div className="flex flex-col gap-8 items-center justify-center mt-12">
       {/* TITLE */}
-      <h1 className="text-2xl font-medium">Your Shopping Cart</h1>
+      <h1 className="text-2xl font-medium text-[#64113F]">Your Shopping Cart</h1>
       {/* STEPS */}
       <div className="flex flex-col lg:flex-row items-center gap-8 lg:gap-16">
         {steps.map((step) => (
           <div
             className={`flex items-center gap-2 border-b-2 pb-4 ${
-              step.id === activeStep ? "border-gray-800" : "border-gray-200"
+              step.id === activeStep ? "border-[#7B7263]" : "border-[#D6D3CC]"
             }`}
             key={step.id}
           >
             <div
               className={`w-6 h-6 rounded-full text-white p-4 flex items-center justify-center ${
-                step.id === activeStep ? "bg-gray-800" : "bg-gray-400"
+                step.id === activeStep ? "bg-[#7B7263]" : "bg-[#D6D3CC]"
               }`}
             >
               {step.id}
@@ -135,7 +135,7 @@ const CartPage = () => {
                   {/* IMAGE */}
                   <div className="relative w-32 h-32 bg-gray-50 rounded-lg overflow-hidden">
                     <Image
-                      src={item.images[item.selectedColor]}
+                      src={item.images?.[item.selectedColor] || ""}
                       alt={item.name}
                       fill
                       className="object-contain"
@@ -144,18 +144,18 @@ const CartPage = () => {
                   {/* ITEM DETAILS */}
                   <div className="flex flex-col justify-between">
                     <div className="flex flex-col gap-1">
-                      <p className="text-sm font-medium">{item.name}</p>
-                      <p className="text-xs text-gray-500">
+                      <p className="text-sm font-medium text-[#DE4D86]">{item.name}</p>
+                      <p className="text-xs text-[#64113F]">
                         Quantity: {item.quantity}
                       </p>
-                      <p className="text-xs text-gray-500">
+                      <p className="text-xs text-[#64113F]">
                         Size: {item.selectedSize}
                       </p>
-                      <p className="text-xs text-gray-500">
+                      <p className="text-xs text-[#64113F]">
                         Color: {item.selectedColor}
                       </p>
                     </div>
-                    <p className="font-medium">${item.price.toFixed(2)}</p>
+                    <p className="font-medium text-[#64113F]">${item.price.toFixed(2)}</p>
                   </div>
                 </div>
                 {/* DELETE BUTTON */}
@@ -172,36 +172,36 @@ const CartPage = () => {
           ) : activeStep === 3 && shippingForm ? (
             <PaymentForm />
           ) : (
-            <p className="text-sm text-gray-500">
+            <p className="text-sm text-[#64113F]">
               Please fill in the shipping form to continue.
             </p>
           )}
         </div>
         {/* DETAILS */}
         <div className="w-full lg:w-5/12 shadow-lg border-1 border-gray-100 p-8 rounded-lg flex flex-col gap-8 h-max">
-          <h2 className="font-semibold">Cart Details</h2>
+          <h2 className="font-semibold text-[#DE4D86]">Cart Details</h2>
           <div className="flex flex-col gap-4">
             <div className="flex justify-between text-sm">
-              <p className="text-gray-500">Subtotal</p>
-              <p className="font-medium">
+              <p className="text-[#64113F]">Subtotal</p>
+              <p className="font-medium text-[#64113F]">
                 $
                 {cart
                   .reduce((acc, item) => acc + item.price * item.quantity, 0)
                   .toFixed(2)}
               </p>
             </div>
             <div className="flex justify-between text-sm">
-              <p className="text-gray-500">Discount(10%)</p>
-              <p className="font-medium">$ 10</p>
+              <p className="text-[#64113F]">Discount(10%)</p>
+              <p className="font-medium text-[#64113F]">$ 10</p>
             </div>
             <div className="flex justify-between text-sm">
-              <p className="text-gray-500">Shipping Fee</p>
-              <p className="font-medium">$10</p>
+              <p className="text-[#64113F]">Shipping Fee</p>
+              <p className="font-medium text-[#64113F]">$10</p>
             </div>
             <hr className="border-gray-200" />
             <div className="flex justify-between">
-              <p className="text-gray-800 font-semibold">Total</p>
-              <p className="font-medium">
+              <p className="text-[#DE4D86] font-semibold">Total</p>
+              <p className="font-medium text-[#DE4D86]">
                 $
                 {cart
                   .reduce((acc, item) => acc + item.price * item.quantity, 0)
@@ -212,7 +212,7 @@ const CartPage = () => {
           {activeStep === 1 && (
             <button
               onClick={() => router.push("/cart?step=2", { scroll: false })}
-              className="w-full bg-gray-800 hover:bg-gray-900 transition-all duration-300 text-white p-2 rounded-lg cursor-pointer flex items-center justify-center gap-2"
+              className="w-full bg-[#7B7263] hover:bg-[#5C5B4F] transition-all duration-300 text-white p-2 rounded-lg cursor-pointer flex items-center justify-center gap-2"
             >
               Continue
               <ArrowRight className="w-3 h-3" />

client/src/app/layout.tsx

@@ -28,12 +28,12 @@ export default function RootLayout({
   return (
     <html lang="en">
       <body
-        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
+        className={`${geistSans.variable} ${geistMono.variable} antialiased bg-[#F3E4E5]`}
       >
         <div className="mx-auto p-4 sm:px-0 sm:max-w-xl md:max-w-2xl lg:max-w-3xl xl:max-w-6xl">
           <Navbar />
           {children}
-          <Footer />
+          {/* <Footer /> */}
         </div>
         <ToastContainer position="bottom-right" />
       </body>

client/src/app/page.tsx

@@ -9,10 +9,20 @@ const Homepage = async ({
   const category = (await searchParams).category;
   return (
     <div className="">
-      <div className="relative aspect-[3/1] mb-12">
-        <Image src="/featured.png" alt="Featured Product" fill />
+      <div className="relative aspect-[5/2] mb-12 overflow-hidden group rounded-[10px]">
+        {/* Featured image */}
+        <Image
+          src="/featured.png"
+          alt="Featured Product"
+          fill
+          className="object-cover transition-transform duration-700 ease-out group-hover:scale-105"
+        />
+
+        {/* Soft bottom shadow/gradient overlay */}
+        <div className="absolute inset-0 bg-gradient-to-t from-[#f3e4e5]/70 via-transparent to-transparent pointer-events-none" />
       </div>
-      <ProductList category={category} params="homepage"/>
+
+      <ProductList category={category} params="homepage" />
     </div>
   );
 };

client/src/app/products/[id]/page.tsx

@@ -5,19 +5,22 @@ import Image from "next/image";
 // TEMPORARY
 const product: ProductType = {
   id: 1,
-  name: "Adidas CoreFit T-Shirt",
+  name: "Veste en Laine Dar Yassou - Édition Jasmin Paris",
   shortDescription:
-    "Lorem ipsum dolor sit amet consect adipisicing elit lorem ipsum dolor sit.",
+    "",
   description:
-    "Lorem ipsum dolor sit amet consect adipisicing elit lorem ipsum dolor sit. Lorem ipsum dolor sit amet consect adipisicing elit lorem ipsum dolor sit. Lorem ipsum dolor sit amet consect adipisicing elit lorem ipsum dolor sit.",
+          "La Veste en Laine Dar Yassou – Édition Jasmin Paris incarne l’élégance douce et intemporelle propre à l’univers Dar Yassou. Inspirée par le charme vintage et la féminité naturelle, cette veste allie structure élégante et confort enveloppant. Dotée de larges épaules structurées, d’un col haut raffiné et de manches longues, elle dessine une silhouette affirmée tout en restant délicate. Sa fermeture à boutons renforce son style chic et authentique, parfait pour la saison automnale. Pensée pour un style décontracté chic, cette veste se porte aussi bien au quotidien que pour des occasions plus habillées, apportant une touche de caractère tout en douceur.",
   price: 59.9,
   sizes: ["xs", "s", "m", "l", "xl"],
-  colors: ["gray", "purple", "green"],
+  colors: ["gray", "yellow"],
   images: {
     gray: "/products/1g.png",
-    purple: "/products/1p.png",
-    green: "/products/1gr.png",
+    yellow: "/products/1y.png",
   },
+  colorStripe:{
+      gray: "https://buy.stripe.com/5kQ9AS9utf4daqteiMaZi02",
+      yellow :"https://buy.stripe.com/cNieVc365f4d9mpdeIaZi01"
+    }
 };
 
 export const generateMetadata = async ({
@@ -49,7 +52,7 @@ const ProductPage = async ({
       {/* IMAGE */}
       <div className="w-full lg:w-5/12 relative aspect-[2/3]">
         <Image
-          src={product.images[selectedColor]}
+          src={product.images?.[selectedColor] || ""}
           alt={product.name}
           fill
           className="object-contain rounded-md"
@@ -65,37 +68,16 @@ const ProductPage = async ({
           selectedSize={selectedSize}
           selectedColor={selectedColor}
         />
-        {/* CARD INFO */}
-        <div className="flex items-center gap-2 mt-4">
-          <Image
-            src="/klarna.png"
-            alt="klarna"
-            width={50}
-            height={25}
-            className="rounded-md"
-          />
-          <Image
-            src="/cards.png"
-            alt="cards"
-            width={50}
-            height={25}
-            className="rounded-md"
-          />
-          <Image
-            src="/stripe.png"
-            alt="stripe"
-            width={50}
-            height={25}
-            className="rounded-md"
-          />
-        </div>
+
         <p className="text-gray-500 text-xs">
-          By clicking Pay Now, you agree to our{" "}
-          <span className="underline hover:text-black">Terms & Conditions</span>{" "}
-          and <span className="underline hover:text-black">Privacy Policy</span>
-          . You authorize us to charge your selected payment method for the
-          total amount shown. All sales are subject to our return and{" "}
-          <span className="underline hover:text-black">Refund Policies</span>.
+         En cliquant sur « Payer maintenant », vous acceptez nos
+
+Conditions générales
+
+et notre Politique de confidentialité.
+
+Vous nous autorisez à débiter votre moyen de paiement sélectionné du
+montant total indiqué. Toutes les ventes sont soumises à nos politiques de retour et de remboursement.
         </p>
       </div>
     </div>

client/src/components/Categories.tsx

@@ -67,11 +67,11 @@ const Categories = () => {
   };
 
   return (
-    <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-8 gap-2 bg-gray-100 p-2 rounded-lg mb-4 text-sm">
+    <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-8 gap-2 bg-[#F7CACD] p-2 rounded-lg mb-4 text-sm">
       {categories.map((category) => (
         <div
           className={`flex items-center justify-center gap-2 cursor-pointer px-2 py-1 rounded-md ${
-            category.slug === selectedCategory ? "bg-white" : "text-gray-500"
+            category.slug === selectedCategory ? "bg-[#F29CA3]" : "text-[#64113F]"
           }`}
           key={category.name}
           onClick={() => handleChange(category.slug)}

client/src/components/Filter.tsx

@@ -14,12 +14,12 @@ const Filter = () => {
   };
 
   return (
-    <div className="flex items-center justify-end gap-2 text-sm text-gray-500 my-6">
+    <div className="flex items-center justify-end gap-2 text-sm text-[#64113F] my-6">
       <span>Sort by:</span>
       <select
         name="sort"
         id="sort"
-        className="ring-1 ring-gray-200 shadow-md p-1 rounded-sm"
+        className="ring-1 ring-[#64113F] shadow-md p-1 rounded-sm"
         onChange={(e) => handleFilter(e.target.value)}
       >
         <option value="newest">Newest</option>

client/src/components/Footer.tsx

@@ -3,33 +3,31 @@ import Link from "next/link";
 
 const Footer = () => {
   return (
-    <div className="mt-16 flex flex-col items-center gap-8 md:flex-row md:items-start md:justify-between md:gap-0 bg-gray-800 p-8 rounded-lg">
+    <div className="mt-16 flex flex-col items-center gap-8 md:flex-row md:items-start md:justify-between md:gap-0 bg-[#DE4D86] p-8 rounded-lg">
       <div className="flex flex-col gap-4 items-center md:items-start">
         <Link href="/" className="flex items-center">
           <Image src="/logo.png" alt="TrendLama" width={36} height={36} />
-          <p className="hidden md:block text-md font-medium tracking-wider text-white">
-            TRENDLAMA.
+          <p className="hidden md:block text-md font-medium tracking-wider text-[#F7CACD]">
+            DAR YASSOU.
           </p>
         </Link>
-        <p className="text-sm text-gray-400">© 2025 Trendlama.</p>
-        <p className="text-sm text-gray-400">All rights reserved.</p>
       </div>
-      <div className="flex flex-col gap-4 text-sm text-gray-400 items-center md:items-start">
-        <p className="text-sm text-amber-50">Links</p>
+      <div className="flex flex-col gap-4 text-sm text-[#F7CACD] items-center md:items-start">
+
         <Link href="/">Homepage</Link>
         <Link href="/">Contact</Link>
         <Link href="/">Terms of Service</Link>
         <Link href="/">Privacy Policy</Link>
       </div>
-      <div className="flex flex-col gap-4 text-sm text-gray-400 items-center md:items-start">
-        <p className="text-sm text-amber-50">Links</p>
+      <div className="flex flex-col gap-4 text-sm text-[#F7CACD] items-center md:items-start">
+
         <Link href="/">All Products</Link>
         <Link href="/">New Arrivals</Link>
         <Link href="/">Best Sellers</Link>
         <Link href="/">Sale</Link>
       </div>
-      <div className="flex flex-col gap-4 text-sm text-gray-400 items-center md:items-start">
-        <p className="text-sm text-amber-50">Links</p>
+      <div className="flex flex-col gap-4 text-sm text-[#F7CACD] items-center md:items-start">
+
         <Link href="/">About</Link>
         <Link href="/">Contact</Link>
         <Link href="/">Blog</Link>

client/src/components/Navbar.tsx

@@ -1,34 +1,28 @@
 import Image from "next/image";
 import Link from "next/link";
 import SearchBar from "./SearchBar";
-import { Bell, Home, ShoppingCart } from "lucide-react";
+import { Bell, Flower2, Home, ShoppingCart } from "lucide-react";
 import ShoppingCartIcon from "./ShoppingCartIcon";
 
 const Navbar = () => {
   return (
-    <nav className="w-full flex items-center justify-between border-b border-gray-200 pb-4">
+    <nav className="w-full flex items-center justify-center pb-4">
       {/* LEFT */}
       <Link href="/" className="flex items-center">
-        <Image
-          src="/logo.png"
-          alt="TrendLama"
-          width={36}
-          height={36}
-          className="w-6 h-6 md:w-9 md:h-9"
-        />
-        <p className="hidden md:block text-md font-medium tracking-wider">
-          TRENDLAMA.
+        <Flower2 />
+        <p className="md:block text-xl font-extrabold tracking-wider">
+          DAR YASSOU.
         </p>
       </Link>
       {/* RIGHT */}
       <div className="flex items-center gap-6">
-        <SearchBar />
-        <Link href="/">
-          <Home className="w-4 h-4 text-gray-600"/>
-        </Link>
-        <Bell className="w-4 h-4 text-gray-600"/>
-        <ShoppingCartIcon/>
-        <Link href="/login">Sign in</Link>
+        {/* <SearchBar /> */}
+        {/* <Link href="/">
+          <Home className="w-4 h-4 text-[#64113F]"/>
+        </Link> */}
+        {/* <Bell className="w-4 h-4 text-[#64113F]"/> */}
+        {/* <ShoppingCartIcon/> */}
+        {/* <Link href="/login" className="text-[#64113F]">Sign in</Link> */}
       </div>
     </nav>
   );