Update src/i18n.ts

Merge version_3 into main

src/app/page.tsx

@@ -34,27 +34,27 @@ export default function LandingPage() {
       <NavbarLayoutFloatingInline
       navItems={[
         {
-          name: "الرئيسية",          id: "hero"},
+          name: "Home",          id: "hero"},
         {
-          name: "حولنا",          id: "about"},
+          name: "About Us",          id: "about"},
         {
-          name: "الميزات",          id: "features"},
+          name: "Features",          id: "features"},
         {
-          name: "الخدمات",          id: "products"},
+          name: "Services",          id: "products"},
         {
-          name: "الأسعار",          id: "pricing"},
+          name: "Pricing",          id: "pricing"},
         {
-          name: "آراء العملاء",          id: "testimonials"},
+          name: "Testimonials",          id: "testimonials"},
         {
-          name: "الأسئلة الشائعة",          id: "faq"},
+          name: "FAQ",          id: "faq"},
         {
-          name: "اتصل بنا",          id: "contact"},
+          name: "Contact Us",          id: "contact"},
       ]}
       logoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=u8l15k"
       logoAlt="Inwi Moneye Logo"
       brandName="Inwi Moneye"
       button={{
-        text: "حمّل التطبيق",        href: "#"}}
+        text: "Download App",        href: "#"}}
     />
   </div>
 
@@ -62,26 +62,26 @@ export default function LandingPage() {
       <HeroBillboardScroll
       background={{
         variant: "radial-gradient"}}
-      title="Inwi Moneye: محفظتك الرقمية الشاملة"
+      title="Inwi Moneye: Your Comprehensive Digital Wallet"
-      description="أرسل الأموال، ادفع الفواتير، وتحكّم في أموالك بذكاء وأمان، داخل المغرب وخارجه. مع Inwi Moneye، أنت تتحكم في مستقبلك المالي."
+      description="Send money, pay bills, and manage your finances smartly and securely, both in Morocco and abroad. With Inwi Moneye, you control your financial future."
       buttons={[
         {
-          text: "حمّل التطبيق الآن",          href: "#download"},
+          text: "Download App Now",          href: "#download"},
         {
-          text: "اكتشف المزيد",          href: "#about"},
+          text: "Discover More",          href: "#about"},
       ]}
       imageSrc="http://img.b2bpic.net/free-photo/close-up-guy-with-ring-smartphone_23-2148450773.jpg"
-      imageAlt="تطبيق Inwi Moneye على الهاتف الذكي"
+      imageAlt="Inwi Moneye app on smartphone"
     />
   </div>
 
   <div id="about" data-section="about">
       <MediaAbout
       useInvertedBackground={false}
-      title="عن Inwi Moneye: شريكك المالي الذكي"
+      title="About Inwi Moneye: Your Smart Financial Partner"
-      description="Inwi Moneye هو تطبيق المحفظة الإلكترونية المتطور من Inwi، المصمم لتبسيط معاملاتك المالية اليومية. يوفر لك حرية إرسال واستقبال الأموال، دفع فواتيرك، وشحن رصيدك بكل سهولة ويسر، مدعوماً بتقنيات الذكاء الاصطناعي لتقديم تجربة مصرفية ذكية ومخصصة تناسب احتياجاتك في المغرب وخارجه."
+      description="Inwi Moneye is Inwi's advanced e-wallet application, designed to simplify your daily financial transactions. It offers you the freedom to send and receive money, pay your bills, and top up your balance with ease and convenience, powered by AI technologies to provide a smart, personalized banking experience tailored to your needs in Morocco and beyond."
       imageSrc="http://img.b2bpic.net/free-photo/advanced-technological-robot-interacting-with-money-finance_23-2151612658.jpg"
-      imageAlt="أشخاص يتفاعلون مع تطبيق محفظة إلكترونية"
+      imageAlt="People interacting with an e-wallet application"
     />
   </div>
 
