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() {
+
{hero.subheadline}
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) {