fix: match footer and fonts to original cadcad.org
- Add BlockScience logo back to "Created by" section - "BlockScience" is now a link in cadcad-lightblue color - Remove cadCAD logo from footer - Center-align three footer columns: Product, Join our community, Support us - Match original link styles (text-gray-800, hover:text-pink-500) - Switch from Geist to system-ui font stack matching original site - Match original font sizes (text-3xl for attribution heading, text-xl for description) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
parent
7adb8bf1a2
commit
3ae105ec3e
|
|
@ -20,8 +20,8 @@
|
|||
--color-surface: var(--surface);
|
||||
--color-border: var(--border);
|
||||
--color-muted: var(--muted);
|
||||
--font-sans: var(--font-geist-sans);
|
||||
--font-mono: var(--font-geist-mono);
|
||||
--font-sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
|
||||
--font-mono: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
|
||||
}
|
||||
|
||||
body {
|
||||
|
|
|
|||
|
|
@ -1,17 +1,6 @@
|
|||
import type { Metadata } from "next";
|
||||
import { Geist, Geist_Mono } from "next/font/google";
|
||||
import "./globals.css";
|
||||
|
||||
const geistSans = Geist({
|
||||
variable: "--font-geist-sans",
|
||||
subsets: ["latin"],
|
||||
});
|
||||
|
||||
const geistMono = Geist_Mono({
|
||||
variable: "--font-geist-mono",
|
||||
subsets: ["latin"],
|
||||
});
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "cadCAD - Complex Adaptive Dynamics Computer-Aided Design",
|
||||
description:
|
||||
|
|
@ -39,9 +28,7 @@ export default function RootLayout({
|
|||
}>) {
|
||||
return (
|
||||
<html lang="en">
|
||||
<body
|
||||
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
|
||||
>
|
||||
<body className="antialiased">
|
||||
{children}
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,11 +1,10 @@
|
|||
import CadCADLogo from "./CadCADLogo";
|
||||
import Image from "next/image";
|
||||
|
||||
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 = [
|
||||
|
|
@ -17,100 +16,123 @@ const communityLinks = [
|
|||
|
||||
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">
|
||||
<section className="bg-white py-8">
|
||||
<div className="container mx-auto flex flex-col items-center text-center">
|
||||
<a
|
||||
href="https://block.science/"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="mb-4 transition-opacity hover:opacity-80"
|
||||
>
|
||||
<Image
|
||||
src="/images/blockscience-logo.webp"
|
||||
alt="BlockScience logo"
|
||||
width={260}
|
||||
height={260}
|
||||
className="mx-auto h-24 w-24 rounded-full"
|
||||
/>
|
||||
</a>
|
||||
<h2 className="my-6 w-full px-6 text-3xl font-bold text-gray-800">
|
||||
Created by{" "}
|
||||
<a
|
||||
href="https://block.science/"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-cadcad-lightblue"
|
||||
>
|
||||
BlockScience
|
||||
</a>
|
||||
</h2>
|
||||
<p className="mb-5 px-6 text-xl text-gray-800">
|
||||
cadCAD was created as an internal tool at BlockScience – an
|
||||
engineering, R&D and analytics firm specializing in complex
|
||||
systems design and validation
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 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>
|
||||
{/* Footer links */}
|
||||
<footer className="w-full bg-white">
|
||||
<div className="container mx-auto px-8">
|
||||
<div className="flex w-full flex-col justify-center py-6 md:flex-row">
|
||||
{/* Product */}
|
||||
<div className="flex-1">
|
||||
<p className="uppercase text-gray-500 md:mb-6">Product</p>
|
||||
<ul className="mb-6">
|
||||
{productLinks.map((link) => (
|
||||
<li key={link.label} className="mr-2 mt-2 md:mr-0">
|
||||
<a
|
||||
href={link.href}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-gray-800 no-underline hover:underline hover:text-pink-500"
|
||||
>
|
||||
{link.label}
|
||||
</a>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</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}>
|
||||
{/* Join our community */}
|
||||
<div className="flex-1">
|
||||
<p className="uppercase text-gray-500 md:mb-6">
|
||||
Join our community
|
||||
</p>
|
||||
<ul className="mb-6">
|
||||
{communityLinks.map((link) => (
|
||||
<li key={link.label} className="mr-2 mt-2 md:mr-0">
|
||||
<a
|
||||
href={link.href}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-gray-800 no-underline hover:underline hover:text-pink-500"
|
||||
>
|
||||
{link.label}
|
||||
</a>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* Support us */}
|
||||
<div className="flex-1">
|
||||
<p className="uppercase text-gray-500 md:mb-6">Support us</p>
|
||||
<ul className="mb-6">
|
||||
<li className="mr-2 mt-2 md:mr-0">
|
||||
<a
|
||||
href={link.href}
|
||||
href="https://opencollective.com/cadcad1"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-sm text-gray-500 transition-colors hover:text-cadcad-blue"
|
||||
className="text-gray-800 no-underline hover:underline hover:text-pink-500"
|
||||
>
|
||||
{link.label}
|
||||
OpenCollective
|
||||
</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}>
|
||||
<li className="mr-2 mt-2 md:mr-0">
|
||||
<div className="text-gray-800 no-underline">
|
||||
ETH Donation address:
|
||||
</div>
|
||||
</li>
|
||||
<li className="mr-2 mt-2 md:mr-0">
|
||||
<a
|
||||
href={link.href}
|
||||
href="https://etherscan.io/address/0xbcd768c566143714309afe87feb901da7543f470"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-sm text-gray-500 transition-colors hover:text-cadcad-blue"
|
||||
className="text-gray-800 no-underline hover:underline hover:text-pink-500"
|
||||
>
|
||||
{link.label}
|
||||
<span className="break-all">
|
||||
0xbcd768c566143714309afe87feb901da7543f470
|
||||
</span>
|
||||
</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>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</footer>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue