1105 lines
44 KiB
JavaScript
1105 lines
44 KiB
JavaScript
// ============================================================
|
|
// 10 modern website style directions, each rendered as a hero/
|
|
// landing fragment. All content is invented for the exercise —
|
|
// no real brands, no copied marks.
|
|
// ============================================================
|
|
|
|
// Reusable placeholder block: striped SVG with a monospace label.
|
|
const ImgSlot = ({ label, h = 240, tone = "warm" }) => {
|
|
const palettes = {
|
|
warm: { bg: "#efe9df", stripe: "#e3d9c8", ink: "#6b5e48" },
|
|
cool: { bg: "#e6eaef", stripe: "#d4dae3", ink: "#536175" },
|
|
dark: { bg: "#1a1a1c", stripe: "#242427", ink: "#8a8a90" },
|
|
mono: { bg: "#f1f1f1", stripe: "#e4e4e4", ink: "#6b6b6b" },
|
|
neon: { bg: "#0a0a14", stripe: "#11112a", ink: "#7b7ba8" },
|
|
blush: { bg: "#f3e7e3", stripe: "#ebd6d0", ink: "#7a5048" },
|
|
};
|
|
const p = palettes[tone] || palettes.warm;
|
|
return (
|
|
<div style={{
|
|
width: "100%", height: h, background: p.bg, position: "relative",
|
|
backgroundImage: `repeating-linear-gradient(135deg, ${p.bg} 0 14px, ${p.stripe} 14px 15px)`,
|
|
display: "flex", alignItems: "center", justifyContent: "center",
|
|
overflow: "hidden",
|
|
}}>
|
|
<span style={{
|
|
fontFamily: "ui-monospace, 'SF Mono', Menlo, monospace",
|
|
fontSize: 11, letterSpacing: "0.08em", textTransform: "uppercase",
|
|
color: p.ink, padding: "4px 10px",
|
|
border: `1px solid ${p.ink}40`, background: `${p.bg}d0`,
|
|
}}>{label}</span>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
// ============================================================
|
|
// 1. EDITORIAL SWISS — oversized serif, strict grid, restraint
|
|
// ============================================================
|
|
const StyleEditorial = () => (
|
|
<div style={{
|
|
width: "100%", height: "100%", background: "#f6f4ef", color: "#1a1a1a",
|
|
fontFamily: "'Times New Roman', Times, serif",
|
|
display: "grid", gridTemplateRows: "auto 1fr auto",
|
|
}}>
|
|
<header style={{
|
|
display: "flex", justifyContent: "space-between", alignItems: "center",
|
|
padding: "28px 56px", borderBottom: "1px solid #1a1a1a",
|
|
fontSize: 13, fontFamily: "ui-sans-serif, system-ui, sans-serif",
|
|
letterSpacing: "0.04em",
|
|
}}>
|
|
<div style={{ fontWeight: 700, letterSpacing: "0.18em" }}>VOLUME — N°14</div>
|
|
<nav style={{ display: "flex", gap: 32 }}>
|
|
<span>Index</span><span>Letters</span><span>About</span><span>Shop</span>
|
|
</nav>
|
|
<div style={{ fontVariantNumeric: "tabular-nums" }}>20.V.2026</div>
|
|
</header>
|
|
|
|
<main style={{
|
|
display: "grid", gridTemplateColumns: "1fr 1fr", gap: 56,
|
|
padding: "56px", alignItems: "end",
|
|
}}>
|
|
<div>
|
|
<div style={{
|
|
fontSize: 11, fontFamily: "ui-sans-serif, system-ui, sans-serif",
|
|
letterSpacing: "0.2em", textTransform: "uppercase", marginBottom: 32,
|
|
}}>Issue One · Spring</div>
|
|
<h1 style={{
|
|
fontSize: 132, lineHeight: 0.92, letterSpacing: "-0.04em",
|
|
margin: 0, fontWeight: 400, textWrap: "balance",
|
|
}}>
|
|
A quiet<br/><em style={{ fontStyle: "italic" }}>periodical</em><br/>for the<br/>working hand.
|
|
</h1>
|
|
</div>
|
|
<div style={{ display: "grid", gap: 24 }}>
|
|
<ImgSlot label="cover photograph · 4:5" h={340} tone="warm" />
|
|
<p style={{
|
|
fontSize: 16, lineHeight: 1.5, margin: 0, maxWidth: 360,
|
|
fontFamily: "ui-sans-serif, system-ui, sans-serif", color: "#3a3a3a",
|
|
}}>
|
|
Twelve essays, one folio of plates, and a removable broadsheet.
|
|
Printed in two passes on uncoated stock. Mailed flat.
|
|
</p>
|
|
<button style={{
|
|
background: "#1a1a1a", color: "#f6f4ef", border: "none",
|
|
padding: "18px 28px", fontSize: 13, letterSpacing: "0.16em",
|
|
textTransform: "uppercase", fontFamily: "ui-sans-serif, system-ui, sans-serif",
|
|
width: "fit-content", cursor: "pointer",
|
|
}}>Subscribe · $48 / yr</button>
|
|
</div>
|
|
</main>
|
|
|
|
<footer style={{
|
|
display: "flex", justifyContent: "space-between",
|
|
padding: "20px 56px", borderTop: "1px solid #1a1a1a",
|
|
fontSize: 11, fontFamily: "ui-sans-serif, system-ui, sans-serif",
|
|
letterSpacing: "0.16em", textTransform: "uppercase",
|
|
}}>
|
|
<span>001 / 048</span><span>Printed in Leipzig</span><span>ISSN 0000-0000</span>
|
|
</footer>
|
|
</div>
|
|
);
|
|
|
|
// ============================================================
|
|
// 2. NEO-BRUTALISM — thick borders, hard shadows, primary colors
|
|
// ============================================================
|
|
const StyleBrutalist = () => (
|
|
<div style={{
|
|
width: "100%", height: "100%", background: "#fff8e6",
|
|
fontFamily: "'Space Grotesk', ui-sans-serif, system-ui, sans-serif",
|
|
color: "#0a0a0a", position: "relative", overflow: "hidden",
|
|
padding: 40,
|
|
}}>
|
|
<header style={{
|
|
display: "flex", justifyContent: "space-between", alignItems: "center",
|
|
padding: "14px 22px", border: "3px solid #0a0a0a", background: "#fff",
|
|
boxShadow: "6px 6px 0 #0a0a0a", marginBottom: 32,
|
|
}}>
|
|
<div style={{
|
|
fontWeight: 800, fontSize: 22, letterSpacing: "-0.02em",
|
|
display: "flex", alignItems: "center", gap: 10,
|
|
}}>
|
|
<div style={{ width: 22, height: 22, background: "#ff5b3a", border: "2px solid #0a0a0a" }}></div>
|
|
STAMPR
|
|
</div>
|
|
<nav style={{ display: "flex", gap: 8 }}>
|
|
{["Templates", "Pricing", "Docs"].map(l => (
|
|
<span key={l} style={{
|
|
padding: "6px 14px", border: "2px solid #0a0a0a", background: "#fff",
|
|
fontWeight: 600, fontSize: 14,
|
|
}}>{l}</span>
|
|
))}
|
|
<span style={{
|
|
padding: "6px 14px", border: "2px solid #0a0a0a", background: "#0a0a0a",
|
|
color: "#fff8e6", fontWeight: 700, fontSize: 14,
|
|
}}>Sign up →</span>
|
|
</nav>
|
|
</header>
|
|
|
|
<div style={{
|
|
display: "grid", gridTemplateColumns: "1.3fr 1fr", gap: 28,
|
|
}}>
|
|
<div style={{
|
|
background: "#74d0a4", border: "3px solid #0a0a0a",
|
|
boxShadow: "10px 10px 0 #0a0a0a", padding: "44px 40px",
|
|
}}>
|
|
<div style={{
|
|
display: "inline-block", padding: "4px 10px", background: "#0a0a0a",
|
|
color: "#fff8e6", fontSize: 12, fontWeight: 700, letterSpacing: "0.04em",
|
|
marginBottom: 24,
|
|
}}>NEW · v3.0 SHIPPED</div>
|
|
<h1 style={{
|
|
fontSize: 84, lineHeight: 0.92, margin: 0, letterSpacing: "-0.04em",
|
|
fontWeight: 800,
|
|
}}>
|
|
Ship the<br/>damn<br/><span style={{
|
|
background: "#0a0a0a", color: "#ff5b3a", padding: "0 14px",
|
|
display: "inline-block",
|
|
}}>landing</span>.
|
|
</h1>
|
|
<p style={{
|
|
fontSize: 17, lineHeight: 1.4, marginTop: 28, maxWidth: 440,
|
|
fontWeight: 500,
|
|
}}>
|
|
80 blocks. 12 themes. Zero JavaScript. Drag, drop, deploy.
|
|
Loved by 14,200 makers who hated their old builder.
|
|
</p>
|
|
<div style={{ display: "flex", gap: 12, marginTop: 28 }}>
|
|
<button style={{
|
|
background: "#ff5b3a", border: "3px solid #0a0a0a", padding: "16px 28px",
|
|
fontWeight: 800, fontSize: 16, cursor: "pointer",
|
|
boxShadow: "5px 5px 0 #0a0a0a", fontFamily: "inherit",
|
|
}}>Start free →</button>
|
|
<button style={{
|
|
background: "#fff", border: "3px solid #0a0a0a", padding: "16px 28px",
|
|
fontWeight: 700, fontSize: 16, cursor: "pointer", fontFamily: "inherit",
|
|
}}>See templates</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div style={{ display: "grid", gap: 20, gridTemplateRows: "1fr 1fr" }}>
|
|
<div style={{
|
|
background: "#fff", border: "3px solid #0a0a0a",
|
|
boxShadow: "6px 6px 0 #0a0a0a", padding: 22,
|
|
}}>
|
|
<div style={{ fontSize: 56, fontWeight: 800, lineHeight: 1 }}>4.9★</div>
|
|
<div style={{ fontSize: 14, fontWeight: 500, marginTop: 8 }}>
|
|
from 2,140 makers on ProductHunt
|
|
</div>
|
|
</div>
|
|
<div style={{
|
|
background: "#7ec1ff", border: "3px solid #0a0a0a",
|
|
boxShadow: "6px 6px 0 #0a0a0a", padding: 22, position: "relative",
|
|
}}>
|
|
<div style={{ fontSize: 13, fontWeight: 700, letterSpacing: "0.08em" }}>
|
|
LIVE
|
|
</div>
|
|
<div style={{ fontSize: 28, fontWeight: 700, marginTop: 4, lineHeight: 1.1 }}>
|
|
Builds in 19 seconds — try the demo, no signup.
|
|
</div>
|
|
<div style={{
|
|
position: "absolute", bottom: 18, right: 18, width: 44, height: 44,
|
|
border: "3px solid #0a0a0a", background: "#fff8e6",
|
|
display: "flex", alignItems: "center", justifyContent: "center",
|
|
fontSize: 22, fontWeight: 800,
|
|
}}>→</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
|
|
// ============================================================
|
|
// 3. BENTO GRID — modular cards, soft pastels, product-led
|
|
// ============================================================
|
|
const StyleBento = () => (
|
|
<div style={{
|
|
width: "100%", height: "100%", background: "#0f0f12", color: "#fff",
|
|
fontFamily: "'Inter', ui-sans-serif, system-ui, sans-serif",
|
|
padding: 36, display: "grid", gridTemplateRows: "auto 1fr",
|
|
gap: 24,
|
|
}}>
|
|
<header style={{
|
|
display: "flex", justifyContent: "space-between", alignItems: "center",
|
|
}}>
|
|
<div style={{ display: "flex", alignItems: "center", gap: 10, fontWeight: 600 }}>
|
|
<div style={{
|
|
width: 28, height: 28, borderRadius: 8,
|
|
background: "linear-gradient(135deg, #b794f6 0%, #4fd1c5 100%)",
|
|
}}></div>
|
|
Layr Studio
|
|
</div>
|
|
<nav style={{ display: "flex", gap: 28, fontSize: 14, color: "#a0a0aa" }}>
|
|
<span>Product</span><span>Showcase</span><span>Changelog</span><span>Pricing</span>
|
|
</nav>
|
|
<button style={{
|
|
background: "#fff", color: "#0f0f12", border: "none",
|
|
padding: "10px 20px", borderRadius: 999, fontWeight: 600, fontSize: 14,
|
|
cursor: "pointer",
|
|
}}>Open app</button>
|
|
</header>
|
|
|
|
<div style={{
|
|
display: "grid", gridTemplateColumns: "1.4fr 1fr 1fr",
|
|
gridTemplateRows: "1fr 1fr", gap: 16,
|
|
}}>
|
|
<div style={{
|
|
gridRow: "span 2", borderRadius: 24,
|
|
background: "linear-gradient(160deg, #1c1c22 0%, #14141a 100%)",
|
|
border: "1px solid #ffffff10", padding: 32, position: "relative",
|
|
overflow: "hidden",
|
|
}}>
|
|
<div style={{
|
|
fontSize: 12, color: "#b794f6", letterSpacing: "0.12em",
|
|
textTransform: "uppercase", fontWeight: 600,
|
|
}}>Layr 4.0 · ai layouts</div>
|
|
<h1 style={{
|
|
fontSize: 56, lineHeight: 1, margin: "16px 0 18px", letterSpacing: "-0.03em",
|
|
fontWeight: 600, textWrap: "balance",
|
|
}}>
|
|
Design systems that{" "}
|
|
<span style={{
|
|
background: "linear-gradient(90deg, #b794f6, #4fd1c5)",
|
|
WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent",
|
|
}}>ship themselves.</span>
|
|
</h1>
|
|
<p style={{ fontSize: 16, color: "#9a9aa6", lineHeight: 1.5, maxWidth: 380 }}>
|
|
One source of truth. Code, Figma, docs — always in step.
|
|
</p>
|
|
<div style={{ display: "flex", gap: 10, marginTop: 24 }}>
|
|
<button style={{
|
|
background: "#fff", color: "#0f0f12", border: "none", padding: "12px 22px",
|
|
borderRadius: 999, fontWeight: 600, fontSize: 14, cursor: "pointer",
|
|
}}>Start building →</button>
|
|
<button style={{
|
|
background: "transparent", color: "#fff", border: "1px solid #ffffff20",
|
|
padding: "12px 22px", borderRadius: 999, fontSize: 14, cursor: "pointer",
|
|
}}>Watch 2-min tour</button>
|
|
</div>
|
|
<div style={{
|
|
position: "absolute", right: -60, bottom: -40, width: 260, height: 260,
|
|
borderRadius: "50%",
|
|
background: "radial-gradient(circle, #b794f650 0%, transparent 70%)",
|
|
filter: "blur(8px)",
|
|
}}></div>
|
|
</div>
|
|
|
|
<div style={{
|
|
borderRadius: 24, background: "#14141a", border: "1px solid #ffffff10",
|
|
padding: 22, display: "flex", flexDirection: "column", justifyContent: "space-between",
|
|
}}>
|
|
<div style={{ fontSize: 13, color: "#9a9aa6" }}>Components synced</div>
|
|
<div style={{ fontSize: 52, fontWeight: 600, letterSpacing: "-0.03em" }}>
|
|
1,284
|
|
</div>
|
|
<div style={{ display: "flex", alignItems: "center", gap: 6, color: "#4fd1c5", fontSize: 13 }}>
|
|
↑ 18% this week
|
|
</div>
|
|
</div>
|
|
|
|
<div style={{
|
|
borderRadius: 24, background: "#1d1426", border: "1px solid #b794f630",
|
|
padding: 22, position: "relative", overflow: "hidden",
|
|
}}>
|
|
<div style={{ fontSize: 13, color: "#c0a8e8" }}>Live preview</div>
|
|
<div style={{
|
|
marginTop: 14, height: 120, borderRadius: 12,
|
|
background: "#0f0f12", border: "1px solid #ffffff10",
|
|
display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 6, padding: 10,
|
|
}}>
|
|
{[..."abcdef"].map((_, i) => (
|
|
<div key={i} style={{
|
|
background: "#ffffff08", borderRadius: 6,
|
|
border: i === 2 ? "1px solid #b794f680" : "1px solid transparent",
|
|
}}></div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div style={{
|
|
borderRadius: 24, background: "#14141a", border: "1px solid #ffffff10",
|
|
padding: 22, gridColumn: "span 2",
|
|
display: "grid", gridTemplateColumns: "1fr auto", alignItems: "center", gap: 16,
|
|
}}>
|
|
<div>
|
|
<div style={{ fontSize: 13, color: "#9a9aa6", marginBottom: 6 }}>
|
|
Trusted by teams at
|
|
</div>
|
|
<div style={{
|
|
display: "flex", gap: 22, alignItems: "center",
|
|
fontWeight: 600, fontSize: 17, color: "#cfcfd6",
|
|
letterSpacing: "-0.01em",
|
|
}}>
|
|
<span>Halcyon</span><span>·</span><span>Kestrel</span><span>·</span>
|
|
<span>Mossbank</span><span>·</span><span>Tide</span><span>·</span>
|
|
<span>Verra</span>
|
|
</div>
|
|
</div>
|
|
<div style={{
|
|
padding: "10px 18px", borderRadius: 999,
|
|
background: "#ffffff08", border: "1px solid #ffffff14",
|
|
fontSize: 13, color: "#cfcfd6",
|
|
}}>+ 240 more →</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
|
|
// ============================================================
|
|
// 4. GLASS / AURORA — vibrant gradient, frosted blur, soft sans
|
|
// ============================================================
|
|
const StyleAurora = () => (
|
|
<div style={{
|
|
width: "100%", height: "100%", color: "#fff",
|
|
fontFamily: "'Inter', ui-sans-serif, system-ui, sans-serif",
|
|
background: "#0a0420", position: "relative", overflow: "hidden",
|
|
}}>
|
|
{/* Aurora blobs */}
|
|
<div style={{
|
|
position: "absolute", top: -200, left: -100, width: 700, height: 700,
|
|
borderRadius: "50%",
|
|
background: "radial-gradient(circle, #ff3aa8 0%, transparent 60%)",
|
|
filter: "blur(80px)", opacity: 0.7,
|
|
}}></div>
|
|
<div style={{
|
|
position: "absolute", bottom: -200, right: -100, width: 700, height: 700,
|
|
borderRadius: "50%",
|
|
background: "radial-gradient(circle, #3a7bff 0%, transparent 60%)",
|
|
filter: "blur(80px)", opacity: 0.7,
|
|
}}></div>
|
|
<div style={{
|
|
position: "absolute", top: 200, right: 200, width: 400, height: 400,
|
|
borderRadius: "50%",
|
|
background: "radial-gradient(circle, #00e5b3 0%, transparent 60%)",
|
|
filter: "blur(70px)", opacity: 0.5,
|
|
}}></div>
|
|
|
|
{/* Glass nav */}
|
|
<header style={{
|
|
position: "relative", margin: "24px 40px",
|
|
padding: "12px 18px", borderRadius: 999,
|
|
background: "#ffffff10", backdropFilter: "blur(24px)",
|
|
border: "1px solid #ffffff20",
|
|
display: "flex", justifyContent: "space-between", alignItems: "center",
|
|
}}>
|
|
<div style={{ display: "flex", alignItems: "center", gap: 10, fontWeight: 600, paddingLeft: 8 }}>
|
|
<div style={{
|
|
width: 22, height: 22, borderRadius: "50%",
|
|
background: "conic-gradient(from 0deg, #ff3aa8, #3a7bff, #00e5b3, #ff3aa8)",
|
|
}}></div>
|
|
Halo
|
|
</div>
|
|
<nav style={{ display: "flex", gap: 24, fontSize: 14, opacity: 0.85 }}>
|
|
<span>Platform</span><span>Solutions</span><span>Library</span><span>Pricing</span>
|
|
</nav>
|
|
<button style={{
|
|
background: "#fff", color: "#0a0420", border: "none",
|
|
padding: "8px 18px", borderRadius: 999, fontWeight: 600, fontSize: 13,
|
|
cursor: "pointer",
|
|
}}>Get early access</button>
|
|
</header>
|
|
|
|
{/* Hero */}
|
|
<main style={{
|
|
position: "relative", padding: "70px 40px 0",
|
|
display: "grid", gridTemplateColumns: "1.2fr 1fr", gap: 40, alignItems: "center",
|
|
}}>
|
|
<div>
|
|
<div style={{
|
|
display: "inline-flex", alignItems: "center", gap: 8,
|
|
padding: "6px 14px", borderRadius: 999,
|
|
background: "#ffffff10", border: "1px solid #ffffff20",
|
|
backdropFilter: "blur(12px)", fontSize: 12, marginBottom: 24,
|
|
}}>
|
|
<span style={{
|
|
width: 6, height: 6, borderRadius: "50%", background: "#00e5b3",
|
|
boxShadow: "0 0 8px #00e5b3",
|
|
}}></span>
|
|
New · Halo Compose enters beta
|
|
</div>
|
|
<h1 style={{
|
|
fontSize: 88, lineHeight: 0.96, margin: 0, fontWeight: 500,
|
|
letterSpacing: "-0.04em", textWrap: "balance",
|
|
}}>
|
|
A workspace that <span style={{ fontStyle: "italic", fontWeight: 300 }}>thinks</span> in colour.
|
|
</h1>
|
|
<p style={{
|
|
fontSize: 18, lineHeight: 1.5, marginTop: 24, opacity: 0.8,
|
|
maxWidth: 460,
|
|
}}>
|
|
Notes, canvases, and prompts in one luminous surface.
|
|
Built for designers who don't need another folder tree.
|
|
</p>
|
|
<div style={{ display: "flex", gap: 12, marginTop: 28 }}>
|
|
<button style={{
|
|
background: "#fff", color: "#0a0420", border: "none",
|
|
padding: "14px 26px", borderRadius: 999, fontWeight: 600,
|
|
fontSize: 15, cursor: "pointer",
|
|
}}>Try Halo free</button>
|
|
<button style={{
|
|
background: "#ffffff10", color: "#fff",
|
|
border: "1px solid #ffffff30", backdropFilter: "blur(12px)",
|
|
padding: "14px 26px", borderRadius: 999, fontSize: 15, cursor: "pointer",
|
|
}}>▶ Watch the film</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div style={{
|
|
background: "#ffffff10", backdropFilter: "blur(24px)",
|
|
border: "1px solid #ffffff20", borderRadius: 28, padding: 18,
|
|
}}>
|
|
<div style={{
|
|
display: "flex", gap: 6, marginBottom: 14,
|
|
}}>
|
|
{["#ff5b6b", "#ffce5b", "#5bff8c"].map(c => (
|
|
<div key={c} style={{ width: 11, height: 11, borderRadius: "50%", background: c, opacity: 0.7 }}></div>
|
|
))}
|
|
</div>
|
|
<ImgSlot label="product canvas · 16:10" h={220} tone="dark" />
|
|
<div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 8, marginTop: 12 }}>
|
|
{[1,2,3].map(i => (
|
|
<div key={i} style={{
|
|
borderRadius: 12, padding: 10, fontSize: 11,
|
|
background: "#ffffff08", border: "1px solid #ffffff14",
|
|
}}>
|
|
<div style={{ opacity: 0.6, marginBottom: 4 }}>Board #{i}</div>
|
|
<div style={{ fontWeight: 600 }}>3 frames</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
);
|
|
|
|
// ============================================================
|
|
// 5. TERMINAL / MONO — black bg, monospace, hacker minimal
|
|
// ============================================================
|
|
const StyleTerminal = () => (
|
|
<div style={{
|
|
width: "100%", height: "100%", background: "#0b0b0b", color: "#e8e8d8",
|
|
fontFamily: "ui-monospace, 'JetBrains Mono', 'SF Mono', Menlo, monospace",
|
|
padding: 32, display: "grid", gridTemplateRows: "auto 1fr", gap: 24,
|
|
}}>
|
|
<header style={{
|
|
display: "flex", justifyContent: "space-between", alignItems: "center",
|
|
borderBottom: "1px solid #2a2a2a", paddingBottom: 16,
|
|
}}>
|
|
<div style={{ display: "flex", alignItems: "center", gap: 8 }}>
|
|
<span style={{ color: "#7cf07c" }}>$</span>
|
|
<span style={{ fontWeight: 600 }}>localhost.dev</span>
|
|
<span style={{ color: "#666", fontSize: 13 }}>~/forge</span>
|
|
</div>
|
|
<nav style={{ display: "flex", gap: 24, fontSize: 13, color: "#999" }}>
|
|
<span>./docs</span><span>./changelog</span><span>./pricing</span>
|
|
<span style={{ color: "#e8e8d8" }}>./login →</span>
|
|
</nav>
|
|
</header>
|
|
|
|
<main style={{
|
|
display: "grid", gridTemplateColumns: "1fr 1fr", gap: 48, alignItems: "start",
|
|
}}>
|
|
<div>
|
|
<div style={{ color: "#7cf07c", fontSize: 13, marginBottom: 16 }}>
|
|
▸ build_0427 · 11ms cold start
|
|
</div>
|
|
<h1 style={{
|
|
fontSize: 56, lineHeight: 1.05, margin: 0, fontWeight: 600,
|
|
letterSpacing: "-0.02em",
|
|
}}>
|
|
forge<span style={{ color: "#7cf07c" }}>()</span><br/>
|
|
— a tiny <span style={{ background: "#e8e8d8", color: "#0b0b0b", padding: "0 6px" }}>db</span><br/>
|
|
for serious people.
|
|
</h1>
|
|
<p style={{
|
|
fontSize: 14, lineHeight: 1.6, marginTop: 28, color: "#a8a89c",
|
|
maxWidth: 440,
|
|
}}>
|
|
{`// 0 dependencies. 28kb gzipped. Edge-deployable.`}<br/>
|
|
{`// SQL syntax, KV speed. Built in Rust.`}
|
|
</p>
|
|
|
|
<div style={{
|
|
marginTop: 28, padding: 18, background: "#141414",
|
|
border: "1px solid #2a2a2a", borderRadius: 4, fontSize: 13,
|
|
lineHeight: 1.7,
|
|
}}>
|
|
<div style={{ color: "#666" }}>$ npm i @forge/edge</div>
|
|
<div style={{ color: "#7cf07c" }}>✓ installed in 0.8s</div>
|
|
<div style={{ color: "#666" }}>$ forge init</div>
|
|
<div style={{ color: "#7cf07c" }}>✓ ready — visit :3000</div>
|
|
<div style={{ color: "#e8e8d8" }}>$ <span style={{
|
|
display: "inline-block", width: 8, height: 14, background: "#e8e8d8",
|
|
verticalAlign: "middle", animation: "blink 1s step-end infinite",
|
|
}}></span></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div style={{ display: "grid", gap: 14 }}>
|
|
{[
|
|
{ k: "latency.p99", v: "1.4ms", h: "+0.0ms wk" },
|
|
{ k: "regions", v: "37", h: "all green" },
|
|
{ k: "stars", v: "24.8k", h: "↑ 1,204 wk" },
|
|
{ k: "uptime.90d", v: "99.998%", h: "no incidents" },
|
|
].map(r => (
|
|
<div key={r.k} style={{
|
|
display: "grid", gridTemplateColumns: "1fr auto auto", alignItems: "baseline",
|
|
padding: "14px 18px", border: "1px solid #2a2a2a", borderRadius: 4,
|
|
background: "#0f0f0f", fontSize: 14,
|
|
}}>
|
|
<span style={{ color: "#999" }}>{r.k}</span>
|
|
<span style={{ fontSize: 24, fontWeight: 600, marginRight: 16 }}>{r.v}</span>
|
|
<span style={{ color: "#7cf07c", fontSize: 11 }}>{r.h}</span>
|
|
</div>
|
|
))}
|
|
<div style={{ display: "flex", gap: 10, marginTop: 6 }}>
|
|
<button style={{
|
|
background: "#e8e8d8", color: "#0b0b0b", border: "none",
|
|
padding: "12px 22px", fontSize: 13, fontWeight: 600,
|
|
fontFamily: "inherit", cursor: "pointer", borderRadius: 3,
|
|
}}>[read docs]</button>
|
|
<button style={{
|
|
background: "transparent", color: "#e8e8d8", border: "1px solid #2a2a2a",
|
|
padding: "12px 22px", fontSize: 13, fontFamily: "inherit", cursor: "pointer",
|
|
borderRadius: 3,
|
|
}}>$ open shell</button>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
<style>{`@keyframes blink { 50% { opacity: 0; } }`}</style>
|
|
</div>
|
|
);
|
|
|
|
// ============================================================
|
|
// 6. ORGANIC / WARM SERIF — soft shapes, blush palette, slow
|
|
// ============================================================
|
|
const StyleOrganic = () => (
|
|
<div style={{
|
|
width: "100%", height: "100%", background: "#f5ece3", color: "#3a2820",
|
|
fontFamily: "'DM Serif Display', 'Times New Roman', serif",
|
|
padding: "32px 48px", position: "relative", overflow: "hidden",
|
|
}}>
|
|
<div style={{
|
|
position: "absolute", top: -120, right: -120, width: 380, height: 380,
|
|
background: "#e8b4a0", borderRadius: "62% 38% 51% 49% / 47% 56% 44% 53%",
|
|
opacity: 0.7,
|
|
}}></div>
|
|
<div style={{
|
|
position: "absolute", bottom: -150, left: -80, width: 420, height: 320,
|
|
background: "#c8d8c0", borderRadius: "38% 62% 49% 51% / 56% 47% 53% 44%",
|
|
opacity: 0.6,
|
|
}}></div>
|
|
|
|
<header style={{
|
|
display: "flex", justifyContent: "space-between", alignItems: "center",
|
|
marginBottom: 64, position: "relative",
|
|
fontFamily: "'Inter', ui-sans-serif, system-ui, sans-serif",
|
|
}}>
|
|
<div style={{ display: "flex", alignItems: "baseline", gap: 6 }}>
|
|
<span style={{ fontFamily: "'DM Serif Display', serif", fontSize: 26, fontStyle: "italic" }}>marrow</span>
|
|
<span style={{ fontSize: 11, color: "#7a5048" }}>· slow goods co.</span>
|
|
</div>
|
|
<nav style={{ display: "flex", gap: 28, fontSize: 13, color: "#5a3e34" }}>
|
|
<span>Field notes</span><span>The pantry</span><span>Stockists</span><span>Letters</span>
|
|
</nav>
|
|
<div style={{
|
|
padding: "8px 16px", border: "1px solid #3a2820", borderRadius: 999,
|
|
fontSize: 12, color: "#3a2820",
|
|
}}>bag · 0</div>
|
|
</header>
|
|
|
|
<main style={{
|
|
position: "relative",
|
|
display: "grid", gridTemplateColumns: "1.1fr 0.9fr", gap: 48,
|
|
alignItems: "center",
|
|
}}>
|
|
<div>
|
|
<div style={{
|
|
fontFamily: "'Inter', ui-sans-serif, system-ui, sans-serif",
|
|
fontSize: 11, letterSpacing: "0.2em", textTransform: "uppercase",
|
|
color: "#7a5048", marginBottom: 24,
|
|
}}>
|
|
· the spring releases ·
|
|
</div>
|
|
<h1 style={{
|
|
fontSize: 108, lineHeight: 0.96, margin: 0, fontWeight: 400,
|
|
letterSpacing: "-0.02em",
|
|
}}>
|
|
A little<br/>
|
|
<em style={{ fontStyle: "italic" }}>honey,</em>{" "}
|
|
<em style={{ fontStyle: "italic" }}>a little</em><br/>
|
|
patience.
|
|
</h1>
|
|
<p style={{
|
|
fontFamily: "'Inter', ui-sans-serif, system-ui, sans-serif",
|
|
fontSize: 16, lineHeight: 1.6, marginTop: 28, maxWidth: 420,
|
|
color: "#5a3e34",
|
|
}}>
|
|
Twenty-eight new jars from the spring meadow harvest,
|
|
poured by hand, labelled in pencil, sent in straw.
|
|
</p>
|
|
<div style={{
|
|
display: "flex", gap: 14, marginTop: 32, alignItems: "center",
|
|
fontFamily: "'Inter', ui-sans-serif, system-ui, sans-serif",
|
|
}}>
|
|
<button style={{
|
|
background: "#3a2820", color: "#f5ece3", border: "none",
|
|
padding: "16px 30px", borderRadius: 999, fontSize: 14, fontWeight: 500,
|
|
cursor: "pointer",
|
|
}}>Shop the harvest →</button>
|
|
<span style={{ fontSize: 13, color: "#7a5048", fontStyle: "italic" }}>
|
|
ships in straw, mondays
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div style={{
|
|
background: "#fff8f0", borderRadius: 220,
|
|
padding: 22, aspectRatio: "0.85",
|
|
boxShadow: "0 30px 60px -20px #3a282020",
|
|
display: "flex", alignItems: "center", justifyContent: "center",
|
|
overflow: "hidden",
|
|
}}>
|
|
<div style={{
|
|
width: "100%", height: "100%", borderRadius: 200,
|
|
background: `repeating-linear-gradient(135deg, #f5d8c0 0 14px, #e8c8a8 14px 15px)`,
|
|
display: "flex", alignItems: "center", justifyContent: "center",
|
|
fontFamily: "ui-monospace, monospace", fontSize: 11, color: "#7a5048",
|
|
letterSpacing: "0.08em", textTransform: "uppercase",
|
|
}}>
|
|
jar · still life
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
);
|
|
|
|
// ============================================================
|
|
// 7. CYBER / NEON GRID — dense data, neon accent, technical
|
|
// ============================================================
|
|
const StyleCyber = () => (
|
|
<div style={{
|
|
width: "100%", height: "100%", color: "#e0e0f0",
|
|
background: "#06060f",
|
|
backgroundImage: `
|
|
linear-gradient(#0d0d1f 1px, transparent 1px),
|
|
linear-gradient(90deg, #0d0d1f 1px, transparent 1px)
|
|
`,
|
|
backgroundSize: "32px 32px",
|
|
fontFamily: "'Inter', ui-sans-serif, system-ui, sans-serif",
|
|
padding: 32, position: "relative", overflow: "hidden",
|
|
}}>
|
|
<div style={{
|
|
position: "absolute", top: 0, left: 0, right: 0, height: 6,
|
|
background: "linear-gradient(90deg, #ff007a, #00f0ff, #b400ff)",
|
|
}}></div>
|
|
|
|
<header style={{
|
|
display: "flex", justifyContent: "space-between", alignItems: "center",
|
|
marginBottom: 40,
|
|
fontFamily: "ui-monospace, 'JetBrains Mono', monospace",
|
|
}}>
|
|
<div style={{ display: "flex", alignItems: "center", gap: 14, fontSize: 14 }}>
|
|
<span style={{
|
|
color: "#00f0ff", textShadow: "0 0 8px #00f0ff80",
|
|
fontWeight: 700, letterSpacing: "0.04em",
|
|
}}>NULL//STATE</span>
|
|
<span style={{ color: "#555" }}>v2.6.1-rc</span>
|
|
<span style={{
|
|
padding: "2px 8px", background: "#00f0ff20", color: "#00f0ff",
|
|
fontSize: 11, border: "1px solid #00f0ff40",
|
|
}}>● ONLINE</span>
|
|
</div>
|
|
<nav style={{ display: "flex", gap: 24, fontSize: 13, color: "#888" }}>
|
|
<span>// runtime</span><span>// observability</span>
|
|
<span>// console</span><span style={{ color: "#00f0ff" }}>// access</span>
|
|
</nav>
|
|
</header>
|
|
|
|
<main style={{
|
|
display: "grid", gridTemplateColumns: "1.2fr 1fr", gap: 32,
|
|
}}>
|
|
<div>
|
|
<div style={{
|
|
fontFamily: "ui-monospace, monospace", fontSize: 12,
|
|
color: "#ff007a", marginBottom: 20,
|
|
}}>
|
|
▶ TARGET_OS: ANY · CPU: 0.4% · MEM: 28MB
|
|
</div>
|
|
<h1 style={{
|
|
fontSize: 84, lineHeight: 0.96, margin: 0, fontWeight: 700,
|
|
letterSpacing: "-0.04em",
|
|
background: "linear-gradient(180deg, #fff 0%, #888 100%)",
|
|
WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent",
|
|
}}>
|
|
Run the<br/>
|
|
<span style={{
|
|
background: "linear-gradient(90deg, #ff007a, #00f0ff)",
|
|
WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent",
|
|
}}>edge,</span> not the<br/>
|
|
datacentre.
|
|
</h1>
|
|
<p style={{
|
|
fontSize: 16, color: "#a0a0c0", lineHeight: 1.5, marginTop: 24,
|
|
maxWidth: 460,
|
|
}}>
|
|
A microVM runtime that boots in 12ms, anywhere on the planet.
|
|
Stop renting servers. Start renting milliseconds.
|
|
</p>
|
|
<div style={{ display: "flex", gap: 12, marginTop: 28 }}>
|
|
<button style={{
|
|
background: "#00f0ff", color: "#06060f", border: "none",
|
|
padding: "14px 26px", fontWeight: 700, fontSize: 14,
|
|
fontFamily: "inherit", cursor: "pointer",
|
|
clipPath: "polygon(0 0, 100% 0, 100% 70%, 92% 100%, 0 100%)",
|
|
}}>DEPLOY NOW →</button>
|
|
<button style={{
|
|
background: "transparent", color: "#e0e0f0",
|
|
border: "1px solid #00f0ff60", padding: "14px 26px",
|
|
fontSize: 14, fontFamily: "inherit", cursor: "pointer",
|
|
}}>$ open_console</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div style={{
|
|
background: "#0a0a1a", border: "1px solid #00f0ff40", padding: 22,
|
|
position: "relative",
|
|
}}>
|
|
<div style={{
|
|
fontFamily: "ui-monospace, monospace", fontSize: 11,
|
|
color: "#666", marginBottom: 12, display: "flex", justifyContent: "space-between",
|
|
}}>
|
|
<span>LIVE.TELEMETRY</span><span>14:22:09 UTC</span>
|
|
</div>
|
|
{[
|
|
{ region: "AMS", lat: "1.2ms", load: 72 },
|
|
{ region: "SFO", lat: "0.9ms", load: 58 },
|
|
{ region: "NRT", lat: "1.4ms", load: 81 },
|
|
{ region: "GRU", lat: "1.1ms", load: 44 },
|
|
{ region: "JNB", lat: "1.8ms", load: 33 },
|
|
].map(r => (
|
|
<div key={r.region} style={{
|
|
display: "grid", gridTemplateColumns: "50px 60px 1fr",
|
|
gap: 12, alignItems: "center", padding: "10px 0",
|
|
borderBottom: "1px solid #1a1a2a",
|
|
fontFamily: "ui-monospace, monospace", fontSize: 13,
|
|
}}>
|
|
<span style={{ color: "#00f0ff" }}>{r.region}</span>
|
|
<span>{r.lat}</span>
|
|
<div style={{ display: "flex", alignItems: "center", gap: 8 }}>
|
|
<div style={{
|
|
flex: 1, height: 4, background: "#1a1a2a", position: "relative",
|
|
}}>
|
|
<div style={{
|
|
position: "absolute", left: 0, top: 0, bottom: 0,
|
|
width: `${r.load}%`,
|
|
background: r.load > 70 ? "#ff007a" : "#00f0ff",
|
|
boxShadow: r.load > 70 ? "0 0 8px #ff007a" : "0 0 8px #00f0ff",
|
|
}}></div>
|
|
</div>
|
|
<span style={{ color: "#888", fontSize: 11, width: 32 }}>{r.load}%</span>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</main>
|
|
</div>
|
|
);
|
|
|
|
// ============================================================
|
|
// 8. ANTI-DESIGN — overlapping, mixed type, raw, "more is more"
|
|
// ============================================================
|
|
const StyleAntiDesign = () => (
|
|
<div style={{
|
|
width: "100%", height: "100%", background: "#ebe6dd", color: "#111",
|
|
fontFamily: "'Inter', ui-sans-serif, system-ui, sans-serif",
|
|
position: "relative", overflow: "hidden", padding: 32,
|
|
}}>
|
|
{/* Floating sticker tape */}
|
|
<div style={{
|
|
position: "absolute", top: 40, right: -40, transform: "rotate(8deg)",
|
|
background: "#ff4d3a", color: "#fff", padding: "6px 60px",
|
|
fontWeight: 800, letterSpacing: "0.1em", fontSize: 13,
|
|
}}>★ NEW ★ NEW ★ NEW ★ NEW ★</div>
|
|
|
|
<header style={{
|
|
display: "flex", justifyContent: "space-between", alignItems: "center",
|
|
paddingBottom: 16, borderBottom: "2px solid #111",
|
|
}}>
|
|
<div style={{
|
|
fontFamily: "'Times New Roman', serif", fontSize: 32, fontWeight: 700,
|
|
fontStyle: "italic",
|
|
}}>noise<span style={{ color: "#ff4d3a" }}>*</span>floor</div>
|
|
<nav style={{ display: "flex", gap: 18, alignItems: "center", fontSize: 14 }}>
|
|
<span style={{ textDecoration: "underline" }}>diary</span>
|
|
<span style={{ background: "#111", color: "#ebe6dd", padding: "4px 10px" }}>SHOP↗</span>
|
|
<span style={{ fontFamily: "monospace" }}>[ contact ]</span>
|
|
<span style={{
|
|
fontFamily: "'Times New Roman', serif", fontStyle: "italic",
|
|
fontSize: 16,
|
|
}}>about us</span>
|
|
</nav>
|
|
</header>
|
|
|
|
<main style={{ position: "relative", marginTop: 32 }}>
|
|
<h1 style={{
|
|
fontFamily: "'Times New Roman', serif", margin: 0,
|
|
fontSize: 220, lineHeight: 0.88, fontWeight: 400,
|
|
letterSpacing: "-0.06em",
|
|
}}>
|
|
we make<br/>
|
|
<span style={{
|
|
fontFamily: "ui-monospace, monospace", fontSize: 100, fontWeight: 400,
|
|
background: "#111", color: "#ebe6dd", padding: "0 14px",
|
|
letterSpacing: "0", display: "inline-block",
|
|
transform: "translateY(-12px)",
|
|
}}>ugly</span>{" "}
|
|
<span style={{ fontStyle: "italic" }}>magazines</span>
|
|
</h1>
|
|
|
|
<div style={{
|
|
position: "absolute", top: 70, right: 40, width: 260,
|
|
transform: "rotate(-3deg)",
|
|
background: "#fff", padding: 14,
|
|
boxShadow: "8px 8px 0 #111",
|
|
}}>
|
|
<ImgSlot label="issue 04 · cover" h={200} tone="mono" />
|
|
<div style={{
|
|
fontFamily: "ui-monospace, monospace", fontSize: 11,
|
|
marginTop: 8, display: "flex", justifyContent: "space-between",
|
|
}}>
|
|
<span>ISSUE 04</span><span>£12.00</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div style={{
|
|
position: "absolute", bottom: -10, left: 40, right: 40,
|
|
display: "flex", alignItems: "center", justifyContent: "space-between",
|
|
}}>
|
|
<p style={{
|
|
maxWidth: 380, fontSize: 15, lineHeight: 1.4,
|
|
padding: 14, background: "#fff8a8", border: "2px solid #111",
|
|
margin: 0,
|
|
}}>
|
|
A quarterly print zine for people who think websites peaked in 1998.
|
|
Hand-collated. Sometimes stapled. Always opinionated.
|
|
</p>
|
|
<div style={{
|
|
fontFamily: "'Times New Roman', serif", fontStyle: "italic",
|
|
fontSize: 22, textAlign: "right",
|
|
}}>
|
|
<span style={{ textDecoration: "underline wavy #ff4d3a" }}>
|
|
→ subscribe, you coward
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
);
|
|
|
|
// ============================================================
|
|
// 9. MINIMAL MONO — pure black on white, all type, one image
|
|
// ============================================================
|
|
const StyleMinimal = () => (
|
|
<div style={{
|
|
width: "100%", height: "100%", background: "#fafaf8", color: "#0a0a0a",
|
|
fontFamily: "'Inter', ui-sans-serif, system-ui, sans-serif",
|
|
padding: "32px 56px", display: "grid", gridTemplateRows: "auto 1fr auto",
|
|
}}>
|
|
<header style={{
|
|
display: "flex", justifyContent: "space-between", alignItems: "center",
|
|
fontSize: 13,
|
|
}}>
|
|
<div style={{ fontWeight: 600 }}>Atelier No.7</div>
|
|
<nav style={{ display: "flex", gap: 32 }}>
|
|
<span>Work</span><span>Studio</span><span>Journal</span>
|
|
<span style={{ color: "#888" }}>Contact</span>
|
|
</nav>
|
|
</header>
|
|
|
|
<main style={{
|
|
display: "grid", gridTemplateColumns: "1fr 0.9fr", gap: 80,
|
|
alignItems: "end", paddingBottom: 32,
|
|
}}>
|
|
<div>
|
|
<div style={{
|
|
fontSize: 12, letterSpacing: "0.18em", textTransform: "uppercase",
|
|
color: "#888", marginBottom: 80,
|
|
}}>
|
|
Brand & identity, since 2017
|
|
</div>
|
|
<h1 style={{
|
|
fontSize: 96, lineHeight: 1, margin: 0, fontWeight: 400,
|
|
letterSpacing: "-0.04em",
|
|
}}>
|
|
We design<br/>
|
|
the <span style={{
|
|
borderBottom: "2px solid #0a0a0a", paddingBottom: 4,
|
|
}}>quiet parts</span><br/>
|
|
of loud companies.
|
|
</h1>
|
|
<div style={{
|
|
marginTop: 56, display: "flex", gap: 48, fontSize: 13, color: "#444",
|
|
}}>
|
|
<div>
|
|
<div style={{ color: "#888", fontSize: 11, letterSpacing: "0.12em", textTransform: "uppercase" }}>
|
|
Currently
|
|
</div>
|
|
<div style={{ marginTop: 4 }}>One opening · Q3</div>
|
|
</div>
|
|
<div>
|
|
<div style={{ color: "#888", fontSize: 11, letterSpacing: "0.12em", textTransform: "uppercase" }}>
|
|
Based
|
|
</div>
|
|
<div style={{ marginTop: 4 }}>Copenhagen / NYC</div>
|
|
</div>
|
|
<div>
|
|
<div style={{ color: "#888", fontSize: 11, letterSpacing: "0.12em", textTransform: "uppercase" }}>
|
|
Selected
|
|
</div>
|
|
<div style={{ marginTop: 4 }}>Aesop · Loewe · MoMA</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<ImgSlot label="featured project · 4:5" h={460} tone="mono" />
|
|
</main>
|
|
|
|
<footer style={{
|
|
display: "flex", justifyContent: "space-between", alignItems: "center",
|
|
fontSize: 12, color: "#888", borderTop: "1px solid #0a0a0a20", paddingTop: 16,
|
|
}}>
|
|
<span>01 / 04 — Index</span>
|
|
<span>↓ Scroll for the work</span>
|
|
<span>© MMXXVI</span>
|
|
</footer>
|
|
</div>
|
|
);
|
|
|
|
// ============================================================
|
|
// 10. MAXIMALIST Y2K — gradient, chunky type, decoration
|
|
// ============================================================
|
|
const StyleMaximalist = () => (
|
|
<div style={{
|
|
width: "100%", height: "100%", color: "#1a0a3a",
|
|
background: "linear-gradient(135deg, #ffb3d9 0%, #b3d9ff 50%, #d9b3ff 100%)",
|
|
fontFamily: "'Inter', ui-sans-serif, system-ui, sans-serif",
|
|
padding: 32, position: "relative", overflow: "hidden",
|
|
}}>
|
|
{/* Decorative shapes */}
|
|
<div style={{
|
|
position: "absolute", top: 80, right: 80, width: 120, height: 120,
|
|
borderRadius: "50%",
|
|
background: "radial-gradient(circle at 30% 30%, #fff, #ff66cc 60%)",
|
|
boxShadow: "0 0 60px #ff66cc60",
|
|
}}></div>
|
|
<div style={{
|
|
position: "absolute", bottom: 100, left: 100, width: 80, height: 80,
|
|
background: "#7aff66", transform: "rotate(45deg)",
|
|
boxShadow: "0 0 40px #7aff6680",
|
|
}}></div>
|
|
<div style={{
|
|
position: "absolute", top: 280, left: 280, fontSize: 28,
|
|
color: "#1a0a3a", transform: "rotate(-15deg)",
|
|
}}>✦</div>
|
|
|
|
<header style={{
|
|
display: "flex", justifyContent: "space-between", alignItems: "center",
|
|
padding: "10px 16px", borderRadius: 999, background: "#1a0a3a",
|
|
color: "#fff",
|
|
}}>
|
|
<div style={{
|
|
fontWeight: 800, fontSize: 18, letterSpacing: "-0.02em",
|
|
display: "flex", alignItems: "center", gap: 8,
|
|
}}>
|
|
<span style={{ fontSize: 20 }}>✺</span>
|
|
sugarglass.fm
|
|
</div>
|
|
<nav style={{ display: "flex", gap: 24, fontSize: 13 }}>
|
|
<span>tunes</span><span>mixes</span><span>shop</span><span>RSVP →</span>
|
|
</nav>
|
|
</header>
|
|
|
|
<main style={{
|
|
position: "relative",
|
|
display: "grid", gridTemplateColumns: "1.2fr 1fr",
|
|
gap: 40, marginTop: 60, alignItems: "center",
|
|
}}>
|
|
<div>
|
|
<div style={{
|
|
display: "inline-block", padding: "6px 14px", borderRadius: 999,
|
|
background: "#1a0a3a", color: "#7aff66", fontSize: 12, fontWeight: 700,
|
|
letterSpacing: "0.08em", marginBottom: 24,
|
|
}}>● LIVE BROADCAST · WED 8PM</div>
|
|
<h1 style={{
|
|
fontSize: 132, lineHeight: 0.9, margin: 0, fontWeight: 800,
|
|
letterSpacing: "-0.05em", textWrap: "balance",
|
|
}}>
|
|
The sound<br/>
|
|
of a <span style={{
|
|
background: "linear-gradient(135deg, #ff66cc, #ffaa00)",
|
|
WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent",
|
|
fontStyle: "italic",
|
|
}}>good</span><br/>
|
|
summer.
|
|
</h1>
|
|
<div style={{ display: "flex", gap: 12, marginTop: 36, alignItems: "center" }}>
|
|
<button style={{
|
|
background: "#1a0a3a", color: "#fff", border: "none",
|
|
padding: "16px 30px", borderRadius: 999, fontWeight: 700,
|
|
fontSize: 15, cursor: "pointer", display: "flex", alignItems: "center", gap: 8,
|
|
}}>▶ tune in</button>
|
|
<button style={{
|
|
background: "#fff", color: "#1a0a3a", border: "2px solid #1a0a3a",
|
|
padding: "14px 28px", borderRadius: 999, fontWeight: 700,
|
|
fontSize: 15, cursor: "pointer",
|
|
}}>see the lineup ✦</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div style={{
|
|
position: "relative", aspectRatio: "1", maxWidth: 380, margin: "0 auto",
|
|
}}>
|
|
<div style={{
|
|
position: "absolute", inset: 0, borderRadius: "50%",
|
|
background: "conic-gradient(from 0deg, #ff66cc, #ffaa00, #7aff66, #66ddff, #ff66cc)",
|
|
padding: 6,
|
|
}}>
|
|
<div style={{
|
|
width: "100%", height: "100%", borderRadius: "50%",
|
|
background: "#1a0a3a", display: "flex", flexDirection: "column",
|
|
alignItems: "center", justifyContent: "center", color: "#fff",
|
|
textAlign: "center", padding: 30, gap: 8,
|
|
}}>
|
|
<div style={{ fontSize: 11, letterSpacing: "0.2em", color: "#ff66cc" }}>
|
|
NOW PLAYING
|
|
</div>
|
|
<div style={{ fontSize: 28, fontWeight: 700, lineHeight: 1.1, fontStyle: "italic" }}>
|
|
"Peach Skin"
|
|
</div>
|
|
<div style={{ fontSize: 13, color: "#b3d9ff" }}>by tangerine club</div>
|
|
<div style={{
|
|
marginTop: 14, height: 3, background: "#ffffff20",
|
|
width: "70%", borderRadius: 999, position: "relative",
|
|
}}>
|
|
<div style={{
|
|
position: "absolute", left: 0, top: 0, bottom: 0, width: "40%",
|
|
background: "#7aff66", borderRadius: 999,
|
|
}}></div>
|
|
</div>
|
|
<div style={{ fontSize: 11, fontFamily: "monospace", color: "#888" }}>
|
|
01:42 / 04:21
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
);
|
|
|
|
// ============================================================
|
|
// Export to window so the canvas file can pick them up
|
|
// ============================================================
|
|
Object.assign(window, {
|
|
StyleEditorial, StyleBrutalist, StyleBento, StyleAurora, StyleTerminal,
|
|
StyleOrganic, StyleCyber, StyleAntiDesign, StyleMinimal, StyleMaximalist,
|
|
});
|