Skip to content

Commit 0a75e91

Browse files
codedogQBYcodedogQBY
committed
feat(website): 重新设计首页布局，增加更多内容展示
新增内容区块： - HowItWorks: 四步工作流程展示 - UseCases: 四种使用场景（学术研究、语言学习、职业发展、读书会） - MobileShowcase: 移动端截图展示和功能介绍 - TechStack: 技术栈展示（Tauri, React, TypeScript, Rust, SQLite, OpenAI） - FAQ: 常见问题解答 改进： - 保留原有 Header 和 Footer - 保留原有主题风格 - 增强内容展示，参考 workany.ai 设计 - 支持中英文双语自动展示 - 构建成功：31个页面正常生成
1 parent 3958965 commit 0a75e91

7 files changed

Lines changed: 436 additions & 0 deletions

File tree

‎website/src/components/FAQ.astro‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
---
2+
interface Props {
3+
t: (key: string) => string;
4+
}
5+
6+
const { t } = Astro.props;
7+
8+
const faqs = [
9+
{
10+
question: "Is ReadAny free to use?",
11+
answer: "Yes! ReadAny is completely free and open-source under the GPL-3.0 license. You can use all features without any cost or subscription.",
12+
},
13+
{
14+
question: "Which AI providers are supported?",
15+
answer: "ReadAny supports OpenAI, Anthropic Claude, Google Gemini, Ollama, DeepSeek, and any custom OpenAI-compatible API. You can use your own API keys.",
16+
},
17+
{
18+
question: "Is my data private?",
19+
answer: "Absolutely. All your books, annotations, and reading data are stored locally on your device. Nothing is sent to external servers unless you explicitly sync via WebDAV.",
20+
},
21+
{
22+
question: "What e-book formats are supported?",
23+
answer: "ReadAny supports EPUB, PDF, MOBI, AZW, AZW3, FB2, FBZ, CBZ, and more. We're constantly adding support for additional formats.",
24+
},
25+
{
26+
question: "Can I sync across devices?",
27+
answer: "Yes! ReadAny supports WebDAV sync, allowing you to sync your library, reading progress, and annotations across all your devices.",
28+
},
29+
{
30+
question: "How does the AI chat work?",
31+
answer: "The AI chat understands your current reading context - your position in the book, selected text, and chapter information. It can answer questions, explain concepts, and help with summaries.",
32+
},
33+
];
34+
---
35+
36+
<section class="py-32">
37+
<div class="mx-auto max-w-3xl px-6">
38+
<div class="text-center mb-12">
39+
<h2 class="text-3xl font-semibold tracking-tight">
40+
Frequently Asked Questions
41+
</h2>
42+
<p class="mt-4 text-muted-foreground">
43+
Everything you need to know about ReadAny
44+
</p>
45+
</div>
46+
47+
<div class="space-y-4">
48+
{faqs.map((faq, index) => (
49+
<details class="group rounded-lg border border-border/50 bg-background overflow-hidden">
50+
<summary class="flex items-center justify-between p-5 cursor-pointer hover:bg-muted/50 transition-colors">
51+
<span class="font-medium pr-4">{faq.question}</span>
52+
<svg
53+
xmlns="http://www.w3.org/2000/svg"
54+
fill="none"
55+
viewBox="0 0 24 24"
56+
stroke-width="1.5"
57+
stroke="currentColor"
58+
class="w-5 h-5 text-muted-foreground transition-transform group-open:rotate-180"
59+
>
60+
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
61+
</svg>
62+
</summary>
63+
<div class="px-5 pb-5 text-sm text-muted-foreground leading-relaxed border-t border-border/50 pt-4">
64+
{faq.answer}
65+
</div>
66+
</details>
67+
))}
68+
</div>
69+
70+
<div class="mt-12 text-center">
71+
<p class="text-sm text-muted-foreground mb-4">
72+
Still have questions?
73+
</p>
74+
<a
75+
href="/ReadAny/support/"
76+
class="inline-flex items-center justify-center rounded-full border border-border px-6 py-2.5 text-sm font-medium transition-colors hover:border-foreground/30 hover:bg-muted/50"
77+
>
78+
Visit Help Center
79+
</a>
80+
</div>
81+
</div>
82+
</section>

