feat: replace Why Choose Us section with numbered list

Merge version_7_1778166190952 into main

src/components/sections/hero/HeroBillboard.tsx

@@ -4,6 +4,7 @@ import TextAnimation from "@/components/ui/TextAnimation";
 import ImageOrVideo from "@/components/ui/ImageOrVideo";
 import ScrollReveal from "@/components/ui/ScrollReveal";
 import AvatarGroup from "@/components/ui/AvatarGroup";
+import { Clock, ShieldCheck, DollarSign } from "lucide-react";
 
 type HeroBillboardProps = {
   tag?: string;
@@ -26,6 +27,24 @@ const HeroBillboard = ({
   imageSrc,
   videoSrc,
 }: HeroBillboardProps) => {
+  const usps = [
+    {
+      icon: Clock,
+      title: "24/7 Service",
+      description: "Always available for emergency repairs.",
+    },
+    {
+      icon: ShieldCheck,
+      title: "Certified Technicians",
+      description: "Expertise you can trust for every job.",
+    },
+    {
+      icon: DollarSign,
+      title: "Transparent Pricing",
+      description: "No hidden fees, just honest quotes.",
+    },
+  ];
+
   return (
     <section aria-label="Hero section" className="relative pt-25 pb-20 md:py-30 mb-20">
       <HeroBackgroundSlot />
@@ -59,8 +78,25 @@ const HeroBillboard = ({
           </div>
         </div>
 
-        <ScrollReveal variant="fade-blur" delay={0.2} className="w-full p-3 xl:p-4 2xl:p-5 card rounded overflow-hidden">
+        <ScrollReveal variant="fade-blur" delay={0.2} className="relative w-full p-3 xl:p-4 2xl:p-5 card rounded overflow-hidden">
           <ImageOrVideo imageSrc={imageSrc} videoSrc={videoSrc} className="aspect-4/5 md:aspect-video" />
+          <div className="absolute inset-0 flex justify-center items-center">
+            {usps.map((usp, index) => (
+              <div
+                key={index}
+                className={`absolute bg-white/10 backdrop-blur-lg rounded-lg p-4 flex flex-col items-center justify-center text-center text-white border border-white/20
+                  ${index === 0 ? 'bottom-4 left-4' : ''}
+                  ${index === 1 ? 'top-4' : ''}
+                  ${index === 2 ? 'bottom-4 right-4' : ''}
+                `}
+                style={{ width: '200px', height: '150px' }}
+              >
+                <usp.icon className="w-8 h-8 mb-2" />
+                <h3 className="font-semibold text-lg">{usp.title}</h3>
+                <p className="text-sm">{usp.description}</p>
+              </div>
+            ))}
+          </div>
         </ScrollReveal>
       </div>
     </section>

src/components/sections/hero/HeroOverlay.tsx

@@ -36,6 +36,11 @@ const HeroOverlay = ({
         videoSrc={videoSrc}
         className="absolute inset-0 w-full h-full object-cover rounded-none"
       />
+      <div className="absolute z-10 bottom-1/4 left-1/2 -translate-x-1/2 grid grid-cols-1 md:grid-cols-3 gap-4 p-4 w-full max-w-4xl">
+        {uspData.map((usp, index) => (
+          <GlassMorphicCard key={index} title={usp.title} description={usp.description} />
+        ))}
+      </div>
 
       <div
         className="absolute z-10 w-[150vw] h-[150vw] left-0 bottom-0 -translate-x-1/2 translate-y-1/2 backdrop-blur mask-[radial-gradient(circle,black_20%,transparent_70%)]"
@@ -43,6 +48,7 @@ const HeroOverlay = ({
       />
 
       <div className="relative z-10 w-content-width mx-auto pb-10 md:pb-25">
+
         <div className="flex flex-col gap-3 w-full md:w-6/10 lg:w-1/2 xl:w-45/100 2xl:w-4/10">
           <span className="w-fit px-3 py-1 mb-1 text-sm card rounded">{tag}</span>
 
@@ -79,3 +85,25 @@ const HeroOverlay = ({
 };
 
 export default HeroOverlay;
+
+const uspData = [
+  {
+    title: "24/7 Emergency Service",
+    description: "Always available for urgent HVAC needs, day or night.",
+  },
+  {
+    title: "Certified Technicians",
+    description: "Expert, reliable service from our certified professionals.",
+  },
+  {
+    title: "Transparent Pricing",
+    description: "Clear, upfront pricing with no hidden fees.",
+  },
+];
+
+const GlassMorphicCard = ({ title, description }: { title: string; description: string }) => (
+  <div className="bg-white/10 backdrop-blur-lg rounded-lg p-4 border border-white/20 shadow-lg">
+    <h3 className="text-lg font-semibold text-white">{title}</h3>
+    <p className="text-white/80">{description}</p>
+  </div>
+);

src/pages/HomePage.tsx

@@ -1,7 +1,8 @@
 import AboutText from '@/components/sections/about/AboutText';
 import ContactCta from '@/components/sections/contact/ContactCta';
 import FaqSimple from '@/components/sections/faq/FaqSimple';
-import FeaturesComparison from '@/components/sections/features/FeaturesComparison';
+import FeaturesDetailedSteps from '@/components/sections/features/FeaturesDetailedSteps';
+import { Clock, ShieldCheck, DollarSign } from "lucide-react";
 import HeroBillboard from '@/components/sections/hero/HeroBillboard';
 import MetricsIconCards from '@/components/sections/metrics/MetricsIconCards';
 import ProductVariantCards from '@/components/sections/product/ProductVariantCards';
@@ -57,23 +58,23 @@ export default function HomePage() {
   </div>
 
   <div id="why-us" data-section="why-us">
-      <FeaturesComparison
+      <FeaturesDetailedSteps
       tag="Why Choose Us"
       title="Experience the Difference with Our HVAC Services"
       description="We stand out by prioritizing your comfort and budget. Our commitment to quality and transparency makes us the preferred choice for HVAC solutions in LA."
-      negativeItems={[
-        "Hidden Fees & Surprises",
-        "Unreliable & Untrained Technicians",
-        "Slow Response Times in Emergencies",
-        "Outdated & Inefficient Equipment",
-        "Poor Communication & Follow-Up",
-      ]}
-      positiveItems={[
-        "Transparent & Upfront Pricing",
-        "Certified & Experienced Professionals",
-        "24/7 Emergency Service Availability",
-        "Energy-Efficient & Modern Solutions",
-        "Clear & Timely Communication",
+      features={[
+        {
+          title: "24/7 Emergency Service",
+          description: "Reliable support when you need it most. Our team is available around the clock for urgent repairs.",
+        },
+        {
+          title: "Certified Technicians",
+          description: "Our experts are fully certified and continuously trained to handle all HVAC systems with precision.",
+        },
+        {
+          title: "Transparent Pricing",
+          description: "No hidden fees, just honest and upfront pricing. We provide clear quotes before any work begins.",
+        },
       ]}
     />
   </div>