From 9dc8496763a38c45f8c87de300bc78b8d84946b5 Mon Sep 17 00:00:00 2001
From: kudinDmitriyUp <kudin.dmitriy.up@gmail.com>
Date: Thu, 7 May 2026 14:57:54 +0000
Subject: [PATCH] feat: Add glassmorphic USP cards to hero section

---
 .../sections/hero/HeroBillboard.tsx           | 33 ++++++++++++++++++-
 1 file changed, 32 insertions(+), 1 deletion(-)

diff --git a/src/components/sections/hero/HeroBillboard.tsx b/src/components/sections/hero/HeroBillboard.tsx
index d1672c2..8951384 100644
--- a/src/components/sections/hero/HeroBillboard.tsx
+++ b/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,20 @@ 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 grid grid-cols-1 md:grid-cols-3 gap-4 p-4 md:p-6">
+            {usps.map((usp, index) => (
+              <div
+                key={index}
+                className="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"
+              >
+                <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>