feat: add new page(about)

public/img/about/thank.svg

@@ -0,0 +1,15 @@
+<svg width="356" height="172" viewBox="0 0 356 172" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1_146)">
+<path d="M342.944 2.25319C338.624 10.0697 334.553 18.0279 330.389 25.9322C329.761 27.1202 329.174 28.3554 328.343 29.3882C326.136 32.1354 323.949 34.9164 321.506 37.4477C315.397 43.7994 309.423 50.3334 302.808 56.1114C300.729 57.9272 296.767 57.5964 293.669 58.2444C293.115 55.7199 292.467 53.2022 292.055 50.6574C291.887 49.6179 292.427 48.4637 292.298 47.4107C292.15 46.2092 291.623 45.0482 291.259 43.8669C290.186 44.2854 288.842 44.4204 288.073 45.1629C282.707 50.3199 276.287 53.4384 268.829 55.6727C267.85 51.1434 271.61 48.5514 272.426 44.4272C271.164 44.0964 269.868 43.4282 268.613 43.4957C263.476 43.7522 258.353 44.3259 253.216 44.5824C251.083 44.6904 248.923 44.2989 245.892 44.0694C248.916 36.9279 251.454 30.2724 254.566 23.8937C255.848 21.2612 258.191 19.0607 260.357 16.9749C261.518 15.8544 263.314 15.3887 265.244 14.4167C265.143 16.3607 265.082 17.5217 265.022 18.6894C265.96 17.8794 266.581 16.9344 266.75 15.9152C266.966 14.6057 267.337 12.6482 266.669 12.0407C265.899 11.3454 263.685 11.2577 262.774 11.8854C259.588 14.0724 255.842 16.1447 253.884 19.2497C250.462 24.6767 247.742 30.6774 245.602 36.7457C243.84 41.7474 242.22 45.9122 235.862 45.3182C235.139 45.2507 234.235 45.5477 233.648 45.9864C232.682 46.7087 231.913 47.6942 231.056 48.5649C231.265 48.6999 231.474 48.8282 231.683 48.9632C234.869 48.3827 238.062 47.8022 242.119 47.0597C238.926 59.8577 235.963 71.7377 232.912 83.9687C236.415 83.7257 237.529 82.4432 238.062 79.7094C239.952 70.0839 242.261 60.5394 244.259 50.9342C244.913 47.7752 246.749 46.8977 249.686 46.9652C254.532 47.0664 259.385 46.9652 264.232 46.9787C265.15 46.9787 266.061 47.0867 267.364 47.1677C266.372 49.2737 265.265 50.7992 264.968 52.4732C264.637 54.3429 264.488 56.6717 265.359 58.1432C265.838 58.9599 268.815 59.0072 270.26 58.4199C274.688 56.5974 278.933 54.3227 283.226 52.1762C284.664 51.4607 286.028 50.5899 287.58 49.7057C287.938 52.3179 288.215 54.4037 288.512 56.4827C289.079 60.4652 290.732 61.9232 294.769 61.7882C296.085 61.7409 297.408 61.3697 298.697 61.0524C307.452 58.8992 312.15 51.8724 317.307 45.4464C320.979 40.8767 324.496 36.1787 328.593 30.8732C326.028 40.7349 323.666 49.8137 321.256 59.0747C326.345 59.0004 326.318 59.0004 326.406 54.6534C326.426 53.6544 326.568 52.6352 326.804 51.6564C328.087 46.3239 329.167 40.9307 330.8 35.7062C332.245 31.0892 333.946 26.4789 336.214 22.2197C339.447 16.1379 343.403 10.4477 346.798 4.44019C347.378 3.40744 346.697 1.66594 346.602 0.255188C345.353 0.909938 343.517 1.23394 342.95 2.26669L342.944 2.25319Z" fill="black"/>
+<path d="M98.4649 42.5371C96.8044 41.5516 94.8604 40.8226 92.9501 40.5189C84.2021 39.1554 71.4243 49.5909 73.7126 59.7024C74.4956 63.1584 77.8436 65.7436 81.1713 64.4679C84.0063 63.3811 86.4971 61.3899 89.0891 59.7159C90.0139 59.1151 90.7834 58.2781 91.8701 57.3331C92.1334 58.2646 92.3764 58.6224 92.2886 58.8654C89.4874 67.0059 86.8279 75.2071 83.7701 83.2599C80.8744 90.9009 77.1281 98.2381 74.5294 105.974C70.4996 117.948 65.1604 129.227 58.6331 139.994C51.6401 151.529 43.0271 161.378 30.2089 166.595C19.7261 170.861 11.6936 170.679 6.94161 159.062C6.90111 158.961 6.81336 158.88 6.75936 158.779C-0.206641 146.325 1.40661 128.019 10.2491 116.787C15.6491 109.922 22.9324 105.872 30.6274 102.335C32.2946 101.566 33.9956 100.871 35.6764 100.142C35.6291 99.8379 35.5751 99.5409 35.5279 99.2371C34.7044 99.2371 33.7729 98.9874 33.0776 99.2776C29.1559 100.925 25.1869 102.511 21.4136 104.475C8.54811 111.171 1.50111 121.85 0.367109 136.301C-0.294391 144.746 1.79136 152.731 5.24061 160.331C8.08911 166.616 11.8556 172.009 20.0366 171.192C30.2156 170.18 39.0311 166.15 46.5709 159.245C56.4461 150.206 63.3379 138.981 68.7176 127.007C75.5824 111.725 81.6979 96.0849 87.5974 80.3979C91.8904 68.9769 95.3464 57.2386 99.0589 45.6016C99.3491 44.6904 99.0791 42.8881 98.4649 42.5236V42.5371ZM94.5971 47.2554C92.5181 50.5494 90.3311 53.7894 87.9416 56.8606C86.8076 58.3186 85.2416 59.6079 83.6081 60.4719C79.1599 62.8209 76.6691 61.1941 76.6421 56.1721C76.6218 51.8386 81.6236 45.8514 86.7131 44.2854C88.4951 43.7386 90.3581 43.1919 92.1941 43.1311C94.5971 43.0569 95.8594 45.2574 94.5971 47.2554Z" fill="black"/>
+<path d="M225.919 53.5394C221.417 53.6744 216.908 53.6609 212.399 53.7487C210.192 53.7892 208.45 52.8307 208.471 50.6504C208.491 47.9234 210.651 47.0932 213.121 46.8232C214.768 46.6409 216.415 46.2359 217.975 45.6689C218.521 45.4664 219.176 44.4472 219.088 43.9072C218.994 43.3132 218.076 42.3749 217.57 42.4087C214.816 42.5842 211.63 42.2264 209.422 43.5022C202.18 47.6737 194.235 46.3439 186.115 47.8357C187.768 43.1039 189.193 38.9999 190.63 34.9027C192.541 29.4487 194.512 24.0082 196.294 18.5137C196.489 17.9129 195.646 16.9814 195.281 16.1984C194.566 16.6709 193.546 16.9814 193.202 17.6497C192.595 18.8107 192.48 20.2147 192.028 21.4702C189.071 29.6917 185.932 37.8592 183.158 46.1414C181.727 50.4074 180.917 54.8759 179.682 59.8372C181.565 59.5807 183.617 59.6887 183.759 59.2229C184.522 56.6647 184.812 53.9647 185.278 51.2512C188.464 50.8394 191.663 50.4412 194.849 50.0024C197.995 49.5637 201.133 49.0777 204.333 48.6052C204.387 54.5047 205.764 56.0504 211.238 57.1102C216.935 58.2104 222.382 56.9887 227.782 55.4092C228.68 55.1459 229.389 54.2482 230.185 53.6407C230.044 53.3842 229.909 53.1277 229.767 52.8712C228.484 53.1074 227.209 53.5057 225.919 53.5394Z" fill="black"/>
+<path d="M170.414 56.7852C165.621 57.7707 164.46 56.7852 164.987 51.8577C165.203 49.8732 166.006 47.9495 166.215 45.965C166.31 45.074 165.594 44.102 165.243 43.1705C164.379 43.6902 163.468 44.1425 162.685 44.7635C162.401 44.9862 162.476 45.6207 162.287 46.019C158.223 54.8412 152.911 58.3715 144.98 57.521C143.117 54.821 144.932 52.7487 146.08 50.4672C148.422 45.8097 152.445 46.0055 156.799 46.9977C155.793 43.7915 154.382 42.8532 151.52 43.103C146.809 43.5147 141.247 49.1982 140.687 54.173C140.045 59.8362 142.057 61.7195 147.774 61.0242C153.086 60.3762 157.447 58.061 160.727 53.525C162.624 58.9925 164.636 60.626 168.861 60.1332C170.677 59.924 172.749 59.5932 172.418 56.5895C171.656 56.6637 171.014 56.6637 170.4 56.792L170.414 56.7852Z" fill="black"/>
+<path d="M129.388 40.3234C125.567 42.2742 122.078 44.8729 118.73 47.0127C118.514 46.1824 118.203 44.9809 117.893 43.7794C116.981 44.7379 115.847 45.5682 115.193 46.6752C113.492 49.5507 112.175 52.6692 110.353 55.4569C109.178 57.2524 109.664 58.7847 111.008 59.3922C111.818 59.7567 113.694 58.6767 114.578 57.7587C118.433 53.7694 121.983 49.4899 125.864 45.5344C128.328 43.0234 131.15 41.5519 133.85 45.5344C134.106 45.9124 135.179 46.1487 135.551 45.9192C135.956 45.6762 136.205 44.7852 136.145 44.2182C135.753 40.6407 132.668 38.6359 129.388 40.3099V40.3234Z" fill="black"/>
+<path d="M352.347 59.8769C351.449 59.7757 350.113 61.0514 349.498 62.0437C349.249 62.4487 350.396 63.7177 351.186 65.0677C352.948 63.8932 354.109 63.1169 355.27 62.3407C354.305 61.4564 353.407 59.9984 352.354 59.8769H352.347Z" fill="black"/>
+</g>
+<defs>
+<clipPath id="clip0_1_146">
+<rect width="355.016" height="171.038" fill="white" transform="translate(0.246094 0.240479)"/>
+</clipPath>
+</defs>
+</svg>

