diff --git a/src/app/page.module.css b/src/app/page.module.css index e69de29..8aa9213 100644 --- a/src/app/page.module.css +++ b/src/app/page.module.css @@ -0,0 +1,128 @@ +.container { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + padding: 4rem 8rem; +} + +.title { + font-family: var(--font-roboto-slab); + font-size: 6rem; + color: #333; + margin-bottom: 2rem; +} + +.lead { + font-size: 1.8rem; + line-height: 1.8; + margin-bottom: 5rem; + text-align: center; +} + +.grid { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 2rem; + + div { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + + svg { + width: 70px; + height: auto; + margin-bottom: 1rem; + } + } +} + +.card-title { + font-size: 2rem; + font-weight: 700; + margin-bottom: 3rem; +} + +.card-body { + font-size: 1.6rem; + color: #444; + margin-bottom: 3rem; +} + +.button { + display: inline-block; + width: 100%; + font-size: 1.6rem; + font-weight: 700; + background: var(--accent); + color: #444; + border-radius: 8px; + text-decoration: none; + text-align: center; + padding: 1.6rem 0; + position: relative; + transition: + background 160ms ease, + transform 160ms ease; + box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.1); +} + +.button::after { + content: "→"; + display: inline-block; + margin-left: 0.6rem; + transform: translateX(0); + transition: transform 160ms ease; + color: inherit; +} + +.button:hover { + background: color-mix(in srgb, var(--accent), #000 10%); +} + +.button:hover::after { + transform: translateX(6px); +} + +.link { + display: inline-block; + text-decoration: underline; + font-size: 1.6rem; + font-weight: 600; + margin-top: 1rem; +} + +@media (max-width: 899px) { + .grid { + grid-template-columns: 1fr; + } +} + +@media (max-width: 640px) { + .container { + padding: 2rem 4rem; + } + + .title { + font-size: 4rem; + } + + .lead { + font-size: 1.4rem; + } + + .card-title { + font-size: 1.8rem; + } + + .card-body { + font-size: 1.4rem; + } + + .button { + font-size: 1.4rem; + padding: 1.2rem 0; + } +} diff --git a/src/app/page.tsx b/src/app/page.tsx index ec3dc11..b114182 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -1,5 +1,54 @@ -import { redirect } from "next/navigation"; +import CalenderIcon from "@/components/CalenderIcon"; +import ProgramCodeIcon from "@/components/ProgramCodeIcon"; +import Paper from "@/components/ui/Paper"; +import Link from "next/link"; +import styles from "./page.module.css"; export default function Home() { - redirect("/events"); + return ( +
+

KCL Works

+ +

+ KCL Works は、KCL（Kyutech Code + Lab）に参加する九州工業大学の学生による作品と活動成果を紹介するポートフォリオサイトです。 +
+ ハッカソン、企業連携イベント、開発プロジェクトなど、学生の挑戦の記録を掲載しています。 +
+ + KCLについてはこちらをご覧ください + +

+

+ +
+ + +

Events

+

+ KCLで行われたハッカソンや企業連携イベントを紹介します。 +

+ + イベントを見る + + + + + +

Works

+

+ 学生が制作したアプリやプロダクトを掲載しています。 +

+ + 作品を見る + + +
+
+ ); } diff --git a/src/components/CalenderIcon/index.tsx b/src/components/CalenderIcon/index.tsx new file mode 100644 index 0000000..a4da0ec --- /dev/null +++ b/src/components/CalenderIcon/index.tsx @@ -0,0 +1,19 @@ +const CalenderIcon = () => { + return ( + + Calender Icon + + + ); +}; + +export default CalenderIcon; diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx index fe05709..6fd07cb 100644 --- a/src/components/Header/index.tsx +++ b/src/components/Header/index.tsx @@ -1,3 +1,6 @@ +"use client"; + +import { usePathname } from "next/navigation"; import Image from "next/image"; import Link from "next/link"; import Logo from "../../../public/logo_ver2.png"; @@ -5,12 +8,14 @@ import Toggle from "../ui/Toggle"; import styles from "./styles.module.css"; const Header = () => { + const pathname = usePathname(); + return (
- + KCL Works Logo - + {pathname !== "/" && }
); }; diff --git a/src/components/ProgramCodeIcon/index.tsx b/src/components/ProgramCodeIcon/index.tsx new file mode 100644 index 0000000..e303528 --- /dev/null +++ b/src/components/ProgramCodeIcon/index.tsx @@ -0,0 +1,27 @@ +const ProgramCodeIcon = () => { + return ( + + Program Code Icon + + + + + ); +}; + +export default ProgramCodeIcon;