‎website/src/components/HowItWorks.astro‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
---
2+
interface Props {
3+
t: (key: string) => string;
4+
}
5+
6+
const { t } = Astro.props;
7+
8+
const steps = [
9+
{
10+
number: "01",
11+
title: "Import Your Books",
12+
description: "Drag and drop your e-books or import from cloud storage. Support for EPUB, PDF, MOBI, and more.",
13+
icon: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5" /></svg>`,
14+
},
15+
{
16+
number: "02",
17+
title: "Start Reading",
18+
description: "Enjoy a distraction-free reading experience with customizable themes, fonts, and layouts.",
19+
icon: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6.042A8.967 8.967 0 006 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 016 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 016-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0018 18a8.967 8.967 0 00-6 2.292m0-14.25v14.25" /></svg>`,
20+
},
21+
{
22+
number: "03",
23+
title: "Chat with AI",
24+
description: "Ask questions about your book content. AI understands context and provides intelligent answers.",
25+
icon: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M8.625 12a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0H8.25m4.125 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0H12m4.125 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0h-.375M21 12c0 4.556-4.03 8.25-9 8.25a9.764 9.764 0 01-2.555-.337A5.972 5.972 0 015.41 20.97a5.969 5.969 0 01-.474-.065 4.48 4.48 0 00.978-2.025c.09-.457-.133-.901-.467-1.226C3.93 16.178 3 14.189 3 12c0-4.556 4.03-8.25 9-8.25s9 3.694 9 8.25z" /></svg>`,
26+
},
27+
{
28+
number: "04",
29+
title: "Organize Knowledge",
30+
description: "Highlight passages, take notes, and export to your favorite tools like Obsidian or Notion.",
31+
icon: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6.042A8.967 8.967 0 006 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 016 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 016-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0018 18a8.967 8.967 0 00-6 2.292m0-14.25v14.25" /></svg>`,
32+
},
33+
];
34+
---
35+
36+
<section class="py-32 bg-muted/30">
37+
<div class="mx-auto max-w-5xl px-6">
38+
<div class="text-center max-w-2xl mx-auto">
39+
<h2 class="text-3xl font-semibold tracking-tight">
40+
How It Works
41+
</h2>
42+
<p class="mt-4 text-muted-foreground">
43+
From import to intelligent reading in four simple steps
44+
</p>
45+
</div>
46+
47+
<div class="mt-16 grid gap-8 md:grid-cols-2 lg:grid-cols-4">
48+
{steps.map((step) => (
49+
<div class="relative">
50+
<div class="flex flex-col items-center text-center">
51+
<div class="flex h-14 w-14 items-center justify-center rounded-full bg-primary/10 text-primary mb-4">
52+
<Fragment set:html={step.icon} />
53+
</div>
54+
<div class="text-xs font-bold text-primary mb-2">{step.number}</div>
55+
<h3 class="text-lg font-semibold mb-2">{step.title}</h3>
56+
<p class="text-sm text-muted-foreground leading-relaxed">{step.description}</p>
57+
</div>
58+
</div>
59+
))}
60+
</div>
61+
</div>
62+
</section>

‎website/src/components/MobileShowcase.astro‎