public/img/icon/arrow-right.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10 5.99988L15 11.9999L10 17.9999" stroke="black" stroke-opacity="0.4" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

src/app/about/about.module.css

@@ -0,0 +1,29 @@
+.halo {
+  position: absolute;
+  top: 160px;
+  left: 240px;
+  width: 560px;
+  height: 280px;
+  margin-left: 30px;
+  background: linear-gradient(135.88deg, rgba(255, 240, 240, 0.0126) 31.88%, rgba(255, 53, 53, 0.06) 75.38%);
+  filter: blur(50px);
+  transform: matrix(1, -0.09, -0.02, 1, 0, 0);
+}
+
+.weibo {
+  position: relative;
+  color: #000;
+  font-size: 20px;
+  line-height: 28px;
+}
+
+.weibo::after {
+  content: '';
+  display: block;
+  left: 83px;
+  bottom: 0;
+  position: absolute;
+  width: 24px;
+  height: 24px;
+  background: url('/img/icon/arrow-right.svg');
+}

src/app/about/page.tsx

@@ -0,0 +1,88 @@
+import Image from 'next/image';
+
+import styles from './about.module.css';
+
+export default function Download() {
+  return (
+    <div className="w-full bg-[#F2F3F7]">
+      <main className="w-[1200px] mx-auto  flex flex-col items-left pt-[80px] pb-[104px] ">
+        {/* about */}
+        <div className="w-full pt-[110px]">
+          <h2 className="text-[36px] leading-[50px] font-bold">关于雀乐</h2>
+          <p className="mt-[6px] mb-[41px] text-[rgba(0,0,0,0.4)] text-[15px] leading-[24px]">原「落网APP」</p>
+          <div className="text-[15px] leading-[24px]">
+            <p className="font-bold">
+              听音乐是蛮私人的事情，我们去做这些歌单同样也是，不过，一个产品影响到那么多人之后，个体表达就变成了群体表达，音乐总是能够让人超脱于此刻和当下，变成了记忆里最底层的符号。
+            </p>
+            <br />
+            <p>
+              我们赤裸裸的来，我们沉淀淀的去，我们之所以沉淀下来，是因为你们都在，因为你们都在，我才无所畏惧！ <br />
+              Indie but not in die
+            </p>
+          </div>
+        </div>
+
+        {/* contributor */}
+        <div className="relative w-full mt-[120px]">
+          <h2 className="text-[36px] leading-[50px] font-bold">贡献者</h2>
+
+          <div className={styles.halo} />
+
+          <Image
+            className="mx-auto mt-[70px] mb-[39px]"
+            width={355}
+            height={171}
+            src="/img/about/thank.svg"
+            alt="贡献者"
+          />
+
+          <div className="text-[15px] leading-[24px]">
+            <p>
+              无论是过去的“落网”还是现在的“雀乐”，到现在为止已经走过了二十多个年头。这一路走来充满着艰辛和不易，但是无论再多的苦难，我们终究还是坚持了下来。当然，止步不前的坚持是毫无意义的，我们想去创造更好的未来。我们想让更多真诚的音乐能够让更多的人接触到、想让更多的独立音乐人能够通过自己的创作获得应有的报酬和尊重、想让雀乐成为国内最好的独立音乐传播平台。
+            </p>
+            <br />
+            <p>
+              <span>值得庆幸的是，虽然外面的世界多变且让人充满着畏惧。但是人更多的时候是充满着善意的。</span>
+              <br />
+              <span className="font-bold">
+                以下的这些朋友们在我们最困难的时候用自己力所能及的方式支持着我们达成一个个目标，是他们无私的奉献，才有着“雀乐”一步步拓实的脚印以面对这复杂的世界、才有着上面的想法能够逐步实现。
+              </span>
+            </p>
+            <br />
+            <p className="mt-[9px] text-[15px] leading-[24px]">
+              如果你也想加入我们，无论是提供技术、资金或是其他任何方式的支持，都可以加
+              <span className="text-[#B44343]">微信号indier</span>
+              联系到我们。 <br />
+              感谢音乐，感谢遇见，感谢所有的贡献者。还有感谢那些途中参与过，给予我们帮助的人们。所有的奉献都值得被铭记。
+            </p>
+            <br />
+
+            <p className="text-right">- 雀乐团队</p>
+          </div>
+
+          {/* contributor wall */}
+        </div>
+
+        {/* 联系我们 */}
+        <div className="w-full pt-[110px]">
+          <h2 className="text-[36px] leading-[50px] font-bold">联系我们</h2>
+
+          <div className="mt-[46px]">
+            <p className="mb-[6px] text-[15px] leading-[21px] text-[rgba(0,0,0,0.7)]">商务合作</p>
+            <p className="text-[20px] leading-[28px] text-[#000]">rock@indie.cn</p>
+          </div>
+
+          <div className="mt-[36px]">
+            <p className="mb-[6px] text-[15px] leading-[21px] text-[rgba(0,0,0,0.7)]">Weibo</p>
+            <p className={styles.weibo}>官方微博</p>
+          </div>
+
+          <div className="flex flex-col items-center w-[130px] mt-[38px] mb-[102px]">
+            <Image width={130} height={130} src="/img/about/qrcode-wechat.svg" alt="wechat qrCode"></Image>
+            <p className="mt-[4px] text-[15px] leading-[21px]  text-[rgba(0,0,0,0.7)]">雀乐公众号</p>
+          </div>
+        </div>
+      </main>
+    </div>
+  );
+}

