<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About — Samoto (Mockup)</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700;9..144,800&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
:root {
--green-900: #0f3a26;
--green-700: #1f6b3f;
--green-600: #2e7d4f;
--green-500: #3a9961;
--green-50: #e8f3ec;
--cream: #f7f3ec;
--cream-dark: #ede5d3;
--ink: #15201c;
--ink-soft: #4a5853;
--rule: #d9d1bd;
--accent-red: #d94f3a;
--accent-yellow: #f4c443;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
font-family: 'Inter', sans-serif;
color: var(--ink);
background: var(--cream);
line-height: 1.55;
-webkit-font-smoothing: antialiased;
}
.display { font-family: 'Fraunces', serif; font-weight: 600; letter-spacing: -0.02em; line-height: 1.05; }
/* --- Header --- */
.nav {
padding: 22px 6vw;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid var(--rule);
background: var(--cream);
position: sticky; top: 0; z-index: 10;
}
.logo { font-family: 'Fraunces', serif; font-weight: 700; font-size: 24px; color: var(--green-900); letter-spacing: -0.02em; }
.nav-links { display: flex; gap: 32px; font-size: 14.5px; font-weight: 500; }
.nav-links a { color: var(--ink); text-decoration: none; }
.nav-links a:hover { color: var(--green-700); }
.nav-cta { background: var(--green-700); color: white; padding: 9px 18px; border-radius: 999px; text-decoration: none; font-size: 14px; font-weight: 600; }
/* --- Mockup banner --- */
.mockup-banner {
background: var(--ink);
color: var(--cream);
text-align: center;
padding: 8px 20px;
font-size: 12.5px;
letter-spacing: 0.04em;
text-transform: uppercase;
}
/* --- Hero --- */
.hero {
padding: 100px 6vw 80px;
max-width: 1280px;
margin: 0 auto;
position: relative;
}
.eyebrow {
font-size: 13px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--green-700);
font-weight: 600;
margin-bottom: 24px;
}
.hero h1 {
font-size: clamp(48px, 7vw, 88px);
max-width: 14ch;
color: var(--green-900);
margin-bottom: 28px;
}
.hero p.lead {
font-size: clamp(19px, 1.6vw, 23px);
max-width: 38ch;
color: var(--ink-soft);
font-weight: 400;
line-height: 1.45;
}
.hero-meta {
margin-top: 56px;
display: flex;
gap: 48px;
font-size: 13.5px;
color: var(--ink-soft);
}
.hero-meta span strong { display: block; color: var(--ink); font-size: 16px; font-family: 'Fraunces', serif; font-weight: 600; margin-bottom: 2px; }
/* --- Story section: editorial 2-col --- */
.story {
padding: 100px 6vw;
max-width: 1280px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1.2fr;
gap: 80px;
align-items: center;
border-top: 1px solid var(--rule);
}
.story-img {
position: relative;
}
.phone-frame {
width: 100%;
max-width: 340px;
aspect-ratio: 9 / 19.5;
border-radius: 38px;
overflow: hidden;
background: white;
box-shadow: 0 30px 80px -20px rgba(15, 58, 38, 0.35), 0 0 0 8px var(--ink);
margin: 0 auto;
position: relative;
}
.phone-frame img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: top;
}
.story-img::before {
content: '';
position: absolute;
inset: -40px;
background: radial-gradient(circle at center, rgba(58, 153, 97, 0.12), transparent 65%);
z-index: -1;
}
.story-text h2 {
font-size: clamp(34px, 4vw, 52px);
color: var(--green-900);
margin-bottom: 28px;
}
.story-text p {
font-size: 17px;
color: var(--ink-soft);
margin-bottom: 18px;
max-width: 52ch;
}
.story-text p.kicker {
font-family: 'Fraunces', serif;
font-size: 22px;
color: var(--ink);
font-weight: 500;
font-style: italic;
margin-top: 28px;
padding-left: 18px;
border-left: 3px solid var(--green-600);
}
/* --- Deals to meals: side-by-side with bold heading --- */
.deals-meals {
background: var(--green-900);
color: var(--cream);
padding: 110px 6vw;
position: relative;
overflow: hidden;
}
.deals-meals::before {
content: '';
position: absolute;
top: -100px; right: -100px;
width: 400px; height: 400px;
background: radial-gradient(circle, rgba(244, 196, 67, 0.15), transparent 70%);
}
.deals-meals-inner {
max-width: 1280px;
margin: 0 auto;
position: relative;
}
.deals-meals h2 {
font-size: clamp(42px, 6vw, 80px);
max-width: 14ch;
margin-bottom: 24px;
color: white;
}
.deals-meals h2 em {
font-style: italic;
color: var(--accent-yellow);
font-weight: 500;
}
.deals-meals p.section-lead {
font-size: 19px;
max-width: 52ch;
color: rgba(247, 243, 236, 0.75);
margin-bottom: 80px;
}
.split {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: end;
}
.split-card { text-align: left; }
.split-card .step-num {
font-family: 'Fraunces', serif;
font-size: 13px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--accent-yellow);
margin-bottom: 14px;
display: block;
}
.split-card h3 {
font-family: 'Fraunces', serif;
font-size: 32px;
font-weight: 600;
margin-bottom: 14px;
color: white;
letter-spacing: -0.01em;
}
.split-card p {
color: rgba(247, 243, 236, 0.7);
font-size: 15.5px;
margin-bottom: 36px;
max-width: 38ch;
}
.split .phone-frame {
box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.6), 0 0 0 8px #000;
}
/* --- Beta section --- */
.beta {
padding: 110px 6vw;
max-width: 1280px;
margin: 0 auto;
display: grid;
grid-template-columns: 1.3fr 1fr;
gap: 80px;
align-items: center;
}
.beta-text .label {
display: inline-block;
background: var(--accent-yellow);
color: var(--ink);
padding: 6px 14px;
border-radius: 4px;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
margin-bottom: 28px;
}
.beta-text h2 {
font-size: clamp(34px, 4vw, 52px);
color: var(--green-900);
margin-bottom: 28px;
max-width: 16ch;
}
.beta-text p {
font-size: 17px;
color: var(--ink-soft);
margin-bottom: 20px;
max-width: 52ch;
}
.beta-text p em {
font-family: 'Fraunces', serif;
font-style: italic;
color: var(--green-700);
}
/* --- Values: 4 cards, editorial --- */
.values {
background: var(--cream-dark);
padding: 110px 6vw;
border-top: 1px solid var(--rule);
border-bottom: 1px solid var(--rule);
}
.values-inner { max-width: 1280px; margin: 0 auto; }
.values h2 {
font-size: clamp(34px, 4vw, 52px);
color: var(--green-900);
margin-bottom: 16px;
}
.values .section-sub { color: var(--ink-soft); margin-bottom: 60px; max-width: 50ch; font-size: 17px; }
.values-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 32px;
}
.value-card {
background: var(--cream);
padding: 36px 28px;
border-radius: 14px;
border: 1px solid var(--rule);
}
.value-card .num {
font-family: 'Fraunces', serif;
font-size: 14px;
color: var(--green-600);
font-weight: 600;
letter-spacing: 0.1em;
margin-bottom: 18px;
display: block;
}
.value-card h3 {
font-family: 'Fraunces', serif;
font-size: 22px;
font-weight: 600;
color: var(--ink);
margin-bottom: 12px;
line-height: 1.2;
}
.value-card p {
font-size: 14.5px;
color: var(--ink-soft);
line-height: 1.55;
}
/* --- CTA --- */
.cta {
padding: 120px 6vw;
max-width: 1280px;
margin: 0 auto;
text-align: center;
}
.cta h2 {
font-size: clamp(48px, 6vw, 76px);
color: var(--green-900);
margin-bottom: 24px;
max-width: 16ch;
margin-left: auto;
margin-right: auto;
}
.cta p {
font-size: 19px;
color: var(--ink-soft);
margin-bottom: 48px;
max-width: 44ch;
margin-left: auto;
margin-right: auto;
}
.cta-buttons {
display: flex;
gap: 16px;
justify-content: center;
flex-wrap: wrap;
}
.cta-btn {
background: var(--green-700);
color: white;
padding: 16px 32px;
border-radius: 999px;
text-decoration: none;
font-weight: 600;
font-size: 15.5px;
}
.cta-btn.ghost {
background: transparent;
color: var(--green-900);
border: 2px solid var(--green-900);
}
/* --- Footer --- */
footer {
background: var(--green-900);
color: var(--cream);
padding: 50px 6vw;
text-align: center;
font-size: 14px;
}
footer .maple { font-size: 18px; vertical-align: -2px; }
/* --- Responsive --- */
@media (max-width: 900px) {
.story, .beta { grid-template-columns: 1fr; gap: 60px; }
.split { grid-template-columns: 1fr; gap: 60px; }
.values-grid { grid-template-columns: 1fr 1fr; }
.nav-links { display: none; }
}
@media (max-width: 540px) {
.values-grid { grid-template-columns: 1fr; }
.hero-meta { flex-direction: column; gap: 20px; }
}
</style>
</head>
<body>
<div class="mockup-banner">Mockup — About page redesign reference</div>
<nav class="nav">
<div class="logo">Samoto</div>
<div class="nav-links">
<a href="#">About</a>
<a href="#">App Features</a>
<a href="#">Blog</a>
<a href="#">Contact</a>
<a href="#">EN / FR</a>
</div>
<a href="#" class="nav-cta">Sign up</a>
</nav>
<!-- HERO -->
<section class="hero">
<div class="eyebrow">About Samoto</div>
<h1 class="display">Groceries cost too much.<br>Samoto helps.</h1>
<p class="lead">Built in Canada to turn weekly flyers into real meals — and real savings.</p>
<div class="hero-meta">
<span><strong>2026</strong>Active beta</span>
<span><strong>Canada</strong>Quebec-first, bilingual</span>
<span><strong>43 retailers</strong>Metro, IGA, Walmart, Avril…</span>
<span><strong>4,038 stores</strong>Across Canada</span>
<span><strong>224 active flyers</strong>Updated weekly</span>
</div>
</section>
<!-- STORY -->
<section class="story">
<div class="story-img">
<div class="phone-frame">
<img src="images/flyers-en.jpeg" alt="Samoto flyers home screen showing local Canadian stores">
</div>
</div>
<div class="story-text">
<div class="eyebrow">The story</div>
<h2 class="display">Why Samoto exists</h2>
<p>Samoto started in a Canadian kitchen, with a parent staring at five grocery flyers trying to figure out what to feed the family that week.</p>
<p>The problem wasn't the deals — there are plenty of deals. The problem was that finding them, comparing them across stores, and turning them into actual meals took hours every week. And by Wednesday, nothing made sense anymore.</p>
<p>So we built the tool we wished existed: an app that reads the flyers for you, finds what's actually on sale near you, and helps you plan meals around it.</p>
<p class="kicker">That's it. No magic. Just less time, less waste, and a smaller grocery bill.</p>
</div>
</section>
<!-- DEALS TO MEALS -->
<section class="deals-meals">
<div class="deals-meals-inner">
<div class="eyebrow" style="color: var(--accent-yellow);">The Samoto way</div>
<h2 class="display">Start with the deals.<br><em>Build the meals.</em></h2>
<p class="section-lead">Most meal planners pick a recipe first, then send you to the store to buy ingredients at full price. Samoto works the other way around.</p>
<div class="split">
<div class="split-card">
<span class="step-num">01 — The deals</span>
<h3>Every flyer near you, in one searchable table</h3>
<p>We pull weekly flyers from stores in your area and organize every product into a searchable table — filter by category, sort by price, jump to the original page.</p>
<div class="phone-frame">
<img src="images/flyer-table-en.jpeg" alt="Digital flyer table showing Walmart Canada products with prices">
</div>
</div>
<div class="split-card">
<span class="step-num">02 — The meals</span>
<h3>Recipes built from what's on sale</h3>
<p>Our AI suggests meals based on real deals this week. Every ingredient shows its sale price, original price, and which store has it.</p>
<div class="phone-frame">
<img src="images/recipe-en.jpeg" alt="Canadian Grilled Atlantic Salmon recipe with priced ingredients tied to local stores">
</div>
</div>
</div>
</div>
</section>
<!-- BETA -->
<section class="beta">
<div class="beta-text">
<span class="label">Live in beta</span>
<h2 class="display">We're not pretending to be finished.</h2>
<p>Samoto is live, free to try, and used every week by Canadian families — but we're in active beta. We're fixing bugs, adding stores, and improving our French-language experience based on feedback from real users.</p>
<p>Our Quebec families especially tell us when something doesn't sound right in <em>vrai français québécois</em>, and we listen.</p>
<p>If you try Samoto and something's off, tell us. That's how the next version gets better.</p>
</div>
<div class="story-img">
<div class="phone-frame">
<img src="images/bot-en.jpeg" alt="AI Grocery Bot answering where to find rice on sale with real prices from local stores">
</div>
</div>
</section>
<!-- VALUES -->
<section class="values">
<div class="values-inner">
<div class="eyebrow">What we care about</div>
<h2 class="display">Four things we won't compromise on.</h2>
<p class="section-sub">Every product decision gets tested against these.</p>
<div class="values-grid">
<div class="value-card">
<span class="num">01</span>
<h3>Real savings, not marketing claims</h3>
<p>We show you what's on sale this week from stores near you. No inflated "savings" math, no fake before-prices.</p>
</div>
<div class="value-card">
<span class="num">02</span>
<h3>Quebec first, all of Canada served</h3>
<p>Bilingual from day one. Quebec French is a first-class language at Samoto — not a translation afterthought.</p>
</div>
<div class="value-card">
<span class="num">03</span>
<h3>No ads, ever</h3>
<p>Samoto is free with a premium upgrade. We make money from users who love the product, not from selling your attention.</p>
</div>
<div class="value-card">
<span class="num">04</span>
<h3>Built by a parent who cooks</h3>
<p>Every feature passes one test: would this actually help a busy family on a Tuesday night?</p>
</div>
</div>
</div>
</section>
<!-- CTA -->
<section class="cta">
<h2 class="display">Take Samoto with you.</h2>
<p>Plan meals around real deals, anywhere you shop in Canada.</p>
<div class="cta-buttons">
<a href="#" class="cta-btn">Try the web app</a>
<a href="#" class="cta-btn ghost">App Store</a>
<a href="#" class="cta-btn ghost">Google Play</a>
</div>
</section>
<footer>
Imagined, designed, and built in Canada <span class="maple">ðŸ</span> · © 2026 Samoto
</footer>
</body>
</html>
