Add src/components/footer/FooterLinksColumns/FooterLinksColumns.js

src/components/footer/FooterLinksColumns/FooterLinksColumns.js

@@ -0,0 +1,70 @@
+import React from 'react';
+import { Facebook, Twitter, Github, Linkedin } from 'lucide-react';
+
+function FooterLinksColumns() {
+  const footerLinks = {
+    Product: ['Features', 'Pricing', 'Documentation', 'API Reference'],
+    Company: ['About', 'Blog', 'Careers', 'Press'],
+    Resources: ['Community', 'Support', 'Status', 'Security'],
+    Legal: ['Privacy', 'Terms', 'Cookies', 'Licenses']
+  };
+
+  const socialLinks = [
+    { icon: <Facebook size={20} />, href: '#' },
+    { icon: <Twitter size={20} />, href: '#' },
+    { icon: <Github size={20} />, href: '#' },
+    { icon: <Linkedin size={20} />, href: '#' }
+  ];
+
+  return (
+    <footer className="bg-gray-900 text-white">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-6 gap-8">
+          <div className="lg:col-span-2">
+            <div className="flex items-center mb-4">
+              <img src="/images/logo-small-gradient.0ed287ce-1768917228014.svg" alt="Logo" className="h-8 w-8" />
+              <span className="ml-2 text-xl font-semibold">Brand</span>
+            </div>
+            <p className="text-gray-400 mb-4">
+              Building the future of web development with modern tools and exceptional developer experience.
+            </p>
+            <div className="flex space-x-4">
+              {socialLinks.map((social, index) => (
+                <a key={index} href={social.href} className="text-gray-400 hover:text-white transition-colors">
+                  {social.icon}
+                </a>
+              ))}
+            </div>
+          </div>
+          
+          {Object.entries(footerLinks).map(([category, links]) => (
+            <div key={category}>
+              <h3 className="text-lg font-semibold mb-4">{category}</h3>
+              <ul className="space-y-2">
+                {links.map((link) => (
+                  <li key={link}>
+                    <a href="#" className="text-gray-400 hover:text-white transition-colors">
+                      {link}
+                    </a>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          ))}
+        </div>
+        
+        <div className="border-t border-gray-800 mt-8 pt-8 flex flex-col md:flex-row justify-between items-center">
+          <p className="text-gray-400 text-sm">
+            © 2024 Brand. All rights reserved.
+          </p>
+          <div className="flex space-x-6 mt-4 md:mt-0">
+            <a href="#" className="text-gray-400 hover:text-white text-sm transition-colors">Privacy Policy</a>
+            <a href="#" className="text-gray-400 hover:text-white text-sm transition-colors">Terms of Service</a>
+          </div>
+        </div>
+      </div>
+    </footer>
+  );
+}
+
+export default FooterLinksColumns;