src/app/download/components/download-card.module.css

@@ -1,4 +1,3 @@
-/* w-[136px] h-[136px] rounded-[9px] bg-[#fff] :before:content-[''] :before:bg-[#fff] */
 .qrcodeContainer {
   position: relative;
   width: 130px;
@@ -8,7 +7,7 @@
   background-color: #fff;
 }
 
-.qrcodeContainer:before {
+.qrcodeContainer::before {
   position: absolute;
   top: -6px;
   left: 62px;

src/app/globals.css

@@ -10,6 +10,11 @@
   }
 }
 
+html,
+body {
+  min-height: 100%;
+}
+
 body {
   background: var(--body-bg-color);
   font-family: 'PingFang SC-Regular', Helvetica;

src/components/Header/index.tsx

@@ -24,7 +24,7 @@ export default function Header() {
         {menuList.map(({ name, path }) => (
           <li
             key={path}
-            className={`px-[25px] text-[18px] leading-[25.2px] text-[rgba(0,0,0,0.4)] hover:text-[rgba(0,0,0,0.95)]`}
+            className="px-[25px] text-[18px] leading-[25.2px] text-[rgba(0,0,0,0.4)] hover:text-[rgba(0,0,0,0.95)]"
           >
             <a href={path}>{name}</a>
           </li>