91 lines
3.2 KiB
TypeScript
91 lines
3.2 KiB
TypeScript
"use client";
|
|
|
|
import { motion } from "framer-motion";
|
|
import { useState } from "react";
|
|
import { useTranslations } from "next-intl";
|
|
import { ArrowRight } from "lucide-react";
|
|
|
|
export default function NewsletterSection() {
|
|
const t = useTranslations("Newsletter");
|
|
const [email, setEmail] = useState("");
|
|
const [status, setStatus] = useState<"idle" | "success" | "error">("idle");
|
|
|
|
const handleSubmit = (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
setStatus("success");
|
|
setEmail("");
|
|
};
|
|
|
|
return (
|
|
<section className="border-t border-[#1A1A1A]/[0.06] py-14 lg:py-20 bg-white">
|
|
<div className="max-w-[1400px] mx-auto px-6">
|
|
<div className="max-w-2xl mx-auto text-center">
|
|
<motion.h2
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.6 }}
|
|
className="font-serif italic text-4xl lg:text-5xl xl:text-[3.5rem] text-[#1A1A1A] tracking-tight leading-[1.1] mb-6"
|
|
>
|
|
{t("stayConnected")}
|
|
</motion.h2>
|
|
|
|
<motion.p
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.6, delay: 0.1 }}
|
|
className="text-[#4A4A4A] mb-8"
|
|
>
|
|
{t("newsletterText")}
|
|
</motion.p>
|
|
|
|
<motion.form
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.6, delay: 0.2 }}
|
|
onSubmit={handleSubmit}
|
|
className="flex flex-col sm:flex-row gap-3 max-w-md mx-auto"
|
|
>
|
|
<input
|
|
type="email"
|
|
value={email}
|
|
onChange={(e) => setEmail(e.target.value)}
|
|
placeholder={t("emailPlaceholder")}
|
|
required
|
|
className="flex-1 px-4 py-4 h-14 border border-[#1A1A1A]/10 rounded-[4px] text-base focus:outline-none focus:border-[#1A1A1A]/30 transition-colors"
|
|
/>
|
|
<button
|
|
type="submit"
|
|
className="inline-flex items-center justify-center gap-2 bg-[#1A1A1A] text-white px-6 py-3 text-sm font-medium hover:bg-[#1A1A1A]/90 transition-colors rounded-[4px]"
|
|
>
|
|
{t("subscribe")}
|
|
<ArrowRight className="w-4 h-4" />
|
|
</button>
|
|
</motion.form>
|
|
|
|
{status === "success" && (
|
|
<motion.p
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
className="text-sm text-emerald-600 mt-4"
|
|
>
|
|
Hvala vam! Proverite email za vaš kod za popust.
|
|
</motion.p>
|
|
)}
|
|
|
|
<motion.p
|
|
initial={{ opacity: 0 }}
|
|
whileInView={{ opacity: 1 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.6, delay: 0.3 }}
|
|
className="text-xs text-[#4A4A4A]/60 mt-4"
|
|
>
|
|
Prijavom prihvatate našu Politiku privatnosti. Možete se odjaviti bilo kada.
|
|
</motion.p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
} |