Update src/app/page.tsx

Merge version_1 into main

src/app/page.tsx

@@ -4,12 +4,12 @@ import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
 import ContactFaq from '@/components/sections/contact/ContactFaq';
 import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
-import HeroBillboardScroll from '@/components/sections/hero/HeroBillboardScroll';
+import HeroCarouselLogo from '@/components/sections/hero/heroCarouselLogo/HeroCarouselLogo';
-import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
+import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
-import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
+import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
-import PricingCardNine from '@/components/sections/pricing/PricingCardNine';
+import PricingCardFive from '@/components/sections/pricing/PricingCardFive';
-import ProductCardOne from '@/components/sections/product/ProductCardOne';
+import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
-import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
+import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
 import { Mail } from "lucide-react";
 
 export default function LandingPage() {
@@ -20,310 +20,123 @@ export default function LandingPage() {
         borderRadius="pill"
         contentWidth="medium"
         sizing="mediumLargeSizeMediumTitles"
-        background="circleGradient"
+        background="grid"
-        cardStyle="gradient-radial"
+        cardStyle="glass-depth"
-        primaryButtonStyle="double-inset"
+        primaryButtonStyle="primary-glow"
-        secondaryButtonStyle="radial-glow"
+        secondaryButtonStyle="glass"
-        headingFontWeight="extrabold"
+        headingFontWeight="semibold"
     >
       <ReactLenis root>
   <div id="nav" data-section="nav">
-      <NavbarStyleApple
+      <NavbarStyleFullscreen
-      navItems={[
-        {
-          name: "Home",
-          id: "hero",
-        },
-        {
-          name: "About",
-          id: "about",
-        },
-        {
-          name: "Products",
-          id: "products",
-        },
-        {
-          name: "Pricing",
-          id: "pricing",
-        },
-        {
-          name: "Contact",
-          id: "contact",
-        },
-      ]}
       brandName="Al Arabia Electronics"
+      navItems={[
+        { name: "Home", id: "hero" },
+        { name: "About", id: "about" },
+        { name: "Products", id: "products" },
+        { name: "Pricing", id: "pricing" },
+        { name: "Contact", id: "contact" },
+      ]}
     />
   </div>
 
   <div id="hero" data-section="hero">
-      <HeroBillboardScroll
+      <HeroCarouselLogo
-      background={{
+      logoText="AL ARABIA"
-        variant: "plain",
+      description="Precision engineering meets future-ready design. Experience the high-tech edge of premium electronics."
-      }}
+      buttons={[{ text: "View Collection", href: "#products" }]}
-      title="Innovation Meets Elegance."
+      slides={[
-      description="Discover the latest in premium technology at Al Arabia Electronics. Crafted for the modern enthusiast."
+        { imageSrc: "http://img.b2bpic.net/free-photo/still-life-tech-device_23-2150722691.jpg?_wi=1", imageAlt: "Tech device" },
-      buttons={[
+        { imageSrc: "http://img.b2bpic.net/free-photo/minimalist-tech-setup-with-tablet-stylus-earbuds_58702-17251.jpg", imageAlt: "Tech setup" }
-        {
-          text: "Shop Now",
-          href: "#products",
-        },
-        {
-          text: "Explore",
-          href: "#about",
-        },
       ]}
-      imageSrc="http://img.b2bpic.net/free-photo/still-life-seat-gamers_23-2149746579.jpg?_wi=1"
-      imageAlt="Modern electronic showroom"
     />
   </div>
 
   <div id="about" data-section="about">
-      <InlineImageSplitTextAbout
+      <MetricSplitMediaAbout
-      useInvertedBackground={false}
+      title="Engineered for Excellence"
-      heading={[
+      description="We combine advanced hardware with seamless integration to deliver superior electronic solutions for every user."
-        {
+      metrics={[
-          type: "text",
+        { value: "2M+", title: "Devices Delivered" },
-          content: "Redefining ",
+        { value: "98%", title: "Satisfied Tech Enthusiasts" },
-        },
-        {
-          type: "image",
-          src: "http://img.b2bpic.net/free-photo/young-business-woman-talking-phone-cafe_1303-27363.jpg",
-          alt: "Gadgets",
-        },
-        {
-          type: "text",
-          content: " Future Tech",
-        },
       ]}
+      imageSrc="http://img.b2bpic.net/free-photo/laptop-background-concept-internet-navigating_1194-617369.jpg"
+      useInvertedBackground={false}
+      mediaAnimation="blur-reveal"
+      metricsAnimation="blur-reveal"
     />
   </div>
 
   <div id="products" data-section="products">
-      <ProductCardOne
+      <ProductCardTwo
-      animationType="slide-up"
+      animationType="blur-reveal"
-      textboxLayout="default"
+      textboxLayout="split"
-      gridVariant="four-items-2x2-equal-grid"
+      gridVariant="bento-grid"
-      useInvertedBackground={false}
+      title="High-Performance Gear"
+      description="Industry-leading hardware designed for those who demand the best."
       products={[
-        {
+        { id: "1", brand: "Nexus", name: "Pro Phone", price: "$999", rating: 5, reviewCount: "1.2k", imageSrc: "http://img.b2bpic.net/free-photo/top-view-hands-scanning-qr-code-with-phone_23-2149357874.jpg" },
-          id: "1",
+        { id: "2", brand: "Pulse", name: "Audio Pro", price: "$299", rating: 4, reviewCount: "800", imageSrc: "http://img.b2bpic.net/free-photo/still-life-tech-device_23-2150722652.jpg" },
-          name: "Wireless Headset",
-          price: "$299",
-          imageSrc: "http://img.b2bpic.net/free-photo/still-life-tech-device_23-2150722691.jpg?_wi=1",
-        },
-        {
-          id: "2",
-          name: "Pro Smartphone",
-          price: "$999",
-          imageSrc: "http://img.b2bpic.net/free-photo/top-view-hands-scanning-qr-code-with-phone_23-2149357874.jpg",
-        },
-        {
-          id: "3",
-          name: "Thin Tablet",
-          price: "$699",
-          imageSrc: "http://img.b2bpic.net/free-photo/minimalist-tech-setup-with-tablet-stylus-earbuds_58702-17251.jpg",
-        },
-        {
-          id: "4",
-          name: "Smart Watch",
-          price: "$399",
-          imageSrc: "http://img.b2bpic.net/free-photo/still-life-tech-device_23-2150722652.jpg",
-        },
-        {
-          id: "5",
-          name: "Performance Laptop",
-          price: "$1499",
-          imageSrc: "http://img.b2bpic.net/free-photo/laptop-background-concept-internet-navigating_1194-617369.jpg",
-        },
-        {
-          id: "6",
-          name: "Wireless Buds",
-          price: "$199",
-          imageSrc: "http://img.b2bpic.net/free-photo/modern-wireless-earphones-with-case-displayed-round-podium-with-soft-shadows_23-2150808020.jpg",
-        },
       ]}
-      title="Top Picks"
+      useInvertedBackground={false}
-      description="Our curated selection of premium electronics."
     />
   </div>
 
   <div id="pricing" data-section="pricing">
-      <PricingCardNine
+      <PricingCardFive
-      animationType="slide-up"
+      animationType="blur-reveal"
-      textboxLayout="default"
+      textboxLayout="split"
-      useInvertedBackground={false}
+      title="Select Your Access Level"
+      description="Choose the plan that powers your tech lifestyle."
       plans={[
         {
-          id: "basic",
+          id: "pro",          tag: "Performance",          price: "$49",          period: "/mo",          description: "Full access to high-tier hardware updates and priority support.",          featuresTitle: "Core Benefits",          features: ["Priority Shipping", "Early Access", "24/7 Tech Concierge"],
-          title: "Essential",
+          button: { text: "Select Plan" }
-          price: "$0",
+        }
-          period: "/mo",
-          features: [
-            "Standard Support",
-            "Newsletter",
-          ],
-          button: {
-            text: "Get Started",
-          },
-          imageSrc: "http://img.b2bpic.net/free-photo/still-life-seat-gamers_23-2149746579.jpg?_wi=2",
-          imageAlt: "modern electronics retail store",
-        },
-        {
-          id: "pro",
-          title: "Tech Pro",
-          price: "$29",
-          period: "/mo",
-          features: [
-            "Priority Support",
-            "Advanced Gadget Access",
-            "Monthly Discounts",
-          ],
-          button: {
-            text: "Upgrade",
-          },
-          imageSrc: "http://img.b2bpic.net/free-photo/young-business-woman-talking-phone-cafe_1303-27363.jpg",
-          imageAlt: "sleek tech gadgets on table",
-        },
-        {
-          id: "enterprise",
-          title: "Premium",
-          price: "$99",
-          period: "/mo",
-          features: [
-            "Personal Consultant",
-            "VIP Priority",
-            "Free Global Shipping",
-          ],
-          button: {
-            text: "Contact Us",
-          },
-          imageSrc: "http://img.b2bpic.net/free-photo/still-life-tech-device_23-2150722691.jpg?_wi=2",
-          imageAlt: "wireless headset product shot studio",
-        },
       ]}
-      title="Membership Plans"
+      useInvertedBackground={false}
-      description="Get exclusive access to premium support and discounts."
     />
   </div>
 
   <div id="testimonials" data-section="testimonials">
-      <TestimonialCardOne
+      <TestimonialCardSix
-      animationType="slide-up"
+      animationType="blur-reveal"
-      textboxLayout="default"
+      textboxLayout="split"
-      gridVariant="bento-grid"
+      title="Validated by Experts"
-      useInvertedBackground={false}
+      description="Trusted by the global tech community."
       testimonials={[
-        {
+        { id: "1", name: "Ahmad R.", handle: "@ahmad_tech", testimonial: "The performance is unmatched. Truly high-tech." },
-          id: "1",
+        { id: "2", name: "Sara K.", handle: "@sara_dev", testimonial: "Best hardware experience I've had in years." }
-          name: "Ahmad R.",
-          role: "Designer",
-          company: "TechHub",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-brutal-bearded-macho-male-dressed-suit-dark-grey-background_613910-1532.jpg",
-        },
-        {
-          id: "2",
-          name: "Sara K.",
-          role: "Developer",
-          company: "Innovators",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/attractive-blond-business-woman-white-shirt-eyeglasses-crossed-arms-grey-background_613910-3693.jpg",
-        },
-        {
-          id: "3",
-          name: "Khalid S.",
-          role: "CEO",
-          company: "Future",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/woman-cafe-showing-tablet-screen_23-2147826875.jpg",
-        },
-        {
-          id: "4",
-          name: "Layla M.",
-          role: "Consultant",
-          company: "Creative",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/studio-portrait-serious-bearded-male-dressed-suit_613910-5687.jpg",
-        },
-        {
-          id: "5",
-          name: "Omar F.",
-          role: "Engineer",
-          company: "Solutions",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/man-portrait-with-blue-lights-visual-effects_23-2149419464.jpg",
-        },
       ]}
-      title="Loved by Tech Enthusiasts"
+      useInvertedBackground={false}
-      description="See what our customers have to say."
     />
   </div>
 
   <div id="contact" data-section="contact">
       <ContactFaq
-      animationType="slide-up"
+      animationType="blur-reveal"
-      useInvertedBackground={false}
       faqs={[
-        {
+        { id: "1", title: "Technical Support", content: "24/7 dedicated support for all premium hardware." },
-          id: "1",
+        { id: "2", title: "International Shipping", content: "We ship globally with high-security logistics." }
-          title: "What is the warranty policy?",
-          content: "All devices come with a 2-year warranty.",
-        },
-        {
-          id: "2",
-          title: "Do you offer shipping?",
-          content: "Yes, we ship globally within 3-5 days.",
-        },
-        {
-          id: "3",
-          title: "Can I return products?",
-          content: "Returns are accepted within 30 days of purchase.",
-        },
       ]}
-      ctaTitle="Need Assistance?"
+      ctaTitle="Connect with Al Arabia"
-      ctaDescription="Get in touch with our experts today."
+      ctaDescription="Speak with an expert about your specific technical needs."
-      ctaButton={{
+      ctaButton={{ text: "Get Started" }}
-        text: "Email Us",
-        href: "mailto:info@alarabia.com",
-      }}
       ctaIcon={Mail}
+      useInvertedBackground={false}
     />
   </div>
 
   <div id="footer" data-section="footer">
       <FooterBaseReveal
       columns={[
-        {
+        { title: "Catalog", items: [{ label: "Smartphones", href: "#" }, { label: "Audio", href: "#" }] },
-          title: "Shop",
+        { title: "Support", items: [{ label: "Contact", href: "#contact" }, { label: "Warranty", href: "#" }] }
-          items: [
-            {
-              label: "All Products",
-              href: "#products",
-            },
-            {
-              label: "New Arrivals",
-              href: "#",
-            },
-          ],
-        },
-        {
-          title: "Company",
-          items: [
-            {
-              label: "About",
-              href: "#about",
-            },
-            {
-              label: "Contact",
-              href: "#contact",
-            },
-          ],
-        },
       ]}
-      copyrightText="© 2024 Al Arabia Electronics"
+      copyrightText="© 2025 Al Arabia Electronics - High-Tech Division"
     />
   </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/styles/variables.css

@@ -11,14 +11,14 @@
   --background-accent: #ffffff; */
 
   --background: #000000;
-  --card: #0c0c0c;
+  --card: #1a1a1a;
   --foreground: #ffffff;
-  --primary-cta: #cee7ff;
+  --primary-cta: #1f7cff;
   --primary-cta-text: #000000;
-  --secondary-cta: #000000;
+  --secondary-cta: #0a0a0a;
   --secondary-cta-text: #ffffff;
-  --accent: #535353;
+  --accent: #737373;
-  --background-accent: #CEE7FF;
+  --background-accent: #1f7cff;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);