Merge branch 'main' into dev

src/app/about/page.tsx

@@ -31,15 +31,26 @@ export default async function About() {
         {/* about */}
         <div className="w-full pt-[110px]">
           <h2 className="text-[32px] leading-[50px] font-bold">关于雀乐</h2>
-          <p className="mt-[6px] mb-[41px] text-[rgba(0,0,0,0.4)] text-[15px] leading-[24px]">原「落网APP」</p>
+          <p className="mt-[6px] text-[rgba(0,0,0,0.4)] text-[15px] leading-[24px]">原「落网APP」</p>
-          <div className="text-[15px] leading-[24px]">
+          <p className="mt-[41px] mb-[26px] font-bold text-[15px] leading-[24px]">
-            <p className="font-bold">
+            雀乐是由一群喜欢并热爱独立音乐的人共同创建的，我们致力于传播来自世界各地的独立音乐。我们秉着音乐里独立自主的精神表达内核，希望把雀乐建设成为泛华语地区最好的独立音乐传播平台。{' '}
-              听音乐是蛮私人的事情，我们去做这些歌单同样也是，不过，一个产品影响到那么多人之后，个体表达就变成了群体表达，音乐总是能够让人超脱于此刻和当下，变成了记忆里最底层的符号。
+          </p>
-            </p>
+          <div className="text-[15px] leading-[30px] font-400">
-            <p className="mt-[9px]">
+            2003年03月 落网音乐网站诞生。
-              我们赤裸裸的来，我们沉淀淀的去，我们之所以沉淀下来，是因为你们都在，因为你们都在，我才无所畏惧！ <br />
+            <br />
-              Indie but not in die
+            2008年07月 由于数据库出错，所有数据丢失，一切从零开始。
-            </p>
+            <br /> 2010年10月 推出落网的下属站点巴士电台。
+            <br /> 2013年11月 落网网站改版上线，并推出音乐App，涵盖Android、iOS、Windows Phone三大平台。
+            <br /> 2014年01月 落网用户规模超过100万。
+            <br /> 2017年09月 推出emo情绪音乐App。
+            <br /> 2017年12月 落网用户规模超过670万。
+            <br />
+            2018年01月 因经营问题，落网关闭。
+            <br />
+            2023年09月 发布重启计划。
+            <br />
+            2024年03月 落网改名为雀乐，并发布内测版本App，一周内用户超过万人。
+            <br /> ……
           </div>
         </div>
 

src/app/download/page.tsx

@@ -10,11 +10,13 @@ export const metadata: Metadata = {
 
 const qrCodeList: Array<DownloadQrcodeCard> = [
   {
+    id: 'apple',
     platform: 'APP Store',
     iconUrl: '/img/download/logo_apple.svg',
-    qrCode: '',
+    qrCode: '/img/download/qrcode_apple.svg',
   },
   {
+    id: 'android',
     platform: 'Android',
     iconUrl: '/img/download/logo_android.svg',
     qrCode: '/img/download/qrcode_android.svg',
@@ -41,8 +43,8 @@ export default function Download() {
 
         {/* APP二维码 */}
         <div className="flex flex-row">
-          {qrCodeList.map(({ platform, iconUrl, qrCode }) => (
+          {qrCodeList.map((item: DownloadQrcodeCard) => (
-            <DownloadCard key={platform} platform={platform} iconUrl={iconUrl} qrCode={qrCode} />
+            <DownloadCard key={item.id} {...item} />
           ))}
         </div>
       </div>

src/app/layout.tsx

@@ -1,4 +1,5 @@
 import { Metadata, Viewport } from 'next';
+import Script from 'next/script';
 
 import { Toaster } from '@/components/ui/toaster';
 
@@ -37,6 +38,8 @@ export default function RootLayout({ children }: Readonly<{ children: React.Reac
         <ScrollTopButton className="fixed right-[50%] transform-translate-x-[600px] bottom-[160px] right-[124px]" />
         <Toaster />
       </body>
+
+      <Script src="https://hm.baidu.com/hm.js?89d54ff4e336c923a74ee045cc600c6a" async />
     </html>
   );
 }

src/app/page.tsx

@@ -0,0 +1,80 @@
+import Image from 'next/image';
+
+import DownloadCard from '@/app/download/components/DownloadCard';
+
+const qrCodeList: Array<DownloadQrcodeCard> = [
+  {
+    id: 'apple',
+    platform: 'APP Store',
+    iconUrl: '/img/download/logo_apple.svg',
+    qrCode: '/img/download/qrcode_apple.svg',
+  },
+  {
+    id: 'android',
+    platform: 'Android',
+    iconUrl: '/img/download/logo_android.svg',
+    qrCode: '/img/download/qrcode_android.svg',
+  },
+];
+
+export default function Download() {
+  return (
+    <main className="w-full flex flex-col items-center pb-[104px] font-normal">
+      {/* 首屏 */}
+      <div className="relative w-full h-min-[1000px] h-screen flex flex-col items-center pt-[30vh] bg-[url(/img/download/background_1.jpg)] bg-center bg-cover bg-no-repeat text-[#fff]">
+        {/* slogan */}
+        <div className="flex flex-col items-center mb-[40px]">
+          <Image width={410} height={50} src="/img/download/slogan_line1.svg" alt="为独立音乐，雀跃" />
+          <Image
+            className="w-[6px] h-[20px] mt-[30px] mb-[30px] overflow-hidden"
+            width={6}
+            height={20}
+            src="/img/download/slogan_line2.svg"
+            alt="/"
+          />
+          <Image width={143} height={24} src="/img/download/slogan_line3.svg" alt="独立 不独于世" />
+        </div>
+
+        {/* APP二维码 */}
+        <div className="flex flex-row">
+          {qrCodeList.map((item: DownloadQrcodeCard) => (
+            <DownloadCard key={item.id} {...item} />
+          ))}
+        </div>
+      </div>
+
+      {/* 第二屏 */}
+      <div className="relative w-full h-[1000px] h-screen  pl-[45.7vw] flex flex-col bg-[url(/img/download/background_2.jpg)] bg-center bg-cover bg-no-repeat">
+        {/* 花体字-“我们回来了” */}
+        <Image
+          className="w-[226px] h-[46px] mt-[16.67vh] mb-[50px]"
+          width={306}
+          height={46}
+          src="/img/download/back.svg"
+          alt="back"
+        />
+
+        {/* 诗歌 */}
+        <p className="text-[#000] text-[15px] leading-[28px] text-left">
+          音乐是一种态度
+          <br />
+          不论是创作者还是聆听者
+          <br />
+          它流经心灵
+          <br />
+          纵然期待影响现实的力量是种奢望
+          <br />
+          如果刚巧有些声音
+          <br />
+          会让你记得一段往事
+          <br />
+          伤痛或是甜蜜
+          <br />
+          那记忆便有了厚厚的壳
+          <br />
+          恒久的 温暖有如初生
+        </p>
+      </div>
+    </main>
+  );
+}

src/types/index.d.ts

@@ -15,6 +15,7 @@ declare type IFooterLink = {
 };
 
 declare interface DownloadQrcodeCard {
+  id: 'apple' | 'android';
   platform: 'APP Store' | 'Android';
   iconUrl: string;
   qrCode: string;