<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Just Because</title>
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300;1,400&family=DM+Sans:wght@300;400;500&display=swap" rel="stylesheet"/>
<style>
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
--cream: #F9F6F1;
--warm-white: #FDFBF8;
--ink: #1A1714;
--muted: #6B6560;
--accent: #B5844A;
--accent-light: #F2E8D9;
--border: rgba(26,23,20,0.1);
--serif: 'Cormorant Garamond', Georgia, serif;
--sans: 'DM Sans', sans-serif;
}
html { scroll-behavior: smooth; }
body {
font-family: var(--sans);
background: var(--warm-white);
color: var(--ink);
font-size: 16px;
line-height: 1.6;
overflow-x: hidden;
}
/* NAV */
nav {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 100;
display: flex;
justify-content: space-between;
align-items: center;
padding: 1.25rem 3rem;
background: rgba(253,251,248,0.85);
backdrop-filter: blur(12px);
border-bottom: 1px solid var(--border);
}
.nav-logo {
font-family: var(--serif);
font-size: 1.5rem;
font-weight: 400;
letter-spacing: 0.05em;
color: var(--ink);
text-decoration: none;
}
.nav-logo em {
font-style: italic;
color: var(--accent);
}
.nav-links {
display: flex;
gap: 2.5rem;
list-style: none;
}
.nav-links a {
font-size: 0.85rem;
font-weight: 400;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--muted);
text-decoration: none;
transition: color 0.2s;
}
.nav-links a:hover { color: var(--ink); }
.nav-cta {
background: var(--ink);
color: var(--warm-white) !important;
padding: 0.5rem 1.4rem;
border-radius: 100px;
font-size: 0.82rem !important;
letter-spacing: 0.06em;
transition: background 0.2s, transform 0.15s !important;
}
.nav-cta:hover {
background: var(--accent) !important;
color: var(--warm-white) !important;
transform: translateY(-1px);
}
/* HERO */
.hero {
min-height: 100vh;
display: flex;
align-items: center;
padding: 7rem 3rem 4rem;
position: relative;
overflow: hidden;
}
.hero::before {
content: '';
position: absolute;
top: -10%;
right: -5%;
width: 55%;
height: 110%;
background: var(--accent-light);
border-radius: 0 0 0 60% / 0 0 0 30%;
z-index: 0;
}
.hero-content {
position: relative;
z-index: 1;
max-width: 640px;
}
.hero-tag {
display: inline-block;
font-size: 0.75rem;
font-weight: 500;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--accent);
border: 1px solid var(--accent);
padding: 0.35rem 1rem;
border-radius: 100px;
margin-bottom: 2rem;
animation: fadeUp 0.6s ease both;
}
.hero h1 {
font-family: var(--serif);
font-size: clamp(3.5rem, 7vw, 6rem);
font-weight: 300;
line-height: 1.05;
letter-spacing: -0.01em;
margin-bottom: 1.5rem;
animation: fadeUp 0.7s 0.1s ease both;
}
.hero h1 em {
font-style: italic;
color: var(--accent);
}
.hero-sub {
font-size: 1.1rem;
font-weight: 300;
color: var(--muted);
line-height: 1.75;
max-width: 480px;
margin-bottom: 2.5rem;
animation: fadeUp 0.7s 0.2s ease both;
}
.hero-actions {
display: flex;
gap: 1rem;
align-items: center;
animation: fadeUp 0.7s 0.3s ease both;
}
.btn-primary {
background: var(--ink);
color: var(--warm-white);
font-family: var(--sans);
font-size: 0.9rem;
font-weight: 500;
letter-spacing: 0.04em;
padding: 0.85rem 2rem;
border-radius: 100px;
text-decoration: none;
transition: background 0.2s, transform 0.15s;
border: none;
cursor: pointer;
}
.btn-primary:hover {
background: var(--accent);
transform: translateY(-2px);
}
.btn-ghost {
font-family: var(--sans);
font-size: 0.85rem;
font-weight: 400;
color: var(--muted);
text-decoration: none;
display: flex;
align-items: center;
gap: 0.4rem;
transition: color 0.2s;
}
.btn-ghost:hover { color: var(--ink); }
.hero-float {
position: absolute;
right: 8%;
top: 50%;
transform: translateY(-50%);
z-index: 1;
display: flex;
flex-direction: column;
gap: 1.25rem;
animation: fadeUp 0.8s 0.4s ease both;
}
.gift-card {
background: white;
border-radius: 20px;
padding: 1.25rem 1.5rem;
box-shadow: 0 8px 40px rgba(0,0,0,0.08);
width: 240px;
border: 1px solid var(--border);
}
.gift-card-emoji {
font-size: 2rem;
margin-bottom: 0.5rem;
}
.gift-card-name {
font-family: var(--serif);
font-size: 1.1rem;
font-weight: 400;
margin-bottom: 0.2rem;
}
.gift-card-from {
font-size: 0.78rem;
color: var(--muted);
}
.gift-card-badge {
display: inline-block;
margin-top: 0.75rem;
font-size: 0.72rem;
font-weight: 500;
letter-spacing: 0.06em;
text-transform: uppercase;
background: var(--accent-light);
color: var(--accent);
padding: 0.3rem 0.8rem;
border-radius: 100px;
}
.gift-card.alt {
transform: translateX(30px);
}
/* HOW IT WORKS */
.section {
padding: 6rem 3rem;
max-width: 1200px;
margin: 0 auto;
}
.section-label {
font-size: 0.75rem;
font-weight: 500;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--accent);
margin-bottom: 1rem;
}
.section-title {
font-family: var(--serif);
font-size: clamp(2.2rem, 4vw, 3.5rem);
font-weight: 300;
line-height: 1.15;
margin-bottom: 1rem;
}
.section-title em {
font-style: italic;
color: var(--accent);
}
.section-sub {
font-size: 1rem;
color: var(--muted);
font-weight: 300;
max-width: 500px;
line-height: 1.7;
margin-bottom: 4rem;
}
.steps {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
}
.step {
padding: 2rem;
border: 1px solid var(--border);
border-radius: 20px;
position: relative;
background: var(--warm-white);
transition: border-color 0.2s, transform 0.2s;
}
.step:hover {
border-color: var(--accent);
transform: translateY(-4px);
}
.step-num {
font-family: var(--serif);
font-size: 3.5rem;
font-weight: 300;
color: var(--accent-light);
line-height: 1;
margin-bottom: 1rem;
}
.step h3 {
font-family: var(--serif);
font-size: 1.4rem;
font-weight: 400;
margin-bottom: 0.75rem;
}
.step p {
font-size: 0.9rem;
color: var(--muted);
line-height: 1.7;
font-weight: 300;
}
/* FEATURES */
.features-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.5rem;
margin-top: 3rem;
}
.feature-card {
background: var(--cream);
border-radius: 20px;
padding: 2rem;
border: 1px solid transparent;
transition: border-color 0.2s, transform 0.2s;
}
.feature-card:hover {
border-color: var(--accent);
transform: translateY(-3px);
}
.feature-card.wide {
grid-column: span 2;
display: flex;
align-items: center;
gap: 3rem;
background: var(--ink);
color: var(--warm-white);
}
.feature-icon {
font-size: 2.2rem;
margin-bottom: 1rem;
}
.feature-card h3 {
font-family: var(--serif);
font-size: 1.3rem;
font-weight: 400;
margin-bottom: 0.5rem;
}
.feature-card p {
font-size: 0.88rem;
color: var(--muted);
line-height: 1.7;
font-weight: 300;
}
.feature-card.wide p { color: rgba(253,251,248,0.65); }
.feature-card.wide h3 { color: var(--warm-white); }
.wide-text { flex: 1; }
.wide-visual {
flex: 0 0 200px;
text-align: center;
font-family: var(--serif);
font-size: 5rem;
font-weight: 300;
color: var(--accent);
font-style: italic;
}
/* TESTIMONIALS */
.testimonials-bg {
background: var(--cream);
padding: 6rem 3rem;
}
.testimonials-inner {
max-width: 1200px;
margin: 0 auto;
}
.testimonials-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
}
.testimonial {
background: white;
border-radius: 20px;
padding: 2rem;
border: 1px solid var(--border);
}
.testimonial-stars {
color: var(--accent);
font-size: 0.9rem;
margin-bottom: 1rem;
letter-spacing: 0.05em;
}
.testimonial-text {
font-family: var(--serif);
font-size: 1.05rem;
font-weight: 400;
line-height: 1.65;
font-style: italic;
margin-bottom: 1.5rem;
color: var(--ink);
}
.testimonial-author {
font-size: 0.82rem;
font-weight: 500;
color: var(--muted);
letter-spacing: 0.04em;
text-transform: uppercase;
}
/* CTA */
.cta-section {
padding: 8rem 3rem;
text-align: center;
position: relative;
overflow: hidden;
}
.cta-section::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 60%;
height: 80%;
background: var(--accent-light);
border-radius: 50%;
filter: blur(60px);
z-index: 0;
}
.cta-inner {
position: relative;
z-index: 1;
max-width: 600px;
margin: 0 auto;
}
.cta-section h2 {
font-family: var(--serif);
font-size: clamp(2.5rem, 5vw, 4rem);
font-weight: 300;
line-height: 1.1;
margin-bottom: 1.5rem;
}
.cta-section h2 em {
font-style: italic;
color: var(--accent);
}
.cta-section p {
color: var(--muted);
font-weight: 300;
font-size: 1rem;
margin-bottom: 2.5rem;
}
/* FOOTER */
footer {
border-top: 1px solid var(--border);
padding: 2.5rem 3rem;
display: flex;
justify-content: space-between;
align-items: center;
}
.footer-logo {
font-family: var(--serif);
font-size: 1.2rem;
font-weight: 400;
letter-spacing: 0.05em;
color: var(--ink);
}
.footer-logo em {
font-style: italic;
color: var(--accent);
}
footer p {
font-size: 0.8rem;
color: var(--muted);
}
@keyframes fadeUp {
from { opacity: 0; transform: translateY(24px); }
to { opacity: 1; transform: translateY(0); }
}
</style>
</head>
<body>
<!-- NAV -->
<nav>
<a href="#" class="nav-logo">Just <em>Because</em></a>
<ul class="nav-links">
<li><a href="#how">How it works</a></li>
<li><a href="#features">Features</a></li>
<li><a href="#reviews">Reviews</a></li>
<li><a href="#cta" class="nav-cta">Send a gift</a></li>
</ul>
</nav>
<!-- HERO -->
<section class="hero">
<div class="hero-content">
<span class="hero-tag">No address needed</span>
<h1>Gifts that arrive <em>just because.</em></h1>
<p class="hero-sub">Send someone a beautiful gift without knowing their address. They get a magical link, choose their delivery details — and you take all the credit.</p>
<div class="hero-actions">
<a href="#cta" class="btn-primary">Send a gift now</a>
<a href="#how" class="btn-ghost">How it works →</a>
</div>
</div>
<div class="hero-float">
<div class="gift-card">
<div class="gift-card-emoji">🌸</div>
<div class="gift-card-name">Luxury Flower Box</div>
<div class="gift-card-from">From: your best friend</div>
<span class="gift-card-badge">Delivered with love</span>
</div>
<div class="gift-card alt">
<div class="gift-card-emoji">🍫</div>
<div class="gift-card-name">Artisan Chocolate Set</div>
<div class="gift-card-from">From: Mom</div>
<span class="gift-card-badge">Just because ✨</span>
</div>
</div>
</section>
<!-- HOW IT WORKS -->
<section class="section" id="how">
<p class="section-label">How it works</p>
<h2 class="section-title">Three steps to <em>delight.</em></h2>
<p class="section-sub">No awkward address-asking. No ruined surprises. Just a beautiful experience for you and whoever's lucky enough to receive it.</p>
<div class="steps">
<div class="step">
<div class="step-num">01</div>
<h3>Pick the perfect gift</h3>
<p>Browse curated gifts — flowers, chocolates, skincare, experiences and more — from premium local and national brands.</p>
</div>
<div class="step">
<div class="step-num">02</div>
<h3>Send them a link</h3>
<p>We send your recipient a beautiful, personalised message. They enter their own delivery details — completely in secret.</p>
</div>
<div class="step">
<div class="step-num">03</div>
<h3>They get the surprise</h3>
<p>Your gift arrives at their door. You get notified the moment they claim it. All you had to do was think of them.</p>
</div>
</div>
</section>
<!-- FEATURES -->
<section class="section" id="features" style="padding-top: 0;">
<p class="section-label">Why Just Because</p>
<h2 class="section-title">Gifting, <em>reimagined.</em></h2>
<div class="features-grid">
<div class="feature-card">
<div class="feature-icon">🔒</div>
<h3>Complete privacy</h3>
<p>The recipient's address is shared directly with the courier — you never see it. Perfect for acquaintances, colleagues, or early dates.</p>
</div>
<div class="feature-card">
<div class="feature-icon">⚡</div>
<h3>Same-day delivery</h3>
<p>We partner with local couriers for same-day and next-day options. Because sometimes you remember at the last minute — and that's okay.</p>
</div>
<div class="feature-card wide">
<div class="wide-text">
<h3>Curated by occasion</h3>
<p>Birthdays, breakups, promotions, new babies, or truly just because — we have gift collections tailored to every moment, every budget, every relationship.</p>
</div>
<div class="wide-visual">"just<br>because"</div>
</div>
<div class="feature-card">
<div class="feature-icon">💌</div>
<h3>Personal message</h3>
<p>Write a heartfelt note and it travels with the gift, beautifully designed and delivered the way your words deserve.</p>
</div>
<div class="feature-card">
<div class="feature-icon">📍</div>
<h3>No address, ever</h3>
<p>Send to anyone — a friend in a new city, a client you've never met, someone you want to surprise. All you need is their phone number or email.</p>
</div>
</div>
</section>
<!-- TESTIMONIALS -->
<div class="testimonials-bg" id="reviews">
<div class="testimonials-inner">
<p class="section-label">Stories</p>
<h2 class="section-title" style="margin-bottom: 0.75rem;">They felt <em>seen.</em></h2>
<p class="section-sub" style="margin-bottom: 3rem;">Real moments, real people.</p>
<div class="testimonials-grid">
<div class="testimonial">
<div class="testimonial-stars">★★★★★</div>
<p class="testimonial-text">"I sent my best friend flowers after her terrible week and I didn't even have her new apartment address. She literally cried. This app is a miracle."</p>
<div class="testimonial-author">— Priya M., London</div>
</div>
<div class="testimonial">
<div class="testimonial-stars">★★★★★</div>
<p class="testimonial-text">"Sent my team gift boxes to celebrate a big launch. No spreadsheet of addresses, no awkward emails. Done in ten minutes. Incredible."</p>
<div class="testimonial-author">— James T., New York</div>
</div>
<div class="testimonial">
<div class="testimonial-stars">★★★★★</div>
<p class="testimonial-text">"Finally a gifting app that gets it. I've sent my mum something every month since I found Just Because. She thinks I've become a completely different person."</p>
<div class="testimonial-author">— Sofia R., Miami</div>
</div>
</div>
</div>
</div>
<!-- CTA -->
<section class="cta-section" id="cta">
<div class="cta-inner">
<h2>Someone deserves a gift <em>right now.</em></h2>
<p>No occasion needed. No address required. Just a little love, delivered beautifully.</p>
<a href="#" class="btn-primary" style="font-size: 1rem; padding: 1rem 2.5rem;">Start sending →</a>
</div>
</section>
<!-- FOOTER -->
<footer>
<div class="footer-logo">Just <em>Because</em></div>
<p>© 2026 Just Because. All rights reserved.</p>
<p>Made with love, no address needed.</p>
</footer>
</body>
</html>