Lines changed: 126 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,126 @@
1+
---
2+
interface Props {
3+
t: (key: string) => string;
4+
}
5+
6+
const { t } = Astro.props;
7+
---
8+
9+
<section class="py-32 bg-muted/30 overflow-hidden">
10+
<div class="mx-auto max-w-5xl px-6">
11+
<div class="grid lg:grid-cols-2 gap-12 items-center">
12+
<!-- Text Content -->
13+
<div class="max-w-xl">
14+
<h2 class="text-3xl font-semibold tracking-tight mb-6">
15+
Read Anywhere, Anytime
16+
</h2>
17+
<p class="text-lg text-muted-foreground mb-8 leading-relaxed">
18+
Take your library with you. ReadAny works seamlessly across all your devices - desktop, tablet, and mobile.
19+
</p>
20+
21+
<div class="space-y-4">
22+
<div class="flex items-start gap-3">
23+
<div class="flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-primary/10 text-primary mt-0.5">
24+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-3.5 h-3.5">
25+
<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
26+
</svg>
27+
</div>
28+
<div>
29+
<h3 class="font-semibold mb-1">Sync Across Devices</h3>
30+
<p class="text-sm text-muted-foreground">Your reading progress, annotations, and settings sync automatically via WebDAV.</p>
31+
</div>
32+
</div>
33+
34+
<div class="flex items-start gap-3">
35+
<div class="flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-primary/10 text-primary mt-0.5">
36+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-3.5 h-3.5">
37+
<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
38+
</svg>
39+
</div>
40+
<div>
41+
<h3 class="font-semibold mb-1">Offline Reading</h3>
42+
<p class="text-sm text-muted-foreground">All your books are stored locally. Read without internet connection.</p>
43+
</div>
44+
</div>
45+
46+
<div class="flex items-start gap-3">
47+
<div class="flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-primary/10 text-primary mt-0.5">
48+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-3.5 h-3.5">
49+
<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
50+
</svg>
51+
</div>
52+
<div>
53+
<h3 class="font-semibold mb-1">Mobile Optimized</h3>
54+
<p class="text-sm text-muted-foreground">Touch-friendly interface with gestures for navigation and annotation.</p>
55+
</div>
56+
</div>
57+
</div>
58+
</div>
59+
60+
<!-- Mobile Screenshots -->
61+
<div class="relative flex justify-center items-center">
62+
<div class="relative w-64 h-[500px] bg-gradient-to-b from-muted to-muted/50 rounded-[3rem] border-4 border-border shadow-2xl overflow-hidden">
63+
<!-- Phone notch -->
64+
<div class="absolute top-0 left-1/2 -translate-x-1/2 w-32 h-6 bg-border rounded-b-2xl"></div>
65+
66+
<!-- Screen content -->
67+
<div class="absolute inset-4 top-8 bg-background rounded-2xl overflow-hidden shadow-inner">
68+
<!-- Mock reading interface -->
69+
<div class="h-full flex flex-col">
70+
<!-- Header -->
71+
<div class="h-12 bg-muted/50 flex items-center justify-between px-4 border-b border-border/50">
72+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 text-muted-foreground">
73+
<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5" />
74+
</svg>
75+
<div class="text-xs font-medium">Chapter 3</div>
76+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 text-muted-foreground">
77+
<path stroke-linecap="round" stroke-linejoin="round" d="M12 6.75a.75.75 0 110-1.5.75.75 0 010 1.5zM12 12.75a.75.75 0 110-1.5.75.75 0 010 1.5zM12 18.75a.75.75 0 110-1.5.75.75 0 010 1.5z" />
78+
</svg>
79+
</div>
80+
81+
<!-- Content -->
82+
<div class="flex-1 p-4 space-y-3">
83+
<div class="h-3 bg-muted rounded w-3/4"></div>
84+
<div class="h-3 bg-muted rounded w-full"></div>
85+
<div class="h-3 bg-muted rounded w-5/6"></div>
86+
<div class="h-3 bg-muted rounded w-full"></div>
87+
<div class="h-3 bg-muted rounded w-2/3"></div>
88+
<div class="h-3 bg-muted rounded w-full"></div>
89+
<div class="h-3 bg-muted rounded w-4/5"></div>
90+
<div class="h-3 bg-muted rounded w-full"></div>
91+
<div class="h-3 bg-muted rounded w-3/4"></div>
92+
93+
<!-- Highlighted text -->
94+
<div class="h-3 bg-primary/20 rounded w-full border-l-2 border-primary"></div>
95+
96+
<div class="h-3 bg-muted rounded w-full"></div>
97+
<div class="h-3 bg-muted rounded w-5/6"></div>
98+
<div class="h-3 bg-muted rounded w-full"></div>
99+
</div>
100+
101+
<!-- Bottom nav -->
102+
<div class="h-14 bg-muted/50 flex items-center justify-around border-t border-border/50">
103+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 text-muted-foreground">
104+
<path stroke-linecap="round" stroke-linejoin="round" d="M12 6.042A8.967 8.967 0 006 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 016 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 016-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0018 18a8.967 8.967 0 00-6 2.292m0-14.25v14.25" />
105+
</svg>
106+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 text-primary">
107+
<path stroke-linecap="round" stroke-linejoin="round" d="M8.625 12a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0H8.25m4.125 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0H12m4.125 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0h-.375M21 12c0 4.556-4.03 8.25-9 8.25a9.764 9.764 0 01-2.555-.337A5.972 5.972 0 015.41 20.97a5.969 5.969 0 01-.474-.065 4.48 4.48 0 00.978-2.025c.09-.457-.133-.901-.467-1.226C3.93 16.178 3 14.189 3 12c0-4.556 4.03-8.25 9-8.25s9 3.694 9 8.25z" />
108+
</svg>
109+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 text-muted-foreground">
110+
<path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z" />
111+
</svg>
112+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 text-muted-foreground">
113+
<path stroke-linecap="round" stroke-linejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 011.37.49l1.296 2.247a1.125 1.125 0 01-.26 1.431l-1.003.827c-.293.24-.438.613-.431.992a6.759 6.759 0 010 .255c-.007.378.138.75.43.99l1.005.828c.424.35.534.954.26 1.43l-1.298 2.247a1.125 1.125 0 01-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.57 6.57 0 01-.22.128c-.331.183-.581.495-.644.869l-.213 1.28c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.02-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 01-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 01-1.369-.49l-1.297-2.247a1.125 1.125 0 01.26-1.431l1.004-.827c.292-.24.437-.613.43-.992a6.932 6.932 0 010-.255c.007-.378-.138-.75-.43-.99l-1.004-.828a1.125 1.125 0 01-.26-1.43l1.297-2.247a1.125 1.125 0 011.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.087.22-.128.332-.183.582-.495.644-.869l.214-1.281z" />
114+
<path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
115+
</svg>
116+
</div>
117+
</div>
118+
</div>
119+
</div>
120+
121+
<!-- Decorative elements -->
122+
<div class="absolute -z-10 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-96 h-96 bg-primary/5 rounded-full blur-3xl"></div>
123+
</div>
124+
</div>
125+
</div>
126+
</section>

0 commit comments

Comments
 (0)