<!DOCTYPE html>
<html lang="zh-cn" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <title>谷粒商城 - 优惠卷模块</title>

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" th:href="@{/webjars/bootstrap/5.1.3/css/bootstrap.min.css}">
    <!-- Font Awesome -->
    <link rel="stylesheet" th:href="@{/webjars/font-awesome/5.15.4/css/all.min.css}">

    <style>
        :root {
            --primary-color: #4e73df;
            --secondary-color: #1cc88a;
            --dark-color: #5a5c69;
        }

        body {
            font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
            background-color: #f8f9fc;
        }

        .hero-section {
            background: linear-gradient(135deg, var(--primary-color) 0%, #224abe 100%);
            color: white;
            padding: 5rem 0;
            margin-bottom: 3rem;
            border-radius: 0 0 20px 20px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }

        .feature-card {
            border: none;
            border-radius: 15px;
            transition: transform 0.3s, box-shadow 0.3s;
            margin-bottom: 20px;
            height: 100%;
        }

        .feature-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
        }

        .feature-icon {
            font-size: 2.5rem;
            margin-bottom: 1rem;
            color: var(--primary-color);
        }

        .btn-primary {
            background-color: var(--primary-color);
            border-color: var(--primary-color);
        }

        .btn-success {
            background-color: var(--secondary-color);
            border-color: var(--secondary-color);
        }

        .api-doc-btn {
            background-color: #f6c23e;
            border-color: #f6c23e;
            color: #000;
        }

        .footer {
            background-color: var(--dark-color);
            color: white;
            padding: 2rem 0;
            margin-top: 3rem;
        }
    </style>
</head>
<body>
<!-- 导航栏 -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="container">
        <a class="navbar-brandEntity" href="/">
            <i class="fas fa-shopping-bag me-2"></i>谷粒商城
        </a>
        <button class="navbar-toggler" data-bs-target="#navbarNav" data-bs-toggle="collapse" type="button">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav ms-auto">
                <li class="nav-item">
                    <a class="nav-link active" href="/">优惠卷模块</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/swagger-ui/index.html" target="_blank">Swagger API文档</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

<!-- 英雄区域 -->
<section class="hero-section text-center">
    <div class="container">
        <h1 class="display-4 fw-bold mb-4">谷粒商城优惠卷模块</h1>
        <p class="lead mb-4">基于Java 17和Spring Boot 3.x的全新版本</p>
        <div class="d-grid gap-2 d-sm-flex justify-content-sm-center">
            <a class="btn btn-lg api-doc-btn me-sm-3" href="/doc.html" target="_blank">
                <i class="fas fa-book me-2"></i>查看API文档
            </a>
            <a class="btn btn-lg btn-light" href="https://gitee.com/BunnyBoss/mall-cloud.git" target="_blank">
                <i class="fab fa-github me-2"></i>GitHub仓库
            </a>
        </div>
    </div>
</section>

