-
Notifications
You must be signed in to change notification settings - Fork 8
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #31 from nbtca/feature-about-us
Feat: Refactor about-us page
- Loading branch information
Showing
5 changed files
with
157 additions
and
61 deletions.
There are no files selected for viewing
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,157 @@ | ||
| --- | ||
| import BaseLayout from "../../layouts/BaseLayout.astro" | ||
| import sharingOnSite from "../_assets/sharing_on_site.jpg" | ||
| import joinUsCode from "../_assets/join_us_code.jpeg" | ||
| import hayasaka from "../_assets/hayasaka.jpg" | ||
| --- | ||
|
|
||
| <BaseLayout primaryTitle="关于"> | ||
| <section class="pb-20 bg-[#f5f5f7] box-border"> | ||
| <div class="flex flex-col items-center justify-center py-28 md:py-40 text-lg md:text-2xl px-8"> | ||
| <img | ||
| src="https://oss.nbtca.space/CA-logo.svg" | ||
| alt="" | ||
| class="w-32 aspect-square cursor-pointer" | ||
| /> | ||
| <div class="mt-6 md:mt-8 font-bold text-2xl md:text-4xl"> | ||
| 你听说过 <span class="text-[#004b87]"> 计算机协会 </span> 吗？ | ||
| </div> | ||
| <div class=" mt-6 flex items-center gap-3 text-gray-400"> | ||
| <span> | ||
| 从维修 | ||
| </span> | ||
| <svg class="fill-green-700" width="28" height="29" viewBox="0 0 28 29" fill="none" xmlns="http://www.w3.org/2000/svg"> | ||
| <g clip-path="url(#clip0_2207_10524)"> | ||
| <path d="M1.2537 9.23001L9.51542 17.5035C11.1678 19.1441 12.9256 19.1441 14.531 17.5387L16.0896 15.9801C17.6951 14.3746 17.6951 12.6168 16.0545 10.9762L7.79276 2.70267C6.14042 1.06205 4.38261 1.06205 2.77714 2.66751L1.21854 4.22611C-0.386927 5.83157 -0.386927 7.58939 1.2537 9.23001ZM2.30839 8.01126C1.45292 7.15579 1.46464 6.26517 2.30839 5.4097L3.96073 3.74564C4.79276 2.90189 5.70682 2.91361 6.56229 3.75736L14.9998 12.1949C15.8553 13.0504 15.8435 13.941 14.9998 14.7965L13.3592 16.4605C12.5154 17.3043 11.6014 17.2926 10.7459 16.4488L2.30839 8.01126ZM8.1912 11.7027C8.36698 11.8785 8.64823 11.8785 8.81229 11.7027C8.97636 11.5387 8.98807 11.2691 8.81229 11.0933L4.42948 6.71048C4.27714 6.56986 3.98417 6.54642 3.80839 6.71048C3.64432 6.89798 3.63261 7.17923 3.80839 7.34329L8.1912 11.7027ZM9.63261 10.273C9.79667 10.4488 10.1014 10.4254 10.2537 10.273C10.4295 10.0738 10.4295 9.80423 10.2654 9.64017L5.88261 5.26907C5.70682 5.09329 5.42557 5.10501 5.27323 5.26907C5.09745 5.44486 5.10917 5.71439 5.27323 5.87845L9.63261 10.273ZM24.7146 28.2496L26.8123 26.1519C27.0584 25.8941 27.0232 25.5191 26.7889 25.1558L24.3396 21.4996C24.0935 21.1363 23.7185 20.8785 23.2967 20.8199L22.242 20.6558L16.4998 14.9137L15.4217 16.1676L21.5623 22.2965L22.8748 22.5191L25.1131 25.4957L24.0467 26.5621L21.0818 24.3238L20.8474 23.0113L14.7537 16.9176L13.6639 18.148L19.2068 23.691L19.3709 24.7457C19.4295 25.1676 19.699 25.5426 20.0506 25.7769L23.7185 28.2613C24.0935 28.5074 24.4568 28.5074 24.7146 28.2496Z" fill-opacity="0.85" /> | ||
| <path d="M1.85136 26.8669C3.89042 28.8825 6.62089 28.9059 8.62479 26.8903C11.1443 24.3473 10.7459 21.488 18.4334 13.6833C20.9412 14.8669 23.9764 14.4684 25.992 12.4645C28.1014 10.3552 28.4646 7.02705 26.8943 4.33173L23.7068 7.51923C23.3904 7.83564 22.992 7.85908 22.6521 7.51923L21.2224 6.07783C20.8826 5.72627 20.8474 5.31611 21.1639 4.9997L24.3631 1.82392C21.6912 0.265332 18.3748 0.616894 16.2654 2.73798C14.2498 4.75361 13.8396 7.77705 15.0232 10.2848C7.23026 17.9723 4.37089 17.5739 1.82792 20.0817C-0.199428 22.0856 -0.175991 24.8278 1.85136 26.8669Z" fill="white" /> | ||
| <path d="M1.85136 26.8669C3.89042 28.8825 6.62089 28.9059 8.62479 26.8903C11.1443 24.3473 10.7459 21.488 18.4334 13.6833C20.9412 14.8669 23.9764 14.4684 25.992 12.4645C28.1014 10.3552 28.4646 7.02705 26.8943 4.33173L23.7068 7.51923C23.3904 7.83564 22.992 7.85908 22.6521 7.51923L21.2224 6.07783C20.8826 5.72627 20.8474 5.31611 21.1639 4.9997L24.3631 1.82392C21.6912 0.265332 18.3748 0.616894 16.2654 2.73798C14.2498 4.75361 13.8396 7.77705 15.0232 10.2848C7.23026 17.9723 4.37089 17.5739 1.82792 20.0817C-0.199428 22.0856 -0.175991 24.8278 1.85136 26.8669ZM17.531 11.1872C15.4451 9.10127 15.3631 5.79658 17.3553 3.82783C18.4803 2.69111 20.0857 2.23408 21.6209 2.48017L19.9217 4.17939C19.0545 5.03486 19.0779 6.13642 19.9803 7.01533L21.7146 8.73798C22.5818 9.60517 23.6951 9.62861 24.5154 8.79658L26.2381 7.0622C26.4959 8.6208 26.0271 10.2263 24.8904 11.3747C22.9099 13.3552 19.6287 13.2614 17.531 11.1872ZM3.01151 25.7067C1.66386 24.3356 1.68729 22.5895 2.97636 21.2888C5.81229 18.4763 7.49979 19.6716 15.8084 11.5505C15.9959 11.8083 16.2068 12.0427 16.4295 12.277C16.6521 12.4997 16.8982 12.7223 17.156 12.9098C9.04667 21.2184 10.242 22.9059 7.42948 25.7184C6.1287 27.0309 4.37089 27.0427 3.01151 25.7067ZM5.1912 25.0036C5.98807 25.0036 6.64432 24.3473 6.64432 23.5505C6.64432 22.7536 5.98807 22.1091 5.1912 22.1091C4.39432 22.1091 3.74979 22.7536 3.74979 23.5505C3.74979 24.3473 4.39432 25.0036 5.1912 25.0036Z" fill-opacity="0.85" /> | ||
| </g> | ||
| <defs> | ||
| <clipPath id="clip0_2207_10524"> | ||
| <rect width="27.8449" height="28.292" fill="white" transform="translate(0.0187988 0.152344)" /> | ||
| </clipPath> | ||
| </defs> | ||
| </svg> | ||
| <span> | ||
| 到开发 | ||
| </span> | ||
| <svg class="mt-[1px] fill-blue-500" width="29" height="29" viewBox="0 0 29 29" fill="none" xmlns="http://www.w3.org/2000/svg"> | ||
| <g clip-path="url(#clip0_2207_34856)"> | ||
| <path d="M0.779545 24.4931L2.81861 26.5439C3.84986 27.5868 5.03345 27.5165 6.14673 26.286L18.9787 12.1415L17.8186 10.9696L5.08033 24.9853C4.65845 25.4657 4.26001 25.5829 3.69751 25.0204L2.29126 23.6259C1.72876 23.0751 1.85767 22.6649 2.33814 22.2314L16.1076 9.27039L14.9358 8.11024L1.02564 21.1767C-0.157955 22.2782 -0.251705 23.4501 0.779545 24.4931ZM8.47876 2.66102C7.97486 3.15321 7.9397 3.84461 8.22095 4.31336C8.5022 4.74696 9.05298 5.02821 9.82642 4.82899C11.5842 4.41883 13.4123 4.34852 15.1233 5.47352L14.4201 7.21961C14.01 8.21571 14.2209 8.91883 14.8654 9.57508L17.6193 12.3524C18.2053 12.9384 18.6975 12.9618 19.3772 12.8446L20.6545 12.6103L21.4514 13.4189L21.4045 14.0868C21.3576 14.6845 21.51 15.1415 22.0959 15.7157L23.01 16.6064C23.5842 17.1806 24.3225 17.2157 24.885 16.6532L28.3772 13.1493C28.9397 12.5868 28.9162 11.872 28.342 11.2978L27.4162 10.3837C26.842 9.80946 26.3967 9.62196 25.8225 9.66883L25.1311 9.72743L24.3576 8.96571L24.6506 7.61805C24.8029 6.93836 24.6154 6.41102 23.9123 5.70789L21.2756 3.08289C17.2678 -0.901476 11.9475 -0.807726 8.47876 2.66102ZM10.2717 3.10633C13.1897 0.973524 17.1389 1.3368 19.8108 4.00868L22.7287 6.90321C23.01 7.18446 23.0568 7.40711 22.9748 7.81727L22.5881 9.59852L24.3928 11.3798L25.5764 11.3095C25.8811 11.2978 25.9748 11.3212 26.2092 11.5556L26.9006 12.247L23.9709 15.1767L23.2795 14.4853C23.0451 14.2509 23.01 14.1571 23.0217 13.8407L23.1037 12.6689L21.3108 10.8876L19.4826 11.1923C19.0959 11.2743 18.9201 11.2392 18.6272 10.9579L16.2248 8.55555C15.9201 8.2743 15.885 8.07508 16.0725 7.62977L17.1272 5.12196C15.2522 3.37586 12.8147 2.62586 10.3772 3.34071C10.1897 3.38758 10.1193 3.23524 10.2717 3.10633Z" fill-opacity="0.85" /> | ||
| </g> | ||
| <defs> | ||
| <clipPath id="clip0_2207_34856"> | ||
| <rect width="28.719" height="27.448" fill="white" transform="translate(0.0671387 0.0756836)" /> | ||
| </clipPath> | ||
| </defs> | ||
| </svg> | ||
|
|
||
| </div> | ||
| <div class="mt-2 text-gray-400 text-center"> | ||
| 所有你能想到的，都在我们的活动范围内。 | ||
| </div> | ||
| </div> | ||
| <div class="container mx-auto"> | ||
| <div class="flex flex-col gap-8 text-sm md:text-base xl:text-xl px-6 lg:px-16"> | ||
| <div class="grid grid-cols-1 md:grid-cols-2 gap-8"> | ||
| <div class="bg-white rounded-2xl overflow-hidden relative h-[440px] lg:h-[560px] xl:h-[768px]"> | ||
| <img src={joinUsCode.src} alt="" class="w-full object-cover" /> | ||
| <div class="absolute inset-0 bg-gradient-to-b from-gray-900 via-gray-900/95 to-cyan-500/40 select-none"> | ||
| <div class="py-20 lg:py-28 flex flex-col items-center text-white"> | ||
| <div class="font-bold">开发</div> | ||
| <div class="text-lg lg:text-xl xl:text-3xl font-bold mt-1"> | ||
| 我们有许多持续维护中的项目 | ||
| </div> | ||
| <div class="mt-2"> | ||
| 你可以在 GitHub 上加入我们 | ||
| </div> | ||
| <a href="https://github.com/nbtca" target="_blank" class="text-white mt-2">github.com/nbtca</a> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div class="bg-white rounded-2xl overflow-hidden relative h-[440px] lg:h-[560px] xl:h-[768px]"> | ||
| <img src={sharingOnSite.src} alt="" class="h-full object-cover" /> | ||
| <div class="absolute inset-0 bg-gradient-to-b from-white via-white/60 to-cyan-500/40 select-none"> | ||
| <div class="py-20 lg:py-28 flex flex-col items-center"> | ||
| <div class="font-bold">讲座</div> | ||
| <div class="text-lg lg:text-xl xl:text-3xl mt-1 font-bold "> | ||
| 我们会定期举办活动 | ||
| </div> | ||
| <div class="mt-2"> | ||
| 分享电脑使用及项目开发上的经验 | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div class="bg-white rounded-2xl md:h-[360px] h-[440px] lg:h-[440px] xl:h-[580px] flex flex-col-reverse md:flex-row gap-8 items-center justify-center overflow-hidden"> | ||
| <img src={hayasaka.src} alt="" class="h-40 md:h-auto md:w-1/2 object-cover" /> | ||
| <div class="flex flex-col w-full items-center justify-center"> | ||
| <div class="font-bold">维修</div> | ||
| <div class="flex items-center gap-2 text-2xl lg:text-4xl font-bold mt-1"> | ||
| 理工维修日 | ||
| <svg class="fill-red-500 h-6 w-6 lg:h-8 lg:w-8" width="23" height="22" viewBox="0 0 23 22" fill="none" xmlns="http://www.w3.org/2000/svg"> | ||
| <path d="M22.9998 6.04438C22.9698 4.81543 22.5749 3.62319 21.8654 2.61935C21.1558 1.6155 20.1637 0.845446 19.0152 0.407155C17.8667 -0.0311353 16.6138 -0.117845 15.4159 0.15806C14.218 0.433964 13.1292 1.06001 12.2881 1.95654L9.80055 4.70897C9.09069 5.49362 8.84036 5.08415 8.42884 4.69594C3.47217 0.0257864 -2.93372 6.51078 1.47633 11.4134L8.22583 18.9197L11.2806 15.5184C10.3522 15.6164 9.41428 15.4701 8.55984 15.0939C7.374 14.574 6.57978 13.6275 6.16826 12.9944C5.67239 12.2317 5.47829 11.3387 5.33084 10.3394C5.21836 9.57872 4.91932 9.05882 4.54004 8.65621C4.06036 8.14157 3.40641 7.82375 2.70538 7.76457C2.79582 7.24026 3.06807 6.76458 3.47431 6.42103C3.88056 6.07748 4.39484 5.88803 4.92687 5.88594C5.23782 5.88279 5.54591 5.94558 5.83082 6.07019C6.11573 6.1948 6.371 6.37839 6.57978 6.60886C7.11406 7.22135 7.67029 7.67677 8.32391 7.95593C9.93087 8.64181 11.1037 6.92711 11.6002 6.3784L14.8875 2.76107C15.5473 2.03541 16.607 2.37904 16.9719 2.53405L13.1071 6.79679C13.0827 6.82374 13.0644 6.85558 13.0534 6.89019C13.0424 6.92479 13.0389 6.96135 13.0432 6.99741C13.0475 7.03347 13.0595 7.06819 13.0783 7.09924C13.0971 7.1303 13.1223 7.15697 13.1523 7.17745C13.203 7.21186 13.2643 7.22692 13.3251 7.21986C13.3859 7.21281 13.4422 7.18413 13.4836 7.13904L16.9328 3.35642C17.4396 2.80017 18.1556 2.80085 18.9986 3.20552L14.4719 8.22205C14.4287 8.26989 14.4063 8.33293 14.4096 8.39731C14.4128 8.46169 14.4416 8.52213 14.4894 8.56533C14.5372 8.60853 14.6003 8.63096 14.6647 8.62768C14.729 8.6244 14.7895 8.59568 14.8327 8.54784L18.4766 4.51007C18.9121 4.02584 19.6391 4.17742 20.4272 4.54985L15.9342 9.53414C15.8942 9.57834 15.8735 9.63659 15.8765 9.69608C15.8795 9.75558 15.9061 9.81143 15.9503 9.85136C15.9945 9.89128 16.0527 9.91202 16.1122 9.90899C16.1717 9.90597 16.2276 9.87944 16.2675 9.83524L18.882 6.94494C19.4197 6.34891 20.1995 6.53341 20.8476 6.87292L9.31222 19.8457L9.18603 19.9876L10.9953 22L21.2831 10.5582C22.3949 9.4045 23.043 7.76662 22.9978 6.04438" /> | ||
| </svg> | ||
| </div> | ||
| <div class="mt-4"> | ||
| 我们每月举办维修日， | ||
| </div> | ||
| <div> | ||
| 提供免费的电脑维修服务。 | ||
| </div> | ||
| <!-- <div class="text-blue-600 hover:underline cursor-pointer mt-8"> | ||
| 你也可以随时通过我们的小程序联系我们 {">"} | ||
| </div> --> | ||
| </div> | ||
| </div> | ||
| <div class="mt-8 flex flex-col md:mt-12 md:h-56 md:grid md:grid-cols-3 gap-6"> | ||
| <div class="h-full bg-white rounded-2xl overflow-hidden flex flex-col items-center justify-center p-6 xl:p-8"> | ||
| <div class="font-bold text-center"> | ||
| <div> | ||
| 加入协会， | ||
| </div> | ||
| <div> | ||
| 共同创造我们的社区。 | ||
| </div> | ||
| </div> | ||
| <div class="mt-4"> | ||
| <a href="/join-us" class="text-base ">进一步了解{" >"}</a> | ||
| </div> | ||
| </div> | ||
| <div class="h-full bg-white rounded-2xl overflow-hidden flex flex-col items-center justify-center p-6 xl:p-8"> | ||
| <div class="font-bold text-center"> | ||
| <div> | ||
| 扫一扫， | ||
| </div> | ||
| <div> | ||
| 获取免费维修。 | ||
| </div> | ||
| </div> | ||
| <div class="mt-4"> | ||
| <a href="/repair/mini-program" class="text-base ">查看报修小程序{" >"}</a> | ||
| </div> | ||
| </div> | ||
| <div class="h-full bg-white rounded-2xl overflow-hidden flex flex-col items-center justify-center p-6 xl:p-8"> | ||
| <div class="font-bold text-center"> | ||
| <div> | ||
| 海内存知己， | ||
| </div> | ||
| <div> | ||
| 天涯若比邻。 | ||
| </div> | ||
| </div> | ||
| <div class="mt-4"> | ||
| <a href="/members" class="text-base "> | ||
| 查看历届成员 | ||
| {" >"} | ||
| </a> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| </div> | ||
| </section> | ||
| </BaseLayout> |