- 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.
63 lines
1.8 KiB
TypeScript
63 lines
1.8 KiB
TypeScript
import Link from "next/link";
|
|
import { cn } from "@/shared/utils";
|
|
import type { ReactNode } from "react";
|
|
|
|
interface GlowButtonProps {
|
|
href: string;
|
|
children: ReactNode;
|
|
className?: string;
|
|
variant?: "primary" | "secondary";
|
|
}
|
|
|
|
/**
|
|
* Premium button with animated glow effect on hover
|
|
*/
|
|
export function GlowButton({ href, children, className, variant = "primary" }: GlowButtonProps) {
|
|
if (variant === "secondary") {
|
|
return (
|
|
<Link
|
|
href={href}
|
|
className={cn(
|
|
"inline-flex items-center justify-center gap-2 rounded-lg px-8 py-4 text-lg font-semibold",
|
|
"border border-border bg-background text-foreground",
|
|
"hover:bg-accent hover:text-accent-foreground",
|
|
"transition-all duration-[var(--cp-duration-normal)]",
|
|
"hover:-translate-y-0.5 active:translate-y-0",
|
|
className
|
|
)}
|
|
>
|
|
{children}
|
|
</Link>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<Link href={href} className={cn("relative group", className)}>
|
|
{/* Glow layer */}
|
|
<span
|
|
className={cn(
|
|
"absolute -inset-1 rounded-xl blur-md",
|
|
"bg-gradient-to-r from-primary via-accent-gradient to-primary",
|
|
"opacity-50 group-hover:opacity-80",
|
|
"transition-opacity duration-[var(--cp-duration-slow)]"
|
|
)}
|
|
aria-hidden="true"
|
|
/>
|
|
|
|
{/* Button */}
|
|
<span
|
|
className={cn(
|
|
"relative inline-flex items-center justify-center gap-2 rounded-lg px-8 py-4 text-lg font-semibold",
|
|
"bg-primary text-primary-foreground",
|
|
"shadow-lg shadow-primary/20",
|
|
"transition-all duration-[var(--cp-duration-normal)]",
|
|
"group-hover:-translate-y-0.5 group-hover:shadow-primary/30",
|
|
"group-active:translate-y-0"
|
|
)}
|
|
>
|
|
{children}
|
|
</span>
|
|
</Link>
|
|
);
|
|
}
|