<?php
require('setting.php');
?>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?php echo $index_array['title'] ?></title>
    <script src="/ast/k2-1.css"></script>
    <link href="/ast/fontawe/css/all.min.css" rel="stylesheet">
    
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    fontFamily: {
                        'roboto': ['Roboto', 'system-ui', 'sans-serif'],
                        'inter': ['Inter', 'system-ui', 'sans-serif']
                    },
                    colors: {
                        primary: '#165DFF',
                        secondary: '#36CFC9',
                        neutral: {
                            100: '#F5F7FA',
                            200: '#E5E6EB',
                            300: '#C9CDD4',
                            400: '#86909C',
                            500: '#4E5969',
                            600: '#272E3B',
                            700: '#1D2129',
                        }
                    },
                    boxShadow: {
                        'card': '0 4px 20px 0 rgba(0, 0, 0, 0.05)',
                        'card-hover': '0 8px 30px 0 rgba(0, 0, 0, 0.1)',
                    }
                }
            }
        }
    </script>
    
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .text-balance {
                text-wrap: balance;
            }
            .transition-transform {
                transition-property: transform;
                transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
                transition-duration: 300ms;
            }
        }
    </style>
    
    <style>
        
        ::-webkit-scrollbar {
            width: 6px;
            height: 6px;
        }
        ::-webkit-scrollbar-track {
            background: #f1f1f1;
        }
        ::-webkit-scrollbar-thumb {
            background: #c1c1c1;
            border-radius: 3px;
        }
        ::-webkit-scrollbar-thumb:hover {
            background: #a8a8a8;
        }
        
      
        html {
            scroll-behavior: smooth;
        }
        
    
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .feature-card {
            animation: fadeIn 0.5s ease forwards;
        }
        .feature-card:nth-child(2) { animation-delay: 0.1s; }
        .feature-card:nth-child(3) { animation-delay: 0.2s; }
        .feature-card:nth-child(4) { animation-delay: 0.3s; }
        .feature-card:nth-child(5) { animation-delay: 0.4s; }
        .feature-card:nth-child(6) { animation-delay: 0.5s; }
        .feature-card:nth-child(7) { animation-delay: 0.6s; }
        .feature-card:nth-child(8) { animation-delay: 0.7s; }
    </style>
</head>

