126 lines
3.8 KiB
TypeScript
126 lines
3.8 KiB
TypeScript
"use client";
|
|
|
|
import { motion } from "framer-motion";
|
|
import { useTranslations } from "next-intl";
|
|
import { Facebook, Linkedin, Send } from "lucide-react";
|
|
|
|
export function Footer() {
|
|
const t = useTranslations();
|
|
|
|
const socialLinks = [
|
|
{ icon: Facebook, href: "#", label: "Facebook" },
|
|
{ icon: Linkedin, href: "#", label: "LinkedIn" },
|
|
{ icon: Send, href: "#", label: "Telegram" },
|
|
];
|
|
|
|
const containerVariants = {
|
|
hidden: { opacity: 0 },
|
|
visible: {
|
|
opacity: 1,
|
|
transition: { staggerChildren: 0.1 },
|
|
},
|
|
};
|
|
|
|
const itemVariants = {
|
|
hidden: { opacity: 0, y: 10 },
|
|
visible: { opacity: 1, y: 0 },
|
|
};
|
|
|
|
return (
|
|
<footer className="bg-gray-900 text-white">
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
|
|
<motion.div
|
|
variants={containerVariants}
|
|
initial="hidden"
|
|
whileInView="visible"
|
|
viewport={{ once: true }}
|
|
className="grid grid-cols-1 md:grid-cols-4 gap-8 mb-12"
|
|
>
|
|
{/* Brand */}
|
|
<motion.div variants={itemVariants}>
|
|
<h3 className="text-2xl font-bold bg-linear-to-r from-blue-400 to-blue-600 bg-clip-text text-transparent mb-2">
|
|
FIRMA
|
|
</h3>
|
|
<p className="text-gray-400 text-sm">
|
|
Premium industrial pumps and equipment.
|
|
</p>
|
|
</motion.div>
|
|
|
|
{/* Quick Links */}
|
|
<motion.div variants={itemVariants}>
|
|
<h4 className="font-semibold mb-4">Quick Links</h4>
|
|
<ul className="space-y-2 text-gray-400 text-sm">
|
|
<li>
|
|
<a href="#about" className="hover:text-white transition-colors">
|
|
About Us
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a
|
|
href="#products"
|
|
className="hover:text-white transition-colors"
|
|
>
|
|
Products
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a
|
|
href="#contact"
|
|
className="hover:text-white transition-colors"
|
|
>
|
|
Contact
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</motion.div>
|
|
|
|
{/* Contact Info */}
|
|
<motion.div variants={itemVariants}>
|
|
<h4 className="font-semibold mb-4">Contact</h4>
|
|
<ul className="space-y-2 text-gray-400 text-sm">
|
|
<li>Email: info@firma.uz</li>
|
|
<li>Phone: +998 (99) 123-45-67</li>
|
|
<li>Telegram: @firma_support</li>
|
|
</ul>
|
|
</motion.div>
|
|
|
|
{/* Social */}
|
|
<motion.div variants={itemVariants}>
|
|
<h4 className="font-semibold mb-4">{t("footer.followUs")}</h4>
|
|
<div className="flex gap-4">
|
|
{socialLinks.map((link) => {
|
|
const Icon = link.icon;
|
|
return (
|
|
<motion.a
|
|
key={link.label}
|
|
href={link.href}
|
|
whileHover={{ scale: 1.2 }}
|
|
whileTap={{ scale: 0.95 }}
|
|
className="p-2 bg-gray-800 rounded-lg hover:bg-blue-600 transition-colors"
|
|
aria-label={link.label}
|
|
>
|
|
<Icon size={20} />
|
|
</motion.a>
|
|
);
|
|
})}
|
|
</div>
|
|
</motion.div>
|
|
</motion.div>
|
|
|
|
{/* Divider */}
|
|
<div className="border-t border-gray-800 pt-8">
|
|
<motion.p
|
|
initial={{ opacity: 0 }}
|
|
whileInView={{ opacity: 1 }}
|
|
transition={{ duration: 0.6 }}
|
|
viewport={{ once: true }}
|
|
className="text-center text-gray-400 text-sm"
|
|
>
|
|
{t("footer.copyright")}
|
|
</motion.p>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
);
|
|
}
|