78 lines
2.7 KiB
TypeScript
78 lines
2.7 KiB
TypeScript
"use client";
|
|
|
|
import { motion } from "framer-motion";
|
|
import { ArrowRight, Mail } from "lucide-react";
|
|
import GlowButton from "@/components/ui/GlowButton";
|
|
import { fadeUp, stagger, viewportConfig } from "@/lib/animations";
|
|
import type { Dictionary, Locale } from "@/lib/dictionaries";
|
|
|
|
interface CTAProps {
|
|
locale: Locale;
|
|
dict: Dictionary;
|
|
}
|
|
|
|
export default function CTA({ locale, dict }: CTAProps) {
|
|
return (
|
|
<section className="relative w-full py-24 sm:py-32">
|
|
<div className="relative mx-auto w-full max-w-7xl px-6 lg:px-8">
|
|
<motion.div
|
|
initial="hidden"
|
|
whileInView="visible"
|
|
viewport={viewportConfig}
|
|
variants={stagger(0.08)}
|
|
className="relative overflow-hidden rounded-3xl border border-purple-400/30 bg-gradient-to-br from-purple-500/10 via-surface/60 to-purple-700/10 px-8 py-16 text-center backdrop-blur-md sm:px-16 sm:py-24"
|
|
>
|
|
{/* Background effects */}
|
|
<div className="absolute -left-32 -top-32 h-96 w-96 rounded-full bg-purple-500/20 blur-3xl" />
|
|
<div className="absolute -bottom-32 -right-32 h-96 w-96 rounded-full bg-purple-400/15 blur-3xl" />
|
|
<div className="absolute inset-0 grid-bg opacity-30 [mask-image:radial-gradient(ellipse_at_center,#000_20%,transparent_70%)]" />
|
|
|
|
<div className="relative mx-auto max-w-3xl">
|
|
<motion.h2
|
|
variants={fadeUp}
|
|
className="font-display text-display-lg font-medium tracking-tight"
|
|
>
|
|
<span className="text-gradient-fade">{dict.cta.title}</span>
|
|
<br />
|
|
<span className="text-gradient-purple">
|
|
{dict.cta.titleAccent}
|
|
</span>
|
|
</motion.h2>
|
|
|
|
<motion.p
|
|
variants={fadeUp}
|
|
className="mx-auto mt-6 max-w-xl text-base leading-relaxed text-text-secondary sm:text-lg"
|
|
>
|
|
{dict.cta.subtitle}
|
|
</motion.p>
|
|
|
|
<motion.div
|
|
variants={fadeUp}
|
|
className="mt-10 flex flex-wrap items-center justify-center gap-3"
|
|
>
|
|
<GlowButton
|
|
href={`/${locale}/contact`}
|
|
variant="primary"
|
|
size="lg"
|
|
icon={<ArrowRight className="h-4 w-4" />}
|
|
>
|
|
{dict.cta.contact}
|
|
</GlowButton>
|
|
|
|
<GlowButton
|
|
href={`mailto:${dict.cta.email}`}
|
|
variant="secondary"
|
|
size="lg"
|
|
icon={<Mail className="h-4 w-4" />}
|
|
iconPosition="left"
|
|
>
|
|
{dict.cta.email}
|
|
</GlowButton>
|
|
</motion.div>
|
|
</div>
|
|
</motion.div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|