From 391bd7df2625c4d1932a084029b87716e82b8d1b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=90=B3=E5=85=83=E7=9A=93?= <hw@yuanhau.com>
Date: Tue, 6 May 2025 14:52:42 +0800
Subject: [PATCH] feat: integrate GSAP for animations and add Tailwind CSS
 support

- Added GSAP and ScrambleTextPlugin for text animations in navigation.
- Implemented locale switching in navigation component.
- Updated i18n locales for navigation links.
- Created a new layout for news organization pages.
- Removed unused index page and added home page with greeting.
- Implemented dynamic fetching of news organization info with API.
- Configured Tailwind CSS and added necessary plugins.
- Updated nuxt.config.ts for routing and site metadata.
---
 app.vue                                |   4 +
 bun.lock                               |  82 ++++++++++++-
 components/navigation.vue              |  60 +++++++++-
 i18n/locales/en.json                   |   3 +
 i18n/locales/zh-tw.json                |   3 +
 layouts/default.vue                    |   8 +-
 layouts/newsorg.vue                    |  15 +++
 nuxt.config.ts                         |  28 ++++-
 package.json                           |   4 +
 pages/home.vue                         |   7 ++
 pages/index.vue                        |   7 --
 pages/newsOrgAbout/[slug].vue          | 154 +++++++++++++++++++++++++
 server/api/getData/fetchNewsOrgInfo.ts |  12 ++
 styles/tailwind.css                    |   1 +
 tailwind.config.ts                     |   4 +
 15 files changed, 377 insertions(+), 15 deletions(-)
 create mode 100644 layouts/newsorg.vue
 create mode 100644 pages/home.vue
 delete mode 100644 pages/index.vue
 create mode 100644 pages/newsOrgAbout/[slug].vue
 create mode 100644 server/api/getData/fetchNewsOrgInfo.ts
 create mode 100644 styles/tailwind.css
 create mode 100644 tailwind.config.ts

diff --git a/app.vue b/app.vue
index b5a6ef2..d56b278 100644
--- a/app.vue
+++ b/app.vue
@@ -1,3 +1,7 @@
+<script setup lang="ts">
+const { t } = useI18n();
+
+</script>
 <template>
   <!--A yhw_tw project-->
   <NuxtLayout>
diff --git a/bun.lock b/bun.lock
index 1d1392f..23a4f39 100644
--- a/bun.lock
+++ b/bun.lock
@@ -8,8 +8,12 @@
         "@nuxtjs/i18n": "9.5.4",
         "@nuxtjs/robots": "5.2.10",
         "@nuxtjs/seo": "3.0.3",
+        "@tailwindcss/vite": "^4.1.5",
         "@uploadthing/nuxt": "^7.1.7",
+        "gsap": "^3.13.0",
         "nuxt": "^3.17.2",
+        "tailwindcss": "^4.1.5",
+        "tailwindcss-animatecss": "^3.0.5",
         "uploadthing": "^7.6.0",
         "vue": "^3.5.13",
         "vue-router": "^4.5.1",
@@ -425,6 +429,36 @@
 
     "@standard-schema/spec": ["@standard-schema/spec@1.0.0-beta.4", "", {}, "sha512-d3IxtzLo7P1oZ8s8YNvxzBUXRXojSut8pbPrTYtzsc5sn4+53jVqbk66pQerSZbZSJZQux6LkclB/+8IDordHg=="],
 
