OnyxCal/anycoder-508b5b7e
0
1<!DOCTYPE html>2<html lang="en">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>Lemon Paws — Effortless Rain Protection</title>7 <script src="https://cdn.tailwindcss.com"></script>8 <link href="https://fonts.googleapis.com/css2?family=Fredoka:wght@300;400;500;600;700&family=Nunito:wght@300;400;500;600;700;800&family=Quicksand:wght@300;400;500;600;700&family=Sora:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">9 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">10 <script>11 tailwind.config = {12 theme: {13 extend: {14 fontFamily: {15 fredoka: ['Fredoka', 'sans-serif'],16 nunito: ['Nunito', 'sans-serif'],17 quicksand: ['Quicksand', 'sans-serif'],18 sora: ['Sora', 'sans-serif'],19 inter: ['Inter', 'sans-serif'],20 },21 colors: {22 daffodil: { DEFAULT: '#FFD93D', 50: '#FFF9E0', 100: '#FFF0B3', 200: '#FFE57A', 300: '#FFD93D', 400: '#FFC107', 500: '#FFB300', 600: '#F57F00', 700: '#E65100', },23 cream: { DEFAULT: '#FFFDF5', 50: '#FFFCF0', 100: '#FFF8E1', 200: '#FFF0C2', },24 ink: { DEFAULT: '#2D2926', 50: '#F5F3F0', 100: '#E8E4DF', 200: '#D1CCC5', 300: '#A9A29A', 400: '#7A7169', 500: '#5A524C', 600: '#3D3833', 700: '#2D2926', 800: '#1A1715', 900: '#0E0D0C', },25 clay: { DEFAULT: '#D4A373', 50: '#FBF4EC', 100: '#F5E6D3', 200: '#EBCCAA', 300: '#D4A373', },26 moss: { DEFAULT: '#7A947A', 50: '#F0F4F0', 100: '#D9E4D9', 200: '#B3C8B3', 300: '#7A947A', },27 mist: { DEFAULT: '#C4D3D9', 50: '#F2F6F7', 100: '#E0E8EC', 200: '#C4D3D9', },28 slateblue: { DEFAULT: '#6B7F8F', 50: '#EFF2F5', 100: '#D5DDE3', 200: '#A9BBC7', 300: '#6B7F8F', },29 berry: { DEFAULT: '#C07777', 50: '#F9F0F0', 100: '#EDCECE', 200: '#D99E9E', 300: '#C07777', },30 golden: { DEFAULT: '#E8A838', 50: '#FDF5E8', 100: '#F9E2BE', 200: '#E8A838', },31 }32 }33 }34 }35 </script>36 <style>37 /* ================================================38 CSS RESET & BASE39 ================================================ */40 *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }41 html { scroll-behavior: smooth; }42 body {43 font-family: 'Nunito', sans-serif;44 background-color: #FFFDF5;45 color: #2D2926;46 overflow-x: hidden;47 -webkit-font-smoothing: antialiased;48 -moz-osx-font-smoothing: grayscale;49 }50 51 /* ================================================52 CUSTOM SCROLLBAR53 ================================================ */54 ::-webkit-scrollbar { width: 5px; }55 ::-webkit-scrollbar-track { background: #FFFDF5; }56 ::-webkit-scrollbar-thumb { background: #FFD93D; border-radius: 10px; }57 ::-webkit-scrollbar-thumb:hover { background: #FFC107; }58 59 /* ================================================60 ROOT VARIABLES61 ================================================ */62 :root {63 --daffodil: #FFD93D;64 --cream: #FFFDF5;65 --ink: #2D2926;66 --clay: #D4A373;67 --moss: #7A947A;68 --mist: #C4D3D9;69 --slateblue: #6B7F8F;70 --berry: #C07777;71 --golden: #E8A838;72 --section-height: 100svh;73 }74 75 /* ================================================76 GLASS MORPHISM77 ================================================ */78 .glass {79 background: rgba(255, 253, 245, 0.55);80 backdrop-filter: blur(20px) saturate(1.4);81 -webkit-backdrop-filter: blur(20px) saturate(1.4);82 border: 1px solid rgba(255, 217, 61, 0.15);83 }84 85 .glass-strong {86 background: rgba(255, 253, 245, 0.82);87 backdrop-filter: blur(30px) saturate(1.5);88 -webkit-backdrop-filter: blur(30px) saturate(1.5);89 border: 1px solid rgba(255, 217, 61, 0.2);90 }91 92 .glass-dark {93 background: rgba(45, 41, 38, 0.06);94 backdrop-filter: blur(12px);95 -webkit-backdrop-filter: blur(12px);96 }97 98 /* ================================================99 ANIMATIONS — Keyframes100 ================================================ */101 @keyframes gentle-bob {102 0%, 100% { transform: translateY(0) rotate(0deg); }103 50% { transform: translateY(-14px) rotate(1deg); }104 }105 106 @keyframes gentle-bob-reverse {107 0%, 100% { transform: translateY(-8px) rotate(-0.5deg); }108 50% { transform: translateY(6px) rotate(0.5deg); }109 }110 111 @keyframes wag-tail {112 0%, 100% { transform: rotate(-6deg); }113 25% { transform: rotate(10deg); }114 50% { transform: rotate(-6deg); }115 75% { transform: rotate(8deg); }116 }117 118 @keyframes raindrop-fall {119 0% { transform: translateY(-120px); opacity: 0; }120 15% { opacity: 0.85; }121 85% { opacity: 0.6; }122 100% { transform: translateY(100vh); opacity: 0; }123 }124 125 @keyframes raindrop-splash {126 0% { transform: scale(0); opacity: 0.8; }127 40% { transform: scale(1.4); opacity: 0.3; }128 100% { transform: scale(2); opacity: 0; }129 }130 131 @keyframes float-gentle {132 0%, 100% { transform: translateY(0) translateX(0) rotate(0deg); }133 20% { transform: translateY(-10px) translateX(3px) rotate(1deg); }134 40% { transform: translateY(-5px) translateX(-2px) rotate(-0.5deg); }135 60% { transform: translateY(-15px) translateX(4px) rotate(1.5deg); }136 80% { transform: translateY(-8px) translateX(-3px) rotate(-1deg); }137 }138 139 @keyframes leaf-drift {140 0% { transform: translateY(0) rotate(0deg) translateX(0); }141 25% { transform: translateY(20px) rotate(15deg) translateX(10px); }142 50% { transform: translateY(45px) rotate(-10deg) translateX(-5px); }143 75% { transform: translateY(70px) rotate(20deg) translateX(15px); }144 100% { transform: translateY(95px) rotate(-5deg) translateX(-8px); opacity: 0; }145 }146 147 @keyframes ripple {148 0% { transform: scale(0.8); opacity: 0.6; }149 100% { transform: scale(2.2); opacity: 0; }150 }151 152 @keyframes shimmer {153 0% { background-position: -200% center; }154 100% { background-position: 200% center; }155 }156 157 @keyframes breathe {158 0%, 100% { transform: scale(1); }159 50% { transform: scale(1.02); }160 }161 162 @keyframes slide-up {163 from { opacity: 0; transform: translateY(30px); }164 to { opacity: 1; transform: translateY(0); }165 }166 167 @keyframes spin-slow {168 from { transform: rotate(0deg); }169 to { transform: rotate(360deg); }170 }171 172 @keyframes draw-line {173 from { stroke-dashoffset: 1000; }174 to { stroke-dashoffset: 0; }175 }176 177 @keyframes button-pulse {178 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 217, 61, 0.5); }179 50% { box-shadow: 0 0 0 16px rgba(255, 217, 61, 0); }180 }181 182 @keyframes slide-in-left {183 from { opacity: 0; transform: translateX(-40px); }184 to { opacity: 1; transform: translateX(0); }185 }186 187 @keyframes slide-in-right {188 from { opacity: 0; transform: translateX(40px); }189 to { opacity: 1; transform: translateX(0); }190 }191 192 @keyframes scale-in {193 from { opacity: 0; transform: scale(0.9); }194 to { opacity: 1; transform: scale(1); }195 }196 197 @keyframes drop-shimmer {198 0% { transform: translateY(0); opacity: 0.7; }199 50% { opacity: 1; }200 100% { transform: translateY(200px); opacity: 0; }201 }202 203 /* ================================================204 ANIMATION CLASSES205 ================================================ */206 .anim-bob { animation: gentle-bob 5s ease-in-out infinite; }207 .anim-bob-reverse { animation: gentle-bob-reverse 6s ease-in-out infinite; }208 .anim-float { animation: float-gentle 8s ease-in-out infinite; }209 .anim-wag { animation: wag-tail 2.5s ease-in-out infinite; transform-origin: bottom left; }210 .anim-breathe { animation: breathe 6s ease-in-out infinite; }211 .anim-spin-slow { animation: spin-slow 30s linear infinite; }212 213 /* ================================================214 RAIN SYSTEM215 ================================================ */216 .rain-layer {217 position: absolute;218 inset: 0;219 pointer-events: none;220 overflow: hidden;221 z-index: 10;222 }223 224 .raindrop {225 position: absolute;226 width: 1.5px;227 background: rgba(255, 255, 255, 0.55);228 border-radius: 0 0 2px 2px;229 animation: raindrop-fall linear infinite;230 pointer-events: none;231 }232 233 .raindrop.thick {234 width: 2.5px;235 background: rgba(255, 255, 255, 0.35);236 }237 238 .raindrop.splash {239 position: absolute;240 width: 8px;241 height: 4px;242 border-radius: 50%;243 background: radial-gradient(ellipse at center, rgba(255,255,255,0.5) 0%, transparent 70%);244 animation: raindrop-splash 0.8s ease-out forwards;245 }246 247 /* ================================================248 FLOATING DECORATIVE ORBS249 ================================================ */250 .orb {251 position: absolute;252 border-radius: 50%;253 pointer-events: none;254 will-change: transform;255 }256 257 .orb-1 { width: 300px; height: 300px; background: radial-gradient(circle, rgba(255, 217, 61, 0.15) 0%, transparent 70%); animation: gentle-bob 8s ease-in-out infinite; }258 .orb-2 { width: 200px; height: 200px; background: radial-gradient(circle, rgba(196, 211, 217, 0.2) 0%, transparent 70%); animation: gentle-bob-reverse 7s ease-in-out infinite; }259 .orb-3 { width: 150px; height: 150px; background: radial-gradient(circle, rgba(212, 163, 115, 0.12) 0%, transparent 70%); animation: float-gentle 10s ease-in-out infinite; }260 .orb-4 { width: 80px; height: 80px; background: radial-gradient(circle, rgba(255, 217, 61, 0.08) 0%, transparent 70%); animation: gentle-bob 6s ease-in-out infinite; }261 262 /* ================================================263 SECTIONS264 ================================================ */265 .section-panel {266 position: relative;267 width: 100%;268 min-height: var(--section-height);269 overflow: hidden;270 }271 272 /* ================================================273 NAVIGATION274 ================================================ */275 .nav-pill {276 transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);277 }278 .nav-pill:hover {279 transform: translateY(-2px);280 box-shadow: 0 8px 30px rgba(255, 217, 61, 0.25);281 }282 .nav-pill.active {283 background: var(--daffodil);284 color: var(--ink);285 box-shadow: 0 4px 20px rgba(255, 217, 61, 0.4);286 }287 288 /* ================================================289 HERO CHARACTER290 ================================================ */291 .hero-character-wrapper {292 position: relative;293 width: 100%;294 height: 100%;295 display: flex;296 align-items: center;297 justify-content: center;298 }299 300 .hero-character-wrapper svg {301 max-height: 75vh;302 width: auto;303 filter: drop-shadow(0 30px 60px rgba(45, 41, 38, 0.12));304 transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);305 }306 307 .hero-character-wrapper:hover svg {308 transform: scale(1.03) translateY(-5px);309 }310 311 /* Hat bounce on hover */312 .rain-hat {313 transform-origin: center top;314 transition: transform 0.3s ease;315 }316 .hero-character-wrapper:hover .rain-hat {317 animation: gentle-bob 0.6s ease-in-out infinite;318 }319 320 /* Tail wag */321 .tail-group {322 transform-origin: 340px 480px;323 transition: transform 0.3s ease;324 }325 .hero-character-wrapper:hover .tail-group {326 animation: wag-tail 0.4s ease-in-out infinite;327 }328 329 /* Ear flap */330 .ear-group {331 transform-origin: center top;332 }333 .hero-character-wrapper:hover .ear-group.left {334 animation: gentle-bob-reverse 1s ease-in-out infinite;335 }336 .hero-character-wrapper:hover .ear-group.right {337 animation: gentle-bob 1s ease-in-out infinite;338 }339 340 /* ================================================341 CURSOR BLOB342 ================================================ */343 .cursor-blob {344 position: fixed;345 width: 400px;346 height: 400px;347 border-radius: 50%;348 pointer-events: none;349 z-index: 9999;350 background: radial-gradient(circle, rgba(255, 217, 61, 0.08) 0%, transparent 70%);351 transform: translate(-50%, -50%);352 transition: opacity 0.3s;353 mix-blend-mode: multiply;354 }355 356 /* ================================================357 CTA BUTTON358 ================================================ */359 .cta-glow {360 position: relative;361 overflow: hidden;362 transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);363 }364 .cta-glow::before {365 content: '';366 position: absolute;367 inset: -2px;368 border-radius: inherit;369 background: conic-gradient(from 0deg, var(--daffodil), var(--golden), var(--clay), var(--daffodil));370 opacity: 0;371 transition: opacity 0.5s;372 z-index: -1;373 animation: spin-slow 4s linear infinite;374 }375 .cta-glow:hover::before { opacity: 1; }376 .cta-glow:hover {377 transform: translateY(-3px) scale(1.02);378 box-shadow: 0 20px 50px rgba(255, 217, 61, 0.35), 0 0 100px rgba(255, 217, 61, 0.1);379 }380 .cta-glow:active {381 transform: translateY(0) scale(0.98);382 }383 384 /* ================================================385 FEATURE CARDS386 ================================================ */387 .feature-card {388 transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);389 will-change: transform;390 }391 .feature-card:hover {392 transform: translateY(-12px) scale(1.02);393 box-shadow: 0 25px 60px rgba(45, 41, 38, 0.08), 0 0 0 1px rgba(255, 217, 61, 0.3);394 }395 .feature-card:hover .feature-icon {396 transform: scale(1.15) rotate(5deg);397 box-shadow: 0 15px 40px rgba(255, 217, 61, 0.3);398 }399 .feature-icon {400 transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);401 }402 403 /* ================================================404 REVIEWS405 ================================================ */406 .review-slide {407 opacity: 0;408 transform: translateY(20px) scale(0.95);409 position: absolute;410 inset: 0;411 transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);412 }413 .review-slide.active {414 opacity: 1;415 transform: translateY(0) scale(1);416 position: relative;417 }418 419 /* ================================================420 GALLERY421 ================================================ */422 .gallery-item {423 transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);424 overflow: hidden;425 border-radius: 20px;426 }427 .gallery-item img {428 transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);429 }430 .gallery-item:hover img {431 transform: scale(1.12);432 }433 .gallery-item:hover {434 transform: translateY(-6px);435 box-shadow: 0 25px 50px rgba(45, 41, 38, 0.12);436 }437 .gallery-overlay {438 position: absolute;439 inset: 0;440 background: linear-gradient(to top, rgba(45,41,38,0.7) 0%, transparent 60%);441 opacity: 0;442 transition: opacity 0.4s;443 display: flex;444 align-items: flex-end;445 padding: 24px;446 }447 .gallery-item:hover .gallery-overlay { opacity: 1; }448 449 /* ================================================450 MARQUEE451 ================================================ */452 .marquee-track {453 display: flex;454 width: max-content;455 animation: marquee 40s linear infinite;456 }457 @keyframes marquee {458 0% { transform: translateX(0); }459 100% { transform: translateX(-50%); }460 }461 462 /* ================================================463 REVEAL ON SCROLL464 ================================================ */465 .reveal {466 opacity: 0;467 transform: translateY(40px);468 transition: all 0.9s cubic-bezier(0.23, 1, 0.32, 1);469 }470 .reveal.visible {471 opacity: 1;472 transform: translateY(0);473 }474 .reveal-l { transition-delay: 0.1s; }475 .reveal-m { transition-delay: 0.25s; }476 .reveal-r { transition-delay: 0.4s; }477 478 /* ================================================479 PRODUCT 3D480 ================================================ */481 .product-3d-wrapper {482 perspective: 1200px;483 }484 .product-3d {485 transform-style: preserve-3d;486 transition: transform 0.8s cubic-bezier(0.23, 1, 0.32, 1);487 }488 .product-3d:hover {489 transform: rotateY(8deg) rotateX(5deg) scale(1.05);490 }491 492 /* ================================================493 RAIN PUDDLES494 ================================================ */495 .puddle {496 position: absolute;497 border-radius: 50%;498 background: rgba(255, 255, 255, 0.15);499 box-shadow: inset 0 2px 10px rgba(255,255,255,0.1);500 }501 .puddle::after {502 content: '';503 position: absolute;504 inset: 3px;505 border-radius: 50%;506 border: 1px solid rgba(255,255,255,0.2);507 }508 509 /* ================================================510 WATER RIPPLES511 ================================================ */512 .ripple-ring {513 position: absolute;514 border: 2px solid rgba(255,255,255,0.2);515 border-radius: 50%;516 animation: ripple 3s ease-out infinite;517 }518 519 /* ================================================520 PARALLAX LAYERS521 ================================================ */522 .parallax-slow { will-change: transform; }523 .parallax-fast { will-change: transform; }524 525 /* ================================================526 HERO TEXT STYLES527 ================================================ */528 .hero-word {529 display: inline-block;530 transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1), color 0.3s;531 }532 .hero-word:hover {533 transform: translateY(-4px) scale(1.05);534 color: var(--daffodil);535 }536 537 /* ================================================538 SPECIAL TYPOGRAPHY539 ================================================ */540 .handwritten {541 font-family: 'Quicksand', sans-serif;542 font-weight: 700;543 letter-spacing: 0.02em;544 }545 546 /* ================================================547 SPARKLE PARTICLES548 ================================================ */549 .sparkle {550 position: absolute;551 width: 6px;552 height: 6px;553 background: #FFD93D;554 border-radius: 50%;555 pointer-events: none;556 opacity: 0;557 }558 .sparkle::before {559 content: '';560 position: absolute;561 inset: -3px;562 border-radius: 50%;563 background: inherit;564 opacity: 0.3;565 filter: blur(2px);566 }567 568 /* ================================================569 HAMMOCK ANIMATION570 ================================================ */571 @keyframes hammock-sway {572 0%, 100% { transform: rotate(-1.5deg); }573 50% { transform: rotate(1.5deg); }574 }575 .hammock-sway {576 transform-origin: top center;577 animation: hammock-sway 4s ease-in-out infinite;578 }579 580 /* ================================================581 RESPONSIVE582 ================================================ */583 @media (max-width: 768px) {584 .hero-character-wrapper svg { max-height: 50vh; }585 .cta-glow:hover { transform: translateY(-2px) scale(1.01); }586 .feature-card:hover { transform: translateY(-6px) scale(1.01); }587 }588 589 @media (prefers-reduced-motion: reduce) {590 *, *::before, *::after {591 animation-duration: 0.01ms !important;592 animation-iteration-count: 1 !important;593 transition-duration: 0.01ms !important;594 }595 }596 </style>597</head>598<body>599 600 <!-- ============================================================601 CURSOR GLOW602 ============================================================ -->603 <div class="cursor-blob hidden lg:block" id="cursorBlob"></div>604 605 <!-- ============================================================606 NAVIGATION607 ============================================================ -->608 <nav class="fixed top-0 left-0 right-0 z-50 px-4 pt-4">609 <div class="max-w-7xl mx-auto">610 <div class="glass-strong rounded-full px-6 py-3 flex items-center justify-between shadow-lg shadow-daffodil-100/30">611 <div class="flex items-center gap-3">612 <div class="w-9 h-9 rounded-full bg-gradient-to-br from-daffodil to-golden flex items-center justify-center shadow-lg">613 <i class="fa-solid fa-paw text-white text-sm drop-shadow-sm"></i>614 </div>615 <span class="font-fredoka text-xl font-bold text-ink tracking-tight">Lemon<span class="text-daffodil">Paws</span></span>616 </div>617 <div class="hidden md:flex items-center gap-1.5">618 <a href="#story" class="nav-pill px-5 py-2 rounded-full text-sm font-semibold text-ink/70 hover:text-ink">Our Story</a>619 <a href="#features" class="nav-pill px-5 py-2 rounded-full text-sm font-semibold text-ink/70 hover:text-ink">Features</a>620 <a href="#lookbook" class="nav-pill px-5 py-2 rounded-full text-sm font-semibold text-ink/70 hover:text-ink">Lookbook</a>621 <a href="#reviews" class="nav-pill px-5 py-2 rounded-full text-sm font-semibold text-ink/70 hover:text-ink">Reviews</a>622 </div>623 <a href="#shop" class="hidden md:flex items-center gap-2 bg-ink text-cream px-5 py-2.5 rounded-full text-sm font-bold hover:bg-ink-800 transition-all duration-300 hover:shadow-lg hover:shadow-ink/20 hover:-translate-y-0.5">624 <i class="fa-solid fa-bag-shopping text-daffodil"></i> Shop Now625 </a>626 <button class="md:hidden w-10 h-10 rounded-full bg-ink/5 flex items-center justify-center" onclick="alert('Menu coming soon!')">627 <i class="fa-solid fa-bars text-ink"></i>628 </button>629 </div>630 </div>631 </nav>632 633 <!-- ============================================================634 SECTION 1: HERO — The Rainy Day635 ============================================================ -->636 <section class="section-panel relative" id="hero">637 <!-- Dynamic sky background -->638 <div class="absolute inset-0 bg-gradient-to-b from-slateblue-50 via-mist-50/80 to-cream"></div>639 640 <!-- Decorative orbs -->641 <div class="orb orb-1 top-[10%] left-[5%]"></div>642 <div class="orb orb-2 top-[60%] right-[8%]"></div>643 <div class="orb orb-3 bottom-[20%] left-[40%]"></div>644 <div class="orb orb-4 top-[30%] right-[30%]"></div>645 646 <!-- Rain layer -->647 <div class="rain-layer" id="rainLayer"></div>648 649 <!-- Subtle water puddles at bottom -->650 <div class="absolute bottom-0 left-0 right-0 h-32 overflow-hidden pointer-events-none">651 <div class="puddle w-40 h-6 bottom-4 left-[10%] opacity-40"></div>652 <div class="puddle w-28 h-5 bottom-8 left-[25%] opacity-30"></div>653 <div class="puddle w-52 h-7 bottom-2 left-[55%] opacity-35"></div>654 <div class="puddle w-36 h-5 bottom-6 right-[15%] opacity-30"></div>655 <div class="puddle w-24 h-4 bottom-10 left-[75%] opacity-25"></div>656 </div>657 658 <!-- Ripple rings -->659 <div class="ripple-ring w-20 h-20 bottom-12 left-[15%] opacity-30" style="animation-delay: 0s;"></div>660 <div class="ripple-ring w-20 h-20 bottom-12 left-[15%] opacity-20" style="animation-delay: 1.5s;"></div>661 <div class="ripple-ring w-16 h-16 bottom-10 right-[20%] opacity-25" style="animation-delay: 0.8s;"></div>662 663 <!-- Subtle ground line -->664 <div class="absolute bottom-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-mist/40 to-transparent"></div>665 666 <div class="relative z-20 max-w-7xl mx-auto px-6 h-full flex items-center">667 <div class="grid lg:grid-cols-2 gap-8 lg:gap-16 items-center w-full pt-24 pb-12">668 669 <!-- Left: Text -->670 <div class="order-2 lg:order-1 parallax-slow" data-speed="0.4">671 <div class="reveal">672 <div class="inline-flex items-center gap-2 bg-daffodil-50 border border-daffodil-100 rounded-full px-4 py-1.5 mb-6">673 <i class="fa-solid fa-star text-golden text-xs"></i>674 <span class="text-xs font-bold text-ink-500 uppercase tracking-[0.2em]">Best Seller 2025</span>675 </div>676 </div>677 678 <h1 class="reveal reveal-l font-fredoka text-5xl md:text-6xl lg:text-7xl xl:text-8xl font-bold text-ink leading-[0.95] mb-6 tracking-tight">679 <span class="hero-word">Stay</span>680 <span class="hero-word text-daffodil">Dry</span><span class="hero-word">,</span><br>681 <span class="hero-word">Look</span>682 <span class="hero-word text-daffodil">Cute</span>683 </h1>684 685 <p class="reveal reveal-m text-lg md:text-xl text-ink-400 leading-relaxed mb-8 max-w-lg font-medium">686 Our classic yellow raincoat keeps your pup perfectly dry through every downpour.687 <span class="text-daffodil font-bold">Simple. Effortless. Adorable.</span>688 </p>689 690 <div class="reveal reveal-r flex flex-wrap gap-4">691 <a href="#shop" class="cta-glow bg-gradient-to-r from-daffodil to-golden text-ink font-fredoka font-bold text-base md:text-lg px-8 py-4 rounded-2xl shadow-xl shadow-daffodil-200/50 flex items-center gap-3 group">692 Get the Raincoat693 <i class="fa-solid fa-arrow-right transition-transform duration-300 group-hover:translate-x-1.5"></i>694 </a>695 <a href="#lookbook" class="glass px-8 py-4 rounded-2xl font-fredoka font-semibold text-ink hover:bg-daffodil-50 transition-all duration-300 flex items-center gap-3 text-base group">696 <div class="w-8 h-8 rounded-full bg-daffodil/20 flex items-center justify-center group-hover:bg-daffodil/40 transition-all">697 <i class="fa-solid fa-play text-daffodil text-xs"></i>698 </div>699 Watch Lookbook700 </a>701 </div>702 703 <!-- Trust indicators -->704 <div class="reveal reveal-r mt-10 flex items-center gap-6 text-sm text-ink-300 font-medium">705 <div class="flex items-center gap-2">706 <div class="w-2 h-2 rounded-full bg-moss animate-pulse"></div>707 <span>100% Waterproof</span>708 </div>709 <div class="flex items-center gap-2">710 <i class="fa-solid fa-truck-fast text-daffodil"></i>711 <span>Free Shipping</span>712 </div>713 <div class="flex items-center gap-2">714 <i class="fa-solid fa-rotate-left text-daffodil"></i>715 <span>30-Day Returns</span>716 </div>717 </div>718 </div>719 720 <!-- Right: Character -->721 <div class="order-1 lg:order-2 flex justify-center parallax-fast" data-speed="-0.3">722 <div class="hero-character-wrapper anim-bob">723 <svg viewBox="0 0 480 620" xmlns="http://www.w3.org/2000/svg">724 <defs>725 <!-- Coat gradient -->726 <linearGradient id="coatGrad" x1="0%" y1="0%" x2="100%" y2="100%">727 <stop offset="0%" stop-color="#FFD93D"/>728 <stop offset="50%" stop-color="#FFC107"/>729 <stop offset="100%" stop-color="#FFB300"/>730 </linearGradient>731 <!-- Coat dark -->732 <linearGradient id="coatDarkGrad" x1="0%" y1="0%" x2="0%" y2="100%">733 <stop offset="0%" stop-color="#FFC107"/>734 <stop offset="100%" stop-color="#E8A838"/>735 </linearGradient>736 <!-- Body -->737 <linearGradient id="bodyGrad" x1="0%" y1="0%" x2="0%" y2="100%">738 <stop offset="0%" stop-color="#E8C59A"/>739 <stop offset="100%" stop-color="#D4A373"/>740 </linearGradient>741 <!-- Hat -->742 <linearGradient id="hatGrad" x1="0%" y1="0%" x2="100%" y2="100%">743 <stop offset="0%" stop-color="#FFD93D"/>744 <stop offset="100%" stop-color="#FFC107"/>745 </linearGradient>746 <!-- Fur fluff -->747 <radialGradient id="fluffGrad" cx="50%" cy="50%" r="50%">748 <stop offset="0%" stop-color="#FFF5E0"/>749 <stop offset="100%" stop-color="#E8C59A"/>750 </radialGradient>751 <!-- Boot -->752 <linearGradient id="bootGrad" x1="0%" y1="0%" x2="100%" y2="100%">753 <stop offset="0%" stop-color="#F5E6D3"/>754 <stop offset="100%" stop-color="#D4A373"/>755 </linearGradient>756 <!-- Gloss sheen -->757 <linearGradient id="glossGrad" x1="0%" y1="0%" x2="100%" y2="100%">758 <stop offset="0%" stop-color="#FFFFFF" stop-opacity="0.45"/>759 <stop offset="100%" stop-color="#FFFFFF" stop-opacity="0"/>760 </linearGradient>761 <!-- Glow -->762 <radialGradient id="glowGrad" cx="50%" cy="50%" r="50%">763 <stop offset="0%" stop-color="#FFD93D" stop-opacity="0.12"/>764 <stop offset="100%" stop-color="#FFD93D" stop-opacity="0"/>765 </radialGradient>766 </defs>767 768 <!-- Soft glow behind -->769 <circle cx="240" cy="310" r="220" fill="url(#glowGrad)"/>770 771 <!-- Puddle -->772 <ellipse cx="240" cy="565" rx="110" ry="14" fill="rgba(255,255,255,0.2)"/>773 <ellipse cx="240" cy="565" rx="95" ry="10" fill="rgba(255,255,255,0.3)"/>774 775 <!-- Tail -->776 <g class="tail-group">777 <path d="M 330 460 Q 380 430 390 390 Q 395 360 375 370 Q 365 375 355 395 Q 340 430 320 460" fill="url(#bodyGrad)"/>778 <path d="M 330 460 Q 375 435 385 400" stroke="#C4975F" stroke-width="2" fill="none" opacity="0.4" stroke-linecap="round"/>779 </g>780 781 <!-- Back legs -->782 <path d="M 175 480 L 165 545 L 180 548 L 190 490 Z" fill="url(#bodyGrad)"/>783 <path d="M 285 480 L 295 545 L 280 548 L 270 490 Z" fill="url(#bodyGrad)"/>784 785 <!-- Back leg shadows -->786 <ellipse cx="172" cy="548" rx="10" ry="4" fill="rgba(45,41,38,0.06)"/>787 <ellipse cx="287" cy="548" rx="10" ry="4" fill="rgba(45,41,38,0.06)"/>788 789 <!-- Front legs -->790 <path d="M 210 470 L 205 550 L 222 553 L 225 475 Z" fill="url(#bodyGrad)"/>791 <path d="M 250 470 L 255 550 L 238 553 L 235 475 Z" fill="url(#bodyGrad)"/>792 793 <!-- Front leg shadows -->794 <ellipse cx="213" cy="552" rx="10" ry="4" fill="rgba(45,41,38,0.06)"/>795 <ellipse cx="246" cy="552" rx="10" ry="4" fill="rgba(45,41,38,0.06)"/>796 797 <!-- Collar -->798 <rect x="195" y="285" width="90" height="14" rx="7" fill="#E8C59A"/>799 <rect x="240" y="285" width="18" height="18" rx="9" fill="#FFD93D" transform="translate(0,4)"/>800 801 <!-- Body -->802 <path d="M 190 295 Q 180 380 190 450 Q 195 485 240 490 Q 285 485 290 450 Q 300 380 290 295 Z" fill="url(#bodyGrad)"/>803 <path d="M 200 350 Q 210 420 220 460" stroke="#C4975F" stroke-width="2" fill="none" opacity="0.2" stroke-linecap="round"/>804 <path d="M 280 350 Q 270 420 260 460" stroke="#C4975F" stroke-width="2" fill="none" opacity="0.2" stroke-linecap="round"/>805 806 <!-- Coat body -->807 <path d="M 185 305 Q 165 380 175 470 Q 180 490 240 495 Q 300 490 305 470 Q 315 380 295 305 Q 290 315 285 335 Q 280 425 275 475 Q 265 485 240 487 Q 215 485 205 475 Q 200 425 195 335 Q 190 315 185 305 Z" fill="url(#coatGrad)"/>808 <path d="M 205 325 Q 195 400 200 470 Q 205 480 240 483 Q 275 480 280 470 Q 285 400 275 325 Z" fill="url(#glossGrad)"/>809 810 <!-- Coat bottom hem -->811 <path d="M 180 470 Q 190 490 240 492 Q 290 490 300 470" stroke="#E8A838" stroke-width="3" fill="none" stroke-linecap="round"/>812 813 <!-- Coat buttons -->814 <circle cx="230" cy="370" r="5.5" fill="#E8A838"/>815 <circle cx="230" cy="370" r="2" fill="#FFC107"/>816 <circle cx="250" cy="370" r="5.5" fill="#E8A838"/>817 <circle cx="250" cy="370" r="2" fill="#FFC107"/>818 <circle cx="230" cy="420" r="5.5" fill="#E8A838"/>819 <circle cx="230" cy="420" r="2" fill="#FFC107"/>820 <circle cx="250" cy="420" r="5.5" fill="#E8A838"/>821 <circle cx="250" cy="420" r