---
title: Search
---
<div class="max-w-3xl mx-auto">
    <h1 class="font-nunito text-2xl font-bold text-[--color-heading] mb-6">{{ trans:messages.search_results }}: "{{ get:q }}"</h1>

    <form action="{{ locale_path }}/search" method="GET" class="mb-8">
        <div class="relative">
            <input type="text" name="q" value="{{ get:q }}"
                   class="w-full px-4 py-3 pr-12 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[--color-link] focus:border-transparent outline-none">
            <button type="submit" class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-[--color-link]">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
            </button>
        </div>
    </form>

    {{ search:results index="default" }}
        {{ if no_results }}
        <p class="text-gray-500">{{ trans:messages.no_results }}</p>
        {{ else }}
        <div class="space-y-4">
            {{ results }}
            <a href="{{ locale_path }}/{{ slug | strip_locale_prefix:{current_locale} }}" class="block bg-white p-5 rounded-lg shadow-sm border border-gray-200 hover:shadow-md transition-shadow group">
                <div class="flex items-center gap-2 mb-1.5">
                    {{ if collection:handle == 'articles' }}
                    <span class="inline-flex items-center gap-1 px-2 py-0.5 bg-[#f0eeff] text-[#6254e7] text-[10px] font-bold font-nunito uppercase tracking-wider rounded-full">
                        <i class="fa-solid fa-newspaper text-[8px]"></i> {{ trans:messages.article ?? 'Article' }}
                    </span>
                    {{ elseif collection:handle == 'pages' }}
                    <span class="inline-flex items-center gap-1 px-2 py-0.5 bg-[#e8f5e9] text-[#2e7d32] text-[10px] font-bold font-nunito uppercase tracking-wider rounded-full">
                        <i class="fa-solid fa-file text-[8px]"></i> {{ trans:messages.page ?? 'Page' }}
                    </span>
                    {{ /if }}
                </div>
                <h2 class="font-nunito text-lg font-bold text-[--color-link] mb-1 group-hover:text-[#6254e7] transition-colors">{{ title }}</h2>
                {{ if search_snippet }}
                <p class="text-sm text-gray-600">{{ search_snippet }}</p>
                {{ elseif meta_description }}
                <p class="text-sm text-gray-600">{{ meta_description }}</p>
                {{ /if }}
            </a>
            {{ /results }}
        </div>
        {{ /if }}
    {{ /search:results }}
</div>