Merge version_15_1778849769285 into main

Merge version_15_1778849769285 into main

src/components/Layout.tsx

@@ -34,6 +34,10 @@ export default function Layout() {
   {
     "name": "Products",
     "href": "#products"
+  },
+  {
+    "name": "Pricing",
+    "href": "/pricing"
   }
 ];
 

src/components/sections/about/AboutFeaturesSplit.tsx

@@ -54,7 +54,7 @@ const AboutFeaturesSplit = ({
         </div>
 
         <div className="flex flex-col md:flex-row md:items-stretch gap-5">
-          <div className="flex flex-col justify-center gap-3 xl:gap-4 2xl:gap-5 p-3 xl:p-4 2xl:p-5 w-full md:w-4/10 2xl:w-3/10 card rounded">
+          <div className="flex flex-col justify-center gap-3 xl:gap-4 2xl:gap-5 p-3 xl:p-4 2xl:p-5 w-full md:w-4/10 2xl:w-3/10 card rounded bg-background/60 backdrop-blur-md">
             {items.map((item, index) => {
               const ItemIcon = resolveIcon(item.icon);
               return (
@@ -74,7 +74,7 @@ const AboutFeaturesSplit = ({
             })}
           </div>
 
-          <div className="p-3 xl:p-4 2xl:p-5 w-full md:w-6/10 2xl:w-7/10 h-80 md:h-auto card rounded overflow-hidden">
+          <div className="p-3 xl:p-4 2xl:p-5 w-full md:w-6/10 2xl:w-7/10 h-80 md:h-auto card rounded overflow-hidden bg-background/60 backdrop-blur-md">
             <div className="relative size-full">
               <ImageOrVideo imageSrc={imageSrc} videoSrc={videoSrc} className="absolute inset-0 object-cover rounded" />
             </div>

src/components/sections/contact/ContactCta.tsx

@@ -16,7 +16,7 @@ const ContactCta = ({
   return (
     <section aria-label="Contact section" className="py-20">
       <div className="w-content-width mx-auto">
-        <ScrollReveal variant="fade" className="flex items-center justify-center py-20 px-5 md:px-10 card rounded">
+        <ScrollReveal variant="fade" className="flex items-center justify-center py-20 px-5 md:px-10 card rounded bg-background/60 backdrop-blur-md">
           <div className="w-full md:w-3/4 flex flex-col items-center gap-3">
             <span className="card rounded px-3 py-1 text-sm">{tag}</span>
 

src/components/sections/faq/FaqSplitMedia.tsx

@@ -74,6 +74,9 @@ const FaqSplitMedia = ({
               videoSrc={videoSrc}
               className="absolute inset-0 size-full object-cover"
             />
+            <span className="absolute top-3 left-3 px-2 py-1 text-xs font-semibold text-primary-cta-text bg-primary-cta/60 backdrop-blur-md rounded-full">
+              Active Now
+            </span>
           </ScrollReveal>
 
           <ScrollReveal variant="slide-up" delay={0.1} className="md:col-span-3 flex flex-col gap-3">
@@ -81,10 +84,15 @@ const FaqSplitMedia = ({
               <div
                 key={index}
                 onClick={() => handleToggle(index)}
-                className="p-3 2xl:p-4 rounded secondary-button cursor-pointer select-none"
+                className="p-3 2xl:p-4 rounded secondary-button cursor-pointer select-none bg-background/60 backdrop-blur-md"
               >
                 <div className="flex items-center justify-between gap-3">
                   <h3 className="text-base md:text-lg font-medium leading-tight">{item.question}</h3>
+                  {activeIndex === index && (
+                    <span className="ml-2 px-2 py-1 text-xs font-semibold text-primary-cta-text bg-primary-cta rounded-full">
+                      Active Now
+                    </span>
+                  )}
                   <div className="flex shrink-0 items-center justify-center size-7 md:size-8 rounded primary-button">
                     <Plus
                       className={cls(

src/components/sections/features/FeaturesBento.tsx

@@ -84,7 +84,7 @@ const FeaturesBento = ({
       <ScrollReveal variant="fade-blur">
         <GridOrCarousel>
           {features.map((feature) => (
-            <div key={feature.title} className="flex flex-col gap-3 xl:gap-4 2xl:gap-5 p-3 xl:p-4 2xl:p-5 card rounded h-full">
+            <div key={feature.title} className="flex flex-col gap-3 xl:gap-4 2xl:gap-5 p-3 xl:p-4 2xl:p-5 card rounded h-full bg-background/60 backdrop-blur-md">
               <div className="relative h-72 overflow-hidden">{getBentoComponent(feature)}</div>
               <div className="flex flex-col gap-1">
                 <h3 className="text-2xl font-medium leading-tight">{feature.title}</h3>

src/components/sections/metrics/MetricsMediaCards.tsx

@@ -68,7 +68,7 @@ const MetricsMediaCards = ({
               className={cls("grid grid-cols-2 gap-5", shouldSpanFull && "md:col-span-2")}
             >
               <div className={cls(
-                "flex flex-col justify-between gap-3 xl:gap-4 2xl:gap-5 p-3 xl:p-4 2xl:p-5 card rounded",
+                "flex flex-col justify-between gap-3 xl:gap-4 2xl:gap-5 p-3 xl:p-4 2xl:p-5 card rounded bg-background/60 backdrop-blur-md",
                 shouldSpanFull ? "aspect-square md:aspect-video" : "aspect-square",
                 isEven && "order-2 md:order-1"
               )}>

src/components/sections/product/ProductRatingCards.tsx

@@ -96,7 +96,7 @@ const ProductRatingCards = ({
               <button
                 key={product.name}
                 onClick={product.onClick}
-                className="group h-full flex flex-col gap-3 xl:gap-4 2xl:gap-5 p-3 xl:p-4 2xl:p-5 text-left card rounded cursor-pointer"
+                className="group h-full flex flex-col gap-3 xl:gap-4 2xl:gap-5 p-3 xl:p-4 2xl:p-5 text-left card rounded cursor-pointer bg-background/60 backdrop-blur-md"
               >
                 <div className="aspect-square rounded overflow-hidden">
                   <ImageOrVideo imageSrc={product.imageSrc} />

src/components/sections/testimonial/TestimonialMetricsCards.tsx

@@ -72,7 +72,7 @@ const TestimonialMetricsCards = ({
                 <div key={testimonial.name} className="relative aspect-3/4 rounded overflow-hidden">
                   <ImageOrVideo imageSrc={testimonial.imageSrc} videoSrc={testimonial.videoSrc} />
 
-                  <div className="absolute inset-x-5 bottom-5 flex flex-col gap-2 p-3 xl:p-4 2xl:p-5 card rounded backdrop-blur-sm">
+                  <div className="absolute inset-x-5 bottom-5 flex flex-col gap-2 p-3 xl:p-4 2xl:p-5 card rounded bg-background/60 backdrop-blur-md">
                     <div className="flex gap-1 mb-1">
                       {Array.from({ length: 5 }).map((_, index) => (
                         <Star
@@ -95,7 +95,7 @@ const TestimonialMetricsCards = ({
             </GridOrCarousel>
           </ScrollReveal>
 
-          <ScrollReveal variant="fade-blur" className="flex flex-col md:flex-row items-center justify-between w-content-width mx-auto p-8 md:py-16 card rounded">
+          <ScrollReveal variant="fade-blur" className="flex flex-col md:flex-row items-center justify-between w-content-width mx-auto p-8 md:py-16 card rounded bg-background/60 backdrop-blur-md">
             {metrics.map((metric, index) => (
               <div key={metric.label} className="flex flex-col md:flex-row items-center w-full md:flex-1">
                 <div className={cls("flex flex-col items-center flex-1 gap-1 text-center md:py-0", index === 0 ? "pb-5" : index === 2 ? "pt-5" : "py-5")}>

src/components/ui/NavbarInline.tsx

@@ -18,7 +18,7 @@ const handleNavClick = (e: React.MouseEvent<HTMLAnchorElement>, href: string, on
 const NavbarInline = ({ logo, navItems, ctaButton }: NavbarInlineProps) => {
   return (
     <nav className="fixed z-1000 top-5 left-1/2 -translate-x-1/2 w-content-width">
-      <div className="flex items-center justify-between p-2 xl:p-3 2xl:p-4 rounded backdrop-blur-sm card">
+      <div className="flex items-center justify-between p-2 xl:p-3 2xl:p-4 rounded bg-background/60 backdrop-blur-md rounded-theme">
         <a href="/" className="pl-2 text-xl font-medium text-foreground">{logo}</a>
 
         <div className="hidden md:flex absolute left-1/2 -translate-x-1/2 items-center gap-6">

src/index.css

@@ -169,7 +169,13 @@ h6 {
   /* WEBILD_PRIMARY_BUTTON */
   /* @primaryButtons/metallic */
   background: linear-gradient(135deg, color-mix(in srgb, var(--color-primary-cta) 80%, var(--color-foreground)) 0%, var(--color-primary-cta) 25%, color-mix(in srgb, var(--color-primary-cta) 90%, var(--color-background)) 50%, var(--color-primary-cta) 75%, color-mix(in srgb, var(--color-primary-cta) 85%, var(--color-foreground)) 100%);
-  box-shadow: inset 0 1px 0 0 color-mix(in srgb, var(--color-foreground) 30%, transparent), 0 3px 8px -2px color-mix(in srgb, var(--color-background) 50%, transparent);
+  box-shadow: inset 0 -2px 0 0 color-mix(in srgb, var(--color-foreground) 30%, transparent), inset 0 2px 0 0 color-mix(in srgb, var(--color-background) 50%, transparent), 0 6px 16px -4px color-mix(in srgb, var(--color-background) 50%, transparent);
+  transition: all 0.2s ease-in-out;
+}
+
+.primary-button:hover {
+  transform: translateY(-2px);
+  box-shadow: inset 0 -2px 0 0 color-mix(in srgb, var(--color-foreground) 30%, transparent), inset 0 2px 0 0 color-mix(in srgb, var(--color-background) 50%, transparent), 0 8px 20px -4px color-mix(in srgb, var(--color-background) 50%, transparent);
 }
 
 .secondary-button {
@@ -183,6 +189,16 @@ h6 {
     linear-gradient(color-mix(in srgb, var(--color-secondary-cta) 60%, transparent), color-mix(in srgb, var(--color-secondary-cta) 60%, transparent)),
     var(--color-secondary-cta);
   box-shadow:
-    2.10837px 3.16256px 9.48767px color-mix(in srgb, var(--color-accent) 10%, transparent);
-  border: 1px solid var(--color-secondary-cta);
+    inset 0 -2px 0 0 color-mix(in srgb, var(--color-secondary-cta) 60%, transparent),
+    inset 0 2px 0 0 color-mix(in srgb, var(--color-background) 50%, transparent),
+    0 6px 16px -4px color-mix(in srgb, var(--color-accent) 10%, transparent);
+  transition: all 0.2s ease-in-out;
+}
+
+.secondary-button:hover {
+  transform: translateY(-2px);
+  box-shadow:
+    inset 0 -2px 0 0 color-mix(in srgb, var(--color-secondary-cta) 60%, transparent),
+    inset 0 2px 0 0 color-mix(in srgb, var(--color-background) 50%, transparent),
+    0 8px 20px -4px color-mix(in srgb, var(--color-accent) 10%, transparent);
 }

src/pages/HomePage.tsx

@@ -1,9 +1,9 @@
-import AboutMediaOverlay from '@/components/sections/about/AboutMediaOverlay';
+import AboutTestimonial from '@/components/sections/about/AboutTestimonial';
 import ContactCta from '@/components/sections/contact/ContactCta';
 import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
-import FeaturesBento from '@/components/sections/features/FeaturesBento';
-import HeroOverlay from '@/components/sections/hero/HeroOverlay';
-import MetricsMinimalCards from '@/components/sections/metrics/MetricsMinimalCards';
+import FeaturesMediaCarousel from '@/components/sections/features/FeaturesMediaCarousel';
+import HeroBillboardCarousel from '@/components/sections/hero/HeroBillboardCarousel';
+import MetricsMediaCards from '@/components/sections/metrics/MetricsMediaCards';
 import ProductRatingCards from '@/components/sections/product/ProductRatingCards';
 import TestimonialMetricsCards from '@/components/sections/testimonial/TestimonialMetricsCards';
 
@@ -14,7 +14,7 @@ export default function HomePage() {
     <>
   <div id="home" data-section="home">
     <SectionErrorBoundary name="home">
-          <HeroOverlay
+          <HeroBillboardCarousel
       tag="Your Comfort, Our Priority"
       title="Expert HVAC Solutions for a Perfect Climate"
       description="Keeping your home or business comfortable year-round with reliable heating, cooling, and air quality services. Trust ArcticFlow HVAC for exceptional service and lasting comfort."
@@ -22,77 +22,56 @@ export default function HomePage() {
         text: "Schedule Service",        href: "#contact"}}
       secondaryButton={{
         text: "Explore Services",        href: "#services"}}
-      imageSrc="http://img.b2bpic.net/free-photo/trans-couple-sharing-tender-moments_23-2149445736.jpg"
-      avatars={[
-        {
-          src: "http://img.b2bpic.net/free-photo/handsome-hipster-with-dreads-has-pleasant-smile-has-white-teeth-happy-hear-good-news-wears-bright-clothes_273609-33580.jpg"},
-        {
-          src: "http://img.b2bpic.net/free-photo/beautiful-woman-cafe_273609-12688.jpg"},
-        {
-          src: "http://img.b2bpic.net/free-photo/portrait-young-female-with-glasses_23-2148415937.jpg"},
-        {
-          src: "http://img.b2bpic.net/free-photo/front-view-smiley-man-relaxing-home_23-2150307056.jpg"},
-        {
-          src: "http://img.b2bpic.net/free-photo/young-hispanic-man-smiling-confident-standing-park_839833-33955.jpg"},
+      items={[
+        { imageSrc: "http://img.b2bpic.net/free-photo/trans-couple-sharing-tender-moments_23-2149445736.jpg" },
+        { imageSrc: "http://img.b2bpic.net/free-photo/technician-looking-refrigerant-leaks_482257-85108.jpg?_wi=1" },
+        { imageSrc: "http://img.b2bpic.net/free-photo/3d-rendering-ventilation-system_23-2149281317.jpg?_wi=1" },
+        { imageSrc: "http://img.b2bpic.net/free-photo/close-up-man-s-hand-touching-vintage-machine_23-2148180331.jpg?_wi=1" },
+        { imageSrc: "http://img.b2bpic.net/free-photo/closeup-digital-thermometer_53876-42015.jpg?_wi=1" },
       ]}
-      avatarsLabel="Trusted by 5,000+ happy customers"
     />
     </SectionErrorBoundary>
   </div>
 
   <div id="about" data-section="about">
     <SectionErrorBoundary name="about">
-          <AboutMediaOverlay
-      tag="Who We Are"
-      title="Dedicated to Your Indoor Comfort"
-      description="With over 20 years of experience, ArcticFlow HVAC is committed to providing top-tier heating, ventilation, and air conditioning services. Our certified technicians use the latest technology to ensure your systems run efficiently and reliably. We pride ourselves on transparent pricing, quality workmanship, and exceptional customer service."
-      imageSrc="http://img.b2bpic.net/free-photo/technician-looking-refrigerant-leaks_482257-85108.jpg"
+          <AboutTestimonial
+      tag="Our Commitment"
+      quote="ArcticFlow HVAC provided exceptional service. Their team was professional, efficient, and resolved our AC issue quickly. Highly recommend!"
+      author="Jane Doe"
+      role="Satisfied Customer"
+      imageSrc="http://img.b2bpic.net/free-photo/technician-looking-refrigerant-leaks_482257-85108.jpg?_wi=2"
     />
     </SectionErrorBoundary>
   </div>
 
   <div id="services" data-section="services">
     <SectionErrorBoundary name="services">
-          <FeaturesBento
+          <FeaturesMediaCarousel
       tag="Our Services"
-      title="Comprehensive HVAC Solutions"
-      description="From routine maintenance to complex installations, ArcticFlow offers a full spectrum of services to meet all your climate control needs."
-      features={[
+      title="Visual Services Showcase"
+      description="Explore our services through a collection of high-quality images."
+      items={[
         {
-          title: "Heating Services",          description: "Expert installation, repair, and maintenance for furnaces, heat pumps, and boilers to keep you warm all winter.",          bentoComponent: "info-card-marquee",          infoCards: [
-            {
-              icon: "Flame",              label: "Furnace Repair",              value: "Fast & Efficient"},
-            {
-              icon: "Thermometer",              label: "Heat Pump Install",              value: "Energy Savings"},
-            {
-              icon: "Cog",              label: "Boiler Service",              value: "Reliable Heat"},
-          ]
+          imageSrc: "http://img.b2bpic.net/free-photo/technician-looking-refrigerant-leaks_482257-85108.jpg",
+          title: "Heating System Repair",
+          description: "Expert repair for all heating systems."
         },
         {
-          title: "Cooling Systems",          description: "Stay cool with our reliable AC installation, repair, and preventative maintenance for optimal performance.",          bentoComponent: "tilted-stack-cards",          stackCards: [
-            {
-              icon: "AirVent",              title: "AC Tune-ups",              subtitle: "Maximize Efficiency",              detail: "Preventative care"},
-            {
-              icon: "CloudLightning",              title: "Emergency AC",              subtitle: "24/7 Response",              detail: "Rapid Repairs"},
-            {
-              icon: "Fan",              title: "New AC Install",              subtitle: "Top Brands",              detail: "Seamless Setup"},
-          ]
+          imageSrc: "http://img.b2bpic.net/free-photo/3d-rendering-ventilation-system_23-2149281317.jpg",
+          title: "AC Installation",
+          description: "Professional installation of new AC units."
         },
         {
-          title: "Air Quality Solutions",          description: "Improve your indoor air with purifiers, humidifiers, and ventilation systems for a healthier environment.",          bentoComponent: "orbiting-icons",          centerIcon: "Cloud",          orbitIcons: [
-            "AirVent",            "Filter",            "Droplet"]
+          imageSrc: "http://img.b2bpic.net/free-photo/close-up-man-s-hand-touching-vintage-machine_23-2148180331.jpg",
+          title: "Preventative Maintenance",
+          description: "Regular maintenance to ensure optimal performance."
         },
         {
-          title: "Emergency Repairs",          description: "Available 24/7 for urgent heating and cooling system breakdowns when you need us most.",          bentoComponent: "checklist-timeline",          heading: "Rapid Response",          subheading: "HVAC Emergency",          checklistItems: [
-            {
-              label: "Call Us 24/7",              detail: "Immediate Dispatch"},
-            {
-              label: "Expert Diagnosis",              detail: "On-Site Solutions"},
-            {
-              label: "Guaranteed Fix",              detail: "Lasting Comfort Restored"},
-          ],
-          completedLabel: "Service Restored"
-        },
+          imageSrc: "http://img.b2bpic.net/free-photo/closeup-digital-thermometer_53876-42015.jpg",
+          title: "Air Quality Solutions",
+          description: "Improve your indoor air quality."
+        }
       ]}
     />
     </SectionErrorBoundary>
@@ -107,13 +86,13 @@ export default function HomePage() {
       products={[
         {
           brand: "ClimateTech",          name: "EcoCool 5000 BTU AC",          price: "$2,200",          rating: 5,
-          reviewCount: "120 reviews",          imageSrc: "http://img.b2bpic.net/free-photo/3d-rendering-ventilation-system_23-2149281317.jpg"},
+          reviewCount: "120 reviews",          imageSrc: "http://img.b2bpic.net/free-photo/3d-rendering-ventilation-system_23-2149281317.jpg?_wi=2"},
         {
           brand: "WarmFlow",          name: "SmartHeat Gas Furnace",          price: "$3,500",          rating: 4.8,
-          reviewCount: "95 reviews",          imageSrc: "http://img.b2bpic.net/free-photo/close-up-man-s-hand-touching-vintage-machine_23-2148180331.jpg"},
+          reviewCount: "95 reviews",          imageSrc: "http://img.b2bpic.net/free-photo/close-up-man-s-hand-touching-vintage-machine_23-2148180331.jpg?_wi=2"},
         {
           brand: "Nest",          name: "Learning Thermostat",          price: "$249",          rating: 4.9,
-          reviewCount: "210 reviews",          imageSrc: "http://img.b2bpic.net/free-photo/closeup-digital-thermometer_53876-42015.jpg"},
+          reviewCount: "210 reviews",          imageSrc: "http://img.b2bpic.net/free-photo/closeup-digital-thermometer_53876-42015.jpg?_wi=2"},
         {
           brand: "QuietComfort",          name: "Mini-Split System",          price: "$1,800",          rating: 4.7,
           reviewCount: "75 reviews",          imageSrc: "http://img.b2bpic.net/free-photo/close-up-ventilation-system_23-2149388991.jpg"},
@@ -130,16 +109,35 @@ export default function HomePage() {
 
   <div id="metrics" data-section="metrics">
     <SectionErrorBoundary name="metrics">
-          <MetricsMinimalCards
+          <MetricsMediaCards
       tag="Our Impact"
       title="A Legacy of Trust & Excellence"
+      description="We're proud of our journey and the milestones we've achieved in providing top-notch HVAC services."
       metrics={[
         {
-          value: "20+",          description: "Years of Experience"},
+          value: "20+",
+          title: "Years of Experience",
+          description: "Serving our community with reliable heating and cooling solutions.",
+          imageSrc: "http://img.b2bpic.net/free-photo/young-male-engineer-working-air-conditioner_1303-26756.jpg"
+        },
         {
-          value: "5,000+",          description: "Happy Customers"},
+          value: "5,000+",
+          title: "Happy Customers",
+          description: "Thousands of satisfied homeowners and businesses trust us with their comfort.",
+          imageSrc: "http://img.b2bpic.net/free-photo/happy-family-new-house_23-2148924040.jpg"
+        },
         {
-          value: "24/7",          description: "Emergency Service"},
+          value: "24/7",
+          title: "Emergency Service",
+          description: "Always available to provide rapid response for urgent HVAC needs.",
+          imageSrc: "http://img.b2bpic.net/free-photo/man-working-air-conditioner_1303-26757.jpg"
+        },
+        {
+          value: "100%",
+          title: "Satisfaction Guaranteed",
+          description: "Our commitment to quality ensures your complete peace of mind.",
+          imageSrc: "http://img.b2bpic.net/free-photo/young-man-repairing-air-conditioner_1303-26755.jpg"
+        },
       ]}
     />
     </SectionErrorBoundary>

src/pages/PricingPage.tsx

@@ -0,0 +1,64 @@
+import PricingHighlightedCards from '@/components/sections/pricing/PricingHighlightedCards';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function PricingPage() {
+  return (
+    <div id="pricing" data-section="pricing">
+      <SectionErrorBoundary name="pricing">
+        <PricingHighlightedCards
+          tag="Our Plans"
+          title="Flexible Pricing for Every Need"
+          description="Choose the plan that best fits your home or business, with transparent pricing and no hidden fees."
+          plans={[
+            {
+              name: "Basic Comfort",
+              price: "$99",
+              priceDetails: "/month",
+              features: [
+                "Annual AC Tune-up",
+                "Annual Heating Tune-up",
+                "Priority Scheduling",
+                "10% Off Repairs",
+              ],
+              button: {
+                text: "Get Started",
+                href: "#contact",
+              },
+            },
+            {
+              name: "Premium Protection",
+              price: "$149",
+              priceDetails: "/month",
+              features: [
+                "All Basic Comfort Features",
+                "Bi-Annual Air Quality Check",
+                "20% Off Repairs",
+                "No Overtime Charges",
+              ],
+              button: {
+                text: "Choose Plan",
+                href: "#contact",
+              },
+              highlighted: true,
+            },
+            {
+              name: "Ultimate Peace of Mind",
+              price: "$199",
+              priceDetails: "/month",
+              features: [
+                "All Premium Protection Features",
+                "Annual Duct Cleaning",
+                "30% Off Repairs",
+                "24/7 Emergency Service",
+              ],
+              button: {
+                text: "Select Plan",
+                href: "#contact",
+              },
+            },
+          ]}
+        />
+      </SectionErrorBoundary>
+    </div>
+  );
+}

src/routes.ts

@@ -6,4 +6,5 @@ export interface Route {
 
 export const routes: Route[] = [
   { path: '/', label: 'Home', pageFile: 'HomePage' },
+  { path: '/pricing', label: 'Pricing', pageFile: 'PricingPage' },
 ];