From f0f5848b4670eab90cb977dc63ca12d97a9c5cde Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Thu, 7 May 2026 17:37:15 +0000
Subject: [PATCH] Update src/app/page.tsx

---
 src/app/page.tsx | 213 ++++++++++++++++++++---------------------------
 1 file changed, 88 insertions(+), 125 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 828ce58..160208b 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -4,7 +4,7 @@ import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
 import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
 import FaqSplitText from '@/components/sections/faq/FaqSplitText';
-import FeatureCardSixteen from '@/components/sections/feature/FeatureCardSixteen';
+import FeatureCardMedia from '@/components/sections/feature/FeatureCardMedia';
 import FooterBase from '@/components/sections/footer/FooterBase';
 import HeroBillboardCarousel from '@/components/sections/hero/HeroBillboardCarousel';
 import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
@@ -25,136 +25,99 @@ export default function LandingPage() {
         headingFontWeight="normal"
     >
       <ReactLenis root>
-  <div id="nav" data-section="nav">
-      <NavbarStyleFullscreen
-      navItems={[
-        {
-          name: "Home",          id: "/"},
-        {
-          name: "Pricing",          id: "/pricing"},
-        {
-          name: "Dashboard",          id: "/dashboard"},
-      ]}
-      brandName="DataDirect"
-    />
-  </div>
+        <div id="nav" data-section="nav">
+          <NavbarStyleFullscreen
+            navItems={[
+              { name: "Home", id: "/" },
+              { name: "Pricing", id: "/pricing" },
+              { name: "Dashboard", id: "/dashboard" },
+            ]}
+            brandName="DataDirect"
+          />
+        </div>
 
-  <div id="hero" data-section="hero">
-      <HeroBillboardCarousel
-      background={{
-        variant: "gradient-bars"}}
-      title="Instant Data Delivery"
-      description="Get affordable and reliable data plans for all networks instantly. Reliable service, 24/7 delivery."
-      buttons={[
-        {
-          text: "Get Started",          href: "/dashboard"},
-      ]}
-      mediaItems={[
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/3d-abstract-background-with-network-connections-low-poly-plexus-design_1048-11867.jpg",          imageAlt: "digital network abstract"},
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/abstract-technology-network_23-2152020920.jpg",          imageAlt: "digital network abstract"},
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/abstract-technology-background-concept_1194-617406.jpg",          imageAlt: "digital network abstract"},
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/conceptual-3d-illustration-basketball-player-dunking-motion-design_183364-124108.jpg",          imageAlt: "digital network abstract"},
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/technology-network-background-connection-cyber-space-ai-generative_123827-24187.jpg",          imageAlt: "digital network abstract"},
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/connecting-dots-background-network-communication-design_53876-160215.jpg",          imageAlt: "digital network abstract"},
-      ]}
-    />
-  </div>
+        <div id="hero" data-section="hero">
+          <HeroBillboardCarousel
+            background={{ variant: "gradient-bars" }}
+            title="Instant Data Delivery"
+            description="Get affordable and reliable data plans for all networks instantly. Reliable service, 24/7 delivery."
+            buttons={[{ text: "Get Started", href: "/dashboard" }]}
+            mediaItems={[
+              { imageSrc: "http://img.b2bpic.net/free-photo/3d-abstract-background-with-network-connections-low-poly-plexus-design_1048-11867.jpg", imageAlt: "digital network abstract" },
+              { imageSrc: "http://img.b2bpic.net/free-photo/abstract-technology-network_23-2152020920.jpg", imageAlt: "digital network abstract" },
+              { imageSrc: "http://img.b2bpic.net/free-photo/abstract-technology-background-concept_1194-617406.jpg", imageAlt: "digital network abstract" },
+              { imageSrc: "http://img.b2bpic.net/free-photo/conceptual-3d-illustration-basketball-player-dunking-motion-design_183364-124108.jpg", imageAlt: "digital network abstract" },
+              { imageSrc: "http://img.b2bpic.net/free-photo/technology-network-background-connection-cyber-space-ai-generative_123827-24187.jpg", imageAlt: "digital network abstract" },
+              { imageSrc: "http://img.b2bpic.net/free-photo/connecting-dots-background-network-communication-design_53876-160215.jpg", imageAlt: "digital network abstract" },
+            ]}
+          />
+        </div>
 
-  <div id="about" data-section="about">
-      <SplitAbout
-      textboxLayout="split"
-      useInvertedBackground={true}
-      title="Why Choose Us?"
-      description="We offer the most reliable VTU services in the market today with competitive pricing and instant delivery times."
-      bulletPoints={[
-        {
-          title: "Instant Delivery",          description: "Get your data instantly."},
-        {
-          title: "24/7 Support",          description: "Always here to help."},
-        {
-          title: "Competitive Rates",          description: "Affordable data plans."},
-      ]}
-      imageSrc="http://img.b2bpic.net/free-photo/modern-stationary-collection-arrangement_23-2149309685.jpg"
-      mediaAnimation="slide-up"
-      imageAlt="tech professional working"
-    />
-  </div>
+        <div id="about" data-section="about">
+          <SplitAbout
+            textboxLayout="split"
+            useInvertedBackground={true}
+            title="Why Choose Us?"
+            description="We offer the most reliable VTU services in the market today with competitive pricing and instant delivery times."
+            bulletPoints={[
+              { title: "Instant Delivery", description: "Get your data instantly." },
+              { title: "24/7 Support", description: "Always here to help." },
+              { title: "Competitive Rates", description: "Affordable data plans." },
+            ]}
+            imageSrc="http://img.b2bpic.net/free-photo/modern-stationary-collection-arrangement_23-2149309685.jpg"
+            mediaAnimation="slide-up"
+            imageAlt="tech professional working"
+          />
+        </div>
 
-  <div id="faq" data-section="faq">
-      <FaqSplitText
-      useInvertedBackground={false}
-      faqs={[
-        {
-          id: "q1",          title: "Is it instant?",          content: "Yes, delivery is within seconds."},
-        {
-          id: "q2",          title: "What networks?",          content: "MTN, Glo, Airtel, 9Mobile."},
-        {
-          id: "q3",          title: "Need help?",          content: "Contact support via WhatsApp."},
-      ]}
-      sideTitle="Questions?"
-      faqsAnimation="slide-up"
-    />
-  </div>
+        <div id="faq" data-section="faq">
+          <FaqSplitText
+            useInvertedBackground={false}
+            faqs={[
+              { id: "q1", title: "Is it instant?", content: "Yes, delivery is within seconds." },
+              { id: "q2", title: "What networks?", content: "MTN, Glo, Airtel, 9Mobile." },
+              { id: "q3", title: "Need help?", content: "Contact support via WhatsApp." },
+            ]}
+            sideTitle="Questions?"
+            faqsAnimation="slide-up"
+          />
+        </div>
 
-  <div id="feature" data-section="feature">
-      <FeatureCardSixteen
-      title="Features"
-      description="Our core capabilities"
-      animationType="slide-up"
-      textboxLayout="default"
-      useInvertedBackground={false}
-      features={[]}
-    />
-  </div>
+        <div id="feature" data-section="feature">
+          <FeatureCardMedia
+            title="Features"
+            description="Our core capabilities"
+            animationType="slide-up"
+            textboxLayout="default"
+            useInvertedBackground={false}
+            features={[]}
+          />
+        </div>
 
-  <div id="contact" data-section="contact">
-      <ContactSplitForm
-      useInvertedBackground={false}
-      title="Contact Us"
-      description="Need technical assistance or help with your transactions?"
-      inputs={[
-        {
-          name: "name",          type: "text",          placeholder: "Your Name",          required: true,
-        },
-        {
-          name: "email",          type: "email",          placeholder: "Your Email",          required: true,
-        },
-      ]}
-      textarea={{
-        name: "message",        placeholder: "Tell us how we can help",        rows: 4,
-      }}
-      imageSrc="http://img.b2bpic.net/free-photo/business-office-sence_1387-652.jpg"
-      imageAlt="business office sence"
-    />
-  </div>
+        <div id="contact" data-section="contact">
+          <ContactSplitForm
+            useInvertedBackground={false}
+            title="Contact Us"
+            description="Need technical assistance or help with your transactions?"
+            inputs={[
+              { name: "name", type: "text", placeholder: "Your Name", required: true },
+              { name: "email", type: "email", placeholder: "Your Email", required: true },
+            ]}
+            textarea={{ name: "message", placeholder: "Tell us how we can help", rows: 4 }}
+            imageSrc="http://img.b2bpic.net/free-photo/business-office-sence_1387-652.jpg"
+            imageAlt="business office sence"
+          />
+        </div>
 
-  <div id="footer" data-section="footer">
-      <FooterBase
-      columns={[
-        {
-          title: "Links",          items: [
-            {
-              label: "Home",              href: "/"},
-            {
-              label: "Dashboard",              href: "/dashboard"},
-          ],
-        },
-        {
-          title: "Support",          items: [
-            {
-              label: "Contact",              href: "#contact"},
-          ],
-        },
-      ]}
-      logoText="DataDirect"
-    />
-  </div>
+        <div id="footer" data-section="footer">
+          <FooterBase
+            columns={[
+              { title: "Links", items: [{ label: "Home", href: "/" }, { label: "Dashboard", href: "/dashboard" }] },
+              { title: "Support", items: [{ label: "Contact", href: "#contact" }] },
+            ]}
+            logoText="DataDirect"
+          />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );
-- 
2.49.1