From 08b757765e96648a1d57dffe7275255c77fad7b7 Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Sun, 19 Apr 2026 03:35:54 +0000
Subject: [PATCH] Update src/app/page.tsx

---
 src/app/page.tsx | 231 ++++++++++++++---------------------------------
 1 file changed, 66 insertions(+), 165 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 849d058..27153d3 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -2,16 +2,16 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import ContactText from '@/components/sections/contact/ContactText';
-import FaqBase from '@/components/sections/faq/FaqBase';
-import FeatureBento from '@/components/sections/feature/FeatureBento';
-import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
-import HeroSplitDoubleCarousel from '@/components/sections/hero/HeroSplitDoubleCarousel';
-import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
-import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen';
-import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
-import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
-import { Shield, TrendingUp, Zap } from "lucide-react";
+import ContactCenter from '@/components/sections/contact/ContactCenter';
+import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
+import FeatureCardTwentyOne from '@/components/sections/feature/FeatureCardTwentyOne';
+import FooterSimple from '@/components/sections/footer/FooterSimple';
+import HeroLogo from '@/components/sections/hero/HeroLogo';
+import SplitAbout from '@/components/sections/about/SplitAbout';
+import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';
+import { Shield, TrendingUp, Zap, Users, Target, HelpCircle, Mail } from "lucide-react";
 
 export default function LandingPage() {
   return (
@@ -29,212 +29,113 @@ export default function LandingPage() {
     >
       <ReactLenis root>
   <div id="nav" data-section="nav">
-      <NavbarLayoutFloatingInline
+      <NavbarStyleCentered
       navItems={[
-        {
-          name: "About",          id: "about"},
-        {
-          name: "Services",          id: "features"},
-        {
-          name: "Testimonials",          id: "testimonials"},
-        {
-          name: "FAQ",          id: "faq"},
+        { name: "About", id: "about" },
+        { name: "Services", id: "features" },
+        { name: "Testimonials", id: "testimonials" },
+        { name: "FAQ", id: "faq" },
       ]}
       brandName="Sunnyside Digital"
-      button={{
-        text: "Book a Meeting",        href: "#contact"}}
+      button={{ text: "Book a Meeting", href: "#contact" }}
     />
   </div>
 
   <div id="hero" data-section="hero">
-      <HeroSplitDoubleCarousel
-      background={{
-        variant: "plain"}}
-      title="Websites That Work, Support That Stays"
+      <HeroLogo
+      logoText="Sunnyside Digital"
       description="Sunnyside Digital builds and maintains websites designed to grow your business. From launch to ongoing updates, we handle the technical side so you focus on what matters."
-      leftCarouselItems={[
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/close-up-computers-data-center-running-server-rigs-diagnostic-tests_482257-123527.jpg",          imageAlt: "web design dashboard"},
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/financial-program-user-interface-pc-screen-home-office-desk_482257-118861.jpg",          imageAlt: "analytics dashboard UI"},
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/career-skills-progress-graphic-icon-symbol_53876-124007.jpg",          imageAlt: "mockup on screen"},
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/top-view-still-life-graphics-composition_23-2148991209.jpg",          imageAlt: "growth chart analytics"},
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/serious-businesswoman-headset-typing-laptop_74855-3074.jpg",          imageAlt: "support ticket system"},
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/disabled-man-wheelchair-working-his-office-job_23-2149571107.jpg",          imageAlt: "tech team working"},
-      ]}
-      rightCarouselItems={[
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/shopping-online-shopaholics-e-commerce-e-shopping-concept_53876-120673.jpg",          imageAlt: "ecommerce store mockup"},
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-woman-holding-pencil_23-2148966870.jpg",          imageAlt: "local business website"},
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/black-engineer-using-vr-headset-data-center-update-server-tech-configuring-equipment-using_482257-132581.jpg",          imageAlt: "developer workstation"},
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/synergy-collaboration-cooperation-teamwork-concept_53876-132326.jpg",          imageAlt: "strategy roadmap graphic"},
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/woman-coder-developing-software-freelance-project-working-remote-from-home-while-boyfriend-is-relaxing-african-american-programmer-writing-source-code-looking-errors-while-debugging_482257-64570.jpg",          imageAlt: "code lines programming"},
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/3d-data-technology-background-with-flowing-particles_1048-18065.jpg",          imageAlt: "digital innovation abstract"},
-      ]}
-      buttons={[
-        {
-          text: "Book a Meeting",          href: "#contact"},
-      ]}
-      avatars={[
-        {
-          src: "http://img.b2bpic.net/free-photo/close-up-young-business-team-working_23-2149153847.jpg",          alt: "Close up on young business team working"},
-        {
-          src: "http://img.b2bpic.net/free-photo/team-diverse-coworkers-modern-office-discuss-their-project-together_93675-134863.jpg",          alt: "Team of diverse coworkers in modern office discuss their project together"},
-        {
-          src: "http://img.b2bpic.net/free-photo/team-diverse-coworkers-modern-office-discuss-their-project-together_93675-133516.jpg",          alt: "Team of diverse coworkers in modern office discuss their project together"},
-        {
-          src: "http://img.b2bpic.net/free-photo/creative-business-people-listening-colleague_58466-11191.jpg",          alt: "Creative business people listening to colleague"},
-        {
-          src: "http://img.b2bpic.net/free-photo/multiethnic-group-coworkers-analyzing-information-charts-using-paperwork-online-research-digital-tablet-people-planning-business-report-with-data-analysis-ideas_482257-48651.jpg",          alt: "Multiethnic group of coworkers analyzing information on charts"},
-      ]}
-      avatarText="Join 150+ successful businesses"
-      marqueeItems={[
-        {
-          type: "image",          src: "http://img.b2bpic.net/free-photo/rocket-ship-launching-symbol-icon_53876-15090.jpg",          alt: "Rocket ship launching symbol icon"},
-        {
-          type: "image",          src: "http://img.b2bpic.net/free-photo/king-chess-icon-isolated_53876-14845.jpg",          alt: "The king chess icon isolated"},
-        {
-          type: "image",          src: "http://img.b2bpic.net/free-photo/golden-correct-sign-best-quality-assurance-guarantee-product-iso-service-concept_616485-97.jpg",          alt: "Golden correct sign for best quality assurance"},
-        {
-          type: "image",          src: "http://img.b2bpic.net/free-photo/be-change-strategy-icon_53876-13922.jpg",          alt: "Be The Change Strategy Icon"},
-        {
-          type: "image",          src: "http://img.b2bpic.net/free-photo/3d-plexus-design-with-connecting-lines-dots-network-communications_1048-12200.jpg",          alt: "3D plexus design with connecting lines"},
-      ]}
+      buttons={[{ text: "Book a Meeting", href: "#contact" }]}
+      imageSrc="http://img.b2bpic.net/free-photo/close-up-computers-data-center-running-server-rigs-diagnostic-tests_482257-123527.jpg"
     />
   </div>
 
   <div id="about" data-section="about">
-      <InlineImageSplitTextAbout
+      <SplitAbout
+      title="Reliable Web Solutions for Small Businesses"
+      description="We provide custom websites built for conversion, backed by expert support to keep your site performing at its peak."
       useInvertedBackground={false}
-      heading={[
-        {
-          type: "text",          content: "Reliable Web Solutions for Small Businesses"},
-        {
-          type: "image",          src: "http://img.b2bpic.net/free-photo/corporate-workers-brainstorming-together_23-2148804492.jpg",          alt: "tech team collaboration"},
+      textboxLayout="split"
+      bulletPoints={[
+        { title: "Performance Focused", description: "Optimized for speed and SEO.", icon: Zap },
+        { title: "Expert Support", description: "Ongoing maintenance for peace of mind.", icon: Shield },
+        { title: "Data Driven", description: "ROI-focused design choices.", icon: TrendingUp }
       ]}
     />
   </div>
 
   <div id="features" data-section="features">
-      <FeatureBento
-      animationType="slide-up"
-      textboxLayout="default"
-      useInvertedBackground={true}
-      features={[
-        {
-          title: "Rapid Development",          description: "Custom websites built for conversion and speed.",          bentoComponent: "reveal-icon",          icon: Zap,
-        },
-        {
-          title: "Ongoing Maintenance",          description: "We keep your site secure and updated 24/7.",          bentoComponent: "reveal-icon",          icon: Shield,
-        },
-        {
-          title: "ROI Focused Design",          description: "Layouts that turn visitors into paying customers.",          bentoComponent: "reveal-icon",          icon: TrendingUp,
-        },
-      ]}
+      <FeatureCardTwentyOne
       title="Built to Grow Your Business"
-      description="We offer comprehensive services to launch and maintain your digital presence."
+      description="We offer comprehensive services to launch and maintain your digital presence efficiently."
+      accordionItems={[
+        { id: "a1", title: "Rapid Development", content: "Custom websites built for conversion and speed." },
+        { id: "a2", title: "Ongoing Maintenance", content: "We keep your site secure and updated 24/7." },
+        { id: "a3", title: "ROI Focused", content: "Layouts that turn visitors into paying customers." }
+      ]}
+      useInvertedBackground={true}
+      imageSrc="http://img.b2bpic.net/free-photo/synergy-collaboration-cooperation-teamwork-concept_53876-132326.jpg"
     />
   </div>
 
   <div id="metrics" data-section="metrics">
-      <MetricCardFourteen
-      useInvertedBackground={false}
+      <MetricCardOne
       title="Proven Results"
-      tag="Performance Metrics"
+      description="We track performance to ensure we deliver real value to our clients."
+      gridVariant="bento-grid"
+      animationType="slide-up"
       metrics={[
-        {
-          id: "m1",          value: "150+",          description: "Websites Built"},
-        {
-          id: "m2",          value: "99.9%",          description: "Uptime Guaranteed"},
-        {
-          id: "m3",          value: "24/7",          description: "Support Available"},
+        { id: "m1", value: "150+", title: "Projects", description: "Websites Launched", icon: Target },
+        { id: "m2", value: "99.9%", title: "Uptime", description: "Guaranteed Stability", icon: Shield },
+        { id: "m3", value: "24/7", title: "Support", description: "Always Available", icon: Users },
       ]}
-      metricsAnimation="slide-up"
     />
   </div>
 
   <div id="testimonials" data-section="testimonials">
-      <TestimonialCardTen
+      <TestimonialCardFive
+      title="Trusted by Local Leaders"
+      description="See why businesses choose us for their web development and maintenance needs."
       textboxLayout="split"
       useInvertedBackground={true}
       testimonials={[
-        {
-          id: "t1",          title: "Amazing Results",          quote: "Sunnyside completely transformed our restaurant's online presence.",          name: "Maria Garcia",          role: "Owner",          imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiling-successful-businesswoman-looking-into-camera-sitting-restaurant-business-lady-with-stylish-hairstyle-wears-elegant-suit-business-meeting-attractive-appearance_8353-12611.jpg"},
-        {
-          id: "t2",          title: "Incredibly Responsive",          quote: "Whenever we need updates, they handle them immediately.",          name: "Tom Baker",          role: "Manager",          imageSrc: "http://img.b2bpic.net/free-photo/businessman-smiling-with-his-hand-pocket_1098-46.jpg"},
-        {
-          id: "t3",          title: "ROI Focused",          quote: "Our sales have doubled since launching the new site.",          name: "Sarah Chen",          role: "CEO",          imageSrc: "http://img.b2bpic.net/free-photo/smiling-middle-aged-business-leader-window_1262-5674.jpg"},
-        {
-          id: "t4",          title: "Technical Experts",          quote: "They simplified everything for us. Highly recommend.",          name: "James Wilson",          role: "Owner",          imageSrc: "http://img.b2bpic.net/free-photo/female-shopkeeper-smiling-camera_482257-76102.jpg"},
-        {
-          id: "t5",          title: "Reliable Support",          quote: "Finally, a company that actually cares about my site.",          name: "Emily Davis",          role: "Manager",          imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-stylish-pretty-young-woman-look-professional-cross-hands-chest-smiling-confident-camera-wear-glasses-standing-near-reception-office-hall-discuss-business_197531-22165.jpg"},
+        { id: "t1", name: "Maria Garcia", date: "2023", title: "Owner", quote: "Sunnyside completely transformed our online presence.", tag: "Restaraunt", avatarSrc: "http://img.b2bpic.net/free-photo/portrait-smiling-successful-businesswoman-looking-into-camera-sitting-restaurant-business-lady-with-stylish-hairstyle-wears-elegant-suit-business-meeting-attractive-appearance_8353-12611.jpg" },
+        { id: "t2", name: "Tom Baker", date: "2023", title: "Manager", quote: "Incredibly responsive to our updates.", tag: "Retail", avatarSrc: "http://img.b2bpic.net/free-photo/businessman-smiling-with-his-hand-pocket_1098-46.jpg" }
       ]}
-      title="Trusted by Local Leaders"
-      description="See why businesses choose us for their web development and maintenance needs."
     />
   </div>
 
   <div id="faq" data-section="faq">
-      <FaqBase
-      textboxLayout="default"
-      useInvertedBackground={false}
-      faqs={[
-        {
-          id: "f1",          title: "How long does a build take?",          content: "Most sites are completed within 4-6 weeks."},
-        {
-          id: "f2",          title: "Do you offer hosting?",          content: "Yes, we provide fully managed, secure hosting services."},
-        {
-          id: "f3",          title: "How do I request updates?",          content: "Submit a ticket through our simple client dashboard."},
-      ]}
+      <FaqSplitMedia
       title="Common Questions"
       description="Here's what our clients usually want to know about our services."
+      faqs={[
+        { id: "f1", title: "How long does a build take?", content: "Most sites are completed within 4-6 weeks." },
+        { id: "f2", title: "Do you offer hosting?", content: "Yes, we provide fully managed, secure hosting services." },
+        { id: "f3", title: "How do I request updates?", content: "Submit a ticket through our simple client dashboard." },
+      ]}
       faqsAnimation="slide-up"
+      textboxLayout="split"
     />
   </div>
 
   <div id="contact" data-section="contact">
-      <ContactText
-      useInvertedBackground={true}
-      background={{
-        variant: "plain"}}
-      text="Ready to take your digital presence to the next level? Contact us at sunnytruong2017@gmail.com or (714) 725 1563 to book a meeting."
-      buttons={[
-        {
-          text: "Book a Meeting",          href: "#"},
-      ]}
+      <ContactCenter
+      title="Ready to get started?"
+      description="Contact us to book a meeting or learn more about our web services."
+      background={{ variant: "gradient-bars" }}
+      onSubmit={(email) => console.log("Sign up:", email)}
     />
   </div>
 
   <div id="footer" data-section="footer">
-      <FooterBaseReveal
-      logoText="Sunnyside Digital"
+      <FooterSimple
       columns={[
-        {
-          title: "Company",          items: [
-            {
-              label: "About",              href: "about"},
-            {
-              label: "Services",              href: "features"},
-          ],
-        },
-        {
-          title: "Support",          items: [
-            {
-              label: "Contact",              href: "contact"},
-            {
-              label: "FAQ",              href: "faq"},
-          ],
-        },
+        { title: "Company", items: [{ label: "About", href: "#about" }, { label: "Services", href: "#features" }] },
+        { title: "Support", items: [{ label: "Contact", href: "#contact" }, { label: "FAQ", href: "#faq" }] },
       ]}
+      bottomLeftText="© 2024 Sunnyside Digital"
+      bottomRightText="All rights reserved"
     />
   </div>
       </ReactLenis>