Features & Build Notes · · 3 min read
Company-profile features: the four sections that generate leads
The four company-profile sections that move numbers: a 5-second-proposition hero, a numbers-based trust strip, credible testimonials, and a three-field lead form — all with code + a live preview.
Kontraktor Interior — Jabodetabek
Interior kantor selesai tepat waktu, tanpa drama anggaran.
120+ proyek fit-out sejak 2015 untuk perusahaan yang tidak bisa menoleransi keterlambatan.
Konsultasi Gratis120+
Proyek selesai
9 thn
Beroperasi
98%
Tepat waktu
“Fit-out 800m² selesai 3 hari lebih cepat dari jadwal. Laporan progres masuk tiap Jumat tanpa diminta.”
Minta penawaran
Dibalas dalam 24 jam kerja
A good company profile isn’t an online brochure — it’s a lead-generation machine. Across several client compro builds (real estate, a training institution, B2B), these four sections are what actually move numbers: a hero with a clear proposition, a trust strip, testimonials, and a short lead form. Click View preview to see all four assembled.
1. The hero: 5 seconds to answer “what is this site?”
The formula: what you do + for whom + one action. Not a poetic tagline.
<section class="border-b border-line bg-base px-6 py-16 text-center">
<p class="font-mono text-[11px] uppercase tracking-[0.2em] text-accent">
Interior Contractor — Greater Jakarta
</p>
<h1 class="mx-auto mt-4 max-w-2xl font-display text-4xl font-semibold tracking-tight">
Office interiors finished on time, without budget drama.
</h1>
<p class="mx-auto mt-4 max-w-xl text-[15px] text-muted">
120+ fit-out projects since 2015 for companies that can't tolerate delays.
</p>
<a href="#contact" class="btn-primary mt-8">Free Consultation</a>
</section>
The simple test: cover the logo and company name — does the headline still explain the business? If not, rewrite it.
2. The trust strip: numbers beat adjectives
“Experienced and trusted” means nothing. Specific numbers mean everything:
<section class="grid grid-cols-3 gap-px border-b border-line bg-line text-center">
<div class="bg-base py-8">
<p class="font-display text-3xl font-semibold">120+</p>
<p class="mt-1 font-mono text-[10px] uppercase tracking-[0.18em] text-muted">Projects delivered</p>
</div>
<div class="bg-base py-8">
<p class="font-display text-3xl font-semibold">9 yrs</p>
<p class="mt-1 font-mono text-[10px] uppercase tracking-[0.18em] text-muted">In operation</p>
</div>
<div class="bg-base py-8">
<p class="font-display text-3xl font-semibold">98%</p>
<p class="mt-1 font-mono text-[10px] uppercase tracking-[0.18em] text-muted">On schedule</p>
</div>
</section>
3. Testimonials people can believe
Anonymous testimonials (“Mr. A, Jakarta”) actively lower trust. The format must be: a specific quote + full name + role + company:
<figure class="border border-line bg-base p-6">
<blockquote class="text-[15px] leading-relaxed">
"The 800m² fit-out finished 3 days ahead of schedule. Progress reports
arrived every Friday without being asked."
</blockquote>
<figcaption class="mt-4 flex items-center gap-3">
<span class="flex h-9 w-9 items-center justify-center rounded-full bg-accent-soft
font-display text-sm font-semibold text-accent-strong">RS</span>
<span>
<span class="block text-[13px] font-semibold">Rina Susanti</span>
<span class="block text-[12px] text-muted">Operations GM, PT Maju Bersama</span>
</span>
</figcaption>
</figure>
4. The lead form: every extra field = a lost prospect
Three fields are enough: name, WhatsApp, need. Email optional, full address unnecessary — that’s business for after the first chat:
<form method="post" action="/lead" class="space-y-4">
<input name="name" required placeholder="Name"
class="w-full border border-line bg-base px-4 py-3 text-[14px]" />
<input name="wa" required inputmode="tel" placeholder="WhatsApp number"
class="w-full border border-line bg-base px-4 py-3 text-[14px]" />
<select name="need" class="w-full border border-line bg-base px-4 py-3 text-[14px]">
<option>Office fit-out</option>
<option>Renovation</option>
<option>Just consulting first</option>
</select>
<button class="btn-primary w-full">Request a Quote</button>
<p class="text-center font-mono text-[10px] text-muted">Answered within 24 working hours</p>
</form>
Server-side, this site’s HTMX contact-form pattern (see its build note) applies verbatim: server validation, notification delivery, lead storage.
Lessons
- Section order = the prospect’s objection order: “who is this?” → “can I trust them?” → “what do others say?” → “fine, contact them.”
- One CTA repeated consistently (“Free Consultation”) beats five competing CTAs.
- A good compro is measured not by its beauty but by leads per month — install tracking from day one.
Want something like this built for your business?