huginn/resources/views/home.blade.php

<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">
            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">
            @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>
                <a href="{{ route('sites.index') }}" class="rounded-md border border-neutral-300 px-5 py-2.5 text-sm font-medium hover:bg-neutral-50 dark:border-neutral-700 dark:hover:bg-neutral-900">Browse sites</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>
                <a href="{{ route('login') }}" class="rounded-md border border-neutral-300 px-5 py-2.5 text-sm font-medium hover:bg-neutral-50 dark:border-neutral-700 dark:hover:bg-neutral-900">Log in</a>
            @endauth
        </div>

        @guest
            <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
    </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 &amp; 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>