Skip to content

Commit 9bbf9ac

Browse files
u5u5u5uu5u5u5u
authored
Merge pull request #76 from Kyutech-Code-Lab/feature/75-top-page
Feature/75 top page
2 parents 29ce993 + a8a46ee commit 9bbf9ac

5 files changed

Lines changed: 232 additions & 4 deletions

File tree

‎src/app/page.module.css‎

Lines changed: 128 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,128 @@
1+
.container {
2+
display: flex;
3+
flex-direction: column;
4+
justify-content: center;
5+
align-items: center;
6+
padding: 4rem 8rem;
7+
}
8+
9+
.title {
10+
font-family: var(--font-roboto-slab);
11+
font-size: 6rem;
12+
color: #333;
13+
margin-bottom: 2rem;
14+
}
15+
16+
.lead {
17+
font-size: 1.8rem;
18+
line-height: 1.8;
19+
margin-bottom: 5rem;
20+
text-align: center;
21+
}
22+
23+
.grid {
24+
display: grid;
25+
grid-template-columns: repeat(2, 1fr);
26+
gap: 2rem;
27+
28+
div {
29+
display: flex;
30+
flex-direction: column;
31+
justify-content: center;
32+
align-items: center;
33+
34+
svg {
35+
width: 70px;
36+
height: auto;
37+
margin-bottom: 1rem;
38+
}
39+
}
40+
}
41+
42+
.card-title {
43+
font-size: 2rem;
44+
font-weight: 700;
45+
margin-bottom: 3rem;
46+
}
47+
48+
.card-body {
49+
font-size: 1.6rem;
50+
color: #444;
51+
margin-bottom: 3rem;
52+
}
53+
54+
.button {
55+
display: inline-block;
56+
width: 100%;
57+
font-size: 1.6rem;
58+
font-weight: 700;
59+
background: var(--accent);
60+
color: #444;
61+
border-radius: 8px;
62+
text-decoration: none;
63+
text-align: center;
64+
padding: 1.6rem 0;
65+
position: relative;
66+
transition:
67+
background 160ms ease,
68+
transform 160ms ease;
69+
box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.1);
70+
}
71+
72+
.button::after {
73+
content: "→";
74+
display: inline-block;
75+
margin-left: 0.6rem;
76+
transform: translateX(0);
77+
transition: transform 160ms ease;
78+
color: inherit;
79+
}
80+
81+
.button:hover {
82+
background: color-mix(in srgb, var(--accent), #000 10%);
83+
}
84+
85+
.button:hover::after {
86+
transform: translateX(6px);
87+
}
88+
89+
.link {
90+
display: inline-block;
91+
text-decoration: underline;
92+
font-size: 1.6rem;
93+
font-weight: 600;
94+
margin-top: 1rem;
95+
}
96+
97+
@media (max-width: 899px) {
98+
.grid {
99+
grid-template-columns: 1fr;
100+
}
101+
}
102+
103+
@media (max-width: 640px) {
104+
.container {
105+
padding: 2rem 4rem;
106+
}
107+
108+
.title {
109+
font-size: 4rem;
110+
}
111+
112+
.lead {
113+
font-size: 1.4rem;
114+
}
115+
116+
.card-title {
117+
font-size: 1.8rem;
118+
}
119+
120+
.card-body {
121+
font-size: 1.4rem;
122+
}
123+
124+
.button {
125+
font-size: 1.4rem;
126+
padding: 1.2rem 0;
127+
}
128+
}

‎src/app/page.tsx‎

Lines changed: 51 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,54 @@
1-
import { redirect } from "next/navigation";
1+
import CalenderIcon from "@/components/CalenderIcon";
2+
import ProgramCodeIcon from "@/components/ProgramCodeIcon";
3+
import Paper from "@/components/ui/Paper";
4+
import Link from "next/link";
5+
import styles from "./page.module.css";
26

37
export default function Home() {
4-
redirect("/events");
8+
return (
9+
<div className={styles.container}>
10+
<h1 className={styles.title}>KCL Works</h1>
11+
12+
<p className={styles.lead}>
13+
KCL Works は、KCL（Kyutech Code
14+
Lab）に参加する九州工業大学の学生による作品と活動成果を紹介するポートフォリオサイトです。
15+
<br />
16+
ハッカソン、企業連携イベント、開発プロジェクトなど、学生の挑戦の記録を掲載しています。
17+
<br />
18+
<Link
19+
href="https://www.kyutech.ac.jp/career/kcl.html"
20+
target="_blank"
21+
rel="noopener noreferrer"
22+
className={styles.link}
23+
>
24+
KCLについてはこちらをご覧ください
25+
</Link>
26+
</p>
27+
<p></p>
28+
29+
<div className={styles.grid}>
30+
<Paper>
31+
<CalenderIcon />
32+
<h3 className={styles["card-title"]}>Events</h3>
33+
<p className={styles["card-body"]}>
34+
KCLで行われたハッカソンや企業連携イベントを紹介します。
35+
</p>
36+
<Link href="/events" className={styles.button}>
37+
イベントを見る
38+
</Link>
39+
</Paper>
40+
41+
<Paper>
42+
<ProgramCodeIcon />
43+
<h3 className={styles["card-title"]}>Works</h3>
44+
<p className={styles["card-body"]}>
45+
学生が制作したアプリやプロダクトを掲載しています。
46+
</p>
47+
<Link href="/works" className={styles.button}>
48+
作品を見る
49+
</Link>
50+
</Paper>
51+
</div>
52+
</div>
53+
);
554
}

‎src/components/CalenderIcon/index.tsx‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
const CalenderIcon = () => {
2+
return (
3+
<svg
4+
width="36"
5+
height="36"
6+
viewBox="0 0 36 36"
7+
fill="none"
8+
xmlns="http://www.w3.org/2000/svg"
9+
>
10+
<title>Calender Icon</title>
11+
<path
12+
d="M27.6269 6.9H25.3881V6C25.3881 5.1 24.791 4.5 23.8955 4.5C23 4.5 22.403 5.1 22.403 6V6.9H16.7313C15.8358 6.9 15.2388 7.5 15.2388 8.4C15.2388 9.3 15.8358 9.9 16.7313 9.9H22.5522V10.8C22.5522 11.7 23.1493 12.3 24.0448 12.3C24.9403 12.3 25.5373 11.7 25.5373 10.8V9.9H27.7761C28.8209 9.9 29.8657 10.8 29.8657 12V14.1H5.98507V12C5.98507 10.8 7.02985 9.9 8.22388 9.9H10.4627V10.8C10.4627 11.7 11.0597 12.3 11.9552 12.3C12.8507 12.3 13.4478 11.7 13.4478 10.8V8.4V6C13.4478 5.1 12.8507 4.5 11.9552 4.5C11.0597 4.5 10.4627 5.1 10.4627 6V6.9H8.22388C5.23881 6.9 3 9.15 3 12V26.4C3 29.25 5.23881 31.5 8.22388 31.5H27.7761C30.6119 31.5 33 29.25 33 26.4V12C32.8507 9.15 30.6119 6.9 27.6269 6.9ZM27.6269 28.5H8.22388C7.02985 28.5 5.98507 27.6 5.98507 26.4V17.1H29.8657V26.4C29.8657 27.6 28.8209 28.5 27.6269 28.5Z"
13+
fill="black"
14+
/>
15+
</svg>
16+
);
17+
};
18+
19+
export default CalenderIcon;

‎src/components/Header/index.tsx‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,21 @@
1+
"use client";
2+
3+
import { usePathname } from "next/navigation";
14
import Image from "next/image";
25
import Link from "next/link";
36
import Logo from "../../../public/logo_ver2.png";
47
import Toggle from "../ui/Toggle";
58
import styles from "./styles.module.css";
69

710
const Header = () => {
11+
const pathname = usePathname();
12+
813
return (
914
<header className={styles.header}>
10-
<Link href="/events">
15+
<Link href="/">
1116
<Image src={Logo} alt="KCL Works Logo" className={styles.logo} />
1217
</Link>
13-
<Toggle />
18+
{pathname !== "/" && <Toggle />}
1419
</header>
1520
);
1621
};

‎src/components/ProgramCodeIcon/index.tsx‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
const ProgramCodeIcon = () => {
2+
return (
3+
<svg
4+
width="36"
5+
height="36"
6+
viewBox="0 0 36 36"
7+
fill="none"
8+
xmlns="http://www.w3.org/2000/svg"
9+
>
10+
<title>Program Code Icon</title>
11+
<path
12+
d="M27.7151 3H8.43042C4.66389 3 1.5 6.15 1.5 9.9V24.6C1.5 28.35 4.66389 31.5 8.43042 31.5H27.5644C31.4816 31.5 34.4948 28.35 34.4948 24.6V9.9C34.6455 6.15 31.4816 3 27.7151 3ZM31.6323 24.6C31.6323 26.7 29.8243 28.5 27.7151 28.5H8.43042C6.32116 28.5 4.51323 26.7 4.51323 24.6V12.75H28.9204C29.8243 12.75 30.427 12.15 30.427 11.25C30.427 10.35 29.6737 9.75 28.9204 9.75H4.51323C4.66389 7.65 6.32116 6 8.43042 6H27.5644C29.8243 6 31.6323 7.8 31.6323 9.9V24.6Z"
13+
fill="black"
14+
/>
15+
<path
16+
d="M15.984 15.5063C15.5475 14.9352 14.529 14.7925 13.947 15.3635L9.4365 19.2183C9.1455 19.5038 9 19.9321 9 20.3604C9 20.7887 9.1455 21.217 9.4365 21.5025L13.947 25.2145C14.238 25.5 14.529 25.5 14.9655 25.5C15.402 25.5 15.8385 25.3572 16.1295 25.0717C16.7115 24.5006 16.566 23.644 15.984 23.073L12.783 20.3604L15.984 17.6478C16.566 16.934 16.566 16.0774 15.984 15.5063Z"
17+
fill="black"
18+
/>
19+
<path
20+
d="M21.9075 15.3686C21.3255 14.7896 20.307 14.9343 19.8705 15.5133C19.2885 16.0922 19.434 16.9606 20.016 17.5396L23.217 20.2895L20.016 23.0395C19.434 23.6184 19.2885 24.4869 19.8705 25.0658C20.1615 25.3553 20.598 25.5 21.0345 25.5C21.3255 25.5 21.762 25.3553 22.053 25.2105L26.5635 21.3027C26.8545 21.0132 27 20.579 27 20.1448C27 19.7106 26.8545 19.2764 26.5635 18.9869L21.9075 15.3686Z"
21+
fill="black"
22+
/>
23+
</svg>
24+
);
25+
};
26+
27+
export default ProgramCodeIcon;

0 commit comments

Comments
 (0)