haiguji-website-export/index.html

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>海古纪生物科技 - 精准基因组学解决方案</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/nav.css">
    <link rel="stylesheet" href="css/footer.css">
</head>

<body>
    <!-- 导航栏 -->
    <nav class="navbar">
        <div class="nav-container">
            <div class="logo-section">
                <img src="公司资料/公司简介/海古纪logo.png" alt="海古纪 Logo" class="logo">
            </div>
            <ul class="nav-menu">
                <li><a href="#home" class="nav-link">首页</a></li>
                <li class="nav-item dropdown">
                    <a href="pages/products.html" class="nav-link">产品 <span class="arrow">▼</span></a>
                    <div class="dropdown-menu">
                        <a href="pages/products.html#ai-scientist">AI生信科学家</a>
                        <a href="pages/products.html#hsmaster">HSmaster植物基因分型系统</a>
                    </div>
                </li>
                <li class="nav-item dropdown">
                    <a href="pages/services.html" class="nav-link">服务 <span class="arrow">▼</span></a>
                    <div class="dropdown-menu">
                        <a href="pages/services.html#hyper-seq">Hyper-seq测序</a>
                        <div class="submenu-trigger">
                            <a href="pages/services.html#wgs">全基因组重测序</a>
                        </div>
                        <a href="pages/services.html#process-dev">实验流程开发与技术支持</a>
                        <a href="pages/services.html#ai-agri">AI农业领域定制</a>
                    </div>
                </li>
                <li class="nav-item dropdown">
                    <a href="pages/applications.html" class="nav-link">应用领域 <span class="arrow">▼</span></a>
                    <div class="dropdown-menu">
                        <a href="pages/applications.html#breeding">种业研究</a>
                        <a href="pages/applications.html#microbe">微生物研究</a>
                        <a href="pages/applications.html#animal-plant">动植物研究</a>
                    </div>
                </li>
                <li class="nav-item dropdown">
                    <a href="pages/advantages.html" class="nav-link">综合优势 <span class="arrow">▼</span></a>
                    <div class="dropdown-menu">
                        <a href="pages/advantages.html#sequencing">测序平台</a>
                        <a href="pages/advantages.html#mass-spec">质谱平台</a>
                        <a href="pages/advantages.html#synthesis">合成平台</a>
                        <a href="pages/advantages.html#analysis">分析平台</a>
                        <a href="pages/advantages.html#lab">核心实验室</a>
                        <a href="pages/advantages.html#css">客户服务系统</a>
                    </div>
                </li>
                <li class="nav-item dropdown">
                    <a href="pages/resources.html" class="nav-link">资源中心 <span class="arrow">▼</span></a>
                    <div class="dropdown-menu">
                        <a href="pages/resources.html#case">精选案例</a>
                        <a href="pages/resources.html#news">资讯动态</a>
                        <a href="pages/resources.html#video">视频中心</a>
                    </div>
                </li>
                <li class="nav-item dropdown">
                    <a href="pages/about.html" class="nav-link">关于我们 <span class="arrow">▼</span></a>
                    <div class="dropdown-menu">
                        <a href="pages/about.html#haiguji">海古纪</a>
                        <a href="pages/about.html#contact">联系我们</a>
                        <a href="pages/about.html#news">最新动态</a>
                        <a href="pages/about.html#privacy">隐私协议</a>
                    </div>
                </li>
            </ul>
            <div class="nav-right">
                <div class="nav-item dropdown">
                    <a href="#" class="nav-icon" title="公众号">☷</a>
                    <div class="dropdown-menu">
                        <div class="qrcode-container">
                            <p>扫描关注公众号</p>
                            <div class="qrcode qr-empty">二维码</div>
                        </div>
                    </div>
                </div>

                <a href="pages/customer-service.html" class="customer-service-link" title="客户服务系统">CSS</a>
                <a href="pages/about.html#contact" class="btn-contact">联系我们</a>
            </div>
        </div>
    </nav>

    <!-- 首页 -->
    <section id="home" class="hero">
        <div class="hero-carousel">
            <!-- 第一张：公司理念 -->
            <div class="hero-slide active">
                <div class="hero-content">
                    <h1>精准基因组学解决方案</h1>
                    <p>为全球科研与产业赋能基因组大数据</p>
                    <button class="btn-primary">了解更多</button>
                </div>
                <img src="公司资料/产品/HSmaster/图片/育种发展流程-从人工选择到智能育种.png" alt="从人工选择到智能育种">
            </div>

            <!-- 第二张：产品展示 -->
            <div class="hero-slide">
                <div class="hero-content">
                    <h1>HSmaster 全自动文库制备系统</h1>
                    <p>核酸提取、PCR扩增、文库质检全流程无人值守</p>
                    <a class="btn-primary hero-btn" href="pages/products.html#hsmaster">查看产品</a>
                </div>
                <img src="公司资料/产品/HSmaster/图片/HSmaster全自动文库制备系统.png" alt="HSmaster全自动文库制备系统">
            </div>

            <!-- 第三张：AI生信科学家 -->
            <div class="hero-slide">
                <div class="hero-content">
                    <h1>AI 生信科学家</h1>
                    <p>上传数据后自动识别项目类型，规划并执行多组学分析路径</p>
                    <a class="btn-primary hero-btn" href="pages/products.html#ai-scientist">浏览产品</a>
                </div>
                <img src="公司资料/产品/AI生信科学家/人工智能生物信息科学家.png" alt="AI生信科学家">
            </div>

            <!-- 第四张：联系信息 -->
            <div class="hero-slide">
                <div class="hero-content">
                    <h1>立即联系我们</h1>
                    <p>获取专业的基因组学解决方案</p>
                    <a class="btn-primary hero-btn" href="pages/about.html#contact">咨询服务</a>
                </div>
                <img src="公司资料/产品/HSmaster/图片/文库流水线.png" alt="文库流水线">
            </div>
        </div>

        <div class="carousel-controls">
            <button class="carousel-dot active" onclick="currentSlide(1)"></button>
            <button class="carousel-dot" onclick="currentSlide(2)"></button>
            <button class="carousel-dot" onclick="currentSlide(3)"></button>
            <button class="carousel-dot" onclick="currentSlide(4)"></button>
        </div>
    </section>

    <!-- 产品与服务预览 -->
    <!-- 首页视频 -->
    <section class="home-video-section">
        <div class="container home-video-layout">
            <div class="home-video-copy">
                <span class="section-kicker">南繁科研现场</span>
                <h2>海大南繁：走向世界的育种中心</h2>
                <p>通过视频了解海南大学南繁科研与育种创新基础，感受海古纪技术服务所依托的南繁产业场景。</p>
                <a class="card-link" href="pages/resources.html#video">更多视频 →</a>
            </div>
            <video controls preload="metadata" poster="公司资料/资讯/2025-2-12/水稻图片.png">
                <source src="公司资料/资讯/海大南繁：走向世界的育种中心.mp4" type="video/mp4">
                您的浏览器暂不支持视频播放。
            </video>
        </div>
    </section>
    <section class="products-preview">
        <div class="container">
            <h2>我们的产品与服务</h2>
            <div class="preview-grid">
                <div class="preview-card">
                    <img src="公司资料/产品/AI生信科学家/人工智能生物信息科学家.png" alt="AI生信科学家" class="preview-image">
                    <h3>AI生信科学家</h3>
                    <p>全自动、自规划的多组学分析智能体</p>
                    <a href="pages/products.html#ai-scientist" class="card-link">了解更多 →</a>
                </div>

                <div class="preview-card">
                    <img src="公司资料/产品/HSmaster/图片/hyper-seq.png" alt="Hyper-seq技术" class="preview-image">
                    <h3>Hyper-seq测序</h3>
                    <p>极低成本、高效、灵活的DNA测序文库制备</p>
                    <a href="pages/services.html#hyper-seq" class="card-link">了解更多 →</a>
                </div>

                <div class="preview-card">
                    <img src="公司资料/产品/HSmaster/图片/生信分析流程.png" alt="全基因组重测序分析流程" class="preview-image">
                    <h3>全基因组重测序</h3>
                    <p>高精度全基因组测序与分析服务</p>
                    <a href="pages/services.html#wgs" class="card-link">了解更多 →</a>
                </div>
            </div>
        </div>
    </section>

    <!-- 学术文献与动态 -->
    <section class="academic-news">
        <div class="container">
            <div class="section-row">
                <div class="section-col">
                    <h2>学术文献</h2>
                    <div class="news-list">
                        <div class="news-item">
                            <h4>Hyper-seq 技术实现低成本全基因组数据采集</h4>
                            <p>智能自动化方案联合 Hyper-seq，支撑水稻与大豆基因组选择研究。</p><a href="pages/resources.html#news">查看资讯</a>
                        </div>
                        <div class="news-item">
                            <h4>马铃薯同源四倍体基因组研究</h4>
                            <p>Plant Biotechnology Journal (IF=13.8)</p>
                            <a href="#" class="read-more">查看详情 →</a>
                        </div>
                        <div class="news-item">
                            <h4>美人蕉科植物基因组研究</h4>
                            <p>Frontiers in Plant Science (IF=6.627)</p>
                            <a href="#" class="read-more">查看详情 →</a>
                        </div>
                    </div>
                </div>

                <div class="section-col">
                    <h2>最新动态</h2>
                    <div class="news-list">
                        <div class="news-item">
                            <h4>Hyper-seq 技术实现低成本全基因组数据采集</h4>
                            <p>智能自动化方案联合 Hyper-seq，支撑水稻与大豆基因组选择研究。</p><a href="pages/resources.html#news">查看资讯</a>
                        </div>
                        <div class="news-item">
                            <h4>Hyper-seq技术获得国际发明专利</h4>
                            <p>专利号：No.2020/06979</p>
                            <a href="#" class="read-more">查看详情 →</a>
                        </div>
                        <div class="news-item">
                            <h4>获崖州湾杯科技创新大赛一等奖</h4>
                            <p>技术创新突破行业瓶颈</p>
                            <a href="#" class="read-more">查看详情 →</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 底部 -->
    <footer class="footer">
        <div class="footer-content">
            <div class="footer-section">
                <h3>联系信息</h3>
                <p>三亚海古纪生物科技有限公司</p>
                <p>谢经理：16689001917</p>
                <p>基因文库技术：江肆肆 18605560158</p>
                <p>育种数据服务：廖树欣 18889202989</p>
                <p>高通量基因文库设备：杰瑞.葛 13601063401</p>
            </div>

            <div class="footer-section">
                <h3>关于海古纪</h3>
                <ul>
                    <li><a href="pages/about.html#haiguji">公司简介</a></li>
                    <li><a href="pages/about.html#contact">联系我们</a></li>
                    <li><a href="pages/about.html#privacy">隐私协议</a></li>
                </ul>
            </div>

            <div class="footer-section">
                <h3>合作伙伴</h3>
                <div class="footer-partners">
                    <a class="partner-link" href="https://www.prcxi.com/" target="_blank"><img class="partner-logo"
                            src="公司资料/公司简介/中析生信logo.png" alt="苏州中析生物信息有限公司"><span>苏州中析生物信息有限公司</span></a>
                    <a class="partner-link" href="https://www.hainanu.edu.cn/" target="_blank"><img class="partner-logo"
                            src="公司资料/公司简介/海南大学logo.png" alt="海南大学"><span>海南大学</span></a>
                </div>
            </div>

            <div class="footer-section">
                <h3>关注我们</h3>
                <div class="qr-grid">
                    <div class="qr-slot">微信</div>
                    <div class="qr-slot">微博</div>
                    <div class="qr-slot">公众号</div>
                </div>
            </div>
        </div>

        <div class="footer-bottom">
            <p>&copy; 2024 三亚海古纪生物科技有限公司. 保留所有权利。</p>
            <p><a href="#">隐私政策</a> | <a href="#">用户协议</a></p>
        </div>
    </footer>

    <script src="js/carousel.js"></script>
    <script src="js/nav.js"></script>
</body>

</html>