Rework the landing page: sections, icons, SEO meta tags
Rewrites the marketing copy around outcomes (find competitors by product/market, tech stack, backlinks, subdomains) rather than mentioning Common Crawl as the data source. Adds a stats strip (real site/page/backlink counts), a 4-feature grid with inline SVG icons, and a 3-step "how it works" section. Layout now supports a per-page :description prop and emits meta description, Open Graph, Twitter card, and canonical tags — falls back to a sensible site-wide description when a page doesn't set one. Heading structure is a single h1 with h2 section headers, for SEO. Verified over real HTTP: no "Common Crawl" mention anywhere on the page, all meta/OG/Twitter/canonical tags present and correct, heading hierarchy clean, all 4 SVG icons well-formed, CTAs intact. Full test suite (31 tests) still passes.
This commit is contained in:
m105
@@ -1,10 +1,10 @@
|
||||
<x-layouts.app>
|
||||
<div class="mx-auto max-w-3xl px-4 py-20 text-center">
|
||||
<h1 class="text-4xl font-bold tracking-tight">Find out who you're really competing with</h1>
|
||||
<x-layouts.app description="Search millions of indexed websites by product, market, and technology to find the competitors that actually matter, then dig into their backlinks, tech stack, and site structure.">
|
||||
{{-- Hero --}}
|
||||
<section class="mx-auto max-w-3xl px-4 py-20 text-center">
|
||||
<h1 class="text-4xl font-bold tracking-tight sm:text-5xl">Know exactly who you're really competing with</h1>
|
||||
<p class="mt-4 text-lg text-neutral-600 dark:text-neutral-400">
|
||||
Huginn indexes the web using Common Crawl's public archive and helps you find competitors
|
||||
by product, location, and even the platform they're built on — e.g. "who sells honey with a
|
||||
<span class="whitespace-nowrap">.es</span> domain," or "which of my competitors run WordPress."
|
||||
Search by product, market, and even the technology a site runs on to find the competitors
|
||||
that actually matter — then dig into their backlinks, tech stack, and site structure.
|
||||
</p>
|
||||
|
||||
<div class="mt-8 flex justify-center gap-4">
|
||||
@@ -18,10 +18,136 @@
|
||||
</div>
|
||||
|
||||
@guest
|
||||
<p class="mt-10 text-sm text-neutral-500">
|
||||
<p class="mt-6 text-sm text-neutral-500">
|
||||
Browsing without an account shows a limited preview of results —
|
||||
<a href="{{ route('register') }}" class="text-blue-600 hover:underline dark:text-blue-400">create a free account</a> to see everything.
|
||||
</p>
|
||||
@endguest
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{{-- Stats strip --}}
|
||||
<section class="border-y border-neutral-200 bg-neutral-50 py-8 dark:border-neutral-800 dark:bg-neutral-900/50">
|
||||
<div class="mx-auto grid max-w-3xl grid-cols-3 gap-4 px-4 text-center">
|
||||
<div>
|
||||
<div class="text-2xl font-bold sm:text-3xl">{{ number_format(\App\Models\Site::count()) }}</div>
|
||||
<div class="mt-1 text-sm text-neutral-500">sites indexed</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-2xl font-bold sm:text-3xl">{{ number_format(\App\Models\SitePage::count()) }}</div>
|
||||
<div class="mt-1 text-sm text-neutral-500">pages analyzed</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-2xl font-bold sm:text-3xl">{{ number_format(\App\Models\Backlink::count()) }}</div>
|
||||
<div class="mt-1 text-sm text-neutral-500">backlinks mapped</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{{-- Features --}}
|
||||
<section class="mx-auto max-w-5xl px-4 py-16">
|
||||
<h2 class="text-center text-2xl font-semibold sm:text-3xl">Everything you need to size up the competition</h2>
|
||||
|
||||
<div class="mt-10 grid gap-8 sm:grid-cols-2 lg:grid-cols-4">
|
||||
<div>
|
||||
<div class="flex h-12 w-12 items-center justify-center rounded-lg bg-blue-50 text-blue-600 dark:bg-blue-950 dark:text-blue-400">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="h-6 w-6" aria-hidden="true">
|
||||
<circle cx="10" cy="10" r="6"></circle>
|
||||
<line x1="15" y1="15" x2="20" y2="20"></line>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="mt-4 font-semibold">Search by product & market</h3>
|
||||
<p class="mt-1 text-sm text-neutral-600 dark:text-neutral-400">
|
||||
Type in what you sell and where — like "organic honey" in Spain — and get a real list
|
||||
of sites selling it.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="flex h-12 w-12 items-center justify-center rounded-lg bg-blue-50 text-blue-600 dark:bg-blue-950 dark:text-blue-400">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="h-6 w-6" aria-hidden="true">
|
||||
<polygon points="12,3 21,8 12,13 3,8"></polygon>
|
||||
<polyline points="3,13 12,18 21,13"></polyline>
|
||||
<polyline points="3,17.5 12,22.5 21,17.5"></polyline>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="mt-4 font-semibold">See their tech stack</h3>
|
||||
<p class="mt-1 text-sm text-neutral-600 dark:text-neutral-400">
|
||||
Instantly spot what platform, server, and tools your competitors are running behind
|
||||
the scenes.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="flex h-12 w-12 items-center justify-center rounded-lg bg-blue-50 text-blue-600 dark:bg-blue-950 dark:text-blue-400">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="h-6 w-6" aria-hidden="true">
|
||||
<path d="M9 12a4 4 0 0 1 4-4h3a4 4 0 0 1 0 8h-1"></path>
|
||||
<path d="M15 12a4 4 0 0 1-4 4H8a4 4 0 0 1 0-8h1"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="mt-4 font-semibold">Explore backlink profiles</h3>
|
||||
<p class="mt-1 text-sm text-neutral-600 dark:text-neutral-400">
|
||||
Find out who's linking to your competitors, with anchor text and link-type details
|
||||
included.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="flex h-12 w-12 items-center justify-center rounded-lg bg-blue-50 text-blue-600 dark:bg-blue-950 dark:text-blue-400">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="h-6 w-6" aria-hidden="true">
|
||||
<rect x="9" y="3" width="6" height="4" rx="1"></rect>
|
||||
<rect x="3" y="15" width="6" height="4" rx="1"></rect>
|
||||
<rect x="15" y="15" width="6" height="4" rx="1"></rect>
|
||||
<path d="M12 7v4M6 15v-2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v2"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="mt-4 font-semibold">Map out subdomains</h3>
|
||||
<p class="mt-1 text-sm text-neutral-600 dark:text-neutral-400">
|
||||
Uncover the full structure of a competitor's web presence, not just their homepage.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{{-- How it works --}}
|
||||
<section class="border-t border-neutral-200 bg-neutral-50 py-16 dark:border-neutral-800 dark:bg-neutral-900/50">
|
||||
<div class="mx-auto max-w-4xl px-4">
|
||||
<h2 class="text-center text-2xl font-semibold sm:text-3xl">How it works</h2>
|
||||
|
||||
<div class="mt-10 grid gap-8 sm:grid-cols-3">
|
||||
<div class="text-center">
|
||||
<div class="mx-auto flex h-10 w-10 items-center justify-center rounded-full bg-neutral-900 text-sm font-semibold text-white dark:bg-white dark:text-neutral-900">1</div>
|
||||
<h3 class="mt-4 font-semibold">Search</h3>
|
||||
<p class="mt-1 text-sm text-neutral-600 dark:text-neutral-400">
|
||||
Enter a keyword, a country code, or a platform name.
|
||||
</p>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<div class="mx-auto flex h-10 w-10 items-center justify-center rounded-full bg-neutral-900 text-sm font-semibold text-white dark:bg-white dark:text-neutral-900">2</div>
|
||||
<h3 class="mt-4 font-semibold">Discover</h3>
|
||||
<p class="mt-1 text-sm text-neutral-600 dark:text-neutral-400">
|
||||
Get a ranked list of real sites matching your criteria.
|
||||
</p>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<div class="mx-auto flex h-10 w-10 items-center justify-center rounded-full bg-neutral-900 text-sm font-semibold text-white dark:bg-white dark:text-neutral-900">3</div>
|
||||
<h3 class="mt-4 font-semibold">Analyze</h3>
|
||||
<p class="mt-1 text-sm text-neutral-600 dark:text-neutral-400">
|
||||
Drill into any site's pages, backlinks, and subdomains.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{{-- Final CTA --}}
|
||||
<section class="mx-auto max-w-3xl px-4 py-20 text-center">
|
||||
<h2 class="text-2xl font-semibold sm:text-3xl">Start discovering your competition today</h2>
|
||||
<div class="mt-6">
|
||||
@auth
|
||||
<a href="{{ route('discover') }}" class="rounded-md bg-neutral-900 px-5 py-2.5 text-sm font-medium text-white hover:bg-neutral-700 dark:bg-white dark:text-neutral-900 dark:hover:bg-neutral-200">Go to Discover</a>
|
||||
@else
|
||||
<a href="{{ route('register') }}" class="rounded-md bg-neutral-900 px-5 py-2.5 text-sm font-medium text-white hover:bg-neutral-700 dark:bg-white dark:text-neutral-900 dark:hover:bg-neutral-200">Sign up free</a>
|
||||
@endauth
|
||||
</div>
|
||||
</section>
|
||||
</x-layouts.app>
|
||||
|
||||
Reference in New Issue
Block a user