Merge version_6 into main #17
329
src/app/page.tsx
329
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>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user