52 lines
2.4 KiB
TypeScript
52 lines
2.4 KiB
TypeScript
"use client";
|
|
|
|
import { useTranslations } from "next-intl";
|
|
import { motion } from "framer-motion";
|
|
|
|
export function Newsletter() {
|
|
const t = useTranslations("newsletter");
|
|
|
|
return (
|
|
<section className="py-24 bg-[#002045] text-white overflow-hidden relative" aria-label={t("title")}>
|
|
{/* Decorative Background Elements */}
|
|
<div className="absolute top-0 left-0 w-full h-full overflow-hidden z-0" aria-hidden="true">
|
|
<div className="absolute -top-[20%] -left-[10%] w-[50%] h-[150%] bg-white/5 blur-3xl transform rotate-12 rounded-full" />
|
|
<div className="absolute -bottom-[20%] -right-[10%] w-[50%] h-[150%] bg-[#CA8A04]/10 blur-3xl transform -rotate-12 rounded-full" />
|
|
</div>
|
|
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 30 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true, margin: "-50px" }}
|
|
transition={{ duration: 0.6 }}
|
|
className="max-w-7xl mx-auto px-4 md:px-12 relative z-10 text-center motion-reduce:!transform-none motion-reduce:!opacity-100"
|
|
>
|
|
<h2 className="font-heading text-4xl md:text-5xl text-white mb-6 font-bold tracking-tight">
|
|
{t("title")}
|
|
</h2>
|
|
<p className="font-body-lg text-lg text-white/70 mb-10 max-w-xl mx-auto" style={{ maxWidth: "65ch" }}>
|
|
{t("desc")}
|
|
</p>
|
|
|
|
<form className="max-w-md mx-auto flex flex-col md:flex-row gap-4" onSubmit={(e) => e.preventDefault()}>
|
|
<label htmlFor="newsletter-email" className="sr-only">{t("label")}</label>
|
|
<input
|
|
id="newsletter-email"
|
|
className="flex-1 bg-white/10 border border-white/20 text-white placeholder-white/40 rounded-lg px-6 py-4 focus:ring-2 focus:ring-[#CA8A04]/50 focus:border-[#CA8A04] outline-none transition-colors duration-200 min-h-[48px]"
|
|
placeholder={t("placeholder")}
|
|
type="email"
|
|
required
|
|
autoComplete="email"
|
|
/>
|
|
<button
|
|
type="submit"
|
|
className="bg-[#CA8A04] text-white px-8 py-4 rounded-lg font-label-sm text-[12px] uppercase tracking-widest font-bold hover:bg-[#CA8A04]/90 transition-colors duration-200 shadow-lg cursor-pointer focus:ring-2 focus:ring-[#CA8A04]/50 focus:outline-none min-h-[48px]"
|
|
>
|
|
{t("subscribe")}
|
|
</button>
|
|
</form>
|
|
</motion.div>
|
|
</section>
|
|
);
|
|
}
|