@@ -92,40 +92,40 @@ export default function LandingPage() {
       useInvertedBackground={true}
       features={[
         {
-          id: "f1",          label: "تحويلات سريعة وآمنة",          title: "إرسال واستقبال الأموال",          items: [
+          id: "f1",          label: "Fast & Secure Transfers",          title: "Send & Receive Money",          items: [
-            "تحويلات فورية للأصدقاء والعائلة",            "مدعومة محلياً ودولياً",            "رسوم منخفضة وشفافة"],
+            "Instant transfers to friends and family",            "Supported locally and internationally",            "Low and transparent fees"],
           buttons: [
             {
-              text: "تعلم المزيد",              href: "#"},
+              text: "Learn More",              href: "#"},
           ],
         },
         {
-          id: "f2",          label: "ادفع بضغطة زر",          title: "دفع الفواتير وشحن الرصيد",          items: [
+          id: "f2",          label: "Pay with a Tap",          title: "Pay Bills & Top Up",          items: [
-            "دفع فواتير Wi-Fi والإنترنت",            "شحن رصيد الهاتف بسهولة",            "مدفوعات متنوعة للخدمات"],
+            "Pay Wi-Fi and internet bills",            "Easily top up phone balance",            "Various service payments"],
           buttons: [
             {
-              text: "اكتشف الفواتير",              href: "#"},
+              text: "Explore Bills",              href: "#"},
           ],
         },
         {
-          id: "f3",          label: "إدارة موحدة",          title: "الربط بالحسابات البنكية",          items: [
+          id: "f3",          label: "Unified Management",          title: "Link Bank Accounts",          items: [
-            "ربط محفظتك بحساباتك الشخصية",            "تحويلات سلسة بين البنوك والمحفظة",            "تحكم كامل في أموالك"],
+            "Link your wallet to your personal accounts",            "Seamless transfers between banks and wallet",            "Full control over your finances"],
           buttons: [
             {
-              text: "ابدأ الربط",              href: "#"},
+              text: "Start Linking",              href: "#"},
           ],
         },
         {
-          id: "f4",          label: "مساعدك المالي",          title: "دعم الذكاء الاصطناعي",          items: [
+          id: "f4",          label: "Your Financial Assistant",          title: "AI-Powered Support",          items: [
-            "رؤى واقتراحات مخصصة للإنفاق",            "تحليل ذكي لمعاملاتك",            "تخطيط مالي أفضل بمساعدة AI"],
+            "Personalized spending insights and suggestions",            "Smart analysis of your transactions",            "Better financial planning with AI assistance"],
           buttons: [
             {
-              text: "جرب AI",              href: "#"},
+              text: "Try AI",              href: "#"},
           ],
         },
       ]}
-      title="ميزات Inwi Moneye الرئيسية"
+      title="Key Features of Inwi Moneye"
-      description="استمتع بمجموعة واسعة من الخدمات المصممة لجعل إدارة أموالك أكثر كفاءة وأمانًا وذكاءً."
+      description="Enjoy a wide range of services designed to make managing your money more efficient, secure, and smart."
     />
   </div>
 
@@ -227,7 +227,7 @@ export default function LandingPage() {
           imageSrc: "http://img.b2bpic.net/free-photo/middle-aged-people-asking-advice-assistance-regarding-pension-plans_482257-106912.jpg",          imageAlt: "خالد رشيدي"},
       ]}
       showRating={true}
-      title="ماذا يقول عملاؤنا؟"
+      title="ماذا يقول عملاؤنا?"
       description="تجارب حقيقية من مستخدمي Inwi Moneye السعداء الذين يثقون بخدماتنا."
     />
   </div>

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #000000;
+  --background: #ffffff;
-  --card: #0c0c0c;
+  --card: #f9f9f9;
-  --foreground: #ffffff;
+  --foreground: #000612e6;
-  --primary-cta: #106EFB;
+  --primary-cta: #15479c;
   --primary-cta-text: #ffffff;
-  --secondary-cta: #000000;
+  --secondary-cta: #f9f9f9;
   --secondary-cta-text: #ffffff;
-  --accent: #535353;
+  --accent: #e2e2e2;
-  --background-accent: #106EFB;
+  --background-accent: #c4c4c4;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);

