From e39a79ab0eeb675c00e1a644a8aa90698f209e4a Mon Sep 17 00:00:00 2001
From: Wisdom <pdsu.wwz@foxmail.com>
Date: Fri, 16 Aug 2024 18:50:45 +0800
Subject: [PATCH] =?UTF-8?q?=E2=98=98=EF=B8=8F=20feat:=20support=20marquee?=
 =?UTF-8?q?=20tech=20stack?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                          |  1 +
 pnpm-lock.yaml                        | 14 ++++++++
 src/components/HomepageHero/index.tsx | 50 ++++++++++++++++++++++-----
 3 files changed, 57 insertions(+), 8 deletions(-)

diff --git a/package.json b/package.json
index c8a860c..0b7f7b8 100644
--- a/package.json
+++ b/package.json
@@ -35,6 +35,7 @@
     "qss": "^3.0.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-fast-marquee": "^1.6.5",
     "tailwind-merge": "^2.4.0",
     "tailwindcss-animate": "^1.0.7"
   },
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index c74508b..7732ac1 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -50,6 +50,9 @@ importers:
       react-dom:
         specifier: ^18.3.1
         version: 18.3.1(react@18.3.1)
+      react-fast-marquee:
+        specifier: ^1.6.5
+        version: 1.6.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       tailwind-merge:
         specifier: ^2.4.0
         version: 2.4.0
@@ -3322,6 +3325,12 @@ packages:
     peerDependencies:
       react: ^18.3.1
 
+  react-fast-marquee@1.6.5:
+    resolution: {integrity: sha512-swDnPqrT2XISAih0o74zQVE2wQJFMvkx+9VZXYYNSLb/CUcAzU9pNj637Ar2+hyRw6b4tP6xh4GQZip2ZCpQpg==}
+    peerDependencies:
+      react: '>= 16.8.0 || ^18.0.0'
+      react-dom: '>= 16.8.0 || ^18.0.0'
+
   react-is@16.13.1:
     resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
 
@@ -8103,6 +8112,11 @@ snapshots:
       react: 18.3.1
       scheduler: 0.23.2
 
+  react-fast-marquee@1.6.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+    dependencies:
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+
   react-is@16.13.1: {}
 
   react@18.3.1:
diff --git a/src/components/HomepageHero/index.tsx b/src/components/HomepageHero/index.tsx
index fff96b6..57d57e3 100644
--- a/src/components/HomepageHero/index.tsx
+++ b/src/components/HomepageHero/index.tsx
@@ -1,6 +1,25 @@
+import Marquee from 'react-fast-marquee'
 import { SetupHero } from './Setup'
 import { Section } from './Section'
 import { HoverEffect } from '@/components/ui/card-hover-effect'
+import { cn } from '@/lib/utils'
+
+export const StackItem = ({
+  className,
+}: {
+  className: string
+},
+) => {
+  return (
+    <div className={cn(
+      'mx-6 size-[50px]',
+      'text-neutral-800 dark:text-neutral-100',
+      className,
+    )}
+    >
+    </div>
+  )
+}
 
 export default function HomepageHero() {
   const featureList = [
@@ -49,19 +68,34 @@ export default function HomepageHero() {
       </div> */}
       <div className="pt-[20px] pb-[100px]">
         <Section
-          title="Features"
-          description="Provides a starter for Next.js with Nextra, featuring Tailwind CSS, Framer Motion, and Radix UI components."
+          title="Tech Stack"
         >
-          <div className="flex justify-center w-full max-w-7xl">
-            <HoverEffect items={featureList} />
+          <div className="flex justify-center w-full max-w-7xl py-[50px]">
+            <Marquee
+              pauseOnHover
+              autoFill
+              speed={60}
+            >
+              <StackItem className="icon-[akar-icons--nextjs-fill]" />
+              <StackItem className="icon-[simple-icons--react]" />
+              <StackItem className="icon-[simple-icons--tailwindcss]" />
+              <StackItem className="icon-[teenyicons--framer-outline]" />
+              <StackItem className="icon-[simple-icons--shadcnui]" />
+              <StackItem className="icon-[simple-icons--typescript]" />
+              <StackItem className="icon-[fa6-brands--sass]" />
+              <StackItem className="icon-[teenyicons--eslint-outline]" />
+              <StackItem className="icon-[simple-icons--postcss]" />
+              <StackItem className="icon-[simple-icons--nextra]" />
+              <StackItem className="icon-[line-md--iconify1]" />
+            </Marquee>
           </div>
         </Section>
         <Section
-          title="Tech Stack"
-          description="Uses Next.js, React, Tailwind CSS, TypeScript, and ESLint for development."
+          title="Features"
+          description="Provides a starter for Next.js with Nextra, featuring Tailwind CSS, Framer Motion, and Shadcn UI components."
         >
-          <div className="flex justify-center w-full border border-primary max-w-5xl py-[100px]">
-            🚧 待完善
+          <div className="flex justify-center w-full max-w-7xl">
+            <HoverEffect items={featureList} />
           </div>
         </Section>
       </div>