Cinematic Parallax Landing Page
A dark, cinematic architecture landing page with layered parallax, a horizontal project reel, and a commission form.
Modern SaaS Landing Page
A complete responsive landing page for a SaaS product, with navigation, pricing, FAQ, and a final call to action.
Use this free Harbor marketing page as a starting point for a SaaS, productivity, or analytics product. The layout is a single HTML file with CSS variables for color and clearly marked content you can replace.
What's included
- Sticky navigation with a mobile menu
- Hero with primary and secondary calls to action
- Trusted-by strip using text marks instead of fake logos
- Feature grid, product preview, and how-it-works steps
- Testimonials, three-tier pricing, FAQ, and a closing CTA
- Accessible forms that do not pretend to submit to a backend
Responsive support
This template is built as a full page and adapts to desktop, tablet, and mobile widths. Use the live preview to check each viewport before you copy the code.
Template source
Copy the HTML below into your project. A short README in the template folder explains colors, content, and placeholder visuals.
<!--
Harbor — Modern SaaS landing page template
See README.md in this folder for usage, colors, content, and placeholder visuals.
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Harbor — Project clarity for growing teams</title>
<meta name="description" content="Harbor brings tasks, timelines, and outcomes into one quiet dashboard for product teams who want focus, not more noise.">
<style>
:root {
--bg: #f6f3ee;
--bg-strong: #efe8dc;
--ink: #1c1917;
--muted: #57534e;
--card: #fffdf8;
--line: #e7e0d6;
--accent: #0f766e;
--accent-dark: #115e59;
--accent-soft: #ccfbf1;
--danger: #9f1239;
--radius: 18px;
--shadow: 0 24px 60px rgba(28, 25, 23, 0.08);
--font: "Iowan Old Style", "Palatino Linotype", Palatino, "Times New Roman", serif;
--ui: "Avenir Next", "Segoe UI", sans-serif;
--max: 1120px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
color: var(--ink);
background: var(--bg);
font-family: var(--ui);
line-height: 1.55;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
button, input, textarea { font: inherit; }
.skip-link {
position: absolute;
left: 1rem;
top: -40px;
background: var(--ink);
color: #fff;
padding: 0.5rem 0.75rem;
z-index: 20;
}
.skip-link:focus { top: 1rem; }
.wrap {
width: min(var(--max), calc(100% - 2rem));
margin: 0 auto;
}
.site-header {
position: sticky;
top: 0;
z-index: 10;
background: rgba(246, 243, 238, 0.92);
backdrop-filter: blur(16px);
border-bottom: 1px solid var(--line);
}
.nav {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
min-height: 72px;
}
.logo {
display: flex;
align-items: center;
gap: 0.65rem;
text-decoration: none;
font-weight: 700;
letter-spacing: -0.03em;
}
.logo-mark {
width: 36px;
height: 36px;
border-radius: 12px;
background: var(--accent);
color: #fff;
display: grid;
place-items: center;
font-size: 1.1rem;
}
.nav-links {
display: flex;
align-items: center;
gap: 1.25rem;
}
.nav-links a:not(.btn) {
text-decoration: none;
color: var(--muted);
}
.nav-links a:not(.btn):hover { color: var(--ink); }
.nav-links .btn-primary {
color: #fff;
box-shadow: 0 8px 18px rgba(15, 118, 110, 0.28);
}
.nav-links .btn-primary:hover {
color: #fff;
background: var(--accent-dark);
}
.nav-toggle {
display: none;
border: 1px solid var(--line);
background: var(--card);
border-radius: 10px;
padding: 0.45rem 0.7rem;
}
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.4rem;
border: 0;
border-radius: 999px;
padding: 0.8rem 1.2rem;
text-decoration: none;
font-weight: 600;
cursor: pointer;
}
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-dark); }
.btn-secondary { background: transparent; color: var(--ink); border: 1px solid var(--ink); }
.btn-ghost { background: var(--card); border: 1px solid var(--line); }
.hero {
padding: 4.5rem 0 3rem;
display: grid;
grid-template-columns: 1.05fr 0.95fr;
gap: 3rem;
align-items: center;
}
.eyebrow {
color: var(--accent-dark);
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
font-size: 0.78rem;
margin: 0 0 0.8rem;
}
h1, h2, h3 { font-family: var(--font); letter-spacing: -0.03em; line-height: 1.15; }
h1 { font-size: clamp(2.4rem, 5vw, 4.4rem); margin: 0 0 1rem; }
h2 { font-size: clamp(1.8rem, 3vw, 2.6rem); margin: 0 0 0.8rem; }
h3 { font-size: 1.25rem; margin: 0 0 0.4rem; }
.lede { font-size: 1.15rem; color: var(--muted); max-width: 36rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.6rem; }
.hero-note { margin-top: 1rem; color: var(--muted); font-size: 0.95rem; }
.dashboard {
background: var(--card);
border: 1px solid var(--line);
border-radius: 28px;
box-shadow: var(--shadow);
padding: 1rem;
}
.dash-top { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.pill { background: var(--bg-strong); border-radius: 999px; padding: 0.35rem 0.7rem; font-size: 0.85rem; }
.dash-grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 0.75rem; }
.panel { background: var(--bg); border-radius: 18px; padding: 1rem; min-height: 140px; }
.bars { display: flex; align-items: end; gap: 0.45rem; height: 92px; margin-top: 1rem; }
.bars span { display: block; width: 18px; border-radius: 8px 8px 4px 4px; background: var(--accent); }
.bars span:nth-child(odd) { background: var(--accent-soft); height: 48%; }
.metric { font-size: 1.8rem; font-family: var(--font); }
.logos {
padding: 0.5rem 0 3rem;
border-top: 1px solid var(--line);
}
.logos p { color: var(--muted); margin: 1.4rem 0; }
.logo-row {
display: flex;
flex-wrap: wrap;
gap: 0.75rem 1.5rem;
color: var(--muted);
font-weight: 700;
letter-spacing: 0.04em;
}
.logo-row span { opacity: 0.8; }
section { padding: 4rem 0; }
.center { text-align: center; }
.center .lede { margin: 0 auto; }
.features {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
margin-top: 2rem;
}
.feature, .step, .quote, .plan {
background: var(--card);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 1.3rem;
}
.icon {
width: 42px;
height: 42px;
border-radius: 12px;
background: var(--accent-soft);
color: var(--accent-dark);
display: grid;
place-items: center;
margin-bottom: 0.9rem;
font-weight: 700;
}
.product {
display: grid;
grid-template-columns: 0.9fr 1.1fr;
gap: 2rem;
align-items: center;
}
.product-visual {
background: linear-gradient(160deg, var(--accent-dark), #134e4a 42%, #1c1917);
color: #fff;
border-radius: 28px;
min-height: 320px;
padding: 1.5rem;
box-shadow: var(--shadow);
}
.product-visual h3 { color: #fff; }
.lane { background: rgba(255,255,255,0.08); border-radius: 14px; padding: 0.8rem; margin-top: 0.8rem; }
.lane b { display: block; margin-bottom: 0.35rem; }
.chip { display: inline-block; background: rgba(255,255,255,0.14); border-radius: 999px; padding: 0.2rem 0.55rem; margin-right: 0.35rem; font-size: 0.85rem; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 2rem; }
.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 2rem; }
.avatar {
width: 42px;
height: 42px;
border-radius: 50%;
display: grid;
place-items: center;
background: var(--accent);
color: #fff;
font-weight: 700;
}
.quote-person { display: flex; gap: 0.75rem; align-items: center; margin-top: 1rem; }
.quote-person small { display: block; color: var(--muted); }
.pricing { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 2rem; }
.plan.featured { border: 2px solid var(--accent); transform: translateY(-6px); }
.price { font-size: 2.4rem; font-family: var(--font); margin: 0.4rem 0 1rem; }
.price span { font-size: 1rem; color: var(--muted); font-family: var(--ui); }
.plan ul { padding-left: 1.1rem; color: var(--muted); }
.faq { max-width: 760px; margin: 2rem auto 0; }
details {
background: var(--card);
border: 1px solid var(--line);
border-radius: 14px;
padding: 0.9rem 1rem;
margin-bottom: 0.7rem;
}
summary { cursor: pointer; font-weight: 650; }
details p { color: var(--muted); margin: 0.7rem 0 0.2rem; }
.cta-band {
background: var(--ink);
color: #fafaf9;
border-radius: 32px;
padding: 3rem 2rem;
text-align: center;
}
.cta-band .lede { color: #d6d3d1; }
.form-row {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.6rem;
margin-top: 1.4rem;
}
.form-row input {
min-width: min(320px, 100%);
border: 1px solid #44403c;
background: #292524;
color: #fff;
border-radius: 999px;
padding: 0.85rem 1rem;
}
.form-status { min-height: 1.4rem; margin-top: 0.8rem; }
.site-footer {
border-top: 1px solid var(--line);
padding: 2.5rem 0 3rem;
color: var(--muted);
}
.footer-grid {
display: grid;
grid-template-columns: 1.4fr 1fr 1fr;
gap: 1.5rem;
}
.site-footer a { text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.footer-bottom { margin-top: 2rem; font-size: 0.9rem; }
:focus-visible {
outline: 3px solid var(--accent);
outline-offset: 3px;
}
@media (max-width: 900px) {
.hero, .product, .features, .steps, .quotes, .pricing, .footer-grid, .dash-grid {
grid-template-columns: 1fr;
}
.plan.featured { transform: none; }
.nav-toggle { display: inline-flex; }
.nav-links {
display: none;
position: absolute;
left: 1rem;
right: 1rem;
top: 72px;
background: var(--card);
border: 1px solid var(--line);
border-radius: 16px;
padding: 1rem;
flex-direction: column;
align-items: stretch;
}
.nav-links.is-open { display: flex; }
}
</style>
</head>
<body>
<a class="skip-link" href="#main">Skip to content</a>
<header class="site-header">
<div class="wrap nav">
<a class="logo" href="#top">
<span class="logo-mark" aria-hidden="true">H</span>
Harbor
</a>
<button class="nav-toggle" type="button" aria-expanded="false" aria-controls="site-nav">Menu</button>
<nav id="site-nav" class="nav-links" aria-label="Primary">
<a href="#features">Product</a>
<a href="#how">How it works</a>
<a href="#pricing">Pricing</a>
<a href="#faq">FAQ</a>
<a class="btn btn-primary" href="#cta">Start free</a>
</nav>
</div>
</header>
<main id="main">
<section class="wrap hero" id="top">
<div>
<p class="eyebrow">For product and ops teams</p>
<h1>Know what the team is shipping without another status meeting.</h1>
<p class="lede">Harbor brings tasks, timelines, and outcomes into one quiet dashboard. Built for teams who want focus, not more noise.</p>
<div class="hero-actions">
<a class="btn btn-primary" href="#cta">Start a free workspace</a>
<a class="btn btn-secondary" href="#product">See the product tour</a>
</div>
<p class="hero-note">No credit card. 14-day trial on every paid plan.</p>
</div>
<div class="dashboard" aria-hidden="true">
<div class="dash-top">
<strong>Weekly delivery</strong>
<span class="pill">On track</span>
</div>
<div class="dash-grid">
<div class="panel">
<div class="metric">18</div>
<div>Issues closed this week</div>
<div class="bars">
<span style="height:42%"></span>
<span style="height:68%"></span>
<span style="height:55%"></span>
<span style="height:90%"></span>
<span style="height:74%"></span>
<span style="height:48%"></span>
<span style="height:81%"></span>
</div>
</div>
<div class="panel">
<div class="metric">92%</div>
<div>Cycle time vs last month</div>
<p>Design review and QA now share the same board, so handoffs stop stalling in chat.</p>
</div>
</div>
</div>
</section>
<div class="wrap logos">
<p>Used in planning rooms at</p>
<div class="logo-row">
<span>North & Co.</span>
<span>Maple Studio</span>
<span>Kindling</span>
<span>Riverbank</span>
<span>Oak & Pine</span>
</div>
</div>
<section class="wrap" id="features">
<div class="center">
<p class="eyebrow">Features</p>
<h2>A calmer operating system for delivery</h2>
<p class="lede">Harbor keeps the work visible without turning every update into a performance.</p>
</div>
<div class="features">
<article class="feature">
<div class="icon" aria-hidden="true">1</div>
<h3>Shared timeline</h3>
<p>See commitments, blockers, and owners in one view. Filter by squad, launch, or customer.</p>
</article>
<article class="feature">
<div class="icon" aria-hidden="true">2</div>
<h3>Outcome snapshots</h3>
<p>Turn shipped work into a short weekly brief. Harbor writes the first draft from your board.</p>
</article>
<article class="feature">
<div class="icon" aria-hidden="true">3</div>
<h3>Quiet alerts</h3>
<p>Get notified when a date slips or a review sits idle. No feed. No badge theater.</p>
</article>
</div>
</section>
<section class="wrap product" id="product">
<div class="product-visual" aria-hidden="true">
<h3>Launch board</h3>
<div class="lane"><b>Ready for review</b><span class="chip">Billing</span><span class="chip">Docs</span></div>
<div class="lane"><b>In progress</b><span class="chip">SSO</span><span class="chip">Export</span></div>
<div class="lane"><b>Shipped this week</b><span class="chip">Search</span><span class="chip">Invites</span></div>
</div>
<div>
<p class="eyebrow">Product preview</p>
<h2>A dashboard that reads like a briefing, not a spreadsheet.</h2>
<p class="lede">Replace this panel with a screenshot of your product. The layout is sized for a 16:10 app frame and stays readable on smaller screens.</p>
</div>
</section>
<section class="wrap" id="how">
<div class="center">
<p class="eyebrow">How it works</p>
<h2>Up and running in an afternoon</h2>
</div>
<div class="steps">
<article class="step">
<div class="icon" aria-hidden="true">01</div>
<h3>Connect your board</h3>
<p>Import from a CSV or start empty. Harbor maps owners, dates, and status without a long setup wizard.</p>
</article>
<article class="step">
<div class="icon" aria-hidden="true">02</div>
<h3>Invite the working group</h3>
<p>Add the people who already talk about the work. Guests can comment; billing stays with workspace admins.</p>
</article>
<article class="step">
<div class="icon" aria-hidden="true">03</div>
<h3>Publish the weekly brief</h3>
<p>Send a snapshot to Slack or email every Friday. Edit the copy before it goes out.</p>
</article>
</div>
</section>
<section class="wrap">
<div class="center">
<p class="eyebrow">Testimonials</p>
<h2>What teams notice after a month</h2>
</div>
<div class="quotes">
<figure class="quote">
<blockquote>We stopped collecting status in a shared doc. Harbor made the board the source of truth.</blockquote>
<figcaption class="quote-person">
<div class="avatar" aria-hidden="true">AM</div>
<div>Amina Rahim<small>Head of Product, Maple Studio</small></div>
</figcaption>
</figure>
<figure class="quote">
<blockquote>The weekly brief is the only update leadership asks for now. That alone paid for the seat.</blockquote>
<figcaption class="quote-person">
<div class="avatar" aria-hidden="true">JL</div>
<div>Jonas Lind<small>Operations lead, Riverbank</small></div>
</figcaption>
</figure>
<figure class="quote">
<blockquote>Design and engineering finally share dates without a separate tracker. Handoffs feel adult.</blockquote>
<figcaption class="quote-person">
<div class="avatar" aria-hidden="true">KP</div>
<div>Keisha Patel<small>Design manager, Kindling</small></div>
</figcaption>
</figure>
</div>
</section>
<section class="wrap" id="pricing">
<div class="center">
<p class="eyebrow">Pricing</p>
<h2>Simple plans, billed monthly</h2>
<p class="lede">Replace these numbers with your own. All copy here is sample product language.</p>
</div>
<div class="pricing">
<article class="plan">
<h3>Starter</h3>
<p class="price">$0 <span>/ month</span></p>
<ul>
<li>Up to 8 people</li>
<li>One workspace</li>
<li>Weekly brief by email</li>
</ul>
<a class="btn btn-ghost" href="#cta">Create a free workspace</a>
</article>
<article class="plan featured">
<h3>Team</h3>
<p class="price">$16 <span>/ user / month</span></p>
<ul>
<li>Unlimited workspaces</li>
<li>Guest reviewers</li>
<li>Slack digest and SSO</li>
</ul>
<a class="btn btn-primary" href="#cta">Start Team trial</a>
</article>
<article class="plan">
<h3>Company</h3>
<p class="price">$29 <span>/ user / month</span></p>
<ul>
<li>Audit log and SCIM</li>
<li>Custom data retention</li>
<li>Priority onboarding</li>
</ul>
<a class="btn btn-ghost" href="#cta">Talk with sales</a>
</article>
</div>
</section>
<section class="wrap" id="faq">
<div class="center">
<p class="eyebrow">FAQ</p>
<h2>Before you bring a team in</h2>
</div>
<div class="faq">
<details>
<summary>Can we keep using our current task tool?</summary>
<p>Yes. Harbor can sit next to it. Import a CSV to start, then keep Harbor as the planning layer if your tracker stays the system of record.</p>
</details>
<details>
<summary>Does the trial include Team features?</summary>
<p>The 14-day trial unlocks Team features for the whole workspace. You can downgrade to Starter without losing the board.</p>
</details>
<details>
<summary>Where is data stored?</summary>
<p>This template does not connect to a backend. In a real product, describe your region, encryption, and subprocessors here.</p>
</details>
<details>
<summary>Can guests comment without a paid seat?</summary>
<p>On Team and Company, reviewers can comment on a share link. They cannot create workspaces or change billing.</p>
</details>
<details>
<summary>How do we cancel?</summary>
<p>Workspace owners can cancel from billing. The workspace stays readable on Starter after the period ends.</p>
</details>
</div>
</section>
<section class="wrap" id="cta">
<div class="cta-band">
<h2>Give the next planning cycle a quieter room.</h2>
<p class="lede">Create a Harbor workspace and invite the people who already own the work.</p>
<form class="form-row" id="trial-form">
<label class="sr-only" for="trial-email">Work email</label>
<input id="trial-email" name="email" type="email" autocomplete="email" placeholder="Work email" required>
<button class="btn btn-primary" type="submit">Create workspace</button>
</form>
<p class="form-status" id="trial-status" role="status" aria-live="polite"></p>
</div>
</section>
</main>
<footer class="site-footer">
<div class="wrap footer-grid">
<div>
<a class="logo" href="#top"><span class="logo-mark" aria-hidden="true">H</span>Harbor</a>
<p>A sample SaaS marketing page from Designyff. Replace the product name, copy, and visuals before you ship.</p>
</div>
<div>
<h3>Product</h3>
<p><a href="#features">Features</a></p>
<p><a href="#pricing">Pricing</a></p>
<p><a href="#faq">FAQ</a></p>
</div>
<div>
<h3>Company</h3>
<p><a href="#cta">Start free</a></p>
<p><a href="#product">Product tour</a></p>
<p><a href="#how">How it works</a></p>
</div>
</div>
<div class="wrap footer-bottom">
<p>© <span id="year"></span> Harbor. Template by Designyff. Not affiliated with any company named in the sample copy.</p>
</div>
</footer>
<style>
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
</style>
<script>
document.getElementById('year').textContent = new Date().getFullYear();
const toggle = document.querySelector('.nav-toggle');
const nav = document.getElementById('site-nav');
toggle.addEventListener('click', () => {
const open = toggle.getAttribute('aria-expanded') === 'true';
toggle.setAttribute('aria-expanded', String(!open));
nav.classList.toggle('is-open', !open);
});
const form = document.getElementById('trial-form');
const status = document.getElementById('trial-status');
form.addEventListener('submit', (event) => {
event.preventDefault();
status.textContent = 'This demo form does not send data. Replace it with your signup flow.';
form.reset();
});
</script>
</body>
</html>
Related templates
Creative Agency Landing Page
A studio marketing page with case studies, capabilities, process, team, and a project inquiry form.
Restaurant Landing Page
A warm, responsive page for a neighborhood restaurant, with hours, a sample menu, and a reservation form.