astro-jiao77.cn/src/pages/index.astro

---
import BaseLayout from '../layouts/BaseLayout.astro';
import Header from '../components/Header.astro';
import Footer from '../components/Footer.astro';
import NavigationGrid from '../components/navigation/NavigationGrid.astro';
import NavigationCard from '../components/navigation/NavigationCard.astro';
import Container from '../components/Container.astro';
import AnimatedElement from '../components/AnimatedElement.astro';
---

<BaseLayout title="Jiao77 - 首页" description="简约美观的现代化网站" type="navigation">
  <Header />
  
  <main class="main-content">
    <div class="container mx-auto px-4">
      <AnimatedElement animation="fadeInUp" delay={200} trigger="load">
        <Container
          variant="glass"
          size="large"
          padding="xl"
          className="text-center mb-12"
        >
          <h1 class="hero-title"><i class="fas fa-rocket"></i> 焦七七小站</h1>
          <p class="hero-subtitle">技术服务平台</p>
          <p class="hero-description">整合多种自建服务，提供便捷的技术解决方案。从这里发现更多可能性！</p>
        </Container>
      </AnimatedElement>
    </div>
    
    <AnimatedElement animation="fadeInUp" delay={400} trigger="scroll">
      <NavigationGrid 
        title="技术服务"
        description="整合多种自建服务，提供便捷的技术解决方案"
        columns={3}
        gap="large"
      >
        <AnimatedElement animation="fadeInUp" delay={600} trigger="scroll">
          <NavigationCard
            title="AList 网盘"
            description="整合多平台云存储的统一管理工具，方便快捷地访问您的各种网盘和存储服务。"
            href="http://jiao77.cn:52443"
            icon="fas fa-cloud"
            color="primary"
            size="large"
          />
        </AnimatedElement>
        
        <AnimatedElement animation="fadeInUp" delay={700} trigger="scroll">
          <NavigationCard
            title="Q-Nas"
            description="基于飞牛系统的nas服务。"
            href="http://jiao77.cn:5666"
            icon="fas fa-server"
            color="secondary"
            size="large"
          />
        </AnimatedElement>
        
        <AnimatedElement animation="fadeInUp" delay={800} trigger="scroll">
          <NavigationCard
            title="nuc-Nas"
            description="另外一个飞牛nas。"
            href="http://jiao77.cn:56661"
            icon="fas fa-database"
            color="accent"
            size="large"
          />
        </AnimatedElement>
        
        <AnimatedElement animation="fadeInUp" delay={900} trigger="scroll">
          <NavigationCard
            title="RAGflow 知识库"
            description="基于检索增强生成的知识管理系统，快速获取和整理专业领域知识。"
            href="http://jiao77.cn:28081"
            icon="fas fa-robot"
            color="primary"
            size="medium"
          />
        </AnimatedElement>
        
        <AnimatedElement animation="fadeInUp" delay={1000} trigger="scroll">
          <NavigationCard
            title="Open WebUI"
            description="强大的AI交互界面，提供直观的模型管理和交互体验。"
            href="http://jiao77.cn:38080"
            icon="fas fa-brain"
            color="secondary"
            size="medium"
          />
        </AnimatedElement>
        
        <AnimatedElement animation="fadeInUp" delay={1100} trigger="scroll">
          <NavigationCard
            title="Navidrome 音乐"
            description="您自己的个人音乐服务器，随时随地享受您的音乐收藏。"
            href="http://jiao77.cn:45332"
            icon="fas fa-music"
            color="primary"
            size="medium"
          />
        </AnimatedElement>
        
        <AnimatedElement animation="fadeInUp" delay={1200} trigger="scroll">
          <NavigationCard
            title="Gitea"
            description="轻量级的代码托管解决方案，用于版本控制和协作开发。"
            href="http://jiao77.cn:3012"
            icon="fas fa-code-branch"
            color="secondary"
            size="medium"
          />
        </AnimatedElement>
        
        <AnimatedElement animation="fadeInUp" delay={1300} trigger="scroll">
          <NavigationCard
            title="技术报告"
            description="这是一个我做过的技术报告的导航。"
            href="http://jiao77.cn/report"
            icon="fas fa-file-alt"
            color="accent"
            size="medium"
          />
        </AnimatedElement>
        
        <AnimatedElement animation="fadeInUp" delay={1400} trigger="scroll">
          <NavigationCard
            title="3X-UI 代理管理"
            description="基于3X-UI的代理服务管理面板，提供便捷的代理配置和监控功能。"
            href="https://vps.jiao77.cn:5090/vps-jiao77/"
            icon="fas fa-network-wired"
            color="primary"
            size="medium"
          />
        </AnimatedElement>
      </NavigationGrid>
    </AnimatedElement>
  </main>
  
  <Footer />
</BaseLayout>

<style>
  .main-content {
    min-height: 100vh;
    padding-top: 6rem;
    padding-bottom: 2rem;
  }
  
  .container {
    max-width: 1200px;
    width: 100%;
  }
  
  .mx-auto {
    margin-left: auto;
    margin-right: auto;
  }
  
  .px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  
  .hero-title {
    font-size: 3rem;
    font-weight: 800;
    color: #011a2d;
    margin: 0 0 1rem 0;
    background: linear-gradient(135deg, #011a2d, #2c4a6b, #5b778e);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }
  
  .hero-subtitle {
    font-size: 1.5rem;
    color: #011a2d;
    margin: 0 0 1rem 0;
    font-weight: 600;
  }
  
  .hero-description {
    font-size: 1rem;
    color: #2c4a6b;
    margin: 0;
    font-weight: 300;
    line-height: 1.6;
  }
  
  @media (max-width: 768px) {
    .hero-title {
      font-size: 2.25rem;
    }
    
    .hero-subtitle {
      font-size: 1.1rem;
    }
    
    .main-content {
      padding-top: 5rem;
    }
  }
</style>