e.xyehr.cn
One Calendar is a privacy-first calendar web app built with Next.js. It has modern security features, including e2ee, password-protected sharing, and self-destructing share links 📅
calendar.xyehr.cn
Refine landing anchors, hero image, and footer link mapping
+2
-2
components/landing/landing-cta.tsx
+2
-2
components/landing/landing-cta.tsx
···
6
6
<h2 className="mx-auto mt-4 max-w-3xl text-4xl font-semibold leading-tight text-white md:text-6xl">
7
7
Move to a calmer,
8
8
<br />
9
-
weekly-first workflow.
9
+
focus-first workflow.
10
10
</h2>
11
11
<p className="mx-auto mt-4 max-w-2xl text-sm text-[var(--landing-muted)] md:text-base">
12
12
Keep your schedule clear with privacy-first defaults, portable formats, and dependable sync.
···
20
20
Start free
21
21
</a>
22
22
<a
23
-
href="#"
23
+
href="https://docs.xyehr.cn/docs/one-calendar"
24
24
aria-label="Read product documentation"
25
25
className="rounded-md border border-white/20 px-6 py-2.5 text-sm text-[var(--landing-muted)] transition duration-200 hover:-translate-y-0.5 hover:border-white/35 hover:text-white"
26
26
>
+2
-2
components/landing/landing-data-showcase.tsx
+2
-2
components/landing/landing-data-showcase.tsx
···
13
13
14
14
export function LandingDataShowcase() {
15
15
return (
16
-
<section className="border-b border-white/10 py-16 md:py-20">
16
+
<section id="data" className="border-b border-white/10 py-16 md:py-20">
17
17
<h2 className="text-3xl font-semibold leading-tight text-white md:text-5xl">Built from real One Calendar capabilities</h2>
18
18
<p className="mt-4 max-w-3xl text-base text-[var(--landing-muted)] md:text-lg">
19
-
Privacy-first, weekly-focused, and designed to stay understandable while scaling to team workflows.
19
+
Privacy-first, planning-focused, and designed to stay understandable while scaling to team workflows.
20
20
</p>
21
21
22
22
<div className="mt-8 grid gap-4 md:grid-cols-3">
+2
-2
components/landing/landing-faq.tsx
+2
-2
components/landing/landing-faq.tsx
···
8
8
const faqItems = [
9
9
{
10
10
q: "What is One Calendar's product direction?",
11
-
a: "One Calendar is positioned as a privacy-first, weekly-focused open-source calendar built for clarity and control.",
11
+
a: "One Calendar is positioned as a privacy-first, planning-focused open-source calendar built for clarity and control.",
12
12
},
13
13
{
14
14
q: "Which import formats are supported?",
···
26
26
27
27
export function LandingFaq() {
28
28
return (
29
-
<section className="border-b border-white/10 py-16 md:py-20">
29
+
<section id="faq" className="border-b border-white/10 py-16 md:py-20">
30
30
<div className="grid gap-8 md:grid-cols-[240px_1fr]">
31
31
<h2 className="text-3xl font-semibold text-white md:text-5xl">FAQ</h2>
32
32
<div className="rounded-2xl border border-white/10 bg-[var(--landing-panel)] px-5 md:px-6">
+2
-2
components/landing/landing-features.tsx
+2
-2
components/landing/landing-features.tsx
···
1
1
const features = [
2
2
{
3
-
title: "Weekly-first planning",
3
+
title: "Fast planning",
4
4
description: "Drag, resize, and edit events inline without disruptive modal-heavy flows.",
5
5
icon: <path d="M4 10h24M8 4v8m16-8v8M5 18h22M5 24h12" />,
6
6
},
···
18
18
19
19
export function LandingFeatures() {
20
20
return (
21
-
<section className="border-y border-white/10 py-16 md:py-20">
21
+
<section id="features" className="border-y border-white/10 py-16 md:py-20">
22
22
<div className="mb-10 max-w-3xl">
23
23
<p className="text-xs uppercase tracking-[0.24em] text-[var(--landing-subtle)]">Core capabilities</p>
24
24
<h2 className="mt-3 text-3xl font-semibold leading-tight text-white md:text-5xl">Designed for clarity, control, and speed</h2>
+10
-4
components/landing/landing-header.tsx
+10
-4
components/landing/landing-header.tsx
···
1
1
import Image from "next/image";
2
2
3
-
const navLinks = ["Product", "Features", "Pricing", "FAQ"];
3
+
const navLinks = [
4
+
{ label: "Overview", href: "#features" },
5
+
{ label: "Features", href: "#features" },
6
+
{ label: "Data", href: "#data" },
7
+
{ label: "FAQ", href: "#faq" },
8
+
{ label: "About", href: "/about" },
9
+
];
4
10
5
11
export function LandingHeader() {
6
12
return (
7
13
<header className="sticky top-0 z-30 border-b border-white/10 bg-[var(--landing-bg)]/90 py-4 backdrop-blur">
8
14
<nav className="flex items-center justify-between gap-6">
9
-
<a href="#" aria-label="One Calendar home" className="flex items-center gap-2 text-white transition hover:brightness-110">
15
+
<a href="#top" aria-label="One Calendar home" className="flex items-center gap-2 text-white transition hover:brightness-110">
10
16
<Image src="/icon.svg" alt="One Calendar logo" width={20} height={20} className="h-5 w-5" />
11
17
<span className="text-lg font-semibold tracking-tight">One Calendar</span>
12
18
</a>
13
19
14
20
<div className="hidden items-center gap-7 text-sm text-[var(--landing-muted)] md:flex">
15
21
{navLinks.map((link) => (
16
-
<a key={link} href="#" className="transition duration-200 hover:-translate-y-0.5 hover:text-white">
17
-
{link}
22
+
<a key={link.label} href={link.href} className="transition duration-200 hover:-translate-y-0.5 hover:text-white">
23
+
{link.label}
18
24
</a>
19
25
))}
20
26
</div>
+13
-28
components/landing/landing-hero.tsx
+13
-28
components/landing/landing-hero.tsx
···
1
-
function HeroPreview() {
2
-
return (
3
-
<div className="relative w-full max-w-2xl rounded-2xl border border-white/10 bg-[var(--landing-panel)] p-4 shadow-[0_24px_60px_rgba(0,0,0,0.45)]">
4
-
<div className="pointer-events-none absolute inset-0 rounded-2xl shadow-[inset_0_1px_0_rgba(255,255,255,0.08)]" />
5
-
<svg viewBox="0 0 760 460" role="img" aria-label="One Calendar dashboard preview" className="h-auto w-full">
6
-
<rect x="1" y="1" width="758" height="458" rx="16" fill="none" stroke="rgba(255,255,255,0.18)" />
7
-
<rect x="24" y="22" width="712" height="36" rx="8" fill="rgba(255,255,255,0.06)" />
8
-
<rect x="24" y="74" width="190" height="362" rx="10" fill="rgba(255,255,255,0.03)" stroke="rgba(255,255,255,0.1)" />
9
-
<rect x="232" y="74" width="504" height="362" rx="10" fill="rgba(255,255,255,0.02)" stroke="rgba(255,255,255,0.1)" />
10
-
<rect x="42" y="98" width="120" height="10" rx="5" fill="rgba(255,255,255,0.12)" />
11
-
<rect x="42" y="126" width="90" height="8" rx="4" fill="rgba(255,255,255,0.08)" />
12
-
{Array.from({ length: 5 }).map((_, i) => (
13
-
<g key={i}>
14
-
<rect x="256" y={98 + i * 62} width="456" height="44" rx="8" fill="none" stroke="rgba(255,255,255,0.14)" />
15
-
<rect x="274" y={114 + i * 62} width="140" height="10" rx="5" fill="rgba(255,255,255,0.11)" />
16
-
<rect x="620" y={114 + i * 62} width="72" height="10" rx="5" fill="rgba(255,255,255,0.08)" />
17
-
</g>
18
-
))}
19
-
</svg>
20
-
</div>
21
-
);
22
-
}
23
-
24
1
export function LandingHero() {
25
2
return (
26
-
<section className="grid gap-12 py-16 md:grid-cols-2 md:items-center md:py-24">
3
+
<section id="top" className="grid gap-12 py-16 md:grid-cols-2 md:items-center md:py-24">
27
4
<div>
28
5
<p className="text-xs uppercase tracking-[0.24em] text-[var(--landing-subtle)]">Privacy-first calendar</p>
29
6
<h1 className="mt-4 text-5xl font-semibold leading-tight tracking-tight text-white md:text-[72px]">
30
-
Plan weekly.
7
+
Plan clearly.
31
8
<br />
32
9
Stay focused.
33
10
<br />
34
11
Ship calmly.
35
12
</h1>
36
13
<p className="mt-6 max-w-xl text-base text-[var(--landing-muted)] md:text-lg">
37
-
One Calendar gives individuals and small teams a clean weekly command center with local-first behavior, sync options, and portable data.
14
+
One Calendar gives individuals and small teams a clean planning command center with local-first behavior, sync options, and portable data.
38
15
</p>
39
16
<div className="mt-8 flex gap-3">
40
17
<a href="/sign-up" aria-label="Get started" className="rounded-md bg-white px-5 py-2.5 text-sm font-medium text-black transition duration-200 hover:-translate-y-0.5 hover:brightness-110">
41
18
Get started
42
19
</a>
43
-
<a href="#" aria-label="View product demo" className="rounded-md border border-white/15 px-5 py-2.5 text-sm text-[var(--landing-muted)] transition duration-200 hover:-translate-y-0.5 hover:border-white/30 hover:text-white">
20
+
<a href="#features" aria-label="View product features" className="rounded-md border border-white/15 px-5 py-2.5 text-sm text-[var(--landing-muted)] transition duration-200 hover:-translate-y-0.5 hover:border-white/30 hover:text-white">
44
21
View features
45
22
</a>
46
23
</div>
47
24
</div>
48
-
<HeroPreview />
25
+
26
+
<div className="relative w-full overflow-hidden rounded-2xl border border-white/10 bg-[var(--landing-panel)] p-3 shadow-[0_24px_60px_rgba(0,0,0,0.45)]">
27
+
<div className="pointer-events-none absolute inset-0 rounded-2xl shadow-[inset_0_1px_0_rgba(255,255,255,0.08)]" />
28
+
<img
29
+
src="https://github.com/user-attachments/assets/cb179685-f792-42c8-bad8-ef1739659906"
30
+
alt="One Calendar dark preview"
31
+
className="h-auto w-full rounded-xl border border-white/10"
32
+
/>
33
+
</div>
49
34
</section>
50
35
);
51
36
}