initial commit

src/pages/index.astro

@@ -0,0 +1,169 @@
+---
+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}>
+              <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>
+    
+    <NavigationGrid 
+      title="技术服务"
+      description="整合多种自建服务，提供便捷的技术解决方案"
+      columns={3}
+      gap="large"
+    >
+      <NavigationCard
+        title="AList 网盘"
+        description="整合多平台云存储的统一管理工具，方便快捷地访问您的各种网盘和存储服务。"
+        href="http://jiao77.cn:52443"
+        icon="fas fa-cloud"
+        color="primary"
+        size="large"
+      />
+      
+      <NavigationCard
+        title="Q-Nas"
+        description="基于飞牛系统的nas服务。"
+        href="http://jiao77.cn:5666"
+        icon="fas fa-server"
+        color="secondary"
+        size="large"
+      />
+      
+      <NavigationCard
+        title="nuc-Nas"
+        description="另外一个飞牛nas。"
+        href="http://jiao77.cn:56661"
+        icon="fas fa-database"
+        color="accent"
+        size="large"
+      />
+      
+      <NavigationCard
+        title="RAGflow 知识库"
+        description="基于检索增强生成的知识管理系统，快速获取和整理专业领域知识。"
+        href="http://jiao77.cn:28081"
+        icon="fas fa-robot"
+        color="primary"
+        size="medium"
+      />
+      
+      <NavigationCard
+        title="Open WebUI"
+        description="强大的AI交互界面，提供直观的模型管理和交互体验。"
+        href="http://jiao77.cn:38080"
+        icon="fas fa-brain"
+        color="secondary"
+        size="medium"
+      />
+      
+      <NavigationCard
+        title="Navidrome 音乐"
+        description="您自己的个人音乐服务器，随时随地享受您的音乐收藏。"
+        href="http://jiao77.cn:45332"
+        icon="fas fa-music"
+        color="primary"
+        size="medium"
+      />
+      
+      <NavigationCard
+        title="Gitea"
+        description="轻量级的代码托管解决方案，用于版本控制和协作开发。"
+        href="http://jiao77.cn:3012"
+        icon="fas fa-code-branch"
+        color="secondary"
+        size="medium"
+      />
+      
+      <NavigationCard
+        title="技术报告"
+        description="这是一个我做过的技术报告的导航。"
+        href="http://jiao77.cn/report"
+        icon="fas fa-file-alt"
+        color="accent"
+        size="medium"
+      />
+    </NavigationGrid>
+  </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>