new web sayt

components/Footer.tsx

@@ -0,0 +1,125 @@
+"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>
+  );
+}