Skip to content

Commit 2089faa

Browse files
batora9batora9
authored
Merge pull request #85 from saitamau-maximum/feat/join-page
feat: 入会案内ページを作成
2 parents a861bdc + 3e038f3 commit 2089faa

File tree

3 files changed

+203
-1
lines changed

3 files changed

+203
-1
lines changed

‎src/app/join/page.module.scss

+113
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
@use 'src/app/variables';
2+
3+
/* 画面幅が768px以下の場合のスタイル */
4+
@media (max-width: variables.$tablet-width) {
5+
.contentTitle {
6+
margin: 0px 16px;
7+
padding: 24px 0px 0px;
8+
font-size: 1.5rem; // 24px
9+
}
10+
11+
.subtext {
12+
font-size: 1rem; // 16px
13+
}
14+
15+
.text {
16+
font-size: 1.25rem; // 20px
17+
}
18+
19+
.frame {
20+
padding: 20px;
21+
}
22+
}
23+
24+
/* 画面幅が768px以上の場合のスタイル */
25+
@media (min-width: variables.$tablet-width) {
26+
.contents {
27+
max-width: variables.$pages-max-width;
28+
}
29+
30+
.contentTitle {
31+
margin: 0px 40px;
32+
font-size: 2.5rem; // 40px
33+
}
34+
35+
.subtext {
36+
font-size: 1.25rem; // 20px
37+
}
38+
39+
.text {
40+
font-size: 1.5rem; // 24px
41+
}
42+
43+
.frame {
44+
padding: 40px;
45+
}
46+
}
47+
48+
/* 共通 */
49+
.main {
50+
background-color: variables.$background-color;
51+
padding-top: 72px;
52+
}
53+
54+
.container {
55+
display: flex;
56+
flex-direction: column;
57+
background-color: variables.$background-color;
58+
}
59+
60+
.hero {
61+
align-items: center;
62+
justify-content: center;
63+
display: flex;
64+
flex-direction: column;
65+
background-color: variables.$background-color;
66+
}
67+
68+
.contents {
69+
width: 100%;
70+
padding: 40px 0px;
71+
margin: 40px auto;
72+
background-color: #fff;
73+
box-shadow: 2px 2px 4px gray;
74+
}
75+
76+
.contentTitle {
77+
font-weight: normal;
78+
border-bottom: 1px solid black;
79+
}
80+
81+
.frame {
82+
width: 80%;
83+
margin: 48px auto;
84+
background-color: #fff;
85+
box-shadow: 2px 2px 4px gray;
86+
border-radius: 10px;
87+
}
88+
89+
.text {
90+
text-align: center;
91+
}
92+
93+
.subtext {
94+
text-align: center;
95+
margin: 16px;
96+
}
97+
98+
.triangle {
99+
width: 0;
100+
height: 0;
101+
margin: 0 auto;
102+
border-top: 20px solid #D7E6D4;
103+
border-right: 50px solid transparent;
104+
border-left: 50px solid transparent;
105+
}
106+
107+
.bold {
108+
font-weight: bold;
109+
}
110+
111+
.span {
112+
color: variables.$span-color;
113+
}

‎src/app/join/page.tsx

+89
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
import clsx from 'clsx';
2+
import { Metadata } from 'next';
3+
import Link from 'next/link';
4+
import { MdArrowOutward } from 'react-icons/md';
5+
import style from './page.module.scss';
6+
import { Breadcrumb } from '@/components/Breadcrumb';
7+
import { HeroImage } from '@/components/HeroImage';
8+
9+
export const metadata: Metadata = {
10+
title: '入会案内',
11+
description:
12+
'埼玉大学プログラミングサークル「Maximum」への入会案内のページです。',
13+
};
14+
15+
export default async function Join() {
16+
return (
17+
<div className={style.container}>
18+
<main className={style.main}>
19+
<div className={style.hero}>
20+
<HeroImage title='入会の流れ' type='default' blur={true} />
21+
<Breadcrumb
22+
items={[
23+
{ href: '/', title: 'Top' },
24+
{ href: '/join', title: '入会案内' },
25+
]}
26+
/>
27+
</div>
28+
<div className={style.contents}>
29+
<span className={style.contentTitle}>入会の流れ</span>
30+
<div className={style.frame}>
31+
<p className={style.text}>
32+
<span className={style.bold}>
33+
<Link
34+
href='https://twitter.com/Maximum03400346'
35+
target='_blank'
36+
rel='noopener noreferrer'
37+
className={clsx(style.bold, style.span)}
38+
>
39+
公式X(Twitter)
40+
<MdArrowOutward />
41+
</Link>
42+
のDM
43+
</span>
44+
または
45+
<Link
46+
href='https://line.me/ti/g2/Vsr7VFeo5KGAe3z6x273erFtObDeUYvCeu88OA?utm_source=invitation&utm_medium=link_copy&utm_campaign=default'
47+
target='_blank'
48+
rel='noopener noreferrer'
49+
className={clsx(style.bold, style.span)}
50+
>
51+
公式OpenChat
52+
<MdArrowOutward />
53+
</Link>
54+
で入会希望を伝える
55+
</p>
56+
<div className={style.triangle} />
57+
<p className={style.text}>
58+
<Link
59+
href='https://forms.office.com/pages/responsepage.aspx?id=aa8jBSUEjUqYJ-5yksXYIUwHz3zHfPVCotriPvbaC1RUREdUUk5IQlJGRjdSVzYxNk5ISFVCRkEzOS4u'
60+
target='_blank'
61+
rel='noopener noreferrer'
62+
className={clsx(style.bold, style.span)}
63+
>
64+
入会フォーム
65+
<MdArrowOutward />
66+
</Link>
67+
に必要事項を記入
68+
</p>
69+
<div className={style.triangle} />
70+
<p className={style.text}>
71+
サークルの活動日に
72+
<span className={style.bold}>対面で参加</span>
73+
してもらい、必要な手続きを説明
74+
</p>
75+
<div className={style.triangle} />
76+
<p className={style.text}>GitHub等のアカウント関連の設定をする</p>
77+
</div>
78+
<p className={style.subtext}>
79+
学位・学部問わず
80+
<span className={clsx(style.bold, style.text)}>
81+
埼玉大学に所属していれば
82+
</span>
83+
どなたでも参加できます！
84+
</p>
85+
</div>
86+
</main>
87+
</div>
88+
);
89+
}

‎src/components/Header/Header.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ export function Header() {
4242
<Link href='/news' className={style.navigationLink}>
4343
News
4444
</Link>
45-
<Link href='#' className={style.navigationLink}>
45+
<Link href='/join' className={style.navigationLink}>
4646
Join
4747
</Link>
4848
<Link href='/achievements' className={style.navigationLink}>

0 commit comments

Comments
 (0)