<body class="font-inter bg-neutral-100 text-neutral-700 min-h-screen flex flex-col">
   
    <header class="sticky top-0 z-50 bg-white shadow-sm transition-all duration-300">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between items-center py-4">
                <a href="#" class="flex items-center space-x-2">
                    <div class="w-10 h-10 bg-primary rounded-lg flex items-center justify-center">
                        <i class="fa fa-graduation-cap text-white text-xl"></i>
                    </div>
                    <span class="text-xl font-bold text-neutral-700"><?php echo $index_array['title'] ?></span>
                </a>
                
             
                <nav class="hidden md:flex items-center space-x-8">
                    <a href="#" class="text-neutral-500 hover:text-primary transition-colors font-medium">首页</a>
                    <a href="teacher/" class="text-neutral-500 hover:text-primary transition-colors font-medium">教师端</a>
                    <a href="student/" class="text-neutral-500 hover:text-primary transition-colors font-medium">学生端</a>
                    <a href="share-exams/score-exam/search/" class="text-neutral-500 hover:text-primary transition-colors font-medium">查询成绩</a>
                    <a href="notice/" class="text-neutral-500 hover:text-primary transition-colors font-medium">平台公告</a>
                    <a href="#" class="bg-primary hover:bg-primary/90 text-white px-5 py-2 rounded-lg transition-all shadow-md hover:shadow-lg">
                        立即开始
                    </a>
                </nav>
                
               
                <button class="md:hidden text-neutral-700 focus:outline-none" aria-label="菜单">
                    <i class="fa fa-bars text-xl"></i>
                </button>
            </div>
        </div>
    </header>

    
    <section class="bg-gradient-to-r from-primary to-primary/80 text-white py-20 md:py-32">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <div class="max-w-3xl mx-auto text-center">
                <h1 class="text-[clamp(2rem,5vw,3.5rem)] font-bold leading-tight mb-6">
                    <?php echo $index_array['title'] ?>
                </h1>
                <p class="text-[clamp(1rem,2vw,1.25rem)] text-white/90 mb-10 text-balance">
                    专业的在线考试解决方案，为教育机构和企业提供高效、安全、易用的考试管理平台
                </p>
                <div class="flex flex-col sm:flex-row justify-center gap-4">
                    <a href="teacher/" class="bg-white text-primary hover:bg-neutral-100 px-8 py-3 rounded-lg font-medium transition-all shadow-lg hover:shadow-xl text-lg">
                        教师入口
                    </a>
                    <a href="student/" class="bg-transparent border-2 border-white text-white hover:bg-white/10 px-8 py-3 rounded-lg font-medium transition-all text-lg">
                        学生入口
                    </a>
                </div>
            </div>
        </div>
        
    
        <div class="absolute left-0 right-0 bottom-0">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 100" class="w-full h-auto fill-neutral-100">
                <path d="M0,64L80,69.3C160,75,320,85,480,80C640,75,800,53,960,48C1120,43,1280,53,1360,58.7L1440,64L1440,100L1360,100C1280,100,1120,100,960,100C800,100,640,100,480,100C320,100,160,100,80,100L0,100Z"></path>
            </svg>
        </div>
    </section>


    <section class="py-16 md:py-24 relative">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center max-w-3xl mx-auto mb-16">
                <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-neutral-700 mb-4">强大功能，简单操作</h2>
                <p class="text-neutral-500 text-lg">我们提供全面的考试管理工具，满足您的各种需求</p>
            </div>
            
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 lg:gap-8">
              
                <div class="feature-card bg-white rounded-xl p-6 shadow-card hover:shadow-card-hover transition-all duration-300 hover:-translate-y-1">
                    <div class="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center mb-5">
                        <i class="fa fa-pencil text-primary text-xl"></i>
                    </div>
                    <h3 class="text-xl font-semibold text-neutral-700 mb-3">编辑和修改考卷</h3>
                    <p class="text-neutral-500">轻松编辑和修改您的考卷内容，以适应不同的考试需求。</p>
                </div>
                
          
                <div class="feature-card bg-white rounded-xl p-6 shadow-card hover:shadow-card-hover transition-all duration-300 hover:-translate-y-1">
                    <div class="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center mb-5">
                        <i class="fa fa-bar-chart text-primary text-xl"></i>
                    </div>
                    <h3 class="text-xl font-semibold text-neutral-700 mb-3">统计和报告功能</h3>
                    <p class="text-neutral-500">生成详细的统计报告，帮助您了解考试的整体表现和个别题目的难度。</p>
                </div>
                
             
                <div class="feature-card bg-white rounded-xl p-6 shadow-card hover:shadow-card-hover transition-all duration-300 hover:-translate-y-1">
                    <div class="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center mb-5">
                        <i class="fa fa-cog text-primary text-xl"></i>
                    </div>
                    <h3 class="text-xl font-semibold text-neutral-700 mb-3">个性化设置</h3>
                    <p class="text-neutral-500">根据您的需求定制考卷的外观和功能，包括时间限制、分数设置等。</p>
                </div>
                
    
                <div class="feature-card bg-white rounded-xl p-6 shadow-card hover:shadow-card-hover transition-all duration-300 hover:-translate-y-1">
                    <div class="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center mb-5">
                        <i class="fa fa-lock text-primary text-xl"></i>
                    </div>
                    <h3 class="text-xl font-semibold text-neutral-700 mb-3">安全和隐私保护</h3>
                    <p class="text-neutral-500">确保考卷和考试数据的安全，保护考生的隐私。</p>
                </div>
                
          
                <div class="feature-card bg-white rounded-xl p-6 shadow-card hover:shadow-card-hover transition-all duration-300 hover:-translate-y-1">
                    <div class="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center mb-5">
                        <i class="fa fa-mobile text-primary text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-semibold text-neutral-700 mb-3">移动设备支持</h3>
                    <p class="text-neutral-500">考卷支持在各种移动设备上进行，方便考生随时随地参加考试。</p>
                </div>
                
            
                <div class="feature-card bg-white rounded-xl p-6 shadow-card hover:shadow-card-hover transition-all duration-300 hover:-translate-y-1">
                    <div class="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center mb-5">
                        <i class="fa fa-comments text-primary text-xl"></i>
                    </div>
                    <h3 class="text-xl font-semibold text-neutral-700 mb-3">即时反馈和互动</h3>
                    <p class="text-neutral-500">提供即时反馈，增加考生与考卷之间的互动性，提高考试体验。</p>
                </div>
                
   
                <div class="feature-card bg-white rounded-xl p-6 shadow-card hover:shadow-card-hover transition-all duration-300 hover:-translate-y-1">
                    <div class="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center mb-5">
                        <i class="fa fa-share-alt text-primary text-xl"></i>
                    </div>
                    <h3 class="text-xl font-semibold text-neutral-700 mb-3">易于分享和分发</h3>
                    <p class="text-neutral-500">轻松分享和分发考卷，无论是通过电子邮件还是社交媒体。</p>
                </div>
                
              
                <div class="feature-card bg-white rounded-xl p-6 shadow-card hover:shadow-card-hover transition-all duration-300 hover:-translate-y-1">
                    <div class="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center mb-5">
                        <i class="fa fa-database text-primary text-xl"></i>
                    </div>
                    <h3 class="text-xl font-semibold text-neutral-700 mb-3">考卷存档和备份</h3>
                    <p class="text-neutral-500">自动存档和备份考卷，确保数据不会丢失，方便未来参考和复审。</p>
                </div>
            </div>
        </div>
    </section>


    <section class="bg-neutral-700 text-white py-16">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8 text-center">
            <h2 class="text-[clamp(1.5rem,3vw,2.25rem)] font-bold mb-6">准备好开始使用了吗？</h2>
            <p class="text-white/80 text-lg max-w-2xl mx-auto mb-8">
                加入 1000+ 已经在使用我们平台的教育工作者和学生的行列
            </p>
            <div class="flex flex-col sm:flex-row justify-center gap-4">
                <a href="teacher/" class="bg-primary hover:bg-primary/90 text-white px-8 py-3 rounded-lg font-medium transition-all shadow-lg hover:shadow-xl">
                    立即注册
                </a>
                <a href="#" class="bg-white/10 hover:bg-white/20 backdrop-blur-sm text-white border border-white/30 px-8 py-3 rounded-lg font-medium transition-all">
                    了解更多
                </a>
            </div>
        </div>
    </section>

 
    <footer class="bg-neutral-800 text-white pt-16 pb-8">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-10 mb-12">
                <div>
                    <div class="flex items-center space-x-2 mb-6">
                        <div class="w-10 h-10 bg-primary rounded-lg flex items-center justify-center">
                            <i class="fa fa-graduation-cap text-white text-xl"></i>
                        </div>
                        <span class="text-xl font-bold"><?php echo $index_array['title'] ?></span>
                    </div>
                    <p class="text-neutral-400 mb-6">
                        专业的在线考试解决方案，让考试管理更简单高效
                    </p>
                    <div class="flex space-x-4">
                        
                        <a href="#" class="w-10 h-10 rounded-full bg-neutral-700 flex items-center justify-center hover:bg-primary transition-colors">
                            <i class="fa fa-envelope"></i>
                        </a>
                    </div>
                </div>
                
                <div>
                    <h4 class="text-lg font-semibold mb-6">快速链接</h4>
                    <ul class="space-y-3">
                        <li><a href="#" class="text-neutral-400 hover:text-white transition-colors">首页</a></li>
                        <li><a href="teacher/" class="text-neutral-400 hover:text-white transition-colors">教师端</a></li>
                        <li><a href="student/" class="text-neutral-400 hover:text-white transition-colors">学生端</a></li>
                        <li><a href="share-exams/score-exam/search/" class="text-neutral-400 hover:text-white transition-colors">查询成绩</a></li>
                    </ul>
                </div>
                
                <div>
                    <h4 class="text-lg font-semibold mb-6">支持</h4>
                    <ul class="space-y-3">
                        <li><a href="#" class="text-neutral-400 hover:text-white transition-colors">帮助中心</a></li>
                        <li><a href="#" class="text-neutral-400 hover:text-white transition-colors">使用教程</a></li>
                        <li><a href="#" class="text-neutral-400 hover:text-white transition-colors">常见问题</a></li>
                        <li><a href="#" class="text-neutral-400 hover:text-white transition-colors">联系我们</a></li>
                    </ul>
                </div>
                
                <div>
                    <h4 class="text-lg font-semibold mb-6">联系我们</h4>
                    <ul class="space-y-3">
                        <li class="flex items-start space-x-3">
                            <i class="fa fa-map-marker mt-1 text-neutral-400"></i>
                            <span class="text-neutral-400">北京市海淀区科技园区88号</span>
                        </li>
                        <li class="flex items-center space-x-3">
                            <i class="fa fa-phone text-neutral-400"></i>
                            <span class="text-neutral-400">400-123-4567</span>
                        </li>
                        <li class="flex items-center space-x-3">
                            <i class="fa fa-envelope text-neutral-400"></i>
                            <span class="text-neutral-400">support@example.com</span>
                        </li>
                    </ul>
                </div>
            </div>
            
            <div class="border-t border-neutral-700 pt-8 text-center text-neutral-500">
                <p>&copy; 2025 <?php echo $index_array['keyword'] ?>. All rights reserved.</p>
                <p class="mt-2"><?php echo $index_array['beian'] ?></p>
            </div>
        </div>
    </footer>

  
    <script>
        
        window.addEventListener('scroll', function() {
            const header = document.querySelector('header');
            if (window.scrollY > 10) {
                header.classList.add('shadow-md');
                header.classList.remove('shadow-sm');
            } else {
                header.classList.remove('shadow-md');
                header.classList.add('shadow-sm');
            }
        });
        
        
        document.querySelectorAll('.feature-card').forEach(card => {
            card.addEventListener('mouseenter', () => {
                card.classList.add('scale-[1.02]');
            });
            card.addEventListener('mouseleave', () => {
                card.classList.remove('scale-[1.02]');
            });
        });
    </script>
</body>
</html>