Skip to content

Commit 2064a8a

Browse files
na-trium-144na-trium-144
committed
トップページをいい感じにする2
1 parent 29d78a1 commit 2064a8a

File tree

1 file changed

+119
-67
lines changed

1 file changed

+119
-67
lines changed

‎app/page.tsx‎

Lines changed: 119 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,9 @@ import { Metadata } from "next";
22
import Link from "next/link";
33
import { getPagesList } from "@/lib/docs";
44
import clsx from "clsx";
5+
import { ReactNode } from "react";
6+
import { LanguageIcon } from "./terminal/icons";
7+
import { RuntimeLang } from "./terminal/runtime";
58

69
export const metadata: Metadata = {
710
title: "my.code(); へようこそ",
@@ -12,28 +15,90 @@ export const metadata: Metadata = {
1215
export default async function Home() {
1316
const pagesList = await getPagesList();
1417
return (
15-
<div className="p-4">
16-
<div className="hero bg-gradient-to-br from-primary/30 via-secondary/15 to-accent/30 rounded-lg my-6 py-8 sm:px-4">
18+
<div className="max-w-300 mx-auto p-4">
19+
<div className="hero bg-gradient-to-br from-primary/30 via-secondary/10 to-accent/30 rounded-3xl my-8 py-4 sm:px-4 md:py-16 mb-8 md:mb-16 xl:mb-24">
1720
<div className="hero-content text-center">
18-
<div className="">
19-
<h1 className="text-5xl font-bold mb-8">
20-
<span className="font-mono mr-4">my.code();</span>
21+
<div>
22+
<h1 className="text-5xl md:text-6xl font-bold mb-6">
23+
<span className="font-mono text-primary mr-3 drop-shadow-sm">
24+
my.code();
25+
</span>
2126
へようこそ
2227
</h1>
23-
<p className="text-3xl font-bold mb-4">
28+
<p className="text-2xl md:text-3xl font-bold mb-6 opacity-90">
2429
環境構築不要、その場で実践。
2530
</p>
26-
<p className="text-lg opacity-80">
27-
AIアシスタントとの対話履歴があなただけの教材へと進化する、新しいプログラミング学習サイトです。
31+
<p className="text-lg md:text-xl opacity-80 mb-10 leading-relaxed">
32+
AIアシスタントとの対話履歴があなただけの教材へと進化する、
33+
<br className="hidden md:block" />
34+
新しいプログラミング学習サイトです。
2835
</p>
36+
<div className="flex justify-center gap-4">
37+
<Link
38+
href="#tutorials"
39+
className="btn btn-primary btn-xl btn-wide rounded-box"
40+
>
41+
はじめる
42+
</Link>
43+
</div>
2944
</div>
3045
</div>
3146
</div>
32-
<h2 className="text-3xl font-bold my-8 text-center">
33-
チュートリアルを選ぶ
47+
48+
{/*<h2 className="text-3xl md:text-4xl font-bold mb-16 text-center">主な特徴</h2>*/}
49+
<div className="flex flex-col gap-12 md:gap-20 mb-8 xl:mb-16">
50+
{/*<FeatureCard
51+
icon="📚"
52+
iconColor="bg-primary/10 text-primary"
53+
title="豊富なチュートリアル"
54+
>
55+
my.code();
56+
では数多くのプログラミング言語のチュートリアルを提供しています。
57+
初心者向けの基礎から上級者向けの応用まで、幅広いレベルに対応したチュートリアルが揃っています。
58+
あなたがまだ触ったことのない言語も、気軽に体験してみることができます。
59+
</FeatureCard>*/}
60+
<FeatureCard
61+
icon="⚡"
62+
iconColor="bg-primary/10 text-primary"
63+
title="環境構築は一切不要。ブラウザで動く実行環境"
64+
>
65+
面倒な開発環境のセットアップで挫折する必要はありません。
66+
チュートリアル内のサンプルコードは、ボタン一つでそのまま実行可能。
67+
もちろん自由に編集して結果を試すこともできます。
68+
{/*さらに、エラーメッセージの解説やエラー箇所のハイライト表示など、初心者に優しい機能も充実しています。*/}
69+
</FeatureCard>
70+
<FeatureCard
71+
icon="🤖"
72+
iconColor="bg-secondary/10 text-secondary"
73+
title="AIアシスタントがあなたの学習をサポート"
74+
reversed
75+
>
76+
エラーの原因がわからない？コードの意味を知りたい？
77+
AIアシスタントにいつでも質問できます。
78+
あなたとの対話履歴がそのまま蓄積され、あなただけの最強の復習ノートへと進化します。
79+
</FeatureCard>
80+
<FeatureCard
81+
icon="✏️"
82+
iconColor="bg-accent/10 text-accent"
83+
title="実践的な練習問題"
84+
>
85+
{/*todo: 他セクションと同じスタイルの文章で書き直す？*/}
86+
各チュートリアルには練習問題が含まれており、学んだ内容を実際に試すことができます。
87+
練習問題は段階的に難易度が上がるように設計されており、理解度を深めるのに役立ちます。
88+
書いたコードはその場ですぐにAIアシスタントがレビューし、フィードバックを提供します。
89+
</FeatureCard>
90+
</div>
91+
92+
<div className="divider" />
93+
94+
<h2 id="tutorials" className="text-3xl font-bold mb-4 text-center">
95+
さあ、学習を始めましょう
3496
</h2>
97+
<p className="text-center opacity-70 mb-10">
98+
豊富なラインナップから、学びたい言語を選択してください。
99+
</p>
35100
<div
36-
className="grid items-center gap-4 my-4"
101+
className="grid items-center gap-4"
37102
style={{
38103
gridTemplateColumns: "repeat(auto-fill, minmax(20rem, 1fr))",
39104
}}
@@ -44,72 +109,59 @@ export default async function Home() {
44109
key={group.id}
45110
href={`${group.id}/${group.pages[0].slug}`}
46111
className={clsx(
47-
"card card-border card-md bg-base-200 shadow-lg",
48-
"hover:shadow-xl transition-all hover:-translate-y-1",
112+
"card card-border border-2 card-sm bg-base-200 border-base-300 shadow-sm",
113+
"hover:shadow-md transition-all hover:-translate-y-0.5",
114+
"hover:border-primary hover:text-primary "
49115
)}
50116
>
51117
<div className="card-body">
52-
<h2 className="card-title">{group.name}</h2>
53-
<p>{group.description}</p>
54-
<div className="justify-end card-actions">
55-
<div className="btn btn-primary">はじめる</div>
118+
<div className="card-title justify-between">
119+
<span className="flex gap-2 items-center">
120+
<LanguageIcon
121+
className="w-5 h-5"
122+
lang={group.id as RuntimeLang}
123+
/>
124+
{group.name}
125+
</span>
126+
<span className="text-2xl/0">&raquo;</span>
56127
</div>
128+
<p>{group.description}</p>
57129
</div>
58130
</Link>
59131
);
60132
})}
61133
</div>
62-
<h2 className="text-2xl font-bold my-8 text-center">主な特徴</h2>
63-
<div
64-
className="grid gap-6 my-8"
65-
style={{
66-
gridTemplateColumns: "repeat(auto-fit, minmax(16rem, 1fr))",
67-
}}
68-
>
69-
<div className="card bg-gradient-to-br from-primary/30 to-primary/15 shadow-lg hover:shadow-xl transition-shadow">
70-
<div className="card-body">
71-
<h3 className="card-title text-primary">📚 豊富なチュートリアル</h3>
72-
<p>
73-
my.code();
74-
では数多くのプログラミング言語のチュートリアルを提供しています。
75-
初心者向けの基礎から上級者向けの応用まで、幅広いレベルに対応したチュートリアルが揃っています。
76-
あなたがまだ触ったことのない言語も、気軽に体験してみることができます。
77-
</p>
78-
</div>
79-
</div>
80-
<div className="card bg-gradient-to-br from-secondary/30 to-secondary/15 shadow-lg hover:shadow-xl transition-shadow">
81-
<div className="card-body">
82-
<h3 className="card-title text-secondary">
83-
⚡ すぐに動かせる実行環境
84-
</h3>
85-
<p>
86-
環境構築の手間なくブラウザ上ですぐにコードを実行することができます。
87-
チュートリアル内のサンプルコードはそのまま実行するだけでなく、自由に編集して試すことも可能です。
88-
さらに、エラーメッセージの解説やエラー箇所のハイライト表示など、初心者に優しい機能も充実しています。
89-
</p>
90-
</div>
91-
</div>
92-
<div className="card bg-gradient-to-br from-accent/30 to-accent/15 shadow-lg hover:shadow-xl transition-shadow">
93-
<div className="card-body">
94-
<h3 className="card-title text-accent">
95-
🤖 AIアシスタントによるサポート
96-
</h3>
97-
<p>
98-
わからないことがあれば、AIアシスタントに質問してみてください。
99-
AIとの対話履歴により教材そのものがアップデートされ、あなた専用の学習コンテンツとして蓄積・進化します。
100-
実行したコードの解説やエラーの原因調査、改善提案まで、AIアシスタントがあなたの学習を強力に支援します。
101-
</p>
102-
</div>
134+
</div>
135+
);
136+
}
137+
138+
function FeatureCard(props: {
139+
reversed?: boolean;
140+
icon: ReactNode;
141+
title: ReactNode;
142+
children: ReactNode;
143+
iconColor: string;
144+
}) {
145+
return (
146+
<div
147+
className={clsx(
148+
"flex flex-col items-center gap-4 md:gap-8 xl:gap-16",
149+
props.reversed ? "md:flex-row-reverse" : "md:flex-row"
150+
)}
151+
>
152+
<div className="flex-1 space-y-4 xl:space-y-12">
153+
<div className="flex flex-row gap-2 items-center">
154+
<span className={clsx("p-3 rounded-xl text-2xl", props.iconColor)}>
155+
{props.icon}
156+
</span>
157+
<h3 className="text-2xl/8 md:text-3xl/10 font-bold">{props.title}</h3>
103158
</div>
104-
<div className="card bg-gradient-to-br from-info/30 to-info/15 shadow-lg hover:shadow-xl transition-shadow">
105-
<div className="card-body">
106-
<h3 className="card-title text-info">✏️ 実践的な練習問題</h3>
107-
<p>
108-
各チュートリアルには練習問題が含まれており、学んだ内容を実際に試すことができます。
109-
練習問題は段階的に難易度が上がるように設計されており、理解度を深めるのに役立ちます。
110-
書いたコードはその場ですぐにAIアシスタントがレビューし、フィードバックを提供します。
111-
</p>
112-
</div>
159+
<p className="opacity-70 leading-relaxed text-lg">{props.children}</p>
160+
</div>
161+
<div className="w-80 max-w-full md:min-w-2/5 md:max-w-1/2">
162+
{/* スクリーンショットのプレースホルダー（後で実際の画像に差し替えてください） */}
163+
<div className="aspect-video bg-base-200 rounded-xl border border-base-300 shadow-lg flex items-center justify-center overflow-hidden">
164+
<span className="text-base-content/40 font-mono">Screenshot</span>
113165
</div>
114166
</div>
115167
</div>

0 commit comments

Comments
 (0)