From d79b40a0945924271d8b7f9281829612b7192cb2 Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Tue, 10 Mar 2026 17:10:11 +0000
Subject: [PATCH] Update src/app/page.tsx

---
 src/app/page.tsx | 329 +++++++++++++++++++++++++++++++----------------
 1 file changed, 217 insertions(+), 112 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 7d41747..6984d20 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,108 +1,128 @@
 "use client";
 
 import { ThemeProvider } from "@/components/theme/ThemeProvider";
-import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
-import HeroSplitDualMedia from "@/components/sections/hero/HeroSplitDualMedia";
-import MetricSplitMediaAbout from "@/components/sections/about/MetricSplitMediaAbout";
-import FeatureHoverPattern from "@/components/sections/feature/featureHoverPattern/FeatureHoverPattern";
+import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
+import HeroCentered from "@/components/sections/hero/HeroCentered";
+import SplitAbout from "@/components/sections/about/SplitAbout";
+import FeatureCardTwentyFive from "@/components/sections/feature/FeatureCardTwentyFive";
 import PricingCardNine from "@/components/sections/pricing/PricingCardNine";
-import ContactCenter from "@/components/sections/contact/ContactCenter";
-import FooterSimple from "@/components/sections/footer/FooterSimple";
-import { Sparkles, Zap, Shield, Clock, Lightbulb, Target, CheckCircle, Mail, Facebook, Twitter, Linkedin } from "lucide-react";
+import MetricCardTwo from "@/components/sections/metrics/MetricCardTwo";
+import TeamCardOne from "@/components/sections/team/TeamCardOne";
+import FaqSplitMedia from "@/components/sections/faq/FaqSplitMedia";
+import ContactFaq from "@/components/sections/contact/ContactFaq";
+import FooterBaseCard from "@/components/sections/footer/FooterBaseCard";
+import { Lightbulb, Target, Zap, Phone } from "lucide-react";
 
 export default function Home() {
   return (
     <ThemeProvider
-      defaultButtonVariant="hover-magnetic"
+      defaultButtonVariant="hover-bubble"
       defaultTextAnimation="entrance-slide"
-      borderRadius="rounded"
-      contentWidth="medium"
-      sizing="medium"
+      borderRadius="pill"
+      contentWidth="mediumLarge"
+      sizing="mediumLarge"
       background="none"
       cardStyle="solid"
       primaryButtonStyle="gradient"
       secondaryButtonStyle="glass"
-      headingFontWeight="bold"
+      headingFontWeight="semibold"
     >
-      <NavbarLayoutFloatingInline
+      <NavbarStyleApple
         navItems={[
           { name: "Home", id: "/" },
           { name: "About", id: "#about" },
-          { name: "Features", id: "#features" },
+          { name: "Services", id: "#services" },
           { name: "Pricing", id: "#pricing" },
+          { name: "Contact", id: "#contact" }
         ]}
         brandName="Webbug"
-        button={{ text: "Get Started", href: "#contact" }}
-        animateOnLoad={true}
       />
 
       <div id="hero" data-section="hero">
-        <HeroSplitDualMedia
+        <HeroCentered
           background={{ variant: "plain" }}
-          tag="Medical & Dental Web Design"
-          tagIcon={Sparkles}
-          title="Professional Websites for Your Medical Practice"
-          description="Build patient trust and grow your practice with HIPAA-compliant websites designed specifically for medical and dental professionals."
-          mediaItems={[
-            {
-              imageSrc: "asset://hero-image-1",              imageAlt: "Medical practice website showcase"},
-            {
-              imageSrc: "asset://hero-image-2",              imageAlt: "Patient engagement interface"},
+          avatars={[
+            { src: "asset://avatar-1", alt: "User 1" },
+            { src: "asset://avatar-2", alt: "User 2" },
+            { src: "asset://avatar-3", alt: "User 3" }
           ]}
-          rating={5}
-          ratingText="Trusted by Healthcare Professionals"
+          avatarText="Trusted by 100+ practices"
+          title="Professional Web Design for Medical & Dental Practices"
+          description="HIPAA-compliant websites designed to build patient trust and grow your practice"
           buttons={[
-            { text: "View Our Work", href: "#about" },
-            { text: "Schedule a Call", href: "#contact" },
+            { text: "Get Started", href: "#contact" },
+            { text: "Learn More", href: "#about" }
           ]}
         />
       </div>
 
       <div id="about" data-section="about">
-        <MetricSplitMediaAbout
-          tag="Why Choose Us"
-          tagIcon={Target}
-          title="Specialized Web Design for Healthcare Professionals"
-          description="We understand the unique needs of medical and dental practices. Our HIPAA-compliant websites are designed to build patient confidence, streamline operations, and help your practice grow."
-          metrics={[
-            { value: "500+", title: "Healthcare Websites Built" },
-            { value: "98%", title: "Patient Satisfaction Rate" },
+        <SplitAbout
+          title="Why Choose Webbug?"
+          description="We specialize in creating professional websites for healthcare providers"
+          textboxLayout="default"
+          useInvertedBackground={false}
+          bulletPoints={[
+            {
+              title: "HIPAA Compliant",              description: "All websites meet HIPAA security standards",              icon: Lightbulb
+            },
+            {
+              title: "Patient Focused",              description: "Design optimized for patient experience",              icon: Target
+            },
+            {
+              title: "SEO Optimized",              description: "Better visibility in search results",              icon: Zap
+            }
           ]}
           imageSrc="asset://about-image"
-          imageAlt="Our team working on healthcare web design"
-          useInvertedBackground={false}
-          mediaAnimation="slide-up"
-          metricsAnimation="slide-up"
+          imageAlt="Medical practice team"
+          imagePosition="right"
+          mediaAnimation="none"
+          buttons={[
+            { text: "Schedule a Call", href: "#contact" }
+          ]}
         />
       </div>
 
-      <div id="features" data-section="features">
-        <FeatureHoverPattern
+      <div id="services" data-section="services">
+        <FeatureCardTwentyFive
           features={[
             {
-              icon: Shield,
-              title: "HIPAA Compliant",              description: "Built with security best practices to protect patient data and meet all healthcare regulations."},
+              title: "Website Design",              description: "Custom websites tailored to your practice",              icon: Target,
+              mediaItems: [
+                { imageSrc: "asset://service-1", imageAlt: "Website design" },
+                { imageSrc: "asset://service-2", imageAlt: "Website design 2" }
+              ]
+            },
             {
-              icon: Zap,
-              title: "Lightning Fast",              description: "Optimized performance ensures your patients have the best browsing experience."},
+              title: "Patient Portal",              description: "Secure patient communication platform",              icon: Lightbulb,
+              mediaItems: [
+                { imageSrc: "asset://service-3", imageAlt: "Patient portal" },
+                { imageSrc: "asset://service-4", imageAlt: "Patient portal 2" }
+              ]
+            },
             {
-              icon: Clock,
-              title: "Appointment Scheduling",              description: "Integrated booking system makes it easy for patients to schedule appointments online."},
+              title: "SEO Services",              description: "Improve your online visibility",              icon: Zap,
+              mediaItems: [
+                { imageSrc: "asset://service-5", imageAlt: "SEO services" },
+                { imageSrc: "asset://service-6", imageAlt: "SEO services 2" }
+              ]
+            },
             {
-              icon: Lightbulb,
-              title: "Patient Education",              description: "Built-in tools to share educational content and build patient engagement."},
-            {
-              icon: CheckCircle,
-              title: "Mobile Optimized",              description: "Responsive design that looks perfect on all devices and screen sizes."},
-            {
-              icon: Target,
-              title: "SEO Ready",              description: "Optimized to help patients find your practice in local search results."},
+              title: "Maintenance",              description: "24/7 support and updates",              icon: Target,
+              mediaItems: [
+                { imageSrc: "asset://service-7", imageAlt: "Maintenance" },
+                { imageSrc: "asset://service-8", imageAlt: "Maintenance 2" }
+              ]
+            }
           ]}
-          title="Powerful Features for Healthcare"
-          description="Everything you need to establish a strong online presence and connect with patients."
+          title="Our Services"
+          description="Comprehensive web solutions for healthcare providers"
           textboxLayout="default"
-          animationType="slide-up"
           useInvertedBackground={false}
+          animationType="slide-up"
+          buttons={[
+            { text: "View All Services", href: "#contact" }
+          ]}
         />
       </div>
 
@@ -110,75 +130,160 @@ export default function Home() {
         <PricingCardNine
           plans={[
             {
-              id: "starter",              title: "Starter",              price: "$2,999",              period: "one-time",              imageSrc: "asset://pricing-starter",              imageAlt: "Starter plan",              button: { text: "Get Started", href: "#contact" },
+              id: "basic",              title: "Basic",              price: "$999",              period: "/month",              imageSrc: "asset://pricing-basic",              imageAlt: "Basic plan",              button: { text: "Get Started", href: "#contact" },
               features: [
-                "Professional website design",                "Mobile responsive",                "Contact forms",                "Basic SEO optimization",                "1 month of support"],
+                "Professional Website",                "Mobile Responsive",                "Basic SEO Setup",                "Email Support"
+              ]
             },
             {
-              id: "professional",              title: "Professional",              price: "$5,999",              period: "one-time",              imageSrc: "asset://pricing-professional",              imageAlt: "Professional plan",              button: { text: "Get Started", href: "#contact" },
+              id: "professional",              title: "Professional",              price: "$1,999",              period: "/month",              imageSrc: "asset://pricing-professional",              imageAlt: "Professional plan",              button: { text: "Get Started", href: "#contact" },
               features: [
-                "Everything in Starter",                "Appointment scheduling system",                "Patient portal",                "Advanced SEO",                "3 months of support",                "Monthly updates"],
+                "All Basic Features",                "Patient Portal",                "Advanced SEO",                "Priority Support",                "Monthly Analytics"
+              ]
             },
             {
-              id: "enterprise",              title: "Enterprise",              price: "Custom",              period: "contact us",              imageSrc: "asset://pricing-enterprise",              imageAlt: "Enterprise plan",              button: { text: "Schedule Consultation", href: "#contact" },
+              id: "enterprise",              title: "Enterprise",              price: "Custom",              period: "/month",              imageSrc: "asset://pricing-enterprise",              imageAlt: "Enterprise plan",              button: { text: "Schedule Call", href: "#contact" },
               features: [
-                "Everything in Professional",                "Custom integrations",                "Multi-location support",                "Premium support",                "Ongoing optimization",                "Custom features"],
-            },
+                "All Professional Features",                "Custom Integrations",                "24/7 Support",                "Dedicated Account Manager",                "Advanced Analytics"
+              ]
+            }
           ]}
