From 014fb1ff2b3596eaa48f9deb3ead7f96990ed4cb Mon Sep 17 00:00:00 2001
From: kudinDmitriyUp <kudin.dmitriy.up@gmail.com>
Date: Wed, 3 Jun 2026 13:18:06 +0000
Subject: [PATCH] Bob AI: Fixed hero section layout and implemented expanding
 image ga

---
 src/pages/HomePage/sections/Home.tsx | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/pages/HomePage/sections/Home.tsx b/src/pages/HomePage/sections/Home.tsx
index f6eb0ef..4fe81a1 100644
--- a/src/pages/HomePage/sections/Home.tsx
+++ b/src/pages/HomePage/sections/Home.tsx
@@ -5,8 +5,8 @@ import TextAnimation from "@/components/ui/TextAnimation";
 
 export default function HomeSection() {
   return (
-    <div data-webild-section="HeroTiltedCards">
-      <section id="home" className="relative w-full overflow-hidden flex flex-col items-center justify-center text-center">
+    <div data-webild-section="home">
+      <section id="home" className="relative w-full overflow-hidden flex flex-col items-center justify-center text-center py-20 md:py-32">
         <div className="container px-4 md:px-6 z-10">
           <ScrollReveal variant="slide-up">
             <span className="text-sm uppercase tracking-widest text-muted-foreground mb-4 block">
@@ -36,20 +36,20 @@ export default function HomeSection() {
           </ScrollReveal>
 
           <ScrollReveal variant="slide-up" delay={0.4}>
-            <div className="relative w-full max-w-content-width mx-auto h-[300px] md:h-[400px] flex justify-center items-center">
-              <div className="absolute w-32 md:w-48 h-48 md:h-72 rounded-theme overflow-hidden shadow-xl transform -rotate-12 -translate-x-28 md:-translate-x-48 z-10 border-4 border-white">
+            <div className="flex w-full max-w-content-width mx-auto h-[300px] md:h-[400px] gap-2 md:gap-4 mt-12">
+              <div className="group relative flex-1 hover:flex-[3] transition-all duration-500 ease-in-out overflow-hidden rounded-theme shadow-md cursor-pointer">
                 <img src="https://images.unsplash.com/photo-1509440159596-0249088772ff?w=800&q=80" alt="Freshly baked pastry" className="w-full h-full object-cover" />
               </div>
-              <div className="absolute w-32 md:w-48 h-48 md:h-72 rounded-theme overflow-hidden shadow-xl transform -rotate-6 -translate-x-14 md:-translate-x-24 z-20 border-4 border-white">
+              <div className="group relative flex-1 hover:flex-[3] transition-all duration-500 ease-in-out overflow-hidden rounded-theme shadow-md cursor-pointer">
                 <img src="https://images.unsplash.com/photo-1483695028939-5bb13f8648b0?w=800&q=80" alt="Artisan bread loaf" className="w-full h-full object-cover" />
               </div>
-              <div className="absolute w-40 md:w-56 h-56 md:h-80 rounded-theme overflow-hidden shadow-2xl z-30 border-4 border-white">
+              <div className="group relative flex-1 hover:flex-[3] transition-all duration-500 ease-in-out overflow-hidden rounded-theme shadow-md cursor-pointer">
                 <img src="https://images.unsplash.com/photo-1549931319-a545dcf3bc73?w=800&q=80" alt="Sourdough bread" className="w-full h-full object-cover" />
               </div>
-              <div className="absolute w-32 md:w-48 h-48 md:h-72 rounded-theme overflow-hidden shadow-xl transform rotate-6 translate-x-14 md:translate-x-24 z-20 border-4 border-white">
+              <div className="group relative flex-1 hover:flex-[3] transition-all duration-500 ease-in-out overflow-hidden rounded-theme shadow-md cursor-pointer">
                 <img src="https://images.unsplash.com/photo-1550617931-e17a7b70dce2?w=800&q=80" alt="Custom cake" className="w-full h-full object-cover" />
               </div>
-              <div className="absolute w-32 md:w-48 h-48 md:h-72 rounded-theme overflow-hidden shadow-xl transform rotate-12 translate-x-28 md:translate-x-48 z-10 border-4 border-white">
+              <div className="group relative flex-1 hover:flex-[3] transition-all duration-500 ease-in-out overflow-hidden rounded-theme shadow-md cursor-pointer">
                 <img src="https://images.unsplash.com/photo-1608198093002-ad4e005484ec?w=800&q=80" alt="Chocolate chip cookies" className="w-full h-full object-cover" />
               </div>
             </div>
-- 
2.49.1