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/index.css

@@ -169,13 +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 2px 0 0 color-mix(in srgb, var(--color-foreground) 30%, transparent), 0 6px 16px -4px 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), 0 8px 20px -4px 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 8px 20px -4px color-mix(in srgb, var(--color-background) 50%, transparent);
 }
 
 .secondary-button {
@@ -189,7 +189,8 @@ 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:
-    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-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;
 }
@@ -197,6 +198,7 @@ h6 {
 .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-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,7 +1,7 @@
-import AboutFeaturesSplit from '@/components/sections/about/AboutFeaturesSplit';
+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 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';
@@ -35,27 +35,11 @@ export default function HomePage() {
 
   <div id="about" data-section="about">
     <SectionErrorBoundary name="about">
-          <AboutFeaturesSplit
-      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."
-      features={[
-        {
-          title: "Experienced Professionals",
-          description: "Our team consists of highly trained and certified HVAC technicians with decades of combined experience.",
-          icon: "Users",
-        },
-        {
-          title: "24/7 Emergency Service",
-          description: "We're here for you around the clock, ensuring your comfort is never compromised, even during unexpected breakdowns.",
-          icon: "Clock",
-        },
-        {
-          title: "Customer Satisfaction",
-          description: "Your comfort is our priority. We go above and beyond to ensure every customer is completely satisfied with our services.",
-          icon: "Smile",
-        },
-      ]}
+          <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>
@@ -63,46 +47,31 @@ export default function HomePage() {
 
   <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>

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' },
 ];