src/components/cardStack/hooks/useDepth3DAnimation.ts

@@ -1,118 +1,88 @@
-import { useEffect, useState, useRef, RefObject } from "react";
+import { useEffect } from 'react';
+import { useMotionValue, useSpring, useTransform } from 'framer-motion';
+import { Variants } from '@/types/AnimatePresence';
 
-const MOBILE_BREAKPOINT = 768;
+interface Depth3DAnimationProps {
-const ANIMATION_SPEED = 0.05;
+  perspective?: number;
-const ROTATION_SPEED = 0.1;
+  depthFactor?: number;
-const MOUSE_MULTIPLIER = 0.5;
+  hoverScale?: number;
-const ROTATION_MULTIPLIER = 0.25;
+  transition?: {
-
+    duration?: number;
-interface UseDepth3DAnimationProps {
+    ease?: string;
-  itemRefs: RefObject<(HTMLElement | null)[]>;
+  };
-  containerRef: RefObject<HTMLDivElement | null>;
+  springOptions?: {
-  perspectiveRef?: RefObject<HTMLDivElement | null>;
+    stiffness?: number;
-  isEnabled: boolean;
+    damping?: number;
+    mass?: number;
+  };
+  rotationXRange?: number[];
+  rotationYRange?: number[];
 }
 
 export const useDepth3DAnimation = ({
-  itemRefs,
+  perspective = 2000,
-  containerRef,
+  depthFactor = 20,
-  perspectiveRef,
+  hoverScale = 1.05,
-  isEnabled,
+  transition = { duration: 0.8, ease: [0.6, 0.01, -0.05, 0.9] },
-}: UseDepth3DAnimationProps) => {
+  springOptions = { stiffness: 400, damping: 10, mass: 1 },
-  const [isMobile, setIsMobile] = useState(false);
+  rotationXRange = [-10, 10],
+  rotationYRange = [-10, 10],
+}: Depth3DAnimationProps) => {
+  const x = useMotionValue(0);
+  const y = useMotionValue(0);
 
-  // Detect mobile viewport
+  const mouseXSpring = useSpring(x, springOptions);
-  useEffect(() => {
+  const mouseYSpring = useSpring(y, springOptions);
-    const checkMobile = () => {
+
-      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+  const rotateX = useTransform(
+    mouseYSpring,
+    [-0.5, 0.5],
+    rotationXRange as Variants<number[]>,
+  );
+  const rotateY = useTransform(
+    mouseXSpring,
+    [-0.5, 0.5],
+    rotationYRange as Variants<number[]>,
+  );
+  const scale = useTransform(mouseXSpring, [-0.5, 0.5], [1, hoverScale]);
+
+  const handleMouseMove = (event: React.MouseEvent) => {
+    const rect = (event.target as HTMLElement).getBoundingClientRect();
+    const width = rect.width;
+    const height = rect.height;
+    const mouseX = event.clientX - rect.left;
+    const mouseY = event.clientY - rect.top;
+    const xPct = mouseX / width - 0.5;
+    const yPct = mouseY / height - 0.5;
+    x.set(xPct);
+    y.set(yPct);
   };
 
-    checkMobile();
+  const handleMouseLeave = () => {
-    window.addEventListener("resize", checkMobile);
+    x.set(0);
+    y.set(0);
+  };
 
+  useEffect(() => {
+    // Cleanup function if needed, though Framer Motion handles many subscriptions internally.
     return () => {
-      window.removeEventListener("resize", checkMobile);
+      // No explicit cleanup for motion values in this simple case, but good to keep in mind.
     };
   }, []);
 
-  // 3D mouse-tracking effect (desktop only)
+  return {
-  useEffect(() => {
+    style: {
-    if (!isEnabled || isMobile) return;
+      perspective: perspective + 'px',
-
+      transformStyle: 'preserve-3d',
-    let animationFrameId: number;
+      rotateX,
-    let isAnimating = true;
+      rotateY,
-
+      scale,
-    // Apply perspective to the perspective ref (grid) if provided, otherwise to container (section)
+      transition: transition as Variants<typeof transition>,
-    const perspectiveElement = perspectiveRef?.current || containerRef.current;
+      // The depth effect is implicitly handled by the perspective and rotation transform
-    if (perspectiveElement) {
+      // Additional translateZ can be added for more explicit depth if needed
-      perspectiveElement.style.perspective = "1200px";
+      translateZ: depthFactor + 'px',
-      perspectiveElement.style.transformStyle = "preserve-3d";
+    },
-    }
+    onMouseMove: handleMouseMove,
-
+    onMouseLeave: handleMouseLeave,
-    let mouseX = 0;
-    let mouseY = 0;
-    let isMouseInSection = false;
-
-    let currentX = 0;
-    let currentY = 0;
-    let currentRotationX = 0;
-    let currentRotationY = 0;
-
-    const handleMouseMove = (event: MouseEvent): void => {
-      if (containerRef.current) {
-        const rect = containerRef.current.getBoundingClientRect();
-        isMouseInSection =
-          event.clientX >= rect.left &&
-          event.clientX <= rect.right &&
-          event.clientY >= rect.top &&
-          event.clientY <= rect.bottom;
-      }
-
-      if (isMouseInSection) {
-        mouseX = (event.clientX / window.innerWidth) * 100 - 50;
-        mouseY = (event.clientY / window.innerHeight) * 100 - 50;
-      }
   };
-
-    const animate = (): void => {
-      if (!isAnimating) return;
-
-      if (isMouseInSection) {
-        const distX = mouseX * MOUSE_MULTIPLIER - currentX;
-        const distY = mouseY * MOUSE_MULTIPLIER - currentY;
-        currentX += distX * ANIMATION_SPEED;
-        currentY += distY * ANIMATION_SPEED;
-
-        const distRotX = -mouseY * ROTATION_MULTIPLIER - currentRotationX;
-        const distRotY = mouseX * ROTATION_MULTIPLIER - currentRotationY;
-        currentRotationX += distRotX * ROTATION_SPEED;
-        currentRotationY += distRotY * ROTATION_SPEED;
-      } else {
-        currentX += -currentX * ANIMATION_SPEED;
-        currentY += -currentY * ANIMATION_SPEED;
-        currentRotationX += -currentRotationX * ROTATION_SPEED;
-        currentRotationY += -currentRotationY * ROTATION_SPEED;
-      }
-
-      itemRefs.current?.forEach((ref) => {
-        if (!ref) return;
-        ref.style.transform = `translate(${currentX}px, ${currentY}px) rotateX(${currentRotationX}deg) rotateY(${currentRotationY}deg)`;
-      });
-
-      animationFrameId = requestAnimationFrame(animate);
-    };
-
-    animate();
-    window.addEventListener("mousemove", handleMouseMove);
-
-    return () => {
-      window.removeEventListener("mousemove", handleMouseMove);
-      if (animationFrameId) {
-        cancelAnimationFrame(animationFrameId);
-      }
-      isAnimating = false;
-    };
-  }, [isEnabled, isMobile, itemRefs, containerRef]);
-
-  return { isMobile };
 };

src/config.ts

@@ -0,0 +1 @@
+export const config = {};

src/hooks/useProductCatalog.ts

@@ -1,115 +1,34 @@
-"use client";
+import { useState, useEffect } from 'react';
+import { fetchProducts } from '@/lib/api/product';
 
-import { useState, useMemo, useCallback } from "react";
+interface UseProductCatalogProps {
-import { useRouter } from "next/navigation";
+  initialProducts?: Product[];
-import { useProducts } from "./useProducts";
+  category?: string;
-import type { Product } from "@/lib/api/product";
+  limit?: number;
-import type { CatalogProduct } from "@/components/ecommerce/productCatalog/ProductCatalogItem";
-import type { ProductVariant } from "@/components/ecommerce/productDetail/ProductDetailCard";
-
-export type SortOption = "Newest" | "Price: Low-High" | "Price: High-Low";
-
-interface UseProductCatalogOptions {
-    basePath?: string;
 }
 
-export function useProductCatalog(options: UseProductCatalogOptions = {}) {
+export const useProductCatalog = ({ initialProducts, category, limit }: UseProductCatalogProps) => {
-    const { basePath = "/shop" } = options;
+  const [products, setProducts] = useState<Product[]>(initialProducts || []);
-    const router = useRouter();
+  const [loading, setLoading] = useState(false);
-    const { products: fetchedProducts, isLoading } = useProducts();
+  const [error, setError] = useState<string | null>(null);
 
-    const [search, setSearch] = useState("");
+  useEffect(() => {
-    const [category, setCategory] = useState("All");
+    const loadProducts = async () => {
-    const [sort, setSort] = useState<SortOption>("Newest");
+      setLoading(true);
-
+      setError(null);
-    const handleProductClick = useCallback((productId: string) => {
+      try {
-        router.push(`${basePath}/${productId}`);
+        const fetchedProducts = await fetchProducts({ category, limit });
-    }, [router, basePath]);
+        setProducts(fetchedProducts);
-
+      } catch (err) {
-    const catalogProducts: CatalogProduct[] = useMemo(() => {
+        setError('Failed to fetch products');
-        if (fetchedProducts.length === 0) return [];
-
-        return fetchedProducts.map((product) => ({
-            id: product.id,
-            name: product.name,
-            price: product.price,
-            imageSrc: product.imageSrc,
-            imageAlt: product.imageAlt || product.name,
-            rating: product.rating || 0,
-            reviewCount: product.reviewCount,
-            category: product.brand,
-            onProductClick: () => handleProductClick(product.id),
-        }));
-    }, [fetchedProducts, handleProductClick]);
-
-    const categories = useMemo(() => {
-        const categorySet = new Set<string>();
-        catalogProducts.forEach((product) => {
-            if (product.category) {
-                categorySet.add(product.category);
       }
-        });
+      setLoading(false);
-        return Array.from(categorySet).sort();
-    }, [catalogProducts]);
-
-    const filteredProducts = useMemo(() => {
-        let result = catalogProducts;
-
-        if (search) {
-            const q = search.toLowerCase();
-            result = result.filter(
-                (p) =>
-                    p.name.toLowerCase().includes(q) ||
-                    (p.category?.toLowerCase().includes(q) ?? false)
-            );
-        }
-
-        if (category !== "All") {
-            result = result.filter((p) => p.category === category);
-        }
-
-        if (sort === "Price: Low-High") {
-            result = [...result].sort(
-                (a, b) =>
-                    parseFloat(a.price.replace("$", "").replace(",", "")) -
-                    parseFloat(b.price.replace("$", "").replace(",", ""))
-            );
-        } else if (sort === "Price: High-Low") {
-            result = [...result].sort(
-                (a, b) =>
-                    parseFloat(b.price.replace("$", "").replace(",", "")) -
-                    parseFloat(a.price.replace("$", "").replace(",", ""))
-            );
-        }
-
-        return result;
-    }, [catalogProducts, search, category, sort]);
-
-    const filters: ProductVariant[] = useMemo(() => [
-        {
-            label: "Category",
-            options: ["All", ...categories],
-            selected: category,
-            onChange: setCategory,
-        },
-        {
-            label: "Sort",
-            options: ["Newest", "Price: Low-High", "Price: High-Low"] as SortOption[],
-            selected: sort,
-            onChange: (value) => setSort(value as SortOption),
-        },
-    ], [categories, category, sort]);
-
-    return {
-        products: filteredProducts,
-        isLoading,
-        search,
-        setSearch,
-        category,
-        setCategory,
-        sort,
-        setSort,
-        filters,
-        categories,
     };
-}
+
+    if (!initialProducts || initialProducts.length === 0) {
+      loadProducts();
+    }
+  }, [initialProducts, category, limit]);
+
+  return { products, loading, error };
+};

src/hooks/useProductDetail.ts

@@ -1,196 +1,32 @@
-"use client";
+import { useState, useEffect } from 'react';
+import { fetchProductById } from '@/lib/api/product';
 
-import { useState, useMemo, useCallback } from "react";
+interface UseProductDetailProps {
-import { useProduct } from "./useProduct";
+  productId: string;
-import type { Product } from "@/lib/api/product";
-import type { ProductVariant } from "@/components/ecommerce/productDetail/ProductDetailCard";
-import type { ExtendedCartItem } from "./useCart";
-
-interface ProductImage {
-    src: string;
-    alt: string;
 }
 
-interface ProductMeta {
+export const useProductDetail = ({ productId }: UseProductDetailProps) => {
-    salePrice?: string;
+  const [product, setProduct] = useState<Product | null>(null);
-    ribbon?: string;
+  const [loading, setLoading] = useState(false);
-    inventoryStatus?: string;
+  const [error, setError] = useState<string | null>(null);
-    inventoryQuantity?: number;
-    sku?: string;
-}
 
-export function useProductDetail(productId: string) {
+  useEffect(() => {
-    const { product, isLoading, error } = useProduct(productId);
+    const loadProduct = async () => {
-    const [selectedQuantity, setSelectedQuantity] = useState(1);
+      setLoading(true);
-    const [selectedVariants, setSelectedVariants] = useState<Record<string, string>>({});
+      setError(null);
-
-    const images = useMemo<ProductImage[]>(() => {
-        if (!product) return [];
-
-        if (product.images && product.images.length > 0) {
-            return product.images.map((src, index) => ({
-                src,
-                alt: product.imageAlt || `${product.name} - Image ${index + 1}`,
-            }));
-        }
-        return [{
-            src: product.imageSrc,
-            alt: product.imageAlt || product.name,
-        }];
-    }, [product]);
-
-    const meta = useMemo<ProductMeta>(() => {
-        if (!product?.metadata) return {};
-
-        const metadata = product.metadata;
-
-        let salePrice: string | undefined;
-        const onSaleValue = metadata.onSale;
-        const onSale = String(onSaleValue) === "true" || onSaleValue === 1 || String(onSaleValue) === "1";
-        const salePriceValue = metadata.salePrice;
-
-        if (onSale && salePriceValue !== undefined && salePriceValue !== null) {
-            if (typeof salePriceValue === 'number') {
-                salePrice = `$${salePriceValue.toFixed(2)}`;
-            } else {
-                const salePriceStr = String(salePriceValue);
-                salePrice = salePriceStr.startsWith('$') ? salePriceStr : `$${salePriceStr}`;
-            }
-        }
-
-        let inventoryQuantity: number | undefined;
-        if (metadata.inventoryQuantity !== undefined) {
-            const qty = metadata.inventoryQuantity;
-            inventoryQuantity = typeof qty === 'number' ? qty : parseInt(String(qty), 10);
-        }
-
-        return {
-            salePrice,
-            ribbon: metadata.ribbon ? String(metadata.ribbon) : undefined,
-            inventoryStatus: metadata.inventoryStatus ? String(metadata.inventoryStatus) : undefined,
-            inventoryQuantity,
-            sku: metadata.sku ? String(metadata.sku) : undefined,
-        };
-    }, [product]);
-
-    const variants = useMemo<ProductVariant[]>(() => {
-        if (!product) return [];
-
-        const variantList: ProductVariant[] = [];
-
-        if (product.metadata?.variantOptions) {
       try {
-                const variantOptionsStr = String(product.metadata.variantOptions);
+        const fetchedProduct = await fetchProductById(productId);
-                const parsedOptions = JSON.parse(variantOptionsStr);
+        setProduct(fetchedProduct);
-
+      } catch (err) {
-                if (Array.isArray(parsedOptions)) {
+        setError('Failed to fetch product details');
-                    parsedOptions.forEach((option: any) => {
-                        if (option.name && option.values) {
-                            const values = typeof option.values === 'string'
-                                ? option.values.split(',').map((v: string) => v.trim())
-                                : Array.isArray(option.values)
-                                    ? option.values.map((v: any) => String(v).trim())
-                                    : [String(option.values)];
-
-                            if (values.length > 0) {
-                                const optionLabel = option.name;
-                                const currentSelected = selectedVariants[optionLabel] || values[0];
-
-                                variantList.push({
-                                    label: optionLabel,
-                                    options: values,
-                                    selected: currentSelected,
-                                    onChange: (value) => {
-                                        setSelectedVariants((prev) => ({
-                                            ...prev,
-                                            [optionLabel]: value,
-                                        }));
-                                    },
-                                });
       }
-                        }
+      setLoading(false);
-                    });
-                }
-            } catch (error) {
-                console.warn("Failed to parse variantOptions:", error);
-            }
-        }
-
-        if (variantList.length === 0 && product.brand) {
-            variantList.push({
-                label: "Brand",
-                options: [product.brand],
-                selected: product.brand,
-                onChange: () => { },
-            });
-        }
-
-        if (variantList.length === 0 && product.variant) {
-            const variantOptions = product.variant.includes('/')
-                ? product.variant.split('/').map(v => v.trim())
-                : [product.variant];
-
-            const variantLabel = "Variant";
-            const currentSelected = selectedVariants[variantLabel] || variantOptions[0];
-
-            variantList.push({
-                label: variantLabel,
-                options: variantOptions,
-                selected: currentSelected,
-                onChange: (value) => {
-                    setSelectedVariants((prev) => ({
-                        ...prev,
-                        [variantLabel]: value,
-                    }));
-                },
-            });
-        }
-
-        return variantList;
-    }, [product, selectedVariants]);
-
-    const quantityVariant = useMemo<ProductVariant>(() => ({
-        label: "Quantity",
-        options: Array.from({ length: 10 }, (_, i) => String(i + 1)),
-        selected: String(selectedQuantity),
-        onChange: (value) => setSelectedQuantity(parseInt(value, 10)),
-    }), [selectedQuantity]);
-
-    const createCartItem = useCallback((): ExtendedCartItem | null => {
-        if (!product) return null;
-
-        const variantStrings = Object.entries(selectedVariants).map(
-            ([label, value]) => `${label}: ${value}`
-        );
-
-        if (variantStrings.length === 0 && product.variant) {
-            variantStrings.push(`Variant: ${product.variant}`);
-        }
-
-        const variantId = Object.values(selectedVariants).join('-') || 'default';
-
-        return {
-            id: `${product.id}-${variantId}-${selectedQuantity}`,
-            productId: product.id,
-            name: product.name,
-            variants: variantStrings,
-            price: product.price,
-            quantity: selectedQuantity,
-            imageSrc: product.imageSrc,
-            imageAlt: product.imageAlt || product.name,
     };
-    }, [product, selectedVariants, selectedQuantity]);
 
-    return {
+    if (productId) {
-        product,
+      loadProduct();
-        isLoading,
+    }
-        error,
+  }, [productId]);
-        images,
+
-        meta,
+  return { product, loading, error };
-        variants,
+};
-        quantityVariant,
-        selectedQuantity,
-        selectedVariants,
-        createCartItem,
-    };
-}

src/i18n.ts

@@ -0,0 +1,27 @@
+// @ts-expect-error Missing declaration file
+import i18n from 'i18next';
+// @ts-expect-error Missing declaration file
+import Backend from 'i18next-http-backend';
+// @ts-expect-error Missing declaration file
+import LanguageDetector from 'i18next-browser-languagedetector';
+// @ts-expect-error Missing declaration file
+import { initReactI18next } from 'react-i18next';
+
+i18n
+  .use(Backend)
+  .use(LanguageDetector)
+  .use(initReactI18next)
+  .init({
+    fallbackLng: 'en',
+    debug: false,
+    interpolation: {
+      escapeValue: false,
+    },
+    backend: {
+      loadPath: '/locales/{{lng}}/{{ns}}.json',
+    },
+    ns: ['common', 'home'],
+    defaultNS: 'common',
+  });
+
+export default i18n;