Merge version_2 into main

Merge version_2 into main

src/app/page.tsx

@@ -3,15 +3,15 @@
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
 import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
-import FaqDouble from '@/components/sections/faq/FaqDouble';
+import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
 import FeatureCardTwentyEight from '@/components/sections/feature/FeatureCardTwentyEight';
 import FooterBase from '@/components/sections/footer/FooterBase';
 import HeroBillboardTestimonial from '@/components/sections/hero/HeroBillboardTestimonial';
-import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
+import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
 import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
 import ProductCardThree from '@/components/sections/product/ProductCardThree';
-import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
-import { Award, CheckCircle, Star } from "lucide-react";
+import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
+import { Zap, Target, BarChart3, Star } from "lucide-react";
 
 export default function LandingPage() {
   return (
@@ -32,21 +32,13 @@ export default function LandingPage() {
       <NavbarLayoutFloatingOverlay
       navItems={[
         {
-          name: "Products",
-          id: "#products",
-        },
+          name: "Products",          id: "#products"},
         {
-          name: "Testimonials",
-          id: "#testimonials",
-        },
+          name: "Testimonials",          id: "#testimonials"},
         {
-          name: "FAQ",
-          id: "#faq",
-        },
+          name: "FAQ",          id: "#faq"},
         {
-          name: "Contact",
-          id: "#contact",
-        },
+          name: "Contact",          id: "#contact"},
       ]}
       brandName="TechGrid"
     />
@@ -56,99 +48,15 @@ export default function LandingPage() {
       <HeroBillboardTestimonial
       useInvertedBackground={true}
       background={{
-        variant: "gradient-bars",
-      }}
+        variant: "gradient-bars"}}
       title="Future of Computing"
       description="Discover our collection of premium electronics, powered by leading brands and engineered for peak performance."
-      testimonials={[
-        {
-          name: "Alex R.",
-          handle: "@techfan",
-          testimonial: "The best selection of premium workstations I've found online.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/data-center-programmer-writing-disaster-recovery-plans_482257-123449.jpg",
-        },
-        {
-          name: "Jordan P.",
-          handle: "@devlife",
-          testimonial: "Stellar customer service and fast shipping on my new laptop.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/male-programmer-coding-laptop_482257-87912.jpg",
-        },
-        {
-          name: "Sarah K.",
-          handle: "@bizlead",
-          testimonial: "We upgraded our entire office with their help. Truly excellent.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/african-american-ai-technician-analyzes-infrastructure-performance-outputs-tablet-while-he-stands_482257-135620.jpg",
-        },
-        {
-          name: "Mike V.",
-          handle: "@artist",
-          testimonial: "My new monitor is perfect for my creative workflow.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-woman-working-interior-design-project_23-2150346494.jpg",
-        },
-        {
-          name: "Chris D.",
-          handle: "@itpro",
-          testimonial: "The gear selection is unmatched in the industry right now.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/team-leader-reads-inspection-data-files-solar-plant-machinery-parameters_482257-117853.jpg",
-        },
-      ]}
+      testimonials={[]}
       buttons={[
         {
-          text: "Shop Now",
-          href: "#products",
-        },
+          text: "Shop Now",          href: "#products"},
       ]}
       imageSrc="http://img.b2bpic.net/free-photo/futuristic-hi-tech-neon-background-generative-ai_91128-2310.jpg"
-      avatars={[
-        {
-          src: "http://img.b2bpic.net/free-photo/person-indian-origin-having-fun_23-2150285308.jpg",
-          alt: "User 1",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/positive-guy-glasses-holding-tablet-looking_74855-3039.jpg",
-          alt: "User 2",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/close-up-portrait-stylish-man-flannel-suit-glasses-listening-music_613910-12191.jpg",
-          alt: "User 3",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/happy-smiling-man-winter-sweater-is-posing-photographer-studio_613910-13711.jpg",
-          alt: "User 4",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/black-boy-posing_23-2148171529.jpg",
-          alt: "User 5",
-        },
-      ]}
-      avatarText="Trusted by 10,000+ Professionals"
-      marqueeItems={[
-        {
-          type: "text",
-          text: "Apple Authorized Partner",
-        },
-        {
-          type: "text",
-          text: "Dell Precision Certified",
-        },
-        {
-          type: "text",
-          text: "Fast Nationwide Delivery",
-        },
-        {
-          type: "text",
-          text: "24/7 Expert Support",
-        },
-        {
-          type: "text",
-          text: "30-Day Money Back",
-        },
-      ]}
     />
   </div>
 
