Website kits
SaaS product home page
Product home page with a screenshot hero, wordmark strip, three benefit boxes, alternating feature rows, an integrations list, a quote and a trial CTA.
When to use it
A home page for a project management or analytics product that sells through a self-serve trial. The hero states who the product is for and puts the trial button above a full-width screenshot, because people evaluating software want to see the interface before they read anything else. The wordmark strip and three benefits answer “is this for teams like mine”, the alternating rows show one capability each with a screenshot and three concrete details, and the integrations list reassures buyers that it fits their existing tools. The quote and the closing trial button come last, once the visitor has seen enough to act. Replace the screenshots first: real product views, cropped to one feature per image, do more than any headline. Only list customer names you have permission to show, and keep the trial terms (length, card or no card) in the line under the buttons so nobody has to hunt for them.
What it converts to
Converted with the Native components mode. The component list below is what this template produces — not a generic example.
- Container × 23
- Container (grid, 3 columns) × 1
- Container (grid, 2 columns) × 1
- HTML widget × 1 — the block’s scoped CSS; keep it, the layout depends on it
- Text Editor × 19
- Heading × 8
- Button × 4
- Image × 4
- Icon Box × 3
- Icon List × 4
- Testimonial × 1
Things worth knowing
- The three benefit cards convert to Icon Box widgets, the tick and arrow rows to four Icon List widgets, and the four screenshots to Image widgets.
- The quote becomes a native Testimonial widget with the name and job title filled in. It has no avatar; add one in the widget if the customer agrees.
- The middle feature row uses a reversed flex direction for the alternating layout, and every row switches to a single column below 780px with the text above the screenshot.
- The customer wordmarks are plain Text Editor widgets in fictional names. Replace them with logos as Image widgets, and only for customers who have agreed to be named.
- Choose “match the Elementor icon library” in the Icons option. The ✓, → and other glyph rows only become Icon List and Icon Box widgets in that mode.
The HTML
This is the complete source. Copy it, or send it straight to the converter and adjust the options before exporting.
Show the HTML source
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Corvane — project planning for small teams</title>
<style>
*{box-sizing:border-box}
body{margin:0;font-family:'Inter',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;color:#16152e;background:#ffffff}
h1,h2,h3{font-family:'Plus Jakarta Sans','Inter',system-ui,sans-serif;color:#16152e;letter-spacing:-.025em}
h1{font-size:54px;line-height:1.08;margin:0 0 20px}
h2{font-size:36px;line-height:1.15;margin:0 0 14px}
h3{font-size:24px;line-height:1.25;margin:0 0 12px}
p{font-size:16.5px;line-height:1.75;color:#5c5b78;margin:0 0 18px}
.wrap{max-width:1160px;margin:0 auto;padding:0 24px}
section{padding:84px 0}
.eyebrow{font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#4f46e5;margin:0 0 14px}
.button{display:inline-block;padding:15px 26px;border-radius:10px;background:#4f46e5;color:#ffffff;text-decoration:none;font-weight:700;font-size:16px}
.ghost{display:inline-block;padding:14px 25px;border-radius:10px;border:1px solid #4f46e5;color:#4f46e5;background:#ffffff;text-decoration:none;font-weight:700;font-size:16px}
.hero{background:#eeecfd;padding:88px 0 0;text-align:center}
.hero .lead{font-size:19px;max-width:680px;margin:0 auto 30px}
.hero h1{max-width:860px;margin-left:auto;margin-right:auto}
.actions{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;margin:0 0 16px}
.fine{font-size:14px;color:#5c5b78;margin:0 0 52px}
.shot{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;border-radius:16px 16px 0 0;border:1px solid #ffffff;border-bottom:0;background:#ffffff}
.logos{padding:48px 0;border-bottom:1px solid #eeecfd}
.logos .intro{text-align:center;font-size:14px;margin:0 0 22px}
.marks{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:18px 52px}
.marks p{margin:0;font-family:'Plus Jakarta Sans','Inter',system-ui,sans-serif;font-size:22px;font-weight:800;letter-spacing:-.02em;color:#5c5b78}
.marks .light{font-weight:500;letter-spacing:.06em;text-transform:uppercase;font-size:17px}
.center{text-align:center}
.center > p{max-width:640px;margin:0 auto 40px}
.benefits{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;text-align:left}
.benefit{padding:30px;border:1px solid #eeecfd;border-radius:14px;background:#ffffff}
.benefit .icon{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:12px;background:#eeecfd;color:#4f46e5;font-size:22px;margin-bottom:18px}
.benefit h3{font-size:20px;margin:0 0 10px}
.benefit p{margin:0;font-size:15.5px}
.tint{background:#eeecfd}
.row{display:flex;align-items:center;gap:56px;margin-bottom:72px}
.row:last-child{margin-bottom:0}
.flip{flex-direction:row-reverse}
.copy{flex:1 1 0}
.row img{flex:1.15 1 0;min-width:0;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;border-radius:14px;background:#ffffff}
.ticks{display:flex;flex-direction:column;gap:10px}
.ticks div{display:flex;gap:10px;font-size:15.5px;line-height:1.6;color:#16152e}
.ticks span:first-child{color:#4f46e5;font-weight:700}
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.connects{display:flex;flex-direction:column;gap:14px;padding:30px;border:1px solid #eeecfd;border-radius:14px}
.connects div{display:flex;gap:12px;font-size:15.5px;line-height:1.6;color:#16152e}
.connects span:first-child{color:#4f46e5;font-weight:700}
.quote{background:#16152e}
.quote .qhead{text-align:center;font-size:15px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#2fd39a;margin:0 0 22px}
.quote figure{max-width:820px;margin:0 auto;text-align:center}
.quote blockquote{margin:0 0 24px;font-family:'Plus Jakarta Sans','Inter',system-ui,sans-serif;font-size:27px;line-height:1.5;font-weight:600;color:#ffffff;letter-spacing:-.015em}
.quote figcaption{font-size:15px;color:#eeecfd}
.quote cite{font-style:normal;font-weight:700;color:#2fd39a}
.cta{background:#4f46e5;text-align:center}
.cta h2{color:#ffffff}
.cta p{color:#eeecfd;max-width:600px;margin:0 auto 28px}
.cta .button{background:#ffffff;color:#4f46e5}
@media(max-width:780px){
section{padding:56px 0}
.wrap{padding:0 16px}
.hero{padding:56px 0 0}
h1{font-size:36px}
h2{font-size:28px}
h3{font-size:21px}
.hero .lead{font-size:17px}
.fine{margin-bottom:36px}
.marks{gap:14px 28px}
.marks p{font-size:18px}
.marks .light{font-size:14px}
.benefits,.split{grid-template-columns:1fr}
.split{gap:28px}
.row,.flip{flex-direction:column;align-items:stretch;gap:24px;margin-bottom:52px}
.quote blockquote{font-size:21px}
}
</style>
</head>
<body>
<section class="hero">
<div class="wrap">
<p class="eyebrow">For teams of 5 to 150 people</p>
<h1>Plan the week, ship the work, skip the status meeting</h1>
<p class="lead">Corvane keeps tasks, deadlines and who is working on what in one board, so everyone can see where a project stands without asking.</p>
<div class="actions">
<a class="button" href="#trial">Start free trial</a>
<a class="ghost" href="#demo">Book a demo</a>
</div>
<p class="fine">14-day trial on the Team plan. No card required.</p>
<img class="shot" src="https://htmltoelementor.com/wp-content/uploads/hte-library/saas/hero-dashboard.jpg" width="1600" height="1000" alt="Laptop on a light desk showing a project board with colored task cards arranged in columns">
</div>
</section>
<section class="logos">
<div class="wrap">
<p class="intro">Studios, agencies and operations teams plan their work in Corvane</p>
<div class="marks">
<p>Northfold</p>
<p class="light">Bramblewick</p>
<p>Quarry Lane</p>
<p class="light">Halden Works</p>
<p>Pellmoor</p>
</div>
</div>
</section>
<section>
<div class="wrap center">
<h2>Less chasing, more finished work</h2>
<p>Most teams lose hours a week asking for updates that already exist somewhere. Corvane puts them where people look first.</p>
<div class="benefits">
<div class="benefit">
<span class="icon">◎</span>
<h3>One place for priorities</h3>
<p>Every task has an owner, a due date and a status. The board shows what matters this week, not everything ever logged.</p>
</div>
<div class="benefit">
<span class="icon">↻</span>
<h3>Updates that write themselves</h3>
<p>Moving a card updates the timeline and the weekly summary. Nobody has to copy progress into a separate report.</p>
</div>
<div class="benefit">
<span class="icon">→</span>
<h3>Clean handoffs</h3>
<p>When work passes from design to review to delivery, the next person is notified with the files and notes attached.</p>
</div>
</div>
</div>
</section>
<section class="tint" id="product">
<div class="wrap">
<div class="row">
<div class="copy">
<p class="eyebrow">Boards</p>
<h3>See the whole week on one screen</h3>
<p>Group tasks by status, person or client. Drag a card to reassign it, and the owner gets a notification with the context they need.</p>
<div class="ticks">
<div><span>✓</span><span>Custom columns for your own workflow stages</span></div>
<div><span>✓</span><span>Work-in-progress limits per column</span></div>
<div><span>✓</span><span>Saved filters for each person or client</span></div>
</div>
</div>
<img src="https://htmltoelementor.com/wp-content/uploads/hte-library/saas/board-view.jpg" width="1600" height="1000" alt="Monitor showing a kanban board with four columns of task cards in indigo and green">
</div>
<div class="row flip">
<div class="copy">
<p class="eyebrow">Timeline</p>
<h3>Know early when a deadline is at risk</h3>
<p>Tasks with dependencies line up on a timeline. If one slips, everything after it moves too, and the project lead sees the new finish date straight away.</p>
<div class="ticks">
<div><span>✓</span><span>Dependencies between tasks and milestones</span></div>
<div><span>✓</span><span>Workload view that flags overbooked people</span></div>
<div><span>✓</span><span>Shareable read-only timeline for clients</span></div>
</div>
</div>
<img src="https://htmltoelementor.com/wp-content/uploads/hte-library/saas/timeline-view.jpg" width="1600" height="1000" alt="Laptop showing a horizontal timeline of colored bars with connecting lines between tasks">
</div>
<div class="row">
<div class="copy">
<p class="eyebrow">Reports</p>
<h3>A weekly summary nobody has to write</h3>
<p>Every Friday, project leads get a short report: what was finished, what moved, and what is overdue. Forward it to a client or keep it internal.</p>
<div class="ticks">
<div><span>✓</span><span>Completed, slipped and overdue work per project</span></div>
<div><span>✓</span><span>Time logged against estimates</span></div>
<div><span>✓</span><span>Export to CSV or PDF</span></div>
</div>
</div>
<img src="https://htmltoelementor.com/wp-content/uploads/hte-library/saas/reports-view.jpg" width="1600" height="1000" alt="Tablet on a desk displaying bar and line charts summarizing weekly project progress">
</div>
</div>
</section>
<section>
<div class="wrap split">
<div>
<p class="eyebrow">Integrations</p>
<h2>Works with the tools you already use</h2>
<p>Corvane connects through open standards, so it fits alongside your calendar, inbox and file storage instead of replacing them.</p>
<a class="ghost" href="#docs">Read the API docs</a>
</div>
<div class="connects">
<div><span>→</span><span>Two-way calendar sync with any CalDAV or iCal calendar</span></div>
<div><span>→</span><span>Forward an email to your project address to create a task</span></div>
<div><span>→</span><span>Attach files by link from your cloud storage</span></div>
<div><span>→</span><span>Webhooks for task created, moved and completed</span></div>
<div><span>→</span><span>REST API with per-workspace tokens</span></div>
<div><span>→</span><span>CSV import from spreadsheets and other tools</span></div>
</div>
</div>
</section>
<section class="quote" id="customers">
<div class="wrap">
<h2 class="qhead">Why teams switch</h2>
<figure>
<blockquote>We used to spend Monday mornings in a status meeting. Now the board answers those questions before anyone asks, and the meeting is gone.</blockquote>
<figcaption><cite>Dana Whitfield</cite> · Operations Lead, Northfold Studio</figcaption>
</figure>
</div>
</section>
<section class="cta" id="trial">
<div class="wrap">
<h2>Try Corvane with your next project</h2>
<p>Set up a board in about ten minutes, invite your team, and decide after 14 days. Your data exports in one click if it is not a fit.</p>
<a class="button" href="#signup">Start free trial</a>
</div>
</section>
</body>
</html>