Skip to main content

Hosting Hero

Use this when the first screen needs to establish trust quickly and direct visitors into plan selection or migration onboarding.

Hero section

Fast hosting, clear conversion path

A dual-column hero tuned for offers, trust, and migration reassurance.

Managed WordPress

Launch faster with hosting that feels operational from day one.

Built-in backups, free migration, and a support lane that answers like a product team.

99.99%Uptime target
14 minAverage migration kickoff
24/7Human support

Why it works​

  • It starts with operational credibility instead of abstract marketing copy.
  • The metric block gives hosting buyers instant reassurance.
  • The CTA pair supports both direct purchase intent and migration intent.

Good places to use it​

  • main hosting landing page
  • VPS product page
  • cloud server overview page

Copy paste code​

export function HostingHero() {
  return (
    <section className="overflow-hidden rounded-[32px] border border-slate-200 bg-white px-6 py-8 shadow-[0_24px_80px_-48px_rgba(15,23,42,0.45)] sm:px-10 sm:py-12">
      <div className="grid gap-10 lg:grid-cols-[1.15fr_0.85fr] lg:items-center">
        <div className="space-y-6">
          <div className="inline-flex items-center rounded-full border border-slate-200 bg-slate-50 px-3 py-1 text-sm font-medium text-slate-700">
            99.99% uptime backed by live migrations
          </div>
          <div className="space-y-4">
            <p className="text-sm font-semibold uppercase tracking-[0.22em] text-sky-700">
              Managed hosting
            </p>
            <h1 className="max-w-xl text-4xl font-semibold tracking-tight text-slate-950 sm:text-5xl">
              Launch hosting pages that feel stable, fast, and credible.
            </h1>
            <p className="max-w-2xl text-base leading-7 text-slate-600">
              Designed for brands selling shared hosting, VPS plans, and managed cloud servers without the usual template clutter.
            </p>
          </div>
          <div className="flex flex-wrap gap-3">
            <a
              href="#pricing"
              className="inline-flex items-center justify-center rounded-full bg-slate-950 px-5 py-3 text-sm font-semibold text-white"
            >
              View plans
            </a>
            <a
              href="#migration"
              className="inline-flex items-center justify-center rounded-full border border-slate-300 px-5 py-3 text-sm font-semibold text-slate-700"
            >
              Free migration
            </a>
          </div>
        </div>
        <div className="rounded-[28px] border border-slate-200 bg-slate-950 p-6 text-white">
          <div className="grid gap-3 sm:grid-cols-3">
            {[
              ['Global POPs', '21'],
              ['Support time', '< 4 min'],
              ['Backup cadence', 'Daily'],
            ].map(([label, value]) => (
              <div key={label} className="rounded-2xl border border-white/10 bg-white/5 p-4">
                <p className="text-xs uppercase tracking-[0.18em] text-slate-300">{label}</p>
                <p className="mt-3 text-xl font-semibold">{value}</p>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

Customization notes​

  • Replace the metrics with real operational or support numbers.
  • Keep the headline direct and infrastructure-specific.
  • If your brand is more enterprise, reduce the accent contrast and increase spacing.