@@ -159,26 +67,11 @@ export default function LandingPage() {
       useInvertedBackground={false}
       features={[
         {
-          id: "f1",
-          title: "Peak Performance",
-          subtitle: "Optimized Hardware",
-          category: "Performance",
-          value: "Elite",
-        },
+          id: "f1",          title: "Peak Performance",          subtitle: "Optimized Hardware",          category: "Performance",          value: "Elite"},
         {
-          id: "f2",
-          title: "Connectivity",
-          subtitle: "Seamless Integration",
-          category: "Hardware",
-          value: "Fast",
-        },
+          id: "f2",          title: "Connectivity",          subtitle: "Seamless Integration",          category: "Hardware",          value: "Fast"},
         {
-          id: "f3",
-          title: "Reliability",
-          subtitle: "Durability Guaranteed",
-          category: "Support",
-          value: "Solid",
-        },
+          id: "f3",          title: "Reliability",          subtitle: "Durability Guaranteed",          category: "Support",          value: "Solid"},
       ]}
       title="Why Choose TechGrid"
       description="We offer more than just hardware; we provide complete performance solutions."
@@ -193,183 +86,86 @@ export default function LandingPage() {
       useInvertedBackground={true}
       products={[
         {
-          id: "p1",
-          name: "Apple MacBook Pro",
-          price: "$2,499",
-          imageSrc: "http://img.b2bpic.net/free-photo/smartphone-tablet-mockup-with-cute-sheep_187299-48092.jpg",
-        },
+          id: "p1",          name: "Apple MacBook Pro",          price: "$2,499",          imageSrc: "http://img.b2bpic.net/free-photo/smartphone-tablet-mockup-with-cute-sheep_187299-48092.jpg"},
         {
-          id: "p2",
-          name: "Dell Workstation",
-          price: "$1,899",
-          imageSrc: "http://img.b2bpic.net/free-photo/3d-render-high-tech-car-engine-part_482257-76592.jpg",
-        },
+          id: "p2",          name: "Dell Workstation",          price: "$1,899",          imageSrc: "http://img.b2bpic.net/free-photo/3d-render-high-tech-car-engine-part_482257-76592.jpg"},
         {
-          id: "p3",
-          name: "Mechanical Keyboard",
-          price: "$199",
-          imageSrc: "http://img.b2bpic.net/free-photo/side-view-hand-typing-keyboard_23-2149680251.jpg",
-        },
-        {
-          id: "p4",
-          name: "Ergonomic Mouse",
-          price: "$99",
-          imageSrc: "http://img.b2bpic.net/free-photo/still-life-books-versus-technology_23-2150062907.jpg",
-        },
-        {
-          id: "p5",
-          name: "UltraWide Monitor",
-          price: "$599",
-          imageSrc: "http://img.b2bpic.net/free-photo/green-screen-computer-display-modern-startup-office-displaying-code-snippets-various_482257-136168.jpg",
-        },
-        {
-          id: "p6",
-          name: "Noise Cancelling Headphones",
-          price: "$349",
-          imageSrc: "http://img.b2bpic.net/free-photo/red-gold-headphones-digital-device_53876-97303.jpg",
-        },
+          id: "p3",          name: "Mechanical Keyboard",          price: "$199",          imageSrc: "http://img.b2bpic.net/free-photo/side-view-hand-typing-keyboard_23-2149680251.jpg"}
       ]}
       title="Featured Electronics"
-      description="Cutting-edge devices from industry-leading manufacturers."
+      description="Cutting-edge devices with interactive 3D viewing capabilities."
     />
   </div>
 
   <div id="metrics" data-section="metrics">
-      <MetricCardOne
+      <MetricCardSeven
       animationType="depth-3d"
       textboxLayout="default"
-      gridVariant="uniform-all-items-equal"
       useInvertedBackground={false}
+      title="Performance Metrics"
+      description="Real-world data on our hardware capabilities."
       metrics={[
-        {
-          id: "m1",
-          value: "10k+",
-          title: "Products Delivered",
-          description: "Happy tech enthusiasts served.",
-          icon: CheckCircle,
-        },
-        {
-          id: "m2",
-          value: "500+",
-          title: "Brand Partners",
-          description: "Only top tier electronics.",
-          icon: Award,
-        },
-        {
-          id: "m3",
-          value: "99%",
-          title: "Customer Satisfaction",
-          description: "Feedback rating across board.",
-          icon: Star,
-        },
+        { id: "m1", value: "98%", title: "Visual Fidelity", items: ["High-res 3D assets", "Real-time rendering", "Color accuracy"] },
+        { id: "m2", value: "45ms", title: "Interaction Latency", items: ["Swift 3D rotation", "Responsive gestures", "Smooth zooming"] },
+        { id: "m3", value: "100%", title: "3D Coverage", items: ["Complete product line", "Interactive exploded views", "Texture detail"] }
       ]}
-      title="Market Impact"
-      description="Our numbers speak to the satisfaction of our growing technology community."
     />
   </div>
 
   <div id="testimonials" data-section="testimonials">
-      <TestimonialCardTen
+      <TestimonialCardThirteen
+      showRating={true}
+      animationType="depth-3d"
       textboxLayout="default"
-      useInvertedBackground={true}
+      useInvertedBackground={false}
+      title="Customer 3D Experience"
+      description="See what professionals say about interacting with our models."
       testimonials={[
-        {
-          id: "t1",
-          title: "Great Laptop",
-          quote: "The performance is simply incredible for my video editing needs.",
-          name: "Alex R.",
-          role: "Creative Director",
-          imageSrc: "http://img.b2bpic.net/free-photo/system-administrator-walking-data-center-used-managing-gear-energy_482257-116015.jpg",
-        },
-        {
-          id: "t2",
-          title: "Professional Gear",
-          quote: "Solid workstation for heavy software development and compiling.",
-          name: "Jordan P.",
-          role: "Senior Dev",
-          imageSrc: "http://img.b2bpic.net/free-photo/young-man-works-computer-night_169016-63253.jpg",
-        },
-        {
-          id: "t3",
-          title: "Trusted Partner",
-          quote: "Very reliable service and products. Highly recommended.",
-          name: "Sarah K.",
-          role: "Procurement",
-          imageSrc: "http://img.b2bpic.net/free-photo/data-center-management-executives-reading-paperwork-files_482257-120053.jpg",
-        },
-        {
-          id: "t4",
-          title: "Perfect Setup",
-          quote: "Love the monitor quality. My design work is sharp now.",
-          name: "Mike V.",
-          role: "Graphic Artist",
-          imageSrc: "http://img.b2bpic.net/free-photo/close-up-man-wearing-glasses_23-2149005467.jpg",
-        },
-        {
-          id: "t5",
-          title: "Tech Haven",
-          quote: "Everything I need in one place. Great variety.",
-          name: "Chris D.",
-          role: "System Admin",
-          imageSrc: "http://img.b2bpic.net/free-photo/computer-scientist-server-farm-using-laptop-patch-network-issues_482257-121958.jpg",
-        },
+        { id: "t1", name: "Alex R.", handle: "@creative", testimonial: "The 3D model interaction is game-changing. I can inspect every detail before buying.", rating: 5 },
+        { id: "t2", name: "Jordan P.", handle: "@engineer", testimonial: "Crystal clear rendering. The interactive 3D view made my hardware selection so much easier.", rating: 5 },
+        { id: "t3", name: "Sarah K.", handle: "@procurement", testimonial: "Finally, a store where you can see the product from every angle. Very impressed.", rating: 5 }
       ]}
