Update src/app/page.tsx

Merge version_5 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="Webbug"
           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: "Book a free meeting", href: "contact" }}
+          brandName="Webbug"
-          animateOnLoad={true}
         />
       </div>
 
       <div id="hero" data-section="hero">
         <HeroCentered
-          title="Websites That Turn Visitors Into Customers"
-          description="Professional web design for local service businesses. We create fast, modern websites designed to generate leads and drive conversions."
           background={{ variant: "plain" }}
           avatars={[
-            { src: "http://img.b2bpic.net/free-photo/handsome-black-man-posing-public-library_74855-1939.jpg?_wi=2", alt: "Team member 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: "Team member 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: "Book a free meeting", href: "contact" },
+            { text: "Get Started", href: "contact" },
-            { text: "View Our Work", href: "portfolio" },
+            { text: "Learn More", href: "about" }
           ]}
-          buttonAnimation="slide-up"
         />
       </div>
 
       <div id="about" data-section="about">
-        <MediaAbout
+        <SplitAbout
-          title="Modern Web Design for Local Services"
+          title="Why Choose Webbug?"
-          description="We specialize in creating professional websites for service-based businesses. Our designs are fast, mobile-friendly, and optimized to convert visitors into paying customers. With years of experience in the service industry, we understand your business and what your customers need."
+          description="We specialize in creating professional websites for healthcare providers"
-          tag="About Webbug"
-          buttons={[{ text: "Learn More", href: "services" }]}
-          imageSrc="http://img.b2bpic.net/free-photo/medium-shot-people-working-together_23-2149145155.jpg"
-          imageAlt="Webbug creative team collaborating"
-          useInvertedBackground={false}
-        />
-      </div>
-
-      <div id="services" data-section="services">
-        <FeatureCardTwentySeven
-          title="Our Services"
-          description="We help local businesses grow online with fast, modern websites designed to generate leads."
-          tag="What We Offer"
-          tagIcon={Zap}
-          tagAnimation="slide-up"
           textboxLayout="default"
           useInvertedBackground={false}
-          gridVariant="three-columns-all-equal-width"
+          bulletPoints={[
-          animationType="slide-up"
-          features={[
             {
-              id: "business-websites",              title: "Business Websites",              description: "Professional websites designed to build trust and generate calls and form submissions.",              imageSrc: "http://img.b2bpic.net/free-vector/business-landing-page-flat-design_23-2148257414.jpg",              imageAlt: "Professional business website design"
+              title: "HIPAA Compliant",              description: "All websites meet HIPAA security standards",              icon: Lightbulb
             },
             {
-              id: "landing-pages",              title: "Landing Pages",              description: "High-converting landing pages built specifically for ads and marketing campaigns.",              imageSrc: "http://img.b2bpic.net/free-vector/flat-design-minimal-technology-landing-page_23-2149188470.jpg",              imageAlt: "High-converting landing page design"
+              title: "Patient Focused",              description: "Design optimized for patient experience",              icon: Target
             },
             {
-              id: "website-redesign",              title: "Website Redesign",              description: "We transform outdated websites into modern, fast, mobile-friendly experiences.",              imageSrc: "http://img.b2bpic.net/free-vector/technology-landing-page-template-with-photo_52683-21230.jpg",              imageAlt: "Website redesign mockup"
+              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="Recent Projects"
+          features={[
-          description="Websites we've created for local service businesses."
+            {
-          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: "Local Plumbing Website",              price: "View Case Study",              imageSrc: "http://img.b2bpic.net/free-vector/electrician-landing-page_23-2148716532.jpg",              imageAlt: "Professional plumbing company 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: "Construction Company Website",              price: "View Case Study",              imageSrc: "http://img.b2bpic.net/free-vector/real-estate-business-landing-page-template_23-2149874298.jpg",              imageAlt: "Construction company 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: "Cleaning Service 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: "Professional cleaning service 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
+          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="Proven results for local service businesses."
+          description="Delivering results for healthcare providers"
-          tag="Key Metrics"
+          gridVariant="uniform-all-items-equal"
-          tagIcon={TrendingUp}
-          tagAnimation="slide-up"
           textboxLayout="default"
           useInvertedBackground={false}
-          gridVariant="uniform-all-items-equal"
           animationType="slide-up"
-          metrics={[
-            { id: "1", value: "150+", description: "Websites Created" },
-            { id: "2", value: "3x", description: "Average Lead Increase" },
-            { id: "3", value: "98%", description: "Client Satisfaction" },
-            { id: "4", value: "50K+", description: "Leads Generated for Clients" },
-          ]}
         />
       </div>
 
-      <div id="testimonials" data-section="testimonials">
+      <div id="team" data-section="team">
-        <TestimonialCardThirteen
+        <TeamCardOne
-          title="What Our Clients Say"
+          members={[
-          description="Hear from service business owners who've transformed their 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: "Mike Rodriguez",              handle: "Owner, Rodriguez Plumbing",              testimonial: "Webbug transformed our online presence. Within 3 months, we were getting 3x more lead inquiries through our website. Professional team, great communication, and results that exceeded expectations.",              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: "Mike Rodriguez"
             },
             {
-              id: "2",              name: "Sarah Chen",              handle: "CEO, BuildRight Construction",              testimonial: "We were looking for a web design company that understood the construction industry. Webbug nailed it. The website looks fantastic and has significantly increased our customer inquiries.",              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: "Sarah Chen"
             },
             {
-              id: "3",              name: "David Thompson",              handle: "Manager, Clean Sweep Services",              testimonial: "Our new website is beautiful, easy to navigate, and actually brings in customers. The team was responsive, professional, and delivered on time. Highly recommend Webbug!",              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: "David Thompson"
             },
             {
-              id: "4",              name: "Jennifer Martinez",              handle: "Owner, Martinez HVAC",              testimonial: "Best decision we made for our business. Webbug took the time to understand our services and created a website that converts. Our phone has been ringing non-stop!",              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: "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="Need a Website That Brings You Customers?"
+          faqs={[
-          description="Let's discuss your project and create a website that drives real results for your business."
+            {
-          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: "business", type: "text", placeholder: "Business Name", required: true },
+            },
-            { name: "phone", type: "tel", placeholder: "Phone Number", 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 project and business goals...",            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="Professional team working on project"
+          animationType="slide-up"
-          mediaAnimation="blur-reveal"
-          mediaPosition="right"
-          buttonText="Start Your Project"
         />
       </div>
 
-      <div id="footer" data-section="footer">
+      <FooterBaseCard
-        <FooterCard
+        logoText="Webbug"
-          logoText="Webbug"
+        columns={[
-          copyrightText="© 2025 Webbug. All rights reserved."
+          {
-          socialLinks={[
+            title: "Product",            items: [
-            {
+              { label: "Website Design", href: "services" },
-              icon: Facebook,
+              { label: "Patient Portal", href: "services" },
-              href: "https://facebook.com/webbugnow",              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>
   );
-}
+}

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #fcf6ec;
+  --background: #f5faff;
-  --card: #f3ede2;
+  --card: #f1f8ff;
-  --foreground: #2e2521;
+  --foreground: #001122;
-  --primary-cta: #2e2521;
+  --primary-cta: #15479c;
-  --primary-cta-text: #fcf6ec;
+  --primary-cta-text: #f5faff;
   --secondary-cta: #ffffff;
-  --secondary-cta-text: #2e2521;
+  --secondary-cta-text: #001122;
-  --accent: #b2a28b;
+  --accent: #a8cce8;
-  --background-accent: #b2a28b;
+  --background-accent: #7ba3cf;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);