feat: Update dependencies and refactor homepage components (#15)

* feat: Update dependencies and refactor homepage components

* feat:Update favicon.ico for better branding

* fix:Remove unused dependencies and clean up pnpm-lock.yaml

* feat: Enhance Hero component with image carousel and update dependencies

* fix: Update GitHub Action doc link for Shiroi Docker

---------

Signed-off-by: PaloMiku <[email protected]>

Author: PaloMiku

app/components/home/Hero.tsx

@@ -1,62 +1,80 @@
+"use client"
+
 import Link from 'next/link';
 import Image from 'next/image';
-import Img from './img.png';
-import { cn } from '@/utils/cn';
-import { buttonVariants } from '@/app/components/ui/button';
+import { useState } from 'react';
+const images = [  
+  '/assets/images/preview/shiro.png', 
+  '/assets/images/preview/kami.png',
+  '/assets/images/preview/console.png'
+];
+const imageNames = ['Shiro主题','Kami主题','控制台'];
+import { cn } from 'utils/cn';
+import { buttonVariants } from 'app/components/ui/button';
 import { LuCirclePlay } from "react-icons/lu";
 import { FaGithub } from "react-icons/fa";
 
 export function Hero() {
-    return (
-      <div className="container relative z-[2] flex flex-col overflow-hidden border-x border-t rounded-t-2xl bg-fd-background px-6 pt-12 max-md:text-center md:px-12 md:pt-16 [.uwu_&]:hidden">
-        <h1 className="mb-8 text-4xl font-medium">
-          Mix Space
-          <br />
-          An Alternative Personal Space.
-        </h1>
-        <p className="mb-8 text-fd-muted-foreground md:max-w-[80%] md:text-xl">
-          Mix Space 是一个小型个人空间站点程序。不同于传统的博客程序，采用前后端分离设计，
-          适合那些喜欢写不同风格或类型的写作爱好者。
-        </p>
-        <div className="inline-flex items-center gap-3 max-md:mx-auto">
-          <Link
-            href="/docs/core"
-            className={cn(
-              buttonVariants({ size: 'lg', className: 'rounded-full' }),
-            )}
-          >
-            <LuCirclePlay className="size-4 mr-2" /> 开始使用
-          </Link>
-          <a
-            href="https://github.com/mx-space"
-            className={cn(
-              buttonVariants({
-                size: 'lg',
-                variant: 'outline',
-                className: 'rounded-full bg-fd-background flex items-center',
-              }),
-            )}
-          >
-            <FaGithub className="size-4 mr-2" /> Github
-          </a>
+  const [currentImage, setCurrentImage] = useState(0); 
+  return (
+    <div className="container relative z-[2] flex flex-col overflow-hidden rounded-lg bg-background px-6 pt-12 max-md:text-center md:px-12 md:pt-16">
+      <h1 className="mb-8 text-4xl font-medium">
+        Mix Space
+        <br />
+        An Alternative Personal Space.
+      </h1>
+      <p className="mb-8 text-muted-foreground md:max-w-[80%] md:text-xl">
+        Mix Space 是一个小型个人空间站点程序。不同于传统的博客程序，采用前后端分离设计，
+        适合那些喜欢写不同风格或类型的写作爱好者。
+      </p>
+      <div className="inline-flex items-center gap-3 max-md:mx-auto">
+        <Link
+          href="/docs/core"
+          className={cn(
+            buttonVariants({ size: 'lg', className: 'rounded-full' }),
+          )}
+        >
+          <LuCirclePlay className="size-4 mr-2" /> 开始使用
+        </Link>
+        <a
+          href="https://github.com/mx-space"
+          className={cn(
+            buttonVariants({
+              size: 'lg',
+              variant: 'outline',
+              className: 'rounded-full bg-background flex items-center',
+            }),
+          )}
+        >
+          <FaGithub className="size-4 mr-2" /> Github
+        </a>
+      </div>
+      <div className="relative mt-8">
+        <div className="flex justify-center gap-2 mb-4">
+          {images.map((_, index) => (
+            <button
+              key={index}
+              onClick={() => setCurrentImage(index)}
+              className={`px-3 py-1 text-sm rounded-full transition-colors ${
+                index === currentImage
+                  ? 'bg-primary text-white'
+                  : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
+              }`}
+            >
+              {imageNames[index]}
+            </button>
+          ))}
         </div>
         <Image
-          src={Img}
+          src={images[currentImage]}
           alt="preview"
-          className="mb-[-100px] mt-8 min-w-[800px] select-none duration-1000 animate-in fade-in slide-in-from-bottom-12 md:mb-[-170px] md:min-w-[1100px]"
+          width={1200}
+          height={675}
+          className="w-full max-w-[1200px] select-none duration-1000 animate-in fade-in slide-in-from-bottom-12"
           priority
         />
-        <div
-          className="absolute inset-0 z-[-1]"
-          style={{
-            backgroundImage: [
-              'radial-gradient(ellipse at top, transparent 60%, hsla(250,90%,90%,0.2))',
-              'linear-gradient(to bottom, transparent 30%, hsl(var(--primary) / 0.2))',
-              'linear-gradient(to bottom, hsl(var(--background)) 40%, transparent)',
-              'repeating-linear-gradient(45deg, transparent,transparent 60px, hsl(var(--primary)) 61px, transparent 62px)',
-            ].join(', '),
-          }}
-        />
       </div>
-    );
-  }
+      <div className="absolute inset-0 z-[-1] bg-gradient-to-b from-background/50 to-background" />
+    </div>
+  );
+}

content/docs/themes/community.mdx

@@ -11,7 +11,7 @@ import { FileText } from 'lucide-react'
 <Cards>
 <Card
   title="GitHub Action构建Shiroi Docker镜像"
-  href="https://blog.sotkg.com/2024/10/https-www-sotkg-com-posts-site-shiroi-docker-deployment.html"
+  href="https://blog.sotkg.com/posts/site/shiroi-docker-deployment"
   icon={<FileText />}
   target="_blank"
 >前端部署方式拓展博文教程 | By Mikuの鬆 </Card>

package.json

@@ -22,7 +22,7 @@
     "copy-to-clipboard": "^3.3.3",
     "cz-conventional-changelog": "^3.3.0",
     "dotenv": "^16.4.7",
-    "framer-motion": "^11.16.2",
+    "framer-motion": "^11.16.4",
     "fumadocs-core": "14.6.4",
     "fumadocs-mdx": "11.2.1",
     "fumadocs-typescript": "^3.0.2",