-      title="Customer Stories"
-      description="See why professionals choose us for their hardware needs."
     />
   </div>
 
   <div id="faq" data-section="faq">
-      <FaqDouble
+      <FaqSplitMedia
       textboxLayout="default"
       useInvertedBackground={false}
+      title="3D Interaction Help"
+      description="Answers to your questions about our interactive 3D features."
+      faqsAnimation="slide-up"
       faqs={[
         {
-          id: "q1",
-          title: "Shipping Options",
-          content: "We offer fast 2-day nationwide shipping on all electronics.",
-        },
+          id: "q1",          title: "How to rotate 3D models?",          content: "Simply click and drag your mouse or use touch gestures to rotate any 3D model."},
         {
-          id: "q2",
-          title: "Return Policy",
-          content: "Returns are accepted within 30 days for unused products.",
-        },
+          id: "q2",          title: "Can I zoom in for detail?",          content: "Yes, use your mouse wheel or pinch-to-zoom to view intricate hardware details."},
         {
-          id: "q3",
-          title: "Technical Support",
-          content: "Our support team is available 24/7 for hardware setup assistance.",
-        },
+          id: "q3",          title: "Do I need special software?",          content: "No, our 3D viewer is browser-based and works on all modern devices."},
       ]}
-      title="Common Questions"
-      description="Everything you need to know about purchasing and shipping."
-      faqsAnimation="slide-up"
+      imageSrc="http://img.b2bpic.net/free-photo/system-administrator-walking-data-center-used-managing-gear-energy_482257-116015.jpg"
     />
   </div>
 
   <div id="contact" data-section="contact">
       <ContactSplitForm
       useInvertedBackground={true}
-      title="Get In Touch"
-      description="Have questions about our hardware? Reach out to our expert team today."
+      title="Sales Inquiries"
+      description="Request a custom quote or discuss bulk orders for your organization."
       inputs={[
         {
-          name: "name",
-          type: "text",
-          placeholder: "Your Name",
-          required: true,
+          name: "name",          type: "text",          placeholder: "Name",          required: true,
         },
         {
-          name: "email",
-          type: "email",
-          placeholder: "Email Address",
-          required: true,
+          name: "email",          type: "email",          placeholder: "Corporate Email",          required: true,
         },
+        {
+          name: "company",          type: "text",          placeholder: "Company Name"}
       ]}
       textarea={{
-        name: "message",
-        placeholder: "Tell us how we can help",
-        rows: 4,
+        name: "message",        placeholder: "Your specific requirements or inquiry",        rows: 4,
       }}
+      buttonText="Submit Inquiry"
       imageSrc="http://img.b2bpic.net/free-photo/system-administrator-data-center-uses-automation-tools-tablet_482257-117824.jpg"
     />
   </div>
@@ -378,37 +174,17 @@ export default function LandingPage() {
       <FooterBase
       columns={[
         {
-          title: "Shop",
-          items: [
-            {
-              label: "Laptops",
-              href: "#",
-            },
-            {
-              label: "Desktops",
-              href: "#",
-            },
-            {
-              label: "Peripherals",
-              href: "#",
-            },
+          title: "Shop",          items: [
+            { label: "Laptops", href: "#" },
+            { label: "Desktops", href: "#" },
+            { label: "Peripherals", href: "#" },
           ],
         },
         {
-          title: "Support",
-          items: [
-            {
-              label: "Contact",
-              href: "#contact",
-            },
-            {
-              label: "Returns",
-              href: "#",
-            },
-            {
-              label: "FAQ",
-              href: "#faq",
-            },
+          title: "Support",          items: [
+            { label: "Contact", href: "#contact" },
+            { label: "Returns", href: "#" },
+            { label: "FAQ", href: "#faq" },
           ],
         },
       ]}
@@ -418,4 +194,4 @@ export default function LandingPage() {
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/styles/variables.css

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