Skip to content
This repository was archived by the owner on Mar 26, 2026. It is now read-only.

Commit 617aab3

Browse files
JasperNoBoxDevclaude
JasperNoBoxDev
and
claude
authored
Add Baseline V2 proposal website (#7)
* Fix Cloudflare Pages deploy: create project before first deploy Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * Add Baseline V2 proposal as scrolling website with inline mockups Rebuild the proposal page from a PDF-style deck into a proper scrolling website with sticky nav, section anchoring, and inline HTML/CSS app mockups. Features password gate, 7 feature sections with phone/web mockup frames, color-varied backgrounds (dark, purple, coral), timeline, pricing table (€15,000), and responsive layout. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> --------- Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
1 parent 9002f84 commit 617aab3

33 files changed

Lines changed: 3576 additions & 1121 deletions

‎app/proposal/components/AboutSection.module.css‎

Lines changed: 141 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,141 @@
1+
.about {
2+
padding: 80px 0;
3+
background: var(--light);
4+
}
5+
6+
.container {
7+
max-width: 1200px;
8+
margin: 0 auto;
9+
padding: 0 clamp(1.25rem, 3vw, 3rem);
10+
}
11+
12+
.label {
13+
font-family: var(--font-body);
14+
font-size: 0.8rem;
15+
font-weight: 700;
16+
text-transform: uppercase;
17+
letter-spacing: 0.15em;
18+
color: var(--coral);
19+
margin-bottom: 12px;
20+
display: block;
21+
}
22+
23+
.title {
24+
font-family: var(--font-body);
25+
font-size: clamp(1.75rem, 3vw, 2.5rem);
26+
font-weight: 700;
27+
line-height: 1.15;
28+
margin-bottom: 40px;
29+
color: var(--text-primary);
30+
}
31+
32+
.grid {
33+
display: grid;
34+
grid-template-columns: 1fr 1fr;
35+
gap: 64px;
36+
align-items: start;
37+
}
38+
39+
.text p {
40+
font-family: var(--font-body);
41+
font-size: 1rem;
42+
line-height: 1.75;
43+
color: var(--text-secondary);
44+
margin-bottom: 20px;
45+
}
46+
47+
.stats {
48+
display: grid;
49+
grid-template-columns: 1fr 1fr;
50+
gap: 20px;
51+
margin-top: 32px;
52+
}
53+
54+
.stat {
55+
padding: 20px;
56+
background: white;
57+
border-radius: 10px;
58+
border: 1px solid rgba(0, 0, 0, 0.06);
59+
}
60+
61+
.statNum {
62+
font-family: var(--font-display);
63+
font-size: 1.8rem;
64+
font-weight: 400;
65+
color: var(--coral);
66+
display: block;
67+
margin-bottom: 4px;
68+
}
69+
70+
.statLabel {
71+
font-family: var(--font-body);
72+
font-size: 0.8rem;
73+
color: var(--text-secondary);
74+
}
75+
76+
.imageGallery {
77+
display: grid;
78+
grid-template-columns: 1fr 1fr;
79+
grid-template-rows: 1fr 1fr;
80+
gap: 12px;
81+
}
82+
83+
.galleryImg {
84+
border-radius: 10px;
85+
object-fit: cover;
86+
width: 100%;
87+
height: 180px;
88+
}
89+
90+
.galleryImgTall {
91+
composes: galleryImg;
92+
grid-row: span 2;
93+
height: 100%;
94+
}
95+
96+
.emotions {
97+
display: flex;
98+
gap: 16px;
99+
margin-top: 24px;
100+
flex-wrap: wrap;
101+
}
102+
103+
.emotionChip {
104+
display: flex;
105+
align-items: center;
106+
gap: 8px;
107+
padding: 8px 16px;
108+
background: white;
109+
border-radius: 100px;
110+
border: 1px solid var(--bl-sandstone);
111+
}
112+
113+
.emotionChip span {
114+
font-family: var(--font-body);
115+
font-size: 0.8rem;
116+
color: var(--bl-midnight);
117+
}
118+
119+
@media (max-width: 768px) {
120+
.about {
121+
padding: 48px 0;
122+
}
123+
124+
.grid {
125+
grid-template-columns: 1fr;
126+
gap: 32px;
127+
}
128+
129+
.imageGallery {
130+
grid-template-columns: 1fr 1fr;
131+
}
132+
133+
.galleryImgTall {
134+
grid-row: auto;
135+
height: 180px;
136+
}
137+
138+
.stats {
139+
grid-template-columns: 1fr 1fr;
140+
}
141+
}

‎app/proposal/components/AboutSection.tsx‎

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
import Image from "next/image";
2+
import styles from "./AboutSection.module.css";
3+
4+
const emotions = [
5+
{ icon: "/images/proposal/emotion-carrying.png", label: "Carrying the Day" },
6+
{ icon: "/images/proposal/emotion-winddown.png", label: "Can't Wind Down" },
7+
{ icon: "/images/proposal/emotion-overstimulated.png", label: "Overstimulated" },
8+
{ icon: "/images/proposal/emotion-restless.png", label: "Restless" },
9+
];
10+
11+
export default function AboutSection() {
12+
return (
13+
<section id="about" className={styles.about}>
14+
<div className={styles.container}>
15+
<span className={styles.label}>About</span>
16+
<h2 className={styles.title}>Baseline V1 — Where We Are</h2>
17+
<div className={styles.grid}>
18+
<div className={styles.text}>
19+
<p>
20+
Baseline is a mental wellness app helping users process emotions through
21+
guided audio meditations. Built as a native iOS app, it currently offers
22+
a library of meditations organised by emotional state.
23+
</p>
24+
<p>
25+
All content is bundled locally — no accounts, no cloud, no analytics.
26+
V1 was designed as a personal tool. V2 transforms it into a connected
27+
platform ready for scale.
28+
</p>
29+
<div className={styles.stats}>
30+
<div className={styles.stat}>
31+
<span className={styles.statNum}>60+</span>
32+
<span className={styles.statLabel}>Guided meditations</span>
33+
</div>
34+
<div className={styles.stat}>
35+
<span className={styles.statNum}>10</span>
36+
<span className={styles.statLabel}>Emotional states</span>
37+
</div>
38+
<div className={styles.stat}>
39+
<span className={styles.statNum}>iOS</span>
40+
<span className={styles.statLabel}>Native SwiftUI</span>
41+
</div>
42+
<div className={styles.stat}>
43+
<span className={styles.statNum}>Local</span>
44+
<span className={styles.statLabel}>All content bundled</span>
45+
</div>
46+
</div>
47+
</div>
48+
<div>
49+
<div className={styles.imageGallery}>
50+
<Image
51+
src="/images/proposal/meditation-1.jpg"
52+
alt="Meditation"
53+
width={400}
54+
height={400}
55+
className={styles.galleryImgTall}
56+
/>
57+
<Image
58+
src="/images/proposal/meditation-2.jpg"
59+
alt="Meditation"
60+
width={400}
61+
height={180}
62+
className={styles.galleryImg}
63+
/>
64+
<Image
65+
src="/images/proposal/meditation-3.jpg"
66+
alt="Meditation"
67+
width={400}
68+
height={180}
69+
className={styles.galleryImg}
70+
/>
71+
</div>
72+
<div className={styles.emotions}>
73+
{emotions.map((e) => (
74+
<div key={e.label} className={styles.emotionChip}>
75+
<Image src={e.icon} alt={e.label} width={24} height={24} />
76+
<span>{e.label}</span>
77+
</div>
78+
))}
79+
</div>
80+
</div>
81+
</div>
82+
</div>
83+
</section>
84+
);
85+
}

‎app/proposal/components/CoverSection.module.css‎

Lines changed: 104 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
.cover {
2+
position: relative;
3+
min-height: 100vh;
4+
display: flex;
5+
flex-direction: column;
6+
padding: 64px clamp(1.25rem, 3vw, 3rem);
7+
background: linear-gradient(135deg, #FE795D 0%, #F06A4A 40%, #E5603F 100%);
8+
overflow: hidden;
9+
}
10+
11+
.glow {
12+
position: absolute;
13+
top: -20%;
14+
left: -10%;
15+
width: 60%;
16+
height: 140%;
17+
background: radial-gradient(
18+
ellipse at center,
19+
rgba(255, 255, 255, 0.08) 0%,
20+
transparent 70%
21+
);
22+
pointer-events: none;
23+
}
24+
25+
.polygon {
26+
position: absolute;
27+
top: -10%;
28+
right: -8%;
29+
width: 60%;
30+
height: auto;
31+
opacity: 0.55;
32+
pointer-events: none;
33+
}
34+
35+
.content {
36+
position: relative;
37+
z-index: 1;
38+
max-width: 1200px;
39+
width: 100%;
40+
margin: 0 auto;
41+
display: flex;
42+
flex-direction: column;
43+
min-height: calc(100vh - 128px);
44+
}
45+
46+
.title {
47+
font-family: var(--font-display);
48+
font-size: clamp(4rem, 9vw, 8rem);
49+
font-weight: 400;
50+
color: white;
51+
letter-spacing: -0.04em;
52+
line-height: 0.95;
53+
margin-top: 40px;
54+
margin-bottom: 24px;
55+
}
56+
57+
.divider {
58+
width: 100%;
59+
height: 1px;
60+
background: rgba(255, 255, 255, 0.3);
61+
margin-bottom: 20px;
62+
}
63+
64+
.meta {
65+
display: flex;
66+
gap: 12px;
67+
margin-bottom: auto;
68+
}
69+
70+
.metaTag {
71+
font-family: var(--font-body);
72+
font-size: 0.8rem;
73+
font-weight: 700;
74+
text-transform: uppercase;
75+
letter-spacing: 0.08em;
76+
color: white;
77+
border: 1px solid rgba(255, 255, 255, 0.4);
78+
padding: 8px 20px;
79+
border-radius: 2px;
80+
}
81+
82+
.subtitle {
83+
font-family: var(--font-body);
84+
font-size: 0.95rem;
85+
line-height: 1.7;
86+
color: rgba(255, 255, 255, 0.8);
87+
max-width: 500px;
88+
padding-bottom: 20px;
89+
}
90+
91+
@media (max-width: 768px) {
92+
.cover {
93+
padding: 48px 24px;
94+
}
95+
96+
.title {
97+
font-size: clamp(3rem, 12vw, 5rem);
98+
}
99+
100+
.polygon {
101+
width: 90%;
102+
right: -20%;
103+
}
104+
}

‎app/proposal/components/CoverSection.tsx‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import Image from "next/image";
2+
import styles from "./CoverSection.module.css";
3+
4+
export default function CoverSection() {
5+
return (
6+
<section className={styles.cover}>
7+
<div className={styles.glow} />
8+
<Image
9+
src="/images/polygon-45.png"
10+
alt=""
11+
width={900}
12+
height={900}
13+
className={styles.polygon}
14+
priority
15+
/>
16+
<div className={styles.content}>
17+
<h1 className={styles.title}>Proposal</h1>
18+
<div className={styles.divider} />
19+
<div className={styles.meta}>
20+
<span className={styles.metaTag}>Baseline V2</span>
21+
<span className={styles.metaTag}>Marie Keutler</span>
22+
<span className={styles.metaTag}>March 2026</span>
23+
</div>
24+
<p className={styles.subtitle}>
25+
From standalone meditation app to connected wellness platform.
26+
Subscriptions, cloud content, guided onboarding, and actionable insights.
27+
</p>
28+
</div>
29+
</section>
30+
);
31+
}

0 commit comments

Comments
 (0)