Merge version_6 into main

Merge version_6 into main

src/app/page.tsx

@@ -1,211 +1,292 @@
 "use client";
 
-import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
-import HeroCentered from "@/components/sections/hero/HeroCentered";
-import MediaAbout from "@/components/sections/about/MediaAbout";
-import FeatureCardTwentySeven from "@/components/sections/feature/FeatureCardTwentySeven";
-import ProductCardOne from "@/components/sections/product/ProductCardOne";
-import MetricCardTwo from "@/components/sections/metrics/MetricCardTwo";
-import TestimonialCardThirteen from "@/components/sections/testimonial/TestimonialCardThirteen";
-import ContactSplitForm from "@/components/sections/contact/ContactSplitForm";
-import FooterCard from "@/components/sections/footer/FooterCard";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
-import { Sparkles, Zap, Briefcase, TrendingUp, Quote, Facebook } from "lucide-react";
+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 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";
+import Link from "next/link";
 
-export default function LandingPage() {
+export default function Home() {
   return (
     <ThemeProvider
-      defaultButtonVariant="text-shift"
+      defaultButtonVariant="hover-bubble"
       defaultTextAnimation="entrance-slide"
-      borderRadius="soft"
+      borderRadius="pill"
-      contentWidth="medium"
+      contentWidth="mediumLarge"
-      sizing="largeSizeMediumTitles"
+      sizing="mediumLarge"
-      background="circleGradient"
+      background="none"
-      cardStyle="gradient-mesh"
+      cardStyle="solid"
-      primaryButtonStyle="radial-glow"
+      primaryButtonStyle="gradient"
-      secondaryButtonStyle="layered"
+      secondaryButtonStyle="glass"
-      headingFontWeight="medium"
+      headingFontWeight="semibold"
     >
       <div id="nav" data-section="nav">
-        <NavbarLayoutFloatingInline
+        <NavbarStyleApple
-          brandName="Medical Web Pro"
           navItems={[
-            { name: "Services", id: "services" },
+            { name: "Home", id: "/" },
-            { name: "Portfolio", id: "portfolio" },
             { name: "About", id: "about" },
-            { name: "Testimonials", id: "testimonials" },
+            { name: "Services", id: "services" },
+            { name: "Pricing", id: "pricing" },
+            { name: "Contact", id: "contact" }
           ]}
-          button={{ text: "Schedule a consultation", href: "contact" }}
+          brandName="Webbug"
-          animateOnLoad={true}
         />
       </div>
 
       <div id="hero" data-section="hero">
         <HeroCentered
-          title="HIPAA-Compliant Websites for Medical & Dental Practices"
-          description="Professional web design that builds patient trust and grows your practice. Secure, mobile-optimized websites designed to attract and convert new patients."
           background={{ variant: "plain" }}
           avatars={[
-            { src: "http://img.b2bpic.net/free-photo/handsome-black-man-posing-public-library_74855-1939.jpg?_wi=2", alt: "Medical professional 1" },
+            { src: "/placeholders/placeholder1.webp", alt: "User 1" },
-            { src: "http://img.b2bpic.net/free-photo/medium-shot-smiley-woman-posing_23-2148924772.jpg?_wi=2", alt: "Medical professional 2" },
+            { src: "/placeholders/placeholder1.webp", alt: "User 2" },
+            { src: "/placeholders/placeholder1.webp", alt: "User 3" }
           ]}
+          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: "Schedule a consultation", href: "contact" },
+            { text: "Get Started", href: "contact" },
-            { text: "View Case Studies", href: "portfolio" },
+            { text: "Learn More", href: "about" }
           ]}
-          buttonAnimation="slide-up"
         />
       </div>
 
       <div id="about" data-section="about">
-        <MediaAbout
+        <SplitAbout
-          title="Specialized Web Design for Healthcare Professionals"
+          title="Why Choose Webbug?"
-          description="We specialize in creating HIPAA-compliant websites for medical practices, dental offices, and healthcare providers. Our designs are built with patient privacy at the forefront, featuring secure patient portals, appointment booking systems, and mobile-friendly interfaces that inspire confidence and encourage patient engagement."
+          description="We specialize in creating professional websites for healthcare providers"
-          tag="About Medical Web Pro"
-          buttons={[{ text: "Learn More", href: "services" }]}
-          imageSrc="http://img.b2bpic.net/free-photo/medium-shot-people-working-together_23-2149145155.jpg"
-          imageAlt="Healthcare team collaborating"
-          useInvertedBackground={false}
-        />
-      </div>
-
-      <div id="services" data-section="services">
-        <FeatureCardTwentySeven
-          title="Our Services"
-          description="We help medical and dental practices establish a strong online presence with secure, compliant websites that attract and retain patients."
-          tag="Healthcare Solutions"
-          tagIcon={Zap}
-          tagAnimation="slide-up"
           textboxLayout="default"
           useInvertedBackground={false}
