Initial commit

src/components/layout/Footer.tsx

@@ -0,0 +1,111 @@
+import { motion } from 'framer-motion';
+
+type FooterLink = {
+  label: string;
+  href: string;
+  target?: '_blank' | '_self';
+};
+
+type FooterColumn = {
+  title: string;
+  links: FooterLink[];
+};
+
+const footerColumns: FooterColumn[] = [
+  {
+    title: 'Affiliate Projects',
+    links: [
+      { label: 'Project Mycelium', href: 'https://project.mycelium.tf', target: '_blank' },
+    ],
+  },
+  {
+    title: 'Company',
+    links: [
+      { label: 'Manual', href: 'https://manual.grid.tf/', target: '_blank' },
+      { label: 'Support', href: 'mailto:support@threefold.tech', target: '_blank' },
+    ],
+  },
+  {
+    title: 'GeoMind',
+    links: [
+      { label: 'Technology', href: '/technology' },
+      { label: 'Use Cases', href: '/usecases' },
+    ],
+  },
+];
+
+export const Footer = () => {
+  return (
+    <footer className="border-t border-slate-200 bg-white">
+      <motion.div
+        initial={{ opacity: 0, y: 16 }}
+        whileInView={{ opacity: 1, y: 0 }}
+        viewport={{ once: true, amount: 0.2 }}
+        transition={{ duration: 0.6, ease: 'easeOut' }}
+        className="mx-auto flex max-w-6xl flex-col gap-8 px-6 py-12 lg:flex-row lg:items-start lg:justify-between lg:px-8"
+      >
+        <div className="flex items-center gap-3">
+          <img
+            src="/images/geomind_logo.png"
+            alt="Geomind logo"
+            className="h-12 w-12 rounded-full object-contain shadow-subtle"
+          />
+          <div>
+            <p className="text-sm font-semibold tracking-[0.35em] text-slate-500">
+              GEOMIND
+            </p>
+            <p className="mt-2 max-w-xs text-sm text-slate-500">
+              The datacenter standard for the next era of cloud and AI.
+            </p>
+          </div>
+        </div>
+        <div className="grid flex-1 grid-cols-1 gap-8 text-sm sm:grid-cols-2 lg:grid-cols-3">
+          {footerColumns.map((column) => (
+            <div key={column.title}>
+              <p className="text-xs font-semibold uppercase tracking-[0.25em] text-slate-400">
+                {column.title}
+              </p>
+              <ul className="mt-3 space-y-3 text-sm font-medium text-slate-600">
+                {column.links.map((link) => (
+                  <li key={link.label}>
+                    <a
+                      href={link.href}
+                      target={link.target}
+                      rel={link.target === '_blank' ? 'noopener noreferrer' : undefined}
+                      className="transition-colors duration-300 hover:text-brand-600"
+                    >
+                      {link.label}
+                    </a>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          ))}
+        </div>
+      </motion.div>
+      <div className="bg-mist py-4">
+        <div className="mx-auto flex max-w-6xl flex-col items-center justify-between gap-2 px-6 text-xs text-slate-500 sm:flex-row lg:px-8">
+          <span>Copyright {new Date().getFullYear()} GeoMind. All rights reserved.</span>
+          <div className="flex gap-4">
+            <a
+              href="https://www.linkedin.com/company/tf9/"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="hover:text-brand-600"
+            >
+              LinkedIn
+            </a>
+            <a
+              href="https://github.com/threefoldtech"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="hover:text-brand-600"
+            >
+              GitHub
+            </a>
+          </div>
+        </div>
+      </div>
+    </footer>
+  );
+};