<!-- 🟡 Coriom Hero + Product Showcase -->
<section class="bg-slate-950 text-white text-center py-24">
<div class="max-w-4xl mx-auto px-6">
<h1 class="text-5xl font-bold mb-6 leading-tight">Define Your Space. Define Your Success.</h1>
<p class="text-slate-300 text-xl mb-10">
Experience the ultimate in design and comfort with our exclusive collection of ergonomic essentials.
</p>
<a href="/collections/all" class="bg-amber-300 text-slate-950 font-semibold py-4 px-12 rounded-full shadow-xl hover:bg-amber-400 transition">Explore Collection</a>
</div>
</section>
<section class="bg-slate-900 py-24">
<div class="max-w-7xl mx-auto px-6">
<h2 class="text-4xl font-bold text-center text-white mb-16">The Core Collection</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-10">
{% for product in collections['all'].products limit: 6 %}
<div class="bg-slate-800 rounded-xl overflow-hidden shadow-lg hover:-translate-y-1 transition">
<a href="{{ product.url }}">
<img src="{{ product.featured_image | img_url: '600x600' }}" alt="{{ product.title }}" class="w-full h-80 object-cover">
</a>
<div class="p-6 text-center">
<h3 class="text-xl font-semibold text-white mb-2">{{ product.title }}</h3>
<p class="text-slate-400 mb-4">{{ product.price | money }}</p>
<form method="post" action="/cart/add">
<input type="hidden" name="id" value="{{ product.variants.first.id }}">
<button type="submit" class="w-full bg-amber-300 text-slate-950 font-semibold py-3 rounded-lg hover:bg-amber-400 transition">
Add to Cart
</button>
</form>
</div>
</div>
{% endfor %}
</div>
</div>
</section>