-          gridVariant="three-columns-all-equal-width"
+          bulletPoints={[
-          animationType="slide-up"
-          features={[
             {
-              id: "medical-websites",              title: "Medical Practice Websites",              description: "HIPAA-compliant websites designed to build patient trust, showcase expertise, and provide essential practice information and online appointment scheduling.",              imageSrc: "http://img.b2bpic.net/free-vector/business-landing-page-flat-design_23-2148257414.jpg",              imageAlt: "Professional medical website design"
+              title: "HIPAA Compliant",              description: "All websites meet HIPAA security standards",              icon: Lightbulb
             },
             {
-              id: "dental-websites",              title: "Dental Practice Websites",              description: "Patient-focused dental websites featuring before/after galleries, treatment information, online booking, and secure patient communication portals.",              imageSrc: "http://img.b2bpic.net/free-vector/flat-design-minimal-technology-landing-page_23-2149188470.jpg",              imageAlt: "Modern dental practice website"
+              title: "Patient Focused",              description: "Design optimized for patient experience",              icon: Target
             },
             {
-              id: "patient-portal",              title: "Patient Portal Integration",              description: "Secure, HIPAA-compliant patient portals for medical records access, appointment management, prescription requests, and secure provider communication.",              imageSrc: "http://img.b2bpic.net/free-vector/technology-landing-page-template-with-photo_52683-21230.jpg",              imageAlt: "Secure patient portal interface"
+              title: "SEO Optimized",              description: "Better visibility in search results",              icon: Zap
-            },
+            }
+          ]}
+          imageSrc="/placeholders/placeholder1.webp"
+          imageAlt="Medical practice team"
+          imagePosition="right"
+          mediaAnimation="none"
+          buttons={[
+            { text: "Schedule a Call", href: "contact" }
           ]}
         />
       </div>
 
-      <div id="portfolio" data-section="portfolio">
+      <div id="services" data-section="services">
-        <ProductCardOne
+        <FeatureCardTwentyFive
-          title="Case Studies"
+          features={[
-          description="Websites we've created for medical practices and dental offices to improve patient acquisition and engagement."
+            {
-          tag="Portfolio"
+              title: "Website Design",              description: "Custom websites tailored to your practice",              icon: Target,
-          tagIcon={Briefcase}
+              mediaItems: [
-          tagAnimation="slide-up"
+                { imageSrc: "/placeholders/placeholder1.webp", imageAlt: "Website design" },
+                { imageSrc: "/placeholders/placeholder1.webp", imageAlt: "Website design 2" }
+              ]
+            },
+            {
+              title: "Patient Portal",              description: "Secure patient communication platform",              icon: Lightbulb,
+              mediaItems: [
+                { imageSrc: "/placeholders/placeholder1.webp", imageAlt: "Patient portal" },
+                { imageSrc: "/placeholders/placeholder1.webp", imageAlt: "Patient portal 2" }
+              ]
+            },
+            {
+              title: "SEO Services",              description: "Improve your online visibility",              icon: Zap,
+              mediaItems: [
+                { imageSrc: "/placeholders/placeholder1.webp", imageAlt: "SEO services" },
+                { imageSrc: "/placeholders/placeholder1.webp", imageAlt: "SEO services 2" }
+              ]
+            },
+            {
+              title: "Maintenance",              description: "24/7 support and updates",              icon: Target,
+              mediaItems: [
+                { imageSrc: "/placeholders/placeholder1.webp", imageAlt: "Maintenance" },
+                { imageSrc: "/placeholders/placeholder1.webp", imageAlt: "Maintenance 2" }
+              ]
+            }
+          ]}
+          title="Our Services"
+          description="Comprehensive web solutions for healthcare providers"
           textboxLayout="default"
           useInvertedBackground={false}
-          gridVariant="three-columns-all-equal-width"
           animationType="slide-up"
-          products={[
+          buttons={[
+            { text: "View All Services", href: "contact" }
+          ]}
+        />
+      </div>
+
+      <div id="pricing" data-section="pricing">
+        <PricingCardNine
+          plans={[
             {
-              id: "1",              name: "Comprehensive Medical Group Website",              price: "View Case Study",              imageSrc: "http://img.b2bpic.net/free-vector/electrician-landing-page_23-2148716532.jpg",              imageAlt: "Medical group practice website"
+              id: "basic",              title: "Basic",              price: "$999",              period: "/month",              imageSrc: "/placeholders/placeholder1.webp",              imageAlt: "Basic plan",              button: { text: "Get Started", href: "contact" },
+              features: [
+                "Professional Website",                "Mobile Responsive",                "Basic SEO Setup",                "Email Support"
+              ]
             },
             {
-              id: "2",              name: "Multi-Specialty Dental Practice Website",              price: "View Case Study",              imageSrc: "http://img.b2bpic.net/free-vector/real-estate-business-landing-page-template_23-2149874298.jpg",              imageAlt: "Dental practice website portfolio"
+              id: "professional",              title: "Professional",              price: "$1,999",              period: "/month",              imageSrc: "/placeholders/placeholder1.webp",              imageAlt: "Professional plan",              button: { text: "Get Started", href: "contact" },
+              features: [
+                "All Basic Features",                "Patient Portal",                "Advanced SEO",                "Priority Support",                "Monthly Analytics"
+              ]
             },
             {
-              id: "3",              name: "Orthopedic Surgery Center Website",              price: "View Case Study",              imageSrc: "http://img.b2bpic.net/free-vector/laundry-service-vertical-web-page-set-with-prices-contacts-symbols_1284-9614.jpg",              imageAlt: "Surgery center website"
+              id: "enterprise",              title: "Enterprise",              price: "Custom",              period: "/month",              imageSrc: "/placeholders/placeholder1.webp",              imageAlt: "Enterprise plan",              button: { text: "Schedule Call", href: "contact" },
-            },
+              features: [
+                "All Professional Features",                "Custom Integrations",                "24/7 Support",                "Dedicated Account Manager",                "Advanced Analytics"
+              ]
+            }
+          ]}
+          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
-          title="Our Healthcare Impact"
+          metrics={[
-          description="Proven results for medical and dental practices."
+            { id: "1", value: "100+", description: "Medical Practices Served" },
-          tag="Key Metrics"
+            { id: "2", value: "98%", description: "Client Satisfaction" },
-          tagIcon={TrendingUp}
+            { id: "3", value: "50K+", description: "Patient Appointments Booked" },
-          tagAnimation="slide-up"
+            { 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}
-          gridVariant="uniform-all-items-equal"
           animationType="slide-up"
-          metrics={[
-            { id: "1", value: "200+", description: "Healthcare Websites Created" },
-            { id: "2", value: "4x", description: "Average New Patient Increase" },
-            { id: "3", value: "99%", description: "Client Satisfaction Rate" },
-            { id: "4", value: "100K+", description: "New Patients Attracted" },
-          ]}
         />
       </div>
 
-      <div id="testimonials" data-section="testimonials">
+      <div id="team" data-section="team">
-        <TestimonialCardThirteen
+        <TeamCardOne
-          title="What Healthcare Professionals Say"
+          members={[
-          description="Hear from medical and dental practice owners who've transformed their patient acquisition and online presence."
+            {
-          tag="Testimonials"
+              id: "1",              name: "Sarah Johnson",              role: "Lead Designer",              imageSrc: "/placeholders/placeholder1.webp",              imageAlt: "Sarah Johnson"
-          tagIcon={Quote}
+            },
-          tagAnimation="slide-up"
+            {
+              id: "2",              name: "Michael Chen",              role: "Founder & CEO",              imageSrc: "/placeholders/placeholder1.webp",              imageAlt: "Michael Chen"
+            },
+            {
+              id: "3",              name: "Emily Rodriguez",              role: "Patient Experience Lead",              imageSrc: "/placeholders/placeholder1.webp",              imageAlt: "Emily Rodriguez"
+            },
+            {
+              id: "4",              name: "David Park",              role: "Technical Director",              imageSrc: "/placeholders/placeholder1.webp",              imageAlt: "David Park"
+            }
+          ]}
+          title="Meet Our Team"
+          description="Experts dedicated to your success"
           textboxLayout="default"
           useInvertedBackground={false}
-          showRating={true}
+          gridVariant="four-items-2x2-equal-grid"
           animationType="slide-up"
-          testimonials={[
+        />
+      </div>
+
+      <div id="faq" data-section="faq">
+        <FaqSplitMedia
+          faqs={[
             {
-              id: "1",              name: "Dr. Robert Garcia",              handle: "Cardiologist, Garcia Heart Center",              testimonial: "Medical Web Pro created a professional, patient-friendly website that has significantly increased our new patient inquiries. The HIPAA compliance and secure patient portal features were exactly what we needed. Highly recommend for any medical practice.",              rating: 5,
+              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."
-              imageSrc: "http://img.b2bpic.net/free-photo/handsome-black-man-posing-public-library_74855-1939.jpg?_wi=2",              imageAlt: "Dr. Robert Garcia"
             },
             {
-              id: "2",              name: "Dr. Linda Chen, DDS",              handle: "Owner, Premier Dental Associates",              testimonial: "We needed a modern dental website that showcased our services and made it easy for patients to book appointments. Medical Web Pro delivered exactly that. Our patient inquiries have tripled, and the online booking system has reduced our administrative burden.",              rating: 5,
+              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."
-              imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-smiley-woman-posing_23-2148924772.jpg?_wi=2",              imageAlt: "Dr. Linda Chen"
             },
             {
-              id: "3",              name: "Dr. Michael Thompson, MD",              handle: "Orthopedic Surgeon, Thompson Sports Medicine",              testimonial: "The team understood the healthcare industry and created a website that builds patient confidence. The secure patient portal and appointment scheduling system are top-notch. Our practice has grown significantly since launching the new site.",              rating: 5,
+              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."
-              imageSrc: "http://img.b2bpic.net/free-photo/elegant-businessman-with-document_1098-294.jpg?_wi=2",              imageAlt: "Dr. Michael Thompson"
             },
             {
-              id: "4",              name: "Dr. Jennifer Martinez, DDS",              handle: "Pediatric Dentistry, Martinez Smiles",              testimonial: "Medical Web Pro created a warm, welcoming website for our pediatric practice. Parents love the patient education content, and the online appointment booking has been a game-changer. We're seeing more new families every month.",              rating: 5,
+              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: "http://img.b2bpic.net/free-photo/friendly-successful-business-woman-posing-with-arms-crossed_74855-2813.jpg",              imageAlt: "Dr. Jennifer Martinez"
+            }
-            },
+          ]}
+          imageSrc="/placeholders/placeholder1.webp"
+          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">
-        <ContactSplitForm
+        <ContactFaq
-          title="Ready to Grow Your Medical or Dental Practice?"
+          faqs={[
-          description="Let's discuss how a professional, HIPAA-compliant website can help you attract more patients and strengthen your practice's online presence."
+            {
-          useInvertedBackground={false}
+              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."
-          inputs={[
+            },
-            { name: "name", type: "text", placeholder: "Your Name", required: true },
+            {
-            { name: "email", type: "email", placeholder: "Your Email", required: true },
+              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."
-            { name: "practice", type: "text", placeholder: "Practice Name", required: true },
+            },
-            { name: "specialty", type: "text", placeholder: "Medical Specialty or Dental Service", required: true },
+            {
+              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."
+            }
           ]}
-          textarea={{
+          ctaTitle="Schedule Your Free Consultation"
-            name: "message",            placeholder: "Tell us about your practice and your goals for your online presence...",            rows: 5,
+          ctaDescription="Let's discuss how we can help your practice grow online"
-            required: true,
+          ctaButton={{ text: "Book a Call", href: "https://calendly.com" }}
-          }}
+          ctaIcon={Phone}
-          imageSrc="http://img.b2bpic.net/free-photo/business-leader-professional-office-strategizing-development-success_482257-124038.jpg"
+          useInvertedBackground={false}
-          imageAlt="Healthcare professionals collaborating"
+          animationType="slide-up"
-          mediaAnimation="blur-reveal"
-          mediaPosition="right"
-          buttonText="Schedule Your Consultation"
         />
       </div>
 
-      <div id="footer" data-section="footer">
+      <FooterBaseCard
-        <FooterCard
+        logoText="Webbug"
-          logoText="Medical Web Pro"
+        columns={[
-          copyrightText="© 2025 Medical Web Pro. All rights reserved. HIPAA-Compliant Healthcare Web Design."
+          {
-          socialLinks={[
+            title: "Product",            items: [
-            {
+              { label: "Website Design", href: "services" },
-              icon: Facebook,
+              { label: "Patient Portal", href: "services" },
-              href: "https://facebook.com/medicalwebpro",              ariaLabel: "Facebook"
+              { label: "SEO Services", href: "services" },
-            },
+              { label: "Pricing", href: "pricing" }
-          ]}
+            ]
-        />
+          },
-      </div>
+          {
+            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>
   );
 }