<!-- 特性介绍 -->
<section class="container mb-5">
    <div class="row text-center mb-4">
        <div class="col">
            <h2 class="fw-bold">核心特性</h2>
            <p class="text-muted">优惠券模块提供全面的促销和折扣管理功能</p>
        </div>
    </div>

    <div class="row">
        <div class="col-md-4">
            <div class="card feature-card p-4">
                <div class="feature-icon">
                    <i class="fas fa-ticket-alt"></i>
                </div>
                <h3>优惠券管理</h3>
                <p class="text-muted">支持多种类型优惠券的创建、发放和核销管理。</p>
            </div>
        </div>

        <div class="col-md-4">
            <div class="card feature-card p-4">
                <div class="feature-icon">
                    <i class="fas fa-percentage"></i>
                </div>
                <h3>折扣规则</h3>
                <p class="text-muted">灵活配置满减、折扣、立减等多种促销规则。</p>
            </div>
        </div>

        <div class="col-md-4">
            <div class="card feature-card p-4">
                <div class="feature-icon">
                    <i class="fas fa-calendar-alt"></i>
                </div>
                <h3>有效期控制</h3>
                <p class="text-muted">精确控制优惠券的有效期和使用时段。</p>
            </div>
        </div>
    </div>

    <div class="row mt-4">
        <div class="col-md-4">
            <div class="card feature-card p-4">
                <div class="feature-icon">
                    <i class="fas fa-users"></i>
                </div>
                <h3>用户定向</h3>
                <p class="text-muted">支持按用户等级、标签等条件定向发放优惠券。</p>
            </div>
        </div>

        <div class="col-md-4">
            <div class="card feature-card p-4">
                <div class="feature-icon">
                    <i class="fas fa-chart-pie"></i>
                </div>
                <h3>效果分析</h3>
                <p class="text-muted">提供优惠券使用情况和转化率的数据分析。</p>
            </div>
        </div>

        <div class="col-md-4">
            <div class="card feature-card p-4">
                <div class="feature-icon">
                    <i class="fas fa-random"></i>
                </div>
                <h3>组合营销</h3>
                <p class="text-muted">支持优惠券与其他促销活动的组合使用规则。</p>
            </div>
        </div>
    </div>
</section>

<!-- 技术栈 -->
<section class="bg-light py-5">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-6 mb-4 mb-lg-0">
                <h2 class="fw-bold mb-4">现代化技术栈</h2>
                <ul class="list-unstyled">
                    <li class="mb-3">
                        <i class="fas fa-check-circle text-success me-2"></i>
                        <strong>Java 17</strong> - 使用最新的LTS版本
                    </li>
                    <li class="mb-3">
                        <i class="fas fa-check-circle text-success me-2"></i>
                        <strong>Spring Boot 3.x</strong> - 企业级开发框架
                    </li>
                    <li class="mb-3">
                        <i class="fas fa-check-circle text-success me-2"></i>
                        <strong>Knife4j</strong> - 强大的API文档工具
                    </li>
                    <li class="mb-3">
                        <i class="fas fa-check-circle text-success me-2"></i>
                        <strong>Thymeleaf</strong> - 现代化模板引擎
                    </li>
                </ul>
            </div>
            <div class="col-lg-6">
                <img alt="技术架构图" class="img-fluid rounded shadow" src="/images/architecture-diagram.jpg">
            </div>
        </div>
    </div>
</section>

<!-- 快速开始 -->
<section class="container my-5">
    <div class="row">
        <div class="col-lg-8 mx-auto text-center">
            <h2 class="fw-bold mb-4">快速开始</h2>
            <div class="card bg-dark text-white text-start mb-4">
                <div class="card-body">
                    <code class="text-white">
                        # 克隆项目<br>
                        git clone https://gitee.com/BunnyBoss/mall-cloud.git<br><br>

                        # 启动优惠卷模块<br>
                        cd mall-cloud<br>
                        mvn spring-boot:run
                    </code>
                </div>
            </div>
            <a class="btn btn-primary btn-lg px-4" href="/doc.html" target="_blank">
                <i class="fas fa-rocket me-2"></i>立即体验API
            </a>
        </div>
    </div>
</section>

<!-- 页脚 -->
<footer class="footer text-center">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <p class="mb-0">© 2023 谷粒商城 - 优惠卷模块. 基于Java 17的全新版本.</p>
                <p class="mb-0">
                    <a class="text-white me-3" href="#"><i class="fab fa-github"></i></a>
                    <a class="text-white me-3" href="#"><i class="fab fa-twitter"></i></a>
                    <a class="text-white" href="#"><i class="fab fa-linkedin"></i></a>
                </p>
            </div>
        </div>
    </div>
</footer>

<!-- JavaScript -->
<script th:src="@{/webjars/jquery/3.6.0/jquery.min.js}"></script>
<script th:src="@{/webjars/bootstrap/5.1.3/js/bootstrap.bundle.min.js}"></script>
</body>
</html>