bde9f706ce
- Implemented VpnServicesService for managing VPN plans and activation fees. - Created SimCallHistoryFormatterService for formatting call history data. - Developed SimCallHistoryParserService to parse call history CSV files. - Added AnimatedContainer and AnimatedBackground components for UI animations. - Introduced BentoServiceCard, FloatingGlassCard, GlowButton, and ValuePropCard components for landing page. - Implemented useCountUp hook for animated number counting. - Added cancellation months utility functions for subscription management.
71 lines
2.2 KiB
TypeScript
71 lines
2.2 KiB
TypeScript
import { cn } from "@/shared/utils";
|
|
|
|
interface AnimatedBackgroundProps {
|
|
className?: string;
|
|
}
|
|
|
|
/**
|
|
* Mesh gradient background with floating geometric shapes
|
|
*/
|
|
export function AnimatedBackground({ className }: AnimatedBackgroundProps) {
|
|
return (
|
|
<div className={cn("absolute inset-0 -z-10 overflow-hidden", className)}>
|
|
{/* Mesh gradient */}
|
|
<div
|
|
className={cn(
|
|
"absolute inset-0",
|
|
"bg-[radial-gradient(ellipse_at_20%_30%,_oklch(0.72_0.12_260_/_0.12)_0%,_transparent_50%),",
|
|
"radial-gradient(ellipse_at_80%_20%,_oklch(0.72_0.14_290_/_0.08)_0%,_transparent_50%),",
|
|
"radial-gradient(ellipse_at_60%_80%,_oklch(0.75_0.1_200_/_0.06)_0%,_transparent_50%)]"
|
|
)}
|
|
style={{
|
|
background: `
|
|
radial-gradient(ellipse at 20% 30%, oklch(0.72 0.12 260 / 0.12) 0%, transparent 50%),
|
|
radial-gradient(ellipse at 80% 20%, oklch(0.72 0.14 290 / 0.08) 0%, transparent 50%),
|
|
radial-gradient(ellipse at 60% 80%, oklch(0.75 0.1 200 / 0.06) 0%, transparent 50%)
|
|
`,
|
|
}}
|
|
/>
|
|
|
|
{/* Floating shapes */}
|
|
<div
|
|
className={cn(
|
|
"absolute top-1/4 left-1/4 w-64 h-64 rounded-full",
|
|
"bg-gradient-to-br from-primary/5 to-transparent",
|
|
"cp-float-slow blur-3xl"
|
|
)}
|
|
aria-hidden="true"
|
|
/>
|
|
<div
|
|
className={cn(
|
|
"absolute top-1/2 right-1/4 w-48 h-48 rounded-full",
|
|
"bg-gradient-to-br from-accent-gradient/5 to-transparent",
|
|
"cp-float-delayed blur-3xl"
|
|
)}
|
|
aria-hidden="true"
|
|
/>
|
|
<div
|
|
className={cn(
|
|
"absolute bottom-1/4 left-1/3 w-32 h-32 rounded-full",
|
|
"bg-gradient-to-br from-primary/8 to-transparent",
|
|
"cp-float blur-2xl"
|
|
)}
|
|
aria-hidden="true"
|
|
/>
|
|
|
|
{/* Subtle grid pattern overlay */}
|
|
<div
|
|
className="absolute inset-0 opacity-[0.02]"
|
|
style={{
|
|
backgroundImage: `
|
|
linear-gradient(to right, currentColor 1px, transparent 1px),
|
|
linear-gradient(to bottom, currentColor 1px, transparent 1px)
|
|
`,
|
|
backgroundSize: "64px 64px",
|
|
}}
|
|
aria-hidden="true"
|
|
/>
|
|
</div>
|
|
);
|
|
}
|