From 557a013b42a876e52ea653d4624486d6feb4a018 Mon Sep 17 00:00:00 2001
From: alikia2x <alikia2x@outlook.com>
Date: Tue, 27 May 2025 22:33:28 +0800
Subject: [PATCH] add: some components, fonts

---
 .../app/fonts/InterFont/Inter-Black.woff2     |   3 +
 .../fonts/InterFont/Inter-BlackItalic.woff2   |   3 +
 .../next/app/fonts/InterFont/Inter-Bold.woff2 |   3 +
 .../fonts/InterFont/Inter-BoldItalic.woff2    |   3 +
 .../app/fonts/InterFont/Inter-ExtraBold.woff2 |   3 +
 .../InterFont/Inter-ExtraBoldItalic.woff2     |   3 +
 .../fonts/InterFont/Inter-ExtraLight.woff2    |   3 +
 .../InterFont/Inter-ExtraLightItalic.woff2    |   3 +
 .../app/fonts/InterFont/Inter-Italic.woff2    |   3 +
 .../app/fonts/InterFont/Inter-Light.woff2     |   3 +
 .../fonts/InterFont/Inter-LightItalic.woff2   |   3 +
 .../app/fonts/InterFont/Inter-Medium.woff2    |   3 +
 .../fonts/InterFont/Inter-MediumItalic.woff2  |   3 +
 .../app/fonts/InterFont/Inter-Regular.woff2   |   3 +
 .../app/fonts/InterFont/Inter-SemiBold.woff2  |   3 +
 .../InterFont/Inter-SemiBoldItalic.woff2      |   3 +
 .../next/app/fonts/InterFont/Inter-Thin.woff2 |   3 +
 .../fonts/InterFont/Inter-ThinItalic.woff2    |   3 +
 packages/next/app/fonts/InterFont/Inter.css   | 450 ++++++++++++++++++
 .../fonts/InterFont/InterDisplay-Black.woff2  |   3 +
 .../InterFont/InterDisplay-BlackItalic.woff2  |   3 +
 .../fonts/InterFont/InterDisplay-Bold.woff2   |   3 +
 .../InterFont/InterDisplay-BoldItalic.woff2   |   3 +
 .../InterFont/InterDisplay-ExtraBold.woff2    |   3 +
 .../InterDisplay-ExtraBoldItalic.woff2        |   3 +
 .../InterFont/InterDisplay-ExtraLight.woff2   |   3 +
 .../InterDisplay-ExtraLightItalic.woff2       |   3 +
 .../fonts/InterFont/InterDisplay-Italic.woff2 |   3 +
 .../fonts/InterFont/InterDisplay-Light.woff2  |   3 +
 .../InterFont/InterDisplay-LightItalic.woff2  |   3 +
 .../fonts/InterFont/InterDisplay-Medium.woff2 |   3 +
 .../InterFont/InterDisplay-MediumItalic.woff2 |   3 +
 .../InterFont/InterDisplay-Regular.woff2      |   3 +
 .../InterFont/InterDisplay-SemiBold.woff2     |   3 +
 .../InterDisplay-SemiBoldItalic.woff2         |   3 +
 .../fonts/InterFont/InterDisplay-Thin.woff2   |   3 +
 .../InterFont/InterDisplay-ThinItalic.woff2   |   3 +
 .../InterFont/InterVariable-Italic.woff2      |   3 +
 .../app/fonts/InterFont/InterVariable.woff2   |   3 +
 .../next/app/fonts/MiSans/MiSans VF.woff2     |   3 +
 .../next/app/fonts/MiSans/MiSans-Bold.woff2   |   3 +
 .../app/fonts/MiSans/MiSans-Demibold.woff2    |   3 +
 .../app/fonts/MiSans/MiSans-ExtraLight.woff2  |   3 +
 .../next/app/fonts/MiSans/MiSans-Heavy.woff2  |   3 +
 .../next/app/fonts/MiSans/MiSans-Light.woff2  |   3 +
 .../next/app/fonts/MiSans/MiSans-Medium.woff2 |   3 +
 .../next/app/fonts/MiSans/MiSans-Normal.woff2 |   3 +
 .../app/fonts/MiSans/MiSans-Regular.woff2     |   3 +
 .../app/fonts/MiSans/MiSans-Semibold.woff2    |   3 +
 .../next/app/fonts/MiSans/MiSans-Thin.woff2   |   3 +
 packages/next/app/fonts/MiSans/MiSans.css     |  88 ++++
 packages/next/app/globals.css                 | 171 +++----
 packages/next/app/signup/SignUpForm.tsx       |  44 +-
 packages/next/components/shell/Header.tsx     |  60 ++-
 .../components/ui/Buttons/FilledButton.tsx    |  41 ++
 .../next/components/ui/Buttons/TextButton.tsx |  41 ++
 packages/next/components/ui/Dialog.tsx        |  57 +++
 .../{shell => ui}/NavigatinDrawer.tsx         |  12 +-
 packages/next/components/ui/SearchBox.tsx     |   2 +-
 packages/next/components/utils/ripple.css     |  15 +
 packages/next/components/utils/useRipple.tsx  |  90 ++++
 61 files changed, 1079 insertions(+), 139 deletions(-)
 create mode 100644 packages/next/app/fonts/InterFont/Inter-Black.woff2
 create mode 100644 packages/next/app/fonts/InterFont/Inter-BlackItalic.woff2
 create mode 100644 packages/next/app/fonts/InterFont/Inter-Bold.woff2
 create mode 100644 packages/next/app/fonts/InterFont/Inter-BoldItalic.woff2
 create mode 100644 packages/next/app/fonts/InterFont/Inter-ExtraBold.woff2
 create mode 100644 packages/next/app/fonts/InterFont/Inter-ExtraBoldItalic.woff2
 create mode 100644 packages/next/app/fonts/InterFont/Inter-ExtraLight.woff2
 create mode 100644 packages/next/app/fonts/InterFont/Inter-ExtraLightItalic.woff2
 create mode 100644 packages/next/app/fonts/InterFont/Inter-Italic.woff2
 create mode 100644 packages/next/app/fonts/InterFont/Inter-Light.woff2
 create mode 100644 packages/next/app/fonts/InterFont/Inter-LightItalic.woff2
 create mode 100644 packages/next/app/fonts/InterFont/Inter-Medium.woff2
 create mode 100644 packages/next/app/fonts/InterFont/Inter-MediumItalic.woff2
 create mode 100644 packages/next/app/fonts/InterFont/Inter-Regular.woff2
 create mode 100644 packages/next/app/fonts/InterFont/Inter-SemiBold.woff2
 create mode 100644 packages/next/app/fonts/InterFont/Inter-SemiBoldItalic.woff2
 create mode 100644 packages/next/app/fonts/InterFont/Inter-Thin.woff2
 create mode 100644 packages/next/app/fonts/InterFont/Inter-ThinItalic.woff2
 create mode 100644 packages/next/app/fonts/InterFont/Inter.css
 create mode 100644 packages/next/app/fonts/InterFont/InterDisplay-Black.woff2
 create mode 100644 packages/next/app/fonts/InterFont/InterDisplay-BlackItalic.woff2
 create mode 100644 packages/next/app/fonts/InterFont/InterDisplay-Bold.woff2
 create mode 100644 packages/next/app/fonts/InterFont/InterDisplay-BoldItalic.woff2
 create mode 100644 packages/next/app/fonts/InterFont/InterDisplay-ExtraBold.woff2
 create mode 100644 packages/next/app/fonts/InterFont/InterDisplay-ExtraBoldItalic.woff2
 create mode 100644 packages/next/app/fonts/InterFont/InterDisplay-ExtraLight.woff2
 create mode 100644 packages/next/app/fonts/InterFont/InterDisplay-ExtraLightItalic.woff2
 create mode 100644 packages/next/app/fonts/InterFont/InterDisplay-Italic.woff2
 create mode 100644 packages/next/app/fonts/InterFont/InterDisplay-Light.woff2
 create mode 100644 packages/next/app/fonts/InterFont/InterDisplay-LightItalic.woff2
 create mode 100644 packages/next/app/fonts/InterFont/InterDisplay-Medium.woff2
 create mode 100644 packages/next/app/fonts/InterFont/InterDisplay-MediumItalic.woff2
 create mode 100644 packages/next/app/fonts/InterFont/InterDisplay-Regular.woff2
 create mode 100644 packages/next/app/fonts/InterFont/InterDisplay-SemiBold.woff2
 create mode 100644 packages/next/app/fonts/InterFont/InterDisplay-SemiBoldItalic.woff2
 create mode 100644 packages/next/app/fonts/InterFont/InterDisplay-Thin.woff2
 create mode 100644 packages/next/app/fonts/InterFont/InterDisplay-ThinItalic.woff2
 create mode 100644 packages/next/app/fonts/InterFont/InterVariable-Italic.woff2
 create mode 100644 packages/next/app/fonts/InterFont/InterVariable.woff2
 create mode 100644 packages/next/app/fonts/MiSans/MiSans VF.woff2
 create mode 100644 packages/next/app/fonts/MiSans/MiSans-Bold.woff2
 create mode 100644 packages/next/app/fonts/MiSans/MiSans-Demibold.woff2
 create mode 100644 packages/next/app/fonts/MiSans/MiSans-ExtraLight.woff2
 create mode 100644 packages/next/app/fonts/MiSans/MiSans-Heavy.woff2
 create mode 100644 packages/next/app/fonts/MiSans/MiSans-Light.woff2
 create mode 100644 packages/next/app/fonts/MiSans/MiSans-Medium.woff2
 create mode 100644 packages/next/app/fonts/MiSans/MiSans-Normal.woff2
 create mode 100644 packages/next/app/fonts/MiSans/MiSans-Regular.woff2
 create mode 100644 packages/next/app/fonts/MiSans/MiSans-Semibold.woff2
 create mode 100644 packages/next/app/fonts/MiSans/MiSans-Thin.woff2
 create mode 100644 packages/next/app/fonts/MiSans/MiSans.css
 create mode 100644 packages/next/components/ui/Buttons/FilledButton.tsx
 create mode 100644 packages/next/components/ui/Buttons/TextButton.tsx
 create mode 100644 packages/next/components/ui/Dialog.tsx
 rename packages/next/components/{shell => ui}/NavigatinDrawer.tsx (78%)
 create mode 100644 packages/next/components/utils/ripple.css
 create mode 100644 packages/next/components/utils/useRipple.tsx

