feat(deck): 4-category costs + collaboration-wide copy
Cost overview & breakdown render four accented categories (shared stack + one per entity); revenue, roadmap and ask copy updated for three entities; page title set to Solunar Punk Society. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Patrick Mulligan
parent
9e74000f9f
commit
673d937abe
6 changed files with 54 additions and 36 deletions
|
|
@ -4,7 +4,7 @@
|
|||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>ARCHIPELAGO — Investment Prospectus</title>
|
||||
<title>Solunar Punk Society — Investment Prospectus</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ import { brand, raiseTotal, fmtUsd } from '../data'
|
|||
<SlideFrame center>
|
||||
<p class="text-xs font-semibold uppercase tracking-[0.3em] text-amber-400">The ask</p>
|
||||
<h2 class="mt-4 font-display text-4xl font-semibold text-sand sm:text-5xl">
|
||||
Help us grow the first two flowers
|
||||
Help us grow the first three flowers
|
||||
</h2>
|
||||
|
||||
<div class="mt-8 flex items-baseline justify-center gap-3">
|
||||
|
|
@ -17,7 +17,7 @@ import { brand, raiseTotal, fmtUsd } from '../data'
|
|||
<PlaceholderBadge />
|
||||
</div>
|
||||
<p class="mt-2 max-w-xl text-sand-dim">
|
||||
to launch {{ brand.fullName }} — an angel round for equity partners, open to backers of every size.
|
||||
to launch {{ brand.name }} — an angel round for equity partners, open to backers of every size.
|
||||
</p>
|
||||
|
||||
<div class="mt-10 flex flex-col items-center gap-3 sm:flex-row">
|
||||
|
|
|
|||
|
|
@ -4,7 +4,12 @@ import Icon from '../components/Icon.vue'
|
|||
import PlaceholderBadge from '../components/PlaceholderBadge.vue'
|
||||
import { costCategories, categoryTotal, fmtUsd } from '../data'
|
||||
|
||||
const heads = ['text-pine-300', 'text-amber-300', 'text-clay-400']
|
||||
const text: Record<string, string> = {
|
||||
amber: 'text-amber-300',
|
||||
pine: 'text-pine-300',
|
||||
indigo: 'text-indigo-300',
|
||||
clay: 'text-clay-400',
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
@ -13,38 +18,38 @@ const heads = ['text-pine-300', 'text-amber-300', 'text-clay-400']
|
|||
title="Cost breakdown"
|
||||
subtitle="Every figure lives in one file — swap placeholders for your real budget in src/deck/data.ts."
|
||||
>
|
||||
<div class="grid gap-4 md:grid-cols-3">
|
||||
<div class="grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
|
||||
<div
|
||||
v-for="(c, i) in costCategories"
|
||||
v-for="c in costCategories"
|
||||
:key="c.id"
|
||||
class="flex flex-col rounded-2xl border border-white/10 bg-white/[0.03] p-5"
|
||||
class="flex flex-col rounded-2xl border border-white/10 bg-white/[0.03] p-4"
|
||||
>
|
||||
<div class="flex items-center gap-2">
|
||||
<Icon :name="c.icon" class="size-5" :class="heads[i]" />
|
||||
<h3 class="font-display text-base font-semibold text-sand">{{ c.title }}</h3>
|
||||
<Icon :name="c.icon" class="size-4 shrink-0" :class="text[c.accent]" />
|
||||
<h3 class="font-display text-sm font-semibold leading-tight text-sand">{{ c.title }}</h3>
|
||||
</div>
|
||||
|
||||
<ul class="mt-4 flex-1 space-y-2.5">
|
||||
<li v-for="item in c.items" :key="item.label" class="text-sm">
|
||||
<div class="flex items-baseline justify-between gap-3">
|
||||
<ul class="mt-3 flex-1 space-y-2">
|
||||
<li v-for="item in c.items" :key="item.label" class="text-[13px]">
|
||||
<div class="flex items-baseline justify-between gap-2">
|
||||
<span class="text-sand-dim">{{ item.label }}</span>
|
||||
<span class="shrink-0 tabular-nums text-sand">{{ fmtUsd(item.amount) }}</span>
|
||||
</div>
|
||||
<p v-if="item.note" class="text-[11px] text-sand-dim/70">{{ item.note }}</p>
|
||||
<p v-if="item.note" class="text-[10px] text-sand-dim/70">{{ item.note }}</p>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="mt-4 flex items-center justify-between border-t border-white/10 pt-3">
|
||||
<span class="text-xs uppercase tracking-wider text-sand-dim">Subtotal</span>
|
||||
<span class="font-display text-lg font-semibold" :class="heads[i]">
|
||||
<div class="mt-3 flex items-center justify-between border-t border-white/10 pt-2.5">
|
||||
<span class="text-[10px] uppercase tracking-wider text-sand-dim">Subtotal</span>
|
||||
<span class="font-display text-base font-semibold" :class="text[c.accent]">
|
||||
{{ fmtUsd(categoryTotal(c)) }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="mt-5 flex items-center gap-2 text-xs text-sand-dim">
|
||||
<PlaceholderBadge /> All amounts are illustrative pending your real quotes & salary bands.
|
||||
<p class="mt-4 flex items-center gap-2 text-xs text-sand-dim">
|
||||
<PlaceholderBadge /> All amounts are illustrative pending your real quotes & salary bands.
|
||||
</p>
|
||||
</SlideFrame>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -4,8 +4,19 @@ import Icon from '../components/Icon.vue'
|
|||
import PlaceholderBadge from '../components/PlaceholderBadge.vue'
|
||||
import { costCategories, categoryTotal, raiseTotal, fmtUsd } from '../data'
|
||||
|
||||
const tones = ['bg-pine-500', 'bg-amber-400', 'bg-clay-400']
|
||||
const dot = ['text-pine-300', 'text-amber-300', 'text-clay-400']
|
||||
// per-category colour (includes the shared 'amber' core-stack category)
|
||||
const barBg: Record<string, string> = {
|
||||
amber: 'bg-amber-400',
|
||||
pine: 'bg-pine-500',
|
||||
indigo: 'bg-indigo-500',
|
||||
clay: 'bg-clay-400',
|
||||
}
|
||||
const text: Record<string, string> = {
|
||||
amber: 'text-amber-300',
|
||||
pine: 'text-pine-300',
|
||||
indigo: 'text-indigo-300',
|
||||
clay: 'text-clay-400',
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
@ -17,40 +28,42 @@ const dot = ['text-pine-300', 'text-amber-300', 'text-clay-400']
|
|||
<span class="font-display text-6xl font-bold text-sand">{{ fmtUsd(raiseTotal) }}</span>
|
||||
<PlaceholderBadge />
|
||||
</div>
|
||||
<p class="mt-2 text-sand-dim">Total to launch both proof-of-concept nodes.</p>
|
||||
<p class="mt-2 text-sand-dim">
|
||||
One shared core stack, plus a launch for each of the three entities.
|
||||
</p>
|
||||
|
||||
<div class="mt-8 flex h-4 w-full overflow-hidden rounded-full">
|
||||
<div
|
||||
v-for="(c, i) in costCategories"
|
||||
v-for="c in costCategories"
|
||||
:key="c.id"
|
||||
:class="tones[i]"
|
||||
:class="barBg[c.accent]"
|
||||
:style="{ width: `${(categoryTotal(c) / raiseTotal) * 100}%` }"
|
||||
class="h-full"
|
||||
/>
|
||||
</div>
|
||||
<div class="mt-3 flex flex-wrap gap-x-6 gap-y-1 text-xs text-sand-dim">
|
||||
<span v-for="(c, i) in costCategories" :key="c.id" class="flex items-center gap-2">
|
||||
<span class="size-2 rounded-full" :class="tones[i]" />
|
||||
<div class="mt-3 flex flex-wrap gap-x-5 gap-y-1 text-xs text-sand-dim">
|
||||
<span v-for="c in costCategories" :key="c.id" class="flex items-center gap-2">
|
||||
<span class="size-2 rounded-full" :class="barBg[c.accent]" />
|
||||
{{ Math.round((categoryTotal(c) / raiseTotal) * 100) }}%
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- three categories -->
|
||||
<div class="space-y-3">
|
||||
<!-- four categories -->
|
||||
<div class="space-y-2.5">
|
||||
<div
|
||||
v-for="(c, i) in costCategories"
|
||||
v-for="c in costCategories"
|
||||
:key="c.id"
|
||||
class="flex items-center gap-4 rounded-2xl border border-white/10 bg-white/[0.03] p-5"
|
||||
class="flex items-center gap-4 rounded-2xl border border-white/10 bg-white/[0.03] p-4"
|
||||
>
|
||||
<span class="grid size-11 shrink-0 place-items-center rounded-xl bg-white/5" :class="dot[i]">
|
||||
<span class="grid size-10 shrink-0 place-items-center rounded-xl bg-white/5" :class="text[c.accent]">
|
||||
<Icon :name="c.icon" class="size-5" />
|
||||
</span>
|
||||
<div class="min-w-0 flex-1">
|
||||
<h3 class="font-display text-lg font-semibold text-sand">{{ c.title }}</h3>
|
||||
<h3 class="font-display text-base font-semibold text-sand">{{ c.title }}</h3>
|
||||
<p class="truncate text-xs text-sand-dim">{{ c.subtitle }}</p>
|
||||
</div>
|
||||
<span class="font-display text-xl font-semibold text-sand">{{ fmtUsd(categoryTotal(c)) }}</span>
|
||||
<span class="font-display text-lg font-semibold text-sand">{{ fmtUsd(categoryTotal(c)) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ import { revenueStreams } from '../data'
|
|||
<SlideFrame
|
||||
kicker="Not a cost centre — a business"
|
||||
title="The nodes are fully operational event spaces"
|
||||
subtitle="Every location earns while it demonstrates the technology. Six revenue streams across both nodes."
|
||||
subtitle="Every entity earns while it demonstrates the technology. Six revenue streams across the collaboration."
|
||||
>
|
||||
<div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
|
||||
<div
|
||||
|
|
|
|||
|
|
@ -6,8 +6,8 @@ import { roadmap } from '../data'
|
|||
<template>
|
||||
<SlideFrame
|
||||
kicker="The replication play"
|
||||
title="Prove it twice, then grow it anywhere"
|
||||
subtitle="The two nodes aren't the endgame — they're the seed. The blueprint is the business."
|
||||
title="Prove it three ways, then grow it anywhere"
|
||||
subtitle="The three entities aren't the endgame — they're the seed. The blueprint is the business."
|
||||
>
|
||||
<ol class="relative grid gap-6 md:grid-cols-4">
|
||||
<!-- connecting line -->
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue