From d8b08eeae5c71c2245933eadb33c7d717917e00a Mon Sep 17 00:00:00 2001
From: kudinDmitriyUp <kudin.dmitriy.up@gmail.com>
Date: Tue, 2 Jun 2026 15:51:19 +0000
Subject: [PATCH] Bob AI: Replaced billboard hero with a big image hero section

---
 src/pages/HomePage/sections/Hero.tsx | 69 +++++++++++++---------------
 1 file changed, 32 insertions(+), 37 deletions(-)

diff --git a/src/pages/HomePage/sections/Hero.tsx b/src/pages/HomePage/sections/Hero.tsx
index 95c68b9..4fc3481 100644
--- a/src/pages/HomePage/sections/Hero.tsx
+++ b/src/pages/HomePage/sections/Hero.tsx
@@ -2,46 +2,41 @@
 // file as the canonical source for the "hero" section.
 
 import React from 'react';
-import HeroBillboardCreator from '@/components/sections/hero/HeroBillboardCreator';
+import { Button } from '@/components/ui/Button';
+import { Tag } from '@/components/ui/Tag';
+import { ImageOrVideo } from '@/components/ui/ImageOrVideo';
+import { ScrollReveal } from '@/components/ui/ScrollReveal';
 import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
 
 export default function HeroSection(): React.JSX.Element {
   return (
-    <div id="hero" data-section="hero">
-        <SectionErrorBoundary name="hero">
-              <HeroBillboardCreator
-          tag="Your Ultimate Escape"
-          title="Experience Unrivaled Luxury at The Grand Hotel"
-          titleHighlight="Unrivaled Luxury"
-          description="Discover a world of refined elegance, impeccable service, and breathtaking amenities designed for an unforgettable stay. Your perfect getaway begins here."
-          primaryButton={{
-            text: "Book Your Stay",
-            href: "#contact",
-          }}
-          note="Voted #1 Luxury Hotel 5 Years in a Row by Global Travel Magazine"
-          videos={[
-            {
-              videoSrc: "asset://hero-video-1",
-              name: "Luxury Stays",
-              followers: "5000+ Guest Reviews",
-              imageSrc: "http://img.b2bpic.net/free-photo/closeup-photo-huge-bouquet-made-hydrangeas-standing-table-large-luxurious-room_627829-8201.jpg",
-            },
-            {
-              videoSrc: "asset://hero-video-2",
-              name: "Gourmet Dining",
-              followers: "Michelin Star Rated",
-              imageSrc: "http://img.b2bpic.net/free-photo/luxurious-modern-bedroom-with-comfortable-bedding-elegant-decor-generated-by-ai_188544-29870.jpg",
-            },
-            {
-              videoSrc: "asset://hero-video-3",
-              name: "Spa & Wellness",
-              followers: "Award-Winning Services",
-              imageSrc: "http://img.b2bpic.net/free-photo/towels-interior-spa-complex_169016-22506.jpg",
-            },
-          ]}
-          badgeText="5-Star Excellence"
-        />
-        </SectionErrorBoundary>
-      </div>
+    <div id="hero" data-webild-section="hero" className="relative min-h-[80vh] flex items-center justify-center overflow-hidden pt-24 pb-16">
+      <SectionErrorBoundary name="hero">
+        <div className="absolute inset-0 z-0">
+          <ImageOrVideo 
+            imageSrc="https://images.unsplash.com/photo-1542314831-c6a4d14d8c85?auto=format&fit=crop&q=80" 
+            className="w-full h-full object-cover"
+          />
+          <div className="absolute inset-0 bg-black/60" />
+        </div>
+        
+        <div className="relative z-10 container mx-auto px-4 text-center">
+          <ScrollReveal variant="slide-up">
+            <Tag text="Your Ultimate Escape" className="mb-6 mx-auto bg-black/50 text-white border-white/20" />
+            <h1 className="text-5xl md:text-7xl font-bold text-white mb-6 tracking-tight">
+              Experience Unrivaled Luxury<br />
+              <span className="text-primary-cta">at The Grand Hotel</span>
+            </h1>
+            <p className="text-lg md:text-xl text-white/90 max-w-2xl mx-auto mb-10">
+              Discover a world of refined elegance, impeccable service, and breathtaking amenities designed for an unforgettable stay. Your perfect getaway begins here.
+            </p>
+            <div className="flex flex-col sm:flex-row items-center justify-center gap-4">
+              <Button text="Book Your Stay" variant="primary" href="#contact" className="px-8 py-4 text-lg" />
+              <Button text="Explore Rooms" variant="secondary" href="#rooms" className="px-8 py-4 text-lg text-white border-white/20" />
+            </div>
+          </ScrollReveal>
+        </div>
+      </SectionErrorBoundary>
+    </div>
   );
 }