@extends('layout.app')

@section('title', '甜巷窩手作烘焙 | 首頁')

@section('content')
    <header class="py-5 text-center text-white position-relative" style="background-image: url('/img/FB背景.png'); background-size: cover; background-position: center;">
        <div class="position-absolute top-0 start-0 w-100 h-100" style="background: rgba(0,0,0,0.4);"></div>
        <div class="container position-relative" style="z-index: 1;">
            <h1 class="display-4 fw-bold mb-3 text-white" style="text-shadow: 0 4px 16px rgba(0,0,0,0.85), 0 1.5px 0 #d4a373;">甜巷窩手作烘焙</h1>
            <p class="lead mb-4 text-white" style="text-shadow: 0 2px 8px rgba(0,0,0,0.7); letter-spacing: 1px;">用心烘焙，甜蜜每一天。歡迎來到我們的購物網站！</p>
            <a href="#products" class="btn btn-light btn-lg shadow">立即選購</a>
        </div>
    </header>

    <main class="container my-5">
        <h2 id="products" class="mb-4 text-center">人氣商品</h2>
        <div class="row g-4">
            <div class="col-md-4">
                <div class="card h-100 shadow-sm">
                    <img src="https://images.unsplash.com/photo-1504674900247-0877df9cc836?auto=format&fit=crop&w=400&q=80" class="card-img-top" alt="蛋糕">
                    <div class="card-body">
                        <h5 class="card-title">經典巧克力蛋糕</h5>
                        <p class="card-text">濃郁巧克力風味，口感綿密，人氣首選。</p>
                        <a href="#" class="btn btn-outline-warning w-100">加入購物車</a>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card h-100 shadow-sm">
                    <img src="https://images.unsplash.com/photo-1519864600265-abb23847ef2c?auto=format&fit=crop&w=400&q=80" class="card-img-top" alt="餅乾">
                    <div class="card-body">
                        <h5 class="card-title">手工奶油餅乾</h5>
                        <p class="card-text">香酥可口，入口即化，適合下午茶時光。</p>
                        <a href="#" class="btn btn-outline-warning w-100">加入購物車</a>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card h-100 shadow-sm">
                    <img src="https://images.unsplash.com/photo-1464306076886-debca5e8a6b0?auto=format&fit=crop&w=400&q=80" class="card-img-top" alt="麵包">
                    <div class="card-body">
                        <h5 class="card-title">每日新鮮麵包</h5>
                        <p class="card-text">現烤出爐，香氣四溢，健康美味。</p>
                        <a href="#" class="btn btn-outline-warning w-100">加入購物車</a>
                    </div>
                </div>
            </div>
        </div>
    </main>
@endsection