+    "@tailwindcss/node": ["@tailwindcss/node@4.1.5", "", { "dependencies": { "enhanced-resolve": "^5.18.1", "jiti": "^2.4.2", "lightningcss": "1.29.2", "tailwindcss": "4.1.5" } }, "sha512-CBhSWo0vLnWhXIvpD0qsPephiaUYfHUX3U9anwDaHZAeuGpTiB3XmsxPAN6qX7bFhipyGBqOa1QYQVVhkOUGxg=="],
+
+    "@tailwindcss/oxide": ["@tailwindcss/oxide@4.1.5", "", { "optionalDependencies": { "@tailwindcss/oxide-android-arm64": "4.1.5", "@tailwindcss/oxide-darwin-arm64": "4.1.5", "@tailwindcss/oxide-darwin-x64": "4.1.5", "@tailwindcss/oxide-freebsd-x64": "4.1.5", "@tailwindcss/oxide-linux-arm-gnueabihf": "4.1.5", "@tailwindcss/oxide-linux-arm64-gnu": "4.1.5", "@tailwindcss/oxide-linux-arm64-musl": "4.1.5", "@tailwindcss/oxide-linux-x64-gnu": "4.1.5", "@tailwindcss/oxide-linux-x64-musl": "4.1.5", "@tailwindcss/oxide-wasm32-wasi": "4.1.5", "@tailwindcss/oxide-win32-arm64-msvc": "4.1.5", "@tailwindcss/oxide-win32-x64-msvc": "4.1.5" } }, "sha512-1n4br1znquEvyW/QuqMKQZlBen+jxAbvyduU87RS8R3tUSvByAkcaMTkJepNIrTlYhD+U25K4iiCIxE6BGdRYA=="],
+
+    "@tailwindcss/oxide-android-arm64": ["@tailwindcss/oxide-android-arm64@4.1.5", "", { "os": "android", "cpu": "arm64" }, "sha512-LVvM0GirXHED02j7hSECm8l9GGJ1RfgpWCW+DRn5TvSaxVsv28gRtoL4aWKGnXqwvI3zu1GABeDNDVZeDPOQrw=="],
+
+    "@tailwindcss/oxide-darwin-arm64": ["@tailwindcss/oxide-darwin-arm64@4.1.5", "", { "os": "darwin", "cpu": "arm64" }, "sha512-//TfCA3pNrgnw4rRJOqavW7XUk8gsg9ddi8cwcsWXp99tzdBAZW0WXrD8wDyNbqjW316Pk2hiN/NJx/KWHl8oA=="],
+
+    "@tailwindcss/oxide-darwin-x64": ["@tailwindcss/oxide-darwin-x64@4.1.5", "", { "os": "darwin", "cpu": "x64" }, "sha512-XQorp3Q6/WzRd9OalgHgaqgEbjP3qjHrlSUb5k1EuS1Z9NE9+BbzSORraO+ecW432cbCN7RVGGL/lSnHxcd+7Q=="],
+
+    "@tailwindcss/oxide-freebsd-x64": ["@tailwindcss/oxide-freebsd-x64@4.1.5", "", { "os": "freebsd", "cpu": "x64" }, "sha512-bPrLWbxo8gAo97ZmrCbOdtlz/Dkuy8NK97aFbVpkJ2nJ2Jo/rsCbu0TlGx8joCuA3q6vMWTSn01JY46iwG+clg=="],
+
+    "@tailwindcss/oxide-linux-arm-gnueabihf": ["@tailwindcss/oxide-linux-arm-gnueabihf@4.1.5", "", { "os": "linux", "cpu": "arm" }, "sha512-1gtQJY9JzMAhgAfvd/ZaVOjh/Ju/nCoAsvOVJenWZfs05wb8zq+GOTnZALWGqKIYEtyNpCzvMk+ocGpxwdvaVg=="],
+
+    "@tailwindcss/oxide-linux-arm64-gnu": ["@tailwindcss/oxide-linux-arm64-gnu@4.1.5", "", { "os": "linux", "cpu": "arm64" }, "sha512-dtlaHU2v7MtdxBXoqhxwsWjav7oim7Whc6S9wq/i/uUMTWAzq/gijq1InSgn2yTnh43kR+SFvcSyEF0GCNu1PQ=="],
+
+    "@tailwindcss/oxide-linux-arm64-musl": ["@tailwindcss/oxide-linux-arm64-musl@4.1.5", "", { "os": "linux", "cpu": "arm64" }, "sha512-fg0F6nAeYcJ3CriqDT1iVrqALMwD37+sLzXs8Rjy8Z1ZHshJoYceodfyUwGJEsQoTyWbliFNRs2wMQNXtT7MVA=="],
+
+    "@tailwindcss/oxide-linux-x64-gnu": ["@tailwindcss/oxide-linux-x64-gnu@4.1.5", "", { "os": "linux", "cpu": "x64" }, "sha512-SO+F2YEIAHa1AITwc8oPwMOWhgorPzzcbhWEb+4oLi953h45FklDmM8dPSZ7hNHpIk9p/SCZKUYn35t5fjGtHA=="],
+
+    "@tailwindcss/oxide-linux-x64-musl": ["@tailwindcss/oxide-linux-x64-musl@4.1.5", "", { "os": "linux", "cpu": "x64" }, "sha512-6UbBBplywkk/R+PqqioskUeXfKcBht3KU7juTi1UszJLx0KPXUo10v2Ok04iBJIaDPkIFkUOVboXms5Yxvaz+g=="],
+
+    "@tailwindcss/oxide-wasm32-wasi": ["@tailwindcss/oxide-wasm32-wasi@4.1.5", "", { "dependencies": { "@emnapi/core": "^1.4.3", "@emnapi/runtime": "^1.4.3", "@emnapi/wasi-threads": "^1.0.2", "@napi-rs/wasm-runtime": "^0.2.9", "@tybys/wasm-util": "^0.9.0", "tslib": "^2.8.0" }, "cpu": "none" }, "sha512-hwALf2K9FHuiXTPqmo1KeOb83fTRNbe9r/Ixv9ZNQ/R24yw8Ge1HOWDDgTdtzntIaIUJG5dfXCf4g9AD4RiyhQ=="],
+
+    "@tailwindcss/oxide-win32-arm64-msvc": ["@tailwindcss/oxide-win32-arm64-msvc@4.1.5", "", { "os": "win32", "cpu": "arm64" }, "sha512-oDKncffWzaovJbkuR7/OTNFRJQVdiw/n8HnzaCItrNQUeQgjy7oUiYpsm9HUBgpmvmDpSSbGaCa2Evzvk3eFmA=="],
+
+    "@tailwindcss/oxide-win32-x64-msvc": ["@tailwindcss/oxide-win32-x64-msvc@4.1.5", "", { "os": "win32", "cpu": "x64" }, "sha512-WiR4dtyrFdbb+ov0LK+7XsFOsG+0xs0PKZKkt41KDn9jYpO7baE3bXiudPVkTqUEwNfiglCygQHl2jklvSBi7Q=="],
+
+    "@tailwindcss/vite": ["@tailwindcss/vite@4.1.5", "", { "dependencies": { "@tailwindcss/node": "4.1.5", "@tailwindcss/oxide": "4.1.5", "tailwindcss": "4.1.5" }, "peerDependencies": { "vite": "^5.2.0 || ^6" } }, "sha512-FE1stRoqdHSb7RxesMfCXE8icwI1W6zGE/512ae3ZDrpkQYTTYeSyUJPRCjZd8CwVAhpDUbi1YR8pcZioFJQ/w=="],
+
     "@trysound/sax": ["@trysound/sax@0.2.0", "", {}, "sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA=="],
 
     "@tybys/wasm-util": ["@tybys/wasm-util@0.9.0", "", { "dependencies": { "tslib": "^2.4.0" } }, "sha512-6+7nlbMVX/PVDCwaIQ8nTOPveOcFLSt8GcXdx8hD0bt39uWxYT88uXzqTd4fTvqta7oeUJqudepapKNt2DYJFw=="],
