106 lines
3.4 KiB
TypeScript
106 lines
3.4 KiB
TypeScript
import { motion } from 'framer-motion';
|
|
|
|
type FooterLink = {
|
|
label: string;
|
|
href: string;
|
|
target?: '_blank' | '_self';
|
|
};
|
|
|
|
type FooterColumn = {
|
|
title: string;
|
|
links: FooterLink[];
|
|
};
|
|
|
|
const footerColumns: FooterColumn[] = [
|
|
{
|
|
title: 'GeoMind',
|
|
links: [
|
|
{ label: 'Technology', href: '/technology' },
|
|
{ label: 'Use Cases', href: '/usecases' },
|
|
],
|
|
},
|
|
{
|
|
title: 'Company',
|
|
links: [
|
|
{ label: 'Manual', href: 'https://manual.grid.tf/', target: '_blank' },
|
|
{ label: 'Support', href: 'mailto:support@threefold.tech', target: '_blank' },
|
|
],
|
|
},
|
|
];
|
|
|
|
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-2 lg:ml-auto lg:max-w-md">
|
|
{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>
|
|
);
|
|
};
|