feat: add lottie and logo

west2-online · Jun 24, 2024 · 77280de · 77280de
1 parent 747e022
commit 77280de
Show file tree

Hide file tree

Showing 5 changed files with 62 additions and 6 deletions.
diff --git a/package.json b/package.json
@@ -30,6 +30,7 @@
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "react-lazyload": "^3.2.1",
+    "react-lottie": "^1.2.4",
     "shadcn-ui": "^0.8.0",
     "tailwind-merge": "^2.3.0",
     "tailwindcss": "^3.4.3",

diff --git a/src/pages/index.module.css b/src/pages/index.module.css
@@ -25,6 +25,14 @@
   margin-bottom: 26px;
 }
 
+.heroLogo {
+  animation-duration: 2s;
+  animation-name: b;
+  float: right;
+  height: auto;
+  margin-top: 20px;
+}
+
 /* @keyframes jack-in-the-box {
   0% {
     opacity: 0;
@@ -96,4 +104,4 @@
   .indexCtasGitHubButton {
     display: none;
   }
-}
+}
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -4,15 +4,30 @@ import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import Layout from '@theme/Layout';
 import HomepageFeatures from '@site/src/components/HomepageFeatures';
 import Heading from '@theme/Heading';
+import Lottie from 'react-lottie'
+import logoData from '@site/static/lottie/logo.json'
 
 import styles from './index.module.css';
 
 function HomepageHeader() {
-  const {siteConfig} = useDocusaurusContext();
   return (
     <div className={styles.hero} data-theme="dark">
       <div className={styles.heroInner}>
         <Heading as="h1" className={styles.heroProjectTagline}>
+          <div className={clsx(styles.heroLogo, 'w-[200px]', 'aspect-square', 'bg-white')}>
+            <Lottie
+              options={{
+                loop: false,
+                autoplay: true,
+                animationData: logoData,
+                rendererSettings: {
+                  preserveAspectRatio: 'xMidYMid slice'
+                }
+              }}
+              height={200}
+              width={200}
+            />
+          </div>
           <span
             className={styles.heroTitleTextHtml}
             // eslint-disable-next-line react/no-danger
@@ -22,7 +37,7 @@ function HomepageHeader() {
           />
         </Heading>
         <Heading as="h2" className='text-white'>
-            西二在线成立于 1998 年，是福州大学最大的学生组织
+          西二在线成立于 1998 年，是福州大学最大的学生组织
         </Heading>
         <div className={styles.indexCtas}>
           <Link className="button button--primary" to="/docs/intro">