Upload components/Footer.tsx with huggingface_hub

components/Footer.tsx

@@ -0,0 +1,90 @@
+import { Instagram, Linkedin, Twitter, Facebook } from 'lucide-react'
+
+const Footer = () => {
+  const currentYear = new Date().getFullYear()
+
+  const socialLinks = [
+    { icon: Instagram, href: '#', label: 'Instagram' },
+    { icon: Linkedin, href: '#', label: 'LinkedIn' },
+    { icon: Twitter, href: '#', label: 'Twitter' },
+    { icon: Facebook, href: '#', label: 'Facebook' },
+  ]
+
+  const footerLinks = [
+    {
+      title: 'Company',
+      links: ['About', 'Projects', 'Services', 'Careers']
+    },
+    {
+      title: 'Resources',
+      links: ['News', 'Press Kit', 'Privacy Policy', 'Terms of Service']
+    }
+  ]
+
+  return (
+    <footer className="bg-margins-black border-t border-margins-dark py-16">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="grid md:grid-cols-4 gap-12 mb-12">
+          {/* Brand */}
+          <div className="md:col-span-2">
+            <h3 className="text-2xl font-light tracking-wider uppercase mb-6">Margins</h3>
+            <p className="text-margins-gray max-w-md mb-8 leading-relaxed">
+              Creating exceptional spaces that inspire and endure. Premium real estate development 
+              for the modern world.
+            </p>
+            <div className="flex space-x-4">
+              {socialLinks.map((social, index) => (
+                <a
+                  key={index}
+                  href={social.href}
+                  aria-label={social.label}
+                  className="w-10 h-10 rounded-full border border-margins-gray flex items-center justify-center text-margins-gray hover:border-white hover:text-white transition-colors duration-300"
+                >
+                  <social.icon className="w-4 h-4" />
+                </a>
+              ))}
+            </div>
+          </div>
+
+          {/* Links */}
+          {footerLinks.map((column, index) => (
+            <div key={index}>
+              <h4 className="text-sm uppercase tracking-widest mb-6">{column.title}</h4>
+              <ul className="space-y-4">
+                {column.links.map((link, linkIndex) => (
+                  <li key={linkIndex}>
+                    <a 
+                      href="#" 
+                      className="text-margins-gray hover:text-white transition-colors duration-300 text-sm"
+                    >
+                      {link}
+                    </a>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          ))}
+        </div>
+
+        {/* Bottom */}
+        <div className="pt-8 border-t border-margins-dark flex flex-col md:flex-row justify-between items-center gap-4">
+          <p className="text-margins-gray text-sm">
+            © {currentYear} Margins Developments. All rights reserved.
+          </p>
+          <p className="text-margins-gray text-xs">
+            <a 
+              href="https://huggingface.co/spaces/akhaliq/anycoder" 
+              target="_blank" 
+              rel="noopener noreferrer"
+              className="hover:text-white transition-colors"
+            >
+              Built with anycoder
+            </a>
+          </p>
+        </div>
+      </div>
+    </footer>
+  )
+}
+
+export default Footer