Annotated website hero section examples for small businesses: six first screens, the customer task each serves, the design choice and its limitation, a comparison table, and a copyable hero brief. All examples are labelled We.Inc template designs.
<p class="lead text-xl text-[#3a3a3a] mb-8"> A hero section is the first screen of a page. For a small business it should answer three things before anyone scrolls: what you do, where (or for whom), and what to do next. The six examples below are <strong>We.Inc template designs</strong>, not customer sites. For each we note the customer task, what the design does, and what to fix before using it. </p>
<h2>Selection method and audience</h2> <p>We chose first screens from the We.Inc showcase that take different approaches: headline-led, photo-led, video-led and portfolio-led. Each is judged on the three questions above. The screenshots show the desktop first screen; on a phone the same hero stacks, so check your chosen design on a real phone too (see <a href="/guides/mobile-first-web-design">mobile-first web design</a>).</p>
<h2>Annotated examples</h2>
<h3>1. Benefit headline plus two buttons (plumber)</h3> <figure> <img src="/img/showcase/plumbers-1600.webp" alt="An example plumber website hero with the headline Leaks fixed, stress gone and Book Now button" loading="lazy" width="1600" height="1000" /> <figcaption>Example plumber design (template design, not a customer site).</figcaption> </figure> <p><strong>Task:</strong> get urgent help. <strong>Design:</strong> a short benefit headline, one sentence on what they do, a strong "Book Now" and a softer "See what we cover". <strong>Fix before use:</strong> the gauge graphic says "Fast response" with an average-response caption. That is a placeholder claim; replace it with something true (a licence number, areas served) or remove it. Add a phone number for urgent callers.</p>
<h3>2. Specific promise, local proof and a photo (accountants)</h3> <figure> <img src="/img/showcase/accountants-1600.webp" alt="An example accounting firm website hero with the headline Books that close on the first, not the fifteenth" loading="lazy" width="1600" height="1000" /> <figcaption>Example accountancy design (template design, not a customer site).</figcaption> </figure> <p><strong>Task:</strong> decide if this firm is worth contacting. <strong>Design:</strong> a concrete headline, the city named in the eyebrow text and sentence, a local skyline photo, "Get Started Today" plus a "Contact us" link. <strong>Fix before use:</strong> the badge over the photo is template text; only keep a figure you can back up.</p>
<h3>3. Photo and stats row (lawn care)</h3> <figure> <img src="/img/showcase/lawn-care-services-1600.webp" alt="An example lawn care website hero with the headline A healthier lawn awaits and Get Your Quote button" loading="lazy" width="1600" height="1000" /> <figcaption>Example lawn care design (template design, not a customer site).</figcaption> </figure> <p><strong>Task:</strong> get a quote for regular lawn care. <strong>Design:</strong> a simple headline, the city in the sentence, "Get Your Quote" and "See Recent Work", and a row of numbers. <strong>Fix before use:</strong> the numbers (years, projects, rating) are template placeholders. Replace them with your real, checkable figures or delete the row; invented numbers damage trust and may breach advertising rules.</p>
<h3>4. Full-screen video with a mood headline (restaurant)</h3> <figure> <img src="/img/showcase/italian-restaurants-1600.webp" alt="An example restaurant website hero with a full-screen kitchen video and the name Trattoria Seattle" loading="lazy" width="1600" height="1000" /> <figcaption>Example restaurant design (template design, not a customer site).</figcaption> </figure> <p><strong>Task:</strong> feel the atmosphere, then book. <strong>Design:</strong> the restaurant name over kitchen video, with location and hours along the bottom. <strong>Fix before use:</strong> there is no visible button; "Reserve" is a small link in the corner. Add a clear "Book a table" button, and make sure the video is light enough to load on phones.</p>
<h3>5. Product close-up with a short statement (jewellery store)</h3> <figure> <img src="/img/showcase/jewelry-stores-1600.webp" alt="An example jewellery store website hero with a close-up of a ring and the words Measured Purity" loading="lazy" width="1600" height="1000" /> <figcaption>Example jewellery store design (template design, not a customer site).</figcaption> </figure> <p><strong>Task:</strong> see the quality of the pieces. <strong>Design:</strong> a close-up photo does the selling, with a two-word headline and "Explore collection". <strong>Fix before use:</strong> the headline does not say what the business offers or where. Add a line such as "Handmade rings and repairs in [town]", and use photos of your own pieces.</p>
<h3>6. Portfolio-led first screen (architects)</h3> <figure> <img src="/img/showcase/architects-1600.webp" alt="An example architecture firm website hero with a drawing background and a featured project card" loading="lazy" width="1600" height="1000" /> <figcaption>Example architecture design (template design, not a customer site).</figcaption> </figure> <p><strong>Task:</strong> judge the quality of past work. <strong>Design:</strong> a bold headline over a drawing, a column of service notes, and a featured project card with "View project". <strong>Fix before use:</strong> the headline is cut off mid-sentence in this design ("Buildings that // modern here..."); rewrite it so it reads fully at every width. Add a way to start an enquiry.</p>
<h2>Comparison</h2> <table> <thead><tr><th>Example</th><th>Says what</th><th>Says where</th><th>Clear next step</th><th>Main fix</th></tr></thead> <tbody> <tr><td>Plumber</td><td>Yes</td><td>In the logo only</td><td>Yes</td><td>Placeholder claim, no phone</td></tr> <tr><td>Accountants</td><td>Yes</td><td>Yes</td><td>Yes</td><td>Template badge</td></tr> <tr><td>Lawn care</td><td>Yes</td><td>Yes</td><td>Yes</td><td>Placeholder numbers</td></tr> <tr><td>Restaurant</td><td>Partly</td><td>Yes (address)</td><td>No</td><td>Add a booking button</td></tr> <tr><td>Jewellery store</td><td>No</td><td>In the logo only</td><td>Yes</td><td>Say what and where</td></tr> <tr><td>Architects</td><td>Partly</td><td>In the sentence</td><td>Weak</td><td>Broken headline, no enquiry</td></tr> </tbody> </table>
<h2>Original demonstration and copyable hero brief</h2> <p>Filled for a fictional business, "Green Row Landscaping" (a labelled demonstration; no results claimed), with a blank to copy:</p> <pre><code>Headline (what you do, for whom): Garden design and build for small gardens Sub-line (where + how): In [town]. We quote in writing and do the work ourselves. Main button: Book a site visit Second link: See recent gardens Proof line (real only): Insured - link to Google reviews Image: own photo of a finished garden, compressed Phone (tap-to-call): shown in header
Headline: Sub-line: Main button: Second link: Proof line (real only): Image: Phone:</code></pre> <p>Test headline options with the <a href="/tools/headline-analyzer">headline analyzer</a>.</p>
<h2>What to adapt and what not to copy</h2> <ul> <li>Adapt the structure (headline, sub-line, button, proof), not the words.</li> <li>Never keep template numbers, ratings or badges you cannot back up.</li> <li>Check text over photos or video for contrast with the <a href="/tools/color-contrast-checker">color contrast checker</a>.</li> <li>Compress hero images (the <a href="/tools/image-compressor">image compressor</a> helps); they are often the slowest thing on the page.</li> </ul>
<h2>Start from a suitable template</h2> <p>Pick a hero style that suits your business from the <a href="/website-templates/business">business templates</a>, then edit it in the <a href="/website-builder">We.Inc website builder</a>. Free gives up to 3 template sites on a we.inc address (no AI credits, no custom domain); Starter at $20/month adds AI building and custom domains (<a href="/pricing">pricing</a>). Check the result with the <a href="/tools/website-grader">website grader</a>, and budget with the <a href="/tools/website-cost-calculator">website cost calculator</a>.</p> <p><a href="https://my.we.inc/signup">Start building your business website</a></p>
What you do, where or for whom, one main button, and optionally a real proof line and a photo of your own work.
Only if it adds something a photo cannot, loads quickly on phones, and leaves the text and button easy to read. Always add a clear button.
No. They are We.Inc template designs, used to show hero patterns and what to fix before publishing.
We.Inc is an AI-powered website builder you can resell under your own brand. Launch a branded client dashboard, bill on Stripe Connect, and deliver AI-generated websites in minutes. White-label plans start at $99 a month for 25 client sites, with a 7-day free trial and no per-site fees.