aiolabs/sollunar-pitch
9
0
Fork 0
Code Issues Pull requests 1 Projects Releases Packages Wiki Activity Actions

feat(deck): 4-category costs + collaboration-wide copy

Browse source 
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 2026-07-28 18:34:36 +02:00
commit 673d937abe
6 changed files with 54 additions and 36 deletions
Download patch file Download diff file Expand all files Collapse all files

2
index.html
View file

@ -4,7 +4,7 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" /> <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>ARCHIPELAGO — Investment Prospectus</title> <title>Solunar Punk Society — Investment Prospectus</title>
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>

4
src/deck/slides/AskSlide.vue
View file

@ -9,7 +9,7 @@ import { brand, raiseTotal, fmtUsd } from '../data'
<SlideFrame center> <SlideFrame center>
<p class="text-xs font-semibold uppercase tracking-[0.3em] text-amber-400">The ask</p> <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"> <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> </h2>
<div class="mt-8 flex items-baseline justify-center gap-3"> <div class="mt-8 flex items-baseline justify-center gap-3">
@ -17,7 +17,7 @@ import { brand, raiseTotal, fmtUsd } from '../data'
<PlaceholderBadge /> <PlaceholderBadge />
</div> </div>
<p class="mt-2 max-w-xl text-sand-dim"> <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> </p>
<div class="mt-10 flex flex-col items-center gap-3 sm:flex-row"> <div class="mt-10 flex flex-col items-center gap-3 sm:flex-row">

35
src/deck/slides/CostBreakdownSlide.vue
View file

@ -4,7 +4,12 @@ import Icon from '../components/Icon.vue'
import PlaceholderBadge from '../components/PlaceholderBadge.vue' import PlaceholderBadge from '../components/PlaceholderBadge.vue'
import { costCategories, categoryTotal, fmtUsd } from '../data' 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> </script>
<template> <template>
@ -13,38 +18,38 @@ const heads = ['text-pine-300', 'text-amber-300', 'text-clay-400']
title="Cost breakdown" title="Cost breakdown"
subtitle="Every figure lives in one file — swap placeholders for your real budget in src/deck/data.ts." 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 <div
v-for="(c, i) in costCategories" v-for="c in costCategories"
:key="c.id" :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"> <div class="flex items-center gap-2">
<Icon :name="c.icon" class="size-5" :class="heads[i]" /> <Icon :name="c.icon" class="size-4 shrink-0" :class="text[c.accent]" />
<h3 class="font-display text-base font-semibold text-sand">{{ c.title }}</h3> <h3 class="font-display text-sm font-semibold leading-tight text-sand">{{ c.title }}</h3>
</div> </div>
<ul class="mt-4 flex-1 space-y-2.5"> <ul class="mt-3 flex-1 space-y-2">
<li v-for="item in c.items" :key="item.label" class="text-sm"> <li v-for="item in c.items" :key="item.label" class="text-[13px]">
<div class="flex items-baseline justify-between gap-3"> <div class="flex items-baseline justify-between gap-2">
<span class="text-sand-dim">{{ item.label }}</span> <span class="text-sand-dim">{{ item.label }}</span>
<span class="shrink-0 tabular-nums text-sand">{{ fmtUsd(item.amount) }}</span> <span class="shrink-0 tabular-nums text-sand">{{ fmtUsd(item.amount) }}</span>
</div> </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> </li>
</ul> </ul>
<div class="mt-4 flex items-center justify-between border-t border-white/10 pt-3"> <div class="mt-3 flex items-center justify-between border-t border-white/10 pt-2.5">
<span class="text-xs uppercase tracking-wider text-sand-dim">Subtotal</span> <span class="text-[10px] uppercase tracking-wider text-sand-dim">Subtotal</span>
<span class="font-display text-lg font-semibold" :class="heads[i]"> <span class="font-display text-base font-semibold" :class="text[c.accent]">
{{ fmtUsd(categoryTotal(c)) }} {{ fmtUsd(categoryTotal(c)) }}
</span> </span>
</div> </div>
</div> </div>
</div> </div>
<p class="mt-5 flex items-center gap-2 text-xs text-sand-dim"> <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. <PlaceholderBadge /> All amounts are illustrative pending your real quotes &amp; salary bands.
</p> </p>
</SlideFrame> </SlideFrame>
</template> </template>

43
src/deck/slides/InvestmentOverviewSlide.vue
View file

@ -4,8 +4,19 @@ import Icon from '../components/Icon.vue'
import PlaceholderBadge from '../components/PlaceholderBadge.vue' import PlaceholderBadge from '../components/PlaceholderBadge.vue'
import { costCategories, categoryTotal, raiseTotal, fmtUsd } from '../data' import { costCategories, categoryTotal, raiseTotal, fmtUsd } from '../data'
const tones = ['bg-pine-500', 'bg-amber-400', 'bg-clay-400'] // per-category colour (includes the shared 'amber' core-stack category)
const dot = ['text-pine-300', 'text-amber-300', 'text-clay-400'] 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> </script>
<template> <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> <span class="font-display text-6xl font-bold text-sand">{{ fmtUsd(raiseTotal) }}</span>
<PlaceholderBadge /> <PlaceholderBadge />
</div> </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 class="mt-8 flex h-4 w-full overflow-hidden rounded-full">
<div <div
v-for="(c, i) in costCategories" v-for="c in costCategories"
:key="c.id" :key="c.id"
:class="tones[i]" :class="barBg[c.accent]"
:style="{ width: `${(categoryTotal(c) / raiseTotal) * 100}%` }" :style="{ width: `${(categoryTotal(c) / raiseTotal) * 100}%` }"
class="h-full" class="h-full"
/> />
</div> </div>
<div class="mt-3 flex flex-wrap gap-x-6 gap-y-1 text-xs text-sand-dim"> <div class="mt-3 flex flex-wrap gap-x-5 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 v-for="c in costCategories" :key="c.id" class="flex items-center gap-2">
<span class="size-2 rounded-full" :class="tones[i]" /> <span class="size-2 rounded-full" :class="barBg[c.accent]" />
{{ Math.round((categoryTotal(c) / raiseTotal) * 100) }}% {{ Math.round((categoryTotal(c) / raiseTotal) * 100) }}%
</span> </span>
</div> </div>
</div> </div>
<!-- three categories --> <!-- four categories -->
<div class="space-y-3"> <div class="space-y-2.5">
<div <div
v-for="(c, i) in costCategories" v-for="c in costCategories"
:key="c.id" :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" /> <Icon :name="c.icon" class="size-5" />
</span> </span>
<div class="min-w-0 flex-1"> <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> <p class="truncate text-xs text-sand-dim">{{ c.subtitle }}</p>
</div> </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> </div>
</div> </div>

2
src/deck/slides/RevenueSlide.vue
View file

@ -8,7 +8,7 @@ import { revenueStreams } from '../data'
<SlideFrame <SlideFrame
kicker="Not a cost centre — a business" kicker="Not a cost centre — a business"
title="The nodes are fully operational event spaces" 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 class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
<div <div

4
src/deck/slides/RoadmapSlide.vue
View file

@ -6,8 +6,8 @@ import { roadmap } from '../data'
<template> <template>
<SlideFrame <SlideFrame
kicker="The replication play" kicker="The replication play"
title="Prove it twice, then grow it anywhere" title="Prove it three ways, then grow it anywhere"
subtitle="The two nodes aren't the endgame — they're the seed. The blueprint is the business." 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"> <ol class="relative grid gap-6 md:grid-cols-4">
<!-- connecting line --> <!-- connecting line -->