feat: add glassmorphic cards to hero section

src/components/sections/hero/HeroOverlay.tsx

@@ -43,6 +43,11 @@ const HeroOverlay = ({
       />
 
       <div className="relative z-10 w-content-width mx-auto pb-10 md:pb-25">
+        <div className="absolute bottom-20 right-0 grid grid-cols-1 md:grid-cols-3 gap-4 p-4">
+          {uspData.map((usp, index) => (
+            <GlassMorphicCard key={index} title={usp.title} description={usp.description} />
+          ))}
+        </div>
         <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 +84,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>
+);