Initial commit

src/pages/404.astro

@@ -0,0 +1,74 @@
+---
+import { Icon } from "astro-icon/components";
+
+import I18nKey from "@i18n/i18nKey";
+import { i18n } from "@i18n/translation";
+import GridLayout from "@layouts/grid.astro";
+---
+
+<GridLayout title={i18n(I18nKey.notFound)} description={i18n(I18nKey.notFoundDescription)}>
+    <div class="flex w-full rounded-(--radius-large) overflow-hidden relative min-h-96">
+        <div class="card-base z-10 px-9 py-12 relative w-full flex flex-col items-center justify-center text-center">
+            <!-- 404 大号数字 -->
+            <div class="text-8xl md:text-9xl font-bold text-(--primary) opacity-20 mb-4">
+                {i18n(I18nKey.notFound)}
+            </div>
+
+            <!-- 404 图标 -->
+            <div class="mb-6">
+                <Icon name="material-symbols:error-outline" class="text-6xl text-(--primary)" />
+            </div>
+
+            <!-- 标题 -->
+            <h1 class="text-3xl md:text-4xl font-bold mb-4 text-90">
+                {i18n(I18nKey.notFoundTitle)}
+            </h1>
+
+            <!-- 描述 -->
+            <p class="text-lg text-75 mb-8 max-w-md">
+                {i18n(I18nKey.notFoundDescription)}
+            </p>
+
+            <!-- 返回首页按钮 -->
+            <a
+                href="/"
+                class="inline-flex items-center gap-2 px-6 py-3 bg-(--primary) text-white rounded-(--radius-large) hover:bg-(--primary-dark) transition-colors duration-300 font-medium"
+            >
+                <Icon name="material-symbols:home" class="text-xl" />
+                {i18n(I18nKey.backToHome)}
+            </a>
+
+            <!-- 装饰性元素 -->
+            <div class="absolute top-4 left-4 opacity-10">
+                <Icon name="material-symbols:sentiment-sad" class="text-4xl text-(--primary)" />
+            </div>
+            <div class="absolute bottom-4 right-4 opacity-10">
+                <Icon name="material-symbols:search-off" class="text-4xl text-(--primary)" />
+            </div>
+        </div>
+    </div>
+</GridLayout>
+
+<style>
+    /* 添加一些动画效果 */
+    .card-base {
+        animation: fadeInUp 0.6s ease-out;
+    }
+
+    @keyframes fadeInUp {
+        from {
+            opacity: 0;
+            translate: 0 30px;
+        }
+        to {
+            opacity: 1;
+            translate: 0 0;
+        }
+    }
+
+    /* 按钮悬停效果 */
+    a:hover {
+        translate: 0 -2px;
+        box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.3);
+    }
+</style>