@extends('layouts.app')

@section('title', 'How It Works')

@section('content')
<div class="space-y-6">
    <div class="rounded-3xl bg-white p-8 shadow-sm">
        <h1 class="text-3xl font-semibold">How It Works</h1>
        <p class="mt-4 text-slate-600 leading-7">Browse products, add items to your cart, and place an order with secure checkout. Use order tracking to monitor delivery status.</p>
    </div>
    <div class="grid gap-6 md:grid-cols-3">
        <div class="rounded-3xl bg-white p-8 shadow-sm">
            <h2 class="text-xl font-semibold">Browse Collections</h2>
            <p class="mt-3 text-slate-600">Discover featured picks, flash deals, and best sellers across our categories.</p>
        </div>
        <div class="rounded-3xl bg-white p-8 shadow-sm">
            <h2 class="text-xl font-semibold">Add to Cart</h2>
            <p class="mt-3 text-slate-600">Select products, save favorites in wishlist, and compare items before checkout.</p>
        </div>
        <div class="rounded-3xl bg-white p-8 shadow-sm">
            <h2 class="text-xl font-semibold">Track Your Order</h2>
            <p class="mt-3 text-slate-600">Enter your order or tracking code to keep tabs on delivery progress.</p>
        </div>
    </div>
</div>
@endsection
