cadcad-website/src/components/Footer.tsx

117 lines
4.3 KiB
TypeScript

import CadCADLogo from "./CadCADLogo";
const productLinks = [
{ label: "Github", href: "https://github.com/cadCAD-org/cadCAD" },
{ label: "Video tutorials", href: "https://www.youtube.com/playlist?list=PLmWm8ksQq4YKtdRV-SoinhV6LbQMgX1we" },
{ label: "Inspirational videos", href: "https://www.youtube.com/playlist?list=PLmWm8ksQq4YJnNDMaslh20axb4r7fgW_a" },
{ label: "List of related resources", href: "https://community.cadcad.org/" },
{ label: "Join our community", href: "https://community.cadcad.org/" },
];
const communityLinks = [
{ label: "Discord", href: "https://discord.gg/FP2FGJb4tJ" },
{ label: "Discourse", href: "https://community.cadcad.org/" },
{ label: "Telegram", href: "https://t.me/joinchat/BehTglN4UOLe83MpgBelzw" },
{ label: "Twitter", href: "https://twitter.com/cadcad_org" },
];
export default function Footer() {
return (
<footer className="bg-white py-8">
{/* BlockScience attribution */}
<div className="container mx-auto border-b border-border pb-8">
<div className="mx-auto flex w-full flex-col items-center p-6 text-center md:w-2/3">
<p className="mb-4 text-lg text-gray-500">Created by BlockScience</p>
<p className="text-gray-500">
cadCAD was created as an internal tool at BlockScience &ndash; an
engineering, R&amp;D and analytics firm specializing in complex
systems design and validation
</p>
</div>
</div>
{/* Links grid */}
<div className="container mx-auto px-8 pt-8">
<div className="flex w-full flex-col py-6 md:flex-row">
{/* Brand */}
<div className="flex-1 px-4 pb-6">
<CadCADLogo className="mb-4 h-10" />
</div>
{/* Product */}
<div className="flex-1 px-4 pb-6">
<p className="mb-4 text-sm font-bold uppercase tracking-wider text-gray-500">
Product
</p>
<ul className="flex flex-col gap-2">
{productLinks.map((link) => (
<li key={link.label}>
<a
href={link.href}
target="_blank"
rel="noopener noreferrer"
className="text-sm text-gray-500 transition-colors hover:text-cadcad-blue"
>
{link.label}
</a>
</li>
))}
</ul>
</div>
{/* Community */}
<div className="flex-1 px-4 pb-6">
<p className="mb-4 text-sm font-bold uppercase tracking-wider text-gray-500">
Community
</p>
<ul className="flex flex-col gap-2">
{communityLinks.map((link) => (
<li key={link.label}>
<a
href={link.href}
target="_blank"
rel="noopener noreferrer"
className="text-sm text-gray-500 transition-colors hover:text-cadcad-blue"
>
{link.label}
</a>
</li>
))}
</ul>
</div>
{/* Support us */}
<div className="flex-1 px-4 pb-6">
<p className="mb-4 text-sm font-bold uppercase tracking-wider text-gray-500">
Support us
</p>
<ul className="flex flex-col gap-2">
<li>
<a
href="https://opencollective.com/cadcad1"
target="_blank"
rel="noopener noreferrer"
className="text-sm text-gray-500 transition-colors hover:text-cadcad-blue"
>
OpenCollective
</a>
</li>
<li className="text-sm text-gray-500">
<p>ETH Donation address:</p>
<a
href="https://etherscan.io/address/0xbcd768c566143714309afe87feb901da7543f470"
target="_blank"
rel="noopener noreferrer"
className="break-all text-gray-800 no-underline transition-colors hover:text-cadcad-blue"
>
0xbcd768c566143714309afe87feb901da7543f470
</a>
</li>
</ul>
</div>
</div>
</div>
</footer>
);
}