diff --git a/apps/website/.vitepress/theme/Landing.vue b/apps/website/.vitepress/theme/Landing.vue new file mode 100644 index 0000000..6b89fb3 --- /dev/null +++ b/apps/website/.vitepress/theme/Landing.vue @@ -0,0 +1,341 @@ + + + + + diff --git a/apps/website/.vitepress/theme/index.ts b/apps/website/.vitepress/theme/index.ts index de50c2e..56dea99 100644 --- a/apps/website/.vitepress/theme/index.ts +++ b/apps/website/.vitepress/theme/index.ts @@ -1,3 +1,11 @@ +import type { EnhanceAppContext } from "vitepress"; import Theme from "@btravstack/theme"; -export default Theme; +import Landing from "./Landing.vue"; + +export default { + extends: Theme, + enhanceApp({ app }: EnhanceAppContext) { + app.component("Landing", Landing); + }, +}; diff --git a/apps/website/index.md b/apps/website/index.md index 13e3203..3d9343e 100644 --- a/apps/website/index.md +++ b/apps/website/index.md @@ -1,39 +1,6 @@ --- -layout: home - -hero: - name: btravstack - text: An expressive, robust TypeScript backend - tagline: Type-safe building blocks for Node — contracts for your messaging and workflows, and a principled way to handle errors. Define things once, let the types flow everywhere. - image: - light: /logos/btravstack-light.svg - dark: /logos/btravstack-dark.svg - alt: btravstack - actions: - - theme: brand - text: Explore on GitHub - link: https://github.com/btravstack - -features: - - icon: - light: /logos/amqp-contract-light.svg - dark: /logos/amqp-contract-dark.svg - title: amqp-contract - details: Type-safe contracts for AMQP & RabbitMQ. Define exchanges, queues and messages once — get types and runtime validation on both ends, reliable retries with DLQs, and AsyncAPI 3.0 generation. - link: https://btravstack.github.io/amqp-contract/ - linkText: Read the docs - - icon: - light: /logos/temporal-contract-light.svg - dark: /logos/temporal-contract-dark.svg - title: temporal-contract - details: Type-safe contracts for Temporal.io. End-to-end types and automatic validation across workflows, activities and clients, with Result / Future error handling. - link: https://btravstack.github.io/temporal-contract/ - linkText: Read the docs - - icon: - light: /logos/unthrown-light.svg - dark: /logos/unthrown-dark.svg - title: unthrown - details: Explicit errors as values, with a separate defect channel for the unexpected. Only a true defect ever throws, and only at unwrap. Zero runtime dependencies. - link: https://btravstack.github.io/unthrown/ - linkText: Read the docs +layout: false +title: btravstack — an expressive, robust TypeScript backend --- + + diff --git a/packages/theme/src/style.css b/packages/theme/src/style.css index 24e2d3c..a7d26c1 100644 --- a/packages/theme/src/style.css +++ b/packages/theme/src/style.css @@ -80,3 +80,54 @@ --vp-code-color: var(--bt-pink-soft); --vp-code-bg: rgba(0, 0, 0, 0.35); } + +/* ── Playful flourishes — shared across every btravstack site ───── */ + +/* Home hero: a soft beetroot glow + a gently floating logo */ +.VPHome { position: relative; overflow-x: clip; } +.VPHome::before { + content: ""; + position: absolute; + top: -90px; + left: 50%; + transform: translateX(-50%); + width: 760px; + max-width: 120vw; + height: 480px; + z-index: 0; + pointer-events: none; + background: radial-gradient(closest-side, rgba(var(--accent-rgb), 0.16), transparent 70%); + filter: blur(10px); +} +:root.dark .VPHome::before { + background: radial-gradient(closest-side, rgba(var(--accent-rgb), 0.28), transparent 70%); +} +.VPHero { position: relative; z-index: 1; } +.VPHero .image-container { animation: btv-floaty 6s ease-in-out infinite; } +.VPHero .image-src { filter: drop-shadow(0 18px 40px rgba(142, 26, 82, 0.4)); } +@keyframes btv-floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } + +/* Feature cards: rounder, with a brand-tinted lift on hover */ +.VPFeature { + border-radius: var(--radius-xl); + transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; +} +.VPFeature:hover { + transform: translateY(-4px); + border-color: var(--vp-c-brand-1); + box-shadow: 0 18px 40px -24px rgba(var(--accent-rgb), 0.5); +} +.VPFeature .icon { border-radius: var(--radius) !important; } + +/* Brand buttons: springy hover */ +.VPButton.brand { transition: filter 0.15s, transform 0.15s; } +.VPButton.brand:hover { filter: brightness(1.07); transform: translateY(-1px); } + +/* Rounder, pinker code */ +.vp-doc :not(pre) > code { border-radius: 7px; } +.vp-doc div[class*="language-"] { border-radius: var(--radius); } +.vp-doc .custom-block { border-radius: var(--radius); } + +@media (prefers-reduced-motion: reduce) { + .VPHero .image-container { animation: none; } +}