Update src/app/page.tsx

Merge version_2 into main

src/app/page.tsx

@@ -2,17 +2,16 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import ContactSplit from '@/components/sections/contact/ContactSplit';
-import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
+import ContactCenter from '@/components/sections/contact/ContactCenter';
+import FaqBase from '@/components/sections/faq/FaqBase';
 import FeatureCardMedia from '@/components/sections/feature/FeatureCardMedia';
-import FooterCard from '@/components/sections/footer/FooterCard';
+import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
 import HeroBillboardCarousel from '@/components/sections/hero/HeroBillboardCarousel';
 import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
 import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
 import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
-import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
+import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
 import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
-import { Mail, Github, Twitter, Linkedin } from "lucide-react";
 
 export default function LandingPage() {
   return (
@@ -32,36 +31,27 @@ export default function LandingPage() {
   <div id="nav" data-section="nav">
       <NavbarLayoutFloatingInline
       navItems={[
-        {
-          name: "Products",          id: "#products"},
-        {
-          name: "How It Works",          id: "#how-it-works"},
-        {
-          name: "About",          id: "#about"},
+        { name: "Products", id: "#products" },
+        { name: "How It Works", id: "#how-it-works" },
+        { name: "About", id: "#about" },
       ]}
       brandName="Stalkr"
-      button={{
-        text: "Order Now",        href: "#contact"}}
+      button={{ text: "Get Started", href: "#contact" }}
     />
   </div>
 
   <div id="hero" data-section="hero">
       <HeroBillboardCarousel
-      background={{
-        variant: "gradient-bars"}}
+      background={{ variant: "gradient-bars" }}
       title="Tap. Connect. Instantly."
       description="Smart tags that link your world. Scan to reveal what matters — no apps, no friction, no delay."
       buttons={[
-        {
-          text: "Explore Products",          href: "#products"},
-        {
-          text: "Create Your Custom Tag",          href: "#contact"},
+        { text: "Explore Products", href: "#products" },
+        { text: "Create Your Custom Tag", href: "#contact" },
       ]}
       mediaItems={[
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/young-female-wearing-blue-jean-jacket-standing-against-white-wall_181624-37780.jpg",          imageAlt: "Smart QR tag on leather collar"},
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/full-shot-woman-with-penny-board_23-2148950660.jpg",          imageAlt: "Scanning tag on backpack"},
+        { imageSrc: "http://img.b2bpic.net/free-photo/young-female-wearing-blue-jean-jacket-standing-against-white-wall_181624-37780.jpg", imageAlt: "Smart QR tag on leather collar" },
+        { imageSrc: "http://img.b2bpic.net/free-photo/full-shot-woman-with-penny-board_23-2148950660.jpg", imageAlt: "Scanning tag on backpack" },
       ]}
     />
   </div>
@@ -72,12 +62,9 @@ export default function LandingPage() {
       textboxLayout="split"
       useInvertedBackground={false}
       features={[
-        {
-          id: "f1",          title: "No App Required",          description: "Anyone with a smartphone can scan. No downloads, no logins. Works on every device instantly.",          tag: "Convenience",          imageSrc: "http://img.b2bpic.net/free-vector/fantastic-elements-about-seo_1045-252.jpg"},
-        {
-          id: "f2",          title: "Instant Connection",          description: "The moment your tag is scanned, your contact details appear. You connect in seconds.",          tag: "Speed",          imageSrc: "http://img.b2bpic.net/free-photo/employee-disinfecting-electronic-device_23-2148727585.jpg"},
-        {
-          id: "f3",          title: "Medical Info Ready",          description: "Store allergies, blood group, and emergency contacts. Visible instantly to whoever finds your child or pet.",          tag: "Safety",          imageSrc: "http://img.b2bpic.net/free-photo/flat-lay-public-transport-arrangement_23-2148967330.jpg"},
+        { id: "f1", title: "No App Required", description: "Anyone with a smartphone can scan. No downloads, no logins. Works on every device instantly.", tag: "Convenience", imageSrc: "http://img.b2bpic.net/free-vector/fantastic-elements-about-seo_1045-252.jpg" },
+        { id: "f2", title: "Instant Connection", description: "The moment your tag is scanned, your contact details appear. You connect in seconds.", tag: "Speed", imageSrc: "http://img.b2bpic.net/free-photo/employee-disinfecting-electronic-device_23-2148727585.jpg" },
+        { id: "f3", title: "Medical Info Ready", description: "Store allergies, blood group, and emergency contacts. Visible instantly to whoever finds your child or pet.", tag: "Safety", imageSrc: "http://img.b2bpic.net/free-photo/flat-lay-public-transport-arrangement_23-2148967330.jpg" },
       ]}
       title="Why Stalkr"
       description="Everything you need, nothing you don't. Built for real life."
@@ -106,7 +93,8 @@ export default function LandingPage() {
       useInvertedBackground={false}
       title="Our Story"
       description={[
-        "Some kids walk on two legs. Some run on four. But both have a habit of wandering a little too far.",        "We built Stalkr to quietly protect what matters most — making it easier to help, without delay."]}
+        "Some kids walk on two legs. Some run on four. But both have a habit of wandering a little too far.",        "We built Stalkr to quietly protect what matters most — making it easier to help, without delay."
+      ]}
     />
   </div>
 
@@ -127,57 +115,53 @@ export default function LandingPage() {
   </div>
 
   <div id="testimonials" data-section="testimonials">
-      <TestimonialCardFifteen
-      useInvertedBackground={false}
-      testimonial="Stalkr feels like the village I never had in this city. It gives me peace of mind every time my kids go out to play."
-      rating={5}
-      author="Priya Sharma, Parent"
-      avatars={[{ src: "http://img.b2bpic.net/free-photo/hands-taking-photos-with-camera_23-2148880347.jpg", alt: "Priya" }]}
-      ratingAnimation="slide-up"
-      avatarsAnimation="blur-reveal"
-    />
+      <TestimonialCardTwo
+        animationType="slide-up"
+        textboxLayout="split"
+        useInvertedBackground={false}
+        title="What People Say"
+        description="See why families trust Stalkr."
+        testimonials={[
+            { id: "t1", name: "Priya Sharma", role: "Parent", testimonial: "Stalkr feels like the village I never had in this city. It gives me peace of mind every time my kids go out to play.", imageSrc: "http://img.b2bpic.net/free-photo/hands-taking-photos-with-camera_23-2148880347.jpg" }
+        ]}
+      />
   </div>
 
   <div id="faq" data-section="faq">
-      <FaqSplitMedia
+      <FaqBase
       textboxLayout="split"
       useInvertedBackground={true}
       faqs={[
         { id: "faq1", title: "Payment Policy", content: "Prepaid orders only. Processed after payment." },
         { id: "faq2", title: "Shipping", content: "Pan-India delivery via trusted couriers. 2-3 business days." },
       ]}
-      imageSrc="http://img.b2bpic.net/free-photo/equalizer-music-control-icon-graphic-with-people-studio-shoot_53876-121493.jpg"
       title="Important to Know"
       description="Answers to your questions about our shipping and policies."
       faqsAnimation="slide-up"
-      mediaAnimation="slide-up"
     />
   </div>
 
   <div id="contact" data-section="contact">
-    <ContactSplit
+    <ContactCenter
         tag="Get In Touch"
         title="Let's Build Something Together"
         description="Have a custom request or need help with your order? Send us a message."
         background={{ variant: "plain" }}
         useInvertedBackground={true}
-        imageSrc="http://img.b2bpic.net/free-photo/closeup-belt_53876-33678.jpg"
     />
   </div>
 
   <div id="footer" data-section="footer">
-    <FooterCard
+    <FooterBaseReveal
         logoText="Stalkr"
         copyrightText="© 2025 | Stalkr Tech"
-        socialLinks={[
-            { icon: Mail, href: "mailto:hello@stalkr.com", ariaLabel: "Email" },
-            { icon: Twitter, href: "#", ariaLabel: "Twitter" },
-            { icon: Linkedin, href: "#", ariaLabel: "LinkedIn" },
-            { icon: Github, href: "#", ariaLabel: "Github" }
+        columns={[
+            { title: "Navigation", items: [{ label: "Home", href: "#" }, { label: "Products", href: "#products" }] },
+            { title: "Company", items: [{ label: "About", href: "#about" }, { label: "Support", href: "#contact" }] }
         ]}
     />
   </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #f5faff;
-  --card: #f1f8ff;
-  --foreground: #001122;
-  --primary-cta: #15479c;
+  --background: #ffffff;
+  --card: #f9f9f9;
+  --foreground: #120a00e6;
+  --primary-cta: #E34400;
   --primary-cta-text: #ffffff;
-  --secondary-cta: #ffffff;
+  --secondary-cta: #f9f9f9;
   --secondary-cta-text: #000612;
-  --accent: #a8cce8;
-  --background-accent: #7ba3cf;
+  --accent: #e2e2e2;
+  --background-accent: #E34400;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);