mirror of
https://github.com/fabro-sh/fabro.git
synced 2026-10-06 02:48:25 +00:00
Add marketing homepage with Tailwind CSS and brand colors
Sets up Tailwind v4 via @tailwindcss/vite, adds the full brand palette (teal, navy, ice, mint, amber, coral) as custom theme tokens, and builds a complete homepage with hero, feature grid, code examples, verification section, multi-model section, observability, "Why Arc", and CTAs. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
parent
a15425762e
commit
2eae4224e1
8 changed files with 478 additions and 6 deletions
|
|
@ -1,6 +1,10 @@
|
|||
import { defineConfig } from "astro/config";
|
||||
import react from "@astrojs/react";
|
||||
import tailwindcss from "@tailwindcss/vite";
|
||||
|
||||
export default defineConfig({
|
||||
integrations: [react()],
|
||||
vite: {
|
||||
plugins: [tailwindcss()],
|
||||
},
|
||||
});
|
||||
|
|
|
|||
|
|
@ -8,10 +8,12 @@
|
|||
"preview": "astro preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"astro": "^5.9.3",
|
||||
"@astrojs/react": "^4.2.1",
|
||||
"@tailwindcss/vite": "^4.2.1",
|
||||
"astro": "^5.9.3",
|
||||
"react": "^19.2.4",
|
||||
"react-dom": "^19.2.4"
|
||||
"react-dom": "^19.2.4",
|
||||
"tailwindcss": "^4.2.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/react": "^19.2.7",
|
||||
|
|
|
|||
19
apps/marketing/public/favicon.svg
Normal file
19
apps/marketing/public/favicon.svg
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M9.06145 23.1079C5.26816 22.3769 -3.39077 20.6274 1.4173 5.06384C9.6344 6.09939 16.9728 14.0644 9.06145 23.1079Z" fill="url(#paint0_linear_17557_2021)"/>
|
||||
<path d="M8.91928 23.0939C5.27642 21.2223 0.78371 4.20891 17.0071 0C20.7569 7.19341 19.6212 16.5452 8.91928 23.0939Z" fill="url(#paint1_linear_17557_2021)"/>
|
||||
<path d="M8.91388 23.0788C8.73534 19.8817 10.1585 9.08525 23.5699 13.1107C23.1812 20.1229 18.984 26.4182 8.91388 23.0788Z" fill="url(#paint2_linear_17557_2021)"/>
|
||||
<defs>
|
||||
<linearGradient id="paint0_linear_17557_2021" x1="3.77557" y1="5.91571" x2="5.23185" y2="21.5589" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#18E299"/>
|
||||
<stop offset="1" stop-color="#15803D"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint1_linear_17557_2021" x1="12.1711" y1="-0.718425" x2="10.1897" y2="22.9832" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#16A34A"/>
|
||||
<stop offset="1" stop-color="#4ADE80"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint2_linear_17557_2021" x1="23.1327" y1="15.353" x2="9.33841" y2="18.5196" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#4ADE80"/>
|
||||
<stop offset="1" stop-color="#0D9373"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
5
apps/marketing/public/symbol.svg
Normal file
5
apps/marketing/public/symbol.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 50 KiB |
|
|
@ -1,4 +1,6 @@
|
|||
---
|
||||
import "../styles/global.css";
|
||||
|
||||
interface Props {
|
||||
title: string;
|
||||
}
|
||||
|
|
@ -7,14 +9,20 @@ const { title } = Astro.props;
|
|||
---
|
||||
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<html lang="en" class="bg-navy-950 text-ice-50 antialiased">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<title>{title}</title>
|
||||
</head>
|
||||
<body>
|
||||
<body class="min-h-screen">
|
||||
<slot />
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,9 +1,419 @@
|
|||
---
|
||||
import Layout from "../layouts/Layout.astro";
|
||||
|
||||
const dotExample = `<span class="text-teal-300">digraph</span> <span class="text-ice-50">plan_implement_verify</span> {
|
||||
<span class="text-ice-300">goal = "Build and verify a feature"</span>
|
||||
|
||||
<span class="text-teal-500">start</span> [shape=Mdiamond]
|
||||
<span class="text-teal-500">plan</span> [shape=box]
|
||||
<span class="text-teal-500">review</span> [shape=diamond]
|
||||
<span class="text-teal-500">impl</span> [shape=box]
|
||||
<span class="text-teal-500">verify</span> [shape=box]
|
||||
<span class="text-teal-500">done</span> [shape=Msquare]
|
||||
|
||||
<span class="text-ice-300">start -> plan</span>
|
||||
<span class="text-ice-300">plan -> review</span>
|
||||
<span class="text-ice-300">review -> plan</span> [label=<span class="text-coral">"revise"</span>]
|
||||
<span class="text-ice-300">review -> impl</span> [label=<span class="text-mint">"approve"</span>]
|
||||
<span class="text-ice-300">impl -> verify</span>
|
||||
<span class="text-ice-300">verify -> impl</span> [label=<span class="text-coral">"fail"</span>]
|
||||
<span class="text-ice-300">verify -> done</span> [label=<span class="text-mint">"pass"</span>]
|
||||
}`;
|
||||
|
||||
const cssExample = `<span class="text-ice-300">/* Fast model for planning */</span>
|
||||
<span class="text-teal-300">box</span> {
|
||||
<span class="text-teal-500">model</span>: <span class="text-ice-50">gemini/gemini-2.5-flash</span>;
|
||||
}
|
||||
|
||||
<span class="text-ice-300">/* Frontier for verification */</span>
|
||||
<span class="text-teal-300">#verify</span> {
|
||||
<span class="text-teal-500">model</span>: <span class="text-ice-50">anthropic/claude-opus-4</span>;
|
||||
}
|
||||
|
||||
<span class="text-ice-300">/* Code generation */</span>
|
||||
<span class="text-teal-300">#impl</span> {
|
||||
<span class="text-teal-500">model</span>: <span class="text-ice-50">anthropic/claude-sonnet-4</span>;
|
||||
}`;
|
||||
---
|
||||
|
||||
<Layout title="Arc">
|
||||
<Layout title="Arc — AI Software Factory">
|
||||
<!-- Nav -->
|
||||
<nav class="fixed top-0 z-50 w-full border-b border-navy-800 bg-navy-950/80 backdrop-blur-md">
|
||||
<div class="mx-auto flex max-w-6xl items-center justify-between px-6 py-4">
|
||||
<a href="/" class="flex items-center gap-3">
|
||||
<img src="/symbol.svg" alt="Arc" class="h-8 w-8" />
|
||||
<span class="text-xl font-bold tracking-tight text-ice-50">Arc</span>
|
||||
</a>
|
||||
<div class="flex items-center gap-6">
|
||||
<a href="https://docs.arc.computer" class="text-sm text-ice-300 hover:text-ice-50 transition-colors">Docs</a>
|
||||
<a href="https://github.com/qltysh/arc" class="text-sm text-ice-300 hover:text-ice-50 transition-colors">GitHub</a>
|
||||
<a
|
||||
href="https://docs.arc.computer/getting-started/quick-start"
|
||||
class="rounded-lg bg-teal-700 px-4 py-2 text-sm font-medium text-white hover:bg-teal-500 transition-colors"
|
||||
>
|
||||
Get started
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<main>
|
||||
<h1>Arc</h1>
|
||||
<!-- Hero -->
|
||||
<section class="relative overflow-hidden pt-32 pb-24">
|
||||
<div class="absolute inset-0 bg-[radial-gradient(ellipse_at_top,_var(--color-navy-800)_0%,_transparent_60%)]"></div>
|
||||
<div class="relative mx-auto max-w-4xl px-6 text-center">
|
||||
<p class="mb-4 inline-block rounded-full border border-teal-700/40 bg-teal-700/10 px-4 py-1.5 text-sm font-medium text-teal-300">
|
||||
Open Source
|
||||
</p>
|
||||
<h1 class="text-5xl font-bold leading-tight tracking-tight text-ice-50 sm:text-6xl">
|
||||
The AI software factory for<br />
|
||||
<span class="text-teal-500">expert engineering teams</span>
|
||||
</h1>
|
||||
<p class="mx-auto mt-6 max-w-2xl text-lg leading-relaxed text-ice-300">
|
||||
Ship production code through long-horizon deterministic workflows, built-in verification,
|
||||
and full observability — without trading quality for speed.
|
||||
</p>
|
||||
<div class="mt-10 flex items-center justify-center gap-4">
|
||||
<a
|
||||
href="https://docs.arc.computer/getting-started/quick-start"
|
||||
class="rounded-lg bg-teal-700 px-6 py-3 text-sm font-semibold text-white hover:bg-teal-500 transition-colors"
|
||||
>
|
||||
Get started
|
||||
</a>
|
||||
<a
|
||||
href="https://docs.arc.computer"
|
||||
class="rounded-lg border border-navy-600 px-6 py-3 text-sm font-semibold text-ice-300 hover:border-ice-300 hover:text-ice-50 transition-colors"
|
||||
>
|
||||
Read the docs
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Core Promise -->
|
||||
<section class="border-t border-navy-800 py-24">
|
||||
<div class="mx-auto max-w-3xl px-6 text-center">
|
||||
<h2 class="text-3xl font-bold tracking-tight text-ice-50">
|
||||
Controlled, auditable pipelines for real engineering
|
||||
</h2>
|
||||
<p class="mt-4 text-lg leading-relaxed text-ice-300">
|
||||
Instead of one-shot code generation, Arc runs workflows: plan, implement, verify, review, ship — using
|
||||
the right model at each step, with guardrails that fail closed.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Feature Grid -->
|
||||
<section class="border-t border-navy-800 py-24">
|
||||
<div class="mx-auto max-w-6xl px-6">
|
||||
<div class="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
|
||||
<div class="rounded-xl border border-navy-800 bg-navy-800/30 p-8">
|
||||
<div class="mb-4 flex h-10 w-10 items-center justify-center rounded-lg bg-teal-700/20">
|
||||
<svg class="h-5 w-5 text-teal-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-lg font-semibold text-ice-50">Deterministic long-horizon runs</h3>
|
||||
<p class="mt-2 text-sm leading-relaxed text-ice-300">
|
||||
Predictable automation with guardrails and rerun-ability. Human-in-the-loop when needed, fully automated when it's not.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="rounded-xl border border-navy-800 bg-navy-800/30 p-8">
|
||||
<div class="mb-4 flex h-10 w-10 items-center justify-center rounded-lg bg-teal-700/20">
|
||||
<svg class="h-5 w-5 text-teal-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-lg font-semibold text-ice-50">Verification-first pipeline</h3>
|
||||
<p class="mt-2 text-sm leading-relaxed text-ice-300">
|
||||
Builds, tests, static analysis, LLM review, and human approval — baked into every workflow, not bolted on after.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="rounded-xl border border-navy-800 bg-navy-800/30 p-8">
|
||||
<div class="mb-4 flex h-10 w-10 items-center justify-center rounded-lg bg-teal-700/20">
|
||||
<svg class="h-5 w-5 text-teal-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-lg font-semibold text-ice-50">Multi-model orchestration</h3>
|
||||
<p class="mt-2 text-sm leading-relaxed text-ice-300">
|
||||
Use the right model for each step. CSS-like stylesheets assign fast models for breadth, frontier models for correctness.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="rounded-xl border border-navy-800 bg-navy-800/30 p-8">
|
||||
<div class="mb-4 flex h-10 w-10 items-center justify-center rounded-lg bg-teal-700/20">
|
||||
<svg class="h-5 w-5 text-teal-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-lg font-semibold text-ice-50">Total observability</h3>
|
||||
<p class="mt-2 text-sm leading-relaxed text-ice-300">
|
||||
Trace every step down to each tool call. Inspect inputs, outputs, and timing. Compare runs and diagnose regressions.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="rounded-xl border border-navy-800 bg-navy-800/30 p-8">
|
||||
<div class="mb-4 flex h-10 w-10 items-center justify-center rounded-lg bg-teal-700/20">
|
||||
<svg class="h-5 w-5 text-teal-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-lg font-semibold text-ice-50">Cloud sandboxes</h3>
|
||||
<p class="mt-2 text-sm leading-relaxed text-ice-300">
|
||||
Ephemeral sandboxes for safe execution. Preview environments to validate changes end-to-end. SSH access when you need it.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="rounded-xl border border-navy-800 bg-navy-800/30 p-8">
|
||||
<div class="mb-4 flex h-10 w-10 items-center justify-center rounded-lg bg-teal-700/20">
|
||||
<svg class="h-5 w-5 text-teal-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-lg font-semibold text-ice-50">Open source, forkable</h3>
|
||||
<p class="mt-2 text-sm leading-relaxed text-ice-300">
|
||||
Written in Rust. AGPL-licensed. Fork it, extend it, make it the center of your engineering process.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Built for Real Engineering -->
|
||||
<section class="border-t border-navy-800 py-24">
|
||||
<div class="mx-auto max-w-6xl px-6">
|
||||
<div class="grid items-start gap-16 lg:grid-cols-2">
|
||||
<div>
|
||||
<h2 class="text-3xl font-bold tracking-tight text-ice-50">
|
||||
Built for real engineering, not promptware
|
||||
</h2>
|
||||
<p class="mt-4 text-lg leading-relaxed text-ice-300">
|
||||
Arc is built like infrastructure: solid architecture, strong defaults, and the reliability you expect from production tooling.
|
||||
</p>
|
||||
<ul class="mt-8 space-y-4">
|
||||
<li class="flex items-start gap-3">
|
||||
<span class="mt-1.5 h-1.5 w-1.5 flex-shrink-0 rounded-full bg-teal-500"></span>
|
||||
<span class="text-ice-300">Written in Rust for performance, safety, and a durable core</span>
|
||||
</li>
|
||||
<li class="flex items-start gap-3">
|
||||
<span class="mt-1.5 h-1.5 w-1.5 flex-shrink-0 rounded-full bg-teal-500"></span>
|
||||
<span class="text-ice-300">Designed for long-horizon tasks across real codebases, not toy demos</span>
|
||||
</li>
|
||||
<li class="flex items-start gap-3">
|
||||
<span class="mt-1.5 h-1.5 w-1.5 flex-shrink-0 rounded-full bg-teal-500"></span>
|
||||
<span class="text-ice-300">Open source — fork it, extend it, and make it the center of your business</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Workflow-as-Code example -->
|
||||
<div class="rounded-xl border border-navy-800 bg-navy-800/30 p-6">
|
||||
<div class="mb-3 flex items-center gap-2">
|
||||
<span class="h-3 w-3 rounded-full bg-coral"></span>
|
||||
<span class="h-3 w-3 rounded-full bg-amber"></span>
|
||||
<span class="h-3 w-3 rounded-full bg-mint"></span>
|
||||
<span class="ml-3 text-xs text-ice-300 font-mono">workflow.dot</span>
|
||||
</div>
|
||||
<pre class="overflow-x-auto text-sm leading-relaxed"><code class="font-mono" set:html={dotExample} /></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Verification -->
|
||||
<section class="border-t border-navy-800 py-24">
|
||||
<div class="mx-auto max-w-6xl px-6">
|
||||
<div class="grid items-start gap-16 lg:grid-cols-2">
|
||||
<div class="order-2 lg:order-1">
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div class="rounded-lg border border-navy-800 bg-navy-800/30 p-5">
|
||||
<div class="mb-2 text-xs font-medium uppercase tracking-wider text-teal-500">Gate</div>
|
||||
<div class="text-sm font-medium text-ice-50">Build + Tests</div>
|
||||
<p class="mt-1 text-xs text-ice-300">Hard gate. Fails block the pipeline.</p>
|
||||
</div>
|
||||
<div class="rounded-lg border border-navy-800 bg-navy-800/30 p-5">
|
||||
<div class="mb-2 text-xs font-medium uppercase tracking-wider text-teal-500">Gate</div>
|
||||
<div class="text-sm font-medium text-ice-50">Static Analysis</div>
|
||||
<p class="mt-1 text-xs text-ice-300">Policy checks enforced at every stage.</p>
|
||||
</div>
|
||||
<div class="rounded-lg border border-navy-800 bg-navy-800/30 p-5">
|
||||
<div class="mb-2 text-xs font-medium uppercase tracking-wider text-teal-500">Layer</div>
|
||||
<div class="text-sm font-medium text-ice-50">LLM Review</div>
|
||||
<p class="mt-1 text-xs text-ice-300">Additional layer, not a substitute for real checks.</p>
|
||||
</div>
|
||||
<div class="rounded-lg border border-navy-800 bg-navy-800/30 p-5">
|
||||
<div class="mb-2 text-xs font-medium uppercase tracking-wider text-teal-500">Loop</div>
|
||||
<div class="text-sm font-medium text-ice-50">Human Review</div>
|
||||
<p class="mt-1 text-xs text-ice-300">Integrated cleanly into the workflow graph.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="order-1 lg:order-2">
|
||||
<h2 class="text-3xl font-bold tracking-tight text-ice-50">
|
||||
Verification is a first-class concept
|
||||
</h2>
|
||||
<p class="mt-4 text-lg leading-relaxed text-ice-300">
|
||||
Arc doesn't just produce output — it validates it. Builds and tests are gates, not suggestions.
|
||||
LLM review adds a layer. Human review loops close the gap.
|
||||
</p>
|
||||
<p class="mt-6 text-sm font-medium text-teal-500">
|
||||
Mergeable results that survive CI and code review.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Multi-model -->
|
||||
<section class="border-t border-navy-800 py-24">
|
||||
<div class="mx-auto max-w-6xl px-6">
|
||||
<div class="grid items-start gap-16 lg:grid-cols-2">
|
||||
<div>
|
||||
<h2 class="text-3xl font-bold tracking-tight text-ice-50">
|
||||
Multi-model, multi-provider
|
||||
</h2>
|
||||
<p class="mt-4 text-lg leading-relaxed text-ice-300">
|
||||
Different steps deserve different models. Arc orchestrates an ensemble so you get the best
|
||||
quality per dollar — fast models for breadth, frontier models for correctness.
|
||||
</p>
|
||||
<ul class="mt-8 space-y-4">
|
||||
<li class="flex items-start gap-3">
|
||||
<span class="mt-1.5 h-1.5 w-1.5 flex-shrink-0 rounded-full bg-teal-500"></span>
|
||||
<span class="text-ice-300">CSS-like stylesheets assign models to workflow stages</span>
|
||||
</li>
|
||||
<li class="flex items-start gap-3">
|
||||
<span class="mt-1.5 h-1.5 w-1.5 flex-shrink-0 rounded-full bg-teal-500"></span>
|
||||
<span class="text-ice-300">Provider flexibility — avoid lock-in, keep leverage</span>
|
||||
</li>
|
||||
<li class="flex items-start gap-3">
|
||||
<span class="mt-1.5 h-1.5 w-1.5 flex-shrink-0 rounded-full bg-teal-500"></span>
|
||||
<span class="text-ice-300">Ensemble strategies to maximize quality and minimize cost</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="rounded-xl border border-navy-800 bg-navy-800/30 p-6">
|
||||
<div class="mb-3 flex items-center gap-2">
|
||||
<span class="h-3 w-3 rounded-full bg-coral"></span>
|
||||
<span class="h-3 w-3 rounded-full bg-amber"></span>
|
||||
<span class="h-3 w-3 rounded-full bg-mint"></span>
|
||||
<span class="ml-3 text-xs text-ice-300 font-mono">models.css</span>
|
||||
</div>
|
||||
<pre class="overflow-x-auto text-sm leading-relaxed"><code class="font-mono" set:html={cssExample} /></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Observability -->
|
||||
<section class="border-t border-navy-800 py-24">
|
||||
<div class="mx-auto max-w-3xl px-6 text-center">
|
||||
<h2 class="text-3xl font-bold tracking-tight text-ice-50">
|
||||
Ground-up observability
|
||||
</h2>
|
||||
<p class="mt-4 text-lg leading-relaxed text-ice-300">
|
||||
If you can't see what happened, you can't trust it. Full traceability across runs — inspect every model
|
||||
call, every tool invocation, every decision point. Compare runs, diagnose regressions, tune workflows.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Why Arc -->
|
||||
<section class="border-t border-navy-800 py-24">
|
||||
<div class="mx-auto max-w-4xl px-6 text-center">
|
||||
<h2 class="text-3xl font-bold tracking-tight text-ice-50">
|
||||
Shippable outcomes, not impressive output
|
||||
</h2>
|
||||
<p class="mt-4 text-lg text-ice-300">
|
||||
Most AI coding tools optimize for impressive output. Arc optimizes for what actually merges.
|
||||
</p>
|
||||
<div class="mt-12 grid gap-6 text-left sm:grid-cols-2">
|
||||
<div class="flex items-start gap-4">
|
||||
<span class="mt-0.5 flex-shrink-0 text-teal-500 font-mono text-lg">→</span>
|
||||
<div>
|
||||
<div class="font-medium text-ice-50">Reviewable changes</div>
|
||||
<div class="text-sm text-ice-300">Not massive diffs</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-start gap-4">
|
||||
<span class="mt-0.5 flex-shrink-0 text-teal-500 font-mono text-lg">→</span>
|
||||
<div>
|
||||
<div class="font-medium text-ice-50">Verification gates</div>
|
||||
<div class="text-sm text-ice-300">Not vibes</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-start gap-4">
|
||||
<span class="mt-0.5 flex-shrink-0 text-teal-500 font-mono text-lg">→</span>
|
||||
<div>
|
||||
<div class="font-medium text-ice-50">Audit trails</div>
|
||||
<div class="text-sm text-ice-300">Not opaque agents</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-start gap-4">
|
||||
<span class="mt-0.5 flex-shrink-0 text-teal-500 font-mono text-lg">→</span>
|
||||
<div>
|
||||
<div class="font-medium text-ice-50">Repeatable workflows</div>
|
||||
<div class="text-sm text-ice-300">Not one-off prompts</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Workflow as Code -->
|
||||
<section class="border-t border-navy-800 py-24">
|
||||
<div class="mx-auto max-w-3xl px-6 text-center">
|
||||
<h2 class="text-3xl font-bold tracking-tight text-ice-50">
|
||||
Workflow-as-Code
|
||||
</h2>
|
||||
<p class="mt-4 text-lg leading-relaxed text-ice-300">
|
||||
Define how work gets done in version-controlled graph files, then run it consistently.
|
||||
Composable steps. Auditable history. Repeatable results. IaC for coding.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CTA -->
|
||||
<section class="border-t border-navy-800 py-24">
|
||||
<div class="mx-auto max-w-3xl px-6 text-center">
|
||||
<h2 class="text-3xl font-bold tracking-tight text-ice-50">
|
||||
Workflows you can audit.<br />Output you can trust.
|
||||
</h2>
|
||||
<div class="mt-10 flex items-center justify-center gap-4">
|
||||
<a
|
||||
href="https://docs.arc.computer/getting-started/quick-start"
|
||||
class="rounded-lg bg-teal-700 px-6 py-3 text-sm font-semibold text-white hover:bg-teal-500 transition-colors"
|
||||
>
|
||||
Get started
|
||||
</a>
|
||||
<a
|
||||
href="https://github.com/qltysh/arc"
|
||||
class="rounded-lg border border-navy-600 px-6 py-3 text-sm font-semibold text-ice-300 hover:border-ice-300 hover:text-ice-50 transition-colors"
|
||||
>
|
||||
View on GitHub
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="border-t border-navy-800 py-12">
|
||||
<div class="mx-auto max-w-6xl px-6">
|
||||
<div class="flex flex-col items-center justify-between gap-4 sm:flex-row">
|
||||
<div class="flex items-center gap-3">
|
||||
<img src="/symbol.svg" alt="Arc" class="h-6 w-6" />
|
||||
<span class="text-sm text-ice-300">Arc — Open source, AGPL-licensed</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-6">
|
||||
<a href="https://docs.arc.computer" class="text-sm text-ice-300 hover:text-ice-50 transition-colors">Docs</a>
|
||||
<a href="https://github.com/qltysh/arc" class="text-sm text-ice-300 hover:text-ice-50 transition-colors">GitHub</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</Layout>
|
||||
|
|
|
|||
22
apps/marketing/src/styles/global.css
Normal file
22
apps/marketing/src/styles/global.css
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
@import "tailwindcss";
|
||||
|
||||
@theme {
|
||||
--color-teal-300: #B5DDEF;
|
||||
--color-teal-500: #67B2D7;
|
||||
--color-teal-700: #357F9E;
|
||||
|
||||
--color-navy-950: #0F1729;
|
||||
--color-navy-800: #252C3D;
|
||||
--color-navy-600: #4B5768;
|
||||
|
||||
--color-ice-50: #F7F9FB;
|
||||
--color-ice-100: #E8EDF3;
|
||||
--color-ice-300: #A8B5C5;
|
||||
|
||||
--color-mint: #5AC8A8;
|
||||
--color-amber: #F0A45B;
|
||||
--color-coral: #E86B6B;
|
||||
|
||||
--font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
|
||||
--font-mono: "JetBrains Mono", ui-monospace, monospace;
|
||||
}
|
||||
2
bun.lock
2
bun.lock
|
|
@ -42,9 +42,11 @@
|
|||
"name": "marketing",
|
||||
"dependencies": {
|
||||
"@astrojs/react": "^4.2.1",
|
||||
"@tailwindcss/vite": "^4.2.1",
|
||||
"astro": "^5.9.3",
|
||||
"react": "^19.2.4",
|
||||
"react-dom": "^19.2.4",
|
||||
"tailwindcss": "^4.2.1",
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/react": "^19.2.7",
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue