132 lines
4.2 KiB
TypeScript
132 lines
4.2 KiB
TypeScript
"use client";
|
|
|
|
import { useLanguage } from "@/context/language-context";
|
|
import { motion } from "framer-motion";
|
|
import { Facebook, Linkedin, Send } from "lucide-react";
|
|
import Image from "next/image";
|
|
|
|
export function Footer() {
|
|
const { t } = useLanguage();
|
|
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-linear-to-br from-primary to-gray-800 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=" mb-2">
|
|
<Image
|
|
src="/logo.jpg"
|
|
alt="image"
|
|
width={80}
|
|
height={50}
|
|
className="rounded-xl object-cover"
|
|
/>
|
|
</h3>
|
|
<p className="text-gray-400 text-sm">
|
|
{t.footer.common.premium_title}
|
|
</p>
|
|
</motion.div>
|
|
|
|
{/* Quick Links */}
|
|
<motion.div variants={itemVariants}>
|
|
<h4 className="font-semibold mb-4">{t.footer.common.quickLinks}</h4>
|
|
<ul className="space-y-2 text-gray-400 text-sm">
|
|
<li>
|
|
<a href="#about" className="hover:text-white transition-colors text-[15px] ">
|
|
{t.footer.common.aboutUs}
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a
|
|
href="#products"
|
|
className="hover:text-white text-[15px] transition-colors"
|
|
>
|
|
{t.footer.common.products}
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a
|
|
href="#contact"
|
|
className="hover:text-white text-[15px] transition-colors"
|
|
>
|
|
{t.footer.common.contact}
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</motion.div>
|
|
|
|
{/* Contact Info */}
|
|
<motion.div variants={itemVariants}>
|
|
<h4 className="font-semibold mb-4">{t.footer.common.contact}</h4>
|
|
<ul className="space-y-2 text-gray-400 text-sm">
|
|
<li className="text-[15px]">{t.footer.common.email}: info@firma.uz</li>
|
|
<li className="text-[15px]">{t.footer.common.phone}: +998 (99) 123-45-67</li>
|
|
<li className="text-[15px]">{t.footer.common.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-primary 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>
|
|
);
|
|
}
|