From c28c9a05a8ec06a09132b5c726e176e32883b473 Mon Sep 17 00:00:00 2001
From: "diana.dolgolyova" <diana.dolgolyova@gmail.com>
Date: Tue, 10 Mar 2026 12:55:31 +0300
Subject: [PATCH] feat: glitter sparkles on heart, metallic gold text across
 all headings

- Add animated gold sparkle dots on heart surface with glow filter
- Brighten heart metal fill for better visibility against dark bg
- Update headline gradient to dark metallic gold (no white tones)
- Apply gradient-text to all section headings for consistency
- Warm gold subtitle color in hero

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/app/styles/animations.css        | 10 ++++-
 src/components/sections/Hero.tsx     |  6 +--
 src/components/ui/HeroLogo.tsx       | 67 +++++++++++++++++++++++++---
 src/components/ui/SectionHeading.tsx |  2 +-
 4 files changed, 74 insertions(+), 11 deletions(-)

diff --git a/src/app/styles/animations.css b/src/app/styles/animations.css
index 181cdc3..445c44f 100644
--- a/src/app/styles/animations.css
+++ b/src/app/styles/animations.css
@@ -133,7 +133,15 @@
 /* ===== Gradient Text ===== */
 
 .gradient-text {
-  background: linear-gradient(135deg, #fff 0%, #c9a96e 50%, #fff 100%);
+  background: linear-gradient(
+    135deg,
+    #8a6f3e 0%,
+    #c9a96e 20%,
+    #8a6f3e 40%,
+    #c9a96e 60%,
+    #6b5530 80%,
+    #8a6f3e 100%
+  );
   background-size: 200% 200%;
   -webkit-background-clip: text;
   background-clip: text;
diff --git a/src/components/sections/Hero.tsx b/src/components/sections/Hero.tsx
index 62f9b47..e879f53 100644
--- a/src/components/sections/Hero.tsx
+++ b/src/components/sections/Hero.tsx
@@ -45,11 +45,11 @@ export function Hero() {
       <div className="section-container relative z-10 text-center">
         <div className="hero-logo relative mx-auto mb-10 flex items-center justify-center" style={{ width: 220, height: 181 }}>
           {/* Soft ambient glow behind heart */}
-          <div className="absolute -inset-10 rounded-full blur-[80px]" style={{ background: "radial-gradient(circle, rgba(201,169,110,0.15), transparent 70%)" }} />
+          <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
               size={220}
-              className="drop-shadow-[0_0_8px_rgba(201,169,110,0.25)] drop-shadow-[0_0_30px_rgba(201,169,110,0.1)]"
+              className="drop-shadow-[0_0_10px_rgba(201,169,110,0.35)] drop-shadow-[0_0_40px_rgba(201,169,110,0.15)]"
             />
           </div>
         </div>
@@ -58,7 +58,7 @@ export function Hero() {
           <span className="gradient-text">{hero.headline}</span>
         </h1>
 
-        <p className="hero-subtitle mx-auto mt-6 max-w-lg text-lg text-neutral-400 sm:text-xl">
+        <p className="hero-subtitle mx-auto mt-6 max-w-lg text-lg text-[#b8a080] sm:text-xl">
           {hero.subheadline}
         </p>
 
diff --git a/src/components/ui/HeroLogo.tsx b/src/components/ui/HeroLogo.tsx
index d1e8eed..0a81b1c 100644
--- a/src/components/ui/HeroLogo.tsx
+++ b/src/components/ui/HeroLogo.tsx
@@ -25,6 +25,25 @@ const ANIM_CONFIG = [
 
 const FULL_PATH = PATHS.join(" ");
 
+// Glitter sparkle positions (x, y) placed within the heart shape
+const SPARKLES = [
+  { x: 150, y: 30, delay: 0, dur: 2.4 },
+  { x: 185, y: 55, delay: 1.1, dur: 2.0 },
+  { x: 200, y: 85, delay: 0.5, dur: 2.8 },
+  { x: 170, y: 110, delay: 2.0, dur: 2.2 },
+  { x: 145, y: 75, delay: 1.6, dur: 2.6 },
+  { x: 130, y: 50, delay: 0.3, dur: 2.1 },
+  { x: 160, y: 140, delay: 2.5, dur: 2.4 },
+  { x: 125, y: 160, delay: 1.8, dur: 2.0 },
+  { x: 105, y: 100, delay: 0.8, dur: 2.5 },
+  { x: 90, y: 70, delay: 1.3, dur: 2.3 },
+  { x: 75, y: 45, delay: 2.2, dur: 2.1 },
+  { x: 60, y: 80, delay: 0.6, dur: 2.7 },
+  { x: 50, y: 55, delay: 1.9, dur: 2.0 },
+  { x: 40, y: 95, delay: 0.2, dur: 2.4 },
+  { x: 115, y: 130, delay: 1.4, dur: 2.6 },
+];
+
 export function HeroLogo({ className = "", size = 220 }: HeroLogoProps) {
   const h = Math.round(size * (192 / 234));
 
@@ -41,9 +60,9 @@ export function HeroLogo({ className = "", size = 220 }: HeroLogoProps) {
       <defs>
         {/* Dark metal gradient for fill */}
         <radialGradient id="metal-fill" cx="50%" cy="35%" r="65%" fx="50%" fy="30%">
-          <stop offset="0%" stopColor="#222" />
-          <stop offset="50%" stopColor="#111" />
-          <stop offset="100%" stopColor="#0a0a0a" />
+          <stop offset="0%" stopColor="#333" />
+          <stop offset="50%" stopColor="#1a1a1a" />
+          <stop offset="100%" stopColor="#111" />
         </radialGradient>
 
         {/* Gold glow filter for the stroke */}
@@ -54,6 +73,20 @@ export function HeroLogo({ className = "", size = 220 }: HeroLogoProps) {
             <feMergeNode in="SourceGraphic" />
           </feMerge>
         </filter>
+
+        {/* Sparkle glow filter */}
+        <filter id="sparkle-glow" x="-100%" y="-100%" width="300%" height="300%">
+          <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="blur" />
+          <feMerge>
+            <feMergeNode in="blur" />
+            <feMergeNode in="SourceGraphic" />
+          </feMerge>
+        </filter>
+
+        {/* Clip to heart shape so sparkles stay inside */}
+        <clipPath id="heart-clip">
+          <path d={FULL_PATH} fillRule="evenodd" />
+        </clipPath>
       </defs>
 
       {/* Base heart: dark metal */}
@@ -63,6 +96,28 @@ export function HeroLogo({ className = "", size = 220 }: HeroLogoProps) {
         d={FULL_PATH}
       />
 
+      {/* Glitter sparkles on heart surface */}
+      <g clipPath="url(#heart-clip)" filter="url(#sparkle-glow)">
+        {SPARKLES.map((s, i) => (
+          <circle key={`sparkle-${i}`} cx={s.x} cy={s.y} r="1.8" fill="#d4b87a">
+            <animate
+              attributeName="opacity"
+              values="0;0;0.9;1;0.9;0;0"
+              dur={`${s.dur}s`}
+              begin={`${s.delay}s`}
+              repeatCount="indefinite"
+            />
+            <animate
+              attributeName="r"
+              values="0.8;1.8;0.8"
+              dur={`${s.dur}s`}
+              begin={`${s.delay}s`}
+              repeatCount="indefinite"
+            />
+          </circle>
+        ))}
+      </g>
+
       {/* Animated gold glint — one per sub-path, staggered */}
       {PATHS.map((d, i) => {
         const len = PATH_LENGTHS[i];
@@ -92,13 +147,13 @@ export function HeroLogo({ className = "", size = 220 }: HeroLogoProps) {
         );
       })}
 
-      {/* Subtle constant gold edge highlight */}
+      {/* Constant gold edge highlight */}
       <path
         d={FULL_PATH}
         fill="none"
         stroke="#c9a96e"
-        strokeWidth="0.5"
-        strokeOpacity="0.15"
+        strokeWidth="0.75"
+        strokeOpacity="0.3"
         fillRule="evenodd"
       />
     </svg>
diff --git a/src/components/ui/SectionHeading.tsx b/src/components/ui/SectionHeading.tsx
index 7549eb9..225f258 100644
--- a/src/components/ui/SectionHeading.tsx
+++ b/src/components/ui/SectionHeading.tsx
@@ -8,7 +8,7 @@ export function SectionHeading({ children, className = "", centered = false }: S
   return (
     <div className={centered ? "text-center" : ""}>
       <h2
-        className={`font-display text-4xl font-bold uppercase tracking-wide sm:text-5xl lg:text-6xl heading-text ${className}`}
+        className={`font-display text-4xl font-bold uppercase tracking-wide sm:text-5xl lg:text-6xl gradient-text ${className}`}
       >
         {children}
       </h2>