From cf066a66a8fed1650bd4ac081da5af144ff54aa5 Mon Sep 17 00:00:00 2001
From: kudinDmitriyUp <kudin.dmitriy.up@gmail.com>
Date: Wed, 3 Jun 2026 13:15:43 +0000
Subject: [PATCH] Bob AI: Rewrite the main headline in the Home section to be
 more ben

---
 src/pages/HomePage/sections/Home.tsx | 121 +++++++++++----------------
 1 file changed, 47 insertions(+), 74 deletions(-)

diff --git a/src/pages/HomePage/sections/Home.tsx b/src/pages/HomePage/sections/Home.tsx
index acd037a..f6eb0ef 100644
--- a/src/pages/HomePage/sections/Home.tsx
+++ b/src/pages/HomePage/sections/Home.tsx
@@ -1,88 +1,61 @@
-import React from 'react';
-import HeroTiltedCards from '@/components/sections/hero/HeroTiltedCards';
-import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
-import ScrollReveal from "@/components/ui/ScrollReveal";
-import Tag from "@/components/ui/Tag";
+import React from "react";
 import Button from "@/components/ui/Button";
-import ImageOrVideo from "@/components/ui/ImageOrVideo";
+import ScrollReveal from "@/components/ui/ScrollReveal";
+import TextAnimation from "@/components/ui/TextAnimation";
 
-export default function HomeSection(): React.JSX.Element {
+export default function HomeSection() {
   return (
-    <div id="home" data-webild-section="home" className="relative overflow-hidden bg-background">
-  {React.createElement(() => {
-    const [selectedImage, setSelectedImage] = React.useState<string | null>(null);
-    const items = [
-      "http://img.b2bpic.net/free-photo/top-view-challah-dish-hanukkah_23-2151129284.jpg",
-      "http://img.b2bpic.net/free-photo/high-angle-people-wearing-linen-clothing_23-2151030585.jpg",
-      "http://img.b2bpic.net/free-photo/delicious-freshly-bakery-products-wooden-background-close-up-photo-freshly-baked-bread-products_613910-6800.jpg",
-      "https://images.unsplash.com/photo-1509440159596-0249088772ff?q=80&w=2072&auto=format&fit=crop",
-      "https://images.unsplash.com/photo-1558961363-fa8fdf82db35?q=80&w=1965&auto=format&fit=crop"
-    ];
-
-    return (
-      <>
-        <div className="container mx-auto px-4 text-center">
+    <div data-webild-section="HeroTiltedCards">
+      <section id="home" className="relative w-full overflow-hidden flex flex-col items-center justify-center text-center">
+        <div className="container px-4 md:px-6 z-10">
           <ScrollReveal variant="slide-up">
-            <Tag text="Welcome to Our Bakery" className="mb-6 mx-auto" />
-            <h1 className="text-5xl md:text-7xl font-bold text-foreground mb-6 tracking-tight">
-              Freshly Baked, Made<br />Daily, Just for You
-            </h1>
-            <p className="text-xl text-muted-foreground max-w-content-width mx-auto">
+            <span className="text-sm uppercase tracking-widest text-muted-foreground mb-4 block">
+              Welcome to Our Bakery
+            </span>
+          </ScrollReveal>
+          
+          <TextAnimation
+            text="Start Your Day Right with Oven-Fresh Artisan Breads & Pastries"
+            variant="slide-up"
+            gradientText={false}
+            tag="h1"
+            className="text-5xl md:text-6xl lg:text-7xl font-bold tracking-tight text-foreground mb-6 max-w-content-width mx-auto"
+          />
+          
+          <ScrollReveal variant="slide-up" delay={0.2}>
+            <p className="text-lg md:text-xl text-muted-foreground mb-8 max-w-content-width mx-auto">
               Handcrafted pastries, custom cakes, and artisan breads using premium ingredients. Order online or visit us today.
             </p>
-            <div className="flex flex-wrap justify-center gap-4">
-              <Button text="Order Now" variant="primary" href="#contact" />
-              <Button text="Our Menu" variant="secondary" href="#products" />
+          </ScrollReveal>
+          
+          <ScrollReveal variant="slide-up" delay={0.3}>
+            <div className="flex flex-col sm:flex-row items-center justify-center gap-4">
+              <Button text="Order Now" variant="primary" href="/#contact" />
+              <Button text="Our Menu" variant="secondary" href="/#products" />
             </div>
           </ScrollReveal>
 
-          <ScrollReveal variant="slide-up">
-            <div className="relative max-w-content-width mx-auto h-[400px] flex justify-center items-center">
-              {items.map((src, idx) => {
-                const rotations = ['-rotate-12', '-rotate-6', 'rotate-0', 'rotate-6', 'rotate-12'];
-                const zIndexes = ['z-10', 'z-20', 'z-30', 'z-20', 'z-10'];
-                const translates = ['-translate-x-40', '-translate-x-20', 'translate-x-0', 'translate-x-20', 'translate-x-40'];
-                
-                return (
-                  <div 
-                    key={idx}
-                    className={`absolute w-48 h-64 md:w-64 md:h-80 rounded-theme overflow-hidden border-8 border-white shadow-xl cursor-pointer transition-transform hover:scale-110 hover:z-50 ${rotations[idx]} ${zIndexes[idx]} ${translates[idx]}`}
-                    onClick={() => setSelectedImage(src)}
-                  >
-                    <ImageOrVideo imageSrc={src} className="w-full h-full object-cover" />
-                  </div>
-                );
-              })}
+          <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">
+                <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">
+                <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">
+                <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">
+                <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">
+                <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>
           </ScrollReveal>
         </div>
-
-        {selectedImage && (
-          <div 
-            className="fixed inset-0 z-[100] flex items-center justify-center bg-black/80 p-4 backdrop-blur-sm"
-            onClick={() => setSelectedImage(null)}
-          >
-            <button 
-              className="absolute top-6 right-6 text-white hover:text-gray-300 transition-colors"
-              onClick={() => setSelectedImage(null)}
-            >
-              <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
-            </button>
-            <div 
-              className="relative max-w-content-width max-h-[90vh] w-full h-full flex items-center justify-center"
-              onClick={(e) => e.stopPropagation()}
-            >
-              <img 
-                src={selectedImage} 
-                alt="Expanded view" 
-                className="max-w-full max-h-full object-contain rounded-lg shadow-2xl" 
-              />
-            </div>
-          </div>
-        )}
-      </>
-    );
-  })}
-</div>
+      </section>
+    </div>
   );
 }
\ No newline at end of file