Initial cadCAD.org website recreation
- Next.js 16 + TypeScript + Tailwind CSS 4 - Dark theme with animated network node background - All original sections: Hero, Why/How/What, Capabilities, Code Example, Getting Started, Community - All original links preserved (GitHub, Discord, Telegram, YouTube, etc.) - Docker + Traefik deployment ready - Responsive design with mobile hamburger menu Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
parent
69acbae09f
commit
dabc85b586
|
|
@ -0,0 +1,32 @@
|
|||
FROM node:20-alpine AS base
|
||||
|
||||
# Install dependencies
|
||||
FROM base AS deps
|
||||
WORKDIR /app
|
||||
COPY package.json package-lock.json ./
|
||||
RUN npm ci --only=production
|
||||
|
||||
FROM base AS builder
|
||||
WORKDIR /app
|
||||
COPY package.json package-lock.json ./
|
||||
RUN npm ci
|
||||
COPY . .
|
||||
RUN npm run build
|
||||
|
||||
# Production image
|
||||
FROM base AS runner
|
||||
WORKDIR /app
|
||||
ENV NODE_ENV=production
|
||||
RUN addgroup --system --gid 1001 nodejs
|
||||
RUN adduser --system --uid 1001 nextjs
|
||||
|
||||
COPY --from=builder /app/public ./public
|
||||
COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
|
||||
COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
|
||||
|
||||
USER nextjs
|
||||
EXPOSE 3000
|
||||
ENV PORT=3000
|
||||
ENV HOSTNAME="0.0.0.0"
|
||||
|
||||
CMD ["node", "server.js"]
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
services:
|
||||
cadcad-website:
|
||||
build: .
|
||||
restart: unless-stopped
|
||||
labels:
|
||||
- "traefik.enable=true"
|
||||
- "traefik.http.routers.cadcad-staging.rule=Host(`cadcad-staging.jeffemmett.com`)"
|
||||
- "traefik.http.services.cadcad.loadbalancer.server.port=3000"
|
||||
networks:
|
||||
- traefik-public
|
||||
|
||||
networks:
|
||||
traefik-public:
|
||||
external: true
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
import type { NextConfig } from "next";
|
||||
|
||||
const nextConfig: NextConfig = {
|
||||
/* config options here */
|
||||
output: "standalone",
|
||||
};
|
||||
|
||||
export default nextConfig;
|
||||
|
|
|
|||
|
|
@ -1,26 +1,125 @@
|
|||
@import "tailwindcss";
|
||||
|
||||
:root {
|
||||
--background: #ffffff;
|
||||
--foreground: #171717;
|
||||
--background: #0a0a0a;
|
||||
--foreground: #ededed;
|
||||
--accent: #00d4aa;
|
||||
--accent-dim: #00b894;
|
||||
--surface: #141414;
|
||||
--surface-light: #1e1e1e;
|
||||
--border: #2a2a2a;
|
||||
--muted: #888888;
|
||||
}
|
||||
|
||||
@theme inline {
|
||||
--color-background: var(--background);
|
||||
--color-foreground: var(--foreground);
|
||||
--color-accent: var(--accent);
|
||||
--color-accent-dim: var(--accent-dim);
|
||||
--color-surface: var(--surface);
|
||||
--color-surface-light: var(--surface-light);
|
||||
--color-border: var(--border);
|
||||
--color-muted: var(--muted);
|
||||
--font-sans: var(--font-geist-sans);
|
||||
--font-mono: var(--font-geist-mono);
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--background: #0a0a0a;
|
||||
--foreground: #ededed;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
background: var(--background);
|
||||
color: var(--foreground);
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
font-family: var(--font-sans), Arial, Helvetica, sans-serif;
|
||||
}
|
||||
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
/* Animated grid background */
|
||||
.grid-bg {
|
||||
background-image:
|
||||
linear-gradient(rgba(0, 212, 170, 0.03) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(0, 212, 170, 0.03) 1px, transparent 1px);
|
||||
background-size: 60px 60px;
|
||||
}
|
||||
|
||||
/* Glow effect for hero */
|
||||
.glow {
|
||||
box-shadow: 0 0 60px rgba(0, 212, 170, 0.15), 0 0 120px rgba(0, 212, 170, 0.05);
|
||||
}
|
||||
|
||||
/* Subtle node connection animation */
|
||||
@keyframes pulse-node {
|
||||
0%, 100% { opacity: 0.3; }
|
||||
50% { opacity: 0.8; }
|
||||
}
|
||||
|
||||
.animate-pulse-node {
|
||||
animation: pulse-node 3s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes float {
|
||||
0%, 100% { transform: translateY(0); }
|
||||
50% { transform: translateY(-10px); }
|
||||
}
|
||||
|
||||
.animate-float {
|
||||
animation: float 6s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* Code block styling */
|
||||
.code-block {
|
||||
background: #1a1a2e;
|
||||
border: 1px solid #2a2a3e;
|
||||
border-radius: 8px;
|
||||
font-family: var(--font-mono), 'Courier New', monospace;
|
||||
}
|
||||
|
||||
/* Gradient text */
|
||||
.gradient-text {
|
||||
background: linear-gradient(135deg, #00d4aa, #00b4d8, #00d4aa);
|
||||
background-size: 200% 200%;
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
/* Card hover effect */
|
||||
.card-hover {
|
||||
transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
|
||||
}
|
||||
.card-hover:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 30px rgba(0, 212, 170, 0.1);
|
||||
border-color: rgba(0, 212, 170, 0.3);
|
||||
}
|
||||
|
||||
/* Section fade-in */
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.fade-in-up {
|
||||
animation: fadeInUp 0.6s ease-out forwards;
|
||||
}
|
||||
|
||||
/* Scrollbar */
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
::-webkit-scrollbar-track {
|
||||
background: var(--background);
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: var(--border);
|
||||
border-radius: 4px;
|
||||
}
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--muted);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -13,8 +13,23 @@ const geistMono = Geist_Mono({
|
|||
});
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Create Next App",
|
||||
description: "Generated by create next app",
|
||||
title: "cadCAD - Complex Adaptive Dynamics Computer-Aided Design",
|
||||
description:
|
||||
"An open-source Python package that assists in the processes of designing, testing and validating complex systems through simulation.",
|
||||
openGraph: {
|
||||
title: "cadCAD - Complex Systems Simulation",
|
||||
description:
|
||||
"A Python package for designing, testing and validating complex systems through simulation.",
|
||||
url: "https://cadcad.org",
|
||||
siteName: "cadCAD",
|
||||
type: "website",
|
||||
},
|
||||
twitter: {
|
||||
card: "summary_large_image",
|
||||
title: "cadCAD - Complex Systems Simulation",
|
||||
description:
|
||||
"A Python package for designing, testing and validating complex systems through simulation.",
|
||||
},
|
||||
};
|
||||
|
||||
export default function RootLayout({
|
||||
|
|
|
|||
|
|
@ -1,65 +1,25 @@
|
|||
import Image from "next/image";
|
||||
import Header from "@/components/Header";
|
||||
import Hero from "@/components/Hero";
|
||||
import WhyHowWhat from "@/components/WhyHowWhat";
|
||||
import UseCases from "@/components/UseCases";
|
||||
import CodeExample from "@/components/CodeExample";
|
||||
import GettingStarted from "@/components/GettingStarted";
|
||||
import Community from "@/components/Community";
|
||||
import Footer from "@/components/Footer";
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<div className="flex min-h-screen items-center justify-center bg-zinc-50 font-sans dark:bg-black">
|
||||
<main className="flex min-h-screen w-full max-w-3xl flex-col items-center justify-between py-32 px-16 bg-white dark:bg-black sm:items-start">
|
||||
<Image
|
||||
className="dark:invert"
|
||||
src="/next.svg"
|
||||
alt="Next.js logo"
|
||||
width={100}
|
||||
height={20}
|
||||
priority
|
||||
/>
|
||||
<div className="flex flex-col items-center gap-6 text-center sm:items-start sm:text-left">
|
||||
<h1 className="max-w-xs text-3xl font-semibold leading-10 tracking-tight text-black dark:text-zinc-50">
|
||||
To get started, edit the page.tsx file.
|
||||
</h1>
|
||||
<p className="max-w-md text-lg leading-8 text-zinc-600 dark:text-zinc-400">
|
||||
Looking for a starting point or more instructions? Head over to{" "}
|
||||
<a
|
||||
href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
||||
className="font-medium text-zinc-950 dark:text-zinc-50"
|
||||
>
|
||||
Templates
|
||||
</a>{" "}
|
||||
or the{" "}
|
||||
<a
|
||||
href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
||||
className="font-medium text-zinc-950 dark:text-zinc-50"
|
||||
>
|
||||
Learning
|
||||
</a>{" "}
|
||||
center.
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex flex-col gap-4 text-base font-medium sm:flex-row">
|
||||
<a
|
||||
className="flex h-12 w-full items-center justify-center gap-2 rounded-full bg-foreground px-5 text-background transition-colors hover:bg-[#383838] dark:hover:bg-[#ccc] md:w-[158px]"
|
||||
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<Image
|
||||
className="dark:invert"
|
||||
src="/vercel.svg"
|
||||
alt="Vercel logomark"
|
||||
width={16}
|
||||
height={16}
|
||||
/>
|
||||
Deploy Now
|
||||
</a>
|
||||
<a
|
||||
className="flex h-12 w-full items-center justify-center rounded-full border border-solid border-black/[.08] px-5 transition-colors hover:border-transparent hover:bg-black/[.04] dark:border-white/[.145] dark:hover:bg-[#1a1a1a] md:w-[158px]"
|
||||
href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
Documentation
|
||||
</a>
|
||||
</div>
|
||||
<>
|
||||
<Header />
|
||||
<main>
|
||||
<Hero />
|
||||
<WhyHowWhat />
|
||||
<UseCases />
|
||||
<CodeExample />
|
||||
<GettingStarted />
|
||||
<Community />
|
||||
</main>
|
||||
</div>
|
||||
<Footer />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,30 @@
|
|||
export default function CadCADLogo({ className = "h-8" }: { className?: string }) {
|
||||
return (
|
||||
<svg
|
||||
viewBox="0 0 280 50"
|
||||
className={className}
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
{/* Network node decoration */}
|
||||
<circle cx="8" cy="25" r="3" fill="#00d4aa" opacity="0.6" />
|
||||
<circle cx="20" cy="12" r="2" fill="#00d4aa" opacity="0.4" />
|
||||
<circle cx="20" cy="38" r="2" fill="#00d4aa" opacity="0.4" />
|
||||
<line x1="8" y1="25" x2="20" y2="12" stroke="#00d4aa" strokeWidth="0.5" opacity="0.3" />
|
||||
<line x1="8" y1="25" x2="20" y2="38" stroke="#00d4aa" strokeWidth="0.5" opacity="0.3" />
|
||||
|
||||
{/* cadCAD text */}
|
||||
<text
|
||||
x="30"
|
||||
y="35"
|
||||
fontFamily="var(--font-geist-mono), 'Courier New', monospace"
|
||||
fontSize="32"
|
||||
fontWeight="700"
|
||||
letterSpacing="-0.5"
|
||||
>
|
||||
<tspan fill="#ededed">cad</tspan>
|
||||
<tspan fill="#00d4aa">CAD</tspan>
|
||||
</text>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,141 @@
|
|||
export default function CodeExample() {
|
||||
return (
|
||||
<section className="px-6 py-24">
|
||||
<div className="mx-auto max-w-6xl">
|
||||
<div className="mb-16 text-center">
|
||||
<h2 className="mb-4 text-3xl font-bold sm:text-4xl">
|
||||
Simple yet <span className="gradient-text">Powerful</span>
|
||||
</h2>
|
||||
<p className="mx-auto max-w-2xl text-muted">
|
||||
Define your system's state, policies, and update mechanisms — cadCAD handles
|
||||
the simulation engine.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid items-start gap-8 lg:grid-cols-2">
|
||||
{/* Code block */}
|
||||
<div className="code-block overflow-hidden">
|
||||
<div className="flex items-center gap-2 border-b border-white/5 px-4 py-3">
|
||||
<span className="h-3 w-3 rounded-full bg-red-500/60" />
|
||||
<span className="h-3 w-3 rounded-full bg-yellow-500/60" />
|
||||
<span className="h-3 w-3 rounded-full bg-green-500/60" />
|
||||
<span className="ml-4 text-xs text-muted">simulation.py</span>
|
||||
</div>
|
||||
<pre className="overflow-x-auto p-6 text-sm leading-relaxed">
|
||||
<code>
|
||||
<span className="text-purple-400">from</span>
|
||||
<span className="text-foreground"> cadCAD.configuration.utils </span>
|
||||
<span className="text-purple-400">import</span>
|
||||
<span className="text-foreground"> config_sim</span>
|
||||
{"\n"}
|
||||
<span className="text-purple-400">from</span>
|
||||
<span className="text-foreground"> cadCAD.configuration </span>
|
||||
<span className="text-purple-400">import</span>
|
||||
<span className="text-foreground"> Experiment</span>
|
||||
{"\n"}
|
||||
<span className="text-purple-400">from</span>
|
||||
<span className="text-foreground"> cadCAD </span>
|
||||
<span className="text-purple-400">import</span>
|
||||
<span className="text-foreground"> configs</span>
|
||||
{"\n\n"}
|
||||
<span className="text-gray-500"># Define initial state</span>
|
||||
{"\n"}
|
||||
<span className="text-foreground">initial_state </span>
|
||||
<span className="text-accent">=</span>
|
||||
<span className="text-foreground"> {"{"}</span>
|
||||
{"\n"}
|
||||
<span className="text-foreground">{" "}</span>
|
||||
<span className="text-yellow-300">'population'</span>
|
||||
<span className="text-accent">:</span>
|
||||
<span className="text-orange-300"> 100</span>
|
||||
<span className="text-foreground">,</span>
|
||||
{"\n"}
|
||||
<span className="text-foreground">{" "}</span>
|
||||
<span className="text-yellow-300">'resources'</span>
|
||||
<span className="text-accent">:</span>
|
||||
<span className="text-orange-300"> 1000</span>
|
||||
{"\n"}
|
||||
<span className="text-foreground">{"}"}</span>
|
||||
{"\n\n"}
|
||||
<span className="text-gray-500"># Define state update</span>
|
||||
{"\n"}
|
||||
<span className="text-purple-400">def</span>
|
||||
<span className="text-blue-300"> update_population</span>
|
||||
<span className="text-foreground">(params, substep, sH, s, _input):</span>
|
||||
{"\n"}
|
||||
<span className="text-foreground">{" "}</span>
|
||||
<span className="text-purple-400">return</span>
|
||||
<span className="text-foreground"> (</span>
|
||||
<span className="text-yellow-300">'population'</span>
|
||||
<span className="text-foreground">, s[</span>
|
||||
<span className="text-yellow-300">'population'</span>
|
||||
<span className="text-foreground">] </span>
|
||||
<span className="text-accent">*</span>
|
||||
<span className="text-orange-300"> 1.02</span>
|
||||
<span className="text-foreground">)</span>
|
||||
{"\n\n"}
|
||||
<span className="text-gray-500"># Configure simulation</span>
|
||||
{"\n"}
|
||||
<span className="text-foreground">sim_config </span>
|
||||
<span className="text-accent">=</span>
|
||||
<span className="text-foreground"> config_sim({"{"}</span>
|
||||
{"\n"}
|
||||
<span className="text-foreground">{" "}</span>
|
||||
<span className="text-yellow-300">'N'</span>
|
||||
<span className="text-accent">:</span>
|
||||
<span className="text-orange-300"> 3</span>
|
||||
<span className="text-foreground">,</span>
|
||||
<span className="text-gray-500"> # Monte Carlo runs</span>
|
||||
{"\n"}
|
||||
<span className="text-foreground">{" "}</span>
|
||||
<span className="text-yellow-300">'T'</span>
|
||||
<span className="text-accent">:</span>
|
||||
<span className="text-foreground"> </span>
|
||||
<span className="text-blue-300">range</span>
|
||||
<span className="text-foreground">(</span>
|
||||
<span className="text-orange-300">100</span>
|
||||
<span className="text-foreground">)</span>
|
||||
<span className="text-gray-500"> # Timesteps</span>
|
||||
{"\n"}
|
||||
<span className="text-foreground">{"}"})</span>
|
||||
</code>
|
||||
</pre>
|
||||
</div>
|
||||
|
||||
{/* Features list */}
|
||||
<div className="flex flex-col gap-6">
|
||||
<div className="rounded-xl border border-border bg-surface p-6">
|
||||
<h3 className="mb-2 font-semibold text-accent">State Variables</h3>
|
||||
<p className="text-sm leading-relaxed text-muted">
|
||||
Define the state of your system as a simple Python dictionary.
|
||||
Track any metric you need — populations, resources, prices,
|
||||
network metrics, and more.
|
||||
</p>
|
||||
</div>
|
||||
<div className="rounded-xl border border-border bg-surface p-6">
|
||||
<h3 className="mb-2 font-semibold text-accent">Policy Functions</h3>
|
||||
<p className="text-sm leading-relaxed text-muted">
|
||||
Write policies that determine how your system responds to inputs.
|
||||
Test different strategies by swapping policies in and out.
|
||||
</p>
|
||||
</div>
|
||||
<div className="rounded-xl border border-border bg-surface p-6">
|
||||
<h3 className="mb-2 font-semibold text-accent">State Update Functions</h3>
|
||||
<p className="text-sm leading-relaxed text-muted">
|
||||
Define how state variables evolve over time. Compose multiple
|
||||
update mechanisms to capture complex system dynamics.
|
||||
</p>
|
||||
</div>
|
||||
<div className="rounded-xl border border-border bg-surface p-6">
|
||||
<h3 className="mb-2 font-semibold text-accent">Simulation Configuration</h3>
|
||||
<p className="text-sm leading-relaxed text-muted">
|
||||
Configure Monte Carlo runs, time steps, and parameter sweeps.
|
||||
Results integrate seamlessly with pandas DataFrames for analysis.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,111 @@
|
|||
const communityLinks = [
|
||||
{
|
||||
name: "Discord",
|
||||
href: "https://discord.gg/FP2FGJb4tJ",
|
||||
description: "Real-time discussions and support",
|
||||
icon: (
|
||||
<svg className="h-8 w-8" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189z" />
|
||||
</svg>
|
||||
),
|
||||
},
|
||||
{
|
||||
name: "Telegram",
|
||||
href: "https://t.me/joinchat/BehTglN4UOLe83MpgBelzw",
|
||||
description: "Community chat and announcements",
|
||||
icon: (
|
||||
<svg className="h-8 w-8" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M11.944 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0a12 12 0 0 0-.056 0zm4.962 7.224c.1-.002.321.023.465.14a.506.506 0 0 1 .171.325c.016.093.036.306.02.472-.18 1.898-.962 6.502-1.36 8.627-.168.9-.499 1.201-.82 1.23-.696.065-1.225-.46-1.9-.902-1.056-.693-1.653-1.124-2.678-1.8-1.185-.78-.417-1.21.258-1.91.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.14-5.061 3.345-.479.33-.913.49-1.302.48-.428-.008-1.252-.241-1.865-.44-.752-.245-1.349-.374-1.297-.789.027-.216.325-.437.893-.663 3.498-1.524 5.83-2.529 6.998-3.014 3.332-1.386 4.025-1.627 4.476-1.635z" />
|
||||
</svg>
|
||||
),
|
||||
},
|
||||
{
|
||||
name: "Discourse",
|
||||
href: "https://community.cadcad.org/",
|
||||
description: "Forum for in-depth discussions",
|
||||
icon: (
|
||||
<svg className="h-8 w-8" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M12.103 0C18.666 0 24 5.485 24 11.997c0 6.51-5.33 11.99-11.9 11.99L0 24V11.79C0 5.28 5.532 0 12.103 0zm.116 4.563a7.395 7.395 0 0 0-6.337 3.57 7.247 7.247 0 0 0-.148 7.22L4.4 19.61l4.794-1.074a7.424 7.424 0 0 0 8.136-1.39 7.256 7.256 0 0 0 1.737-7.997 7.375 7.375 0 0 0-6.84-4.585h-.008z" />
|
||||
</svg>
|
||||
),
|
||||
},
|
||||
{
|
||||
name: "Twitter",
|
||||
href: "https://twitter.com/cadcad_org",
|
||||
description: "Latest updates and news",
|
||||
icon: (
|
||||
<svg className="h-8 w-8" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
|
||||
</svg>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
export default function Community() {
|
||||
return (
|
||||
<section id="community" className="bg-surface px-6 py-24">
|
||||
<div className="mx-auto max-w-6xl">
|
||||
<div className="mb-16 text-center">
|
||||
<h2 className="mb-4 text-3xl font-bold sm:text-4xl">
|
||||
Join our <span className="gradient-text">Community</span>
|
||||
</h2>
|
||||
<p className="mx-auto max-w-2xl text-muted">
|
||||
Connect with researchers, engineers, and enthusiasts building the
|
||||
future of complex systems simulation.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
|
||||
{communityLinks.map((link) => (
|
||||
<a
|
||||
key={link.name}
|
||||
href={link.href}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="card-hover group flex flex-col items-center rounded-xl border border-border bg-background p-8 text-center"
|
||||
>
|
||||
<div className="mb-4 text-muted transition-colors group-hover:text-accent">
|
||||
{link.icon}
|
||||
</div>
|
||||
<h3 className="mb-2 font-semibold">{link.name}</h3>
|
||||
<p className="text-sm text-muted">{link.description}</p>
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Support section */}
|
||||
<div className="mt-16 rounded-xl border border-border bg-background p-8 text-center">
|
||||
<h3 className="mb-4 text-xl font-semibold">Support cadCAD</h3>
|
||||
<p className="mx-auto mb-6 max-w-xl text-muted">
|
||||
cadCAD is open-source and community-driven. Support the project
|
||||
through OpenCollective or crypto donations.
|
||||
</p>
|
||||
<div className="flex flex-col items-center justify-center gap-4 sm:flex-row">
|
||||
<a
|
||||
href="https://opencollective.com/cadcad1"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="inline-flex items-center gap-2 rounded-lg border border-accent/30 bg-accent/10 px-6 py-3 text-sm font-medium text-accent transition-all hover:bg-accent/20"
|
||||
>
|
||||
<svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z" />
|
||||
</svg>
|
||||
OpenCollective
|
||||
</a>
|
||||
<a
|
||||
href="https://etherscan.io/address/0xbcd768c566143714309afe87feb901da7543f470"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="inline-flex items-center gap-2 rounded-lg border border-border bg-surface px-6 py-3 text-sm font-medium text-foreground transition-all hover:border-accent/30 hover:bg-surface-light"
|
||||
>
|
||||
<svg className="h-5 w-5" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M11.944 17.97L4.58 13.62 11.943 24l7.37-10.38-7.372 4.35h.003zM12.056 0L4.69 12.223l7.365 4.354 7.365-4.35L12.056 0z" />
|
||||
</svg>
|
||||
ETH Donation
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,118 @@
|
|||
import CadCADLogo from "./CadCADLogo";
|
||||
|
||||
const productLinks = [
|
||||
{ label: "GitHub", href: "https://github.com/cadCAD-org/cadCAD" },
|
||||
{ label: "PyPI", href: "https://pypi.org/project/cadCAD/" },
|
||||
{ label: "Documentation", href: "https://github.com/cadCAD-org/cadCAD" },
|
||||
{ label: "Demos", href: "https://github.com/cadCAD-org/demos" },
|
||||
{ label: "cadCAD.jl", href: "https://github.com/cadCAD-org/CadCAD.jl" },
|
||||
];
|
||||
|
||||
const communityLinks = [
|
||||
{ label: "Discord", href: "https://discord.gg/FP2FGJb4tJ" },
|
||||
{ label: "Telegram", href: "https://t.me/joinchat/BehTglN4UOLe83MpgBelzw" },
|
||||
{ label: "Discourse", href: "https://community.cadcad.org/" },
|
||||
{ label: "Twitter", href: "https://twitter.com/cadcad_org" },
|
||||
{ label: "YouTube", href: "https://www.youtube.com/channel/UCPePNv3dJN--aKhFGOa0Rjg" },
|
||||
];
|
||||
|
||||
const resourceLinks = [
|
||||
{ label: "Bootcamp", href: "https://www.cadcad.education/" },
|
||||
{ label: "Tutorials", href: "https://www.youtube.com/playlist?list=PLmWm8ksQq4YKtdRV-SoinhV6LbQMgX1we" },
|
||||
{ label: "Commons Simulator", href: "https://sim.commonsstack.org/" },
|
||||
{ label: "OpenCollective", href: "https://opencollective.com/cadcad1" },
|
||||
];
|
||||
|
||||
export default function Footer() {
|
||||
return (
|
||||
<footer className="border-t border-border px-6 py-16">
|
||||
<div className="mx-auto max-w-6xl">
|
||||
<div className="grid gap-12 sm:grid-cols-2 lg:grid-cols-4">
|
||||
{/* Brand */}
|
||||
<div className="lg:col-span-1">
|
||||
<CadCADLogo className="mb-4 h-8" />
|
||||
<p className="mb-4 text-sm leading-relaxed text-muted">
|
||||
cadCAD was created as an internal tool at{" "}
|
||||
<a
|
||||
href="https://block.science/"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-accent hover:underline"
|
||||
>
|
||||
BlockScience
|
||||
</a>{" "}
|
||||
— an engineering, R&D and analytics firm specializing in
|
||||
complex systems design and validation.
|
||||
</p>
|
||||
<p className="text-xs text-muted/60">
|
||||
© {new Date().getFullYear()} BlockScience. All rights reserved.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Product */}
|
||||
<div>
|
||||
<h4 className="mb-4 text-sm font-semibold uppercase tracking-wider text-muted">
|
||||
Product
|
||||
</h4>
|
||||
<ul className="flex flex-col gap-3">
|
||||
{productLinks.map((link) => (
|
||||
<li key={link.label}>
|
||||
<a
|
||||
href={link.href}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-sm text-muted transition-colors hover:text-foreground"
|
||||
>
|
||||
{link.label}
|
||||
</a>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* Community */}
|
||||
<div>
|
||||
<h4 className="mb-4 text-sm font-semibold uppercase tracking-wider text-muted">
|
||||
Community
|
||||
</h4>
|
||||
<ul className="flex flex-col gap-3">
|
||||
{communityLinks.map((link) => (
|
||||
<li key={link.label}>
|
||||
<a
|
||||
href={link.href}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-sm text-muted transition-colors hover:text-foreground"
|
||||
>
|
||||
{link.label}
|
||||
</a>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* Resources */}
|
||||
<div>
|
||||
<h4 className="mb-4 text-sm font-semibold uppercase tracking-wider text-muted">
|
||||
Resources
|
||||
</h4>
|
||||
<ul className="flex flex-col gap-3">
|
||||
{resourceLinks.map((link) => (
|
||||
<li key={link.label}>
|
||||
<a
|
||||
href={link.href}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-sm text-muted transition-colors hover:text-foreground"
|
||||
>
|
||||
{link.label}
|
||||
</a>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,114 @@
|
|||
const resources = [
|
||||
{
|
||||
title: "GitHub Repository",
|
||||
description:
|
||||
"Explore the source code, contribute, and track development. Start with the README for installation and basic usage.",
|
||||
href: "https://github.com/cadCAD-org/cadCAD",
|
||||
icon: (
|
||||
<svg className="h-6 w-6" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
|
||||
</svg>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: "Video Tutorials",
|
||||
description:
|
||||
"Watch our comprehensive tutorial playlist covering cadCAD fundamentals, from basic concepts to advanced simulation techniques.",
|
||||
href: "https://www.youtube.com/playlist?list=PLmWm8ksQq4YKtdRV-SoinhV6LbQMgX1we",
|
||||
icon: (
|
||||
<svg className="h-6 w-6" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z" />
|
||||
</svg>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: "Community Resources",
|
||||
description:
|
||||
"Browse a curated collection of tutorials, articles, and projects created by the cadCAD community.",
|
||||
href: "https://www.one-tab.com/page/1G-5FvsaSauRH-jfQA9KEA",
|
||||
icon: (
|
||||
<svg className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M12 6.042A8.967 8.967 0 006 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 016 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 016-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0018 18a8.967 8.967 0 00-6 2.292m0-14.25v14.25" />
|
||||
</svg>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: "cadCAD Bootcamp",
|
||||
description:
|
||||
"Enroll in the cadCAD education bootcamp for structured learning with hands-on exercises and expert guidance.",
|
||||
href: "https://www.cadcad.education/",
|
||||
icon: (
|
||||
<svg className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M4.26 10.147a60.436 60.436 0 00-.491 6.347A48.627 48.627 0 0112 20.904a48.627 48.627 0 018.232-4.41 60.46 60.46 0 00-.491-6.347m-15.482 0a50.57 50.57 0 00-2.658-.813A59.905 59.905 0 0112 3.493a59.902 59.902 0 0110.399 5.84c-.896.248-1.783.52-2.658.814m-15.482 0A50.697 50.697 0 0112 13.489a50.702 50.702 0 017.74-3.342M6.75 15a.75.75 0 100-1.5.75.75 0 000 1.5zm0 0v-3.675A55.378 55.378 0 0112 8.443m-7.007 11.55A5.981 5.981 0 006.75 15.75v-1.5" />
|
||||
</svg>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: "Commons Simulator",
|
||||
description:
|
||||
"Try the interactive Commons Stack simulator, a real-world application built with cadCAD demonstrating token engineering concepts.",
|
||||
href: "https://sim.commonsstack.org/",
|
||||
icon: (
|
||||
<svg className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M9 9.563C9 9.252 9.252 9 9.563 9h4.874c.311 0 .563.252.563.563v4.874c0 .311-.252.563-.563.563H9.564A.562.562 0 019 14.437V9.564z" />
|
||||
</svg>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: "Inspiration Talks",
|
||||
description:
|
||||
"Watch talks and presentations about complex systems, token engineering, and the theory behind cadCAD.",
|
||||
href: "https://www.youtube.com/playlist?list=PLmWm8ksQq4YJnNDMaslh20axb4r7fgW_a",
|
||||
icon: (
|
||||
<svg className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z" />
|
||||
</svg>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
export default function GettingStarted() {
|
||||
return (
|
||||
<section id="getting-started" className="px-6 py-24">
|
||||
<div className="mx-auto max-w-6xl">
|
||||
<div className="mb-16 text-center">
|
||||
<h2 className="mb-4 text-3xl font-bold sm:text-4xl">
|
||||
Getting <span className="gradient-text">Started</span>
|
||||
</h2>
|
||||
<p className="mx-auto max-w-2xl text-muted">
|
||||
Everything you need to start modeling and simulating complex systems with cadCAD.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
|
||||
{resources.map((resource) => (
|
||||
<a
|
||||
key={resource.title}
|
||||
href={resource.href}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="card-hover group flex flex-col rounded-xl border border-border bg-surface p-6"
|
||||
>
|
||||
<div className="mb-4 flex items-center gap-3">
|
||||
<div className="text-accent">{resource.icon}</div>
|
||||
<h3 className="font-semibold group-hover:text-accent transition-colors">
|
||||
{resource.title}
|
||||
</h3>
|
||||
</div>
|
||||
<p className="flex-1 text-sm leading-relaxed text-muted">
|
||||
{resource.description}
|
||||
</p>
|
||||
<div className="mt-4 flex items-center gap-1 text-sm text-accent opacity-0 transition-opacity group-hover:opacity-100">
|
||||
Explore
|
||||
<svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3" />
|
||||
</svg>
|
||||
</div>
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,86 @@
|
|||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import CadCADLogo from "./CadCADLogo";
|
||||
|
||||
const navLinks = [
|
||||
{ label: "Github", href: "https://github.com/cadCAD-org/cadCAD", external: true },
|
||||
{ label: "Discord", href: "https://discord.gg/FP2FGJb4tJ", external: true },
|
||||
{ label: "Twitter", href: "https://twitter.com/cadcad_org", external: true },
|
||||
{ label: "YouTube", href: "https://www.youtube.com/channel/UCPePNv3dJN--aKhFGOa0Rjg", external: true },
|
||||
];
|
||||
|
||||
export default function Header() {
|
||||
const [mobileOpen, setMobileOpen] = useState(false);
|
||||
|
||||
return (
|
||||
<header className="fixed top-0 left-0 right-0 z-50 border-b border-border/50 bg-background/80 backdrop-blur-xl">
|
||||
<div className="mx-auto flex max-w-6xl items-center justify-between px-6 py-4">
|
||||
<a href="#" className="flex items-center gap-2">
|
||||
<CadCADLogo className="h-8" />
|
||||
</a>
|
||||
|
||||
{/* Desktop nav */}
|
||||
<nav className="hidden items-center gap-6 md:flex">
|
||||
{navLinks.map((link) => (
|
||||
<a
|
||||
key={link.label}
|
||||
href={link.href}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-sm text-muted transition-colors hover:text-foreground"
|
||||
>
|
||||
{link.label}
|
||||
</a>
|
||||
))}
|
||||
<a
|
||||
href="https://community.cadcad.org/"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="rounded-lg border border-accent/30 bg-accent/10 px-4 py-2 text-sm font-medium text-accent transition-all hover:bg-accent/20"
|
||||
>
|
||||
Join our community
|
||||
</a>
|
||||
</nav>
|
||||
|
||||
{/* Mobile hamburger */}
|
||||
<button
|
||||
className="flex flex-col gap-1.5 md:hidden"
|
||||
onClick={() => setMobileOpen(!mobileOpen)}
|
||||
aria-label="Toggle menu"
|
||||
>
|
||||
<span className={`block h-0.5 w-6 bg-foreground transition-transform ${mobileOpen ? "translate-y-2 rotate-45" : ""}`} />
|
||||
<span className={`block h-0.5 w-6 bg-foreground transition-opacity ${mobileOpen ? "opacity-0" : ""}`} />
|
||||
<span className={`block h-0.5 w-6 bg-foreground transition-transform ${mobileOpen ? "-translate-y-2 -rotate-45" : ""}`} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Mobile menu */}
|
||||
{mobileOpen && (
|
||||
<nav className="border-t border-border/50 bg-background/95 backdrop-blur-xl md:hidden">
|
||||
<div className="flex flex-col gap-4 px-6 py-6">
|
||||
{navLinks.map((link) => (
|
||||
<a
|
||||
key={link.label}
|
||||
href={link.href}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-sm text-muted transition-colors hover:text-foreground"
|
||||
>
|
||||
{link.label}
|
||||
</a>
|
||||
))}
|
||||
<a
|
||||
href="https://community.cadcad.org/"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="rounded-lg border border-accent/30 bg-accent/10 px-4 py-2 text-center text-sm font-medium text-accent"
|
||||
>
|
||||
Join our community
|
||||
</a>
|
||||
</div>
|
||||
</nav>
|
||||
)}
|
||||
</header>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,97 @@
|
|||
export default function Hero() {
|
||||
return (
|
||||
<section className="grid-bg relative flex min-h-screen items-center justify-center overflow-hidden px-6 pt-20">
|
||||
{/* Background decorative elements */}
|
||||
<div className="pointer-events-none absolute inset-0">
|
||||
{/* Radial glow */}
|
||||
<div className="absolute left-1/2 top-1/3 h-[600px] w-[600px] -translate-x-1/2 -translate-y-1/2 rounded-full bg-accent/5 blur-[120px]" />
|
||||
|
||||
{/* Floating nodes */}
|
||||
<svg className="absolute inset-0 h-full w-full" xmlns="http://www.w3.org/2000/svg">
|
||||
{/* Connection lines */}
|
||||
<line x1="15%" y1="20%" x2="25%" y2="35%" stroke="#00d4aa" strokeWidth="0.5" opacity="0.1" />
|
||||
<line x1="25%" y1="35%" x2="40%" y2="25%" stroke="#00d4aa" strokeWidth="0.5" opacity="0.1" />
|
||||
<line x1="75%" y1="30%" x2="85%" y2="45%" stroke="#00d4aa" strokeWidth="0.5" opacity="0.1" />
|
||||
<line x1="60%" y1="70%" x2="75%" y2="65%" stroke="#00d4aa" strokeWidth="0.5" opacity="0.1" />
|
||||
<line x1="20%" y1="75%" x2="35%" y2="68%" stroke="#00d4aa" strokeWidth="0.5" opacity="0.1" />
|
||||
|
||||
{/* Nodes */}
|
||||
<circle cx="15%" cy="20%" r="3" fill="#00d4aa" opacity="0.2" className="animate-pulse-node" />
|
||||
<circle cx="25%" cy="35%" r="4" fill="#00d4aa" opacity="0.15" className="animate-pulse-node" style={{ animationDelay: "1s" }} />
|
||||
<circle cx="40%" cy="25%" r="2" fill="#00d4aa" opacity="0.2" className="animate-pulse-node" style={{ animationDelay: "2s" }} />
|
||||
<circle cx="75%" cy="30%" r="3" fill="#00d4aa" opacity="0.15" className="animate-pulse-node" style={{ animationDelay: "0.5s" }} />
|
||||
<circle cx="85%" cy="45%" r="2" fill="#00d4aa" opacity="0.2" className="animate-pulse-node" style={{ animationDelay: "1.5s" }} />
|
||||
<circle cx="60%" cy="70%" r="4" fill="#00d4aa" opacity="0.1" className="animate-pulse-node" style={{ animationDelay: "2.5s" }} />
|
||||
<circle cx="75%" cy="65%" r="2" fill="#00d4aa" opacity="0.15" className="animate-pulse-node" style={{ animationDelay: "0.8s" }} />
|
||||
<circle cx="20%" cy="75%" r="3" fill="#00d4aa" opacity="0.1" className="animate-pulse-node" style={{ animationDelay: "1.2s" }} />
|
||||
<circle cx="35%" cy="68%" r="2" fill="#00d4aa" opacity="0.2" className="animate-pulse-node" style={{ animationDelay: "1.8s" }} />
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div className="relative z-10 mx-auto max-w-4xl text-center">
|
||||
{/* Version badge */}
|
||||
<div className="mb-8 inline-flex items-center gap-2 rounded-full border border-border bg-surface px-4 py-1.5 text-sm text-muted">
|
||||
<span className="h-2 w-2 rounded-full bg-accent animate-pulse" />
|
||||
v0.5.3 — Open Source
|
||||
</div>
|
||||
|
||||
<h1 className="mb-6 text-4xl font-bold leading-tight tracking-tight sm:text-5xl md:text-6xl">
|
||||
<span className="gradient-text">cadCAD</span>
|
||||
<span className="mt-2 block text-2xl font-normal text-muted sm:text-3xl md:text-4xl">
|
||||
Complex Adaptive Dynamics
|
||||
</span>
|
||||
<span className="block text-2xl font-normal text-muted sm:text-3xl md:text-4xl">
|
||||
Computer-Aided Design
|
||||
</span>
|
||||
</h1>
|
||||
|
||||
<p className="mx-auto mb-10 max-w-2xl text-lg leading-relaxed text-muted sm:text-xl">
|
||||
An open-source Python package that assists in the processes of
|
||||
designing, testing and validating complex systems through simulation.
|
||||
</p>
|
||||
|
||||
{/* CTA buttons */}
|
||||
<div className="flex flex-col items-center justify-center gap-4 sm:flex-row">
|
||||
<a
|
||||
href="https://github.com/cadCAD-org/cadCAD"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="inline-flex items-center gap-2 rounded-lg bg-accent px-8 py-3 font-medium text-background transition-all hover:bg-accent-dim hover:shadow-lg hover:shadow-accent/20"
|
||||
>
|
||||
<svg className="h-5 w-5" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
|
||||
</svg>
|
||||
Try it out
|
||||
</a>
|
||||
<a
|
||||
href="https://community.cadcad.org/"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="inline-flex items-center gap-2 rounded-lg border border-border bg-surface px-8 py-3 font-medium text-foreground transition-all hover:border-accent/30 hover:bg-surface-light"
|
||||
>
|
||||
Join our community
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{/* Install command */}
|
||||
<div className="code-block mx-auto mt-12 max-w-md px-6 py-4 text-left">
|
||||
<div className="mb-2 flex items-center gap-2">
|
||||
<span className="h-3 w-3 rounded-full bg-red-500/60" />
|
||||
<span className="h-3 w-3 rounded-full bg-yellow-500/60" />
|
||||
<span className="h-3 w-3 rounded-full bg-green-500/60" />
|
||||
</div>
|
||||
<code className="text-sm text-muted">
|
||||
<span className="text-accent">$</span> pip install cadCAD
|
||||
</code>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Scroll indicator */}
|
||||
<div className="absolute bottom-8 left-1/2 -translate-x-1/2 animate-bounce">
|
||||
<svg className="h-6 w-6 text-muted" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 14l-7 7m0 0l-7-7m7 7V3" />
|
||||
</svg>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,72 @@
|
|||
const useCases = [
|
||||
{
|
||||
title: "Monte Carlo Simulations",
|
||||
description:
|
||||
"Handle uncertainty and account for stochastic behaviors through Monte Carlo simulations. Run thousands of iterations to understand the probability distribution of outcomes.",
|
||||
icon: (
|
||||
<svg className="h-10 w-10" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M3.75 3v11.25A2.25 2.25 0 006 16.5h2.25M3.75 3h-1.5m1.5 0h16.5m0 0h1.5m-1.5 0v11.25A2.25 2.25 0 0118 16.5h-2.25m-7.5 0h7.5m-7.5 0l-1 3m8.5-3l1 3m0 0l.5 1.5m-.5-1.5h-9.5m0 0l-.5 1.5M9 11.25v1.5M12 9v3.75m3-6v6" />
|
||||
</svg>
|
||||
),
|
||||
color: "from-cyan-500/20 to-accent/20",
|
||||
},
|
||||
{
|
||||
title: "A/B Testing",
|
||||
description:
|
||||
"Conduct A/B testing on agent behavior assumptions and policy designs. Compare different strategies side-by-side to identify the most effective approaches for your system.",
|
||||
icon: (
|
||||
<svg className="h-10 w-10" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M7.5 21L3 16.5m0 0L7.5 12M3 16.5h13.5m0-13.5L21 7.5m0 0L16.5 12M21 7.5H7.5" />
|
||||
</svg>
|
||||
),
|
||||
color: "from-blue-500/20 to-accent/20",
|
||||
},
|
||||
{
|
||||
title: "Parameter Sweeping",
|
||||
description:
|
||||
"Optimize system parameters via systematic parameter sweeping. Explore the design space to find optimal configurations and understand sensitivity to different inputs.",
|
||||
icon: (
|
||||
<svg className="h-10 w-10" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M10.5 6h9.75M10.5 6a1.5 1.5 0 11-3 0m3 0a1.5 1.5 0 10-3 0M3.75 6H7.5m3 12h9.75m-9.75 0a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m-3.75 0H7.5m9-6h3.75m-3.75 0a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m-9.75 0h9.75" />
|
||||
</svg>
|
||||
),
|
||||
color: "from-purple-500/20 to-accent/20",
|
||||
},
|
||||
];
|
||||
|
||||
export default function UseCases() {
|
||||
return (
|
||||
<section id="use-cases" className="bg-surface px-6 py-24">
|
||||
<div className="mx-auto max-w-6xl">
|
||||
<div className="mb-16 text-center">
|
||||
<h2 className="mb-4 text-3xl font-bold sm:text-4xl">
|
||||
Core <span className="gradient-text">Capabilities</span>
|
||||
</h2>
|
||||
<p className="mx-auto max-w-2xl text-muted">
|
||||
Powerful simulation features built in, optimized for exploring complex system dynamics.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-8 md:grid-cols-3">
|
||||
{useCases.map((useCase) => (
|
||||
<div
|
||||
key={useCase.title}
|
||||
className="card-hover group relative overflow-hidden rounded-xl border border-border bg-background p-8"
|
||||
>
|
||||
{/* Gradient background on hover */}
|
||||
<div className={`absolute inset-0 bg-gradient-to-br ${useCase.color} opacity-0 transition-opacity group-hover:opacity-100`} />
|
||||
|
||||
<div className="relative z-10">
|
||||
<div className="mb-6 text-accent">{useCase.icon}</div>
|
||||
<h3 className="mb-3 text-xl font-semibold">{useCase.title}</h3>
|
||||
<p className="leading-relaxed text-muted">
|
||||
{useCase.description}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,65 @@
|
|||
const sections = [
|
||||
{
|
||||
label: "Why?",
|
||||
icon: (
|
||||
<svg className="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09zM18.259 8.715L18 9.75l-.259-1.035a3.375 3.375 0 00-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 002.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 002.455 2.456L21.75 6l-1.036.259a3.375 3.375 0 00-2.455 2.456z" />
|
||||
</svg>
|
||||
),
|
||||
description:
|
||||
"Given a model of a complex system, cadCAD can simulate the impact that a set of actions might have on it. This enables decision-makers to test policies and mechanisms before deploying them in the real world.",
|
||||
},
|
||||
{
|
||||
label: "How?",
|
||||
icon: (
|
||||
<svg className="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M11.42 15.17l-5.384 3.077 1.028-5.994L2.25 7.723l6.02-.875L11.42 1.5l3.172 5.348 6.02.875-4.814 4.53 1.028 5.994L11.42 15.17z" />
|
||||
</svg>
|
||||
),
|
||||
description:
|
||||
"cadCAD supports different system modeling approaches and can be easily integrated with common empirical data science workflows. Monte Carlo methods, A/B testing and parameter sweeping features are natively supported and optimized for.",
|
||||
},
|
||||
{
|
||||
label: "What?",
|
||||
icon: (
|
||||
<svg className="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M14.25 9.75L16.5 12l-2.25 2.25m-4.5 0L7.5 12l2.25-2.25M6 20.25h12A2.25 2.25 0 0020.25 18V6A2.25 2.25 0 0018 3.75H6A2.25 2.25 0 003.75 6v12A2.25 2.25 0 006 20.25z" />
|
||||
</svg>
|
||||
),
|
||||
description:
|
||||
"cadCAD (complex adaptive dynamics Computer-Aided Design) is a python based modeling framework for research, validation, and Computer Aided Design of complex systems. It supports Agent-Based Modeling (ABM) and System Dynamics (SD) approaches for stochastic dynamical systems and differential games.",
|
||||
},
|
||||
];
|
||||
|
||||
export default function WhyHowWhat() {
|
||||
return (
|
||||
<section id="about" className="px-6 py-24">
|
||||
<div className="mx-auto max-w-6xl">
|
||||
<div className="mb-16 text-center">
|
||||
<h2 className="mb-4 text-3xl font-bold sm:text-4xl">
|
||||
Understand <span className="gradient-text">Complex Systems</span>
|
||||
</h2>
|
||||
<p className="mx-auto max-w-2xl text-muted">
|
||||
Design, simulate, validate, and operate within complex systems using
|
||||
a powerful yet intuitive Python framework.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-8 md:grid-cols-3">
|
||||
{sections.map((section) => (
|
||||
<div
|
||||
key={section.label}
|
||||
className="card-hover rounded-xl border border-border bg-surface p-8"
|
||||
>
|
||||
<div className="mb-4 flex h-14 w-14 items-center justify-center rounded-lg bg-accent/10 text-accent">
|
||||
{section.icon}
|
||||
</div>
|
||||
<h3 className="mb-3 text-xl font-semibold">{section.label}</h3>
|
||||
<p className="leading-relaxed text-muted">{section.description}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
Loading…
Reference in New Issue