-          animationType="slide-up"
-          title="Simple, Transparent Pricing"
-          description="Choose the perfect plan for your medical practice. All plans include HIPAA compliance and ongoing support."
+          title="Transparent Pricing"
+          description="Choose the plan that fits your practice needs"
           textboxLayout="default"
           useInvertedBackground={false}
+          animationType="slide-up"
+          buttons={[
+            { text: "View Full Details", href: "#contact" }
+          ]}
+        />
+      </div>
+
+      <div id="metrics" data-section="metrics">
+        <MetricCardTwo
+          metrics={[
+            { id: "1", value: "100+", description: "Medical Practices Served" },
+            { id: "2", value: "98%", description: "Client Satisfaction" },
+            { id: "3", value: "50K+", description: "Patient Appointments Booked" },
+            { id: "4", value: "24/7", description: "Technical Support Available" }
+          ]}
+          title="Our Impact"
+          description="Delivering results for healthcare providers"
+          gridVariant="uniform-all-items-equal"
+          textboxLayout="default"
+          useInvertedBackground={false}
+          animationType="slide-up"
+        />
+      </div>
+
+      <div id="team" data-section="team">
+        <TeamCardOne
+          members={[
+            {
+              id: "1",              name: "Sarah Johnson",              role: "Lead Designer",              imageSrc: "asset://team-1",              imageAlt: "Sarah Johnson"
+            },
+            {
+              id: "2",              name: "Michael Chen",              role: "Founder & CEO",              imageSrc: "asset://team-2",              imageAlt: "Michael Chen"
+            },
+            {
+              id: "3",              name: "Emily Rodriguez",              role: "Patient Experience Lead",              imageSrc: "asset://team-3",              imageAlt: "Emily Rodriguez"
+            },
+            {
+              id: "4",              name: "David Park",              role: "Technical Director",              imageSrc: "asset://team-4",              imageAlt: "David Park"
+            }
+          ]}
+          title="Meet Our Team"
+          description="Experts dedicated to your success"
+          textboxLayout="default"
+          useInvertedBackground={false}
+          gridVariant="four-items-2x2-equal-grid"
+          animationType="slide-up"
+        />
+      </div>
+
+      <div id="faq" data-section="faq">
+        <FaqSplitMedia
+          faqs={[
+            {
+              id: "1",              title: "Is my patient data secure?",              content: "Yes, all our websites are HIPAA compliant and use industry-leading security standards to protect sensitive patient information."
+            },
+            {
+              id: "2",              title: "How long does it take to build a website?",              content: "Typical websites are completed within 4-6 weeks, depending on complexity and your requirements."
+            },
+            {
+              id: "3",              title: "Do you provide ongoing support?",              content: "Yes, we offer 24/7 technical support and maintenance packages to keep your website running smoothly."
+            },
+            {
+              id: "4",              title: "Can you integrate with our current systems?",              content: "Absolutely. We can integrate with EMR systems, appointment scheduling software, and other healthcare platforms."
+            }
+          ]}
+          imageSrc="asset://faq-image"
+          imageAlt="FAQ support"
+          title="Frequently Asked Questions"
+          description="Find answers to common questions about our services"
+          textboxLayout="default"
+          useInvertedBackground={false}
+          mediaPosition="left"
+          mediaAnimation="none"
+          faqsAnimation="slide-up"
+          buttons={[
+            { text: "Still have questions?", href: "#contact" }
+          ]}
         />
       </div>
 
       <div id="contact" data-section="contact">
-        <ContactCenter
-          tag="Get In Touch"
-          tagIcon={Mail}
-          title="Ready to Transform Your Online Presence?"
-          description="Let's work together to create a professional, patient-focused website for your healthcare practice."
-          background={{ variant: "rotated-rays-animated-grid" }}
+        <ContactFaq
+          faqs={[
+            {
+              id: "1",              title: "What makes your designs HIPAA compliant?",              content: "We follow strict HIPAA guidelines including data encryption, secure authentication, and audit logging to ensure all patient information is protected."
+            },
+            {
+              id: "2",              title: "How do you handle website updates?",              content: "We provide regular updates for security patches, plugin updates, and performance optimization. Monthly maintenance is included with our plans."
+            },
+            {
+              id: "3",              title: "Can you help with patient acquisition?",              content: "Yes, our SEO and patient portal features are designed to help attract and retain patients through improved online visibility and engagement."
+            }
+          ]}
+          ctaTitle="Schedule Your Free Consultation"
+          ctaDescription="Let's discuss how we can help your practice grow online"
+          ctaButton={{ text: "Book a Call", href: "https://calendly.com" }}
+          ctaIcon={Phone}
           useInvertedBackground={false}
-          inputPlaceholder="Enter your email"
-          buttonText="Sign Up"
-          termsText="We respect your privacy. Unsubscribe at any time."
+          animationType="slide-up"
         />
       </div>
 
-      <div id="footer" data-section="footer">
-        <FooterSimple
-          columns={[
-            {
-              title: "Navigate",              items: [
-                { label: "Home", href: "/" },
-                { label: "About", href: "#about" },
-                { label: "Features", href: "#features" },
-                { label: "Pricing", href: "#pricing" },
-              ],
-            },
-            {
-              title: "Resources",              items: [
-                { label: "Blog", href: "#" },
-                { label: "Documentation", href: "#" },
-                { label: "FAQ", href: "#" },
-                { label: "Support", href: "#contact" },
-              ],
-            },
-            {
-              title: "Legal",              items: [
-                { label: "Privacy Policy", href: "#" },
-                { label: "Terms of Service", href: "#" },
-                { label: "HIPAA Policy", href: "#" },
-                { label: "Compliance", href: "#" },
-              ],
-            },
-          ]}
-          bottomLeftText="© 2025 Webbug. All rights reserved."
-          bottomRightText="Made with ❤️ for Healthcare Professionals"
-        />
-      </div>
+      <FooterBaseCard
+        logoText="Webbug"
+        columns={[
+          {
+            title: "Product",            items: [
+              { label: "Website Design", href: "#services" },
+              { label: "Patient Portal", href: "#services" },
+              { label: "SEO Services", href: "#services" },
+              { label: "Pricing", href: "#pricing" }
+            ]
+          },
+          {
+            title: "Company",            items: [
+              { label: "About Us", href: "#about" },
+              { label: "Team", href: "#team" },
+              { label: "Blog", href: "#" },
+              { label: "Contact", href: "#contact" }
+            ]
+          },
+          {
+            title: "Resources",            items: [
+              { label: "Documentation", href: "#" },
+              { label: "Support", href: "#contact" },
+              { label: "FAQ", href: "#faq" },
+              { label: "Privacy Policy", href: "#" }
+            ]
+          }
+        ]}
+        copyrightText="© 2025 Webbug | Professional Web Design for Healthcare"
+      />
     </ThemeProvider>
   );
 }
-- 
2.49.1