diff --git a/packages/next/app/fonts/InterFont/Inter-Black.woff2 b/packages/next/app/fonts/InterFont/Inter-Black.woff2
new file mode 100644
index 0000000..89b8df9
--- /dev/null
+++ b/packages/next/app/fonts/InterFont/Inter-Black.woff2
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:12ed0eed6749099b46c7b2e8198dc30c2d7e0f2a4e5fb1d12f0b6ae2c4f33cc4
+size 111668
diff --git a/packages/next/app/fonts/InterFont/Inter-BlackItalic.woff2 b/packages/next/app/fonts/InterFont/Inter-BlackItalic.woff2
new file mode 100644
index 0000000..71f56ab
--- /dev/null
+++ b/packages/next/app/fonts/InterFont/Inter-BlackItalic.woff2
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:308e101141e9dee3b6b121614da03969eb8179886975a9eeb5348021b04368fe
+size 118420
diff --git a/packages/next/app/fonts/InterFont/Inter-Bold.woff2 b/packages/next/app/fonts/InterFont/Inter-Bold.woff2
new file mode 100644
index 0000000..07604e9
--- /dev/null
+++ b/packages/next/app/fonts/InterFont/Inter-Bold.woff2
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:fa888127b6da015b65569f0351f3b5c391ad928904951f1c20e9f8462a8d95ea
+size 114840
diff --git a/packages/next/app/fonts/InterFont/Inter-BoldItalic.woff2 b/packages/next/app/fonts/InterFont/Inter-BoldItalic.woff2
new file mode 100644
index 0000000..ac216a9
--- /dev/null
+++ b/packages/next/app/fonts/InterFont/Inter-BoldItalic.woff2
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:4a10532d76c90c4597c0ad4bfc9284600e597d3012dd1ec16c1d44e0ad0058ab
+size 121500
diff --git a/packages/next/app/fonts/InterFont/Inter-ExtraBold.woff2 b/packages/next/app/fonts/InterFont/Inter-ExtraBold.woff2
new file mode 100644
index 0000000..1f88168
--- /dev/null
+++ b/packages/next/app/fonts/InterFont/Inter-ExtraBold.woff2
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:6f75025856f8db1b2186e9cb89be9de9894932c8b7b20f4df5e65916ff714e34
+size 114856
diff --git a/packages/next/app/fonts/InterFont/Inter-ExtraBoldItalic.woff2 b/packages/next/app/fonts/InterFont/Inter-ExtraBoldItalic.woff2
new file mode 100644
index 0000000..25e52ce
--- /dev/null
+++ b/packages/next/app/fonts/InterFont/Inter-ExtraBoldItalic.woff2
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:53bb20ba292e2ac28a0777bf0f56f31b98be432a3cc04359e2eb608c758349c7
+size 121516
diff --git a/packages/next/app/fonts/InterFont/Inter-ExtraLight.woff2 b/packages/next/app/fonts/InterFont/Inter-ExtraLight.woff2
new file mode 100644
index 0000000..1ab4d09
--- /dev/null
+++ b/packages/next/app/fonts/InterFont/Inter-ExtraLight.woff2
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:ba4fc81dbb25871f1bcabc664b1e37703fca0a05f7248a923e7db497c6d211cc
+size 112728
diff --git a/packages/next/app/fonts/InterFont/Inter-ExtraLightItalic.woff2 b/packages/next/app/fonts/InterFont/Inter-ExtraLightItalic.woff2
new file mode 100644
index 0000000..e88cd22
--- /dev/null
+++ b/packages/next/app/fonts/InterFont/Inter-ExtraLightItalic.woff2
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:38bad3a6a9ad1a7fcd8082e6423ba5e0baea16598f2cf304e527844f697e32b2
+size 119320
diff --git a/packages/next/app/fonts/InterFont/Inter-Italic.woff2 b/packages/next/app/fonts/InterFont/Inter-Italic.woff2
new file mode 100644
index 0000000..6b36b21
--- /dev/null
+++ b/packages/next/app/fonts/InterFont/Inter-Italic.woff2
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:2d078cb3bc8f934740d53b39dd23b0678f2f97477e49ec785dd9d8acd8b96bfc
+size 117700
diff --git a/packages/next/app/fonts/InterFont/Inter-Light.woff2 b/packages/next/app/fonts/InterFont/Inter-Light.woff2
new file mode 100644
index 0000000..1feb0f1
--- /dev/null
+++ b/packages/next/app/fonts/InterFont/Inter-Light.woff2
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:e111a1e2ad914ccda9179b95e83fb10234dd52a1932e0b93c480476227983fd9
+size 112592
diff --git a/packages/next/app/fonts/InterFont/Inter-LightItalic.woff2 b/packages/next/app/fonts/InterFont/Inter-LightItalic.woff2
new file mode 100644
index 0000000..5d65227
--- /dev/null
+++ b/packages/next/app/fonts/InterFont/Inter-LightItalic.woff2
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:050265b27d11860a26c66c054210852661abb5d229c4e0bb3525757a830f3790
+size 119608
diff --git a/packages/next/app/fonts/InterFont/Inter-Medium.woff2 b/packages/next/app/fonts/InterFont/Inter-Medium.woff2
new file mode 100644
index 0000000..f6354b1
--- /dev/null
+++ b/packages/next/app/fonts/InterFont/Inter-Medium.woff2
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:0ff3e94614e1493eb556314fd247ae6c4a85a7783b4cc86be539940cf83f2a48
+size 114348
diff --git a/packages/next/app/fonts/InterFont/Inter-MediumItalic.woff2 b/packages/next/app/fonts/InterFont/Inter-MediumItalic.woff2
new file mode 100644
index 0000000..f578443
--- /dev/null
+++ b/packages/next/app/fonts/InterFont/Inter-MediumItalic.woff2
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:1b0df503de488a92082a8c5d72ddc4c0229183ceb645ae1c25c2d0d63778517c
+size 120784
diff --git a/packages/next/app/fonts/InterFont/Inter-Regular.woff2 b/packages/next/app/fonts/InterFont/Inter-Regular.woff2
new file mode 100644
index 0000000..cd2b9fe
--- /dev/null
+++ b/packages/next/app/fonts/InterFont/Inter-Regular.woff2
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:e06f6b1bc553aaea4e4668023ed0ab0a147129c3107f511bc7d03d361b0ae085
+size 111268
diff --git a/packages/next/app/fonts/InterFont/Inter-SemiBold.woff2 b/packages/next/app/fonts/InterFont/Inter-SemiBold.woff2
new file mode 100644
index 0000000..6d48aeb
--- /dev/null
+++ b/packages/next/app/fonts/InterFont/Inter-SemiBold.woff2
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:5cb7103e4e605989afebc03d989c79201e54b21b5183db33981f70db9178a301
+size 114812
diff --git a/packages/next/app/fonts/InterFont/Inter-SemiBoldItalic.woff2 b/packages/next/app/fonts/InterFont/Inter-SemiBoldItalic.woff2
new file mode 100644
index 0000000..89d1089
--- /dev/null
+++ b/packages/next/app/fonts/InterFont/Inter-SemiBoldItalic.woff2
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:5e2a2bc3b5b9af0644f005693b10499dab18065d6aedbf46c8b74ccede27daeb
+size 121416
diff --git a/packages/next/app/fonts/InterFont/Inter-Thin.woff2 b/packages/next/app/fonts/InterFont/Inter-Thin.woff2
new file mode 100644
index 0000000..8607f76
--- /dev/null
+++ b/packages/next/app/fonts/InterFont/Inter-Thin.woff2
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:70ca998635d9fc627dede8108f04d0989e6e03346183f0ad0917723e790f6973
+size 109548
diff --git a/packages/next/app/fonts/InterFont/Inter-ThinItalic.woff2 b/packages/next/app/fonts/InterFont/Inter-ThinItalic.woff2
new file mode 100644
index 0000000..5637118
--- /dev/null
+++ b/packages/next/app/fonts/InterFont/Inter-ThinItalic.woff2
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:930d666b74e0dc0c26c2821f5643b701f8a41beaf3bb95ce146298104f29169c
+size 116880
diff --git a/packages/next/app/fonts/InterFont/Inter.css b/packages/next/app/fonts/InterFont/Inter.css
new file mode 100644
index 0000000..81a1a16
--- /dev/null
+++ b/packages/next/app/fonts/InterFont/Inter.css
@@ -0,0 +1,450 @@
+@font-face {
+    font-family: InterVariable;
+    font-style: normal;
+    font-weight: 100 900;
+    font-display: swap;
+    src: url("InterVariable.woff2") format("woff2");
+}
+
+@font-face {
+    font-family: InterVariable;
+    font-style: italic;
+    font-weight: 100 900;
+    font-display: swap;
+    src: url("InterVariable-Italic.woff2") format("woff2");
+}
+
+/* static fonts */
+@font-face {
+    font-family: "Inter";
+    font-style: normal;
+    font-weight: 100;
+    font-display: swap;
+    src: url("Inter-Thin.woff2") format("woff2");
+}
+
+@font-face {
+    font-family: "Inter";
+    font-style: italic;
+    font-weight: 100;
+    font-display: swap;
+    src: url("Inter-ThinItalic.woff2") format("woff2");
+}
+
+@font-face {
+    font-family: "Inter";
+    font-style: normal;
+    font-weight: 200;
+    font-display: swap;
+    src: url("Inter-ExtraLight.woff2") format("woff2");
+}
+
+@font-face {
+    font-family: "Inter";
+    font-style: italic;
+    font-weight: 200;
+    font-display: swap;
+    src: url("Inter-ExtraLightItalic.woff2") format("woff2");
+}
+
+@font-face {
+    font-family: "Inter";
+    font-style: normal;
+    font-weight: 300;
+    font-display: swap;
+    src: url("Inter-Light.woff2") format("woff2");
+}
+
+@font-face {
+    font-family: "Inter";
+    font-style: italic;
+    font-weight: 300;
+    font-display: swap;
+    src: url("Inter-LightItalic.woff2") format("woff2");
+}
+
+@font-face {
+    font-family: "Inter";
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src: url("Inter-Regular.woff2") format("woff2");
+}
+
+@font-face {
+    font-family: "Inter";
+    font-style: italic;
+    font-weight: 400;
+    font-display: swap;
+    src: url("Inter-Italic.woff2") format("woff2");
+}
+
+@font-face {
+    font-family: "Inter";
+    font-style: normal;
+    font-weight: 500;
+    font-display: swap;
+    src: url("Inter-Medium.woff2") format("woff2");
+}
+
+@font-face {
+    font-family: "Inter";
+    font-style: italic;
+    font-weight: 500;
+    font-display: swap;
+    src: url("Inter-MediumItalic.woff2") format("woff2");
+}
+
+@font-face {
+    font-family: "Inter";
+    font-style: normal;
+    font-weight: 600;
+    font-display: swap;
+    src: url("Inter-SemiBold.woff2") format("woff2");
+}
+
+@font-face {
+    font-family: "Inter";
+    font-style: italic;
+    font-weight: 600;
+    font-display: swap;
+    src: url("Inter-SemiBoldItalic.woff2") format("woff2");
+}
+
+@font-face {
+    font-family: "Inter";
+    font-style: normal;
+    font-weight: 700;
+    font-display: swap;
+    src: url("Inter-Bold.woff2") format("woff2");
+}
+
+@font-face {
+    font-family: "Inter";
+    font-style: italic;
+    font-weight: 700;
+    font-display: swap;
+    src: url("Inter-BoldItalic.woff2") format("woff2");
+}
+
+@font-face {
+    font-family: "Inter";
+    font-style: normal;
+    font-weight: 800;
+    font-display: swap;
+    src: url("Inter-ExtraBold.woff2") format("woff2");
+}
+
+@font-face {
+    font-family: "Inter";
+    font-style: italic;
+    font-weight: 800;
+    font-display: swap;
+    src: url("Inter-ExtraBoldItalic.woff2") format("woff2");
+}
+
+@font-face {
+    font-family: "Inter";
+    font-style: normal;
+    font-weight: 900;
+    font-display: swap;
+    src: url("Inter-Black.woff2") format("woff2");
+}
+
+@font-face {
+    font-family: "Inter";
+    font-style: italic;
+    font-weight: 900;
+    font-display: swap;
+    src: url("Inter-BlackItalic.woff2") format("woff2");
+}
+
+@font-face {
+    font-family: "InterDisplay";
+    font-style: normal;
+    font-weight: 100;
+    font-display: swap;
+    src: url("InterDisplay-Thin.woff2") format("woff2");
+}
+
+@font-face {
+    font-family: "InterDisplay";
+    font-style: italic;
+    font-weight: 100;
+    font-display: swap;
+    src: url("InterDisplay-ThinItalic.woff2") format("woff2");
+}
+
+@font-face {
+    font-family: "InterDisplay";
+    font-style: normal;
+    font-weight: 200;
+    font-display: swap;
+    src: url("InterDisplay-ExtraLight.woff2") format("woff2");
+}
+
+@font-face {
+    font-family: "InterDisplay";
+    font-style: italic;
+    font-weight: 200;
+    font-display: swap;
+    src: url("InterDisplay-ExtraLightItalic.woff2") format("woff2");
+}
+
+@font-face {
+    font-family: "InterDisplay";
+    font-style: normal;
+    font-weight: 300;
+    font-display: swap;
+    src: url("InterDisplay-Light.woff2") format("woff2");
+}
+
+@font-face {
+    font-family: "InterDisplay";
+    font-style: italic;
+    font-weight: 300;
+    font-display: swap;
+    src: url("InterDisplay-LightItalic.woff2") format("woff2");
+}
+
+@font-face {
+    font-family: "InterDisplay";
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src: url("InterDisplay-Regular.woff2") format("woff2");
+}
+
+@font-face {
+    font-family: "InterDisplay";
+    font-style: italic;
+    font-weight: 400;
+    font-display: swap;
+    src: url("InterDisplay-Italic.woff2") format("woff2");
+}
+
+@font-face {
+    font-family: "InterDisplay";
+    font-style: normal;
+    font-weight: 500;
+    font-display: swap;
+    src: url("InterDisplay-Medium.woff2") format("woff2");
+}
+
+@font-face {
+    font-family: "InterDisplay";
+    font-style: italic;
+    font-weight: 500;
+    font-display: swap;
+    src: url("InterDisplay-MediumItalic.woff2") format("woff2");
+}
+
+@font-face {
+    font-family: "InterDisplay";
+    font-style: normal;
+    font-weight: 600;
+    font-display: swap;
+    src: url("InterDisplay-SemiBold.woff2") format("woff2");
+}
+
+@font-face {
+    font-family: "InterDisplay";
+    font-style: italic;
+    font-weight: 600;
+    font-display: swap;
+    src: url("InterDisplay-SemiBoldItalic.woff2") format("woff2");
+}
+
+@font-face {
+    font-family: "InterDisplay";
+    font-style: normal;
+    font-weight: 700;
+    font-display: swap;
+    src: url("InterDisplay-Bold.woff2") format("woff2");
+}
+
+@font-face {
+    font-family: "InterDisplay";
+    font-style: italic;
+    font-weight: 700;
+    font-display: swap;
+    src: url("InterDisplay-BoldItalic.woff2") format("woff2");
+}
+
+@font-face {
+    font-family: "InterDisplay";
+    font-style: normal;
+    font-weight: 800;
+    font-display: swap;
+    src: url("InterDisplay-ExtraBold.woff2") format("woff2");
+}
+
+@font-face {
+    font-family: "InterDisplay";
+    font-style: italic;
+    font-weight: 800;
+    font-display: swap;
+    src: url("InterDisplay-ExtraBoldItalic.woff2") format("woff2");
+}
+
+@font-face {
+    font-family: "InterDisplay";
+    font-style: normal;
+    font-weight: 900;
+    font-display: swap;
+    src: url("InterDisplay-Black.woff2") format("woff2");
+}
+
+@font-face {
+    font-family: "InterDisplay";
+    font-style: italic;
+    font-weight: 900;
+    font-display: swap;
+    src: url("InterDisplay-BlackItalic.woff2") format("woff2");
+}
+
+@font-feature-values InterVariable {
+    @character-variant {
+        cv01: 1;
+        cv02: 2;
+        cv03: 3;
+        cv04: 4;
+        cv05: 5;
+        cv06: 6;
+        cv07: 7;
+        cv08: 8;
+        cv09: 9;
+        cv10: 10;
+        cv11: 11;
+        cv12: 12;
+        cv13: 13;
+        alt-1: 1; /* Alternate one */
+        alt-3: 9; /* Flat-top three */
+        open-4: 2; /* Open four */
+        open-6: 3; /* Open six */
+        open-9: 4; /* Open nine */
+        lc-l-with-tail: 5; /* Lower-case L with tail */
+        simplified-u: 6; /* Simplified u */
+        alt-double-s: 7; /* Alternate German double s */
+        uc-i-with-serif: 8; /* Upper-case i with serif */
+        uc-g-with-spur: 10; /* Capital G with spur */
+        single-story-a: 11; /* Single-story a */
+        compact-lc-f: 12; /* Compact f */
+        compact-lc-t: 13; /* Compact t */
+    }
+    @styleset {
+        ss01: 1;
+        ss02: 2;
+        ss03: 3;
+        ss04: 4;
+        ss05: 5;
+        ss06: 6;
+        ss07: 7;
+        ss08: 8;
+        open-digits: 1;                /* Open digits */
+        disambiguation: 2;             /* Disambiguation (with zero) */
+        disambiguation-except-zero: 4; /* Disambiguation (no zero) */
+        round-quotes-and-commas: 3;    /* Round quotes &amp; commas */
+        square-punctuation: 7;         /* Square punctuation */
+        square-quotes: 8;              /* Square quotes */
+        circled-characters: 5;         /* Circled characters */
+        squared-characters: 6;         /* Squared characters */
+    }
+}
+@font-feature-values Inter {
+
+    @character-variant {
+        cv01: 1;
+        cv02: 2;
+        cv03: 3;
+        cv04: 4;
+        cv05: 5;
+        cv06: 6;
+        cv07: 7;
+        cv08: 8;
+        cv09: 9;
+        cv10: 10;
+        cv11: 11;
+        cv12: 12;
+        cv13: 13;
+        alt-1: 1; /* Alternate one */
+        alt-3: 9; /* Flat-top three */
+        open-4: 2; /* Open four */
+        open-6: 3; /* Open six */
+        open-9: 4; /* Open nine */
+        lc-l-with-tail: 5; /* Lower-case L with tail */
+        simplified-u: 6; /* Simplified u */
+        alt-double-s: 7; /* Alternate German double s */
+        uc-i-with-serif: 8; /* Upper-case i with serif */
+        uc-g-with-spur: 10; /* Capital G with spur */
+        single-story-a: 11; /* Single-story a */
+        compact-lc-f: 12; /* Compact f */
+        compact-lc-t: 13; /* Compact t */
+    }
+    @styleset {
+        ss01: 1;
+        ss02: 2;
+        ss03: 3;
+        ss04: 4;
+        ss05: 5;
+        ss06: 6;
+        ss07: 7;
+        ss08: 8;
+        open-digits: 1;                /* Open digits */
+        disambiguation: 2;             /* Disambiguation (with zero) */
+        disambiguation-except-zero: 4; /* Disambiguation (no zero) */
+        round-quotes-and-commas: 3;    /* Round quotes &amp; commas */
+        square-punctuation: 7;         /* Square punctuation */
+        square-quotes: 8;              /* Square quotes */
+        circled-characters: 5;         /* Circled characters */
+        squared-characters: 6;         /* Squared characters */
+    }
+}
+@font-feature-values InterDisplay {
+    @character-variant {
+        cv01: 1;
+        cv02: 2;
+        cv03: 3;
+        cv04: 4;
+        cv05: 5;
+        cv06: 6;
+        cv07: 7;
+        cv08: 8;
+        cv09: 9;
+        cv10: 10;
+        cv11: 11;
+        cv12: 12;
+        cv13: 13;
+        alt-1: 1; /* Alternate one */
+        alt-3: 9; /* Flat-top three */
+        open-4: 2; /* Open four */
+        open-6: 3; /* Open six */
+        open-9: 4; /* Open nine */
+        lc-l-with-tail: 5; /* Lower-case L with tail */
+        simplified-u: 6; /* Simplified u */
+        alt-double-s: 7; /* Alternate German double s */
+        uc-i-with-serif: 8; /* Upper-case i with serif */
+        uc-g-with-spur: 10; /* Capital G with spur */
+        single-story-a: 11; /* Single-story a */
+        compact-lc-f: 12; /* Compact f */
+        compact-lc-t: 13; /* Compact t */
+    }
+    @styleset {
+        ss01: 1;
+        ss02: 2;
+        ss03: 3;
+        ss04: 4;
+        ss05: 5;
+        ss06: 6;
+        ss07: 7;
+        ss08: 8;
+        open-digits: 1;                /* Open digits */
+        disambiguation: 2;             /* Disambiguation (with zero) */
+        disambiguation-except-zero: 4; /* Disambiguation (no zero) */
+        round-quotes-and-commas: 3;    /* Round quotes &amp; commas */
+        square-punctuation: 7;         /* Square punctuation */
+        square-quotes: 8;              /* Square quotes */
+        circled-characters: 5;         /* Circled characters */
+        squared-characters: 6;         /* Squared characters */
+    }
+}
diff --git a/packages/next/app/fonts/InterFont/InterDisplay-Black.woff2 b/packages/next/app/fonts/InterFont/InterDisplay-Black.woff2
new file mode 100644
index 0000000..d7dbac2
--- /dev/null
+++ b/packages/next/app/fonts/InterFont/InterDisplay-Black.woff2
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:05650cb83c70fda2a465eade0c0a1a6c25d37ec49df3cd74b7e564683f9729f1
+size 110308
diff --git a/packages/next/app/fonts/InterFont/InterDisplay-BlackItalic.woff2 b/packages/next/app/fonts/InterFont/InterDisplay-BlackItalic.woff2
new file mode 100644
index 0000000..98950fe
--- /dev/null
+++ b/packages/next/app/fonts/InterFont/InterDisplay-BlackItalic.woff2
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:9746bf2bd43fe158144b83ede747088e80396daad55b9e6ea7232e0e22ee6fce
+size 116820
diff --git a/packages/next/app/fonts/InterFont/InterDisplay-Bold.woff2 b/packages/next/app/fonts/InterFont/InterDisplay-Bold.woff2
new file mode 100644
index 0000000..c6992e4
--- /dev/null
+++ b/packages/next/app/fonts/InterFont/InterDisplay-Bold.woff2
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:23bc37619593377e128f24660fedb2869d18277b4026cb46e5637be7643faf91
+size 113556
diff --git a/packages/next/app/fonts/InterFont/InterDisplay-BoldItalic.woff2 b/packages/next/app/fonts/InterFont/InterDisplay-BoldItalic.woff2
new file mode 100644
index 0000000..30c6bfb
--- /dev/null
+++ b/packages/next/app/fonts/InterFont/InterDisplay-BoldItalic.woff2
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:5a0fe1f01b8777fab4a5f73c757743fa52579c7723b0291777625cb53c0a792a
+size 120432
diff --git a/packages/next/app/fonts/InterFont/InterDisplay-ExtraBold.woff2 b/packages/next/app/fonts/InterFont/InterDisplay-ExtraBold.woff2
new file mode 100644
index 0000000..a426fdb
--- /dev/null
+++ b/packages/next/app/fonts/InterFont/InterDisplay-ExtraBold.woff2
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:97eeee5a6f4f22fef1f607cf8836104d65968f03e59bc068a7586bf18364a8a7
+size 113636
diff --git a/packages/next/app/fonts/InterFont/InterDisplay-ExtraBoldItalic.woff2 b/packages/next/app/fonts/InterFont/InterDisplay-ExtraBoldItalic.woff2
new file mode 100644
index 0000000..7358e69
--- /dev/null
+++ b/packages/next/app/fonts/InterFont/InterDisplay-ExtraBoldItalic.woff2
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:159b72ba47887032915420aa1445ae6768197e7ea732230182998f14d1cdb932
+size 120712
diff --git a/packages/next/app/fonts/InterFont/InterDisplay-ExtraLight.woff2 b/packages/next/app/fonts/InterFont/InterDisplay-ExtraLight.woff2
new file mode 100644
index 0000000..f93b602
--- /dev/null
+++ b/packages/next/app/fonts/InterFont/InterDisplay-ExtraLight.woff2
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:9031b6d2a1a559753d50b311ecb463ddf7acaaae1d992a7e9b009620d8ce6def
+size 113108
diff --git a/packages/next/app/fonts/InterFont/InterDisplay-ExtraLightItalic.woff2 b/packages/next/app/fonts/InterFont/InterDisplay-ExtraLightItalic.woff2
new file mode 100644
index 0000000..0c749bb
--- /dev/null
+++ b/packages/next/app/fonts/InterFont/InterDisplay-ExtraLightItalic.woff2
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:e8d7078160ef92b82c2123857c1b3aefaa4a795a44b56df5fe3edade60d81576
+size 120124
diff --git a/packages/next/app/fonts/InterFont/InterDisplay-Italic.woff2 b/packages/next/app/fonts/InterFont/InterDisplay-Italic.woff2
new file mode 100644
index 0000000..4d6a0e4
--- /dev/null
+++ b/packages/next/app/fonts/InterFont/InterDisplay-Italic.woff2
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:dfd398d7372b61278e1505bfbdfc5ab0f6511ef887a47a2c90c13475eae585da
+size 116988
diff --git a/packages/next/app/fonts/InterFont/InterDisplay-Light.woff2 b/packages/next/app/fonts/InterFont/InterDisplay-Light.woff2
new file mode 100644
index 0000000..c1cdf65
--- /dev/null
+++ b/packages/next/app/fonts/InterFont/InterDisplay-Light.woff2
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:01dd2d491ed863177e61f6e9458813baa85453ad97b32c5c1216927d4eebfe65
+size 112976
diff --git a/packages/next/app/fonts/InterFont/InterDisplay-LightItalic.woff2 b/packages/next/app/fonts/InterFont/InterDisplay-LightItalic.woff2
new file mode 100644
index 0000000..84336f7
--- /dev/null
+++ b/packages/next/app/fonts/InterFont/InterDisplay-LightItalic.woff2
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:59b5be56306fd353d067aa6995c2c92bc3feb3ace73684d94e3c6e73fe2beaac
+size 119692
diff --git a/packages/next/app/fonts/InterFont/InterDisplay-Medium.woff2 b/packages/next/app/fonts/InterFont/InterDisplay-Medium.woff2
new file mode 100644
index 0000000..cccb58b
--- /dev/null
+++ b/packages/next/app/fonts/InterFont/InterDisplay-Medium.woff2
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:f1227907684853882ad00d7f97ce9f64bc17b89a2a291a7d4ec84fccfa442934
+size 113476
diff --git a/packages/next/app/fonts/InterFont/InterDisplay-MediumItalic.woff2 b/packages/next/app/fonts/InterFont/InterDisplay-MediumItalic.woff2
new file mode 100644
index 0000000..7d96b60
--- /dev/null
+++ b/packages/next/app/fonts/InterFont/InterDisplay-MediumItalic.woff2
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:6bf254c1a65c806c019f52818add66747da83595a314112917911bcf5fa2f5c5
+size 120560
diff --git a/packages/next/app/fonts/InterFont/InterDisplay-Regular.woff2 b/packages/next/app/fonts/InterFont/InterDisplay-Regular.woff2
new file mode 100644
index 0000000..8112f1d
--- /dev/null
+++ b/packages/next/app/fonts/InterFont/InterDisplay-Regular.woff2
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:3a9463a58c3e7ba1e3cd65b5dbff91a35c508ff78a104cd1121feff83efeb787
+size 108948
diff --git a/packages/next/app/fonts/InterFont/InterDisplay-SemiBold.woff2 b/packages/next/app/fonts/InterFont/InterDisplay-SemiBold.woff2
new file mode 100644
index 0000000..5b42dac
--- /dev/null
+++ b/packages/next/app/fonts/InterFont/InterDisplay-SemiBold.woff2
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:d9f63a82b826fb0117c92715c3a52a2d2247bc321bc39341420bf52d91e8277a
+size 113772
diff --git a/packages/next/app/fonts/InterFont/InterDisplay-SemiBoldItalic.woff2 b/packages/next/app/fonts/InterFont/InterDisplay-SemiBoldItalic.woff2
new file mode 100644
index 0000000..257b0fa
--- /dev/null
+++ b/packages/next/app/fonts/InterFont/InterDisplay-SemiBoldItalic.woff2
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:dd9d78314bdd5062302a73c7e2954008bab8158304fa7ac4f0ea8977b841dccb
+size 120468
diff --git a/packages/next/app/fonts/InterFont/InterDisplay-Thin.woff2 b/packages/next/app/fonts/InterFont/InterDisplay-Thin.woff2
new file mode 100644
index 0000000..18ede47
--- /dev/null
+++ b/packages/next/app/fonts/InterFont/InterDisplay-Thin.woff2
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:21cfe42e7f1031b410e247ed199f43fc362415af81b3a8e442a97f63b4dbe327
+size 108820
diff --git a/packages/next/app/fonts/InterFont/InterDisplay-ThinItalic.woff2 b/packages/next/app/fonts/InterFont/InterDisplay-ThinItalic.woff2
new file mode 100644
index 0000000..8b58c68
--- /dev/null
+++ b/packages/next/app/fonts/InterFont/InterDisplay-ThinItalic.woff2
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:eff21589eacf1f6a596191038d7b47b4dd2455a096b175bb3572ecb6d026a611
+size 116040
diff --git a/packages/next/app/fonts/InterFont/InterVariable-Italic.woff2 b/packages/next/app/fonts/InterFont/InterVariable-Italic.woff2
new file mode 100644
index 0000000..318e720
--- /dev/null
+++ b/packages/next/app/fonts/InterFont/InterVariable-Italic.woff2
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:e564f652916db6c139570fefb9524a77c4d48f30c92928de9db19b6b5c7a262a
+size 387976
diff --git a/packages/next/app/fonts/InterFont/InterVariable.woff2 b/packages/next/app/fonts/InterFont/InterVariable.woff2
new file mode 100644
index 0000000..e511e5e
--- /dev/null
+++ b/packages/next/app/fonts/InterFont/InterVariable.woff2
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:693b77d4f32ee9b8bfc995589b5fad5e99adf2832738661f5402f9978429a8e3
+size 352240
diff --git a/packages/next/app/fonts/MiSans/MiSans VF.woff2 b/packages/next/app/fonts/MiSans/MiSans VF.woff2
new file mode 100644
index 0000000..1cd2a1d
--- /dev/null
+++ b/packages/next/app/fonts/MiSans/MiSans VF.woff2	
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:09103434dc310743d51b5e66111848c75c76a00a5a5bc9e5d96200a7e63bf98b
+size 11870264
diff --git a/packages/next/app/fonts/MiSans/MiSans-Bold.woff2 b/packages/next/app/fonts/MiSans/MiSans-Bold.woff2
new file mode 100644
index 0000000..69fecf9
--- /dev/null
+++ b/packages/next/app/fonts/MiSans/MiSans-Bold.woff2
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:eb86bb54661547ed95a44ec099ab75f964a0b81e256845f56feaabf27541180b
+size 5067652
diff --git a/packages/next/app/fonts/MiSans/MiSans-Demibold.woff2 b/packages/next/app/fonts/MiSans/MiSans-Demibold.woff2
new file mode 100644
index 0000000..31b9d31
--- /dev/null
+++ b/packages/next/app/fonts/MiSans/MiSans-Demibold.woff2
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:d22e2de2e994f7ad7336820129e0a27a97840d3591fdc3a0fb6ba382d7dbb569
+size 4981184
diff --git a/packages/next/app/fonts/MiSans/MiSans-ExtraLight.woff2 b/packages/next/app/fonts/MiSans/MiSans-ExtraLight.woff2
new file mode 100644
index 0000000..bc1c234
--- /dev/null
+++ b/packages/next/app/fonts/MiSans/MiSans-ExtraLight.woff2
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:dc71ed05c3044ebdb3f69a5da9e8e1e0701f172837450d21157e3998e3eecce9
+size 4733240
diff --git a/packages/next/app/fonts/MiSans/MiSans-Heavy.woff2 b/packages/next/app/fonts/MiSans/MiSans-Heavy.woff2
new file mode 100644
index 0000000..a81da0d
--- /dev/null
+++ b/packages/next/app/fonts/MiSans/MiSans-Heavy.woff2
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:7891c8eb6cffe1910f239e4fc55646f5e1767445e1802a34d5f940977f5dd9ec
+size 4999800
diff --git a/packages/next/app/fonts/MiSans/MiSans-Light.woff2 b/packages/next/app/fonts/MiSans/MiSans-Light.woff2
new file mode 100644
index 0000000..f32ebaf
--- /dev/null
+++ b/packages/next/app/fonts/MiSans/MiSans-Light.woff2
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:d2918bcf6864e5a255c34f0ddbec83d32f4a7db9e7dfcff03ce6591ac540d3df
+size 4798348
diff --git a/packages/next/app/fonts/MiSans/MiSans-Medium.woff2 b/packages/next/app/fonts/MiSans/MiSans-Medium.woff2
new file mode 100644
index 0000000..be26a7f
--- /dev/null
+++ b/packages/next/app/fonts/MiSans/MiSans-Medium.woff2
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:abd794688489b3c3ceeb9d2f61d5d9d09ae25381f40945c3aa6d0683cd78a197
+size 4928036
diff --git a/packages/next/app/fonts/MiSans/MiSans-Normal.woff2 b/packages/next/app/fonts/MiSans/MiSans-Normal.woff2
new file mode 100644
index 0000000..98d4976
--- /dev/null
+++ b/packages/next/app/fonts/MiSans/MiSans-Normal.woff2
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:63c882e6994b4a572173881d777962418b803dc166d41405d77dba40b2d0dcd9
+size 4868672
diff --git a/packages/next/app/fonts/MiSans/MiSans-Regular.woff2 b/packages/next/app/fonts/MiSans/MiSans-Regular.woff2
new file mode 100644
index 0000000..89feb59
--- /dev/null
+++ b/packages/next/app/fonts/MiSans/MiSans-Regular.woff2
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:7d7a4ba4faf18306e446787c1ab1bd1e90c9f27bfa937cd8eb3469c7504e563f
+size 4847960
diff --git a/packages/next/app/fonts/MiSans/MiSans-Semibold.woff2 b/packages/next/app/fonts/MiSans/MiSans-Semibold.woff2
new file mode 100644
index 0000000..01869ac
--- /dev/null
+++ b/packages/next/app/fonts/MiSans/MiSans-Semibold.woff2
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:14505bb0c0db9b33fd636ae5c13e1d48ec4cdb51fe35c993a63b2629f6547819
+size 5016928
diff --git a/packages/next/app/fonts/MiSans/MiSans-Thin.woff2 b/packages/next/app/fonts/MiSans/MiSans-Thin.woff2
new file mode 100644
index 0000000..5370b32
--- /dev/null
+++ b/packages/next/app/fonts/MiSans/MiSans-Thin.woff2
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:d8684502229233359f74b3d273d84214368b270e73a3e068678ef29738c90f2c
+size 4470104
diff --git a/packages/next/app/fonts/MiSans/MiSans.css b/packages/next/app/fonts/MiSans/MiSans.css
new file mode 100644
index 0000000..9c80a29
--- /dev/null
+++ b/packages/next/app/fonts/MiSans/MiSans.css
@@ -0,0 +1,88 @@
+@font-face {
+    font-family: "MiSans VF";
+    font-style: normal;
+    font-weight: 150 700;
+    font-display: swap;
+    src: url("MiSans VF.woff2") format("woff2");
+}
+
+
+@font-face {
+    font-family: "MiSans";
+    font-style: normal;
+    font-weight: 100;
+    font-display: swap;
+    src: url("MiSans-Thin.woff2") format("woff2");
+}
+
+@font-face {
+    font-family: "MiSans";
+    font-style: normal;
+    font-weight: 200;
+    font-display: swap;
+    src: url("MiSans-ExtraLight.woff2") format("woff2");
+}
+
+@font-face {
+    font-family: "MiSans";
+    font-style: normal;
+    font-weight: 300;
+    font-display: swap;
+    src: url("MiSans-Light.woff2") format("woff2");
+}
+
+@font-face {
+    font-family: "MiSans";
+    font-style: normal;
+    font-weight: 360;
+    font-display: swap;
+    src: url("MiSans-Normal.woff2") format("woff2");
+}
+
+@font-face {
+    font-family: "MiSans";
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src: url("MiSans-Regular.woff2") format("woff2");
+}
+
+@font-face {
+    font-family: "MiSans";
+    font-style: normal;
+    font-weight: 500;
+    font-display: swap;
+    src: url("MiSans-Medium.woff2") format("woff2");
+}
+
+@font-face {
+    font-family: "MiSans";
+    font-style: normal;
+    font-weight: 600;
+    font-display: swap;
+    src: url("MiSans-Demibold.woff2") format("woff2");
+}
+
+@font-face {
+    font-family: "MiSans";
+    font-style: normal;
+    font-weight: 700;
+    font-display: swap;
+    src: url("MiSans-Semibold.woff2") format("woff2");
+}
+
+@font-face {
+    font-family: "MiSans";
+    font-style: normal;
+    font-weight: 800;
+    font-display: swap;
+    src: url("MiSans-Bold.woff2") format("woff2");
+}
+
+@font-face {
+    font-family: "MiSans";
+    font-style: normal;
+    font-weight: 900;
+    font-display: swap;
+    src: url("MiSans-Heavy.woff2") format("woff2");
+}
\ No newline at end of file
diff --git a/packages/next/app/globals.css b/packages/next/app/globals.css
index 9a2207c..0b12f9a 100644
--- a/packages/next/app/globals.css
+++ b/packages/next/app/globals.css
@@ -1,105 +1,84 @@
+@import url("./fonts/InterFont/Inter.css");
+@import url("./fonts/MiSans/MiSans.css");
+
 @import "tailwindcss";
 
 @theme {
-	--color-surface-container-high: #f7e4e1;
-	--color-on-surface-variant: #534341;
-	--color-dark-on-surface-variant: #d8c2be;
-	--color-dark-surface-container-high: #322826;
-	--color-dark-surface-container: #271d1c;
-	--color-surface-container: #fceae7;
-	--color-on-surface: #231918;
-	--color-dark-on-surface: #f1dfdc;
+	--color-background: #fff8f6;
+	--color-on-background: #2a1613;
 	--color-surface: #fff8f6;
-	--color-dark-surface: #1a1110;
-	--color-primary: #904b40;
-	--color-dark-primary: #ffb2b7;
-	--color-primary-container: #ffdad4;
-	--color-dark-primary-container: #73342a;
+	--color-surface-dim: #f7d2cc;
+	--color-surface-bright: #fff8f6;
+	--color-surface-container-lowest: #ffffff;
+	--color-surface-container-low: #fff0ee;
+	--color-surface-container: #ffe9e6;
+	--color-surface-container-high: #ffe2dd;
+	--color-surface-container-highest: #ffdad4;
+	--color-on-surface: #2a1613;
+	--color-surface-variant: #ffdad4;
+	--color-on-surface-variant: #5f3e39;
+	--color-inverse-surface: #422b27;
+	--color-inverse-on-surface: #ffedea;
+	--color-outline: #946e68;
+	--color-outline-variant: #eabcb4;
+	--color-shadow: #000000;
+	--color-scrim: #000000;
+	--color-surface-tint: #c00100;
+	--color-primary: #a50100;
 	--color-on-primary: #ffffff;
-	--color-dark-on-primary: #561e16;
-	--color-dark-primary-fixed-dim: #ffb4a8;
-	--color-secondary-container: #ffdad4;
-	--color-dark-secondary-container: #5d3f3b;
+	--color-primary-container: #eb0000;
+	--color-on-primary-container: #ffffff;
+	--color-inverse-primary: #ffb4a8;
+	--color-secondary: #b4271a;
+	--color-on-secondary: #ffffff;
+	--color-secondary-container: #ff7460;
+	--color-on-secondary-container: #2f0000;
+	--color-tertiary: #6f4800;
+	--color-on-tertiary: #ffffff;
+	--color-tertiary-container: #9f6900;
+	--color-on-tertiary-container: #ffffff;
+	--color-error: #ba1a1a;
+	--color-on-error: #ffffff;
+	--color-error-container: #ffdad6;
+	--color-on-error-container: #410002;
 
-	--color-surface-tint: rgb(144 75 64);
-	--color-dark-surface-tint: rgb(255 180 168);
-	--color-on-primary-container: rgb(115 52 42);
-	--color-dark-on-primary-container: rgb(255 218 212);
-	--color-secondary: rgb(119 86 81);
-	--color-dark-secondary: rgb(231 189 182);
-	--color-on-secondary: rgb(255 255 255);
-	--color-dark-on-secondary: rgb(68 41 37);
-	--color-on-secondary-container: rgb(93 63 59);
-	--color-dark-on-secondary-container: rgb(255 218 212);
-	--color-tertiary: rgb(112 92 46);
-	--color-dark-tertiary: rgb(222 196 140);
-	--color-on-tertiary: rgb(255 255 255);
-	--color-dark-on-tertiary: rgb(62 46 4);
-	--color-tertiary-container: rgb(251 223 166);
-	--color-dark-tertiary-container: rgb(86 68 25);
-	--color-on-tertiary-container: rgb(86 68 25);
-	--color-dark-on-tertiary-container: rgb(251 223 166);
-	--color-error: rgb(186 26 26);
-	--color-dark-error: rgb(255 180 171);
-	--color-on-error: rgb(255 255 255);
-	--color-dark-on-error: rgb(105 0 5);
-	--color-error-container: rgb(255 218 214);
-	--color-dark-error-container: rgb(147 0 10);
-	--color-on-error-container: rgb(147 0 10);
-	--color-dark-on-error-container: rgb(255 218 214);
-	--color-background: rgb(255 248 246);
-	--color-dark-background: rgb(26 17 16);
-	--color-on-background: rgb(35 25 24);
-	--color-dark-on-background: rgb(241 223 220);
-	--color-surface-variant: rgb(245 221 218);
-	--color-dark-surface-variant: rgb(83 67 65);
-	--color-outline: rgb(133 115 112);
-	--color-dark-outline: rgb(160 140 137);
-	--color-outline-variant: rgb(216 194 190);
-	--color-dark-outline-variant: rgb(83 67 65);
-	--color-shadow: rgb(0 0 0);
-	--color-dark-shadow: rgb(0 0 0);
-	--color-scrim: rgb(0 0 0);
-	--color-dark-scrim: rgb(0 0 0);
-	--color-inverse-surface: rgb(57 46 44);
-	--color-dark-inverse-surface: rgb(241 223 220);
-	--color-inverse-on-surface: rgb(255 237 234);
-	--color-dark-inverse-on-surface: rgb(57 46 44);
-	--color-inverse-primary: rgb(255 180 168);
-	--color-dark-inverse-primary: rgb(144 75 64);
-	--color-primary-fixed: rgb(255 218 212);
-	--color-dark-primary-fixed: rgb(255 218 212);
-	--color-on-primary-fixed: rgb(58 9 5);
-	--color-dark-on-primary-fixed: rgb(58 9 5);
-	--color-primary-fixed-dim: rgb(255 180 168);
-	--color-on-primary-fixed-variant: rgb(115 52 42);
-	--color-dark-on-primary-fixed-variant: rgb(115 52 42);
-	--color-secondary-fixed: rgb(255 218 212);
-	--color-dark-secondary-fixed: rgb(255 218 212);
-	--color-on-secondary-fixed: rgb(44 21 18);
-	--color-dark-on-secondary-fixed: rgb(44 21 18);
-	--color-secondary-fixed-dim: rgb(231 189 182);
-	--color-dark-secondary-fixed-dim: rgb(231 189 182);
-	--color-on-secondary-fixed-variant: rgb(93 63 59);
-	--color-dark-on-secondary-fixed-variant: rgb(93 63 59);
-	--color-tertiary-fixed: rgb(251 223 166);
-	--color-dark-tertiary-fixed: rgb(251 223 166);
-	--color-on-tertiary-fixed: rgb(37 26 0);
-	--color-dark-on-tertiary-fixed: rgb(37 26 0);
-	--color-tertiary-fixed-dim: rgb(222 196 140);
-	--color-dark-tertiary-fixed-dim: rgb(222 196 140);
-	--color-on-tertiary-fixed-variant: rgb(86 68 25);
-	--color-dark-on-tertiary-fixed-variant: rgb(86 68 25);
-	--color-surface-dim: rgb(232 214 211);
-	--color-dark-surface-dim: rgb(26 17 16);
-	--color-surface-bright: rgb(255 248 246);
-	--color-dark-surface-bright: rgb(66 55 53);
-	--color-surface-container-lowest: rgb(255 255 255);
-	--color-dark-surface-container-lowest: rgb(20 12 11);
-	--color-surface-container-low: rgb(255 240 238);
-	--color-dark-surface-container-low: rgb(35 25 24);
-	--color-surface-container-highest: rgb(241 223 220);
-	--color-dark-surface-container-highest: rgb(61 50 48);
+	--color-dark-background: #210e0b;
+	--color-dark-on-background: #ffdad4;
+	--color-dark-surface: #210e0b;
+	--color-dark-surface-dim: #210e0b;
+	--color-dark-surface-bright: #4b332f;
+	--color-dark-surface-container-lowest: #1b0907;
+	--color-dark-surface-container-low: #2a1613;
+	--color-dark-surface-container: #2f1a17;
+	--color-dark-surface-container-high: #3a2421;
+	--color-dark-surface-container-highest: #462f2b;
+	--color-dark-on-surface: #ffdad4;
+	--color-dark-surface-variant: #5f3e39;
+	--color-dark-on-surface-variant: #eabcb4;
+	--color-dark-inverse-surface: #ffdad4;
+	--color-dark-inverse-on-surface: #422b27;
+	--color-dark-outline: #b08780;
+	--color-dark-outline-variant: #5f3e39;
+	--color-dark-shadow: #000000;
+	--color-dark-scrim: #000000;
+	--color-dark-surface-tint: #ffb4a8;
+	--color-dark-primary: #ffb4a8;
+	--color-dark-on-primary: #690000;
+	--color-dark-primary-container: #de0000;
+	--color-dark-on-primary-container: #ffffff;
+	--color-dark-inverse-primary: #c00100;
+	--color-dark-secondary: #ffb4a8;
+	--color-dark-on-secondary: #690000;
+	--color-dark-secondary-container: #870100;
+	--color-dark-on-secondary-container: #ffc9c0;
+	--color-dark-tertiary: #feba54;
+	--color-dark-on-tertiary: #452b00;
+	--color-dark-tertiary-container: #966300;
+	--color-dark-on-tertiary-container: #ffffff;
+	--color-dark-error: #ffb4ab;
+	--color-dark-on-error: #690005;
+	--color-dark-error-container: #93000a;
+	--color-dark-on-error-container: #ffdad6;
 
 	--font-zh: "InterVariable", "MiSans VF", sans-serif;
 }
diff --git a/packages/next/app/signup/SignUpForm.tsx b/packages/next/app/signup/SignUpForm.tsx
index 2f834d4..28ccddc 100644
--- a/packages/next/app/signup/SignUpForm.tsx
+++ b/packages/next/app/signup/SignUpForm.tsx
@@ -6,6 +6,9 @@ import LoadingSpinner from "@/components/icons/LoadingSpinner";
 import { computeVdfInWorker } from "@/lib/vdf";
 import useSWR from "swr";
 import { ApiRequestError } from "@/lib/net";
+import { Portal } from "@/components/utils/Portal";
+import { Dialog, DialogHeadline, DialogSupportingText } from "@/components/ui/Dialog";
+import { FilledButton } from "@/components/ui/Buttons/FilledButton";
 
 interface CaptchaSessionResponse {
 	g: string;
@@ -38,6 +41,8 @@ const SignUpForm: React.FC<RegistrationFormProps> = ({ backendURL }) => {
 	const [password, setPassword] = useState("");
 	const [nickname, setNickname] = useState("");
 	const [loading, setLoading] = useState(false);
+	const [showDialog, setShowDialog] = useState(false);
+	const [dialogContent, setDialogContent] = useState(<></>);
 
 	const {
 		data: captchaSession,
@@ -83,15 +88,13 @@ const SignUpForm: React.FC<RegistrationFormProps> = ({ backendURL }) => {
 			const registrationResponse = await fetch(registrationUrl.toString(), {
 				method: "POST",
 				headers: {
-					"Content-Type": "application/json"
+					"Content-Type": "application/json",
+					Authorization: `Bearer ${captchaResult.token}`
 				},
 				body: JSON.stringify({
 					username,
 					password,
-					nickname,
-					// Include the captcha result if needed by the backend
-					captchaId: captchaSession.id,
-					captchaAnswer: ans.result.toString()
+					nickname
 				})
 			});
 
@@ -141,15 +144,32 @@ const SignUpForm: React.FC<RegistrationFormProps> = ({ backendURL }) => {
 				supportingText="昵称可以重复。"
 				maxChar={30}
 			/>
-			<button
-				className="bg-primary dark:bg-dark-primary text-on-primary dark:text-dark-on-primary duration-150
-                    rounded-full hover:bg-on-primary-container hover:dark:bg-dark-on-primary-container mt-2
-                    flex items-center text-sm leading-5 justify-center h-10 w-full"
-				type="submit"
-				disabled={loading}
+			<FilledButton
+				type="button"
+				onClick={() => {
+					setShowDialog(true);
+					setDialogContent(
+						<>
+							<DialogHeadline>Error</DialogHeadline>
+							<DialogSupportingText>
+								<p>Your operation frequency is too high. Please try again later. (RATE_LIMIT_EXCEED)</p>
+							</DialogSupportingText>
+						</>
+					);
+				}}
+				size="m"
+				shape="square"
 			>
+				Show Dialog
+			</FilledButton>
+			<FilledButton type="submit" disabled={loading}>
 				{!loading ? <span>注册</span> : <LoadingSpinner />}
-			</button>
+			</FilledButton>
+			<Portal>
+				<Dialog show={showDialog} onClose={() => setShowDialog(false)}>
+					{dialogContent}
+				</Dialog>
+			</Portal>
 		</form>
 	);
 };
diff --git a/packages/next/components/shell/Header.tsx b/packages/next/components/shell/Header.tsx
index d7b8f81..2ce8990 100644
--- a/packages/next/components/shell/Header.tsx
+++ b/packages/next/components/shell/Header.tsx
@@ -6,14 +6,17 @@ import LogoMobileLight from "@/public/icons/TitleBar Mobile Light.svg";
 import LogoMobileDark from "@/public/icons/TitleBar Mobile Dark.svg";
 import DarkModeImage from "@/components/utils/DarkModeImage";
 import React, { useState } from "react";
-import { NavigationDrawer } from "@/components/shell/NavigatinDrawer";
+import { NavigationDrawer } from "@/components/ui/NavigatinDrawer";
 import { Portal } from "@/components/utils/Portal";
 import { RegisterIcon } from "@/components/icons/RegisterIcon";
 import { SearchBox } from "@/components/ui/SearchBox";
 import { MenuIcon } from "@/components/icons/MenuIcon";
 import { SearchIcon } from "@/components/icons/SearchIcon";
-import { InfoIcon } from "../icons/InfoIcon";
-import { HomeIcon } from "../icons/HomeIcon";
+import { InfoIcon } from "@/components/icons/InfoIcon";
+import { HomeIcon } from "@/components/icons/HomeIcon";
+import { TextButton } from "@/components/ui/Buttons/TextButton";
+import { useRouter } from "next/navigation";
+import Link from "next/link";
 
 export const HeaderDestop = () => {
 	return (
@@ -45,37 +48,46 @@ export const HeaderDestop = () => {
 export const HeaderMobile = () => {
 	const [showDrawer, setShowDrawer] = useState(false);
 	const [showsearchBox, setShowsearchBox] = useState(false);
+
 	return (
 		<>
 			<Portal>
 				<NavigationDrawer show={showDrawer} onClose={() => setShowDrawer(false)}>
-					<div className="flex flex-col w-full">
-						<div className="w-full h-14 flex items-center px-4 mt-1 pl-5">
+					<div className="flex flex-col w-full gap-2">
+						<div className="w-full h-14 flex items-center px-4 mt-3 pl-6">
 							<DarkModeImage
 								lightSrc={LogoMobileLight}
 								darkSrc={LogoMobileDark}
 								alt="Logo"
-								className="w-24 h-8"
+								className="w-30 h-10"
 							/>
 						</div>
-						<div className="w-full h-14 flex items-center px-4">
-							<a href="/" className="flex">
-								<HomeIcon className="text-2xl pr-4" />
-								<span>首页</span>
-							</a>
-						</div>
-						<div className="w-full h-14 flex items-center px-4">
-							<a href="/about" className="flex">
-								<InfoIcon className="text-2xl pr-4" />
-								<span>关于</span>
-							</a>
-						</div>
-						<div className="w-full h-14 flex items-center px-4">
-							<a href="/signup" className="flex">
-								<RegisterIcon className="text-2xl pr-4" />
-								<span>注册</span>
-							</a>
-						</div>
+
+						<Link href="/">
+							<TextButton className="w-full h-14 flex px-4 justify-start" size="m">
+								<div className="flex items-center">
+									<HomeIcon className="text-2xl pr-4" />
+									<span>首页</span>
+								</div>
+							</TextButton>
+						</Link>
+						<Link href="/about">
+							<TextButton className="w-full h-14 flex px-4 justify-start" size="m">
+								<div className="flex items-center">
+									<InfoIcon className="text-2xl pr-4" />
+									<span>关于</span>
+								</div>
+							</TextButton>
+						</Link>
+
+						<Link href="/signup">
+							<TextButton className="w-full h-14 flex px-4 justify-start" size="m">
+								<div className="flex items-center">
+									<RegisterIcon className="text-2xl pr-4" />
+									<span>注册</span>
+								</div>
+							</TextButton>
+						</Link>
 					</div>
 				</NavigationDrawer>
 			</Portal>
diff --git a/packages/next/components/ui/Buttons/FilledButton.tsx b/packages/next/components/ui/Buttons/FilledButton.tsx
new file mode 100644
index 0000000..2484b0c
--- /dev/null
+++ b/packages/next/components/ui/Buttons/FilledButton.tsx
@@ -0,0 +1,41 @@
+import useRipple from "@/components/utils/useRipple";
+
+interface FilledButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+	size?: "xs" | "s" | "m" | "l" | "xl";
+	shape?: "round" | "square";
+	children?: React.ReactNode;
+	ripple?: boolean;
+}
+
+export const FilledButton = ({
+	children,
+	size = "s",
+	shape = "round",
+	className,
+	ripple = true,
+	...rest
+}: FilledButtonProps) => {
+	let sizeClasses = "text-sm leading-5 h-10 px-4";
+	let shapeClasses = "rounded-full";
+
+	if (size === "m") {
+		sizeClasses = "text-base leading-6 h-14 px-6";
+		shapeClasses = shape === "round" ? "rounded-full" : "rounded-2xl";
+	}
+
+	const { onMouseDown, onTouchStart } = useRipple({ ripple });
+
+	return (
+		<button
+			className={`bg-primary dark:bg-dark-primary text-on-primary dark:text-dark-on-primary duration-150 select-none
+				flex items-center justify-center relative overflow-hidden
+				${sizeClasses} ${shapeClasses} ${className}`}
+			{...rest}
+			onMouseDown={onMouseDown}
+			onTouchStart={onTouchStart}
+		>
+			<div className="absolute w-full h-full hover:bg-on-surface-variant/10"></div>
+			{children}
+		</button>
+	);
+};
diff --git a/packages/next/components/ui/Buttons/TextButton.tsx b/packages/next/components/ui/Buttons/TextButton.tsx
new file mode 100644
index 0000000..0ee83e2
--- /dev/null
+++ b/packages/next/components/ui/Buttons/TextButton.tsx
@@ -0,0 +1,41 @@
+import useRipple from "@/components/utils/useRipple";
+
+interface TextButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+	size?: "xs" | "s" | "m" | "l" | "xl";
+	shape?: "round" | "square";
+	children?: React.ReactNode;
+	ripple?: boolean;
+}
+
+export const TextButton = ({
+	children,
+	size = "s",
+	shape = "round",
+	className,
+	ripple = true,
+	...rest
+}: TextButtonProps) => {
+	let sizeClasses = "text-sm leading-5 h-10 px-4";
+	let shapeClasses = "rounded-full";
+
+	if (size === "m") {
+		sizeClasses = "text-base leading-6 h-14 px-6";
+		shapeClasses = shape === "round" ? "rounded-full" : "rounded-2xl";
+	}
+
+	const { onMouseDown, onTouchStart } = useRipple({ ripple });
+
+	return (
+		<button
+			className={`text-primary dark:text-dark-primary duration-150 select-none
+				flex items-center justify-center relative overflow-hidden
+				${sizeClasses} ${shapeClasses} ${className}`}
+			{...rest}
+			onMouseDown={onMouseDown}
+			onTouchStart={onTouchStart}
+		>
+			<div className="absolute w-full h-full hover:bg-primary/10"></div>
+			{children}
+		</button>
+	);
+};
diff --git a/packages/next/components/ui/Dialog.tsx b/packages/next/components/ui/Dialog.tsx
new file mode 100644
index 0000000..1fc3d25
--- /dev/null
+++ b/packages/next/components/ui/Dialog.tsx
@@ -0,0 +1,57 @@
+import { motion, AnimatePresence } from "framer-motion";
+import React, { useEffect, useRef } from "react";
+import { TextButton } from "./Buttons/TextButton";
+
+interface DialogProps {
+	show: boolean;
+	onClose: () => void;
+	children?: React.ReactNode;
+}
+
+interface DialogHeadlineProps {
+	children?: React.ReactNode;
+}
+
+interface DialogSupportingTextProps {
+	children?: React.ReactNode;
+}
+
+export const DialogHeadline: React.FC<DialogHeadlineProps> = ({ children }: DialogHeadlineProps) => {
+	return <h2 className="text-2xl leading-8 text-on-surface dark:text-dark-on-surface">{children}</h2>;
+};
+
+export const DialogSupportingText: React.FC<DialogSupportingTextProps> = ({ children }: DialogHeadlineProps) => {
+	return <div className="mt-4 text-sm leading-5 mb-6">{children}</div>;
+};
+export const Dialog: React.FC<DialogProps> = ({ show, onClose, children }: DialogProps) => {
+	return (
+		<AnimatePresence>
+			{show && (
+				<div className="w-full h-full top-0 left-0 absolute flex items-center justify-center">
+					<motion.div
+						className="fixed top-0 left-0 w-full h-full z-40 bg-black/20 pointer-none"
+						aria-hidden="true"
+						initial={{ opacity: 0 }}
+						animate={{ opacity: 1 }}
+						exit={{ opacity: 0 }}
+						transition={{ duration: 0.3 }}
+					/>
+					<motion.div
+						className="fixed min-w-[17.5rem] sm:max-w-[35rem] h-auto z-50 bg-surface-container-high
+					    shadow-xl shadow-shadow/5 rounded-[1.75rem] p-6 dark:bg-dark-surface-container-high mx-2"
+						initial={{ opacity: 0.5, transform: "scale(0.9)" }}
+						animate={{ opacity: 1, transform: "scale(1)" }}
+						exit={{ opacity: 0 }}
+						transition={{ ease: [0.31, 0.69, 0.3, 1.02], duration: 0.3 }}
+					>
+						{children}
+						<div className="flex justify-end gap-2">
+							<TextButton onClick={onClose}>Action 1</TextButton>
+							<TextButton onClick={onClose}>Action 2</TextButton>
+						</div>
+					</motion.div>
+				</div>
+			)}
+		</AnimatePresence>
+	);
+};
diff --git a/packages/next/components/shell/NavigatinDrawer.tsx b/packages/next/components/ui/NavigatinDrawer.tsx
similarity index 78%
rename from packages/next/components/shell/NavigatinDrawer.tsx
rename to packages/next/components/ui/NavigatinDrawer.tsx
index 5e7967b..3be7013 100644
--- a/packages/next/components/shell/NavigatinDrawer.tsx
+++ b/packages/next/components/ui/NavigatinDrawer.tsx
@@ -8,11 +8,11 @@ interface DrawerProps {
 }
 
 export const NavigationDrawer = ({ show = false, onClose, children }: DrawerProps) => {
-	const coverRef = useRef<HTMLDivElement>(null);
+	const scrimRef = useRef<HTMLDivElement>(null);
 
 	useEffect(() => {
 		const handleOutsideClick = (event: MouseEvent) => {
-			if (show && coverRef.current && event.target === coverRef.current) {
+			if (show && scrimRef.current && event.target === scrimRef.current) {
 				onClose();
 			}
 		};
@@ -27,9 +27,9 @@ export const NavigationDrawer = ({ show = false, onClose, children }: DrawerProp
 		<AnimatePresence>
 			{show && (
 				<>
-					{/* Backdrop - Fade in/out */}
+					{/* Scrim - Fade in/out */}
 					<motion.div
-						ref={coverRef}
+						ref={scrimRef}
 						className="fixed top-0 left-0 w-full h-full z-40 bg-black/10"
 						aria-hidden="true"
 						initial={{ opacity: 0 }}
@@ -41,12 +41,12 @@ export const NavigationDrawer = ({ show = false, onClose, children }: DrawerProp
 
 					{/* Drawer - Slide from left */}
 					<motion.div
-						className="fixed top-0 left-0 h-full bg-[#fff0ee] dark:bg-[#231918] z-50"
+						className="fixed top-0 left-0 h-full bg-surface-container-low dark:bg-dark-surface-container-low z-50"
 						style={{ width: "min(22.5rem, 70vw)" }}
 						initial={{ x: -500, opacity: 0 }}
 						animate={{ x: 0, opacity: 1 }}
 						exit={{ x: -500, opacity: 0 }}
-						transition={{ type: "spring", stiffness: 438, damping: 46 }}
+						transition={{ duration: 0.25, ease: ["easeOut", "easeOut"] }}
 						role="dialog"
 						aria-modal="true"
 					>
diff --git a/packages/next/components/ui/SearchBox.tsx b/packages/next/components/ui/SearchBox.tsx
index f6e1444..2387a21 100644
--- a/packages/next/components/ui/SearchBox.tsx
+++ b/packages/next/components/ui/SearchBox.tsx
@@ -42,7 +42,7 @@ export const SearchBox: React.FC<SearchBoxProps> = ({ close = () => {} }) => {
 		>
 			<div
 				className="w-full h-10 lg:h-12 px-4 rounded-full bg-surface-container-high
-				    dark:bg-zinc-800/70 backdrop-blur-lg flex justify-between md:px-5"
+				    dark:bg-dark-surface-container-high backdrop-blur-lg flex justify-between md:px-5"
 			>
 				<button className="w-6" onClick={() => search(inputValue)}>
 					<SearchIcon
diff --git a/packages/next/components/utils/ripple.css b/packages/next/components/utils/ripple.css
new file mode 100644
index 0000000..4f44890
--- /dev/null
+++ b/packages/next/components/utils/ripple.css
@@ -0,0 +1,15 @@
+.ripple {
+	position: absolute;
+	border-radius: 50%;
+	transform: scale(0);
+	opacity: 0.2;
+	animation: ripple-effect 0.8s linear;
+	background-color: currentColor;
+}
+
+@keyframes ripple-effect {
+	to {
+		transform: scale(4);
+		opacity: 0;
+	}
+}
diff --git a/packages/next/components/utils/useRipple.tsx b/packages/next/components/utils/useRipple.tsx
new file mode 100644
index 0000000..10887e8
--- /dev/null
+++ b/packages/next/components/utils/useRipple.tsx
@@ -0,0 +1,90 @@
+import "./ripple.css";
+
+import { useCallback, useRef } from "react";
+
+interface UseRippleOptions {
+	ripple?: boolean;
+}
+
+const useRipple = ({ ripple = true }: UseRippleOptions = {}) => {
+	const isTouchEventRef = useRef(false);
+
+	const resetTouchFlag = useCallback(() => {
+		isTouchEventRef.current = false;
+	}, []);
+
+	const handleMouseDown = useCallback(
+		(event: React.MouseEvent<HTMLButtonElement>) => {
+			if (!ripple) return;
+
+			if (isTouchEventRef.current) {
+				// Skip mouse event if this was a touch interaction
+				return;
+			}
+
+			// Proceed with mouse ripple
+			createRippleEffect(event);
+		},
+		[ripple]
+	);
+
+	const handleTouchStart = useCallback(
+		(event: React.TouchEvent<HTMLButtonElement>) => {
+			if (!ripple) return;
+
+			isTouchEventRef.current = true;
+
+			// Proceed with touch ripple
+			createRippleEffect(event);
+		},
+		[ripple, resetTouchFlag]
+	);
+
+	const handleTouchEnd = useCallback(
+		(_event: React.TouchEvent<HTMLButtonElement>) => {
+			if (!ripple) return;
+
+			isTouchEventRef.current = false;
+		},
+		[ripple, resetTouchFlag]
+	);
+
+	const createRippleEffect = (event: React.MouseEvent<HTMLButtonElement> | React.TouchEvent<HTMLButtonElement>) => {
+		const target = event.currentTarget;
+		const rect = target.getBoundingClientRect();
+
+		let x = 0;
+		let y = 0;
+
+		if ("touches" in event) {
+			x = event.touches[0].clientX - rect.left;
+			y = event.touches[0].clientY - rect.top;
+		} else {
+			x = event.clientX - rect.left;
+			y = event.clientY - rect.top;
+		}
+
+		const diameter = Math.max(rect.width, rect.height);
+		const rippleElement = document.createElement("span");
+
+		rippleElement.style.width = `${diameter}px`;
+		rippleElement.style.height = `${diameter}px`;
+		rippleElement.style.left = `${x - diameter / 2}px`;
+		rippleElement.style.top = `${y - diameter / 2}px`;
+		rippleElement.classList.add("ripple");
+
+		target.appendChild(rippleElement);
+
+		rippleElement.addEventListener("animationend", () => {
+			rippleElement.remove();
+		});
+	};
+
+	return {
+		onMouseDown: ripple ? handleMouseDown : undefined,
+		onTouchStart: ripple ? handleTouchStart : undefined,
+		ontouchend: ripple ? handleTouchEnd : undefined
+	};
+};
+
+export default useRipple;