From bf9b1876b55f6395df0eb68d49f937558f25467b Mon Sep 17 00:00:00 2001
From: "diana.dolgolyova" <diana.dolgolyova@gmail.com>
Date: Thu, 2 Apr 2026 15:43:56 +0300
Subject: [PATCH] =?UTF-8?q?feat:=20hero=20UI=20polish=20=E2=80=94=20vignet?=
 =?UTF-8?q?te,=20larger=20text,=20bolder=20button,=20spacing?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Vignette overlay: radial gradient darkens edges, guides eye to center
- Video overlay reduced 50% → 40% for brighter backgrounds
- Subtitle: larger (xl/2xl), brighter (gold/80), wider max-w-xl
- Button: larger padding, pulse glow on hover, stronger shadow
- Spacing: more room between logo, title, subtitle, and button
---
 src/components/sections/Hero.tsx | 21 ++++++++++++++-------
 1 file changed, 14 insertions(+), 7 deletions(-)

diff --git a/src/components/sections/Hero.tsx b/src/components/sections/Hero.tsx
index 16d2990..162e8f9 100644
--- a/src/components/sections/Hero.tsx
+++ b/src/components/sections/Hero.tsx
@@ -101,7 +101,7 @@ export function Hero({ data: hero }: HeroProps) {
             >
               <source src={centerVideo} type="video/mp4" />
             </video>
-            <div className="absolute inset-0 bg-black/50" />
+            <div className="absolute inset-0 bg-black/40" />
           </div>
 
           {/* Desktop: diagonal split with all videos */}
@@ -135,7 +135,7 @@ export function Hero({ data: hero }: HeroProps) {
                   >
                     <source src={src} type="video/mp4" />
                   </video>
-                  <div className="absolute inset-0 bg-black/50" />
+                  <div className="absolute inset-0 bg-black/40" />
                 </div>
               );
             })}
@@ -154,12 +154,17 @@ export function Hero({ data: hero }: HeroProps) {
         className="absolute inset-0 z-[5] bg-neutral-950 pointer-events-none transition-opacity duration-1000"
       />
 
+      {/* Vignette — dark edges to guide eye to center */}
+      <div className="absolute inset-0 z-[4] pointer-events-none" style={{
+        background: "radial-gradient(ellipse 70% 60% at 50% 50%, transparent 0%, rgba(0,0,0,0.6) 100%)",
+      }} />
+
       {/* Floating hearts */}
       <FloatingHearts />
 
       {/* Content */}
       <div className="section-container relative z-10 text-center" style={{ textShadow: "0 1px 0 rgba(201,169,110,0.3), 0 2px 0 rgba(201,169,110,0.2), 0 4px 8px rgba(0,0,0,0.4), 0 8px 20px rgba(0,0,0,0.3)" }}>
-        <div className="hero-logo relative mx-auto mb-10 flex items-center justify-center" style={{ width: 220, height: 181 }}>
+        <div className="hero-logo relative mx-auto mb-12 flex items-center justify-center" style={{ width: 220, height: 181 }}>
           <div className="absolute -inset-10 rounded-full blur-[80px]" style={{ background: "radial-gradient(circle, rgba(201,169,110,0.25), transparent 70%)" }} />
           <div className="hero-logo-heartbeat relative">
             <HeroLogo
@@ -173,16 +178,18 @@ export function Hero({ data: hero }: HeroProps) {
           <span className="gradient-text">{hero.headline}</span>
         </h1>
 
-        <p className="hero-subtitle mx-auto mt-6 max-w-lg text-lg text-gold/70 sm:text-xl">
+        <p className="hero-subtitle mx-auto mt-8 max-w-xl text-xl text-gold/80 sm:text-2xl">
           {hero.subheadline}
         </p>
 
-        <div className="hero-cta mt-12">
+        <div className="hero-cta mt-14">
           <button
             onClick={openBooking}
-            className="rounded-full border border-gold/60 bg-gold/15 px-8 py-4 text-lg font-semibold text-gold backdrop-blur-md transition-all duration-300 hover:bg-gold/25 hover:border-gold hover:shadow-[0_0_30px_rgba(201,169,110,0.3)] cursor-pointer"
+            className="group relative rounded-full border border-gold/60 bg-gold/15 px-10 py-5 text-lg font-semibold text-gold backdrop-blur-md transition-all duration-300 hover:bg-gold/25 hover:border-gold hover:shadow-[0_0_40px_rgba(201,169,110,0.35)] cursor-pointer"
           >
-            {hero.ctaText}
+            <span className="relative z-10">{hero.ctaText}</span>
+            {/* Pulse glow on hover */}
+            <span className="absolute inset-0 rounded-full bg-gold/10 opacity-0 group-hover:opacity-100 group-hover:animate-pulse transition-opacity" />
           </button>
         </div>
       </div>