mirror of
https://github.com/warmbly/warmbly.git
synced 2026-10-03 08:02:04 +00:00
Matthew Meszaros
676850e778
Full site redesign: - pricing: HeroAtmosphere hero, animated toggle with sliding indicator, slide-up price digits, refined plan cards (no dark gradient on featured), feature matrix trimmed of unverified claims, lighter Warmbly-deep-sky CTA - learn index: sky atmosphere band with floating cards + deep-sky glossary panel - learn/deliverability: rebuilt as a magazine-essay layout with drop-cap, numbered chapter index, single 820px reading column, ornamental dividers, closing pull-quote. Original prose preserved, em dashes removed - product, warmup, sending, inbox, campaigns, analytics, crm, workers, about, contact, brand, trust, changelog, roadmap, faq, 404, integrations, developers, deliverability, security, use-cases: each page got its own distinct shape on top of the shared theme tokens - shared components: PageHero, Section, SectionHead, Card, CTA, Button, UseCasePage, Learn layout, Legal layout themed for the sky/serious style
109 lines
4.7 KiB
Plaintext
109 lines
4.7 KiB
Plaintext
---
|
||
import Layout from '../layouts/Layout.astro';
|
||
import Cloud from './Cloud.astro';
|
||
import Icon from './Icon.astro';
|
||
import CTA from './CTA.astro';
|
||
|
||
interface Props {
|
||
title: string;
|
||
description: string;
|
||
pageTitle: string;
|
||
intro: string;
|
||
challenges: { title: string; body: string }[];
|
||
recipe: { title: string; body: string }[];
|
||
caps: { value: string; label: string }[];
|
||
eyebrow?: string;
|
||
}
|
||
|
||
const { title, description, pageTitle, intro, challenges, recipe, caps, eyebrow = 'Use case' } = Astro.props;
|
||
---
|
||
<Layout title={pageTitle} description={description}>
|
||
<!-- HERO with playbook caps inline -->
|
||
<section class="relative isolate overflow-hidden text-white" style="background: radial-gradient(ellipse 130% 140% at 72% 28%, #0284c7 0%, #0369a1 25%, #075985 50%, #0c4a6e 80%, #0a3d5c 100%);">
|
||
<div class="absolute top-0 right-0 w-[420px] opacity-30 pointer-events-none cloud-drift cloud-1" style="mix-blend-mode: screen;">
|
||
<Cloud variant={5} opacity={1} />
|
||
</div>
|
||
|
||
<div class="container-page relative pt-16 md:pt-20 pb-20">
|
||
<a href="/use-cases/" class="inline-flex items-center gap-1.5 text-[12px] text-white/65 hover:text-white">
|
||
<Icon name="arrowRight" size={12} class="rotate-180" />
|
||
{eyebrow}
|
||
</a>
|
||
<h1 class="mt-4 text-[36px] sm:text-[48px] md:text-[60px] font-semibold tracking-[-0.03em] leading-[1.02] text-white max-w-3xl">
|
||
{title}
|
||
</h1>
|
||
<p class="mt-5 text-[15.5px] md:text-[17px] text-white/75 max-w-2xl leading-relaxed">
|
||
{intro}
|
||
</p>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- CAPS ROW: overlapping into white -->
|
||
<section class="relative -mt-10 pb-16">
|
||
<div class="container-page">
|
||
<div class="grid grid-cols-2 md:grid-cols-4 gap-px bg-[color:var(--border)] rounded-[14px] overflow-hidden ring-1 ring-[color:var(--border)]" style="box-shadow: 0 30px 60px -30px rgba(2,32,71,0.3), var(--shadow-sm);">
|
||
{caps.map((c) => (
|
||
<div class="bg-white p-5 md:p-6">
|
||
<div class="text-[10.5px] uppercase tracking-[0.16em] font-mono text-muted-foreground">{c.label}</div>
|
||
<div class="mt-2 text-[24px] md:text-[28px] font-semibold tracking-[-0.025em] text-heading leading-none">{c.value}</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- CHALLENGES: split layout, sticky title -->
|
||
<section class="bg-[color:var(--surface-1)] border-y border-[color:var(--border)] py-16 md:py-20">
|
||
<div class="container-page grid lg:grid-cols-[1fr_2fr] gap-12 lg:gap-20">
|
||
<div class="lg:sticky lg:top-24 self-start">
|
||
<div class="text-[11px] uppercase tracking-[0.18em] text-muted-foreground font-mono mb-3">The pattern</div>
|
||
<h2 class="text-[26px] md:text-[32px] font-semibold tracking-[-0.025em] text-heading leading-[1.1]">
|
||
What usually goes wrong.
|
||
</h2>
|
||
</div>
|
||
<div class="divide-y divide-[color:var(--border)]">
|
||
{challenges.map((c, i) => (
|
||
<div class="py-5 grid grid-cols-[40px_1fr] gap-4 first:pt-0">
|
||
<div class="text-[11px] font-mono text-rose-500 pt-1">×{String(i + 1).padStart(2, '0')}</div>
|
||
<div>
|
||
<div class="text-[15.5px] font-semibold text-heading">{c.title}</div>
|
||
<p class="mt-1.5 text-[14px] text-foreground/75 leading-relaxed">{c.body}</p>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- RECIPE: numbered steps in a clean stepper -->
|
||
<section class="py-16 md:py-20">
|
||
<div class="container-page">
|
||
<div class="text-[11px] uppercase tracking-[0.18em] text-muted-foreground font-mono mb-3">Recipe</div>
|
||
<h2 class="text-[26px] md:text-[34px] font-semibold tracking-[-0.025em] text-heading max-w-2xl">
|
||
How to set this up in Warmbly.
|
||
</h2>
|
||
|
||
<div class="mt-12 relative">
|
||
<div class="absolute left-[18px] md:left-[20px] top-2 bottom-2 w-px bg-[color:var(--border)]"></div>
|
||
<div class="space-y-4">
|
||
{recipe.map((r, i) => (
|
||
<div class="grid grid-cols-[44px_1fr] gap-4 items-start">
|
||
<div class="relative">
|
||
<div class="w-9 h-9 rounded-full bg-white ring-1 ring-[color:var(--sky-2)] text-[12px] font-mono text-[color:var(--sky-7)] inline-flex items-center justify-center font-semibold">
|
||
{String(i + 1).padStart(2, '0')}
|
||
</div>
|
||
</div>
|
||
<div class="rounded-[12px] bg-white ring-1 ring-[color:var(--border)] p-5" style="box-shadow: var(--shadow-sm);">
|
||
<div class="text-[15px] font-semibold text-heading">{r.title}</div>
|
||
<p class="mt-1.5 text-[13.5px] text-foreground/75 leading-relaxed">{r.body}</p>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<CTA />
|
||
</Layout>
|