Skip to content

Commit 68e5ec4

Browse files
nakatermnakaterm
committed
Landing を中心に修正
1 parent a076038 commit 68e5ec4

File tree

2 files changed

+94
-78
lines changed

2 files changed

+94
-78
lines changed

‎client/src/components/Header.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ export default function Header() {
1111
<div className="mx-auto flex h-16 max-w-7xl items-center justify-between px-4 sm:px-6 lg:px-8">
1212
<div className="flex items-center gap-2">
1313
<NavLink to="/" className="flex items-center gap-2 transition-opacity hover:opacity-80">
14-
<img src="/logo.svg" alt="イツヒマ" className="h-8 w-8" />
14+
<img src="/logo.svg" alt="イツヒマ" className="h-6 w-6" />
1515
<span className="font-bold font-mplus text-slate-800 text-xl tracking-tight">イツヒマ</span>
1616
<span className="hidden rounded-full bg-slate-100 px-2 py-0.5 font-medium text-[10px] text-slate-500 sm:inline-block">
1717
アルファ版

‎client/src/pages/Landing.tsx‎

Lines changed: 93 additions & 77 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,35 @@
1+
import { LuChevronRight, LuCircleCheck, LuPalette, LuSmartphone } from "react-icons/lu";
12
import { NavLink } from "react-router";
23
import Header from "../components/Header";
3-
4-
export default function LandingPage() {
5-
return (
6-
<>
7-
<Header />
8-
<div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100">
9-
<HeroSection />
10-
<FeaturesSection />
11-
<Footer />
12-
</div>
13-
</>
14-
);
15-
}
4+
import { EXTERNAL_LINKS } from "../constants/links";
165

176
function HeroSection() {
187
return (
19-
<section className="relative overflow-hidden">
20-
<div className="container relative z-10 mx-auto flex max-w-5xl flex-col items-center gap-12 px-6 py-16 sm:gap-14 md:py-20 lg:flex-row lg:gap-10 xl:gap-14 ">
21-
<div className="max-w-lg grow text-center lg:text-left">
22-
<h1 className="font-bold text-4xl text-gray-800 leading-snug md:text-5xl">
23-
<span className="text-primary">「いつヒマ？」</span>で<br />
24-
日程調整しよう
25-
</h1>
26-
<p className="mt-6 text-gray-600 text-md leading-relaxed md:text-xl">
27-
とりあえずみんなの空いている時間を訊いてから、何を何時間やるか決めたい。そんな仲間うちでの日程調整に最適なツールです。
28-
</p>
29-
<NavLink to="/new" className="btn btn-primary btn-lg mt-10 px-8 shadow-lg duration-300 hover:shadow-xl">
30-
今すぐイベントを作成
31-
</NavLink>
32-
</div>
33-
<div className="relative w-60 shrink-0 sm:w-64 md:w-72 lg:w-80 xl:w-[22rem]">
34-
<div aria-hidden className="-inset-8 absolute rounded-full bg-primary/10 blur-3xl" />
35-
<img src="/mock-mobile.png" alt="イツヒマアプリの画面" className="relative h-auto w-72" />
8+
<section id="hero">
9+
<div className="overflow-hidden bg-slate-50">
10+
<div className="container mx-auto max-w-7xl px-4 py-10 sm:px-6 lg:px-8 lg:py-14">
11+
<div className="grid items-center gap-12 lg:grid-cols-2 lg:gap-8">
12+
<div className="mx-auto max-w-2xl text-center lg:mx-0 lg:text-left">
13+
<h1 className="mb-6 font-bold text-4xl text-slate-900 leading-[1.25] tracking-tight sm:text-5xl md:text-6xl">
14+
<span className="text-primary">「いつヒマ？」</span>で<br />
15+
日程調整しよう
16+
</h1>
17+
<p className="mx-auto max-w-lg text-lg text-slate-600 lg:mx-0">
18+
とりあえずみんなの空いている時間を訊いてから、何を何時間やるか決めたい。そんな仲間うちでの調整に最適な、シンプルで直感的なツールです。
19+
</p>
20+
<NavLink
21+
to="/new"
22+
className="hover:-translate-y-0.5 mt-8 inline-flex items-center justify-center gap-2 rounded-xl bg-primary px-8 py-3.5 font-bold text-base text-white shadow-lg shadow-primary/30 transition-all hover:bg-primary/90 hover:shadow-xl focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2"
23+
>
24+
イベントを作成
25+
<LuChevronRight className="h-4 w-4" />
26+
</NavLink>
27+
</div>
28+
29+
<div className="mx-auto w-full max-w-[320px] lg:max-w-[400px]">
30+
<img src="/mock-mobile.png" alt="App Screenshot" className="h-auto w-full object-cover" />
31+
</div>
32+
</div>
3633
</div>
3734
</div>
3835
</section>
@@ -42,41 +39,48 @@ function HeroSection() {
4239
function FeaturesSection() {
4340
const features = [
4441
{
45-
icon: "🚫",
46-
title: "候補日程の設定なし",
47-
description: "みんなが空いている時間を選ぶだけなので、主催者が候補日程を設定する必要がありません。",
42+
icon: <LuCircleCheck className="h-6 w-6 text-emerald-500" />,
43+
title: "候補日程は不要",
44+
description:
45+
"参加者が各々の空いている日程を入力することで日程調整を行います。幹事が候補日程を大量に作成する必要はありません。",
46+
color: "bg-emerald-50",
4847
},
4948
{
50-
icon: "🔗",
51-
title: "URLで簡単共有",
52-
description: "作成したイベントのURLをコピーして友達に送れば、すぐに日程調整が可能です。",
49+
icon: <LuPalette className="h-6 w-6 text-primary" />,
50+
title: "複数の参加形態に対応",
51+
description: "「対面」「オンライン」など、複数の参加形態を自由に設定可能です。",
52+
color: "bg-primary/10",
5353
},
5454
{
55-
icon: "📱",
56-
title: "直感的な操作",
57-
description: "複数日程も一気にドラッグで選択可能。スマホでも簡単に操作できます。",
55+
icon: <LuSmartphone className="h-6 w-6 text-blue-500" />,
56+
title: "スマホでも簡単に入力可能",
57+
description: "スマホでも、複数の日程をドラッグで一気に選択可能です。",
58+
color: "bg-blue-50",
5859
},
59-
];
60+
] as const;
6061

6162
return (
62-
<section className="bg-white px-4 py-16">
63-
<div className="mx-auto max-w-6xl">
64-
<div className="mb-16 text-center">
65-
<h2 className="mb-4 font-bold text-3xl text-gray-800">イツヒマの特長</h2>
66-
<p className="text-gray-600 text-md">仲間うちでのスムーズな日程調整に特化</p>
67-
</div>
68-
69-
<div className="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
70-
{features.map((feature) => (
71-
<div
72-
key={feature.title}
73-
className="rounded-xl bg-gray-50 p-6 transition-shadow duration-300 hover:shadow-lg"
74-
>
75-
<div className="mb-4 text-4xl">{feature.icon}</div>
76-
<h3 className="mb-3 font-semibold text-gray-800 text-xl">{feature.title}</h3>
77-
<p className="text-gray-600 leading-relaxed">{feature.description}</p>
78-
</div>
79-
))}
63+
<section id="features">
64+
<div className="bg-white py-24">
65+
<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
66+
<div className="mx-auto text-center">
67+
<h2 className="font-bold text-3xl text-slate-900 sm:text-4xl">イツヒマの特徴</h2>
68+
<p className="mt-4 text-lg text-slate-600">イツヒマは仲間うちでのスムーズな日程調整に特化しています。</p>
69+
</div>
70+
<div className="mt-16 grid gap-8 md:grid-cols-3">
71+
{features.map((feature) => (
72+
<div
73+
key={feature.title}
74+
className="flex flex-col rounded-2xl border border-slate-100 bg-white p-8 shadow-sm"
75+
>
76+
<div className={`inline-flex h-14 w-14 items-center justify-center rounded-xl ${feature.color}`}>
77+
{feature.icon}
78+
</div>
79+
<h3 className="mt-6 font-bold text-slate-900 text-xl">{feature.title}</h3>
80+
<p className="mt-3 text-slate-600">{feature.description}</p>
81+
</div>
82+
))}
83+
</div>
8084
</div>
8185
</div>
8286
</section>
@@ -85,47 +89,59 @@ function FeaturesSection() {
8589

8690
function Footer() {
8791
return (
88-
<footer className="bg-primary px-4 py-12 text-white">
89-
<div className="mx-auto max-w-6xl">
90-
<div className="grid gap-8 md:grid-cols-2 md:gap-16">
92+
<footer className="bg-slate-900 py-12 text-slate-300">
93+
<div className="mx-auto max-w-7xl px-6 sm:px-8 lg:px-10">
94+
<div className="grid gap-12 md:grid-cols-2 lg:gap-24">
9195
<div>
92-
<h3 className="mb-4 font-bold text-xl">イツヒマについて</h3>
93-
<p className="text-sm leading-relaxed opacity-90">
94-
イツヒマは、「いつヒマ？」で日程調整できるツールです。
95-
<br />
96-
候補日程の設定なしで、仲間うちでの日程調整をスムーズに行うことができます。
97-
</p>
96+
<div className="flex items-center gap-2 text-white">
97+
<img src="/logo-white.svg" alt="イツヒマ" className="h-6 w-6" />
98+
<span className="font-bold font-mplus text-xl tracking-tight">イツヒマ</span>
99+
</div>
100+
<p className="mt-6 max-w-md text-slate-400 text-sm">「いつヒマ？」で日程調整しよう</p>
98101
</div>
99102
<div>
100-
<h3 className="mb-4 font-bold text-xl">リンク</h3>
101-
<ul className="space-y-2 text-sm">
103+
<h3 className="font-bold text-sm text-white">サポート</h3>
104+
<ul className="mt-4 text-sm">
102105
<li>
103106
<a
104-
href="https://utcode.notion.site/1e4ca5f557bc80f2b697ca7b9342dc89?pvs=4"
107+
href={EXTERNAL_LINKS.GUIDE}
105108
target="_blank"
106109
rel="noreferrer noopener"
107-
className="block opacity-90 transition-opacity duration-200 hover:opacity-100"
110+
className="hover:text-slate-400"
108111
>
109-
使い方ページ
112+
使い方
110113
</a>
111114
</li>
112-
<li>
115+
<li className="mt-3">
113116
<a
114-
href="https://forms.gle/AB6xbgKjnDv5m1nm6"
117+
href={EXTERNAL_LINKS.FEEDBACK}
115118
target="_blank"
116119
rel="noreferrer noopener"
117-
className="block opacity-90 transition-opacity duration-200 hover:opacity-100"
120+
className="hover:text-slate-400"
118121
>
119122
ご意見・バグ報告
120123
</a>
121124
</li>
122125
</ul>
123126
</div>
124127
</div>
125-
<div className="mt-8 border-white/20 border-t pt-8 text-center">
126-
<p className="text-sm opacity-75">© 2024 イツヒマ (アルファ版)</p>
128+
<div className="mt-12 border-slate-800 border-t pt-8 text-center text-slate-500 text-xs">
129+
<p>&copy; {new Date().getFullYear()} イツヒマ All rights reserved.</p>
127130
</div>
128131
</div>
129132
</footer>
130133
);
131134
}
135+
136+
export default function LandingPage() {
137+
return (
138+
<div className="min-h-screen bg-slate-50 text-slate-900">
139+
<Header />
140+
<main>
141+
<HeroSection />
142+
<FeaturesSection />
143+
</main>
144+
<Footer />
145+
</div>
146+
);
147+
}

0 commit comments

Comments
 (0)