Docs menu

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.

Company profileLead generationTailwind CSSCopywriting
Live exampleRendered by the actual component — not an image.

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 Gratis

120+

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.”
RSRina SusantiGM Operasional, PT Maju Bersama

Minta penawaran

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?