portal gateway government university community multi-entry sitemap classic
Company Portal
Multi-entry portal homepage with equal-weight gateways to news, forum, support, knowledge base, downloads, and events.
classic Responsive
Live Preview
Sections
utility-barmastheadannouncementgatewayslatest-newsquick-linksservice-statusfooter
Patterns used
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Westbrook Portal — Services, Community & Knowledge</title>
<meta name="description" content="A multi-entry portal homepage with equal-weight gateways to news, forum, support, knowledge base, downloads, and events." />
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://webspire.de/webspire-tokens.css">
<link rel="stylesheet" href="https://webspire.de/webspire-components.css">
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet" />
<style>
body { font-family: 'Inter', sans-serif; }
</style>
</head>
<body class="bg-slate-100 text-slate-800">
<!-- Utility bar -->
<div class="bg-slate-900 text-slate-300">
<div class="mx-auto flex max-w-7xl items-center justify-between px-4 py-1.5 text-xs sm:px-6">
<p>Westbrook County · Official Portal</p>
<nav aria-label="Utility" class="flex items-center gap-4">
<a href="#accessibility" class="hover:text-white">Accessibility</a>
<a href="#language" class="hover:text-white">EN · DE · FR</a>
<a href="#login" class="font-medium text-white hover:underline">Sign in</a>
</nav>
</div>
</div>
<!-- Masthead -->
<header class="border-b border-slate-200 bg-white">
<div class="mx-auto flex max-w-7xl flex-col gap-4 px-4 py-5 sm:flex-row sm:items-center sm:justify-between sm:px-6">
<a href="#" class="flex items-center gap-3">
<span class="flex h-10 w-10 items-center justify-center rounded-lg bg-blue-700 text-white">
<svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 21h18M5 21V7l8-4 8 4v14M9 9h.01M9 13h.01M9 17h.01"/></svg>
</span>
<span>
<span class="block text-lg font-bold leading-tight text-slate-900">Westbrook Portal</span>
<span class="block text-xs text-slate-500">Everything in one place</span>
</span>
</a>
<form role="search" action="#" class="flex w-full max-w-md">
<label for="q" class="sr-only">Search the portal</label>
<input id="q" name="q" type="search" placeholder="Search services, documents, people…"
class="w-full rounded-l-lg border border-r-0 border-slate-300 px-4 py-2.5 text-sm focus:border-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-100" />
<button type="submit" class="rounded-r-lg bg-blue-700 px-5 py-2.5 text-sm font-semibold text-white transition hover:bg-blue-800">Search</button>
</form>
</div>
</header>
<!-- Announcement strip -->
<div class="bg-amber-50 text-amber-900">
<div class="mx-auto flex max-w-7xl items-center gap-3 px-4 py-2.5 text-sm sm:px-6">
<span class="rounded bg-amber-200 px-2 py-0.5 text-xs font-bold uppercase tracking-wide">Notice</span>
<p>Online services will be unavailable on June 18, 22:00–02:00 for scheduled maintenance.</p>
</div>
</div>
<main class="mx-auto max-w-7xl px-4 py-8 sm:px-6">
<!-- Equal-weight entry points -->
<h1 class="sr-only">Westbrook Portal home</h1>
<h2 class="text-sm font-semibold uppercase tracking-wide text-slate-500">Gateways</h2>
<ul class="mt-4 grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
<li>
<a href="#news" class="group flex h-full gap-4 rounded-xl border border-slate-200 bg-white p-5 transition hover:border-blue-300 hover:shadow-sm">
<span class="flex h-11 w-11 shrink-0 items-center justify-center rounded-lg bg-blue-50 text-blue-700"><svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h9l5 5v9a2 2 0 01-2 2zM8 8h6M8 12h8M8 16h5"/></svg></span>
<span><span class="block font-semibold text-slate-900">News & Press</span><span class="mt-1 block text-sm text-slate-500">Announcements, releases, and updates.</span></span>
</a>
</li>
<li>
<a href="#forum" class="group flex h-full gap-4 rounded-xl border border-slate-200 bg-white p-5 transition hover:border-blue-300 hover:shadow-sm">
<span class="flex h-11 w-11 shrink-0 items-center justify-center rounded-lg bg-emerald-50 text-emerald-700"><svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8h2a2 2 0 012 2v6a2 2 0 01-2 2h-2v4l-4-4H9a2 2 0 01-2-2M3 4h12a2 2 0 012 2v6a2 2 0 01-2 2H8l-4 4V6a2 2 0 012-2z"/></svg></span>
<span><span class="block font-semibold text-slate-900">Community Forum</span><span class="mt-1 block text-sm text-slate-500">Ask questions and join discussions.</span></span>
</a>
</li>
<li>
<a href="#support" class="group flex h-full gap-4 rounded-xl border border-slate-200 bg-white p-5 transition hover:border-blue-300 hover:shadow-sm">
<span class="flex h-11 w-11 shrink-0 items-center justify-center rounded-lg bg-violet-50 text-violet-700"><svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 5.636a9 9 0 11-12.728 0M12 3v9"/></svg></span>
<span><span class="block font-semibold text-slate-900">Support Center</span><span class="mt-1 block text-sm text-slate-500">Submit a ticket or browse help.</span></span>
</a>
</li>
<li>
<a href="#wiki" class="group flex h-full gap-4 rounded-xl border border-slate-200 bg-white p-5 transition hover:border-blue-300 hover:shadow-sm">
<span class="flex h-11 w-11 shrink-0 items-center justify-center rounded-lg bg-amber-50 text-amber-700"><svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.5C10.5 5 8 4.5 4 5v13c4-.5 6.5 0 8 1.5 1.5-1.5 4-2 8-1.5V5c-4-.5-6.5 0-8 1.5zM12 6.5V20"/></svg></span>
<span><span class="block font-semibold text-slate-900">Knowledge Base</span><span class="mt-1 block text-sm text-slate-500">Guides, articles, and references.</span></span>
</a>
</li>
<li>
<a href="#downloads" class="group flex h-full gap-4 rounded-xl border border-slate-200 bg-white p-5 transition hover:border-blue-300 hover:shadow-sm">
<span class="flex h-11 w-11 shrink-0 items-center justify-center rounded-lg bg-rose-50 text-rose-700"><svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v12m0 0l-4-4m4 4l4-4M5 21h14"/></svg></span>
<span><span class="block font-semibold text-slate-900">Downloads</span><span class="mt-1 block text-sm text-slate-500">Forms, datasets, and software.</span></span>
</a>
</li>
<li>
<a href="#events" class="group flex h-full gap-4 rounded-xl border border-slate-200 bg-white p-5 transition hover:border-blue-300 hover:shadow-sm">
<span class="flex h-11 w-11 shrink-0 items-center justify-center rounded-lg bg-sky-50 text-sky-700"><svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg></span>
<span><span class="block font-semibold text-slate-900">Events</span><span class="mt-1 block text-sm text-slate-500">Meetings, hearings, and workshops.</span></span>
</a>
</li>
</ul>
<!-- Secondary row: latest + quick links + status -->
<div class="mt-10 grid gap-6 lg:grid-cols-3">
<section aria-labelledby="latest" class="lg:col-span-2 rounded-xl border border-slate-200 bg-white p-6">
<div class="flex items-center justify-between">
<h2 id="latest" class="text-base font-bold text-slate-900">Latest news</h2>
<a href="#news" class="text-sm font-medium text-blue-700 hover:underline">All news →</a>
</div>
<ul class="mt-4 divide-y divide-slate-100">
<li class="flex items-start gap-4 py-3">
<time class="w-16 shrink-0 text-xs font-medium text-slate-400" datetime="2026-06-12">Jun 12</time>
<div><a href="#" class="font-medium text-slate-900 hover:text-blue-700">New online permit service goes live</a><p class="mt-0.5 text-sm text-slate-500">Apply for building permits without visiting an office.</p></div>
</li>
<li class="flex items-start gap-4 py-3">
<time class="w-16 shrink-0 text-xs font-medium text-slate-400" datetime="2026-06-09">Jun 09</time>
<div><a href="#" class="font-medium text-slate-900 hover:text-blue-700">Public consultation on the 2027 budget</a><p class="mt-0.5 text-sm text-slate-500">Share feedback before the July deadline.</p></div>
</li>
<li class="flex items-start gap-4 py-3">
<time class="w-16 shrink-0 text-xs font-medium text-slate-400" datetime="2026-06-04">Jun 04</time>
<div><a href="#" class="font-medium text-slate-900 hover:text-blue-700">Library extends weekend opening hours</a><p class="mt-0.5 text-sm text-slate-500">Now open until 18:00 on Saturdays.</p></div>
</li>
</ul>
</section>
<div class="space-y-6">
<section aria-labelledby="quick" class="rounded-xl border border-slate-200 bg-white p-6">
<h2 id="quick" class="text-base font-bold text-slate-900">Quick links</h2>
<ul class="mt-3 space-y-2 text-sm">
<li><a href="#" class="text-blue-700 hover:underline">Pay a bill</a></li>
<li><a href="#" class="text-blue-700 hover:underline">Book an appointment</a></li>
<li><a href="#" class="text-blue-700 hover:underline">Report an issue</a></li>
<li><a href="#" class="text-blue-700 hover:underline">Open data catalog</a></li>
</ul>
</section>
<section aria-labelledby="status" class="rounded-xl border border-slate-200 bg-white p-6">
<h2 id="status" class="text-base font-bold text-slate-900">Service status</h2>
<dl class="mt-3 space-y-2 text-sm">
<div class="flex items-center justify-between"><dt class="text-slate-600">Online services</dt><dd class="flex items-center gap-1.5 font-medium text-emerald-700"><span class="h-2 w-2 rounded-full bg-emerald-500" aria-hidden="true"></span>Operational</dd></div>
<div class="flex items-center justify-between"><dt class="text-slate-600">Payments</dt><dd class="flex items-center gap-1.5 font-medium text-emerald-700"><span class="h-2 w-2 rounded-full bg-emerald-500" aria-hidden="true"></span>Operational</dd></div>
<div class="flex items-center justify-between"><dt class="text-slate-600">Document upload</dt><dd class="flex items-center gap-1.5 font-medium text-amber-700"><span class="h-2 w-2 rounded-full bg-amber-500" aria-hidden="true"></span>Degraded</dd></div>
</dl>
</section>
</div>
</div>
</main>
<!-- Footer: sitemap wall -->
<footer class="border-t border-slate-200 bg-white">
<div class="mx-auto grid max-w-7xl gap-8 px-4 py-12 sm:grid-cols-2 sm:px-6 lg:grid-cols-4">
<nav aria-labelledby="f-services"><p id="f-services" class="text-sm font-semibold text-slate-900">Services</p><ul class="mt-3 space-y-2 text-sm text-slate-500"><li><a href="#" class="hover:text-blue-700">Permits</a></li><li><a href="#" class="hover:text-blue-700">Payments</a></li><li><a href="#" class="hover:text-blue-700">Appointments</a></li><li><a href="#" class="hover:text-blue-700">Records</a></li></ul></nav>
<nav aria-labelledby="f-community"><p id="f-community" class="text-sm font-semibold text-slate-900">Community</p><ul class="mt-3 space-y-2 text-sm text-slate-500"><li><a href="#" class="hover:text-blue-700">Forum</a></li><li><a href="#" class="hover:text-blue-700">Events</a></li><li><a href="#" class="hover:text-blue-700">Volunteering</a></li><li><a href="#" class="hover:text-blue-700">Newsletter</a></li></ul></nav>
<nav aria-labelledby="f-help"><p id="f-help" class="text-sm font-semibold text-slate-900">Help</p><ul class="mt-3 space-y-2 text-sm text-slate-500"><li><a href="#" class="hover:text-blue-700">Support center</a></li><li><a href="#" class="hover:text-blue-700">Knowledge base</a></li><li><a href="#" class="hover:text-blue-700">Contact</a></li><li><a href="#" class="hover:text-blue-700">Accessibility</a></li></ul></nav>
<nav aria-labelledby="f-about"><p id="f-about" class="text-sm font-semibold text-slate-900">About</p><ul class="mt-3 space-y-2 text-sm text-slate-500"><li><a href="#" class="hover:text-blue-700">Council</a></li><li><a href="#" class="hover:text-blue-700">Open data</a></li><li><a href="#" class="hover:text-blue-700">Privacy</a></li><li><a href="#" class="hover:text-blue-700">Imprint</a></li></ul></nav>
</div>
<div class="border-t border-slate-200">
<p class="mx-auto max-w-7xl px-4 py-5 text-sm text-slate-500 sm:px-6">© 2026 Westbrook County. An official government portal.</p>
</div>
</footer>
</body>
</html>
A multi-entry portal homepage — the layout AI generators rarely produce because they default to a single conversion path. Equal-weight gateways, a latest-news list, quick links, and a service-status panel suit universities, government, and large communities.