Update src/app/page.tsx

src/app/page.tsx

@@ -2,16 +2,15 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import BlogCardOne from '@/components/sections/blog/BlogCardOne';
+import BlogCardThree from '@/components/sections/blog/BlogCardThree';
-import ContactCTA from '@/components/sections/contact/ContactCTA';
+import ContactCenter from '@/components/sections/contact/ContactCenter';
-import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
+import FaqDouble from '@/components/sections/faq/FaqDouble';
-import FeatureCardMedia from '@/components/sections/feature/FeatureCardMedia';
+import FeatureCardTwentyEight from '@/components/sections/feature/FeatureCardTwentyEight';
-import FooterBase from '@/components/sections/footer/FooterBase';
+import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
-import HeroLogoBillboard from '@/components/sections/hero/HeroLogoBillboard';
+import HeroBillboard from '@/components/sections/hero/HeroBillboard';
-import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
+import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
-import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
+import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
-import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
-import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
 
 export default function LandingPage() {
   return (
@@ -29,300 +28,114 @@ export default function LandingPage() {
     >
       <ReactLenis root>
   <div id="nav" data-section="nav">
-      <NavbarStyleFullscreen
+      <NavbarStyleCentered
       navItems={[
-        {
+        { name: "Home", id: "hero" },
-          name: "Home",
+        { name: "About", id: "about" },
-          id: "hero",
+        { name: "Features", id: "features" },
-        },
+        { name: "Blog", id: "blog" },
-        {
+        { name: "Contact", id: "contact" },
-          name: "About",
-          id: "about",
-        },
-        {
-          name: "Features",
-          id: "features",
-        },
-        {
-          name: "Blog",
-          id: "blog",
-        },
-        {
-          name: "Contact",
-          id: "contact",
-        },
       ]}
       brandName="SPTKW"
     />
   </div>
 
   <div id="hero" data-section="hero">
-      <HeroLogoBillboard
+      <HeroBillboard
-      background={{
+      title="Innovating the future of enterprise technology"
-        variant: "gradient-bars",
+      description="Scalable solutions, deep insights, and secure infrastructure designed for modern growth."
-      }}
+      background={{ variant: "gradient-bars" }}
-      logoText="SPTKW"
+      buttons={[{ text: "Learn More", href: "#about" }, { text: "Contact Us", href: "#contact" }]}
-      description="Innovating the future of enterprise technology with scalable solutions, deep insights, and secure, efficient infrastructure."
-      buttons={[
-        {
-          text: "Learn More",
-          href: "#about",
-        },
-        {
-          text: "Contact Us",
-          href: "#contact",
-        },
-      ]}
       imageSrc="http://img.b2bpic.net/free-photo/businesswoman-looking-company-charts_482257-124401.jpg"
-      mediaAnimation="slide-up"
     />
   </div>
 
   <div id="about" data-section="about">
-      <MetricSplitMediaAbout
+      <InlineImageSplitTextAbout
+      heading={[{ type: 'text', content: "Empowering Businesses Through Data" }]}
+      buttons={[{ text: "Read More" }]}
       useInvertedBackground={false}
-      title="Empowering Businesses Through Data"
-      description="With over a decade of experience in the technology sector, SPTKW provides the tools and strategy necessary for digital transformation in modern business landscapes."
-      metrics={[
-        {
-          value: "15+",
-          title: "Years Experience",
-        },
-        {
-          value: "200+",
-          title: "Projects Completed",
-        },
-        {
-          value: "99%",
-          title: "Client Retention",
-        },
-      ]}
-      imageSrc="http://img.b2bpic.net/free-photo/lifestyle-people-office_23-2149173766.jpg"
-      mediaAnimation="slide-up"
-      metricsAnimation="slide-up"
     />
   </div>
 
   <div id="features" data-section="features">
-      <FeatureCardMedia
+      <FeatureCardTwentyEight
       animationType="slide-up"
+      title="Comprehensive Technical Services"
+      description="Tailored solutions for your digital transformation."
       textboxLayout="split"
       useInvertedBackground={false}
       features={[
-        {
+        { id: "1", title: "Integration", subtitle: "Seamless connectivity", category: "Core", value: "High" },
-          id: "1",
+        { id: "2", title: "Security", subtitle: "Robust defense", category: "Essential", value: "Max" },
-          title: "Integration",
+        { id: "3", title: "Scalability", subtitle: "Growth-oriented", category: "Strategic", value: "Stable" }
-          description: "Seamless data and system integration.",
-          tag: "Core",
-          imageSrc: "http://img.b2bpic.net/free-photo/abstract-technology-frame-background-connecting-dots-digital-network-design_53876-153345.jpg",
-        },
-        {
-          id: "2",
-          title: "Security",
-          description: "Robust cybersecurity for modern enterprises.",
-          tag: "Essential",
-          imageSrc: "http://img.b2bpic.net/free-vector/computer-safety-technology-icon_53876-118352.jpg",
-        },
-        {
-          id: "3",
-          title: "Scalability",
-          description: "Growth-oriented infrastructure solutions.",
-          tag: "Strategic",
-          imageSrc: "http://img.b2bpic.net/free-photo/urban-development-economic-growth-with-financial-chart-overlay_84443-73900.jpg",
-        },
       ]}
-      title="Comprehensive Technical Services"
-      description="Tailored solutions to optimize performance, enhance security, and drive innovation."
     />
   </div>
 
   <div id="metrics" data-section="metrics">
-      <MetricCardEleven
+      <MetricCardSeven
       animationType="slide-up"
+      title="Industry Impact Metrics"
+      description="Measuring performance across our core competencies."
       textboxLayout="split"
       useInvertedBackground={false}
       metrics={[
-        {
+        { id: "1", value: "15+", title: "Years Experience", items: ["Proven record", "Reliable"] },
-          id: "1",
+        { id: "2", value: "200+", title: "Projects Completed", items: ["Global clients", "Diverse"] },
-          value: "50+",
+        { id: "3", value: "99%", title: "Retention Rate", items: ["Customer focus", "Long-term"] }
-          title: "Daily Reports",
-          description: "In-depth analytics for efficiency.",
-          imageSrc: "http://img.b2bpic.net/free-photo/chalk-arrows-drawn-with-copy-space_23-2148456145.jpg",
-        },
-        {
-          id: "2",
-          value: "1.2M",
-          title: "Queries Processed",
-          description: "High-volume data processing.",
-          imageSrc: "http://img.b2bpic.net/free-photo/blurred-night-lights_23-2148139345.jpg",
-        },
-        {
-          id: "3",
-          value: "45%",
-          title: "Cost Optimization",
-          description: "Saving through automation.",
-          imageSrc: "http://img.b2bpic.net/free-vector/infographic-elements-collection_23-2148037415.jpg",
-        },
       ]}
-      title="Data Driven Excellence"
-      description="Measuring our impact across the industry."
-    />
-  </div>
-
-  <div id="social-proof" data-section="social-proof">
-      <SocialProofOne
-      textboxLayout="split"
-      useInvertedBackground={false}
-      names={[
-        "Microsoft",
-        "Google",
-        "AWS",
-        "Oracle",
-        "IBM",
-        "Intel",
-        "Cisco",
-      ]}
-      title="Trusted By Industry Leaders"
-      description="Our global partnerships demonstrate our reach and reliability."
     />
   </div>
 
   <div id="faq" data-section="faq">
-      <FaqSplitMedia
+      <FaqDouble
+      title="Frequently Asked Questions"
+      description="Clear answers to your most common questions."
       textboxLayout="split"
+      faqsAnimation="slide-up"
       useInvertedBackground={false}
       faqs={[
-        {
+        { id: "1", title: "How do we get started?", content: "Book a consultation today." },
-          id: "1",
+        { id: "2", title: "Do you offer support?", content: "24/7 dedicated support." },
-          title: "How do we get started?",
+        { id: "3", title: "How is security handled?", content: "Global best practices applied." }
-          content: "Book an initial consultation to discuss your specific needs.",
-        },
-        {
-          id: "2",
-          title: "Do you offer support?",
-          content: "Yes, we provide 24/7 technical and strategic support.",
-        },
-        {
-          id: "3",
-          title: "How is security handled?",
-          content: "We follow global security best practices at all stages.",
-        },
       ]}
-      imageSrc="http://img.b2bpic.net/free-photo/beautiful-customer-support-representative-wearing-headset-while-working-call-center_637285-133.jpg"
-      title="Frequently Asked Questions"
-      description="Answers to commonly asked questions about our technology services."
-      faqsAnimation="slide-up"
-      mediaAnimation="slide-up"
     />
   </div>
 
   <div id="blog" data-section="blog">
-      <BlogCardOne
+      <BlogCardThree
       animationType="slide-up"
+      title="Latest Insights"
+      description="Expert perspectives on industry trends."
       textboxLayout="split"
       useInvertedBackground={false}
-      title="Latest Insights"
-      description="Stay updated with our latest industry news and expert opinions."
       blogs={[
-        {
+        { id: "1", category: "Tech", title: "Enterprise AI", excerpt: "Trends in AI.", imageSrc: "", authorName: "Admin", authorAvatar: "", date: "2025" }
-          id: "1",
-          category: "Tech News",
-          title: "Future of Enterprise AI",
-          excerpt: "Exploring the implications of AI on modern enterprise.",
-          imageSrc: "http://img.b2bpic.net/free-photo/top-view-laptop-with-coffee_23-2148377713.jpg",
-          authorName: "Jane Doe",
-          authorAvatar: "asset://avatar-1",
-          date: "Jan 20, 2025",
-        },
-        {
-          id: "2",
-          category: "Strategy",
-          title: "Digital Transformation Roadmap",
-          excerpt: "How to plan your journey towards total digital efficiency.",
-          imageSrc: "http://img.b2bpic.net/free-photo/3d-abstract-network-technology-background-with-low-poly-plexus-design_1048-18867.jpg",
-          authorName: "Jane Doe",
-          authorAvatar: "asset://avatar-1",
-          date: "Feb 05, 2025",
-        },
-        {
-          id: "3",
-          category: "Security",
-          title: "Zero Trust Architectures",
-          excerpt: "Building a secure future for global organizations.",
-          imageSrc: "http://img.b2bpic.net/free-photo/speaker-talking-tech-conference-exploring-latest-ai-technology-trends_482257-105806.jpg",
-          authorName: "Jane Doe",
-          authorAvatar: "asset://avatar-1",
-          date: "Mar 10, 2025",
-        },
       ]}
     />
   </div>
 
   <div id="contact" data-section="contact">
-      <ContactCTA
+      <ContactCenter
+      tag="Contact"
+      title="Start Your Journey"
+      description="Get in touch for a tailored solution."
+      background={{ variant: "plain" }}
       useInvertedBackground={false}
-      background={{
-        variant: "plain",
-      }}
-      tag="Get in touch"
-      title="Ready to Transform Your Business?"
-      description="Our team is ready to discuss how SPTKW can help you reach your goals."
-      buttons={[
-        {
-          text: "Contact Us",
-          href: "#",
-        },
-      ]}
     />
   </div>
 
   <div id="footer" data-section="footer">
-      <FooterBase
+      <FooterLogoEmphasis
-      columns={[
-        {
-          title: "Company",
-          items: [
-            {
-              label: "About",
-              href: "#about",
-            },
-            {
-              label: "Blog",
-              href: "#blog",
-            },
-          ],
-        },
-        {
-          title: "Services",
-          items: [
-            {
-              label: "Integration",
-              href: "#features",
-            },
-            {
-              label: "Security",
-              href: "#features",
-            },
-          ],
-        },
-        {
-          title: "Support",
-          items: [
-            {
-              label: "Contact",
-              href: "#contact",
-            },
-            {
-              label: "FAQ",
-              href: "#faq",
-            },
-          ],
-        },
-      ]}
       logoText="SPTKW"
+      columns={[
+        { items: [{ label: "About" }, { label: "Features" }] },
+        { items: [{ label: "Contact" }, { label: "Support" }] }
+      ]}
     />
   </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}