Refine homepage messaging
This commit is contained in:
yoma committed
1 parent
07ce041fe2
commit
2f2e2ba4ba
2 files changed
+29
-36
No files matched your search
@@ -3,13 +3,13 @@ import { Icon } from "astro-icon/components";
|
||||
|
||||
const features = [
|
||||
{
|
||||
title: "海量存储，几乎零成本托管",
|
||||
title: "海量存储，永久免费托管。",
|
||||
summary:
|
||||
"基于 Cloudflare D1 与 R2 的自托管架构，个人笔记库可以在免费额度内长期稳定运行。",
|
||||
"因为 Cloudflare D1 与 R2 提供免费额度，个人笔记产生的数据量几乎永远用不完。",
|
||||
icon: "bx:bx-cloud",
|
||||
accent: "storage",
|
||||
points: [
|
||||
"短笔记可达 10 万条量级，200KB 图片约可存放 5 万张。",
|
||||
"免费额度对个人笔记足够宽裕：短笔记可达 10 万条量级，200KB 图片约可存放 5 万张。",
|
||||
"图片上传前在浏览器本地压缩，常见截图和照片通常减少 50%-90% 体积。",
|
||||
"数据和资源分别落在 D1 与 R2，部署后由你自己的 Cloudflare 账号承载。",
|
||||
],
|
||||
@@ -70,21 +70,14 @@ const features = [
|
||||
<div class="absolute bottom-24 -right-24 w-72 h-72 bg-slate-200/30 rounded-full blur-3xl -z-10"></div>
|
||||
|
||||
<div class="max-w-3xl mb-14 text-center mx-auto">
|
||||
<div class="inline-flex items-center gap-1.5 px-3 py-1 text-xs font-semibold text-brand-text bg-brand-soft/80 backdrop-blur border border-brand-border/40 rounded-full mb-5 shadow-sm">
|
||||
<Icon name="bx:bx-star" class="w-4 h-4 text-brand" />
|
||||
核心特性
|
||||
</div>
|
||||
<h2 class="text-4xl lg:text-5xl font-bold text-slate-900" id="features">
|
||||
重新定义个人笔记体验
|
||||
</h2>
|
||||
<p class="text-lg mt-5 text-slate-600 leading-relaxed">
|
||||
结合现代 Web 技术、Serverless 架构与 AI 代理能力，带来高效、开放、安全的内容工作区。
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="space-y-6">
|
||||
{
|
||||
features.map((feature, index) => (
|
||||
features.map((feature) => (
|
||||
<article class="group relative overflow-hidden rounded-[28px] border border-slate-200 bg-white shadow-sm transition-all duration-300 hover:-translate-y-1 hover:border-brand-border hover:shadow-[0_22px_55px_-35px_rgb(var(--edgeever-brand-rgb)/0.55)]">
|
||||
<div class="grid h-[800px] grid-cols-1 sm:h-[760px] md:h-[700px] lg:h-[460px] lg:grid-cols-[minmax(0,1.02fr)_minmax(360px,0.98fr)]">
|
||||
<div class="flex h-full flex-col justify-center p-7 sm:p-9 lg:p-10">
|
||||
@@ -92,9 +85,6 @@ const features = [
|
||||
<div class="flex h-14 w-14 shrink-0 items-center justify-center rounded-2xl border border-brand-border/40 bg-brand-soft text-brand-text shadow-sm">
|
||||
<Icon name={feature.icon} class="h-7 w-7" />
|
||||
</div>
|
||||
<div class="text-sm font-semibold text-brand-text">
|
||||
卖点 {String(index + 1).padStart(2, "0")}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3 class="text-2xl font-bold leading-tight text-slate-900 sm:text-3xl">
|
||||
|
||||
@@ -4,9 +4,11 @@ import heroProductImage from "@/assets/edgeever-hero-product.png";
|
||||
import Link from "@/components/ui/link.astro";
|
||||
import { Icon } from "astro-icon/components";
|
||||
import { Meteors } from "@/components/magicui/meteors";
|
||||
|
||||
const heroSlogan = "基于 Cloudflare 全家桶自托管的开源『印象笔记』";
|
||||
---
|
||||
|
||||
<main class="relative grid lg:grid-cols-2 place-items-center pt-24 pb-20 md:pt-32 md:pb-36 overflow-hidden">
|
||||
<main class="relative grid gap-8 lg:grid-cols-[minmax(0,0.95fr)_minmax(420px,1.05fr)] place-items-center pt-8 pb-10 md:pt-10 md:pb-14 overflow-hidden">
|
||||
<!-- Animated Background Orbs -->
|
||||
<div class="absolute top-0 left-1/4 w-96 h-96 bg-brand/10 rounded-full blur-3xl animate-slow-spin mix-blend-multiply pointer-events-none"></div>
|
||||
<div class="absolute bottom-0 right-1/4 w-80 h-80 bg-brand-border/20 rounded-full blur-3xl animate-float mix-blend-multiply pointer-events-none"></div>
|
||||
@@ -15,32 +17,19 @@ import { Meteors } from "@/components/magicui/meteors";
|
||||
<Meteors number={20} client:load />
|
||||
|
||||
<div class="md:order-1 relative z-10 w-full">
|
||||
<div class="inline-flex items-center gap-2 px-3 py-1.5 text-xs font-semibold text-brand-text bg-white/80 backdrop-blur-md border border-brand-border/40 rounded-full mb-6 shadow-sm">
|
||||
<span class="flex h-2 w-2 rounded-full bg-brand animate-pulse"></span>
|
||||
私有 • 安全 • 免费同步
|
||||
</div>
|
||||
|
||||
<h1 class="text-5xl lg:text-6xl xl:text-7xl font-bold tracking-tight text-slate-900 leading-tight">
|
||||
<h1 class="text-4xl md:text-5xl xl:text-6xl font-bold text-slate-900 leading-tight">
|
||||
<span class="text-gradient">EdgeEver</span>
|
||||
<span class="block mt-3 text-4xl lg:text-5xl xl:text-6xl text-slate-800">属于你的下一代智能笔记空间</span>
|
||||
<span class="hero-slogan block mt-4 max-w-xl text-xl md:text-2xl font-medium leading-relaxed text-slate-700">{heroSlogan}</span>
|
||||
</h1>
|
||||
|
||||
<h2 class="text-xl lg:text-2xl font-medium text-slate-600 mt-5 flex items-center gap-2">
|
||||
数据完全归你所有，AI 私人助理时刻待命
|
||||
</h2>
|
||||
|
||||
<p class="text-lg mt-6 text-slate-500 max-w-xl leading-relaxed">
|
||||
保留你最熟悉的纯净写作体验。你的所有数据都经过安全加密，并牢牢掌握在自己手中。接入强大的 AI 能力，让它自动帮你整理思路、寻找灵感、搭建你的第二大脑。
|
||||
</p>
|
||||
|
||||
<div class="mt-10 flex flex-col sm:flex-row gap-4">
|
||||
|
||||
<div class="mt-8 flex flex-col sm:flex-row gap-4">
|
||||
<Link
|
||||
href="https://demo.edgeever.org"
|
||||
target="_blank"
|
||||
class="group flex gap-2 items-center justify-center text-white bg-brand border-transparent shadow-[0_12px_30px_-18px_rgb(var(--edgeever-brand-rgb)/0.8)] hover:bg-brand-hover hover:shadow-brand/40 transition-all duration-300 hover:-translate-y-1 rounded-xl"
|
||||
rel="noopener">
|
||||
<Icon class="w-5 h-5" name="bx:bx-show" />
|
||||
打开在线演示
|
||||
在线演示
|
||||
</Link>
|
||||
<Link
|
||||
size="lg"
|
||||
@@ -50,7 +39,7 @@ import { Meteors } from "@/components/magicui/meteors";
|
||||
class="flex gap-2 items-center justify-center hover:bg-slate-50 transition-colors rounded-xl"
|
||||
target="_blank">
|
||||
<Icon class="text-slate-700 w-5 h-5" name="bx:bxl-github" />
|
||||
查看 GitHub
|
||||
GitHub
|
||||
</Link>
|
||||
<a
|
||||
rel="noopener"
|
||||
@@ -63,8 +52,8 @@ import { Meteors } from "@/components/magicui/meteors";
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="py-10 md:order-2 hidden md:flex relative w-full max-w-2xl justify-center z-10">
|
||||
<div class="relative w-full glow-card rounded-2xl p-3 animate-float" style="animation-delay: 1s;">
|
||||
<div class="py-3 md:order-2 hidden md:flex relative w-full max-w-lg justify-center z-10">
|
||||
<div class="relative w-full glow-card rounded-2xl p-2.5 animate-float" style="animation-delay: 1s;">
|
||||
<div class="absolute -inset-0.5 bg-gradient-to-tr from-brand-border/30 to-brand/10 rounded-2xl blur opacity-50"></div>
|
||||
<Picture
|
||||
src={heroProductImage}
|
||||
@@ -78,3 +67,17 @@ import { Meteors } from "@/components/magicui/meteors";
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<style>
|
||||
.hero-slogan {
|
||||
font-family:
|
||||
"Inter Variable",
|
||||
Inter,
|
||||
"PingFang SC",
|
||||
"Hiragino Sans GB",
|
||||
"Microsoft YaHei",
|
||||
ui-sans-serif,
|
||||
system-ui,
|
||||
sans-serif;
|
||||
}
|
||||
</style>
|
||||
Reference in new issue
Block a user