feat: init index page

2026-02-23 11:35:17 +08:00 · 2025-06-17 21:30:50 +08:00
parent 2e989e5e9b
commit 0acec95317
13 changed files with 903 additions and 132 deletions
--- a/.npmrc
+++ b/.npmrc
@@ -1 +0,0 @@
-enable-pre-post-scripts=true
--- a/next.config.js
+++ b/next.config.js
@@ -8,14 +8,14 @@ const nextConfig = {
  swcMinify: true,

  // Uncoment to add domain whitelist
-  // images: {
-  //   remotePatterns: [
-  //     {
-  //       protocol: 'https',
-  //       hostname: 'res.cloudinary.com',
-  //     },
-  //   ]
-  // },
+  images: {
+    remotePatterns: [
+      {
+        protocol: 'https',
+        hostname: 'vip.dytt-img.com',
+      },
+    ],
+  },

  webpack(config) {
    // Grab the existing rule that handles SVG imports
--- a/package.json
+++ b/package.json
@@ -18,12 +18,16 @@
    "prepare": "husky install"
  },
  "dependencies": {
+    "@headlessui/react": "^2.2.4",
+    "@heroicons/react": "^2.2.0",
    "clsx": "^2.0.0",
+    "framer-motion": "^12.18.1",
    "lucide-react": "^0.438.0",
    "next": "^14.2.23",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-icons": "^5.4.0",
+    "swiper": "^11.2.8",
    "tailwind-merge": "^2.6.0",
    "zod": "^3.24.1"
  },
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -8,9 +8,18 @@ importers:

  .:
    dependencies:
+      '@headlessui/react':
+        specifier: ^2.2.4
+        version: 2.2.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@heroicons/react':
+        specifier: ^2.2.0
+        version: 2.2.0(react@18.3.1)
      clsx:
        specifier: ^2.0.0
        version: 2.1.1
+      framer-motion:
+        specifier: ^12.18.1
+        version: 12.18.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
      lucide-react:
        specifier: ^0.438.0
        version: 0.438.0(react@18.3.1)
@@ -26,6 +35,9 @@ importers:
      react-icons:
        specifier: ^5.4.0
        version: 5.5.0(react@18.3.1)
+      swiper:
+        specifier: ^11.2.8
+        version: 11.2.8
      tailwind-merge:
        specifier: ^2.6.0
        version: 2.6.0
@@ -849,6 +861,39 @@ packages:
    resolution: {integrity: sha512-d9zaMRSTIKDLhctzH12MtXvJKSSUhaHcjV+2Z+GK+EEY7XKpP5yR4x+N3TAcHTcu963nIr+TMcCb4DBCYX1z6Q==}
    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}

+  '@floating-ui/core@1.7.1':
+    resolution: {integrity: sha512-azI0DrjMMfIug/ExbBaeDVJXcY0a7EPvPjb2xAJPa4HeimBX+Z18HK8QQR3jb6356SnDDdxx+hinMLcJEDdOjw==}
+
+  '@floating-ui/dom@1.7.1':
+    resolution: {integrity: sha512-cwsmW/zyw5ltYTUeeYJ60CnQuPqmGwuGVhG9w0PRaRKkAyi38BT5CKrpIbb+jtahSwUl04cWzSx9ZOIxeS6RsQ==}
+
+  '@floating-ui/react-dom@2.1.3':
+    resolution: {integrity: sha512-huMBfiU9UnQ2oBwIhgzyIiSpVgvlDstU8CX0AF+wS+KzmYMs0J2a3GwuFHV1Lz+jlrQGeC1fF+Nv0QoumyV0bA==}
+    peerDependencies:
+      react: '>=16.8.0'
+      react-dom: '>=16.8.0'
+
+  '@floating-ui/react@0.26.28':
+    resolution: {integrity: sha512-yORQuuAtVpiRjpMhdc0wJj06b9JFjrYF4qp96j++v2NBpbi6SEGF7donUJ3TMieerQ6qVkAv1tgr7L4r5roTqw==}
+    peerDependencies:
+      react: '>=16.8.0'
+      react-dom: '>=16.8.0'
+
+  '@floating-ui/utils@0.2.9':
+    resolution: {integrity: sha512-MDWhGtE+eHw5JW7lq4qhc5yRLS11ERl1c7Z6Xd0a58DozHES6EnNNwUWbMiG4J9Cgj053Bhk8zvlhFYKVhULwg==}
+
+  '@headlessui/react@2.2.4':
+    resolution: {integrity: sha512-lz+OGcAH1dK93rgSMzXmm1qKOJkBUqZf1L4M8TWLNplftQD3IkoEDdUFNfAn4ylsN6WOTVtWaLmvmaHOUk1dTA==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      react: ^18 || ^19 || ^19.0.0-rc
+      react-dom: ^18 || ^19 || ^19.0.0-rc
+
+  '@heroicons/react@2.2.0':
+    resolution: {integrity: sha512-LMcepvRaS9LYHJGsF0zzmgKCUim/X3N/DQKc4jepAXJ7l8QxJ1PmxJzqplF2Z3FE4PqBAIGyJAQ/w4B5dsqbtQ==}
+    peerDependencies:
+      react: '>= 16 || ^19.0.0-rc'
+
  '@humanwhocodes/config-array@0.13.0':
    resolution: {integrity: sha512-DZLEEqFWQFiyK6h5YIeynKx7JlvCYWL0cImfSRXZ9l4Sg2efkFGTuFf6vzXjK1cq6IYkU+Eg/JizXw+TD2vRNw==}
    engines: {node: '>=10.10.0'}
@@ -1056,6 +1101,43 @@ packages:
    resolution: {integrity: sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==}
    engines: {node: '>=14'}

+  '@react-aria/focus@3.20.5':
+    resolution: {integrity: sha512-JpFtXmWQ0Oca7FcvkqgjSyo6xEP7v3oQOLUId6o0xTvm4AD5W0mU2r3lYrbhsJ+XxdUUX4AVR5473sZZ85kU4A==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+      react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+
+  '@react-aria/interactions@3.25.3':
+    resolution: {integrity: sha512-J1bhlrNtjPS/fe5uJQ+0c7/jiXniwa4RQlP+Emjfc/iuqpW2RhbF9ou5vROcLzWIyaW8tVMZ468J68rAs/aZ5A==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+      react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+
+  '@react-aria/ssr@3.9.9':
+    resolution: {integrity: sha512-2P5thfjfPy/np18e5wD4WPt8ydNXhij1jwA8oehxZTFqlgVMGXzcWKxTb4RtJrLFsqPO7RUQTiY8QJk0M4Vy2g==}
+    engines: {node: '>= 12'}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+
+  '@react-aria/utils@3.29.1':
+    resolution: {integrity: sha512-yXMFVJ73rbQ/yYE/49n5Uidjw7kh192WNN9PNQGV0Xoc7EJUlSOxqhnpHmYTyO0EotJ8fdM1fMH8durHjUSI8g==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+      react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+
+  '@react-stately/flags@3.1.2':
+    resolution: {integrity: sha512-2HjFcZx1MyQXoPqcBGALwWWmgFVUk2TuKVIQxCbRq7fPyWXIl6VHcakCLurdtYC2Iks7zizvz0Idv48MQ38DWg==}
+
+  '@react-stately/utils@3.10.7':
+    resolution: {integrity: sha512-cWvjGAocvy4abO9zbr6PW6taHgF24Mwy/LbQ4TC4Aq3tKdKDntxyD+sh7AkSRfJRT2ccMVaHVv2+FfHThd3PKQ==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+
+  '@react-types/shared@3.30.0':
+    resolution: {integrity: sha512-COIazDAx1ncDg046cTJ8SFYsX8aS3lB/08LDnbkH/SkdYrFPWDlXMrO/sUam8j1WWM+PJ+4d1mj7tODIKNiFog==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+
  '@rtsao/scc@1.1.0':
    resolution: {integrity: sha512-zt6OdqaDoOnJ1ZYsCYGt9YmWzDXl4vQdKTyJev62gFhRGKdx7mcT54V9KIjg+d2wi9EXsPvAPKe7i7WjfVWB8g==}

@@ -1160,6 +1242,15 @@ packages:
    peerDependencies:
      tailwindcss: '>=3.0.0 || >= 3.0.0-alpha.1 || >= 4.0.0-alpha.20 || >= 4.0.0-beta.1'

+  '@tanstack/react-virtual@3.13.10':
+    resolution: {integrity: sha512-nvrzk4E9mWB4124YdJ7/yzwou7IfHxlSef6ugCFcBfRmsnsma3heciiiV97sBNxyc3VuwtZvmwXd0aB5BpucVw==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+
+  '@tanstack/virtual-core@3.13.10':
+    resolution: {integrity: sha512-sPEDhXREou5HyZYqSWIqdU580rsF6FGeN7vpzijmP3KTiOGjOMZASz4Y6+QKjiFQwhWrR58OP8izYaNGVxvViA==}
+
  '@testing-library/dom@10.4.0':
    resolution: {integrity: sha512-pemlzrSESWbdAloYml3bAJMEfNh1Z7EduzqPKprCH5S341frlpYnUEW0H72dLxa6IsYr+mPno20GiSm+h9dEdQ==}
    engines: {node: '>=18'}
@@ -2346,6 +2437,20 @@ packages:
  fraction.js@4.3.7:
    resolution: {integrity: sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==}

+  framer-motion@12.18.1:
+    resolution: {integrity: sha512-6o4EDuRPLk4LSZ1kRnnEOurbQ86MklVk+Y1rFBUKiF+d2pCdvMjWVu0ZkyMVCTwl5UyTH2n/zJEJx+jvTYuxow==}
+    peerDependencies:
+      '@emotion/is-prop-valid': '*'
+      react: ^18.0.0 || ^19.0.0
+      react-dom: ^18.0.0 || ^19.0.0
+    peerDependenciesMeta:
+      '@emotion/is-prop-valid':
+        optional: true
+      react:
+        optional: true
+      react-dom:
+        optional: true
+
  fs-extra@10.1.0:
    resolution: {integrity: sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ==}
    engines: {node: '>=12'}
@@ -3148,6 +3253,12 @@ packages:
    resolution: {integrity: sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==}
    engines: {node: '>=16 || 14 >=14.17'}

+  motion-dom@12.18.1:
+    resolution: {integrity: sha512-dR/4EYT23Snd+eUSLrde63Ws3oXQtJNw/krgautvTfwrN/2cHfCZMdu6CeTxVfRRWREW3Fy1f5vobRDiBb/q+w==}
+
+  motion-utils@12.18.1:
+    resolution: {integrity: sha512-az26YDU4WoDP0ueAkUtABLk2BIxe28d8NH1qWT8jPGhPyf44XTdDUh8pDk9OPphaSrR9McgpcJlgwSOIw/sfkA==}
+
  ms@2.1.3:
    resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}

@@ -3930,9 +4041,16 @@ packages:
    engines: {node: '>=14.0.0'}
    hasBin: true

+  swiper@11.2.8:
+    resolution: {integrity: sha512-S5FVf6zWynPWooi7pJ7lZhSUe2snTzqLuUzbd5h5PHUOhzgvW0bLKBd2wv0ixn6/5o9vwc/IkQT74CRcLJQzeg==}
+    engines: {node: '>= 4.7.0'}
+
  symbol-tree@3.2.4:
    resolution: {integrity: sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==}

+  tabbable@6.2.0:
+    resolution: {integrity: sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==}
+
  tailwind-merge@2.6.0:
    resolution: {integrity: sha512-P+Vu1qXfzediirmHOC3xKGAYeZtPcV9g76X+xg2FD4tYgR71ewMA35Y3sCz3zhiN/dwefRpJX0yBcgwi1fXNQA==}

@@ -4125,6 +4243,11 @@ packages:
  url-parse@1.5.10:
    resolution: {integrity: sha512-WypcfiRhfeUP9vvF0j6rw0J3hrWrw6iZv3+22h6iRMJ/8z1Tj6XfLP4DsUix5MhMPnXpiHDoKyoZ/bdCkwBCiQ==}

+  use-sync-external-store@1.5.0:
+    resolution: {integrity: sha512-Rb46I4cGGVBmjamjphe8L/UnvJD+uPPtTkNvX5mZgqdbavhI4EbgIWJiIHXJ8bc/i9EQGPRh4DwEURJ552Do0A==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+
  util-deprecate@1.0.2:
    resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}

@@ -5224,6 +5347,45 @@ snapshots:

  '@eslint/js@8.57.1': {}

+  '@floating-ui/core@1.7.1':
+    dependencies:
+      '@floating-ui/utils': 0.2.9
+
+  '@floating-ui/dom@1.7.1':
+    dependencies:
+      '@floating-ui/core': 1.7.1
+      '@floating-ui/utils': 0.2.9
+
+  '@floating-ui/react-dom@2.1.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@floating-ui/dom': 1.7.1
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+
+  '@floating-ui/react@0.26.28(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@floating-ui/react-dom': 2.1.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@floating-ui/utils': 0.2.9
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+      tabbable: 6.2.0
+
+  '@floating-ui/utils@0.2.9': {}
+
+  '@headlessui/react@2.2.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@floating-ui/react': 0.26.28(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@react-aria/focus': 3.20.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@react-aria/interactions': 3.25.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@tanstack/react-virtual': 3.13.10(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+      use-sync-external-store: 1.5.0(react@18.3.1)
+
+  '@heroicons/react@2.2.0(react@18.3.1)':
+    dependencies:
+      react: 18.3.1
+
  '@humanwhocodes/config-array@0.13.0':
    dependencies:
      '@humanwhocodes/object-schema': 2.0.3
@@ -5509,6 +5671,55 @@ snapshots:
  '@pkgjs/parseargs@0.11.0':
    optional: true

+  '@react-aria/focus@3.20.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@react-aria/interactions': 3.25.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@react-aria/utils': 3.29.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@react-types/shared': 3.30.0(react@18.3.1)
+      '@swc/helpers': 0.5.5
+      clsx: 2.1.1
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+
+  '@react-aria/interactions@3.25.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@react-aria/ssr': 3.9.9(react@18.3.1)
+      '@react-aria/utils': 3.29.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@react-stately/flags': 3.1.2
+      '@react-types/shared': 3.30.0(react@18.3.1)
+      '@swc/helpers': 0.5.5
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+
+  '@react-aria/ssr@3.9.9(react@18.3.1)':
+    dependencies:
+      '@swc/helpers': 0.5.5
+      react: 18.3.1
+
+  '@react-aria/utils@3.29.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@react-aria/ssr': 3.9.9(react@18.3.1)
+      '@react-stately/flags': 3.1.2
+      '@react-stately/utils': 3.10.7(react@18.3.1)
+      '@react-types/shared': 3.30.0(react@18.3.1)
+      '@swc/helpers': 0.5.5
+      clsx: 2.1.1
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+
+  '@react-stately/flags@3.1.2':
+    dependencies:
+      '@swc/helpers': 0.5.5
+
+  '@react-stately/utils@3.10.7(react@18.3.1)':
+    dependencies:
+      '@swc/helpers': 0.5.5
+      react: 18.3.1
+
+  '@react-types/shared@3.30.0(react@18.3.1)':
+    dependencies:
+      react: 18.3.1
+
  '@rtsao/scc@1.1.0': {}

  '@rushstack/eslint-patch@1.11.0': {}
@@ -5628,6 +5839,14 @@ snapshots:
      mini-svg-data-uri: 1.4.4
      tailwindcss: 3.4.17(ts-node@10.9.2(@types/node@24.0.3)(typescript@4.9.5))

+  '@tanstack/react-virtual@3.13.10(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@tanstack/virtual-core': 3.13.10
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+
+  '@tanstack/virtual-core@3.13.10': {}
+
  '@testing-library/dom@10.4.0':
    dependencies:
      '@babel/code-frame': 7.27.1
@@ -7018,6 +7237,15 @@ snapshots:

  fraction.js@4.3.7: {}

+  framer-motion@12.18.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+    dependencies:
+      motion-dom: 12.18.1
+      motion-utils: 12.18.1
+      tslib: 2.8.1
+    optionalDependencies:
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+
  fs-extra@10.1.0:
    dependencies:
      graceful-fs: 4.2.11
@@ -8092,6 +8320,12 @@ snapshots:

  minipass@7.1.2: {}

+  motion-dom@12.18.1:
+    dependencies:
+      motion-utils: 12.18.1
+
+  motion-utils@12.18.1: {}
+
  ms@2.1.3: {}

  mz@2.7.0:
@@ -8863,8 +9097,12 @@ snapshots:
      csso: 5.0.5
      picocolors: 1.1.1

+  swiper@11.2.8: {}
+
  symbol-tree@3.2.4: {}

+  tabbable@6.2.0: {}
+
  tailwind-merge@2.6.0: {}

  tailwindcss@3.4.17(ts-node@10.9.2(@types/node@24.0.3)(typescript@4.9.5)):
@@ -9103,6 +9341,10 @@ snapshots:
      querystringify: 2.2.0
      requires-port: 1.0.0

+  use-sync-external-store@1.5.0(react@18.3.1):
+    dependencies:
+      react: 18.3.1
+
  util-deprecate@1.0.2: {}

  v8-compile-cache-lib@3.0.1: {}
--- a/src/app/components/page.tsx
+++ b/src/app/components/page.tsx
@@ -9,7 +9,7 @@ import {
  Plus,
  Shield,
 } from 'lucide-react';
-import React from 'react';
+import * as React from 'react';

 import Button from '@/components/buttons/Button';
 import IconButton from '@/components/buttons/IconButton';
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -0,0 +1,59 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  --foreground-rgb: 255, 255, 255;
+}
+
+body {
+  color: rgb(var(--foreground-rgb));
+  background: linear-gradient(
+    180deg,
+    #e6f3fb 0%,
+    #eaf3f7 18%,
+    #f7f7f3 38%,
+    #e9ecef 60%,
+    #dbe3ea 80%,
+    #d3dde6 100%
+  );
+  background-attachment: fixed;
+  min-height: 100vh;
+}
+
+/* 自定义滚动条样式 */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: rgba(31, 41, 55, 0.1);
+}
+
+::-webkit-scrollbar-thumb {
+  background: rgba(75, 85, 99, 0.3);
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: rgba(107, 114, 128, 0.5);
+}
+
+/* 视频卡片悬停效果 */
+.video-card-hover {
+  transition: transform 0.3s ease;
+}
+
+.video-card-hover:hover {
+  transform: scale(1.05);
+}
+
+/* 渐变遮罩 */
+.gradient-overlay {
+  background: linear-gradient(
+    to bottom,
+    rgba(0, 0, 0, 0) 0%,
+    rgba(0, 0, 0, 0.8) 100%
+  );
+}
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,52 +1,13 @@
-import { Metadata } from 'next';
-import * as React from 'react';
+import type { Metadata } from 'next';
+import { Inter } from 'next/font/google';

-import '@/styles/globals.css';
-// !STARTERCONF This is for demo purposes, remove @/styles/colors.css import immediately
-import '@/styles/colors.css';
+import './globals.css';

-import { siteConfig } from '@/constant/config';
+const inter = Inter({ subsets: ['latin'] });

-// !STARTERCONF Change these default meta
-// !STARTERCONF Look at @/constant/config to change them
 export const metadata: Metadata = {
-  metadataBase: new URL(siteConfig.url),
-  title: {
-    default: siteConfig.title,
-    template: `%s | ${siteConfig.title}`,
-  },
-  description: siteConfig.description,
-  robots: { index: true, follow: true },
-  // !STARTERCONF this is the default favicon, you can generate your own from https://realfavicongenerator.net/
-  // ! copy to /favicon folder
-  icons: {
-    icon: '/favicon/favicon.ico',
-    shortcut: '/favicon/favicon-16x16.png',
-    apple: '/favicon/apple-touch-icon.png',
-  },
-  manifest: `/favicon/site.webmanifest`,
-  openGraph: {
-    url: siteConfig.url,
-    title: siteConfig.title,
-    description: siteConfig.description,
-    siteName: siteConfig.title,
-    images: [`${siteConfig.url}/images/og.jpg`],
-    type: 'website',
-    locale: 'en_US',
-  },
-  twitter: {
-    card: 'summary_large_image',
-    title: siteConfig.title,
-    description: siteConfig.description,
-    images: [`${siteConfig.url}/images/og.jpg`],
-    // creator: '@th_clarence',
-  },
-  // authors: [
-  //   {
-  //     name: 'Theodorus Clarence',
-  //     url: 'https://theodorusclarence.com',
-  //   },
-  // ],
+  title: '聚合视频站',
+  description: '一个聚合多个视频源的现代化视频网站',
 };

 export default function RootLayout({
@@ -55,8 +16,10 @@ export default function RootLayout({
  children: React.ReactNode;
 }) {
  return (
-    <html>
-      <body>{children}</body>
+    <html lang='zh-CN'>
+      <body className={`${inter.className} min-h-screen text-gray-900`}>
+        {children}
+      </body>
    </html>
  );
 }
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,72 +1,130 @@
 'use client';

-import Head from 'next/head';
-import * as React from 'react';
-import '@/lib/env';
+import { useState } from 'react';

-import ArrowLink from '@/components/links/ArrowLink';
-import ButtonLink from '@/components/links/ButtonLink';
-import UnderlineLink from '@/components/links/UnderlineLink';
-import UnstyledLink from '@/components/links/UnstyledLink';
+import CapsuleSwitch from '@/components/CapsuleSwitch';
+import Sidebar from '@/components/layout/Sidebar';
+import SearchCard from '@/components/video/SearchCard';
+import VideoCard from '@/components/video/VideoCard';

-/**
- * SVGR Support
- * Caveat: No React Props Type.
- *
- * You can override the next-env if the type is important to you
- * @see https://stackoverflow.com/questions/68103844/how-to-override-next-js-svg-module-declaration
- */
-import Logo from '~/svg/Logo.svg';
+const defaultPoster =
+  'https://vip.dytt-img.com/upload/vod/20250326-1/9857e2e8581f231e24747ee32e633a3b.jpg';

-// !STARTERCONF -> Select !STARTERCONF and CMD + SHIFT + F
-// Before you begin editing, follow all comments with `STARTERCONF`,
-// to customize the default configuration.
+// 模拟数据
+const mockData = {
+  recentMovies: [
+    {
+      id: 1,
+      title: '流浪地球2',
+      poster: defaultPoster,
+      rating: 8.3,
+      type: 'movie' as const,
+      source: '电影天堂',
+    },
+    {
+      id: 2,
+      title: '满江红',
+      poster: defaultPoster,
+      rating: 7.5,
+      type: 'movie' as const,
+      source: '电影天堂',
+    },
+  ],
+  recentTvShows: [
+    {
+      id: 3,
+      title: '三体',
+      poster: defaultPoster,
+      rating: 8.7,
+      type: 'tv' as const,
+      episodes: 30,
+      source: '电影天堂',
+    },
+    {
+      id: 4,
+      title: '狂飙',
+      poster: defaultPoster,
+      rating: 8.5,
+      type: 'tv' as const,
+      episodes: 39,
+      source: '电影天堂',
+    },
+  ],
+};
+
+export default function Home() {
+  const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
+  const [activeTab, setActiveTab] = useState('home'); // 'home' 或 'favorites'

-export default function HomePage() {
  return (
-    <main>
-      <Head>
-        <title>Hi</title>
-      </Head>
-      <section className='bg-white'>
-        <div className='layout relative flex min-h-screen flex-col items-center justify-center py-12 text-center'>
-          <Logo className='w-16' />
-          <h1 className='mt-4'>Next.js + Tailwind CSS + TypeScript Starter</h1>
-          <p className='mt-2 text-sm text-gray-800'>
-            A starter for Next.js, Tailwind CSS, and TypeScript with Absolute
-            Import, Seo, Link component, pre-configured with Husky{' '}
-          </p>
-          <p className='mt-2 text-sm text-gray-700'>
-            <ArrowLink href='https://github.com/theodorusclarence/ts-nextjs-tailwind-starter'>
-              See the repository
-            </ArrowLink>
-          </p>
+    <div className='flex min-h-screen'>
+      <Sidebar onToggle={setSidebarCollapsed} />

-          <ButtonLink className='mt-6' href='/components' variant='light'>
-            See all components
-          </ButtonLink>
-
-          <UnstyledLink
-            href='https://vercel.com/new/git/external?repository-url=https%3A%2F%2Fgithub.com%2Ftheodorusclarence%2Fts-nextjs-tailwind-starter'
-            className='mt-4'
-          >
-            {/* eslint-disable-next-line @next/next/no-img-element */}
-            <img
-              width='92'
-              height='32'
-              src='https://vercel.com/button'
-              alt='Deploy with Vercel'
-            />
-          </UnstyledLink>
-
-          <footer className='absolute bottom-2 text-gray-700'>
-            © {new Date().getFullYear()} By{' '}
-            <UnderlineLink href='https://theodorusclarence.com?ref=tsnextstarter'>
-              Theodorus Clarence
-            </UnderlineLink>
-          </footer>
+      <main
+        className={`flex-1 px-10 py-8 transition-all duration-300 ${
+          sidebarCollapsed ? 'ml-16' : 'ml-64'
+        }`}
+      >
+        {/* 顶部 Tab 切换 */}
+        <div className='mb-8 flex justify-center'>
+          <CapsuleSwitch
+            options={[
+              { label: '首页', value: 'home' },
+              { label: '收藏夹', value: 'favorites' },
+            ]}
+            active={activeTab}
+            onChange={setActiveTab}
+          />
        </div>
-      </section>
-    </main>
+
+        {/* 继续观看 */}
+        <section className='mb-12'>
+          <h2 className='mb-4 text-xl font-bold text-gray-800 text-left'>
+            继续观看
+          </h2>
+          <div className='flex space-x-8 overflow-x-auto pb-2'>
+            {[...mockData.recentMovies, ...mockData.recentTvShows]
+              .slice(0, 4)
+              .map((item) => (
+                <div key={item.id} className='min-w-[192px] w-48'>
+                  <VideoCard
+                    {...item}
+                    showProgress={true}
+                    progress={Math.random() * 100}
+                  />
+                </div>
+              ))}
+          </div>
+        </section>
+
+        {/* 最新电影 */}
+        <section className='mb-12'>
+          <h2 className='mb-4 text-xl font-bold text-gray-800 text-left'>
+            最新电影
+          </h2>
+          <div className='grid grid-cols-5 gap-8'>
+            {mockData.recentMovies.map((movie) => (
+              <div key={movie.id} className='w-48'>
+                <SearchCard {...movie} />
+              </div>
+            ))}
+          </div>
+        </section>
+
+        {/* 最新电视剧 */}
+        <section className='mb-12'>
+          <h2 className='mb-4 text-xl font-bold text-gray-800 text-left'>
+            最新电视剧
+          </h2>
+          <div className='grid grid-cols-5 gap-8'>
+            {mockData.recentTvShows.map((show) => (
+              <div key={show.id} className='w-48'>
+                <SearchCard {...show} />
+              </div>
+            ))}
+          </div>
+        </section>
+      </main>
+    </div>
  );
 }
--- a/src/components/CapsuleSwitch.tsx
+++ b/src/components/CapsuleSwitch.tsx
@@ -0,0 +1,39 @@
+import React from 'react';
+
+interface CapsuleSwitchProps {
+  options: { label: string; value: string }[];
+  active: string;
+  onChange: (value: string) => void;
+  className?: string;
+}
+
+const CapsuleSwitch: React.FC<CapsuleSwitchProps> = ({
+  options,
+  active,
+  onChange,
+  className,
+}) => {
+  return (
+    <div
+      className={`inline-flex bg-gray-300/80 rounded-full p-1 ${
+        className || ''
+      }`}
+    >
+      {options.map((opt) => (
+        <button
+          key={opt.value}
+          onClick={() => onChange(opt.value)}
+          className={`w-20 px-3 py-2 rounded-full text-sm font-medium transition-all duration-200 ${
+            active === opt.value
+              ? 'bg-white text-gray-900 shadow-sm'
+              : 'text-gray-700 hover:text-gray-900'
+          }`}
+        >
+          {opt.label}
+        </button>
+      ))}
+    </div>
+  );
+};
+
+export default CapsuleSwitch;
--- a/src/components/layout/Sidebar.tsx
+++ b/src/components/layout/Sidebar.tsx
@@ -0,0 +1,145 @@
+import { Film, Folder, Home, Menu, Search, Star, Tv } from 'lucide-react';
+import Link from 'next/link';
+import { useState } from 'react';
+
+// 可替换为你自己的 logo 图片
+const Logo = () => (
+  <div className='flex items-center justify-center h-16 select-none'>
+    <span className='text-2xl font-bold text-green-600 tracking-tight'>
+      LibreTV
+    </span>
+  </div>
+);
+
+interface SidebarProps {
+  onToggle?: (collapsed: boolean) => void;
+}
+
+const Sidebar = ({ onToggle }: SidebarProps) => {
+  const [isCollapsed, setIsCollapsed] = useState(false);
+  const [active, setActive] = useState('/');
+
+  const handleToggle = () => {
+    const newCollapsed = !isCollapsed;
+    setIsCollapsed(newCollapsed);
+    onToggle?.(newCollapsed);
+  };
+
+  const menuItems = [
+    { icon: Tv, label: '电视剧', href: '/tv-shows' },
+    { icon: Film, label: '电影', href: '/movies' },
+    { icon: Star, label: '豆瓣 Top250', href: '/top250' },
+    { icon: Folder, label: '合集', href: '/collections' },
+    { icon: Star, label: '热门电影', href: '/douban/hot-movies' },
+    { icon: Star, label: '热门电视剧', href: '/douban/hot-tv' },
+  ];
+
+  return (
+    <aside
+      className={`fixed left-0 top-0 h-screen bg-white/40 backdrop-blur-xl transition-all duration-300 border-r border-gray-200/50 z-10 shadow-lg ${
+        isCollapsed ? 'w-16' : 'w-64'
+      }`}
+      style={{
+        backgroundColor: 'rgba(255, 255, 255, 0.4)',
+        backdropFilter: 'blur(20px)',
+        WebkitBackdropFilter: 'blur(20px)',
+      }}
+    >
+      <div className='flex h-full flex-col'>
+        {/* 顶部 Logo 区域 */}
+        <div className='relative h-16'>
+          <div
+            className={`absolute inset-0 flex items-center justify-center transition-opacity duration-200 ${
+              isCollapsed ? 'opacity-0' : 'opacity-100'
+            }`}
+          >
+            <Logo />
+          </div>
+          <button
+            onClick={handleToggle}
+            className={`absolute top-1/2 -translate-y-1/2 flex items-center justify-center w-8 h-8 rounded-lg text-gray-500 hover:text-gray-700 hover:bg-gray-100/50 transition-colors duration-200 ${
+              isCollapsed ? 'left-1/2 -translate-x-1/2' : 'right-2'
+            }`}
+          >
+            <Menu className='h-4 w-4' />
+          </button>
+        </div>
+
+        {/* 搜索框 */}
+        <div className='px-2 pb-2 h-12'>
+          <div
+            className={`relative h-full ${
+              isCollapsed ? 'w-full max-w-none mx-0' : 'max-w-[215px] mx-auto'
+            }`}
+          >
+            {isCollapsed ? (
+              <button className='flex items-center justify-center rounded-lg p-2 text-gray-600 hover:bg-gray-100/50 hover:text-green-600 w-full h-full transition-all duration-300'>
+                <Search className='h-4 w-4 text-gray-500' />
+              </button>
+            ) : (
+              <div className='relative h-full'>
+                <Search className='absolute left-3 top-1/2 h-5 w-5 -translate-y-1/2 text-gray-400 transition-all duration-300' />
+                <input
+                  type='text'
+                  placeholder='搜索...'
+                  className='w-full h-full rounded-lg bg-gray-50/80 py-3 pl-9 pr-4 text-sm text-gray-700 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-green-400 focus:bg-white border border-gray-200/50 shadow-sm transition-all duration-300'
+                />
+              </div>
+            )}
+          </div>
+        </div>
+
+        {/* 首页导航 */}
+        <nav className='px-2 mt-4'>
+          <Link
+            href='/'
+            onClick={() => setActive('/')}
+            data-active={active === '/'}
+            className={`flex items-center rounded-lg px-2 py-2 pl-4 text-gray-700 hover:bg-gray-100/30 hover:text-green-600 data-[active=true]:bg-green-500/20 data-[active=true]:text-green-700 font-medium transition-colors duration-200 min-h-[40px] ${
+              isCollapsed ? 'w-full max-w-none mx-0' : 'max-w-[215px] mx-auto'
+            } gap-3 justify-start`}
+          >
+            <div className='w-4 h-4 flex items-center justify-center'>
+              <Home className='h-4 w-4 text-gray-500 group-hover:text-green-600 data-[active=true]:text-green-700' />
+            </div>
+            {!isCollapsed && (
+              <span className='whitespace-nowrap transition-opacity duration-200 opacity-100'>
+                首页
+              </span>
+            )}
+          </Link>
+        </nav>
+
+        {/* 菜单项 */}
+        <div className='flex-1 overflow-y-auto px-2 pt-4'>
+          <div className='space-y-1'>
+            {menuItems.map((item) => (
+              <Link
+                key={item.href}
+                href={item.href}
+                onClick={() => setActive(item.href)}
+                data-active={active === item.href}
+                className={`group flex items-center rounded-lg px-2 py-2 pl-4 text-gray-700 hover:bg-gray-100/30 hover:text-green-600 data-[active=true]:bg-green-500/20 data-[active=true]:text-green-700 transition-colors duration-200 min-h-[40px] ${
+                  isCollapsed
+                    ? 'w-full max-w-none mx-0'
+                    : 'max-w-[215px] mx-auto'
+                } gap-3 justify-start`}
+              >
+                <div className='w-4 h-4 flex items-center justify-center'>
+                  <item.icon className='h-4 w-4 text-gray-500 group-hover:text-green-600 group-data-[active=true]:text-green-700' />
+                </div>
+                {!isCollapsed && (
+                  <span className='whitespace-nowrap transition-opacity duration-200 opacity-100'>
+                    {item.label}
+                  </span>
+                )}
+              </Link>
+            ))}
+          </div>
+        </div>
+      </div>
+    </aside>
+  );
+};
+
+export default Sidebar;
--- a/src/components/video/SearchCard.tsx
+++ b/src/components/video/SearchCard.tsx
@@ -0,0 +1,98 @@
+import { Search } from 'lucide-react';
+import Image from 'next/image';
+import React, { useState } from 'react';
+
+interface SearchCardProps {
+  title: string;
+  poster: string;
+  rating?: number;
+  type: 'movie' | 'tv';
+  episodes?: number;
+}
+
+function SearchCircle({
+  className = '',
+  fillColor = 'none',
+}: {
+  className?: string;
+  fillColor?: string;
+}) {
+  return (
+    <svg
+      width='44'
+      height='44'
+      viewBox='0 0 44 44'
+      fill='none'
+      xmlns='http://www.w3.org/2000/svg'
+      className={className}
+      style={{ display: 'block' }}
+    >
+      <circle
+        cx='22'
+        cy='22'
+        r='20'
+        stroke='white'
+        strokeWidth='1.5'
+        fill={fillColor}
+      />
+      <g>
+        <foreignObject x='12' y='12' width='20' height='20'>
+          <div
+            style={{
+              display: 'flex',
+              justifyContent: 'center',
+              alignItems: 'center',
+              width: '100%',
+              height: '100%',
+            }}
+          >
+            <Search className='h-7 w-7 text-white' strokeWidth={2} />
+          </div>
+        </foreignObject>
+      </g>
+    </svg>
+  );
+}
+
+const SearchCard = ({ title, poster, episodes }: SearchCardProps) => {
+  const [hover, setHover] = useState(false);
+  return (
+    <div className='group relative w-full overflow-hidden rounded-lg bg-white border border-[#e6e6e6] shadow-none flex flex-col'>
+      {/* 海报图片 - 2:3 比例 */}
+      <div className='relative aspect-[2/3] w-full overflow-hidden'>
+        <Image src={poster} alt={title} fill className='object-cover' />
+        {/* Hover 效果 */}
+        <div className='absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity duration-200 flex items-center justify-center group'>
+          <div className='absolute inset-0 flex items-center justify-center'>
+            <div
+              onMouseEnter={() => setHover(true)}
+              onMouseLeave={() => setHover(false)}
+              className={`transition-all duration-200 ${
+                hover ? 'scale-110' : ''
+              }`}
+              style={{ cursor: 'pointer' }}
+            >
+              <SearchCircle fillColor={hover ? '#22c55e' : 'none'} />
+            </div>
+          </div>
+        </div>
+        {/* 集数指示器 - 绿色小圆球 */}
+        {episodes && (
+          <div className='absolute top-2 right-2 w-6 h-6 bg-green-500 rounded-full flex items-center justify-center'>
+            <span className='text-white text-xs font-bold'>{episodes}</span>
+          </div>
+        )}
+      </div>
+      {/* 信息层 */}
+      <div className='p-2'>
+        <div className='flex items-center justify-between'>
+          <span className='text-gray-900 font-semibold truncate flex-1 mr-2'>
+            {title}
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default SearchCard;
--- a/src/components/video/VideoCard.tsx
+++ b/src/components/video/VideoCard.tsx
@@ -0,0 +1,140 @@
+import { Heart } from 'lucide-react';
+import Image from 'next/image';
+import React, { useState } from 'react';
+
+interface VideoCardProps {
+  title: string;
+  poster: string;
+  rating?: number;
+  type: 'movie' | 'tv';
+  episodes?: number;
+  source?: string;
+  showProgress?: boolean;
+  progress?: number; // 0-100
+}
+
+function CheckCircleCustom() {
+  return (
+    <span className='inline-flex items-center justify-center'>
+      <svg
+        width='24'
+        height='24'
+        viewBox='0 0 32 32'
+        fill='none'
+        xmlns='http://www.w3.org/2000/svg'
+      >
+        <circle cx='16' cy='16' r='13' stroke='white' strokeWidth='2' />
+        <path
+          d='M11 16.5L15 20L21 13.5'
+          stroke='white'
+          strokeWidth='2'
+          strokeLinecap='round'
+          strokeLinejoin='round'
+        />
+      </svg>
+    </span>
+  );
+}
+
+function PlayCircleSolid({
+  className = '',
+  fillColor = 'none',
+}: {
+  className?: string;
+  fillColor?: string;
+}) {
+  return (
+    <svg
+      width='44'
+      height='44'
+      viewBox='0 0 44 44'
+      fill='none'
+      xmlns='http://www.w3.org/2000/svg'
+      className={className}
+    >
+      <circle
+        cx='22'
+        cy='22'
+        r='20'
+        stroke='white'
+        strokeWidth='1.5'
+        fill={fillColor}
+      />
+      <polygon points='19,15 19,29 29,22' fill='white' />
+    </svg>
+  );
+}
+
+const VideoCard = ({
+  title,
+  poster,
+  episodes,
+  source,
+  showProgress,
+  progress,
+}: VideoCardProps) => {
+  const [playHover, setPlayHover] = useState(false);
+
+  return (
+    <div className='group relative w-full overflow-hidden rounded-lg bg-white border border-[#e6e6e6] shadow-none flex flex-col'>
+      {/* 海报图片 - 2:3 比例 */}
+      <div className='relative aspect-[2/3] w-full overflow-hidden'>
+        <Image src={poster} alt={title} fill className='object-cover' />
+
+        {/* Hover 效果 */}
+        <div className='absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity duration-200 flex items-center justify-center group'>
+          <div className='absolute inset-0 flex items-center justify-center'>
+            <div
+              onMouseEnter={() => setPlayHover(true)}
+              onMouseLeave={() => setPlayHover(false)}
+              className={`transition-all duration-200 ${
+                playHover ? 'scale-110' : ''
+              }`}
+              style={{ cursor: 'pointer' }}
+            >
+              <PlayCircleSolid fillColor={playHover ? '#22c55e' : 'none'} />
+            </div>
+          </div>
+          <div className='absolute bottom-4 right-4 flex items-center gap-6'>
+            <CheckCircleCustom />
+            <Heart className='h-5 w-5 text-white/90 stroke-[2]' />
+          </div>
+        </div>
+
+        {/* 集数指示器 - 绿色小圆球 */}
+        {episodes && (
+          <div className='absolute top-2 right-2 w-6 h-6 bg-green-500 rounded-full flex items-center justify-center'>
+            <span className='text-white text-xs font-bold'>{episodes}</span>
+          </div>
+        )}
+
+        {/* 播放进度条 */}
+        {showProgress && progress !== undefined && (
+          <div className='absolute bottom-0 left-0 right-0 h-1 bg-gray-300'>
+            <div
+              className='h-full bg-blue-500 transition-all duration-300'
+              style={{ width: `${progress}%` }}
+            />
+          </div>
+        )}
+      </div>
+
+      {/* 信息层 */}
+      <div className='p-2'>
+        <div className='flex items-center justify-between'>
+          <span className='text-gray-900 font-semibold truncate flex-1 mr-2'>
+            {title}
+          </span>
+          {/* 数据源信息 */}
+          {source && (
+            <span className='text-gray-400 text-xs flex-shrink-0'>
+              {source}
+            </span>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default VideoCard;
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -1,8 +1,12 @@
 import type { Config } from 'tailwindcss';
 import defaultTheme from 'tailwindcss/defaultTheme';

-export default {
-  content: ['./src/**/*.{js,jsx,ts,tsx}'],
+const config: Config = {
+  content: [
+    './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
+    './src/components/**/*.{js,ts,jsx,tsx,mdx}',
+    './src/app/**/*.{js,ts,jsx,tsx,mdx}',
+  ],
  theme: {
    extend: {
      fontFamily: {
@@ -10,18 +14,16 @@ export default {
      },
      colors: {
        primary: {
-          // Customize it on globals.css :root
-          50: 'rgb(var(--tw-color-primary-50) / <alpha-value>)',
-          100: 'rgb(var(--tw-color-primary-100) / <alpha-value>)',
-          200: 'rgb(var(--tw-color-primary-200) / <alpha-value>)',
-          300: 'rgb(var(--tw-color-primary-300) / <alpha-value>)',
-          400: 'rgb(var(--tw-color-primary-400) / <alpha-value>)',
-          500: 'rgb(var(--tw-color-primary-500) / <alpha-value>)',
-          600: 'rgb(var(--tw-color-primary-600) / <alpha-value>)',
-          700: 'rgb(var(--tw-color-primary-700) / <alpha-value>)',
-          800: 'rgb(var(--tw-color-primary-800) / <alpha-value>)',
-          900: 'rgb(var(--tw-color-primary-900) / <alpha-value>)',
-          950: 'rgb(var(--tw-color-primary-950) / <alpha-value>)',
+          50: '#f0f9ff',
+          100: '#e0f2fe',
+          200: '#bae6fd',
+          300: '#7dd3fc',
+          400: '#38bdf8',
+          500: '#0ea5e9',
+          600: '#0284c7',
+          700: '#0369a1',
+          800: '#075985',
+          900: '#0c4a6e',
        },
        dark: '#222222',
      },
@@ -45,12 +47,34 @@ export default {
            backgroundPosition: '700px 0',
          },
        },
+        fadeIn: {
+          '0%': { opacity: '0' },
+          '100%': { opacity: '1' },
+        },
+        slideUp: {
+          '0%': { transform: 'translateY(10px)', opacity: '0' },
+          '100%': { transform: 'translateY(0)', opacity: '1' },
+        },
+        slideDown: {
+          '0%': { transform: 'translateY(-10px)', opacity: '0' },
+          '100%': { transform: 'translateY(0)', opacity: '1' },
+        },
      },
      animation: {
        flicker: 'flicker 3s linear infinite',
        shimmer: 'shimmer 1.3s linear infinite',
+        'fade-in': 'fadeIn 0.3s ease-in-out',
+        'slide-up': 'slideUp 0.3s ease-in-out',
+        'slide-down': 'slideDown 0.3s ease-in-out',
+      },
+      backgroundImage: {
+        'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
+        'gradient-conic':
+          'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
      },
    },
  },
  plugins: [require('@tailwindcss/forms')],
 } satisfies Config;
+
+export default config;