@@ -699,7 +733,7 @@
 
     "convert-source-map": ["convert-source-map@2.0.0", "", {}, "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg=="],
 
-    "cookie": ["cookie@1.0.2", "", {}, "sha512-9Kr/j4O16ISv8zBBhJoi4bXOYNTkFLOqSL3UDB0njXxCXNezjeyVrJyGOWtgfs/q2km1gwBcfH8q1yEGoMYunA=="],
+    "cookie": ["cookie@0.7.2", "", {}, "sha512-yki5XnKuf750l50uGTllt6kKILY4nQ1eNIQatoXEByZ5dWgnKqbnqmTrBE5B4N7lrMJKQ2ytWMiTO2o0v6Ew/w=="],
 
     "cookie-es": ["cookie-es@2.0.0", "", {}, "sha512-RAj4E421UYRgqokKUmotqAwuplYw15qtdXfY+hGzgCJ/MBjCVZcSoHK/kH9kocfjRjcDME7IiDWR/1WX1TM2Pg=="],
 
@@ -1031,6 +1065,8 @@
 
     "graceful-fs": ["graceful-fs@4.2.11", "", {}, "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ=="],
 
+    "gsap": ["gsap@3.13.0", "", {}, "sha512-QL7MJ2WMjm1PHWsoFrAQH/J8wUeqZvMtHO58qdekHpCfhvhSL4gSiz6vJf5EeMP0LOn3ZCprL2ki/gjED8ghVw=="],
+
     "gzip-size": ["gzip-size@7.0.0", "", { "dependencies": { "duplexer": "^0.1.2" } }, "sha512-O1Ld7Dr+nqPnmGpdhzLmMTQ4vAsD+rHwMm1NLUmoUFFymBOMKxCCrtDxqdBRYXdeEPEi3SyoR4TizJLQrnKBNA=="],
 
     "h3": ["h3@1.15.3", "", { "dependencies": { "cookie-es": "^1.2.2", "crossws": "^0.3.4", "defu": "^6.1.4", "destr": "^2.0.5", "iron-webcrypto": "^1.2.1", "node-mock-http": "^1.0.0", "radix3": "^1.1.2", "ufo": "^1.6.1", "uncrypto": "^0.1.3" } }, "sha512-z6GknHqyX0h9aQaTx22VZDf6QyZn+0Nh+Ym8O/u0SGSkyF5cuTJYKlc8MkzW3Nzf9LE1ivcpmYC3FUGpywhuUQ=="],
@@ -1187,6 +1223,28 @@
 
     "lighthouse-logger": ["lighthouse-logger@2.0.1", "", { "dependencies": { "debug": "^2.6.9", "marky": "^1.2.2" } }, "sha512-ioBrW3s2i97noEmnXxmUq7cjIcVRjT5HBpAYy8zE11CxU9HqlWHHeRxfeN1tn8F7OEMVPIC9x1f8t3Z7US9ehQ=="],
 
