From e67390345bb1ee01c15a7b6de8d5a2fdb8d83173 Mon Sep 17 00:00:00 2001 From: Johnson Mao <86179381+JohnsonMao@users.noreply.github.com> Date: Sun, 21 Jul 2024 14:38:44 +0800 Subject: [PATCH] feature: add join community page (#64) * feature: add join community page * style: format coding style --- components/Home/Group/index.jsx | 7 +- constants/category.js | 71 ++++---- next.config.js | 20 ++- pages/404.jsx | 10 +- pages/join/index.jsx | 235 ++++++++++++++++++++++++++ public/assets/icons/check_icon.svg | 4 + public/assets/icons/discord_icon.svg | 14 ++ public/assets/icons/facebook_icon.svg | 3 + 8 files changed, 307 insertions(+), 57 deletions(-) create mode 100644 pages/join/index.jsx create mode 100644 public/assets/icons/check_icon.svg create mode 100644 public/assets/icons/discord_icon.svg create mode 100644 public/assets/icons/facebook_icon.svg diff --git a/components/Home/Group/index.jsx b/components/Home/Group/index.jsx index 23a2f76e..c63099b4 100644 --- a/components/Home/Group/index.jsx +++ b/components/Home/Group/index.jsx @@ -95,12 +95,7 @@ const Group = () => { > diff --git a/pages/join/index.jsx b/pages/join/index.jsx new file mode 100644 index 00000000..ac6849ef --- /dev/null +++ b/pages/join/index.jsx @@ -0,0 +1,235 @@ +import { useMemo } from 'react'; +import { useRouter } from 'next/router'; +import styled from '@emotion/styled'; + +import { + Box, + Divider, + Typography, + Button, + Skeleton, + TextField, +} from '@mui/material'; +import SEOConfig from '@/shared/components/SEO'; +import Navigation from '@/shared/components/Navigation_v2'; +import Footer from '@/shared/components/Footer_v2'; + +import checkIconSvg from '@/public/assets/icons/check_icon.svg'; +import discordIconSvg from '@/public/assets/icons/discord_icon.svg'; +import facebookIconSvg from '@/public/assets/icons/facebook_icon.svg'; + +const JoinPageWrapper = styled.div` + --section-height: calc(100vh - 80px); + --section-height-offset: 80px; + background: #f3fcfc; +`; + +const Container = styled.div` + margin: 60px auto 72px; + min-height: calc(100vh - 418px); + width: 640px; + + @media (max-width: 800px) { + padding: 0 16px; + width: 100%; + } +`; + +const Paper = styled.main` + padding: 32px; + border-radius: 20px; + box-shadow: 0px 4px 6px rgba(196, 194, 193, 0.2); + background: #fff; +`; + +const PaperColumnCenter = styled.div` + display: flex; + flex-direction: column; + align-items: center; +`; + +const PaperBody = styled.ul` + margin: 52px 72px 0; + display: flex; + + @media (max-width: 800px) { + margin: 52px 0 0; + flex-direction: column; + gap: 20px; + } +`; + +const PaperItem = styled.li` + flex: 1; +`; + +const PaperLink = styled.a` + display: flex; + flex-direction: column; + align-items: center; + color: black; + + @media (max-width: 800px) { + margin: 0 auto; + width: 232px; + align-items: flex-start; + + > ul { + margin-left: 16px; + } + } +`; + +const PaperLinkHeader = styled.div` + display: flex; + flex-direction: column; + align-items: center; + + > img { + margin-bottom: 12px; + } + + > h3 { + display: flex; + flex-direction: column; + align-items: center; + } + + @media (max-width: 800px) { + flex-direction: row; + gap: 12px; + + > img { + width: 50px; + height: 50px; + } + + > h3 { + align-items: flex-start; + } + } +`; + +const CheckItem = styled.li` + display: flex; + align-items: center; + gap: 8px; + + & + & { + margin-top: 8px; + } +`; + +function JoinPage() { + const router = useRouter(); + + const discordCheckList = [ + '認識各領域跨齡學習者累積人脈', + '各領域自主學習者即時交流', + '輕鬆揪團與找學伴', + '與夥伴進行學習挑戰', + '與夥伴進行學習挑戰', + ]; + const facebookCheckList = [ + '第一時間掌握學習資源與活動', + '看到好資源立即轉分享', + ]; + + const SEOData = useMemo( + () => ({ + title: '加入社群｜島島阿學', + description: + '在島島阿學，沒有人是一座孤島！歡迎加入島島阿學社群一起交流、學習、成長！社群即資源、支援，歡迎加入社群，一起在民主教育的社群中，以共好的概念，協助彼此學習的需求，支持彼此成為自己想成為的人吧！', + keywords: '島島阿學', + author: '島島阿學', + copyright: '島島阿學', + imgLink: 'https://www.daoedu.tw/preview.webp', + link: `${process.env.HOSTNAME}${router?.asPath}`, + }), + [router?.asPath], + ); + + return ( + + + + + + + + 加入社群 + + + 在島島阿學，沒有人是一座孤島！ + + + 歡迎加入島島阿學社群一起交流、學習、成長！ + + + + + + + discord + + Discord： + 即時交流社群 + + +
    + {discordCheckList.map((message) => ( + + check + + {message} + + + ))} +
+ + + + + + facebook + + Facebook： + 島島阿學－學習資源島 + + +
    + {facebookCheckList.map((message) => ( + + check + + {message} + + + ))} +
+ + + + + + + 社群即資源、支援， + + + 歡迎加入社群，一起在民主教育的社群中， + + + 以共好的概念，協助彼此學習的需求，支持彼此成為自己想成為的人吧！ + + + + +