Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commitc3cd78f

Browse files
committed
update home page css
1 parentba5d6eb commitc3cd78f

File tree

2 files changed

+24
-28
lines changed

2 files changed

+24
-28
lines changed

‎app/page.tsx‎

Lines changed: 23 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -8,16 +8,16 @@ import { FEATURES, HOW_IT_WORKS } from '@/consts/landing-page-content'
88

99
exportdefaultfunctionHomePage(){
1010
return(
11-
<divclassName="min-h-screen bg-gradient-to-br from-slate-50 via-teal-50 to-emerald-50">
11+
<divclassName="min-h-screen bg-white">
1212
<divclassName="relative z-10 mx-auto max-w-7xl px-6 py-20 text-center">
1313
<divclassName="mb-8">
14-
<spanclassName="inline-flex items-center rounded-full border border-teal-200/60 bg-white/80 px-4 py-2 text-sm font-medium text-teal-700 backdrop-blur-sm">
14+
<spanclassName="inline-flex items-center rounded-full border border-teal-300 bg-white px-4 py-2 text-sm font-medium text-teal-700">
1515
<SparklesclassName="mr-2 h-4 w-4"/>
1616
AI-Powered Character Analysis
1717
</span>
1818
</div>
1919

20-
<h1className="mb-6bg-gradient-to-r from-teal-700 via-emerald-700 to-cyan-700 bg-clip-text text-6xl leading-tight font-bold text-transparent md:text-7xl">
20+
<h1className="mb-6 text-5xl leading-tight font-bold text-teal-800 md:text-7xl">
2121
Discover Story
2222
<br/>
2323
Relationships
@@ -32,7 +32,7 @@ export default function HomePage() {
3232
<divclassName="mb-16 flex flex-col items-center justify-center gap-4 sm:flex-row">
3333
<Link
3434
href="/create"
35-
className="group flex transform items-center rounded-full bg-gradient-to-r from-teal-600 to-emerald-600 px-8 py-4 text-lg font-semibold text-white transition-all duration-300 hover:scale-105 hover:shadow-xl"
35+
className="group flex transform items-center rounded-full bg-teal-600 px-8 py-4 text-lg font-semibold text-white transition-all duration-300 hover:scale-105 hover:shadow-xl"
3636
>
3737
Try Now!
3838
<ArrowRightclassName="ml-2 h-5 w-5 transition-transform group-hover:translate-x-1"/>
@@ -44,7 +44,7 @@ export default function HomePage() {
4444
</div>
4545

4646
<divclassName="relative mx-auto max-w-7xl">
47-
<divclassName="transform rounded-2xl border border-teal-100 bg-white/90 p-8 shadow-2xl backdrop-blur-sm transition-transform duration-500 hover:scale-102">
47+
<divclassName="transform rounded-2xl border border-teal-100 bg-white p-8 shadow-2xl transition-transform duration-500 hover:scale-102">
4848
<divclassName="mb-4 flex items-center justify-center text-sm text-slate-600">
4949
<BookOpenclassName="mr-2 h-4 w-4"/>
5050
Sample: &quot;Sense and Sensibility&quot; by Jane Austen
@@ -61,7 +61,7 @@ export default function HomePage() {
6161
</div>
6262
</div>
6363

64-
<sectionid="features"className="bg-white/60 py-20 backdrop-blur-sm">
64+
<sectionid="features"className="bg-white py-20">
6565
<divclassName="mx-auto max-w-7xl px-6">
6666
<divclassName="mb-16 text-center">
6767
<h2className="mb-4 text-4xl font-bold text-slate-800">
@@ -74,13 +74,13 @@ export default function HomePage() {
7474
</div>
7575

7676
<divclassName="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3">
77-
{FEATURES.map((feature,index)=>(
77+
{FEATURES.map((feature)=>(
7878
<div
79-
key={index}
80-
className="group transform rounded-2xl border border-teal-100/50 bg-white/80 p-6 shadow-lg backdrop-blur-sm transition-all duration-300 hover:-translate-y-2 hover:shadow-xl"
79+
key={feature.title}
80+
className="group transform rounded-2xl border border-teal-100 bg-white p-6 shadow-lg transition-all duration-300 hover:-translate-y-2 hover:shadow-xl"
8181
>
8282
<div
83-
className={`h-12 w-12 bg-gradient-to-r${feature.color} mb-4 flex items-center justify-center rounded-xl transition-transform duration-300 group-hover:scale-110`}
83+
className={`h-12 w-12 bg-teal-600${feature.color} mb-4 flex items-center justify-center rounded-xl transition-transform duration-300 group-hover:scale-110`}
8484
>
8585
<feature.iconclassName="h-6 w-6 text-white"/>
8686
</div>
@@ -96,13 +96,10 @@ export default function HomePage() {
9696
</div>
9797
</section>
9898

99-
<section
100-
id="how-it-works"
101-
className="bg-gradient-to-br from-teal-50 to-emerald-50 py-20"
102-
>
99+
<sectionid="how-it-works"className="bg-slate-50 py-20">
103100
<divclassName="mx-auto max-w-7xl px-6">
104101
<divclassName="mb-16 text-center">
105-
<h2className="mb-4bg-gradient-to-r from-teal-700 to-emerald-700 bg-clip-text text-4xl font-bold text-transparent">
102+
<h2className="mb-4 text-4xl font-bold text-teal-800">
106103
How Austen Works
107104
</h2>
108105
<pclassName="mx-auto max-w-2xl text-xl text-slate-600">
@@ -112,10 +109,10 @@ export default function HomePage() {
112109
</div>
113110

114111
<divclassName="grid grid-cols-1 gap-8 md:grid-cols-3">
115-
{HOW_IT_WORKS.map((step,index)=>(
116-
<divkey={index}className="relative">
117-
<divclassName="group rounded-2xl bg-white/90 p-8 text-center shadow-lg backdrop-blur-sm transition-all duration-300 hover:shadow-xl">
118-
<divclassName="mx-auto mb-6 flex h-16 w-16 items-center justify-center rounded-full bg-gradient-to-r from-teal-600 to-emerald-600 text-xl font-bold text-white transition-transform duration-300 group-hover:scale-110">
112+
{HOW_IT_WORKS.map((step)=>(
113+
<divkey={step.title}className="relative">
114+
<divclassName="group rounded-2xl bg-white p-8 text-center shadow-lg transition-all duration-300 hover:shadow-xl">
115+
<divclassName="mx-auto mb-6 flex h-16 w-16 items-center justify-center rounded-full bg-teal-600 text-xl font-bold text-white transition-transform duration-300 group-hover:scale-110">
119116
{step.step}
120117
</div>
121118
<h3className="mb-4 text-xl font-semibold text-slate-800">
@@ -125,18 +122,13 @@ export default function HomePage() {
125122
{step.description}
126123
</p>
127124
</div>
128-
{index<2&&(
129-
<divclassName="absolute top-1/2 -right-4 hidden -translate-y-1/2 transform md:block">
130-
<ArrowRightclassName="h-8 w-8 text-teal-400"/>
131-
</div>
132-
)}
133125
</div>
134126
))}
135127
</div>
136128
</div>
137129
</section>
138130

139-
<sectionclassName="bg-gradient-to-r from-teal-600 to-emerald-600 py-20 text-white">
131+
<sectionclassName="bg-teal-700 py-20 text-white">
140132
<divclassName="mx-auto max-w-4xl px-6 text-center">
141133
<h2className="mb-6 text-4xl font-bold">
142134
Ready to Explore Literary Relationships?
@@ -164,7 +156,7 @@ export default function HomePage() {
164156
<divclassName="mx-auto max-w-7xl px-6">
165157
<divclassName="flex flex-col items-center justify-between md:flex-row">
166158
<divclassName="mb-4 flex items-center space-x-3 md:mb-0">
167-
<divclassName="flex h-8 w-8 items-center justify-center rounded-lg bg-gradient-to-br from-teal-600 to-emerald-600">
159+
<divclassName="flex h-8 w-8 items-center justify-center rounded-lg bg-teal-600">
168160
<BookOpenclassName="h-5 w-5 text-white"/>
169161
</div>
170162
<spanclassName="text-xl font-bold text-slate-800">Austen</span>
@@ -180,7 +172,11 @@ export default function HomePage() {
180172
</div>
181173
</div>
182174
<divclassName="mt-8 border-t border-teal-100 pt-8 text-center text-slate-500">
183-
<p>&copy; 2025 Austen. Built with ♥️ for book lovers everywhere.</p>
175+
<p>
176+
&copy; 2025 Austen
177+
<br/>
178+
Built with ♥️ for book lovers
179+
</p>
184180
</div>
185181
</div>
186182
</footer>

‎consts/landing-page-content.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,7 @@ export const HOW_IT_WORKS = [
6161
step:'02',
6262
title:'AI Analysis',
6363
description:
64-
"Our advancedAI analyzes the book's content to identify characters and their relationships, connections,andinteractions.",
64+
"AI analyzes the book's content to identify characters and their relationshipsandconnections.",
6565
},
6666
{
6767
step:'03',

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp