Update src/app/page.tsx

src/app/page.tsx

@@ -2,14 +2,14 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import ContactSplit from '@/components/sections/contact/ContactSplit';
-import FaqSplitText from '@/components/sections/faq/FaqSplitText';
-import FooterSimple from '@/components/sections/footer/FooterSimple';
-import HeroBillboardScroll from '@/components/sections/hero/HeroBillboardScroll';
-import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
-import ProductCardOne from '@/components/sections/product/ProductCardOne';
-import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
-import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
+import ContactCTA from '@/components/sections/contact/ContactCTA';
+import FaqBase from '@/components/sections/faq/FaqBase';
+import FooterCard from '@/components/sections/footer/FooterCard';
+import HeroOverlayTestimonial from '@/components/sections/hero/HeroOverlayTestimonial';
+import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
+import ProductCardFour from '@/components/sections/product/ProductCardFour';
+import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
+import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';
 import { Coffee } from "lucide-react";
 
 export default function LandingPage() {
@@ -21,239 +21,107 @@ export default function LandingPage() {
         contentWidth="compact"
         sizing="largeSmallSizeMediumTitles"
         background="fluid"
-        cardStyle="subtle-shadow"
-        primaryButtonStyle="flat"
+        cardStyle="glass-elevated"
+        primaryButtonStyle="gradient"
         secondaryButtonStyle="glass"
         headingFontWeight="bold"
     >
       <ReactLenis root>
-  <div id="nav" data-section="nav">
-      <NavbarStyleFullscreen
-      navItems={[
-        {
-          name: "الرئيسية",
-          id: "hero",
-        },
-        {
-          name: "عن المكان",
-          id: "about",
-        },
-        {
-          name: "منتجاتنا",
-          id: "products",
-        },
-        {
-          name: "آراء العملاء",
-          id: "testimonials",
-        },
-        {
-          name: "تواصل معنا",
-          id: "contact",
-        },
-      ]}
-      brandName="بن الملوك"
-    />
-  </div>
+        <div id="nav" data-section="nav">
+          <NavbarLayoutFloatingOverlay
+            navItems={[
+              { name: "الرئيسية", id: "hero" },
+              { name: "قصتنا", id: "about" },
+              { name: "منتجاتنا", id: "products" },
+              { name: "آراء العملاء", id: "testimonials" },
+              { name: "تواصل معنا", id: "contact" },
+            ]}
+            brandName="بن الملوك"
+          />
+        </div>
 
-  <div id="hero" data-section="hero">
-      <HeroBillboardScroll
-      background={{
-        variant: "plain",
-      }}
-      title="بن الملوك: أرقى أنواع البن الأصلي"
-      description="تجربة استثنائية لعشاق القهوة. قهوة طازجة، جودة عالية، وأجواء مريحة بانتظاركم."
-      buttons={[
-        {
-          text: "اكتشف منتجاتنا",
-          href: "#products",
-        },
-      ]}
-      imageSrc="http://img.b2bpic.net/free-photo/closeup-hot-cup-coffee-with-saucer-spoon-tray-bed-morning_181624-47271.jpg"
-    />
-  </div>
+        <div id="hero" data-section="hero">
+          <HeroOverlayTestimonial
+            title="بن الملوك: أرقى أنواع البن الأصلي"
+            description="تجربة استثنائية لعشاق القهوة. جودة عالية وأجواء مريحة في كل فنجان."
+            imageSrc="http://img.b2bpic.net/free-photo/closeup-hot-cup-coffee-with-saucer-spoon-tray-bed-morning_181624-47271.jpg"
+            testimonials={[
+                { name: "أحمد محمود", handle: "@ahmed", testimonial: "قهوة لا يُعلى عليها!", rating: 5 },
+                { name: "سارة محمد", handle: "@sara", testimonial: "تجربة طعم لا تُنسى.", rating: 5 }
+            ]}
+            buttons={[{ text: "تسوق الآن", href: "#products" }]}
+          />
+        </div>
 
-  <div id="about" data-section="about">
-      <TestimonialAboutCard
-      useInvertedBackground={false}
-      tag="قصتنا"
-      title="جودة لا تضاهى"
-      description="في بن الملوك، نختار أجود أنواع البن لنضمن لكم طعمًا لا يُنسى في كل كوب. نحن نهتم بكل تفصيلة لتستمتعوا بتجربة فريدة."
-      subdescription="نحن نؤمن أن القهوة ليست مجرد مشروب، بل هي طقس يومي يستحق أفضل ما لدينا."
-      icon={Coffee}
-      imageSrc="http://img.b2bpic.net/free-photo/digital-lavender-style-interior-design_23-2151561232.jpg"
-      mediaAnimation="slide-up"
-    />
-  </div>
+        <div id="about" data-section="about">
+          <InlineImageSplitTextAbout
+            useInvertedBackground={true}
+            heading={[{ type: 'text', content: "شغفنا هو " }, { type: 'text', content: "القهوة الأصيلة" }]}
+            className="py-20"
+          />
+        </div>
 
-  <div id="products" data-section="products">
-      <ProductCardOne
-      animationType="slide-up"
-      textboxLayout="default"
-      gridVariant="uniform-all-items-equal"
-      useInvertedBackground={false}
-      products={[
-        {
-          id: "1",
-          name: "بن ملكي - دارك",
-          price: "150 ج.م",
-          imageSrc: "http://img.b2bpic.net/free-photo/tattooed-barista-holds-blank-package-bags-with-freshly-baked-coffee-beans-ready-sale-deliverybrewing_346278-737.jpg",
-        },
-        {
-          id: "2",
-          name: "بن ملكي - وسط",
-          price: "140 ج.م",
-          imageSrc: "http://img.b2bpic.net/free-photo/roasted-coffee-bean-pictures-concept_53876-16489.jpg",
-        },
-        {
-          id: "3",
-          name: "خلطة بن الملوك",
-          price: "160 ج.م",
-          imageSrc: "http://img.b2bpic.net/free-photo/high-angle-barista-leveling-coffee-level-machine-cup_23-2148523052.jpg",
-        },
-        {
-          id: "4",
-          name: "بن إثيوبي فاخر",
-          price: "180 ج.م",
-          imageSrc: "http://img.b2bpic.net/free-photo/bar-concept_23-2147798027.jpg",
-        },
-        {
-          id: "5",
-          name: "بن كولومبي",
-          price: "170 ج.م",
-          imageSrc: "http://img.b2bpic.net/free-photo/bowl-brown-beans-blue-background-high-quality-photo_114579-36234.jpg",
-        },
-        {
-          id: "6",
-          name: "بن برازيلي",
-          price: "155 ج.م",
-          imageSrc: "http://img.b2bpic.net/free-photo/coffee-beans-texture-closeup-brown-coffee-background-texture-closeup-nice-background-your-ideas_549566-534.jpg",
-        },
-      ]}
-      title="منتجاتنا المميزة"
-      description="استمتع بمجموعتنا المختارة من البن الطازج."
-    />
-  </div>
+        <div id="products" data-section="products">
+          <ProductCardFour
+            animationType="slide-up"
+            textboxLayout="default"
+            gridVariant="bento-grid"
+            useInvertedBackground={false}
+            title="منتجاتنا المتميزة"
+            description="اختر بنك المفضل من مجموعتنا الفريدة."
+            products={[
+              { id: "1", name: "بن ملكي - دارك", price: "150 ج.م", variant: "حبوب كاملة", imageSrc: "http://img.b2bpic.net/free-photo/tattooed-barista-holds-blank-package-bags-with-freshly-baked-coffee-beans-ready-sale-deliverybrewing_346278-737.jpg" },
+              { id: "2", name: "بن ملكي - وسط", price: "140 ج.م", variant: "مطحون", imageSrc: "http://img.b2bpic.net/free-photo/roasted-coffee-bean-pictures-concept_53876-16489.jpg" },
+              { id: "3", name: "إثيوبي فاخر", price: "180 ج.م", variant: "حبوب", imageSrc: "http://img.b2bpic.net/free-photo/bar-concept_23-2147798027.jpg" }
+            ]}
+          />
+        </div>
 
-  <div id="testimonials" data-section="testimonials">
-      <TestimonialCardTwo
-      animationType="slide-up"
-      textboxLayout="default"
-      useInvertedBackground={false}
-      testimonials={[
-        {
-          id: "1",
-          name: "سارة محمد",
-          role: "محب للقهوة",
-          testimonial: "مكان رائع فعلاً، طعم البن مميز جداً والخدمة سريعة.",
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-beautiful-young-woman-bathrobe-drinking-morning-coffee-enjoying-taste-smiling_1258-193248.jpg",
-        },
-        {
-          id: "2",
-          name: "أحمد محمود",
-          role: "عميل دائم",
-          testimonial: "أفضل مكان ممكن تشرب فيه قهوة في أجواء هادية ومريحة.",
-          imageSrc: "http://img.b2bpic.net/free-photo/blond-business-woman-lying-couch_23-2148095782.jpg",
-        },
-        {
-          id: "3",
-          name: "ليلى سمير",
-          role: "عاشقة الكافيين",
-          testimonial: "بن الملوك من أحسن الأماكن، البن تحفة والخدمة ممتازة.",
-          imageSrc: "http://img.b2bpic.net/free-photo/smiling-handsome-man-meeting_329181-1766.jpg",
-        },
-        {
-          id: "4",
-          name: "خالد عمر",
-          role: "خبير قهوة",
-          testimonial: "الجودة عالية جداً، بن الملوك فعلاً اختيار موفق لأي حد بيحب القهوة.",
-          imageSrc: "http://img.b2bpic.net/free-vector/hand-drawn-coffee-pattern_23-2147602776.jpg",
-        },
-        {
-          id: "5",
-          name: "نور هاني",
-          role: "زائر",
-          testimonial: "مكان جميل وأسعاره حلوة، أنصح بتجربته.",
-          imageSrc: "http://img.b2bpic.net/free-photo/best-place-town-meeting-with-friends_329181-2888.jpg",
-        },
-      ]}
-      title="ماذا يقول عملاؤنا"
-      description="تجارب حقيقية من عشاق القهوة في بن الملوك."
-    />
-  </div>
+        <div id="testimonials" data-section="testimonials">
+          <TestimonialCardSixteen
+            title="ماذا يقول عشاقنا"
+            description="انضم لآلاف العملاء الذين وثقوا ببن الملوك."
+            textboxLayout="split"
+            useInvertedBackground={true}
+            animationType="slide-up"
+            kpiItems={[{ value: "10k+", label: "فنجان قهوة" }, { value: "500+", label: "عميل سعيد" }, { value: "5*", label: "تقييم جودة" }]}
+            testimonials={[
+              { id: "1", name: "نور هاني", role: "زائر", company: "عميل", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/best-place-town-meeting-with-friends_329181-2888.jpg" }
+            ]}
+          />
+        </div>
 
-  <div id="faq" data-section="faq">
-      <FaqSplitText
-      useInvertedBackground={false}
-      faqs={[
-        {
-          id: "q1",
-          title: "هل يتوفر البن حبوب مطحونة؟",
-          content: "نعم، نوفر طحن البن حسب الرغبة وبأي درجة تناسبك.",
-        },
-        {
-          id: "q2",
-          title: "هل يوجد توصيل للمنازل؟",
-          content: "نعم، متاح التوصيل لجميع المناطق القريبة من المحل.",
-        },
-        {
-          id: "q3",
-          title: "هل لديكم خلطات خاصة؟",
-          content: "نعم، خلطة بن الملوك سرية ومميزة جداً لا تجدها إلا عندنا.",
-        },
-      ]}
-      sideTitle="أسئلة شائعة"
-      faqsAnimation="slide-up"
-    />
-  </div>
+        <div id="faq" data-section="faq">
+          <FaqBase
+            title="أسئلة شائعة"
+            description="كل ما تريد معرفته عن قهوتنا."
+            faqsAnimation="slide-up"
+            textboxLayout="default"
+            useInvertedBackground={false}
+            faqs={[
+              { id: "q1", title: "كيف أطلب؟", content: "عبر موقعنا أو زيارتنا مباشرة." },
+              { id: "q2", title: "هل تتوفر خدمات توصيل؟", content: "نعم، نوفر التوصيل السريع." }
+            ]}
+          />
+        </div>
 
-  <div id="contact" data-section="contact">
-      <ContactSplit
-      useInvertedBackground={false}
-      background={{
-        variant: "plain",
-      }}
-      tag="تواصل معنا"
-      title="هل لديك أي استفسار؟"
-      description="تواصل معنا ليصلك أجدد عروضنا وأحدث أنواع البن الطازج."
-      imageSrc="http://img.b2bpic.net/free-photo/cafe-coffee-beverage-break-fresh-aroma_53876-16474.jpg"
-      mediaAnimation="slide-up"
-    />
-  </div>
+        <div id="contact" data-section="contact">
+          <ContactCTA
+            tag="تواصل معنا"
+            title="جاهز لتجربة الطعم الملكي؟"
+            description="نحن دائماً هنا لخدمتكم والإجابة على استفساراتكم."
+            background={{ variant: "plain" }}
+            useInvertedBackground={true}
+            buttons={[{ text: "اتصل بنا الآن", href: "tel:+201234567890" }]}
+          />
+        </div>
 
-  <div id="footer" data-section="footer">
-      <FooterSimple
-      columns={[
-        {
-          title: "بن الملوك",
-          items: [
-            {
-              label: "عن المحل",
-              href: "#about",
-            },
-            {
-              label: "المنتجات",
-              href: "#products",
-            },
-          ],
-        },
-        {
-          title: "دعم العملاء",
-          items: [
-            {
-              label: "الأسئلة الشائعة",
-              href: "#faq",
-            },
-            {
-              label: "تواصل معنا",
-              href: "#contact",
-            },
-          ],
-        },
-      ]}
-      bottomLeftText="© 2024 بن الملوك. جميع الحقوق محفوظة."
-      bottomRightText="صمم بكل حب."
-    />
-  </div>
+        <div id="footer" data-section="footer">
+          <FooterCard
+            logoText="بن الملوك"
+            socialLinks={[{ icon: Coffee, href: "#", ariaLabel: "Instagram" }]}
+          />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );