feat: add plan card

MirrorChyan · Jan 13, 2025 · b6cf46d · b6cf46d
1 parent 64faa6c
commit b6cf46d
Show file tree

Hide file tree

Showing 13 changed files with 484 additions and 31 deletions.
diff --git a/.npmrc b/.npmrc
@@ -0,0 +1 @@
+public-hoist-pattern[]=*@nextui-org/*
diff --git a/eslint.config.mjs b/eslint.config.mjs
@@ -10,7 +10,12 @@ const compat = new FlatCompat({
 });
 
 const eslintConfig = [
-  ...compat.extends("next/core-web-vitals", "next/typescript"),
+  ...compat.config({
+    extends: ["next/core-web-vitals", "next/typescript"],
+    rules: {
+      "@typescript-eslint/no-unused-vars": "off",
+    },
+  }),
 ];
 
 export default eslintConfig;
diff --git a/messages/en.json b/messages/en.json
@@ -1,7 +1,7 @@
 {
   "GetStart": {
     "title": "Distribute your App with MirrorChyan",
-    "description": "MirrorChyan is an open-source App distribution platform that you can use to distribute your App.",
+    "description": "MirrorChyan is an App distribution platform that you can use to distribute your App.",
     "getStart": "Get Started",
     "apiDoc": "API Documentation"
   },

diff --git a/messages/zh.json b/messages/zh.json
@@ -1,15 +1,15 @@
 {
   "GetStart": {
     "title": "使用MirrorChyan分发你的App",
-    "description": "MirrorChyan是一个开源的App分发平台，你可以使用它来分发你的App。",
+    "description": "MirrorChyan是一个App分发平台，你可以使用它来分发你的App。",
     "getStart": "开始使用",
-    "apiDoc": "API文档"
+    "apiDoc": "API文档",
+    "becomeSponsor": "到爱发电赞助"
   },
   "GetKey": {
     "title": "欢迎使用MirrorChyan",
     "orderId": "订单号",
-    "getKey": "获取API Key",
-    "becomeSponsor": "到爱发电赞助"
+    "getKey": "获取API Key"
   },
   "ShowKey": {
     "thanksForSponsor": "感谢您的赞助",

diff --git a/package.json b/package.json
@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "next dev --turbopack",
+    "dev": "next dev",
     "build": "next build",
     "start": "next start",
     "lint": "next lint",

diff --git a/src/app/[locale]/get-key/page.tsx b/src/app/[locale]/get-key/page.tsx
@@ -7,9 +7,10 @@ import { Link } from "@/i18n/routing"
 export default function GetKey() {
   const t = useTranslations('GetKey')
   const [orderId, setOrderId] = useState('')
+
   return (
     <>
-      <div className="flex min-h-screen flex-1 flex-col justify-center relative">
+      <div className="px-3 flex min-h-screen flex-1 flex-col justify-center relative">
         <div className="sm:mx-auto sm:w-full sm:max-w-sm">
           <h2 className="mt-10 text-center text-2xl/9 font-bold tracking-tight">
             {t('title')}
@@ -40,12 +41,6 @@ export default function GetKey() {
               </button>
             </Link>
           </form>
-
-          <p className="mt-10 text-center text-sm/6 text-gray-400">
-            <a href="https://afdian.com/a/misteo?tab=shop" className="font-semibold text-indigo-400 hover:text-indigo-300">
-              {t('becomeSponsor')}
-            </a>
-          </p>
         </div>
       </div>
     </>

diff --git a/src/app/[locale]/get-start/page.tsx b/src/app/[locale]/get-start/page.tsx
@@ -1,13 +1,52 @@
-import { BackgroundLines } from "@/components/BackgroundLines"
+import { BackgroundBeamsWithCollision } from "@/components/BackgroundBeamsWithCollision"
+import { FlipWords } from "@/components/FlipWord"
 import { Link } from "@/i18n/routing"
+import { cn } from "@/lib/utils/css"
 import { useTranslations } from "next-intl"
+// import { CheckIcon } from '@heroicons/react/20/solid'
 
 export default function GetStart() {
   const t = useTranslations('GetStart')
+
+  const plans = [
+    {
+      name: 'Mirror酱日卡',
+      price: '￥2.37',
+      itemId: '83f9d3b8cac611ef8fc352540025c377',
+      description: '感谢投喂',
+      tmoji: '( •̀ ω •́ )✧',
+      mostPopular: false,
+    },
+    {
+      name: 'Mirror酱月卡',
+      price: '￥2.97',
+      itemId: '3134f94ac9aa11ef9d725254001e7c00',
+      description: 'Mirror酱的零食罐头',
+      tmoji: 'o((>ω< ))o',
+      mostPopular: false,
+    },
+    {
+      name: 'Mirror酱季卡',
+      price: '￥3.87',
+      itemId: '9e6c7b28c9aa11efb47452540025c377',
+      description: 'Mirror酱的午餐盒',
+      tmoji: 'o(≧▽≦)o',
+      mostPopular: false,
+    },
+    {
+      name: 'Mirror酱年卡',
+      price: '￥5.97',
+      itemId: '69c45576c9aa11ef9ace52540025c377',
+      description: '老板大气',
+      tmoji: 'ヾ(≧▽≦*)o',
+      mostPopular: true,
+    },
+  ]
+
   return (
-    <BackgroundLines>
+    <BackgroundBeamsWithCollision className="min-h-screen">
       <div className="flex min-h-screen flex-1 flex-col justify-center px-6 py-12 lg:px-8">
-        <div className="px-6 py-24 sm:px-6 sm:py-32 lg:px-8">
+        <div className="px-6 py-12 sm:px-6 sm:py-16 lg:px-8">
           <div className="mx-auto max-w-2xl text-center">
             <h2 className="text-balance text-4xl font-semibold tracking-tight sm:text-5xl">
               {t('title')}
@@ -28,7 +67,57 @@ export default function GetStart() {
             </div>
           </div>
         </div>
+        <div className="isolate mx-auto mt-10 grid max-w-md grid-cols-1 gap-8 md:max-w-2xl md:grid-cols-2 lg:max-w-4xl xl:mx-0 xl:max-w-none xl:max-w-6xl self-center">
+          {plans.map((plan) => (
+            <div
+              key={plan.itemId}
+              className={cn(
+                plan.mostPopular ? 'ring-2 ring-indigo-600' : 'ring-1 ring-gray-200',
+                'rounded-3xl p-8 bg-white dark:bg-white/5 shadow-sm',
+              )}
+            >
+              <h3
+                id={plan.itemId}
+                className={cn(
+                  plan.mostPopular ? 'text-indigo-600' : 'text-gray-900 dark:text-white',
+                  'text-lg/8 font-semibold',
+                )}
+              >
+                {plan.name}
+              </h3>
+              <div className="mt-4 text-sm/6 text-gray-600 dark:text-gray-300">
+                {plan.description}<FlipWords words={[plan.tmoji, plan.tmoji]} />
+              </div>
+              <p className="mt-6 flex items-baseline gap-x-1">
+                <span className="text-4xl font-semibold tracking-tight text-gray-900 dark:text-white">
+                  {plan.price}
+                </span>
+              </p>
+              <a
+                href={`https://afdian.com/item/${plan.itemId}`}
+                target="_blank"
+                aria-describedby={plan.itemId}
+                className={cn(
+                  plan.mostPopular
+                    ? 'bg-indigo-600 text-white shadow-sm hover:bg-indigo-500'
+                    : 'text-indigo-600 ring-1 ring-inset ring-indigo-200 hover:ring-indigo-300 dark:text-white',
+                  'mt-6 block rounded-md px-3 py-2 text-center text-sm/6 font-semibold focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600',
+                )}
+              >
+                {t('becomeSponsor')}
+              </a>
+              {/* <ul role="list" className="mt-8 space-y-3 text-sm/6 text-gray-600">
+                  {plan.features.map((feature) => (
+                    <li key={feature} className="flex gap-x-3">
+                      <CheckIcon aria-hidden="true" className="h-6 w-5 flex-none text-indigo-600" />
+                      {feature}
+                    </li>
+                  ))}
+                </ul> */}
+            </div>
+          ))}
+        </div>
       </div>
-    </BackgroundLines>
+    </BackgroundBeamsWithCollision>
   )
 }
diff --git a/src/app/[locale]/layout.tsx b/src/app/[locale]/layout.tsx
@@ -3,6 +3,8 @@ import { getMessages } from 'next-intl/server';
 import { notFound } from 'next/navigation';
 import { routing } from '@/i18n/routing';
 
+import { Providers } from './provider';
+
 export default async function LocaleLayout({
   children,
   params,
@@ -21,11 +23,13 @@ export default async function LocaleLayout({
   const messages = await getMessages();
 
   return (
-    <html>
-      <body className="antialiased">
-        <NextIntlClientProvider messages={messages}>
-          {children}
-        </NextIntlClientProvider>
+    <html lang={locale}>
+      <body>
+        <Providers>
+          <NextIntlClientProvider messages={messages}>
+            {children}
+          </NextIntlClientProvider>
+        </Providers>
       </body>
     </html>
   );

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -11,11 +11,5 @@ export default function RootLayout({
 }: Readonly<{
   children: React.ReactNode;
 }>) {
-  return (
-    <html>
-      <body className="antialiased">
-        {children}
-      </body>
-    </html>
-  );
+  return children;
 }
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -0,0 +1,6 @@
+import { redirect } from 'next/navigation';
+
+// This page only renders when the app is built statically (output: 'export')
+export default function RootPage() {
+  redirect('/en');
+}