mirror of
https://github.com/fabro-sh/fabro.git
synced 2026-08-28 05:27:41 +00:00
7b452a0783
- Add 1200x630 branded OG image matching Mintlify docs card style - Add Open Graph and Twitter Card meta tags to Layout.astro - Save og-image-template.html for easy regeneration - Remove comma from "open source, dark software factory" everywhere Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
84 lines
No EOL
2.5 KiB
HTML
84 lines
No EOL
2.5 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<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=Space+Grotesk:wght@500;600;700&family=DM+Sans:opsz,wght@9..40,400;9..40,500&display=swap" rel="stylesheet" />
|
|
<style>
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
|
|
.card {
|
|
width: 1200px;
|
|
height: 630px;
|
|
background: linear-gradient(135deg, #0a0f1a 0%, #0F1729 40%, #1a2640 70%, #1e2d4a 100%);
|
|
color: #F7F9FB;
|
|
font-family: 'DM Sans', sans-serif;
|
|
padding: 56px 80px;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.atmosphere {
|
|
position: absolute;
|
|
top: 0; right: 0;
|
|
width: 700px; height: 630px;
|
|
background: radial-gradient(ellipse at 80% 30%, rgba(103, 178, 215, 0.08) 0%, transparent 60%);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.logo {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 16px;
|
|
margin-bottom: 160px;
|
|
}
|
|
|
|
.logo svg { height: 44px; width: auto; }
|
|
|
|
.logo-text {
|
|
font-family: 'Space Grotesk', sans-serif;
|
|
font-weight: 700;
|
|
font-size: 32px;
|
|
color: #67b2d7;
|
|
letter-spacing: 0.06em;
|
|
}
|
|
|
|
.section-label {
|
|
font-size: 22px;
|
|
font-weight: 500;
|
|
color: #67b2d7;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.title {
|
|
font-family: 'Space Grotesk', sans-serif;
|
|
font-weight: 700;
|
|
font-size: 64px;
|
|
line-height: 1.1;
|
|
letter-spacing: -0.02em;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.description {
|
|
font-size: 22px;
|
|
color: #A8B5C5;
|
|
line-height: 1.5;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="card">
|
|
<div class="atmosphere"></div>
|
|
<div class="logo">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 272 348" height="44">
|
|
<path d="M1 237 L62 272 L61 348 L0 312 Z M98 257 L132 275 L132 312 L71 347 L70 272 Z M202 168 L201 230 L141 264 L142 202 Z M70 169 L132 203 L132 264 L70 230 Z M70 241 L90 251 L70 262 Z M3 129 L63 164 L61 262 L1 227 Z M137 125 L196 160 L137 195 L78 160 Z M271 44 L272 119 L211 154 L210 79 Z M132 43 L132 118 L71 153 L70 78 Z M142 43 L202 77 L201 152 L141 118 Z M1 44 L62 78 L62 152 L1 118 Z M206 0 L266 36 L206 72 L146 36 Z M66 1 L126 36 L66 71 L6 36 Z" fill="#67b2d7"/>
|
|
</svg>
|
|
<span class="logo-text">FABRO</span>
|
|
</div>
|
|
<div class="section-label">Open Source</div>
|
|
<h1 class="title">The Dark Software Factory</h1>
|
|
<p class="description">Define your process as a workflow graph. Let AI agents execute it. Intervene only where it matters.</p>
|
|
</div>
|
|
</body>
|
|
</html> |