+    "lightningcss": ["lightningcss@1.29.2", "", { "dependencies": { "detect-libc": "^2.0.3" }, "optionalDependencies": { "lightningcss-darwin-arm64": "1.29.2", "lightningcss-darwin-x64": "1.29.2", "lightningcss-freebsd-x64": "1.29.2", "lightningcss-linux-arm-gnueabihf": "1.29.2", "lightningcss-linux-arm64-gnu": "1.29.2", "lightningcss-linux-arm64-musl": "1.29.2", "lightningcss-linux-x64-gnu": "1.29.2", "lightningcss-linux-x64-musl": "1.29.2", "lightningcss-win32-arm64-msvc": "1.29.2", "lightningcss-win32-x64-msvc": "1.29.2" } }, "sha512-6b6gd/RUXKaw5keVdSEtqFVdzWnU5jMxTUjA2bVcMNPLwSQ08Sv/UodBVtETLCn7k4S1Ibxwh7k68IwLZPgKaA=="],
+
+    "lightningcss-darwin-arm64": ["lightningcss-darwin-arm64@1.29.2", "", { "os": "darwin", "cpu": "arm64" }, "sha512-cK/eMabSViKn/PG8U/a7aCorpeKLMlK0bQeNHmdb7qUnBkNPnL+oV5DjJUo0kqWsJUapZsM4jCfYItbqBDvlcA=="],
+
+    "lightningcss-darwin-x64": ["lightningcss-darwin-x64@1.29.2", "", { "os": "darwin", "cpu": "x64" }, "sha512-j5qYxamyQw4kDXX5hnnCKMf3mLlHvG44f24Qyi2965/Ycz829MYqjrVg2H8BidybHBp9kom4D7DR5VqCKDXS0w=="],
+
+    "lightningcss-freebsd-x64": ["lightningcss-freebsd-x64@1.29.2", "", { "os": "freebsd", "cpu": "x64" }, "sha512-wDk7M2tM78Ii8ek9YjnY8MjV5f5JN2qNVO+/0BAGZRvXKtQrBC4/cn4ssQIpKIPP44YXw6gFdpUF+Ps+RGsCwg=="],
+
+    "lightningcss-linux-arm-gnueabihf": ["lightningcss-linux-arm-gnueabihf@1.29.2", "", { "os": "linux", "cpu": "arm" }, "sha512-IRUrOrAF2Z+KExdExe3Rz7NSTuuJ2HvCGlMKoquK5pjvo2JY4Rybr+NrKnq0U0hZnx5AnGsuFHjGnNT14w26sg=="],
+
+    "lightningcss-linux-arm64-gnu": ["lightningcss-linux-arm64-gnu@1.29.2", "", { "os": "linux", "cpu": "arm64" }, "sha512-KKCpOlmhdjvUTX/mBuaKemp0oeDIBBLFiU5Fnqxh1/DZ4JPZi4evEH7TKoSBFOSOV3J7iEmmBaw/8dpiUvRKlQ=="],
+
+    "lightningcss-linux-arm64-musl": ["lightningcss-linux-arm64-musl@1.29.2", "", { "os": "linux", "cpu": "arm64" }, "sha512-Q64eM1bPlOOUgxFmoPUefqzY1yV3ctFPE6d/Vt7WzLW4rKTv7MyYNky+FWxRpLkNASTnKQUaiMJ87zNODIrrKQ=="],
+
+    "lightningcss-linux-x64-gnu": ["lightningcss-linux-x64-gnu@1.29.2", "", { "os": "linux", "cpu": "x64" }, "sha512-0v6idDCPG6epLXtBH/RPkHvYx74CVziHo6TMYga8O2EiQApnUPZsbR9nFNrg2cgBzk1AYqEd95TlrsL7nYABQg=="],
+
+    "lightningcss-linux-x64-musl": ["lightningcss-linux-x64-musl@1.29.2", "", { "os": "linux", "cpu": "x64" }, "sha512-rMpz2yawkgGT8RULc5S4WiZopVMOFWjiItBT7aSfDX4NQav6M44rhn5hjtkKzB+wMTRlLLqxkeYEtQ3dd9696w=="],
+
+    "lightningcss-win32-arm64-msvc": ["lightningcss-win32-arm64-msvc@1.29.2", "", { "os": "win32", "cpu": "arm64" }, "sha512-nL7zRW6evGQqYVu/bKGK+zShyz8OVzsCotFgc7judbt6wnB2KbiKKJwBE4SGoDBQ1O94RjW4asrCjQL4i8Fhbw=="],
+
+    "lightningcss-win32-x64-msvc": ["lightningcss-win32-x64-msvc@1.29.2", "", { "os": "win32", "cpu": "x64" }, "sha512-EdIUW3B2vLuHmv7urfzMI/h2fmlnOQBk1xlsDxkN1tCWKjNFjfLhGxYk8C8mzpSfr+A6jFFIi8fU6LbQGsRWjA=="],
+
     "lilconfig": ["lilconfig@3.1.3", "", {}, "sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw=="],
 
     "linebreak": ["linebreak@1.1.0", "", { "dependencies": { "base64-js": "0.0.8", "unicode-trie": "^2.0.0" } }, "sha512-MHp03UImeVhB7XZtjd0E4n6+3xr5Dq/9xI/5FptGk5FrbDR3zagPa2DS6U8ks/3HjbKWG9Q1M2ufOzxV2qLYSQ=="],
@@ -1713,6 +1771,10 @@
 
     "system-architecture": ["system-architecture@0.1.0", "", {}, "sha512-ulAk51I9UVUyJgxlv9M6lFot2WP3e7t8Kz9+IS6D4rVba1tR9kON+Ey69f+1R4Q8cd45Lod6a4IcJIxnzGc/zA=="],
 
+    "tailwindcss": ["tailwindcss@4.1.5", "", {}, "sha512-nYtSPfWGDiWgCkwQG/m+aX83XCwf62sBgg3bIlNiiOcggnS1x3uVRDAuyelBFL+vJdOPPCGElxv9DjHJjRHiVA=="],
+
+    "tailwindcss-animatecss": ["tailwindcss-animatecss@3.0.5", "", { "peerDependencies": { "tailwindcss": ">=3.1.0" } }, "sha512-5RDYryJ+O+xQfK1FhSPl1nIe4PPa1ZfHev21CpBGUNSRwUoLEoA6Oe2ftcuCWZEAa55jniqktbtkoHIoKS4jzQ=="],
+
     "tapable": ["tapable@2.2.1", "", {}, "sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ=="],
 
     "tar": ["tar@7.4.3", "", { "dependencies": { "@isaacs/fs-minipass": "^4.0.0", "chownr": "^3.0.0", "minipass": "^7.1.2", "minizlib": "^3.0.1", "mkdirp": "^3.0.1", "yallist": "^5.0.0" } }, "sha512-5S7Va8hKfV7W5U6g3aYxXmlPoZVAwUMy9AOKyF2fVuZa2UD3qZjg578OrLRt8PcNN1PleVaL/5/yYATNL0ICUw=="],
@@ -1993,6 +2055,18 @@
 
     "@rollup/pluginutils/estree-walker": ["estree-walker@2.0.2", "", {}, "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="],
 
+    "@tailwindcss/oxide-wasm32-wasi/@emnapi/core": ["@emnapi/core@1.4.3", "", { "dependencies": { "@emnapi/wasi-threads": "1.0.2", "tslib": "^2.4.0" }, "bundled": true }, "sha512-4m62DuCE07lw01soJwPiBGC0nAww0Q+RY70VZ+n49yDIO13yyinhbWCeNnaob0lakDtWQzSdtNWzJeOJt2ma+g=="],
+
+    "@tailwindcss/oxide-wasm32-wasi/@emnapi/runtime": ["@emnapi/runtime@1.4.3", "", { "dependencies": { "tslib": "^2.4.0" }, "bundled": true }, "sha512-pBPWdu6MLKROBX05wSNKcNb++m5Er+KQ9QkB+WVM+pW2Kx9hoSrVTnu3BdkI5eBLZoKu/J6mW/B6i6bJB2ytXQ=="],
+
+    "@tailwindcss/oxide-wasm32-wasi/@emnapi/wasi-threads": ["@emnapi/wasi-threads@1.0.2", "", { "dependencies": { "tslib": "^2.4.0" }, "bundled": true }, "sha512-5n3nTJblwRi8LlXkJ9eBzu+kZR8Yxcc7ubakyQTFzPMtIhFpUBRbsnc2Dv88IZDIbCDlBiWrknhB4Lsz7mg6BA=="],
+
+    "@tailwindcss/oxide-wasm32-wasi/@napi-rs/wasm-runtime": ["@napi-rs/wasm-runtime@0.2.9", "", { "dependencies": { "@emnapi/core": "^1.4.0", "@emnapi/runtime": "^1.4.0", "@tybys/wasm-util": "^0.9.0" }, "bundled": true }, "sha512-OKRBiajrrxB9ATokgEQoG87Z25c67pCpYcCwmXYX8PBftC9pBfN18gnm/fh1wurSLEKIAt+QRFLFCQISrb66Jg=="],
+
+    "@tailwindcss/oxide-wasm32-wasi/@tybys/wasm-util": ["@tybys/wasm-util@0.9.0", "", { "dependencies": { "tslib": "^2.4.0" }, "bundled": true }, "sha512-6+7nlbMVX/PVDCwaIQ8nTOPveOcFLSt8GcXdx8hD0bt39uWxYT88uXzqTd4fTvqta7oeUJqudepapKNt2DYJFw=="],
+
+    "@tailwindcss/oxide-wasm32-wasi/tslib": ["tslib@2.8.1", "", { "bundled": true }, "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="],
+
     "@typescript-eslint/visitor-keys/eslint-visitor-keys": ["eslint-visitor-keys@4.2.0", "", {}, "sha512-UyLnSehNt62FFhSwjZlHmeokpRK59rcz29j+F1/aDgbkbRTk7wIc9XzdoasMUbRNKDM0qQt/+BJ4BrpFeABemw=="],
 
     "@uploadthing/vue/@vueuse/core": ["@vueuse/core@10.11.1", "", { "dependencies": { "@types/web-bluetooth": "^0.0.20", "@vueuse/metadata": "10.11.1", "@vueuse/shared": "10.11.1", "vue-demi": ">=0.14.8" } }, "sha512-guoy26JQktXPcz+0n3GukWIy/JDNKti9v6VEMu6kV2sYBsWuGiTU8OWdg+ADfUbHg3/3DlqySDe7JmdHrktiww=="],
@@ -2057,8 +2131,6 @@
 
     "execa/@sindresorhus/merge-streams": ["@sindresorhus/merge-streams@4.0.0", "", {}, "sha512-tlqY9xq5ukxTUZBmoOp+m61cqwQD5pHJtFY3Mn8CA8ps6yghLH/Hw8UPdqg4OLmFW3IFlcXnQNmo/dh8HzXYIQ=="],
 
-    "express/cookie": ["cookie@0.7.2", "", {}, "sha512-yki5XnKuf750l50uGTllt6kKILY4nQ1eNIQatoXEByZ5dWgnKqbnqmTrBE5B4N7lrMJKQ2ytWMiTO2o0v6Ew/w=="],
-
     "externality/pathe": ["pathe@1.1.2", "", {}, "sha512-whLdWMYL2TwI08hn8/ZqAbrVemu0LNaNNJZX73O6qaIdCTfXutsLhMkjdENX0qhsQ9uIimo4/aQOmXkoon2nDQ=="],
 
     "extract-zip/get-stream": ["get-stream@5.2.0", "", { "dependencies": { "pump": "^3.0.0" } }, "sha512-nBF+F1rAZVCu/p7rjzgA+Yb4lfYXrpl7a6VmJrU8wF9I1CKvP/QwPNZHnOlwbTkY6dvtFIzFMSyQXbLoTQPRpA=="],
@@ -2089,6 +2161,8 @@
 
     "lighthouse-logger/debug": ["debug@2.6.9", "", { "dependencies": { "ms": "2.0.0" } }, "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA=="],
 
+    "lightningcss/detect-libc": ["detect-libc@2.0.4", "", {}, "sha512-3UDv+G9CsCKO1WKMGw9fwq/SWJYbI0c5Y7LU1AXYoDdbhE2AHQ6N6Nb34sG8Fj7T5APy8qXDCKuuIHd1BR0tVA=="],
+
     "listhen/pathe": ["pathe@1.1.2", "", {}, "sha512-whLdWMYL2TwI08hn8/ZqAbrVemu0LNaNNJZX73O6qaIdCTfXutsLhMkjdENX0qhsQ9uIimo4/aQOmXkoon2nDQ=="],
 
     "make-dir/semver": ["semver@6.3.1", "", { "bin": { "semver": "bin/semver.js" } }, "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA=="],
@@ -2187,6 +2261,8 @@
 
     "yauzl/buffer-crc32": ["buffer-crc32@0.2.13", "", {}, "sha512-VO9Ht/+p3SN7SKWqcrgEzjGbRSJYTx+Q1pTQC0wrWqHx0vpJraQ6GtHx8tvcg1rlK1byhU5gccxgOgj7B0TDkQ=="],
 
+    "youch/cookie": ["cookie@1.0.2", "", {}, "sha512-9Kr/j4O16ISv8zBBhJoi4bXOYNTkFLOqSL3UDB0njXxCXNezjeyVrJyGOWtgfs/q2km1gwBcfH8q1yEGoMYunA=="],
+
     "@babel/helper-compilation-targets/lru-cache/yallist": ["yallist@3.1.1", "", {}, "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g=="],
 
     "@eslint/config-array/minimatch/brace-expansion": ["brace-expansion@1.1.11", "", { "dependencies": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" } }, "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA=="],
diff --git a/components/navigation.vue b/components/navigation.vue
index 27e0f69..813d89d 100644
--- a/components/navigation.vue
+++ b/components/navigation.vue
@@ -1,3 +1,61 @@
+<script setup lang="ts">
+import { gsap } from 'gsap';
+import { ScrambleTextPlugin } from 'gsap/dist/ScrambleTextPlugin';
+gsap.registerPlugin(ScrambleTextPlugin) 
+
+const { t, locale, locales } = useI18n();
+const switchLocalePath = useSwitchLocalePath()
+
+const dropdownOpen = ref(false);
+const title = ref(null);
+
+const availableLocales = computed(() => {
+  return locales.value.filter(i => i.code !== locale.value)
+})
+
+const toggleDropdown = () => {
+    dropdownOpen.value = !dropdownOpen.value;
+}
+
+const runAnimation = () => {
+    gsap.to(title.value, {
+  duration: 1, 
+  scrambleText: "BlindSpec",
+});
+}
+</script>
 <template>
-    
+    <div class="fixed top-0 left-0 w-full bg-[#81611a] h-[60px] flex align-center flex-row text-white pl-4 pt-2 gap-x-5 justify-between">
+        <div class="text-3xl text-bold">
+            <!--Use mouseenter instead of hover-->
+            <a href="/" @mouseenter="runAnimation" ref="title">
+                BlindSpec
+            </a>
+        </div>
+        <div class="text-[0.9em] text-center align-center">
+            <a href="/" class="hover:text-blue-500 cursor-pointer transiton-all duration-100">{{ t("nav.home") }}</a>
+            &nbsp;
+            <a href="/dailybriefing" class="hover:text-blue-500 cursor-pointer transiton-all duration-100">{{ t("nav.dailybriefing") }}</a>
+        </div>
+        <div class="relative">
+            <button @click="toggleDropdown" 
+                    class="flex items-center space-x-2 px-4 py-2 rounded hover:bg-gray-900 transition-all duration-100">
+                <span>{{ locale }}</span>
+                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 
+                          d="M19 9l-7 7-7-7"/>
+                </svg>
+            </button>
+            
+            <div v-if="dropdownOpen" 
+                 class="absolute top-full left-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1">
+                <a v-for="loc in availableLocales" 
+                   :key="loc.code"
+                   :href="switchLocalePath(loc.code)"
+                   class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
+                    {{ loc.name || loc.code }}
+                </a>
+            </div>
+        </div>
+    </div>
 </template>
\ No newline at end of file
diff --git a/i18n/locales/en.json b/i18n/locales/en.json
index eeb5fdd..eadabb0 100644
--- a/i18n/locales/en.json
+++ b/i18n/locales/en.json
@@ -2,6 +2,9 @@
     "core": {
         "sitename": "BlindSpec"
     },
+    "nav": {
+        "home": "Home"
+    },
     "dailybriefing": "Daily Briefing",
     "Welcome": "Welcome"
 }
\ No newline at end of file
diff --git a/i18n/locales/zh-tw.json b/i18n/locales/zh-tw.json
index 4652b92..fc5aa44 100644
--- a/i18n/locales/zh-tw.json
+++ b/i18n/locales/zh-tw.json
@@ -2,6 +2,9 @@
     "core": {
         "sitename": "新聞盲點平台"
     },
+    "nav": {
+        "home": "首頁"
+    },
     "dailybriefing": "今日報導",
     "Welcome": "歡迎"
 }
\ No newline at end of file
diff --git a/layouts/default.vue b/layouts/default.vue
index c4dd04d..0d2fa0e 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -1,13 +1,15 @@
 <script setup lang="ts">
+import Navigation from '~/components/navigation.vue';
+import Footer from "~/components/footer.vue";
 </script>
 <template>
     <nav>
-
+        <Navigation/>
     </nav>
-    <main>
+    <main class="pt-[60px]">
         <slot/>
     </main>
     <footer>
-
+        <Footer/>
     </footer>
 </template>
\ No newline at end of file
diff --git a/layouts/newsorg.vue b/layouts/newsorg.vue
new file mode 100644
index 0000000..0d2fa0e
--- /dev/null
+++ b/layouts/newsorg.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import Navigation from '~/components/navigation.vue';
+import Footer from "~/components/footer.vue";
+</script>
+<template>
+    <nav>
+        <Navigation/>
+    </nav>
+    <main class="pt-[60px]">
+        <slot/>
+    </main>
+    <footer>
+        <Footer/>
+    </footer>
+</template>
\ No newline at end of file
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 0376df2..daf4db5 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -1,7 +1,12 @@
-const { t } = useI18n();
+import tailwindcss from '@tailwindcss/vite';
 export default defineNuxtConfig({
   compatibilityDate: '2025-05-06',
   devtools: { enabled: true },
+  routeRules: {
+    "/": { redirect: "/home"},
+    "/zh_tw": { redirect: "/zh_tw/home"},
+  } ,     
+  css: ['~/styles/tailwind.css'],
   modules: [
     '@nuxt/image',
     '@nuxtjs/robots',
@@ -15,4 +20,25 @@ export default defineNuxtConfig({
       { code: 'zh_tw', name: 'Chinese Tradional', file: 'zh-tw.json' },
     ]
   },
+  site: {
+    url: "https://news.yuanhau.com",
+    title: "BlindSpec",
+    description: "",
+  },
+  app: {
+    head: {
+      meta: [
+        { "http-equiv": "X-UA-Compatible", content: "IE=edge" },
+        { charset: "utf-8" },
+        { name: "viewport", content: "width=device-width, initial-scale=1" },
+        { name: "og:author", content: "@hpware on GitHub" },
+        { name: "og:author:email", content: "public+newscompareauthor@yuanhau.com" },
+      ]
+    }
+  },
+  vite: {
+    plugins: [
+      tailwindcss(),
+    ],
+  }
 })
\ No newline at end of file
diff --git a/package.json b/package.json
index 41ada71..cb5f3cf 100644
--- a/package.json
+++ b/package.json
@@ -14,8 +14,12 @@
     "@nuxtjs/i18n": "9.5.4",
     "@nuxtjs/robots": "5.2.10",
     "@nuxtjs/seo": "3.0.3",
+    "@tailwindcss/vite": "^4.1.5",
     "@uploadthing/nuxt": "^7.1.7",
+    "gsap": "^3.13.0",
     "nuxt": "^3.17.2",
+    "tailwindcss": "^4.1.5",
+    "tailwindcss-animatecss": "^3.0.5",
     "uploadthing": "^7.6.0",
     "vue": "^3.5.13",
     "vue-router": "^4.5.1"
diff --git a/pages/home.vue b/pages/home.vue
new file mode 100644
index 0000000..8676ac0
--- /dev/null
+++ b/pages/home.vue
@@ -0,0 +1,7 @@
+<template>
+    <div>
+        <h1 class="text-3xl font-bold text-center">
+            嗨！
+        </h1>
+    </div>
+</template>
\ No newline at end of file
diff --git a/pages/index.vue b/pages/index.vue
deleted file mode 100644
index 3e61a6c..0000000
--- a/pages/index.vue
+++ /dev/null
@@ -1,7 +0,0 @@
-<template>
-    <div>
-        <div>
-            <h2></h2>
-        </div>
-    </div>
-</template>
\ No newline at end of file
diff --git a/pages/newsOrgAbout/[slug].vue b/pages/newsOrgAbout/[slug].vue
new file mode 100644
index 0000000..be954f4
--- /dev/null
+++ b/pages/newsOrgAbout/[slug].vue
@@ -0,0 +1,154 @@
+<script setup lang="ts">
+const loading = ref(true);
+const route = useRoute();
+const slug = route.params.slug;
+const { t, locale } = useI18n(); 
+
+definePageMeta({
+  layout: "newsorg",
+});
+
+const { data: fetchNewsOrgInfo, pending, error } = useFetch("/api/getData/fetchNewsOrgInfo", {
+  method: "POST",
+  headers: {
+    "Content-Type": "application/json",
+  },
+  body: {
+    lang: locale,
+    requestPage: slug,
+  },
+});
+
+watchEffect(() => {
+  loading.value = pending.value;
+});
+</script>
+<template>
+    <div class="">
+        {{ slug }}
+        <br/>
+        {{ fetchNewsOrgInfo }}
+        <br/>
+        {{ loading }}
+    </div>    <div class="">
+        {{ slug }}
+        <br/>
+        {{ fetchNewsOrgInfo }}
+        <br/>
+        {{ loading }}
+    </div>    <div class="">
+        {{ slug }}
+        <br/>
+        {{ fetchNewsOrgInfo }}
+        <br/>
+        {{ loading }}
+    </div>    <div class="">
+        {{ slug }}
+        <br/>
+        {{ fetchNewsOrgInfo }}
+        <br/>
+        {{ loading }}
+    </div>    <div class="">
+        {{ slug }}
+        <br/>
+        {{ fetchNewsOrgInfo }}
+        <br/>
+        {{ loading }}
+    </div>    <div class="">
+        {{ slug }}
+        <br/>
+        {{ fetchNewsOrgInfo }}
+        <br/>
+        {{ loading }}
+    </div>    <div class="">
+        {{ slug }}
+        <br/>
+        {{ fetchNewsOrgInfo }}
+        <br/>
+        {{ loading }}
+    </div>    <div class="">
+        {{ slug }}
+        <br/>
+        {{ fetchNewsOrgInfo }}
+        <br/>
+        {{ loading }}
+    </div>    <div class="">
+        {{ slug }}
+        <br/>
+        {{ fetchNewsOrgInfo }}
+        <br/>
+        {{ loading }}
+    </div>    <div class="">
+        {{ slug }}
+        <br/>
+        {{ fetchNewsOrgInfo }}
+        <br/>
+        {{ loading }}
+    </div>    <div class="">
+        {{ slug }}
+        <br/>
+        {{ fetchNewsOrgInfo }}
+        <br/>
+        {{ loading }}
+    </div>    <div class="">
+        {{ slug }}
+        <br/>
+        {{ fetchNewsOrgInfo }}
+        <br/>
+        {{ loading }}
+    </div>    <div class="">
+        {{ slug }}
+        <br/>
+        {{ fetchNewsOrgInfo }}
+        <br/>
+        {{ loading }}
+    </div>    <div class="">
+        {{ slug }}
+        <br/>
+        {{ fetchNewsOrgInfo }}
+        <br/>
+        {{ loading }}
+    </div>    <div class="">
+        {{ slug }}
+        <br/>
+        {{ fetchNewsOrgInfo }}
+        <br/>
+        {{ loading }}
+    </div>    <div class="">
+        {{ slug }}
+        <br/>
+        {{ fetchNewsOrgInfo }}
+        <br/>
+        {{ loading }}
+    </div>    <div class="">
+        {{ slug }}
+        <br/>
+        {{ fetchNewsOrgInfo }}
+        <br/>
+        {{ loading }}
+    </div>    <div class="">
+        {{ slug }}
+        <br/>
+        {{ fetchNewsOrgInfo }}
+        <br/>
+        {{ loading }}
+    </div>    <div class="">
+        {{ slug }}
+        <br/>
+        {{ fetchNewsOrgInfo }}
+        <br/>
+        {{ loading }}
+    </div>    <div class="">
+        {{ slug }}
+        <br/>
+        {{ fetchNewsOrgInfo }}
+        <br/>
+        {{ loading }}
+    </div>    <div class="">
+        {{ slug }}
+        <br/>
+        {{ fetchNewsOrgInfo }}
+        <br/>
+        {{ loading }}
+    </div>
+</template>
\ No newline at end of file
diff --git a/server/api/getData/fetchNewsOrgInfo.ts b/server/api/getData/fetchNewsOrgInfo.ts
new file mode 100644
index 0000000..c14b0e0
--- /dev/null
+++ b/server/api/getData/fetchNewsOrgInfo.ts
@@ -0,0 +1,12 @@
+export default defineEventHandler(async(event) => {
+    const body = await readBody(event); 
+        return {
+            body: body,
+            title: "News Org 1",
+            slug: "taisounds",
+            website: "https://www.taisounds.com.tw",
+            description: ""
+        }
+})
+
+    
\ No newline at end of file
diff --git a/styles/tailwind.css b/styles/tailwind.css
new file mode 100644
index 0000000..f1d8c73
--- /dev/null
+++ b/styles/tailwind.css
@@ -0,0 +1 @@
+@import "tailwindcss";
diff --git a/tailwind.config.ts b/tailwind.config.ts
new file mode 100644
index 0000000..c3f714d
--- /dev/null
+++ b/tailwind.config.ts
@@ -0,0 +1,4 @@
+plugins: [
+    // Other plugins
+    require('tailwindcss-animatecss'),
+]
\ No newline at end of file