jeffemmett
/
cadcad-website
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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:
Jeff Emmett 2026-02-09 18:43:35 +00:00
parent 7adb8bf1a2
commit 3ae105ec3e
3 changed files with 100 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/app/globals.css
View File

@ -20,8 +20,8 @@
--color-surface: var(--surface); --color-surface: var(--surface);
--color-border: var(--border); --color-border: var(--border);
--color-muted: var(--muted); --color-muted: var(--muted);
--font-sans: var(--font-geist-sans); --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
--font-mono: var(--font-geist-mono); --font-mono: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
} }
body { body {

15
src/app/layout.tsx
View File

@ -1,17 +1,6 @@
import type { Metadata } from "next"; import type { Metadata } from "next";
import { Geist, Geist_Mono } from "next/font/google";
import "./globals.css"; 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 = { export const metadata: Metadata = {
title: "cadCAD - Complex Adaptive Dynamics Computer-Aided Design", title: "cadCAD - Complex Adaptive Dynamics Computer-Aided Design",
description: description:
@ -39,9 +28,7 @@ export default function RootLayout({
}>) { }>) {
return ( return (
<html lang="en"> <html lang="en">
<body <body className="antialiased">
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
>
{children} {children}
</body> </body>
</html> </html>

102
src/components/Footer.tsx
View File

@ -1,11 +1,10 @@
import CadCADLogo from "./CadCADLogo"; import Image from "next/image";
const productLinks = [ const productLinks = [
{ label: "Github", href: "https://github.com/cadCAD-org/cadCAD" }, { label: "Github", href: "https://github.com/cadCAD-org/cadCAD" },
{ label: "Video tutorials", href: "https://www.youtube.com/playlist?list=PLmWm8ksQq4YKtdRV-SoinhV6LbQMgX1we" }, { 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: "Inspirational videos", href: "https://www.youtube.com/playlist?list=PLmWm8ksQq4YJnNDMaslh20axb4r7fgW_a" },
{ label: "List of related resources", href: "https://community.cadcad.org/" }, { label: "List of related resources", href: "https://community.cadcad.org/" },
{ label: "Join our community", href: "https://community.cadcad.org/" },
]; ];
const communityLinks = [ const communityLinks = [
@ -17,40 +16,58 @@ const communityLinks = [
export default function Footer() { export default function Footer() {
return ( return (
<footer className="bg-white py-8"> <>
{/* BlockScience attribution */} {/* BlockScience attribution */}
<div className="container mx-auto border-b border-border pb-8"> <section className="bg-white py-8">
<div className="mx-auto flex w-full flex-col items-center p-6 text-center md:w-2/3"> <div className="container mx-auto flex flex-col items-center text-center">
<p className="mb-4 text-lg text-gray-500">Created by BlockScience</p> <a
<p className="text-gray-500"> 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 &ndash; an cadCAD was created as an internal tool at BlockScience &ndash; an
engineering, R&amp;D and analytics firm specializing in complex engineering, R&amp;D and analytics firm specializing in complex
systems design and validation systems design and validation
</p> </p>
</div> </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 */} {/* Product */}
<div className="flex-1 px-4 pb-6"> <div className="flex-1">
<p className="mb-4 text-sm font-bold uppercase tracking-wider text-gray-500"> <p className="uppercase text-gray-500 md:mb-6">Product</p>
Product <ul className="mb-6">
</p>
<ul className="flex flex-col gap-2">
{productLinks.map((link) => ( {productLinks.map((link) => (
<li key={link.label}> <li key={link.label} className="mr-2 mt-2 md:mr-0">
<a <a
href={link.href} href={link.href}
target="_blank" target="_blank"
rel="noopener noreferrer" 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} {link.label}
</a> </a>
@ -59,19 +76,19 @@ export default function Footer() {
</ul> </ul>
</div> </div>
{/* Community */} {/* Join our community */}
<div className="flex-1 px-4 pb-6"> <div className="flex-1">
<p className="mb-4 text-sm font-bold uppercase tracking-wider text-gray-500"> <p className="uppercase text-gray-500 md:mb-6">
Community Join our community
</p> </p>
<ul className="flex flex-col gap-2"> <ul className="mb-6">
{communityLinks.map((link) => ( {communityLinks.map((link) => (
<li key={link.label}> <li key={link.label} className="mr-2 mt-2 md:mr-0">
<a <a
href={link.href} href={link.href}
target="_blank" target="_blank"
rel="noopener noreferrer" 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} {link.label}
</a> </a>
@ -81,30 +98,34 @@ export default function Footer() {
</div> </div>
{/* Support us */} {/* Support us */}
<div className="flex-1 px-4 pb-6"> <div className="flex-1">
<p className="mb-4 text-sm font-bold uppercase tracking-wider text-gray-500"> <p className="uppercase text-gray-500 md:mb-6">Support us</p>
Support us <ul className="mb-6">
</p> <li className="mr-2 mt-2 md:mr-0">
<ul className="flex flex-col gap-2">
<li>
<a <a
href="https://opencollective.com/cadcad1" href="https://opencollective.com/cadcad1"
target="_blank" target="_blank"
rel="noopener noreferrer" 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"
> >
OpenCollective OpenCollective
</a> </a>
</li> </li>
<li className="text-sm text-gray-500"> <li className="mr-2 mt-2 md:mr-0">
<p>ETH Donation address:</p> <div className="text-gray-800 no-underline">
ETH Donation address:
</div>
</li>
<li className="mr-2 mt-2 md:mr-0">
<a <a
href="https://etherscan.io/address/0xbcd768c566143714309afe87feb901da7543f470" href="https://etherscan.io/address/0xbcd768c566143714309afe87feb901da7543f470"
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
className="break-all text-gray-800 no-underline transition-colors hover:text-cadcad-blue" className="text-gray-800 no-underline hover:underline hover:text-pink-500"
> >
<span className="break-all">
0xbcd768c566143714309afe87feb901da7543f470 0xbcd768c566143714309afe87feb901da7543f470
</span>
</a> </a>
</li> </li>
</ul> </ul>
@ -112,5 +133,6 @@ export default function Footer() {
</div> </div>
</div> </div>
</footer> </footer>
</>
); );
} }