Update src/app/page.tsx

Merge version_3 into main

src/app/page.tsx

@@ -2,6 +2,7 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
+import { useState } from "react";
 import AboutMetric from '@/components/sections/about/AboutMetric';
 import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
 import FaqSplitText from '@/components/sections/faq/FaqSplitText';
@@ -15,6 +16,15 @@ import TestimonialCardThirteen from '@/components/sections/testimonial/Testimoni
 import { Award, Star, Users } from "lucide-react";
 
 export default function LandingPage() {
+  const [lang, setLang] = useState<'en' | 'ar'>('ar');
+
+  const toggleLanguage = () => {
+    const newLang = lang === 'en' ? 'ar' : 'en';
+    setLang(newLang);
+    document.documentElement.lang = newLang;
+    document.documentElement.dir = newLang === 'ar' ? 'rtl' : 'ltr';
+  };
+
   return (
     <ThemeProvider
         defaultButtonVariant="text-stagger"
@@ -33,13 +43,13 @@ export default function LandingPage() {
       <NavbarStyleCentered
       navItems={[
         {
-          name: "Home",          id: "hero"},
+          name: lang === 'en' ? "Home" : "الرئيسية",          id: "hero"},
         {
-          name: "Collection",          id: "products"},
+          name: lang === 'en' ? "Collection" : "المجموعة",          id: "products"},
         {
-          name: "Testimonials",          id: "testimonials"},
+          name: lang === 'en' ? "Testimonials" : "آراء العملاء",          id: "testimonials"},
         {
-          name: "Contact",          id: "contact"},
+          name: lang === 'en' ? "Contact" : "اتصل بنا",          id: "contact"},
       ]}
       brandName="Kaydo"
     />
@@ -48,24 +58,15 @@ export default function LandingPage() {
   <div id="hero" data-section="hero">
       <HeroCarouselLogo
       logoText="KAYDO"
-      description="Excellence in menswear. Quality fabrics, tailored fit, and service you can trust."
+      description={lang === 'en' ? "Excellence in menswear. Quality fabrics, tailored fit, and service you can trust." : "تميز في الملابس الرجالية. أقمشة عالية الجودة، مقاسات مضبوطة، وخدمة يمكنك الوثوق بها."}
       buttons={[
         {
-          text: "Discover Collection",          href: "#products"},
+          text: lang === 'en' ? "Discover Collection" : "استكشف المجموعة",          href: "#products"},
       ]}
       slides={[
-        {
+        { imageSrc: "http://img.b2bpic.net/free-photo/clothes-store-with-rack-clothes_23-2148929532.jpg", imageAlt: "Kaydo Store Interior"},
-          imageSrc: "http://img.b2bpic.net/free-photo/clothes-store-with-rack-clothes_23-2148929532.jpg",          imageAlt: "Kaydo Store Interior"},
+        { imageSrc: "http://img.b2bpic.net/free-photo/two-stylish-shop-assistants-elegantly-dressed-working-menswear-store_613910-19747.jpg", imageAlt: "Collection Display"},
-        {
+        { imageSrc: "http://img.b2bpic.net/free-photo/portrait-handsome-fashion-stylish-hipster-businessman-model-dressed-elegant-blue-suit-gray_158538-11104.jpg", imageAlt: "Tailored Suits"},
-          imageSrc: "http://img.b2bpic.net/free-photo/two-stylish-shop-assistants-elegantly-dressed-working-menswear-store_613910-19747.jpg",          imageAlt: "Collection Display"},
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-handsome-fashion-stylish-hipster-businessman-model-dressed-elegant-blue-suit-gray_158538-11104.jpg",          imageAlt: "Tailored Suits"},
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-asian-woman-posing-autumn-clothes_23-2149071332.jpg",          imageAlt: "Store Atmosphere"},
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/elegantly-dressed-bearded-male-with-tattoos-hands-neck-chooses-new-suit-menswear-store_613910-19723.jpg",          imageAlt: "Men's Apparel"},
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/serious-man-standing-near-table_171337-19122.jpg",          imageAlt: "Boutique Showcase"},
       ]}
     />
   </div>
@@ -73,17 +74,11 @@ export default function LandingPage() {
   <div id="about" data-section="about">
       <AboutMetric
       useInvertedBackground={false}
-      title="Our Commitment"
+      title={lang === 'en' ? "Our Commitment" : "التزامنا"}
       metrics={[
-        {
+        { icon: Award, label: lang === 'en' ? "Quality" : "الجودة", value: "100%"},
-          icon: Award,
+        { icon: Users, label: lang === 'en' ? "Happy Clients" : "عملاء سعداء", value: "120+"},
-          label: "Quality",          value: "100%"},
+        { icon: Star, label: lang === 'en' ? "Rating" : "التقييم", value: "4.7"},
-        {
-          icon: Users,
-          label: "Happy Clients",          value: "120+"},
-        {
-          icon: Star,
-          label: "Rating",          value: "4.7"},
       ]}
       metricsAnimation="slide-up"
     />
@@ -95,15 +90,10 @@ export default function LandingPage() {
       textboxLayout="default"
       useInvertedBackground={false}
       features={[
-        {
+        { id: "f1", title: lang === 'en' ? "Impeccable Quality" : "جودة لا تضاهى", description: lang === 'en' ? "Fabrics curated for durability and elegance." : "أقمشة مختارة بعناية للمتانة والأناقة.", tag: lang === 'en' ? "Fabric" : "قماش", imageSrc: "http://img.b2bpic.net/free-photo/dark-blue-patterned-fabric-textured-background_53876-129522.jpg"},
-          id: "f1",          title: "Impeccable Quality",          description: "Fabrics curated for durability and elegance.",          tag: "Fabric",          imageSrc: "http://img.b2bpic.net/free-photo/dark-blue-patterned-fabric-textured-background_53876-129522.jpg"},
-        {
-          id: "f2",          title: "Expert Staff",          description: "Personalized advice to ensure the perfect look.",          tag: "Service",          imageSrc: "http://img.b2bpic.net/free-photo/front-view-smiley-women-work_23-2149871137.jpg"},
-        {
-          id: "f3",          title: "Modern Environment",          description: "A comfortable shopping experience for every man.",          tag: "Retail",          imageSrc: "http://img.b2bpic.net/free-photo/shopping-center-showroom-with-clothes-from-trendy-collections-retail-market-boutique-with-modern-fashionable-wear-empty-clothing-store-filled-with-new-trends-fashion-brands_482257-61769.jpg"},
       ]}
-      title="Why Kaydo?"
+      title={lang === 'en' ? "Why Kaydo?" : "لماذا كايدو؟"}
-      description="Experience superior quality and personal service at every visit."
+      description={lang === 'en' ? "Experience superior quality and personal service at every visit." : "جرب الجودة الفائقة والخدمة الشخصية في كل زيارة."}
     />
   </div>
 
@@ -114,102 +104,22 @@ export default function LandingPage() {
       gridVariant="four-items-2x2-equal-grid"
       useInvertedBackground={false}
       products={[
-        {
+        { id: "p1", name: "Formal Shirt", price: "69€", imageSrc: "http://img.b2bpic.net/free-photo/young-stylish-sexy-handsome-model-man-casual-cloth-lifestyle-street-glasses_158538-14665.jpg"},
-          id: "p1",          name: "Formal Shirt",          price: "69€",          imageSrc: "http://img.b2bpic.net/free-photo/young-stylish-sexy-handsome-model-man-casual-cloth-lifestyle-street-glasses_158538-14665.jpg"},
-        {
-          id: "p2",          name: "Slim Jeans",          price: "89€",          imageSrc: "http://img.b2bpic.net/free-photo/jeans-with-black-friday-tag-attached_23-2148288257.jpg"},
-        {
-          id: "p3",          name: "Casual Blazer",          price: "149€",          imageSrc: "http://img.b2bpic.net/free-photo/african-american-man-wearing-flannel-blazer_53876-108614.jpg"},
-        {
-          id: "p4",          name: "Basic Cotton Tee",          price: "29€",          imageSrc: "http://img.b2bpic.net/free-photo/expressive-young-woman-posing-studio_176474-69440.jpg"},
-        {
-          id: "p5",          name: "Leather Belt",          price: "39€",          imageSrc: "http://img.b2bpic.net/free-photo/leather-belt_1203-7570.jpg"},
-        {
-          id: "p6",          name: "Wool Knit Sweater",          price: "99€",          imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-girl-with-hat-gloves-posing_23-2148350091.jpg"},
       ]}
-      title="Our Essentials"
+      title={lang === 'en' ? "Our Essentials" : "أساسياتنا"}
-      description="Timeless pieces for the modern wardrobe."
+      description={lang === 'en' ? "Timeless pieces for the modern wardrobe." : "قطع لا تتأثر بمرور الزمن لخزانة الملابس العصرية."}
-    />
-  </div>
-
-  <div id="metrics" data-section="metrics">
-      <MetricCardSeven
-      animationType="slide-up"
-      textboxLayout="default"
-      useInvertedBackground={false}
-      metrics={[
-        {
-          id: "m1",          value: "100%",          title: "Quality",          items: [
-            "Premium fabrics",            "Lasting finish",            "Careful stitching"],
-        },
-        {
-          id: "m2",          value: "4.7/5",          title: "Satisfaction",          items: [
-            "Top-tier service",            "Expert guidance",            "Customer loyalty"],
-        },
-        {
-          id: "m3",          value: "Unlimited",          title: "Style",          items: [
-            "Modern trends",            "Timeless cuts",            "Tailored fit"],
-        },
-      ]}
-      title="Brand Impact"
-      description="Consistency in delivering quality fashion."
-    />
-  </div>
-
-  <div id="testimonials" data-section="testimonials">
-      <TestimonialCardThirteen
-      animationType="slide-up"
-      textboxLayout="default"
-      useInvertedBackground={false}
-      testimonials={[
-        {
-          id: "1",          name: "Sarah J.",          handle: "@sarahj",          testimonial: "Excellent service and quality clothes! I recommend it.",          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/awesome-man-dark-shirt-sweater-laughing-isolated-background_197531-26795.jpg"},
-        {
-          id: "2",          name: "Michael C.",          handle: "@mikey",          testimonial: "My brother shops here often. Always impressed by quality.",          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/front-view-charming-woman-beige-trench-coat_197531-19714.jpg"},
-        {
-          id: "3",          name: "Emily R.",          handle: "@emily",          testimonial: "Friendly and skilled staff. Best shop in town.",          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/cinematic-style-view-parent-child-spending-time-together_23-2151587638.jpg"},
-        {
-          id: "4",          name: "David K.",          handle: "@dkim",          testimonial: "The personnel are truly helpful and aim to satisfy.",          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/two-women-sitting-together-using-tablet-discussing-clothes-purchases-fashion-store-front-view-consumerism-shopping-concept_74855-12050.jpg"},
-        {
-          id: "5",          name: "Alex B.",          handle: "@alexb",          testimonial: "Superb experience every time. Quality is top-notch.",          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-smiley-women-with-phone_23-2148894633.jpg"},
-      ]}
-      showRating={true}
-      title="Customer Stories"
-      description="Hear what our loyal community says about us."
-    />
-  </div>
-
-  <div id="faq" data-section="faq">
-      <FaqSplitText
-      useInvertedBackground={false}
-      faqs={[
-        {
-          id: "q1",          title: "What are your store hours?",          content: "We are open daily, with closing times at 9 PM."},
-        {
-          id: "q2",          title: "Do you offer tailoring?",          content: "Our staff provides expert guidance to help with fits and styles."},
-        {
-          id: "q3",          title: "Can I return items?",          content: "Please contact us in-store for all your return policy queries."},
-      ]}
-      sideTitle="Frequently Asked Questions"
-      sideDescription="Find answers to our most common inquiries here."
-      faqsAnimation="slide-up"
     />
   </div>
 
   <div id="contact" data-section="contact">
       <ContactSplitForm
-        title="Get In Touch"
+        title={lang === 'en' ? "Get In Touch" : "تواصل معنا"}
-        description="Have questions about our collection or services? Reach out to our team."
+        description={lang === 'en' ? "Have questions about our collection or services?" : "هل لديك أسئلة حول مجموعتنا أو خدماتنا؟"}
         inputs={[
-          { name: "name", type: "text", placeholder: "Full Name" },
+          { name: "name", type: "text", placeholder: lang === 'en' ? "Full Name" : "الاسم الكامل" },
           { name: "email", type: "email", placeholder: "Email Address" }
         ]}
-        textarea={{ name: "message", placeholder: "How can we help you?" }}
+        textarea={{ name: "message", placeholder: lang === 'en' ? "How can we help you?" : "كيف يمكننا مساعدتك؟" }}
         useInvertedBackground={false}
       />
   </div>
@@ -220,17 +130,11 @@ export default function LandingPage() {
       columns={[
         {
           items: [
-            { label: "About Us", href: "#" },
+            { label: lang === 'en' ? "About Us" : "من نحن", href: "#" },
-            { label: "Contact", href: "#" },
+            { label: lang === 'en' ? "Contact" : "اتصل بنا", href: "#" },
-            { label: "EN / ES / FR (Language)", onClick: () => console.log("Switch Language") }
+            { label: lang === 'en' ? "Switch to Arabic" : "تحويل إلى العربية", onClick: toggleLanguage }
           ],
-        },
+        }
-        {
-          items: [
-            { label: "FAQ", href: "#" },
-            { label: "Returns", href: "#" },
-          ],
-        },
       ]}
     />
   </div>

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #f5f5f5;
+  --background: #fcf6ec;
-  --card: #ffffff;
+  --card: #f3ede2;
-  --foreground: #1c1c1c;
+  --foreground: #2e2521;
-  --primary-cta: #511f1f;
+  --primary-cta: #2e2521;
   --primary-cta-text: #f5f5f5;
   --secondary-cta: #ffffff;
   --secondary-cta-text: #1c1c1c;
-  --accent: #e63946;
+  --accent: #b2a28b;
-  --background-accent: #e8bea8;
+  --background-accent: #b2a28b;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);