572 lines
19 KiB
TypeScript
572 lines
19 KiB
TypeScript
|
import { Button } from "./ui/button";
|
||
|
|
import { Calendar, Briefcase, Sparkles } from "lucide-react";
|
||
|
|
import { motion } from "framer-motion";
|
||
|
|
import { useNavigate } from "react-router-dom";
|
||
|
|
|
||
|
|
// Firework component
|
||
|
|
const Firework = ({ delay = 0, top, left, colors }: { delay?: number; top: string; left: string; colors: string[] }) => {
|
||
|
|
return (
|
||
|
|
<motion.div
|
||
|
|
className="absolute pointer-events-none"
|
||
|
|
style={{ top, left }}
|
||
|
|
initial={{ opacity: 0, scale: 0 }}
|
||
|
|
animate={{
|
||
|
|
opacity: [0, 1, 1, 0],
|
||
|
|
scale: [0, 1.5, 2, 2.5],
|
||
|
|
}}
|
||
|
|
transition={{
|
||
|
|
duration: 3,
|
||
|
|
repeat: Infinity,
|
||
|
|
delay,
|
||
|
|
ease: "easeOut",
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<svg width="200" height="200" viewBox="0 0 200 200" className="w-48 h-48">
|
||
|
|
{/* Firework burst rays */}
|
||
|
|
{Array.from({ length: 24 }).map((_, i) => {
|
||
|
|
const angle = (i * 360) / 24;
|
||
|
|
const colorIndex = i % colors.length;
|
||
|
|
return (
|
||
|
|
<motion.line
|
||
|
|
key={i}
|
||
|
|
x1="100"
|
||
|
|
y1="100"
|
||
|
|
x2="100"
|
||
|
|
y2="20"
|
||
|
|
stroke={colors[colorIndex]}
|
||
|
|
strokeWidth="2"
|
||
|
|
strokeLinecap="round"
|
||
|
|
transform={`rotate(${angle} 100 100)`}
|
||
|
|
initial={{ opacity: 0 }}
|
||
|
|
animate={{
|
||
|
|
opacity: [0, 1, 0.8, 0],
|
||
|
|
}}
|
||
|
|
transition={{
|
||
|
|
duration: 3,
|
||
|
|
repeat: Infinity,
|
||
|
|
delay: delay + i * 0.02,
|
||
|
|
ease: "easeOut",
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
);
|
||
|
|
})}
|
||
|
|
{/* Center burst */}
|
||
|
|
<motion.circle
|
||
|
|
cx="100"
|
||
|
|
cy="100"
|
||
|
|
r="4"
|
||
|
|
fill={colors[0]}
|
||
|
|
initial={{ opacity: 0 }}
|
||
|
|
animate={{
|
||
|
|
opacity: [0, 1, 0.5, 0],
|
||
|
|
}}
|
||
|
|
transition={{
|
||
|
|
duration: 3,
|
||
|
|
repeat: Infinity,
|
||
|
|
delay,
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
</svg>
|
||
|
|
</motion.div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
// Sparkle Star component
|
||
|
|
const SparkleStar = ({ delay = 0, top, left, size = 16 }: { delay?: number; top: string; left: string; size?: number }) => {
|
||
|
|
return (
|
||
|
|
<motion.div
|
||
|
|
className="absolute pointer-events-none"
|
||
|
|
style={{ top, left }}
|
||
|
|
animate={{
|
||
|
|
scale: [0, 1, 0],
|
||
|
|
opacity: [0, 1, 0],
|
||
|
|
rotate: [0, 180, 360],
|
||
|
|
}}
|
||
|
|
transition={{
|
||
|
|
duration: 2.5,
|
||
|
|
repeat: Infinity,
|
||
|
|
delay,
|
||
|
|
ease: "easeInOut",
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<Sparkles className="text-[#ffaa40]" size={size} />
|
||
|
|
</motion.div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
// Marigold Flower component
|
||
|
|
const MarigoldFlower = ({ size = "md", delay = 0 }: { size?: "sm" | "md" | "lg"; delay?: number }) => {
|
||
|
|
const sizes = {
|
||
|
|
sm: 16,
|
||
|
|
md: 20,
|
||
|
|
lg: 24,
|
||
|
|
};
|
||
|
|
|
||
|
|
const flowerSize = sizes[size];
|
||
|
|
|
||
|
|
return (
|
||
|
|
<motion.div
|
||
|
|
className="relative"
|
||
|
|
style={{ width: flowerSize, height: flowerSize }}
|
||
|
|
animate={{
|
||
|
|
rotate: [0, 360],
|
||
|
|
scale: [1, 1.05, 1],
|
||
|
|
}}
|
||
|
|
transition={{
|
||
|
|
rotate: { duration: 20, repeat: Infinity, ease: "linear" },
|
||
|
|
scale: { duration: 2, repeat: Infinity, ease: "easeInOut", delay },
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
{/* Flower petals */}
|
||
|
|
<svg viewBox="0 0 100 100" className="w-full h-full">
|
||
|
|
{/* Outer petals */}
|
||
|
|
{Array.from({ length: 16 }).map((_, i) => {
|
||
|
|
const angle = (i * 360) / 16;
|
||
|
|
return (
|
||
|
|
<ellipse
|
||
|
|
key={i}
|
||
|
|
cx="50"
|
||
|
|
cy="25"
|
||
|
|
rx="8"
|
||
|
|
ry="15"
|
||
|
|
fill={`url(#gradient-${i % 3})`}
|
||
|
|
transform={`rotate(${angle} 50 50)`}
|
||
|
|
opacity={0.9}
|
||
|
|
/>
|
||
|
|
);
|
||
|
|
})}
|
||
|
|
|
||
|
|
{/* Inner petals */}
|
||
|
|
{Array.from({ length: 12 }).map((_, i) => {
|
||
|
|
const angle = (i * 360) / 12;
|
||
|
|
return (
|
||
|
|
<ellipse
|
||
|
|
key={`inner-${i}`}
|
||
|
|
cx="50"
|
||
|
|
cy="30"
|
||
|
|
rx="6"
|
||
|
|
ry="12"
|
||
|
|
fill={`url(#gradient-${(i + 1) % 3})`}
|
||
|
|
transform={`rotate(${angle} 50 50)`}
|
||
|
|
opacity={0.95}
|
||
|
|
/>
|
||
|
|
);
|
||
|
|
})}
|
||
|
|
|
||
|
|
{/* Center */}
|
||
|
|
<circle cx="50" cy="50" r="8" fill="#d97706" />
|
||
|
|
<circle cx="50" cy="50" r="5" fill="#b45309" opacity={0.8} />
|
||
|
|
|
||
|
|
{/* Gradient definitions */}
|
||
|
|
<defs>
|
||
|
|
<radialGradient id="gradient-0">
|
||
|
|
<stop offset="0%" stopColor="#fbbf24" />
|
||
|
|
<stop offset="100%" stopColor="#f59e0b" />
|
||
|
|
</radialGradient>
|
||
|
|
<radialGradient id="gradient-1">
|
||
|
|
<stop offset="0%" stopColor="#fcd34d" />
|
||
|
|
<stop offset="100%" stopColor="#fbbf24" />
|
||
|
|
</radialGradient>
|
||
|
|
<radialGradient id="gradient-2">
|
||
|
|
<stop offset="0%" stopColor="#f59e0b" />
|
||
|
|
<stop offset="100%" stopColor="#d97706" />
|
||
|
|
</radialGradient>
|
||
|
|
</defs>
|
||
|
|
</svg>
|
||
|
|
|
||
|
|
{/* Glow effect */}
|
||
|
|
<div className="absolute inset-0 bg-[#ffaa40] rounded-full blur-sm opacity-30"></div>
|
||
|
|
</motion.div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
// Flower Garland (Toran) component
|
||
|
|
const FlowerGarland = ({ left, flowerCount = 8, delay = 0 }: { left: string; flowerCount?: number; delay?: number }) => {
|
||
|
|
return (
|
||
|
|
<motion.div
|
||
|
|
className="absolute top-0 z-20 pointer-events-none"
|
||
|
|
style={{ left }}
|
||
|
|
initial={{ y: -20, opacity: 0 }}
|
||
|
|
animate={{ y: 0, opacity: 1 }}
|
||
|
|
transition={{ duration: 1, delay }}
|
||
|
|
>
|
||
|
|
{/* String/thread */}
|
||
|
|
<div className="absolute left-1/2 -translate-x-1/2 w-0.5 bg-gradient-to-b from-[#78350f] to-transparent opacity-50"
|
||
|
|
style={{ height: `${flowerCount * 35}px` }}></div>
|
||
|
|
|
||
|
|
{/* Flowers on string */}
|
||
|
|
<div className="relative flex flex-col items-center gap-1">
|
||
|
|
{Array.from({ length: flowerCount }).map((_, i) => (
|
||
|
|
<motion.div
|
||
|
|
key={i}
|
||
|
|
className="relative"
|
||
|
|
animate={{
|
||
|
|
y: [0, 5, 0],
|
||
|
|
rotate: [0, 3, -3, 0],
|
||
|
|
}}
|
||
|
|
transition={{
|
||
|
|
duration: 2 + i * 0.2,
|
||
|
|
repeat: Infinity,
|
||
|
|
ease: "easeInOut",
|
||
|
|
delay: delay + i * 0.1,
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<MarigoldFlower
|
||
|
|
size={i % 3 === 0 ? "lg" : i % 2 === 0 ? "md" : "sm"}
|
||
|
|
delay={i * 0.2}
|
||
|
|
/>
|
||
|
|
</motion.div>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
</motion.div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
// Decorative Hanging Lantern component
|
||
|
|
const DecorativeLantern = () => {
|
||
|
|
return (
|
||
|
|
<motion.div
|
||
|
|
className="absolute top-0 left-1/2 -translate-x-1/2 z-30 pointer-events-none"
|
||
|
|
initial={{ y: -100, opacity: 0 }}
|
||
|
|
animate={{ y: 0, opacity: 1 }}
|
||
|
|
transition={{ duration: 1.2, delay: 0.3, ease: "easeOut" }}
|
||
|
|
>
|
||
|
|
<motion.div
|
||
|
|
animate={{
|
||
|
|
y: [0, 12, 0],
|
||
|
|
rotate: [0, 2, -2, 0],
|
||
|
|
}}
|
||
|
|
transition={{
|
||
|
|
duration: 4,
|
||
|
|
repeat: Infinity,
|
||
|
|
ease: "easeInOut",
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<svg width="120" height="200" viewBox="0 0 120 200" fill="none">
|
||
|
|
{/* Hanging String */}
|
||
|
|
<line x1="60" y1="0" x2="60" y2="35" stroke="#4a4a4a" strokeWidth="1.5" />
|
||
|
|
|
||
|
|
{/* Top Cap - Cyan/Blue */}
|
||
|
|
<rect x="45" y="35" width="30" height="8" fill="#22d3ee" rx="2" />
|
||
|
|
<rect x="42" y="43" width="36" height="3" fill="#06b6d4" />
|
||
|
|
|
||
|
|
{/* Top decoration line - Purple accent */}
|
||
|
|
<rect x="40" y="46" width="40" height="2" fill="#8b5cf6" rx="1" />
|
||
|
|
|
||
|
|
{/* Main Lantern Body - Golden Orange with curves */}
|
||
|
|
<path
|
||
|
|
d="M 50 50
|
||
|
|
Q 35 70, 40 95
|
||
|
|
Q 42 110, 50 120
|
||
|
|
L 70 120
|
||
|
|
Q 78 110, 80 95
|
||
|
|
Q 85 70, 70 50
|
||
|
|
Z"
|
||
|
|
fill="url(#lanternGradient)"
|
||
|
|
stroke="#f59e0b"
|
||
|
|
strokeWidth="2"
|
||
|
|
/>
|
||
|
|
|
||
|
|
{/* Inner decorative pattern - curved diamond */}
|
||
|
|
<path
|
||
|
|
d="M 60 65
|
||
|
|
Q 50 75, 60 85
|
||
|
|
Q 70 75, 60 65
|
||
|
|
Z"
|
||
|
|
fill="none"
|
||
|
|
stroke="#d97706"
|
||
|
|
strokeWidth="1.5"
|
||
|
|
opacity="0.7"
|
||
|
|
/>
|
||
|
|
<path
|
||
|
|
d="M 60 85
|
||
|
|
Q 50 95, 60 105
|
||
|
|
Q 70 95, 60 85
|
||
|
|
Z"
|
||
|
|
fill="none"
|
||
|
|
stroke="#d97706"
|
||
|
|
strokeWidth="1.5"
|
||
|
|
opacity="0.7"
|
||
|
|
/>
|
||
|
|
|
||
|
|
{/* Vertical center line */}
|
||
|
|
<line x1="60" y1="70" x2="60" y2="100" stroke="#d97706" strokeWidth="1" opacity="0.5" />
|
||
|
|
|
||
|
|
{/* Highlight shine */}
|
||
|
|
<ellipse cx="55" cy="75" rx="8" ry="15" fill="#fff9e6" opacity="0.15" />
|
||
|
|
|
||
|
|
{/* Bottom Cap - Cyan/Blue */}
|
||
|
|
<rect x="40" y="120" width="40" height="2" fill="#8b5cf6" rx="1" />
|
||
|
|
<rect x="42" y="122" width="36" height="3" fill="#06b6d4" />
|
||
|
|
<rect x="45" y="125" width="30" height="8" fill="#22d3ee" rx="2" />
|
||
|
|
|
||
|
|
{/* Hanging Tassels - Cyan strands */}
|
||
|
|
{Array.from({ length: 7 }).map((_, i) => {
|
||
|
|
const x = 45 + i * 5;
|
||
|
|
return (
|
||
|
|
<g key={i}>
|
||
|
|
<motion.line
|
||
|
|
x1={x}
|
||
|
|
y1="133"
|
||
|
|
x2={x}
|
||
|
|
y2={158 + Math.sin(i) * 8}
|
||
|
|
stroke="#22d3ee"
|
||
|
|
strokeWidth="1.5"
|
||
|
|
strokeLinecap="round"
|
||
|
|
initial={{ pathLength: 0 }}
|
||
|
|
animate={{
|
||
|
|
pathLength: 1,
|
||
|
|
y: [0, 3, 0],
|
||
|
|
}}
|
||
|
|
transition={{
|
||
|
|
pathLength: { duration: 0.8, delay: 0.5 + i * 0.05 },
|
||
|
|
y: { duration: 2 + i * 0.1, repeat: Infinity, ease: "easeInOut" }
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
</g>
|
||
|
|
);
|
||
|
|
})}
|
||
|
|
|
||
|
|
{/* Gradient Definitions */}
|
||
|
|
<defs>
|
||
|
|
<linearGradient id="lanternGradient" x1="0%" y1="0%" x2="100%" y2="100%">
|
||
|
|
<stop offset="0%" stopColor="#fb923c" />
|
||
|
|
<stop offset="30%" stopColor="#f59e0b" />
|
||
|
|
<stop offset="60%" stopColor="#fbbf24" />
|
||
|
|
<stop offset="100%" stopColor="#f59e0b" />
|
||
|
|
</linearGradient>
|
||
|
|
</defs>
|
||
|
|
</svg>
|
||
|
|
|
||
|
|
{/* Glow effect */}
|
||
|
|
<div className="absolute top-[50px] left-1/2 -translate-x-1/2 w-20 h-24 bg-[#ffaa40] rounded-full blur-2xl opacity-20"></div>
|
||
|
|
</motion.div>
|
||
|
|
</motion.div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export function DiwaliHeroSection() {
|
||
|
|
const navigate = useNavigate();
|
||
|
|
return (
|
||
|
|
<section id="hero" className="relative min-h-screen flex items-center justify-center pt-20 overflow-hidden bg-[#0E0E0E]">
|
||
|
|
{/* Dark Background with subtle glow */}
|
||
|
|
<div className="absolute inset-0 bg-gradient-radial from-[#1a1a1a] via-[#0E0E0E] to-[#000000]"></div>
|
||
|
|
|
||
|
|
{/* Decorative Hanging Lantern - Center Top */}
|
||
|
|
<DecorativeLantern />
|
||
|
|
|
||
|
|
{/* Marigold Flower Garlands (Torans) - Minimal placement */}
|
||
|
|
<FlowerGarland left="8%" flowerCount={7} delay={0.2} />
|
||
|
|
<FlowerGarland left="25%" flowerCount={6} delay={0.4} />
|
||
|
|
<FlowerGarland left="75%" flowerCount={7} delay={0.3} />
|
||
|
|
<FlowerGarland left="92%" flowerCount={6} delay={0.5} />
|
||
|
|
|
||
|
|
{/* Animated Fireworks */}
|
||
|
|
<Firework delay={0} top="10%" left="15%" colors={["#E5195E", "#ff6b9d", "#E5195E"]} />
|
||
|
|
<Firework delay={1.5} top="20%" left="70%" colors={["#9c40ff", "#c084fc", "#9c40ff"]} />
|
||
|
|
<Firework delay={0.8} top="60%" left="80%" colors={["#ffaa40", "#fcd34d", "#ffaa40"]} />
|
||
|
|
<Firework delay={2.2} top="15%" left="45%" colors={["#ff6b00", "#fb923c", "#ff6b00"]} />
|
||
|
|
<Firework delay={1.2} top="70%" left="20%" colors={["#E5195E", "#9c40ff", "#ffaa40"]} />
|
||
|
|
<Firework delay={2.8} top="40%" left="90%" colors={["#fcd34d", "#ffaa40", "#ff6b00"]} />
|
||
|
|
|
||
|
|
{/* Floating Sparkles */}
|
||
|
|
{[...Array(25)].map((_, i) => (
|
||
|
|
<SparkleStar
|
||
|
|
key={i}
|
||
|
|
delay={Math.random() * 3}
|
||
|
|
top={`${Math.random() * 100}%`}
|
||
|
|
left={`${Math.random() * 100}%`}
|
||
|
|
size={12 + Math.random() * 8}
|
||
|
|
/>
|
||
|
|
))}
|
||
|
|
|
||
|
|
{/* Small floating particles */}
|
||
|
|
{[...Array(40)].map((_, i) => (
|
||
|
|
<motion.div
|
||
|
|
key={`particle-${i}`}
|
||
|
|
className="absolute w-1 h-1 bg-[#ffaa40] rounded-full pointer-events-none"
|
||
|
|
style={{
|
||
|
|
top: `${Math.random() * 100}%`,
|
||
|
|
left: `${Math.random() * 100}%`,
|
||
|
|
}}
|
||
|
|
animate={{
|
||
|
|
y: [0, -50, 0],
|
||
|
|
opacity: [0, 0.8, 0],
|
||
|
|
}}
|
||
|
|
transition={{
|
||
|
|
duration: 3 + Math.random() * 2,
|
||
|
|
repeat: Infinity,
|
||
|
|
delay: Math.random() * 4,
|
||
|
|
ease: "easeInOut",
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
))}
|
||
|
|
|
||
|
|
{/* Main Content */}
|
||
|
|
<div className="container mx-auto px-6 lg:px-8 relative z-30">
|
||
|
|
<div className="max-w-5xl mx-auto text-center">
|
||
|
|
{/* Top Badge */}
|
||
|
|
<motion.div
|
||
|
|
className="inline-flex items-center gap-2 mb-8"
|
||
|
|
initial={{ opacity: 0, y: -20 }}
|
||
|
|
animate={{ opacity: 1, y: 0 }}
|
||
|
|
transition={{ duration: 0.8, delay: 0.2 }}
|
||
|
|
>
|
||
|
|
<motion.span
|
||
|
|
animate={{
|
||
|
|
rotate: [0, 10, -10, 0],
|
||
|
|
}}
|
||
|
|
transition={{
|
||
|
|
duration: 2,
|
||
|
|
repeat: Infinity,
|
||
|
|
ease: "easeInOut",
|
||
|
|
}}
|
||
|
|
className="text-3xl"
|
||
|
|
>
|
||
|
|
🪔
|
||
|
|
</motion.span>
|
||
|
|
<span className="text-2xl font-manrope font-semibold">
|
||
|
|
<span className="text-[#E5195E]">WDI</span>
|
||
|
|
<span className="bg-gradient-to-r from-[#ffaa40] via-[#fff9e6] to-[#ffaa40] bg-clip-text text-transparent"> Wishes you</span>
|
||
|
|
</span>
|
||
|
|
<motion.span
|
||
|
|
animate={{
|
||
|
|
rotate: [0, -10, 10, 0],
|
||
|
|
}}
|
||
|
|
transition={{
|
||
|
|
duration: 2,
|
||
|
|
repeat: Infinity,
|
||
|
|
ease: "easeInOut",
|
||
|
|
delay: 0.5,
|
||
|
|
}}
|
||
|
|
className="text-3xl"
|
||
|
|
>
|
||
|
|
🪔
|
||
|
|
</motion.span>
|
||
|
|
</motion.div>
|
||
|
|
|
||
|
|
{/* Main Heading */}
|
||
|
|
<motion.h1
|
||
|
|
className="text-5xl sm:text-6xl md:text-7xl lg:text-8xl mb-8"
|
||
|
|
initial={{ opacity: 0, y: 30 }}
|
||
|
|
animate={{ opacity: 1, y: 0 }}
|
||
|
|
transition={{ duration: 1, delay: 0.4 }}
|
||
|
|
style={{
|
||
|
|
fontFamily: "'Cinzel Decorative', cursive",
|
||
|
|
fontWeight: 900,
|
||
|
|
letterSpacing: "0.05em",
|
||
|
|
lineHeight: 1.4,
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<span className="inline-block bg-gradient-to-r from-[#fff9e6] via-[#ffaa40] to-[#fff9e6] bg-clip-text text-transparent animate-gradient bg-[length:200%_100%]">
|
||
|
|
Happy Diwali
|
||
|
|
</span>
|
||
|
|
</motion.h1>
|
||
|
|
|
||
|
|
{/* Subtitle */}
|
||
|
|
<motion.p
|
||
|
|
className="text-lg sm:text-xl md:text-2xl text-gray-300 mb-12 max-w-3xl mx-auto leading-relaxed font-manrope"
|
||
|
|
initial={{ opacity: 0, y: 20 }}
|
||
|
|
animate={{ opacity: 1, y: 0 }}
|
||
|
|
transition={{ duration: 0.8, delay: 0.6 }}
|
||
|
|
>
|
||
|
|
Wishing you a Diwali filled with{" "}
|
||
|
|
<span className="text-[#ffaa40] font-semibold">light</span>,{" "}
|
||
|
|
<span className="text-[#E5195E] font-semibold">success</span>, and{" "}
|
||
|
|
<span className="text-[#9c40ff] font-semibold">lightning-fast launches</span>.
|
||
|
|
</motion.p>
|
||
|
|
|
||
|
|
{/* CTA Buttons */}
|
||
|
|
<motion.div
|
||
|
|
className="flex flex-col sm:flex-row gap-4 justify-center items-center"
|
||
|
|
initial={{ opacity: 0, y: 20 }}
|
||
|
|
animate={{ opacity: 1, y: 0 }}
|
||
|
|
transition={{ duration: 0.8, delay: 0.8 }}
|
||
|
|
>
|
||
|
|
<Button
|
||
|
|
size="lg"
|
||
|
|
className="relative overflow-hidden group px-8 py-6 text-base font-manrope bg-gradient-to-r from-[#E5195E] to-[#ff6b9d] hover:from-[#ff6b9d] hover:to-[#E5195E] border-0 shadow-[0_0_30px_rgba(229,25,94,0.3)] hover:shadow-[0_0_40px_rgba(229,25,94,0.5)] transition-all duration-300"
|
||
|
|
onClick={() => navigate("/start-a-project")}
|
||
|
|
>
|
||
|
|
<Calendar className="w-5 h-5" />
|
||
|
|
<span className="relative z-10">Start Your Bright Journey</span>
|
||
|
|
<motion.div
|
||
|
|
className="absolute inset-0 bg-gradient-to-r from-[#ffaa40]/20 to-transparent"
|
||
|
|
animate={{
|
||
|
|
x: ["-100%", "100%"],
|
||
|
|
}}
|
||
|
|
transition={{
|
||
|
|
duration: 2,
|
||
|
|
repeat: Infinity,
|
||
|
|
ease: "linear",
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
</Button>
|
||
|
|
|
||
|
|
<Button
|
||
|
|
variant="secondary"
|
||
|
|
size="lg"
|
||
|
|
className="relative overflow-hidden group px-8 py-6 text-base font-manrope bg-[rgba(255,255,255,0.05)] backdrop-blur-md border border-[#ffaa40]/50 hover:bg-[rgba(255,255,255,0.1)] hover:border-[#ffaa40] shadow-[0_0_20px_rgba(255,170,64,0.2)] hover:shadow-[0_0_30px_rgba(255,170,64,0.4)] transition-all duration-300"
|
||
|
|
onClick={() => navigate("/services")}
|
||
|
|
>
|
||
|
|
<Briefcase className="w-5 h-5" />
|
||
|
|
<span className="relative z-10 text-white">Discover Our Solutions</span>
|
||
|
|
<motion.div
|
||
|
|
className="absolute inset-0 bg-gradient-to-r from-[#E5195E]/10 to-transparent"
|
||
|
|
animate={{
|
||
|
|
x: ["-100%", "100%"],
|
||
|
|
}}
|
||
|
|
transition={{
|
||
|
|
duration: 2.5,
|
||
|
|
repeat: Infinity,
|
||
|
|
ease: "linear",
|
||
|
|
delay: 0.5,
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
</Button>
|
||
|
|
</motion.div>
|
||
|
|
|
||
|
|
{/* Bottom decorative text */}
|
||
|
|
<motion.div
|
||
|
|
className="mt-16 text-sm text-gray-400 font-manrope"
|
||
|
|
initial={{ opacity: 0 }}
|
||
|
|
animate={{ opacity: 1 }}
|
||
|
|
transition={{ duration: 1, delay: 1.2 }}
|
||
|
|
>
|
||
|
|
<span className="inline-flex items-center gap-2">
|
||
|
|
May this festival bring prosperity to your business
|
||
|
|
<motion.span
|
||
|
|
animate={{ scale: [1, 1.2, 1] }}
|
||
|
|
transition={{ duration: 1.5, repeat: Infinity }}
|
||
|
|
>
|
||
|
|
🌟
|
||
|
|
</motion.span>
|
||
|
|
</span>
|
||
|
|
</motion.div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Bottom scroll indicator */}
|
||
|
|
<motion.div
|
||
|
|
className="absolute bottom-8 left-1/2 transform -translate-x-1/2 z-30"
|
||
|
|
initial={{ opacity: 0, y: -10 }}
|
||
|
|
animate={{ opacity: 1, y: 0 }}
|
||
|
|
transition={{ duration: 0.8, delay: 1.4 }}
|
||
|
|
>
|
||
|
|
<motion.div
|
||
|
|
animate={{ y: [0, 8, 0] }}
|
||
|
|
transition={{
|
||
|
|
duration: 1.5,
|
||
|
|
repeat: Infinity,
|
||
|
|
ease: "easeInOut",
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<svg className="w-6 h-6 text-[#ffaa40]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 14l-7 7m0 0l-7-7m7 7V3" />
|
||
|
|
</svg>
|
||
|
|
</motion.div>
|
||
|
|
</motion.div>
|
||
|
|
</section>
|
||
|
|
);
|
||
|
|
}
|