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
Merge pull request #162 from EvanTechDev/feature/set-icon.svg-to-default-white-on-landing
Revamp landing: force-white icon, expand content, rename components, remove legacy marketing
authored by
Evan Huang
and committed by
GitHub
a6538c5e
cb00ae7c
+269
-2522
+2
app/page.tsx
+2
app/page.tsx
···
5
5
LandingDataShowcase,
6
6
LandingComparison,
7
7
LandingTestimonials,
8
+
LandingDeepDive,
8
9
LandingFaq,
9
10
LandingCta,
10
11
LandingFooter,
···
20
21
<LandingDataShowcase />
21
22
<LandingComparison />
22
23
<LandingTestimonials />
24
+
<LandingDeepDive />
23
25
<LandingFaq />
24
26
<LandingCta />
25
27
</div>
+131
components/landing/deep-dive.tsx
+131
components/landing/deep-dive.tsx
···
1
+
import { LandingTitle } from "./title";
2
+
3
+
type Item = {
4
+
title: string;
5
+
detail: string;
6
+
icon: string;
7
+
};
8
+
9
+
const useCases: Item[] = [
10
+
{
11
+
title: "Deep work planning for individuals",
12
+
detail:
13
+
"Protect focus time with intentional blocks, reminders, and weekly structure so important work is not displaced by reactive scheduling.",
14
+
icon: "M6 17h20M6 23h12M8 7h16M12 3v8m8-8v8",
15
+
},
16
+
{
17
+
title: "Small team release coordination",
18
+
detail:
19
+
"Align launch prep, design checkpoints, QA windows, and retrospectives on a single timeline to reduce execution overhead.",
20
+
icon: "M4 16h24M8 8h16M8 24h16M12 8v16m8-16v16",
21
+
},
22
+
{
23
+
title: "Study and exam scheduling",
24
+
detail:
25
+
"Convert long learning goals into daily actions and track classes, revision windows, and deadlines with predictable cadence.",
26
+
icon: "M8 5h16a2 2 0 0 1 2 2v18l-5-3-5 3-5-3-5 3V7a2 2 0 0 1 2-2Z",
27
+
},
28
+
{
29
+
title: "Cross-time-zone collaboration",
30
+
detail:
31
+
"Find realistic overlap times quickly and keep recurring meetings stable for globally distributed collaborators.",
32
+
icon: "M16 4a12 12 0 1 0 0 24 12 12 0 0 0 0-24Zm0 4v8l5 3",
33
+
},
34
+
{
35
+
title: "Content production pipeline",
36
+
detail:
37
+
"Map ideation, drafting, review, publication, and follow-up analysis as one connected production flow.",
38
+
icon: "M5 6h22v20H5zM9 11h14M9 16h14M9 21h9",
39
+
},
40
+
{
41
+
title: "Family and life operations",
42
+
detail:
43
+
"Coordinate appointments, school events, travel windows, and household plans in one dependable system.",
44
+
icon: "M6 25V11l10-7 10 7v14M12 25v-8h8v8",
45
+
},
46
+
];
47
+
48
+
const principles: Item[] = [
49
+
{
50
+
title: "Simplicity by default",
51
+
detail: "Keep first-view information clear and calm so users focus on decisions, not interface noise.",
52
+
icon: "M6 9h20M6 16h20M6 23h12",
53
+
},
54
+
{
55
+
title: "Portability by default",
56
+
detail: "Preserve user freedom with reliable import/export and avoid system-level lock-in.",
57
+
icon: "M16 5v18m0 0-6-6m6 6 6-6M6 27h20",
58
+
},
59
+
{
60
+
title: "Auditability by default",
61
+
detail: "Use an open implementation that can be inspected, discussed, and improved by the community.",
62
+
icon: "M5 8h22v16H5zM11 14h10M11 19h7",
63
+
},
64
+
{
65
+
title: "Privacy by default",
66
+
detail: "Treat privacy as baseline product behavior, not as a premium feature toggle.",
67
+
icon: "M16 4 7 8v7c0 6 4 9 9 12 5-3 9-6 9-12V8l-9-4Zm0 8v5",
68
+
},
69
+
{
70
+
title: "Speed by default",
71
+
detail: "Enable high-frequency workflows with keyboard-first interaction and low-friction editing.",
72
+
icon: "M4 10h24v12H4zM8 14h3m3 0h10m-13 4h9",
73
+
},
74
+
{
75
+
title: "Scalability by default",
76
+
detail: "Support smooth growth from personal planning routines to structured team coordination.",
77
+
icon: "M7 24h18M10 24V8m6 16V5m6 19v-9",
78
+
},
79
+
];
80
+
81
+
function RowItem({ item }: { item: Item }) {
82
+
return (
83
+
<article className="flex items-start gap-4 border-b border-white/10 py-5 last:border-b-0">
84
+
<span className="rounded-md border border-white/15 bg-white/[0.03] p-2">
85
+
<svg viewBox="0 0 32 32" aria-hidden="true" className="h-5 w-5 stroke-white" fill="none" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round">
86
+
<path d={item.icon} />
87
+
</svg>
88
+
</span>
89
+
<div>
90
+
<LandingTitle as="h3" className="text-lg font-medium text-white">{item.title}</LandingTitle>
91
+
<p className="mt-2 text-sm leading-relaxed text-[var(--landing-muted)] md:text-base">{item.detail}</p>
92
+
</div>
93
+
</article>
94
+
);
95
+
}
96
+
97
+
export function LandingDeepDive() {
98
+
return (
99
+
<section id="deep-dive" className="border-b border-white/10 py-24 md:py-28">
100
+
<LandingTitle as="h2" className="text-3xl font-semibold leading-tight text-white md:text-5xl">
101
+
More complete real-world scenarios
102
+
<br />
103
+
and product direction
104
+
</LandingTitle>
105
+
<p className="mt-4 max-w-3xl text-base text-[var(--landing-muted)] md:text-lg">
106
+
One Calendar is more than event storage. It is a practical scheduling system for sustained focus,
107
+
coordinated execution, and consistent long-term planning.
108
+
</p>
109
+
110
+
<div className="mt-12 grid gap-12 lg:grid-cols-2">
111
+
<div>
112
+
<LandingTitle as="h3" className="text-2xl font-semibold text-white md:text-3xl">Real-world scenarios</LandingTitle>
113
+
<div className="mt-4">
114
+
{useCases.map((item) => (
115
+
<RowItem key={item.title} item={item} />
116
+
))}
117
+
</div>
118
+
</div>
119
+
120
+
<div>
121
+
<LandingTitle as="h3" className="text-2xl font-semibold text-white md:text-3xl">Product principles</LandingTitle>
122
+
<div className="mt-4">
123
+
{principles.map((item) => (
124
+
<RowItem key={item.title} item={item} />
125
+
))}
126
+
</div>
127
+
</div>
128
+
</div>
129
+
</section>
130
+
);
131
+
}
+74
components/landing/faq.tsx
+74
components/landing/faq.tsx
···
1
+
import {
2
+
Accordion,
3
+
AccordionContent,
4
+
AccordionItem,
5
+
AccordionTrigger,
6
+
} from "@/components/ui/accordion";
7
+
import { LandingTitle } from "./title";
8
+
9
+
const faqItems = [
10
+
{
11
+
q: "What is One Calendar’s core product focus?",
12
+
a: "One Calendar is an open-source, privacy-first calendar focused on planning clarity, fast interaction, and long-term data control.",
13
+
},
14
+
{
15
+
q: "Which import/export formats are supported?",
16
+
a: "The product supports iCalendar (.ics), JSON, and CSV import/export workflows for easier migration and backup.",
17
+
},
18
+
{
19
+
q: "Does it support end-to-end encryption?",
20
+
a: "Yes. End-to-end encryption (E2EE) is available as an optional capability for privacy-sensitive schedules.",
21
+
},
22
+
{
23
+
q: "What powers cloud sync and authentication?",
24
+
a: "Cloud sync is optional and PostgreSQL-based, while authentication is handled through Clerk.",
25
+
},
26
+
{
27
+
q: "Can I move my data away from One Calendar?",
28
+
a: "Yes. Portability is a key principle, so your data can be exported and moved across tools without lock-in.",
29
+
},
30
+
{
31
+
q: "Is it suitable for team workflows?",
32
+
a: "Yes. It works well for release planning, recurring team meetings, milestone tracking, and cross-time-zone coordination.",
33
+
},
34
+
{
35
+
q: "How is the mobile experience?",
36
+
a: "The landing and core interfaces are responsive. Mobile prioritizes quick access, while desktop emphasizes editing speed.",
37
+
},
38
+
{
39
+
q: "Are keyboard shortcuts and fast editing supported?",
40
+
a: "Yes. One Calendar is designed for high-frequency operation with keyboard shortcuts and low-friction edits.",
41
+
},
42
+
{
43
+
q: "Is the project open-source and self-hostable?",
44
+
a: "Yes. The codebase is open-source and can be reviewed, deployed, and extended according to your needs.",
45
+
},
46
+
{
47
+
q: "Is it a good fit for individual users?",
48
+
a: "Absolutely. It works for study plans, health routines, family schedules, travel planning, and personal project timelines.",
49
+
},
50
+
];
51
+
52
+
export function LandingFaq() {
53
+
return (
54
+
<section id="faq" className="border-b border-white/10 py-24 md:py-28">
55
+
<div className="grid w-full gap-8 md:grid-cols-[300px_1fr]">
56
+
<LandingTitle as="h2" className="text-3xl font-semibold text-white md:text-5xl">FAQ</LandingTitle>
57
+
<div className="px-0 md:px-2">
58
+
<Accordion type="single" collapsible className="w-full">
59
+
{faqItems.map((item, idx) => (
60
+
<AccordionItem key={item.q} value={`faq-${idx}`} className="border-white/10">
61
+
<AccordionTrigger className="py-5 text-left text-base font-medium text-white hover:no-underline">
62
+
{item.q}
63
+
</AccordionTrigger>
64
+
<AccordionContent className="pb-5 text-sm text-[var(--landing-muted)] md:text-base">
65
+
{item.a}
66
+
</AccordionContent>
67
+
</AccordionItem>
68
+
))}
69
+
</Accordion>
70
+
</div>
71
+
</div>
72
+
</section>
73
+
);
74
+
}
+11
-10
components/landing/index.ts
+11
-10
components/landing/index.ts
···
1
-
export { LandingHeader } from "./landing-header";
2
-
export { LandingHero } from "./landing-hero";
3
-
export { LandingDataShowcase } from "./landing-data-showcase";
4
-
export { LandingFeatures } from "./landing-features";
5
-
export { LandingComparison } from "./landing-comparison";
6
-
export { LandingTestimonials } from "./landing-testimonials";
7
-
export { LandingFaq } from "./landing-faq";
8
-
export { LandingCta } from "./landing-cta";
9
-
export { LandingFooter } from "./landing-footer";
1
+
export { LandingHeader } from "./header";
2
+
export { LandingHero } from "./hero";
3
+
export { LandingDataShowcase } from "./data-showcase";
4
+
export { LandingFeatures } from "./features";
5
+
export { LandingComparison } from "./comparison";
6
+
export { LandingTestimonials } from "./testimonials";
7
+
export { LandingDeepDive } from "./deep-dive";
8
+
export { LandingFaq } from "./faq";
9
+
export { LandingCta } from "./cta";
10
+
export { LandingFooter } from "./footer";
10
11
11
-
export { LandingTitle } from "./landing-title";
12
+
export { LandingTitle } from "./title";
+1
-1
components/landing/landing-comparison.tsx
components/landing/comparison.tsx
+1
-1
components/landing/landing-comparison.tsx
components/landing/comparison.tsx
components/landing/landing-cta.tsx
components/landing/cta.tsx
components/landing/landing-cta.tsx
components/landing/cta.tsx
+1
-1
components/landing/landing-data-showcase.tsx
components/landing/data-showcase.tsx
+1
-1
components/landing/landing-data-showcase.tsx
components/landing/data-showcase.tsx
-50
components/landing/landing-faq.tsx
-50
components/landing/landing-faq.tsx
···
1
-
import {
2
-
Accordion,
3
-
AccordionContent,
4
-
AccordionItem,
5
-
AccordionTrigger,
6
-
} from "@/components/ui/accordion";
7
-
import { LandingTitle } from "./landing-title";
8
-
9
-
const faqItems = [
10
-
{
11
-
q: "What is One Calendar's product direction?",
12
-
a: "One Calendar is positioned as a privacy-first, planning-focused open-source calendar built for clarity and control.",
13
-
},
14
-
{
15
-
q: "Which import formats are supported?",
16
-
a: "The project documents support for iCalendar (.ics), JSON, and CSV import/export workflows.",
17
-
},
18
-
{
19
-
q: "Does One Calendar support encrypted data handling?",
20
-
a: "Yes. The README lists optional end-to-end encryption (E2EE) support for privacy-sensitive usage.",
21
-
},
22
-
{
23
-
q: "What stack powers cloud sync and auth?",
24
-
a: "Cloud sync is described as optional and PostgreSQL-based, while authentication is handled through Clerk.",
25
-
},
26
-
];
27
-
28
-
export function LandingFaq() {
29
-
return (
30
-
<section id="faq" className="border-b border-white/10 py-24 md:py-28">
31
-
<div className="grid w-full gap-8 md:grid-cols-[300px_1fr]">
32
-
<LandingTitle as="h2" className="text-3xl font-semibold text-white md:text-5xl">FAQ</LandingTitle>
33
-
<div className="px-0 md:px-2">
34
-
<Accordion type="single" collapsible className="w-full">
35
-
{faqItems.map((item, idx) => (
36
-
<AccordionItem key={item.q} value={`faq-${idx}`} className="border-white/10">
37
-
<AccordionTrigger className="py-5 text-left text-base font-medium text-white hover:no-underline">
38
-
{item.q}
39
-
</AccordionTrigger>
40
-
<AccordionContent className="pb-5 text-sm text-[var(--landing-muted)] md:text-base">
41
-
{item.a}
42
-
</AccordionContent>
43
-
</AccordionItem>
44
-
))}
45
-
</Accordion>
46
-
</div>
47
-
</div>
48
-
</section>
49
-
);
50
-
}
+19
-4
components/landing/landing-features.tsx
components/landing/features.tsx
+19
-4
components/landing/landing-features.tsx
components/landing/features.tsx
···
1
-
import { LandingTitle } from "./landing-title";
1
+
import { LandingTitle } from "./title";
2
2
3
3
const features = [
4
4
{
···
16
16
description: "Import/export with .ics, .json, and .csv while keeping full control.",
17
17
icon: <path d="M16 4v16m0 0-5-5m5 5 5-5M5 26h22" />,
18
18
},
19
+
{
20
+
title: "Multi-view workflow",
21
+
description: "Switch between day, week, month, and year perspectives without losing context.",
22
+
icon: <path d="M5 8h22M5 16h22M5 24h22M10 4v24M22 4v24" />,
23
+
},
24
+
{
25
+
title: "Keyboard-first speed",
26
+
description: "Navigate and edit quickly with shortcuts designed for high-frequency planning.",
27
+
icon: <path d="M4 9h24v14H4zM8 13h4m4 0h8m-14 4h12" />,
28
+
},
29
+
{
30
+
title: "Cross-device consistency",
31
+
description: "A consistent experience across desktop and mobile layouts for daily reliability.",
32
+
icon: <path d="M10 5h12a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H10a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2Zm4 15h4" />,
33
+
},
19
34
];
20
35
21
36
export function LandingFeatures() {
···
32
47
</p>
33
48
</div>
34
49
35
-
<div className="mt-14 grid gap-8 md:grid-cols-3 md:gap-0">
36
-
{features.map((feature, index) => (
37
-
<article key={feature.title} className={`px-0 md:px-8 ${index !== 2 ? "md:border-r md:border-white/10" : ""}`}>
50
+
<div className="mt-14 grid gap-6 md:grid-cols-2 xl:grid-cols-3">
51
+
{features.map((feature) => (
52
+
<article key={feature.title} className="rounded-xl border border-white/10 p-6">
38
53
<svg viewBox="0 0 32 32" aria-hidden="true" className="mb-5 h-9 w-9 stroke-white" fill="none" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
39
54
{feature.icon}
40
55
</svg>
+3
-2
components/landing/landing-header.tsx
components/landing/header.tsx
+3
-2
components/landing/landing-header.tsx
components/landing/header.tsx
···
1
-
import Image from "next/image";
1
+
import { LandingLogoIcon } from "./logo-icon";
2
2
3
3
const navLinks = [
4
4
{ label: "Overview", href: "#features" },
5
5
{ label: "Features", href: "#features" },
6
6
{ label: "Data", href: "#data" },
7
7
{ label: "FAQ", href: "#faq" },
8
+
{ label: "Deep Dive", href: "#deep-dive" },
8
9
{ label: "About", href: "/about" },
9
10
];
10
11
···
13
14
<header className="sticky top-0 z-30 border-b border-white/10 bg-[var(--landing-bg)]/90 py-4 backdrop-blur">
14
15
<nav className="flex items-center justify-between gap-6">
15
16
<a href="#top" aria-label="One Calendar home" className="flex items-center gap-2 text-white transition hover:brightness-110">
16
-
<Image src="/icon.svg" alt="One Calendar logo" width={20} height={20} className="h-5 w-5" />
17
+
<LandingLogoIcon className="h-5 w-5" />
17
18
<span className="text-lg font-semibold tracking-tight">One Calendar</span>
18
19
</a>
19
20
+1
-1
components/landing/landing-hero-demo.tsx
components/landing/hero-demo.tsx
+1
-1
components/landing/landing-hero-demo.tsx
components/landing/hero-demo.tsx
+2
-2
components/landing/landing-hero.tsx
components/landing/hero.tsx
+2
-2
components/landing/landing-hero.tsx
components/landing/hero.tsx
···
1
1
import Image from "next/image";
2
2
import bannerDark from "@/public/Banner-dark.jpg";
3
-
import { LandingHeroDemo } from "./landing-hero-demo";
4
-
import { LandingTitle } from "./landing-title";
3
+
import { LandingHeroDemo } from "./hero-demo";
4
+
import { LandingTitle } from "./title";
5
5
6
6
export function LandingHero() {
7
7
return (
+1
-1
components/landing/landing-testimonials.tsx
components/landing/testimonials.tsx
+1
-1
components/landing/landing-testimonials.tsx
components/landing/testimonials.tsx
components/landing/landing-title.tsx
components/landing/title.tsx
components/landing/landing-title.tsx
components/landing/title.tsx
+21
components/landing/logo-icon.tsx
+21
components/landing/logo-icon.tsx
···
1
+
import { cn } from "@/lib/utils";
2
+
3
+
export function LandingLogoIcon({ className }: { className?: string }) {
4
+
return (
5
+
<svg
6
+
viewBox="0 0 1000 1000"
7
+
aria-hidden="true"
8
+
className={cn("text-white", className)}
9
+
fill="currentColor"
10
+
>
11
+
<path d="M4960 8206 c-87 -24 -164 -70 -231 -136 -101 -101 -149 -217 -149 -360 0 -144 48 -259 150 -360 102 -102 218 -150 360 -150 140 0 264 53 365 156 194 198 194 508 0 709 -67 69 -165 125 -253 144 -68 14 -184 13 -242 -3z" />
12
+
<path d="M3616 6859 c-109 -26 -239 -117 -307 -215 -97 -141 -111 -350 -34 -510 61 -126 166 -217 305 -264 55 -19 82 -21 175 -18 102 3 115 6 185 39 147 70 239 172 281 311 17 57 21 88 18 182 -4 109 -5 115 -46 198 -68 136 -202 245 -343 277 -54 13 -180 12 -234 0z" />
13
+
<path d="M4963 6855 c-228 -64 -383 -263 -383 -493 0 -149 45 -259 149 -363 105 -105 212 -149 362 -149 188 0 345 90 443 254 70 117 85 297 35 434 -48 130 -170 250 -306 302 -75 29 -225 37 -300 15z" />
14
+
<path d="M4940 5491 c-91 -29 -142 -61 -211 -130 -103 -103 -149 -214 -149 -361 0 -328 308 -570 629 -495 279 66 450 358 373 636 -46 164 -177 299 -340 349 -83 26 -224 26 -302 1z" />
15
+
<path d="M4980 4149 c-81 -16 -188 -76 -255 -145 -97 -100 -145 -215 -145 -354 0 -147 46 -258 149 -361 105 -105 212 -149 362 -149 455 0 680 547 358 869 -121 122 -296 174 -469 140z" />
16
+
<path d="M3601 2784 c-116 -31 -242 -125 -306 -229 -65 -105 -87 -283 -50 -410 61 -215 263 -365 490 -365 134 0 244 43 343 135 118 109 162 211 162 376 0 160 -46 267 -159 371 -103 96 -213 139 -351 137 -41 0 -99 -7 -129 -15z" />
17
+
<path d="M4959 2785 c-85 -23 -162 -69 -229 -135 -102 -101 -150 -216 -150 -360 0 -147 57 -278 162 -374 205 -187 515 -181 709 13 157 157 193 397 91 600 -56 112 -196 223 -326 257 -63 17 -195 17 -257 -1z" />
18
+
<path d="M6311 2784 c-76 -20 -146 -60 -212 -122 -113 -104 -159 -211 -159 -371 0 -189 74 -329 228 -431 103 -68 259 -97 385 -71 130 28 271 129 336 245 86 151 86 361 1 512 -38 65 -141 164 -208 198 -109 55 -256 71 -371 40z" />
19
+
</svg>
20
+
);
21
+
}
-51
components/marketing/cta-section.tsx
-51
components/marketing/cta-section.tsx
···
1
-
"use client";
2
-
3
-
export default function CTASection() {
4
-
return (
5
-
<div className="w-full relative overflow-hidden flex flex-col justify-center items-center gap-2">
6
-
{}
7
-
<div className="self-stretch px-6 md:px-24 py-12 md:py-12 border-t border-b border-[rgba(55,50,47,0.12)] flex justify-center items-center gap-6 relative z-10">
8
-
<div className="absolute inset-0 w-full h-full overflow-hidden">
9
-
<div className="w-full h-full relative">
10
-
{Array.from({ length: 300 }).map((_, i) => (
11
-
<div
12
-
key={i}
13
-
className="absolute h-4 w-full rotate-[-45deg] origin-top-left outline outline-[0.5px] outline-[rgba(3,7,18,0.08)] outline-offset-[-0.25px]"
14
-
style={{
15
-
top: `${i * 16 - 120}px`,
16
-
left: "-100%",
17
-
width: "300%",
18
-
}}
19
-
></div>
20
-
))}
21
-
</div>
22
-
</div>
23
-
24
-
<div className="w-full max-w-[586px] px-6 py-5 md:py-8 overflow-hidden rounded-lg flex flex-col justify-start items-center gap-6 relative z-20">
25
-
<div className="self-stretch flex flex-col justify-start items-start gap-3">
26
-
<div className="self-stretch text-center flex justify-center flex-col text-[#49423D] text-3xl md:text-5xl font-semibold leading-tight md:leading-[56px] font-sans tracking-tight">
27
-
Ready to transform your schedule?
28
-
</div>
29
-
<div className="self-stretch text-center text-[#605A57] text-base leading-7 font-sans font-medium">
30
-
Join us then streamline calendar manage with One Calendar.
31
-
<br />
32
-
managing schedules, and protect your data with encryption.
33
-
</div>
34
-
</div>
35
-
<a href="/sign-up">
36
-
<div className="w-full max-w-[497px] flex flex-col justify-center items-center gap-12">
37
-
<div className="flex justify-start items-center gap-4">
38
-
<div className="h-10 px-12 py-[6px] relative bg-[#37322F] shadow-[0px_0px_0px_2.5px_rgba(255,255,255,0.08)_inset] overflow-hidden rounded-full flex justify-center items-center cursor-pointer hover:bg-[#2A2520] transition-colors">
39
-
<div className="w-44 h-[41px] absolute left-0 top-0 bg-gradient-to-b from-[rgba(255,255,255,0)] to-[rgba(0,0,0,0.10)] mix-blend-multiply"></div>
40
-
<div className="flex flex-col justify-center text-white text-[13px] font-medium leading-5 font-sans">
41
-
Get Started
42
-
</div>
43
-
</div>
44
-
</div>
45
-
</div>
46
-
</a>
47
-
</div>
48
-
</div>
49
-
</div>
50
-
);
51
-
}
-108
components/marketing/dashboard-preview.tsx
-108
components/marketing/dashboard-preview.tsx
···
1
-
import { Button } from "@/components/ui/button";
2
-
export function DashboardPreview() {
3
-
return (
4
-
<section className="relative pb-16">
5
-
<div className="max-w-[1060px] mx-auto px-4">
6
-
{}
7
-
<div className="relative bg-white rounded-lg shadow-lg border border-[#e0dedb] overflow-hidden">
8
-
{}
9
-
<div className="flex items-center justify-between p-4 border-b border-[#e0dedb]">
10
-
<div className="flex items-center gap-3">
11
-
<div className="text-[#37322f] font-semibold">Brillance</div>
12
-
<div className="w-2 h-2 bg-green-500 rounded-full"></div>
13
-
<span className="text-sm text-[#605a57]">Account</span>
14
-
</div>
15
-
<div className="flex items-center gap-2">
16
-
<div className="w-8 h-8 bg-[#37322f] rounded-full"></div>
17
-
</div>
18
-
</div>
19
-
20
-
{}
21
-
<div className="flex">
22
-
{}
23
-
<div className="w-48 bg-[#fbfaf9] border-r border-[#e0dedb] p-4">
24
-
<nav className="space-y-2">
25
-
<div className="text-xs font-medium text-[#605a57] uppercase tracking-wide mb-3">
26
-
Navigation
27
-
</div>
28
-
{[
29
-
"Home",
30
-
"Customers",
31
-
"Billing",
32
-
"Schedules",
33
-
"Invoices",
34
-
"Products",
35
-
].map((item) => (
36
-
<div
37
-
key={item}
38
-
className="text-sm text-[#37322f] py-1 hover:text-[#37322f]/80 cursor-pointer"
39
-
>
40
-
{item}
41
-
</div>
42
-
))}
43
-
</nav>
44
-
</div>
45
-
46
-
{}
47
-
<div className="flex-1 p-6">
48
-
<div className="flex items-center justify-between mb-6">
49
-
<h2 className="text-xl font-semibold text-[#37322f]">
50
-
Schedules
51
-
</h2>
52
-
<Button className="bg-[#37322f] hover:bg-[#37322f]/90 text-white text-sm">
53
-
Create schedule
54
-
</Button>
55
-
</div>
56
-
57
-
{}
58
-
<div className="bg-white border border-[#e0dedb] rounded-lg overflow-hidden">
59
-
<div className="grid grid-cols-6 gap-4 p-4 bg-[#fbfaf9] border-b border-[#e0dedb] text-sm font-medium text-[#605a57]">
60
-
<div>Customer</div>
61
-
<div>Status</div>
62
-
<div>Products</div>
63
-
<div>Total</div>
64
-
<div>Start date</div>
65
-
<div>End date</div>
66
-
</div>
67
-
68
-
{}
69
-
{Array.from({ length: 8 }).map((_, i) => (
70
-
<div
71
-
key={i}
72
-
className="grid grid-cols-6 gap-4 p-4 border-b border-[#e0dedb] text-sm"
73
-
>
74
-
<div className="flex items-center gap-2">
75
-
<div className="w-6 h-6 bg-[#37322f] rounded-full"></div>
76
-
<span>Hypernise</span>
77
-
</div>
78
-
<div>
79
-
<span
80
-
className={`px-2 py-1 rounded text-xs ${
81
-
i % 3 === 0
82
-
? "bg-green-100 text-green-700"
83
-
: i % 3 === 1
84
-
? "bg-blue-100 text-blue-700"
85
-
: "bg-gray-100 text-gray-700"
86
-
}`}
87
-
>
88
-
{i % 3 === 0
89
-
? "Complete"
90
-
: i % 3 === 1
91
-
? "Active"
92
-
: "Draft"}
93
-
</span>
94
-
</div>
95
-
<div className="text-[#605a57]">Platform access fee</div>
96
-
<div className="font-medium">$3,862.32</div>
97
-
<div className="text-[#605a57]">1 Aug 2024</div>
98
-
<div className="text-[#605a57]">10 Jun 2024</div>
99
-
</div>
100
-
))}
101
-
</div>
102
-
</div>
103
-
</div>
104
-
</div>
105
-
</div>
106
-
</section>
107
-
);
108
-
}
-147
components/marketing/documentation-section.tsx
-147
components/marketing/documentation-section.tsx
···
1
-
"use client";
2
-
3
-
import { useState, useEffect } from "react";
4
-
import type React from "react";
5
-
6
-
function Badge({ icon, text }: { icon: React.ReactNode; text: string }) {
7
-
return (
8
-
<div className="px-[14px] py-[6px] bg-white shadow-[0px_0px_0px_4px_rgba(55,50,47,0.05)] overflow-hidden rounded-[90px] flex justify-start items-center gap-[8px] border border-[rgba(2,6,23,0.08)] shadow-xs">
9
-
<div className="w-[14px] h-[14px] relative overflow-hidden flex items-center justify-center">
10
-
{icon}
11
-
</div>
12
-
<div className="text-center flex justify-center flex-col text-[#37322F] text-xs font-medium leading-3 font-sans">
13
-
{text}
14
-
</div>
15
-
</div>
16
-
);
17
-
}
18
-
19
-
export default function DocumentationSection() {
20
-
const [activeCard, setActiveCard] = useState(0);
21
-
const [animationKey, setAnimationKey] = useState(0);
22
-
23
-
const cards = [
24
-
{
25
-
title: "Plan your schedules",
26
-
description:
27
-
"Explore your data, build your dashboard,\nsave your time together.",
28
-
image: "/Banner.jpg",
29
-
},
30
-
{
31
-
title: "Data to insights in minutes",
32
-
description:
33
-
"Transform raw data into actionable insights\nwith powerful analytics tools.",
34
-
image: "/A.jpg",
35
-
},
36
-
{
37
-
title: "Share schedule safety",
38
-
description: "Password-protect share with anyone\nand burn-after-read.",
39
-
image: "/S.jpg",
40
-
},
41
-
];
42
-
43
-
useEffect(() => {
44
-
const interval = setInterval(() => {
45
-
setActiveCard((prev) => (prev + 1) % cards.length);
46
-
setAnimationKey((prev) => prev + 1);
47
-
}, 5000);
48
-
49
-
return () => clearInterval(interval);
50
-
}, [cards.length]);
51
-
52
-
const handleCardClick = (index: number) => {
53
-
setActiveCard(index);
54
-
setAnimationKey((prev) => prev + 1);
55
-
};
56
-
57
-
return (
58
-
<div className="w-full border-b border-[rgba(55,50,47,0.12)] flex flex-col justify-center items-center">
59
-
{}
60
-
<div className="self-stretch px-6 md:px-24 py-12 md:py-16 border-b border-[rgba(55,50,47,0.12)] flex justify-center items-center gap-6">
61
-
<div className="w-full max-w-[586px] px-6 py-5 shadow-[0px_2px_4px_rgba(50,45,43,0.06)] overflow-hidden rounded-lg flex flex-col justify-start items-center gap-4 shadow-none">
62
-
<Badge
63
-
icon={
64
-
<div className="w-[10.50px] h-[10.50px] outline outline-[1.17px] outline-[#37322F] outline-offset-[-0.58px] rounded-full"></div>
65
-
}
66
-
text="Platform Features"
67
-
/>
68
-
<div className="self-stretch text-center flex justify-center flex-col text-[#49423D] text-3xl md:text-5xl font-semibold leading-tight md:leading-[60px] font-sans tracking-tight">
69
-
Streamline your business operations
70
-
</div>
71
-
<div className="self-stretch text-center text-[#605A57] text-base font-normal leading-7 font-sans">
72
-
Manage schedules, analyze data, and collaborate with your team
73
-
<br />
74
-
all in one powerful platform.
75
-
</div>
76
-
</div>
77
-
</div>
78
-
79
-
{}
80
-
<div className="self-stretch px-4 md:px-9 overflow-hidden flex justify-start items-center">
81
-
<div className="flex-1 py-8 md:py-11 flex flex-col md:flex-row justify-start items-center gap-6 md:gap-12">
82
-
{}
83
-
<div className="w-full md:w-auto md:max-w-[400px] flex flex-col justify-center items-center gap-4 order-2 md:order-1">
84
-
{cards.map((card, index) => {
85
-
const isActive = index === activeCard;
86
-
87
-
return (
88
-
<div
89
-
key={index}
90
-
onClick={() => handleCardClick(index)}
91
-
className={`w-full overflow-hidden flex flex-col justify-start items-start transition-all duration-300 cursor-pointer ${
92
-
isActive
93
-
? "bg-white shadow-[0px_0px_0px_0.75px_#E0DEDB_inset]"
94
-
: "border border-[rgba(2,6,23,0.08)]"
95
-
}`}
96
-
>
97
-
<div
98
-
className={`w-full h-0.5 bg-[rgba(50,45,43,0.08)] overflow-hidden ${isActive ? "opacity-100" : "opacity-0"}`}
99
-
>
100
-
<div
101
-
key={animationKey}
102
-
className="h-0.5 bg-[#322D2B] animate-[progressBar_5s_linear_forwards] will-change-transform"
103
-
/>
104
-
</div>
105
-
<div className="px-6 py-5 w-full flex flex-col gap-2">
106
-
<div className="self-stretch flex justify-center flex-col text-[#49423D] text-sm font-semibold leading-6 font-sans">
107
-
{card.title}
108
-
</div>
109
-
<div className="self-stretch text-[#605A57] text-[13px] font-normal leading-[22px] font-sans whitespace-pre-line">
110
-
{card.description}
111
-
</div>
112
-
</div>
113
-
</div>
114
-
);
115
-
})}
116
-
</div>
117
-
118
-
{}
119
-
<div className="w-full md:w-auto rounded-lg flex flex-col justify-center items-center gap-2 order-1 md:order-2 md:px-0 px-[00]">
120
-
<div className="w-full md:w-[580px] h-[250px] md:h-[420px] bg-white shadow-[0px_0px_0px_0.9056603908538818px_rgba(0,0,0,0.08)] overflow-hidden rounded-lg flex flex-col justify-start items-start">
121
-
<div
122
-
className={`w-full h-full transition-all duration-300 ${
123
-
activeCard === 0
124
-
? "bg-gradient-to-br from-blue-50 to-blue-100"
125
-
: activeCard === 1
126
-
? "bg-gradient-to-br from-purple-50 to-purple-100"
127
-
: "bg-gradient-to-br from-green-50 to-green-100"
128
-
}`}
129
-
/>
130
-
</div>
131
-
</div>
132
-
</div>
133
-
</div>
134
-
135
-
<style jsx>{`
136
-
@keyframes progressBar {
137
-
0% {
138
-
transform: translateX(-100%);
139
-
}
140
-
100% {
141
-
transform: translateX(0%);
142
-
}
143
-
}
144
-
`}</style>
145
-
</div>
146
-
);
147
-
}
-133
components/marketing/faq-section.tsx
-133
components/marketing/faq-section.tsx
···
1
-
"use client";
2
-
3
-
import { useState } from "react";
4
-
5
-
interface FAQItem {
6
-
question: string;
7
-
answer: string;
8
-
}
9
-
10
-
const faqData: FAQItem[] = [
11
-
{
12
-
question: "What's One Calendar?",
13
-
answer:
14
-
"One Calendar is an AI-powered calendar application designed to simplify your scheduling with intelligent features and a user-friendly interface, while protecting your calendar data with end-to-end encryption (E2EE).",
15
-
},
16
-
{
17
-
question: "How do I import my existing calendar?",
18
-
answer:
19
-
"One Calendar supports importing data from Apple Calendar, Outlook and Google Calendar. Just download your calendar ics file in their settings and go to One Calendar's analysis page to import it.",
20
-
},
21
-
{
22
-
question: "How do I share my schedule with others?",
23
-
answer:
24
-
"With our sharing feature, you can easily share specific events with family, friends or colleagues. Let others import events, etc.",
25
-
},
26
-
{
27
-
question: "What kind of support do you provide?",
28
-
answer:
29
-
"We offer 24/7 customer support, dedicated account managers for enterprise clients, comprehensive documentation, and onboarding assistance to help you get started quickly.",
30
-
},
31
-
{
32
-
question: "Is my data secure with One Calendar?",
33
-
answer:
34
-
"Absolutely. We use enterprise-grade security measures including end-to-end encryption, SOC 2 compliance, and regular security audits. Your data is stored in secure, redundant data centers.",
35
-
},
36
-
{
37
-
question: "How do I get started with One Calendar?",
38
-
answer:
39
-
"Getting started is simple! Sign up an account, import your existing calendars, and set up automatic backup with E2EE. Done!",
40
-
},
41
-
];
42
-
43
-
function ChevronDownIcon({ className }: { className?: string }) {
44
-
return (
45
-
<svg
46
-
className={className}
47
-
width="24"
48
-
height="24"
49
-
viewBox="0 0 24 24"
50
-
fill="none"
51
-
xmlns="http://www.w3.org/2000/svg"
52
-
>
53
-
<path
54
-
d="m6 9 6 6 6-6"
55
-
stroke="currentColor"
56
-
strokeWidth="2"
57
-
strokeLinecap="round"
58
-
strokeLinejoin="round"
59
-
/>
60
-
</svg>
61
-
);
62
-
}
63
-
64
-
export default function FAQSection() {
65
-
const [openItems, setOpenItems] = useState<number[]>([]);
66
-
67
-
const toggleItem = (index: number) => {
68
-
setOpenItems((prev) =>
69
-
prev.includes(index) ? prev.filter((i) => i !== index) : [...prev, index],
70
-
);
71
-
};
72
-
73
-
return (
74
-
<div className="w-full flex justify-center items-start">
75
-
<div className="flex-1 px-4 md:px-12 py-16 md:py-20 flex flex-col lg:flex-row justify-start items-start gap-6 lg:gap-12">
76
-
{}
77
-
<div className="w-full lg:flex-1 flex flex-col justify-center items-start gap-4 lg:py-5">
78
-
<div className="w-full flex flex-col justify-center text-[#49423D] font-semibold leading-tight md:leading-[44px] font-sans text-4xl tracking-tight">
79
-
Frequently Asked Questions
80
-
</div>
81
-
<div className="w-full text-[#605A57] text-base font-normal leading-7 font-sans">
82
-
Explore your data, build your dashboard,
83
-
<br className="hidden md:block" />
84
-
bring your life together.
85
-
</div>
86
-
</div>
87
-
88
-
{}
89
-
<div className="w-full lg:flex-1 flex flex-col justify-center items-center">
90
-
<div className="w-full flex flex-col">
91
-
{faqData.map((item, index) => {
92
-
const isOpen = openItems.includes(index);
93
-
94
-
return (
95
-
<div
96
-
key={index}
97
-
className="w-full border-b border-[rgba(73,66,61,0.16)] overflow-hidden"
98
-
>
99
-
<button
100
-
onClick={() => toggleItem(index)}
101
-
className="w-full px-5 py-[18px] flex justify-between items-center gap-5 text-left hover:bg-[rgba(73,66,61,0.02)] transition-colors duration-200"
102
-
aria-expanded={isOpen}
103
-
>
104
-
<div className="flex-1 text-[#49423D] text-base font-medium leading-6 font-sans">
105
-
{item.question}
106
-
</div>
107
-
<div className="flex justify-center items-center">
108
-
<ChevronDownIcon
109
-
className={`w-6 h-6 text-[rgba(73,66,61,0.60)] transition-transform duration-300 ease-in-out ${
110
-
isOpen ? "rotate-180" : "rotate-0"
111
-
}`}
112
-
/>
113
-
</div>
114
-
</button>
115
-
116
-
<div
117
-
className={`overflow-hidden transition-all duration-300 ease-in-out ${
118
-
isOpen ? "max-h-96 opacity-100" : "max-h-0 opacity-0"
119
-
}`}
120
-
>
121
-
<div className="px-5 pb-[18px] text-[#605A57] text-sm font-normal leading-6 font-sans">
122
-
{item.answer}
123
-
</div>
124
-
</div>
125
-
</div>
126
-
);
127
-
})}
128
-
</div>
129
-
</div>
130
-
</div>
131
-
</div>
132
-
);
133
-
}
-54
components/marketing/feature-cards.tsx
-54
components/marketing/feature-cards.tsx
···
1
-
export function FeatureCards() {
2
-
const features = [
3
-
{
4
-
title: "Plan your schedules",
5
-
description:
6
-
"Explore your data, build your dashboard,\nbring your team together.",
7
-
highlighted: true,
8
-
},
9
-
{
10
-
title: "Data to insights in the minutes",
11
-
description:
12
-
"Explore your data, build your dashboard,\nbring your team together.",
13
-
highlighted: false,
14
-
},
15
-
{
16
-
title: "Data to insights in the minutes",
17
-
description:
18
-
"Explore your data, build your dashboard,\nbring your team together.",
19
-
highlighted: false,
20
-
},
21
-
];
22
-
23
-
return (
24
-
<section className="border-t border-[#e0dedb] border-b border-[#e0dedb]">
25
-
<div className="max-w-[1060px] mx-auto px-4">
26
-
<div className="grid grid-cols-1 md:grid-cols-3 gap-4 py-8">
27
-
{features.map((feature, index) => (
28
-
<div
29
-
key={index}
30
-
className={`p-6 flex flex-col gap-2 ${
31
-
feature.highlighted
32
-
? "bg-white border border-[#e0dedb] shadow-sm"
33
-
: "border border-[#e0dedb]/80"
34
-
}`}
35
-
>
36
-
{feature.highlighted && (
37
-
<div className="space-y-1 mb-2">
38
-
<div className="w-full h-0.5 bg-[#322d2b]/8"></div>
39
-
<div className="w-32 h-0.5 bg-[#322d2b]"></div>
40
-
</div>
41
-
)}
42
-
<h3 className="text-[#49423d] text-sm font-semibold leading-6">
43
-
{feature.title}
44
-
</h3>
45
-
<p className="text-[#605a57] text-sm leading-[22px] whitespace-pre-line">
46
-
{feature.description}
47
-
</p>
48
-
</div>
49
-
))}
50
-
</div>
51
-
</div>
52
-
</section>
53
-
);
54
-
}
-21
components/marketing/header.tsx
-21
components/marketing/header.tsx
···
1
-
import { Button } from "@/components/ui/button"
2
-
3
-
export function Header() {
4
-
return (
5
-
<header className="w-full border-b border-[#37322f]/6 bg-[#f7f5f3]">
6
-
<div className="max-w-[1060px] mx-auto px-4">
7
-
<nav className="flex items-center justify-between py-4">
8
-
<div className="flex items-center space-x-8">
9
-
<div className="text-[#37322f] font-semibold text-lg">One Calendar</div>
10
-
<div className="hidden md:flex items-center space-x-6">
11
-
<button className="text-[#37322f] hover:text-[#37322f]/80 text-sm font-medium" onClick={() => router.push("/about")}>About</button>
12
-
</div>
13
-
</div>
14
-
<Button variant="ghost" className="text-[#37322f] hover:bg-[#37322f]/5" onClick={() => router.push("/sign-in")}>
15
-
Log in
16
-
</Button>
17
-
</nav>
18
-
</div>
19
-
</header>
20
-
)
21
-
}
-33
components/marketing/hero-section.tsx
-33
components/marketing/hero-section.tsx
···
1
-
import { Button } from "@/components/ui/button";
2
-
3
-
export function HeroSection() {
4
-
return (
5
-
<section className="relative pt-[216px] pb-16">
6
-
<div className="max-w-[1060px] mx-auto px-4">
7
-
<div className="flex flex-col items-center gap-12">
8
-
{}
9
-
<div className="max-w-[937px] flex flex-col items-center gap-3">
10
-
<div className="flex flex-col items-center gap-6">
11
-
<h1 className="max-w-[748px] text-center text-[#37322f] text-5xl md:text-[80px] font-normal leading-tight md:leading-[96px] font-serif">
12
-
Time-Saving AI Calendar,
13
-
</h1>
14
-
<p className="max-w-[506px] text-center text-[#37322f]/80 text-lg font-medium leading-7">
15
-
Designed for Efficiency
16
-
</p>
17
-
</div>
18
-
</div>
19
-
20
-
{}
21
-
<div className="flex justify-center">
22
-
<Button
23
-
className="h-10 px-12 bg-[#37322f] hover:bg-[#37322f]/90 text-white rounded-full font-medium text-sm shadow-[0px_0px_0px_2.5px_rgba(255,255,255,0.08)_inset]"
24
-
onClick={() => router.push("/sign-up")}
25
-
>
26
-
Get Started
27
-
</Button>
28
-
</div>
29
-
</div>
30
-
</div>
31
-
</section>
32
-
);
33
-
}
-473
components/marketing/legacy-landing.tsx
-473
components/marketing/legacy-landing.tsx
···
1
-
"use client"
2
-
3
-
import { GithubIcon, CloudIcon, Share2Icon, BarChart3Icon, SunIcon, KeyboardIcon, ImportIcon, ExternalLinkIcon, MoonIcon, CalendarIcon } from "lucide-react"
4
-
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion"
5
-
import { readEncryptedLocalStorage, writeEncryptedLocalStorage } from "@/hooks/useLocalStorage"
6
-
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
7
-
import { Card, CardContent } from "@/components/ui/card"
8
-
import { Button } from "@/components/ui/button"
9
-
import { Switch } from "@/components/ui/switch"
10
-
import { Badge } from "@/components/ui/badge"
11
-
import { Label } from "@/components/ui/label"
12
-
import { useEffect, useState } from "react"
13
-
import { useRouter } from "next/navigation"
14
-
import { useUser } from "@clerk/nextjs"
15
-
import Image from "next/image"
16
-
17
-
export default function LandingPage() {
18
-
const router = useRouter()
19
-
const { isLoaded, isSignedIn } = useUser()
20
-
const [shouldRender, setShouldRender] = useState(false)
21
-
const [activeFeature, setActiveFeature] = useState("cloud")
22
-
const [showLoading, setShowLoading] = useState(false)
23
-
const [loadingDots, setLoadingDots] = useState("")
24
-
25
-
useEffect(() => {
26
-
let active = true
27
-
readEncryptedLocalStorage<string | boolean | null>("skip-landing", null).then((value) => {
28
-
if (!active) return
29
-
const hasSkippedLanding = value === "true" || value === true
30
-
if (hasSkippedLanding || (isLoaded && isSignedIn)) {
31
-
setShowLoading(true)
32
-
router.replace("/app")
33
-
} else if (isLoaded) {
34
-
setShouldRender(true)
35
-
}
36
-
})
37
-
return () => {
38
-
active = false
39
-
}
40
-
}, [isLoaded, isSignedIn, router])
41
-
42
-
useEffect(() => {
43
-
if (showLoading) {
44
-
const interval = setInterval(() => {
45
-
setLoadingDots(prev => {
46
-
if (prev === "...") return "."
47
-
return prev + "."
48
-
})
49
-
}, 400)
50
-
51
-
return () => clearInterval(interval)
52
-
}
53
-
}, [showLoading])
54
-
55
-
const handleGetStarted = () => {
56
-
void writeEncryptedLocalStorage("skip-landing", "true")
57
-
setShowLoading(true)
58
-
router.push("/app")
59
-
}
60
-
61
-
if (showLoading) {
62
-
return (
63
-
<div className="flex flex-col items-center justify-center min-h-screen bg-white dark:bg-black">
64
-
<CalendarIcon className="h-24 w-24 text-[#0066ff] mb-4" />
65
-
<p className="text-lg text-gray-700 dark:text-white">
66
-
Loading One Calendar{loadingDots}
67
-
</p>
68
-
</div>
69
-
)
70
-
}
71
-
72
-
if (!shouldRender) return null
73
-
74
-
return (
75
-
<div className="flex flex-col min-h-screen text-gray-900 dark:text-white">
76
-
<div className="fixed -z-10 inset-0">
77
-
<div className="absolute inset-0 bg-white dark:bg-black">
78
-
<div className="absolute inset-0" style={{
79
-
backgroundImage: `radial-gradient(circle at 1px 1px, rgba(0, 0, 0, 0.1) 1px, transparent 0)`,
80
-
backgroundSize: '24px 24px'
81
-
}} />
82
-
<div className="absolute inset-0 dark:block hidden" style={{
83
-
backgroundImage: `radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.15) 1px, transparent 0)`,
84
-
backgroundSize: '24px 24px'
85
-
}} />
86
-
</div>
87
-
</div>
88
-
89
-
<header className="sticky top-6 z-50 px-4 mx-auto flex justify-center">
90
-
<div className="w-auto max-w-4xl flex items-center justify-between rounded-xl px-2 py-1 bg-black/5 dark:bg-white/5 backdrop-blur-md border border-black/10 dark:border-white/20">
91
-
<div className="flex items-center gap-2 py-2 px-3">
92
-
<Image src="/icon.svg" alt="One Calendar" width={24} height={24} />
93
-
</div>
94
-
<nav className="hidden md:flex items-center gap-6 px-3 mr-32">
95
-
<a href="/about" className="text-sm text-gray-700 hover:text-gray-900 dark:text-white/70 dark:hover:text-white">About</a>
96
-
<div className="relative group">
97
-
<a href="#" className="text-sm text-gray-700 hover:text-gray-900 dark:text-white/70 dark:hover:text-white flex items-center">
98
-
Resources
99
-
<svg
100
-
xmlns="http://www.w3.org/2000/svg"
101
-
className="h-4 w-4 ml-1 text-gray-500 dark:text-gray-400 transition-transform duration-200 group-hover:rotate-180"
102
-
fill="none"
103
-
viewBox="0 0 24 24"
104
-
stroke="currentColor"
105
-
>
106
-
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
107
-
</svg>
108
-
</a>
109
-
110
-
<div className="absolute left-0 mt-2 w-56 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 transform translate-y-1 group-hover:translate-y-0">
111
-
<div className="py-2 rounded-xl bg-white dark:bg-gray-800 shadow-lg border border-gray-200 dark:border-gray-700">
112
-
<a href="https://github.com/EvanTechDev/One-Calendar" target="_blank" rel="noopener noreferrer" className="flex items-center px-4 py-3 hover:bg-gray-100 dark:hover:bg-gray-700">
113
-
<svg className="w-5 h-5 mr-3" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
114
-
<path d="M12 0C5.374 0 0 5.373 0 12c0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23A11.509 11.509 0 0112 5.803c1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576C20.566 21.797 24 17.3 24 12c0-6.627-5.373-12-12-12z"/>
115
-
</svg>
116
-
<span className="text-sm text-gray-700 dark:text-white/70">GitHub</span>
117
-
</a>
118
-
<a href="https://x.com/One__Cal" target="_blank" rel="noopener noreferrer" className="flex items-center px-4 py-3 hover:bg-gray-100 dark:hover:bg-gray-700">
119
-
<svg className="w-5 h-5 mr-3" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
120
-
<path d="M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z"/>
121
-
</svg>
122
-
<span className="text-sm text-gray-700 dark:text-white/70">X</span>
123
-
</a>
124
-
<div className="border-t border-gray-200 dark:border-gray-700 my-1"></div>
125
-
<a href="/privacy" className="flex items-center px-4 py-3 hover:bg-gray-100 dark:hover:bg-gray-700">
126
-
<svg className="w-5 h-5 mr-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" xmlns="http://www.w3.org/2000/svg">
127
-
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/>
128
-
</svg>
129
-
<span className="text-sm text-gray-700 dark:text-white/70">Privacy Policy</span>
130
-
</a>
131
-
<a href="/terms" className="flex items-center px-4 py-3 hover:bg-gray-100 dark:hover:bg-gray-700">
132
-
<svg className="w-5 h-5 mr-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" xmlns="http://www.w3.org/2000/svg">
133
-
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
134
-
</svg>
135
-
<span className="text-sm text-gray-700 dark:text-white/70">Terms of Service</span>
136
-
</a>
137
-
</div>
138
-
</div>
139
-
</div>
140
-
</nav>
141
-
<div className="flex items-center gap-4">
142
-
<Button
143
-
variant="ghost"
144
-
className="text-gray-700 hover:text-gray-900 hover:bg-gray-100 dark:text-white/70 dark:hover:text-white dark:hover:bg-white/10"
145
-
onClick={() => router.push("/sign-in")}
146
-
>
147
-
Sign in
148
-
</Button>
149
-
<Button
150
-
onClick={handleGetStarted}
151
-
className="bg-black text-white hover:bg-black/90 dark:bg-white dark:text-black dark:hover:bg-white/90 rounded-xl"
152
-
>
153
-
Get Started
154
-
</Button>
155
-
</div>
156
-
</div>
157
-
</header>
158
-
159
-
<section className="py-24 px-2">
160
-
<div className="max-w-5xl mx-auto text-center">
161
-
<div className="inline-flex items-center py-1 px-3 rounded-full bg-black/5 dark:bg-white/5 backdrop-blur-sm mb-8 relative"
162
-
style={{
163
-
border: "1px solid transparent",
164
-
backgroundImage: "linear-gradient(#ffffff, #ffffff), linear-gradient(90deg, #ff00ff, #00ffff, #ff8800, #00ff00)",
165
-
backgroundOrigin: "border-box",
166
-
backgroundClip: "padding-box, border-box",
167
-
position: "relative"
168
-
}}>
169
-
<span className="text-sm text-black">AI Powered</span>
170
-
</div>
171
-
<h1 className="text-4xl md:text-6xl font-medium tracking-tight mb-6 bg-clip-text text-transparent relative bg-black dark:bg-white">
172
-
Time-Saving AI Calendar,<br />Designed for Efficiency
173
-
</h1>
174
-
<p className="text-xl text-gray-700 dark:text-white/70 max-w-2xl mx-auto mb-6">
175
-
One Calendar is an AI-first app that streamlines your scheduling.
176
-
</p>
177
-
<div className="flex justify-center mb-16">
178
-
<Button
179
-
onClick={handleGetStarted}
180
-
className="bg-black text-white hover:bg-black/90 dark:bg-white dark:text-black dark:hover:bg-white/90 rounded-xl"
181
-
>
182
-
Get Started
183
-
</Button>
184
-
</div>
185
-
<div className="rounded-lg overflow-hidden border border-black/10 dark:border-white/20 bg-black/5 dark:bg-white/5 backdrop-blur-md shadow-2xl max-w-4xl mx-auto">
186
-
<Image
187
-
src="/Banner.jpg"
188
-
alt="One Calendar Preview"
189
-
width={1200}
190
-
height={675}
191
-
className="w-full object-cover dark:hidden"
192
-
/>
193
-
<Image
194
-
src="/Banner-dark.jpg"
195
-
alt="One Calendar Preview - Dark"
196
-
width={1200}
197
-
height={675}
198
-
className="w-full object-cover hidden dark:block"
199
-
/>
200
-
</div>
201
-
</div>
202
-
</section>
203
-
204
-
<section className="py-20 px-4">
205
-
<div className="max-w-5xl mx-auto">
206
-
<Tabs defaultValue="cloud" className="w-full" onValueChange={setActiveFeature}>
207
-
<div className="flex justify-center mb-12">
208
-
<TabsList className="bg-black/5 dark:bg-white/5 border border-black/10 dark:border-white/20 backdrop-blur-md">
209
-
<TabsTrigger value="cloud" className="data-[state=active]:bg-black/10 dark:data-[state=active]:bg-white/10">
210
-
<CloudIcon className="h-4 w-4 mr-2" />
211
-
Cloud Sync
212
-
</TabsTrigger>
213
-
<TabsTrigger value="sharing" className="data-[state=active]:bg-black/10 dark:data-[state=active]:bg-white/10">
214
-
<Share2Icon className="h-4 w-4 mr-2" />
215
-
Sharing
216
-
</TabsTrigger>
217
-
<TabsTrigger value="analytics" className="data-[state=active]:bg-black/10 dark:data-[state=active]:bg-white/10">
218
-
<BarChart3Icon className="h-4 w-4 mr-2" />
219
-
Analytics
220
-
</TabsTrigger>
221
-
<TabsTrigger value="weather" className="data-[state=active]:bg-black/10 dark:data-[state=active]:bg-white/10">
222
-
<SunIcon className="h-4 w-4 mr-2" />
223
-
Weather
224
-
</TabsTrigger>
225
-
<TabsTrigger value="shortcuts" className="data-[state=active]:bg-black/10 dark:data-[state=active]:bg-white/10">
226
-
<KeyboardIcon className="h-4 w-4 mr-2" />
227
-
Shortcuts
228
-
</TabsTrigger>
229
-
<TabsTrigger value="import" className="data-[state=active]:bg-black/10 dark:data-[state=active]:bg-white/10">
230
-
<ImportIcon className="h-4 w-4 mr-2" />
231
-
Import
232
-
</TabsTrigger>
233
-
</TabsList>
234
-
</div>
235
-
<div className="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
236
-
<TabsContent value="cloud" className="mt-0">
237
-
<Badge className="mb-4 bg-blue-100 dark:bg-blue-500/20 text-blue-700 dark:text-blue-300 hover:bg-blue-500/30 border-none">Cloud Technology</Badge>
238
-
<h2 className="text-3xl font-bold mb-4">Cloud Sync</h2>
239
-
<p className="text-gray-700 dark:text-white/70">
240
-
Access your events from anywhere with secure cloud storage. Your calendar stays in sync across all your devices.
241
-
</p>
242
-
</TabsContent>
243
-
<TabsContent value="sharing" className="mt-0">
244
-
<Badge className="mb-4 bg-green-100 dark:bg-green-500/20 text-green-700 dark:text-green-300 hover:bg-green-500/30 border-none">Collaboration</Badge>
245
-
<h2 className="text-3xl font-bold mb-4">Easy Sharing</h2>
246
-
<p className="text-gray-700 dark:text-white/70">
247
-
Collaborate and share your schedule with ease. Perfect for team coordination and family planning.
248
-
</p>
249
-
</TabsContent>
250
-
<TabsContent value="analytics" className="mt-0">
251
-
<Badge className="mb-4 bg-purple-100 dark:bg-purple-500/20 text-purple-700 dark:text-purple-300 hover:bg-purple-500/30 border-none">Insights</Badge>
252
-
<h2 className="text-3xl font-bold mb-4">Analytics</h2>
253
-
<p className="text-gray-700 dark:text-white/70">
254
-
Gain insights with smart event tracking and summaries. Understand how you spend your time.
255
-
</p>
256
-
</TabsContent>
257
-
<TabsContent value="weather" className="mt-0">
258
-
<Badge className="mb-4 bg-yellow-100 dark:bg-yellow-500/20 text-yellow-700 dark:text-yellow-300 hover:bg-yellow-500/30 border-none">Forecasting</Badge>
259
-
<h2 className="text-3xl font-bold mb-4">Weather Integration</h2>
260
-
<p className="text-gray-700 dark:text-white/70">
261
-
See real-time weather in your calendar view. Plan outdoor events with confidence.
262
-
</p>
263
-
</TabsContent>
264
-
<TabsContent value="shortcuts" className="mt-0">
265
-
<Badge className="mb-4 bg-red-100 dark:bg-red-500/20 text-red-700 dark:text-red-300 hover:bg-red-500/30 border-none">Productivity</Badge>
266
-
<h2 className="text-3xl font-bold mb-4">Keyboard Shortcuts</h2>
267
-
<p className="text-gray-700 dark:text-white/70">
268
-
Navigate quickly using customizable shortcuts. Work efficiently without touching your mouse.
269
-
</p>
270
-
</TabsContent>
271
-
<TabsContent value="import" className="mt-0">
272
-
<Badge className="mb-4 bg-pink-100 dark:bg-pink-500/20 text-pink-700 dark:text-pink-300 hover:bg-pink-500/30 border-none">Data Transfer</Badge>
273
-
<h2 className="text-3xl font-bold mb-4">Import & Export</h2>
274
-
<p className="text-gray-700 dark:text-white/70">
275
-
Easily move data in and out of One Calendar. Compatible with all standard calendar formats.
276
-
</p>
277
-
</TabsContent>
278
-
<div className="order-first md:order-last relative">
279
-
<div className="aspect-video rounded-lg overflow-hidden border border-black/10 dark:border-white/20 bg-black/5 dark:bg-white/5 backdrop-blur-md flex items-center justify-center relative">
280
-
{activeFeature === "cloud" && (
281
-
<div className="p-4 w-full h-full flex items-center justify-center">
282
-
<div className="absolute inset-0 bg-gradient-to-br from-blue-200/70 to-purple-200/70 dark:from-blue-500/20 dark:to-purple-500/20 opacity-30" />
283
-
<CloudIcon className="h-20 w-20 text-black/30 dark:text-white/30" />
284
-
</div>
285
-
)}
286
-
{activeFeature === "sharing" && (
287
-
<div className="p-4 w-full h-full flex items-center justify-center">
288
-
<div className="absolute inset-0 bg-gradient-to-br from-green-200/70 to-blue-200/70 dark:from-green-500/20 dark:to-blue-500/20 opacity-30" />
289
-
<Share2Icon className="h-20 w-20 text-black/30 dark:text-white/30" />
290
-
</div>
291
-
)}
292
-
{activeFeature === "analytics" && (
293
-
<div className="p-4 w-full h-full flex items-center justify-center">
294
-
<div className="absolute inset-0 bg-gradient-to-br from-purple-200/70 to-blue-200/70 dark:from-purple-500/20 dark:to-blue-500/20 opacity-30" />
295
-
<BarChart3Icon className="h-20 w-20 text-black/30 dark:text-white/30" />
296
-
</div>
297
-
)}
298
-
{activeFeature === "weather" && (
299
-
<div className="p-4 w-full h-full flex items-center justify-center">
300
-
<div className="absolute inset-0 bg-gradient-to-br from-yellow-200/70 to-orange-200/70 dark:from-yellow-500/20 dark:to-orange-500/20 opacity-30" />
301
-
<SunIcon className="h-20 w-20 text-black/30 dark:text-white/30" />
302
-
</div>
303
-
)}
304
-
{activeFeature === "shortcuts" && (
305
-
<div className="p-4 w-full h-full flex items-center justify-center">
306
-
<div className="absolute inset-0 bg-gradient-to-br from-red-200/70 to-purple-200/70 dark:from-red-500/20 dark:to-purple-500/20 opacity-30" />
307
-
<KeyboardIcon className="h-20 w-20 text-black/30 dark:text-white/30" />
308
-
</div>
309
-
)}
310
-
{activeFeature === "import" && (
311
-
<div className="p-4 w-full h-full flex items-center justify-center">
312
-
<div className="absolute inset-0 bg-gradient-to-br from-pink-200/70 to-blue-200/70 dark:from-pink-500/20 dark:to-blue-500/20 opacity-30" />
313
-
<ImportIcon className="h-20 w-20 text-black/30 dark:text-white/30" />
314
-
</div>
315
-
)}
316
-
</div>
317
-
<div className="absolute -bottom-3 -right-3 h-24 w-24 bg-blue-300/30 dark:bg-blue-500/30 rounded-full blur-3xl" />
318
-
<div className="absolute -top-3 -left-3 h-16 w-16 bg-purple-300/30 dark:bg-purple-500/30 rounded-full blur-2xl" />
319
-
</div>
320
-
</div>
321
-
</Tabs>
322
-
</div>
323
-
</section>
324
-
325
-
<section className="py-16 px-4">
326
-
<div className="max-w-5xl mx-auto">
327
-
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
328
-
<Card className="bg-black/5 dark:bg-white/5 border-black/10 dark:border-white/10 backdrop-blur-md hover:bg-opacity-10 transition-all duration-300">
329
-
<CardContent className="p-6">
330
-
<CloudIcon className="h-8 w-8 text-blue-600 dark:text-blue-400 mb-4" />
331
-
<h3 className="text-xl font-semibold mb-2">Cloud Sync</h3>
332
-
<p className="text-gray-700 dark:text-white/70 text-sm">Access your events from anywhere with secure cloud storage.</p>
333
-
</CardContent>
334
-
</Card>
335
-
<Card className="bg-black/5 dark:bg-white/5 border-black/10 dark:border-white/10 backdrop-blur-md hover:bg-opacity-10 transition-all duration-300">
336
-
<CardContent className="p-6">
337
-
<Share2Icon className="h-8 w-8 text-green-600 dark:text-green-400 mb-4" />
338
-
<h3 className="text-xl font-semibold mb-2">Easy Sharing</h3>
339
-
<p className="text-gray-700 dark:text-white/70 text-sm">Collaborate and share your schedule with ease.</p>
340
-
</CardContent>
341
-
</Card>
342
-
<Card className="bg-black/5 dark:bg-white/5 border-black/10 dark:border-white/10 backdrop-blur-md hover:bg-opacity-10 transition-all duration-300">
343
-
<CardContent className="p-6">
344
-
<BarChart3Icon className="h-8 w-8 text-purple-600 dark:text-purple-400 mb-4" />
345
-
<h3 className="text-xl font-semibold mb-2">Analytics</h3>
346
-
<p className="text-gray-700 dark:text-white/70 text-sm">Gain insights with smart event tracking and summaries.</p>
347
-
</CardContent>
348
-
</Card>
349
-
<Card className="bg-black/5 dark:bg-white/5 border-black/10 dark:border-white/10 backdrop-blur-md hover:bg-opacity-10 transition-all duration-300">
350
-
<CardContent className="p-6">
351
-
<SunIcon className="h-8 w-8 text-yellow-600 dark:text-yellow-400 mb-4" />
352
-
<h3 className="text-xl font-semibold mb-2">Weather Integration</h3>
353
-
<p className="text-gray-700 dark:text-white/70 text-sm">See real-time weather in your calendar view.</p>
354
-
</CardContent>
355
-
</Card>
356
-
<Card className="bg-black/5 dark:bg-white/5 border-black/10 dark:border-white/10 backdrop-blur-md hover:bg-opacity-10 transition-all duration-300">
357
-
<CardContent className="p-6">
358
-
<KeyboardIcon className="h-8 w-8 text-red-600 dark:text-red-400 mb-4" />
359
-
<h3 className="text-xl font-semibold mb-2">Keyboard Shortcuts</h3>
360
-
<p className="text-gray-700 dark:text-white/70 text-sm">Navigate quickly using customizable shortcuts.</p>
361
-
</CardContent>
362
-
</Card>
363
-
<Card className="bg-black/5 dark:bg-white/5 border-black/10 dark:border-white/10 backdrop-blur-md hover:bg-opacity-10 transition-all duration-300">
364
-
<CardContent className="p-6">
365
-
<ImportIcon className="h-8 w-8 text-pink-600 dark:text-pink-400 mb-4" />
366
-
<h3 className="text-xl font-semibold mb-2">Import & Export</h3>
367
-
<p className="text-gray-700 dark:text-white/70 text-sm">Easily move data in and out of One Calendar.</p>
368
-
</CardContent>
369
-
</Card>
370
-
</div>
371
-
</div>
372
-
</section>
373
-
374
-
<section className="py-16 px-4 relative overflow-hidden">
375
-
<div className="max-w-3xl mx-auto">
376
-
<h2 className="text-3xl font-medium mb-10 text-center dark:text-white">FAQ</h2>
377
-
<Accordion type="single" collapsible className="w-full">
378
-
<AccordionItem value="item-1" className="border-b border-black/10 dark:border-white/10">
379
-
<AccordionTrigger className="py-4 text-left hover:no-underline">
380
-
<span className="text-lg font-medium">What's One Calendar?</span>
381
-
</AccordionTrigger>
382
-
<AccordionContent className="pb-4 text-gray-700 dark:text-white/70">
383
-
One Calendar is an AI-driven calendar app designed to simplify your schedule and manage your time with smart features and a user-friendly interface.
384
-
</AccordionContent>
385
-
</AccordionItem>
386
-
387
-
<AccordionItem value="item-2" className="border-b border-black/10 dark:border-white/10">
388
-
<AccordionTrigger className="py-4 text-left hover:no-underline">
389
-
<span className="text-lg font-medium">How do I import my existing calendar?</span>
390
-
</AccordionTrigger>
391
-
<AccordionContent className="pb-4 text-gray-700 dark:text-white/70">
392
-
One Calendar supports importing data from Apple Calendar, Outlook and Google Calendar. Just download your calendar ics file in their settings and go to One Calendar's analysis page to import it.
393
-
</AccordionContent>
394
-
</AccordionItem>
395
-
396
-
<AccordionItem value="item-3" className="border-b border-black/10 dark:border-white/10">
397
-
<AccordionTrigger className="py-4 text-left hover:no-underline">
398
-
<span className="text-lg font-medium">How do I share my schedule with others?</span>
399
-
</AccordionTrigger>
400
-
<AccordionContent className="pb-4 text-gray-700 dark:text-white/70">
401
-
With our sharing feature, you can easily share specific events with family, friends or colleagues. Let others import events, etc.
402
-
</AccordionContent>
403
-
</AccordionItem>
404
-
405
-
<AccordionItem value="item-4" className="border-b border-black/10 dark:border-white/10">
406
-
<AccordionTrigger className="py-4 text-left hover:no-underline">
407
-
<span className="text-lg font-medium">What analytical features does One Calendar provide?</span>
408
-
</AccordionTrigger>
409
-
<AccordionContent className="pb-4 text-gray-700 dark:text-white/70">
410
-
Our analytics can help you understand how you spend your time, provide insights into your most productive day and most productive hours, and identify patterns that can improve efficiency. These insights can help you plan and optimize your schedule more intelligently.
411
-
</AccordionContent>
412
-
</AccordionItem>
413
-
414
-
<AccordionItem value="item-5" className="border-b border-black/10 dark:border-white/10">
415
-
<AccordionTrigger className="py-4 text-left hover:no-underline">
416
-
<span className="text-lg font-medium">Is there a free plan available?</span>
417
-
</AccordionTrigger>
418
-
<AccordionContent className="pb-4 text-gray-700 dark:text-white/70">
419
-
Of course! One Calendar supports free use, our product is free and open-sourced. Suitable for any user, we also provide support, you can contact us to get it.
420
-
</AccordionContent>
421
-
</AccordionItem>
422
-
423
-
<AccordionItem value="item-6" className="border-b border-black/10 dark:border-white/10">
424
-
<AccordionTrigger className="py-4 text-left hover:no-underline">
425
-
<span className="text-lg font-medium">How to report a problem or request a feature?</span>
426
-
</AccordionTrigger>
427
-
<AccordionContent className="pb-4 text-gray-700 dark:text-white/70">
428
-
You can open a new issus on our Github page or on our feedback to feedback or request features.
429
-
</AccordionContent>
430
-
</AccordionItem>
431
-
</Accordion>
432
-
</div>
433
-
</section>
434
-
435
-
<section className="py-20 px-4 relative overflow-hidden">
436
-
<div className="absolute inset-0" />
437
-
<div className="max-w-5xl mx-auto relative z-10">
438
-
<div className="text-center">
439
-
<h2 className="text-4xl md:text-5xl font-medium mb-6 dark:text-white">Ready to transform your scheduling?</h2>
440
-
<p className="text-xl text-gray-700 dark:text-white/70 mb-8 max-w-2xl mx-auto">
441
-
Join thousands of users who've streamlined their calendar management with One Calendar.
442
-
</p>
443
-
<Button
444
-
onClick={handleGetStarted}
445
-
className="bg-black text-white hover:bg-black/90 dark:bg-white dark:text-black dark:hover:bg-white/90 rounded-xl"
446
-
>
447
-
Get Started
448
-
</Button>
449
-
</div>
450
-
</div>
451
-
</section>
452
-
453
-
<footer className="mt-auto py-8 border-t border-black/10 dark:border-white/10 text-gray-600 dark:text-white/70 text-sm px-6">
454
-
<div className="max-w-5xl mx-auto flex flex-col md:flex-row justify-between items-center gap-4">
455
-
<p>© 2025 One Calendar. All rights reserved.</p>
456
-
<div className="flex gap-4">
457
-
<a href="/about" className="hover:text-gray-900 dark:hover:text-white">About</a>
458
-
<a href="/privacy" className="hover:text-gray-900 dark:hover:text-white">Privacy</a>
459
-
<a href="/terms" className="hover:text-gray-900 dark:hover:text-white">Terms</a>
460
-
<a href="https://github.com/EvanTechDev/One-Calendar" target="_blank" rel="noopener" className="flex items-center gap-1 hover:text-gray-900 dark:hover:text-white">
461
-
<GithubIcon className="w-4 h-4" />
462
-
</a>
463
-
<a href="https://x.com/One__Cal" target="_blank" className="flex items-center gap-1 hover:text-gray-900 dark:hover:text-white">
464
-
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="16" height="16" viewBox="0 0 32 32">
465
-
<path fill="currentColor" d="M 4.0175781 4 L 13.091797 17.609375 L 4.3359375 28 L 6.9511719 28 L 14.246094 19.34375 L 20.017578 28 L 20.552734 28 L 28.015625 28 L 18.712891 14.042969 L 27.175781 4 L 24.560547 4 L 17.558594 12.310547 L 12.017578 4 L 4.0175781 4 z M 7.7558594 6 L 10.947266 6 L 24.279297 26 L 21.087891 26 L 7.7558594 6 z"></path>
466
-
</svg>
467
-
</a>
468
-
</div>
469
-
</div>
470
-
</footer>
471
-
</div>
472
-
)
473
-
}
-422
components/marketing/pricing-section.tsx
-422
components/marketing/pricing-section.tsx
···
1
-
"use client";
2
-
3
-
import { useState } from "react";
4
-
5
-
export default function PricingSection() {
6
-
const [billingPeriod, setBillingPeriod] = useState<"monthly" | "annually">(
7
-
"annually",
8
-
);
9
-
10
-
const pricing = {
11
-
starter: {
12
-
monthly: 0,
13
-
annually: 0,
14
-
},
15
-
professional: {
16
-
monthly: 0,
17
-
annually: 0,
18
-
},
19
-
enterprise: {
20
-
monthly: 200,
21
-
annually: 160,
22
-
},
23
-
};
24
-
25
-
return (
26
-
<div className="w-full flex flex-col justify-center items-center gap-2">
27
-
{}
28
-
<div className="self-stretch px-6 md:px-24 py-12 md:py-16 border-b border-[rgba(55,50,47,0.12)] flex justify-center items-center gap-6">
29
-
<div className="w-full max-w-[586px] px-6 py-5 shadow-[0px_2px_4px_rgba(50,45,43,0.06)] overflow-hidden rounded-lg flex flex-col justify-start items-center gap-4 shadow-none">
30
-
{}
31
-
<div className="px-[14px] py-[6px] bg-white shadow-[0px_0px_0px_4px_rgba(55,50,47,0.05)] overflow-hidden rounded-[90px] flex justify-start items-center gap-[8px] border border-[rgba(2,6,23,0.08)] shadow-xs">
32
-
<div className="w-[14px] h-[14px] relative overflow-hidden flex items-center justify-center">
33
-
<svg
34
-
width="12"
35
-
height="12"
36
-
viewBox="0 0 12 12"
37
-
fill="none"
38
-
xmlns="http://www.w3.org/2000/svg"
39
-
>
40
-
<path
41
-
d="M6 1V11M8.5 3H4.75C4.28587 3 3.84075 3.18437 3.51256 3.51256C3.18437 3.84075 3 4.28587 3 4.75C3 5.21413 3.18437 5.65925 3.51256 5.98744C3.84075 6.31563 4.28587 6.5 4.75 6.5H7.25C7.71413 6.5 8.15925 6.68437 8.48744 7.01256C8.81563 7.34075 9 7.78587 9 8.25C9 8.71413 8.81563 9.15925 8.48744 9.48744C8.15925 9.81563 7.71413 10 7.25 10H3.5"
42
-
stroke="#37322F"
43
-
strokeWidth="1"
44
-
strokeLinecap="round"
45
-
strokeLinejoin="round"
46
-
/>
47
-
</svg>
48
-
</div>
49
-
<div className="text-center flex justify-center flex-col text-[#37322F] text-xs font-medium leading-3 font-sans">
50
-
Plans & Pricing
51
-
</div>
52
-
</div>
53
-
54
-
{}
55
-
<div className="self-stretch text-center flex justify-center flex-col text-[#49423D] text-3xl md:text-5xl font-semibold leading-tight md:leading-[60px] font-sans tracking-tight">
56
-
Choose the perfect plan for your business
57
-
</div>
58
-
59
-
{}
60
-
<div className="self-stretch text-center text-[#605A57] text-base font-normal leading-7 font-sans">
61
-
Scale your operations with flexible pricing that grows with your
62
-
team.
63
-
<br />
64
-
Start free, upgrade when you're ready.
65
-
</div>
66
-
</div>
67
-
</div>
68
-
69
-
{/* Billing Toggle Section */}
70
-
<div className="self-stretch px-6 md:px-16 py-9 relative flex justify-center items-center gap-4">
71
-
{/* Horizontal line */}
72
-
<div className="w-full max-w-[1060px] h-0 absolute left-1/2 transform -translate-x-1/2 top-[63px] border-t border-[rgba(55,50,47,0.12)] z-0"></div>
73
-
74
-
{/* Toggle Container */}
75
-
<div className="p-3 relative bg-[rgba(55,50,47,0.03)] border border-[rgba(55,50,47,0.02)] backdrop-blur-[44px] backdrop-saturate-150 backdrop-brightness-110 flex justify-center items-center rounded-lg z-20 before:absolute before:inset-0 before:bg-white before:opacity-60 before:rounded-lg before:-z-10">
76
-
<div className="p-[2px] bg-[rgba(55,50,47,0.10)] shadow-[0px_1px_0px_white] rounded-[99px] border-[0.5px] border-[rgba(55,50,47,0.08)] flex justify-center items-center gap-[2px] relative">
77
-
<div
78
-
className={`absolute top-[2px] w-[calc(50%-1px)] h-[calc(100%-4px)] bg-white shadow-[0px_2px_4px_rgba(0,0,0,0.08)] rounded-[99px] transition-all duration-300 ease-in-out ${
79
-
billingPeriod === "annually" ? "left-[2px]" : "right-[2px]"
80
-
}`}
81
-
/>
82
-
83
-
<button
84
-
onClick={() => setBillingPeriod("annually")}
85
-
className="px-4 py-1 rounded-[99px] flex justify-center items-center gap-2 transition-colors duration-300 relative z-10 flex-1"
86
-
>
87
-
<div
88
-
className={`text-[13px] font-medium leading-5 font-sans transition-colors duration-300 ${
89
-
billingPeriod === "annually"
90
-
? "text-[#37322F]"
91
-
: "text-[#6B7280]"
92
-
}`}
93
-
>
94
-
Annually
95
-
</div>
96
-
</button>
97
-
98
-
<button
99
-
onClick={() => setBillingPeriod("monthly")}
100
-
className="px-4 py-1 rounded-[99px] flex justify-center items-center gap-2 transition-colors duration-300 relative z-10 flex-1"
101
-
>
102
-
<div
103
-
className={`text-[13px] font-medium leading-5 font-sans transition-colors duration-300 ${
104
-
billingPeriod === "monthly"
105
-
? "text-[#37322F]"
106
-
: "text-[#6B7280]"
107
-
}`}
108
-
>
109
-
Monthly
110
-
</div>
111
-
</button>
112
-
</div>
113
-
114
-
{/* Decorative dots */}
115
-
<div className="w-[3px] h-[3px] absolute left-[5px] top-[5.25px] bg-[rgba(55,50,47,0.10)] shadow-[0px_0px_0.5px_rgba(0,0,0,0.12)] rounded-[99px]"></div>
116
-
<div className="w-[3px] h-[3px] absolute right-[5px] top-[5.25px] bg-[rgba(55,50,47,0.10)] shadow-[0px_0px_0.5px_rgba(0,0,0,0.12)] rounded-[99px]"></div>
117
-
<div className="w-[3px] h-[3px] absolute left-[5px] bottom-[5.25px] bg-[rgba(55,50,47,0.10)] shadow-[0px_0px_0.5px_rgba(0,0,0,0.12)] rounded-[99px]"></div>
118
-
<div className="w-[3px] h-[3px] absolute right-[5px] bottom-[5.25px] bg-[rgba(55,50,47,0.10)] shadow-[0px_0px_0.5px_rgba(0,0,0,0.12)] rounded-[99px]"></div>
119
-
</div>
120
-
</div>
121
-
122
-
{/* Pricing Cards Section */}
123
-
<div className="self-stretch border-b border-t border-[rgba(55,50,47,0.12)] flex justify-center items-center">
124
-
<div className="flex justify-center items-start w-full">
125
-
{/* Left Decorative Pattern */}
126
-
<div className="w-12 self-stretch relative overflow-hidden hidden md:block">
127
-
<div className="w-[162px] left-[-58px] top-[-120px] absolute flex flex-col justify-start items-start">
128
-
{Array.from({ length: 200 }).map((_, i) => (
129
-
<div
130
-
key={i}
131
-
className="self-stretch h-4 rotate-[-45deg] origin-top-left outline outline-[0.5px] outline-[rgba(3,7,18,0.08)] outline-offset-[-0.25px]"
132
-
></div>
133
-
))}
134
-
</div>
135
-
</div>
136
-
137
-
{/* Pricing Cards Container */}
138
-
<div className="flex-1 flex flex-col md:flex-row justify-center items-center gap-6 py-12 md:py-0">
139
-
{/* Starter Plan */}
140
-
{/*<div className="flex-1 max-w-full md:max-w-none self-stretch px-6 py-5 border border-[rgba(50,45,43,0.12)] border-[#E0DEDB] overflow-hidden flex flex-col justify-start items-start gap-12 bg-[rgba(255,255,255,0)]">
141
-
<div className="self-stretch flex flex-col justify-start items-center gap-9">
142
-
<div className="self-stretch flex flex-col justify-start items-start gap-2">
143
-
<div className="text-[rgba(55,50,47,0.90)] text-lg font-medium leading-7 font-sans">Starter</div>
144
-
<div className="w-full max-w-[242px] text-[rgba(41,37,35,0.70)] text-sm font-normal leading-5 font-sans">
145
-
Perfect for individuals and small teams getting started.
146
-
</div>
147
-
</div>
148
-
149
-
<div className="self-stretch flex flex-col justify-start items-start gap-2">
150
-
<div className="flex flex-col justify-start items-start gap-1">
151
-
<div className="relative h-[60px] flex items-center text-[#37322F] text-5xl font-medium leading-[60px] font-serif">
152
-
<span className="invisible">${pricing.starter[billingPeriod]}</span>
153
-
<span
154
-
className="absolute inset-0 flex items-center transition-all duration-500"
155
-
style={{
156
-
opacity: billingPeriod === "annually" ? 1 : 0,
157
-
transform: `scale(${billingPeriod === "annually" ? 1 : 0.8})`,
158
-
filter: `blur(${billingPeriod === "annually" ? 0 : 4}px)`,
159
-
}}
160
-
aria-hidden={billingPeriod !== "annually"}
161
-
>
162
-
${pricing.starter.annually}
163
-
</span>
164
-
<span
165
-
className="absolute inset-0 flex items-center transition-all duration-500"
166
-
style={{
167
-
opacity: billingPeriod === "monthly" ? 1 : 0,
168
-
transform: `scale(${billingPeriod === "monthly" ? 1 : 0.8})`,
169
-
filter: `blur(${billingPeriod === "monthly" ? 0 : 4}px)`,
170
-
}}
171
-
aria-hidden={billingPeriod !== "monthly"}
172
-
>
173
-
${pricing.starter.monthly}
174
-
</span>
175
-
</div>
176
-
<div className="text-[#847971] text-sm font-medium font-sans">
177
-
per {billingPeriod === "monthly" ? "month" : "year"}, per user.
178
-
</div>
179
-
</div>
180
-
</div>
181
-
182
-
<div className="self-stretch px-4 py-[10px] relative bg-[#37322F] shadow-[0px_2px_4px_rgba(55,50,47,0.12)] overflow-hidden rounded-[99px] flex justify-center items-center">
183
-
<div className="w-full h-[41px] absolute left-0 top-[-0.5px] bg-gradient-to-b from-[rgba(255,255,255,0.20)] to-[rgba(0,0,0,0.10)] mix-blend-multiply"></div>
184
-
<div className="max-w-[108px] flex justify-center flex-col text-[#FBFAF9] text-[13px] font-medium leading-5 font-sans">
185
-
Start for free
186
-
</div>
187
-
</div>
188
-
</div>
189
-
190
-
<div className="self-stretch flex flex-col justify-start items-start gap-2">
191
-
{[
192
-
"Unlimited cloud storage",
193
-
"Unlimited shares",
194
-
"Basic documentation tools",
195
-
"Community support",
196
-
"Keyboard shortcut",
197
-
"Colorful theme",
198
-
].map((feature, index) => (
199
-
<div key={index} className="self-stretch flex justify-start items-center gap-[13px]">
200
-
<div className="w-4 h-4 relative flex items-center justify-center">
201
-
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
202
-
<path
203
-
d="M10 3L4.5 8.5L2 6"
204
-
stroke="#9CA3AF"
205
-
strokeWidth="1.5"
206
-
strokeLinecap="round"
207
-
strokeLinejoin="round"
208
-
/>
209
-
</svg>
210
-
</div>
211
-
<div className="flex-1 text-[rgba(55,50,47,0.80)] text-[12.5px] font-normal leading-5 font-sans">
212
-
{feature}
213
-
</div>
214
-
</div>
215
-
))}
216
-
</div>
217
-
</div>*/}
218
-
219
-
{/* Professional Plan (Featured) */}
220
-
<div className="flex-1 max-w-full md:max-w-none self-stretch px-6 py-5 bg-[#37322F] border border-[rgba(50,45,43,0.12)] border-[rgba(55,50,47,0.12)] overflow-hidden flex flex-col justify-start items-start gap-12">
221
-
{/* Plan Header */}
222
-
<div className="self-stretch flex flex-col justify-start items-center gap-9">
223
-
<div className="self-stretch flex flex-col justify-start items-start gap-2">
224
-
<div className="text-[#FBFAF9] text-lg font-medium leading-7 font-sans">
225
-
Standard
226
-
</div>
227
-
<div className="w-full max-w-[242px] text-[#B2AEA9] text-sm font-normal leading-5 font-sans">
228
-
Advanced features for growing teams and businesses.
229
-
</div>
230
-
</div>
231
-
232
-
<div className="self-stretch flex flex-col justify-start items-start gap-2">
233
-
<div className="flex flex-col justify-start items-start gap-1">
234
-
<div className="relative h-[60px] flex items-center text-[#F0EFEE] text-5xl font-medium leading-[60px] font-serif">
235
-
<span className="invisible">
236
-
${pricing.professional[billingPeriod]}
237
-
</span>
238
-
<span
239
-
className="absolute inset-0 flex items-center transition-all duration-500"
240
-
style={{
241
-
opacity: billingPeriod === "annually" ? 1 : 0,
242
-
transform: `scale(${billingPeriod === "annually" ? 1 : 0.8})`,
243
-
filter: `blur(${billingPeriod === "annually" ? 0 : 4}px)`,
244
-
}}
245
-
aria-hidden={billingPeriod !== "annually"}
246
-
>
247
-
${pricing.professional.annually}
248
-
</span>
249
-
<span
250
-
className="absolute inset-0 flex items-center transition-all duration-500"
251
-
style={{
252
-
opacity: billingPeriod === "monthly" ? 1 : 0,
253
-
transform: `scale(${billingPeriod === "monthly" ? 1 : 0.8})`,
254
-
filter: `blur(${billingPeriod === "monthly" ? 0 : 4}px)`,
255
-
}}
256
-
aria-hidden={billingPeriod !== "monthly"}
257
-
>
258
-
${pricing.professional.monthly}
259
-
</span>
260
-
</div>
261
-
<div className="text-[#D2C6BF] text-sm font-medium font-sans">
262
-
per {billingPeriod === "monthly" ? "month" : "year"}, per
263
-
user.
264
-
</div>
265
-
</div>
266
-
</div>
267
-
268
-
{/* CTA Button */}
269
-
<div className="self-stretch px-4 py-[10px] relative bg-[#FBFAF9] shadow-[0px_2px_4px_rgba(55,50,47,0.12)] overflow-hidden rounded-[99px] flex justify-center items-center">
270
-
<div className="w-full h-[41px] absolute left-0 top-[-0.5px] bg-gradient-to-b from-[rgba(255,255,255,0)] to-[rgba(0,0,0,0.10)] mix-blend-multiply"></div>
271
-
<div className="max-w-[108px] flex justify-center flex-col text-[#37322F] text-[13px] font-medium leading-5 font-sans">
272
-
Get started
273
-
</div>
274
-
</div>
275
-
</div>
276
-
277
-
<div className="self-stretch flex flex-col justify-start items-start gap-2">
278
-
{[
279
-
"Everything in Basic",
280
-
"Advanced tools",
281
-
"Advanced analytics",
282
-
"Create schedule with AI",
283
-
"API access",
284
-
"Password-Protect shares",
285
-
"Burn-after-read shares",
286
-
].map((feature, index) => (
287
-
<div
288
-
key={index}
289
-
className="self-stretch flex justify-start items-center gap-[13px]"
290
-
>
291
-
<div className="w-4 h-4 relative flex items-center justify-center">
292
-
<svg
293
-
width="12"
294
-
height="12"
295
-
viewBox="0 0 12 12"
296
-
fill="none"
297
-
xmlns="http://www.w3.org/2000/svg"
298
-
>
299
-
<path
300
-
d="M10 3L4.5 8.5L2 6"
301
-
stroke="#FF8000"
302
-
strokeWidth="1.5"
303
-
strokeLinecap="round"
304
-
strokeLinejoin="round"
305
-
/>
306
-
</svg>
307
-
</div>
308
-
<div className="flex-1 text-[#F0EFEE] text-[12.5px] font-normal leading-5 font-sans">
309
-
{feature}
310
-
</div>
311
-
</div>
312
-
))}
313
-
</div>
314
-
</div>
315
-
316
-
{/* Enterprise Plan */}
317
-
<div className="flex-1 max-w-full md:max-w-none self-stretch px-6 py-5 bg-white border border-[#E0DEDB] overflow-hidden flex flex-col justify-start items-start gap-12">
318
-
{/* Plan Header */}
319
-
<div className="self-stretch flex flex-col justify-start items-center gap-9">
320
-
<div className="self-stretch flex flex-col justify-start items-start gap-2">
321
-
<div className="text-[rgba(55,50,47,0.90)] text-lg font-medium leading-7 font-sans">
322
-
Enterprise
323
-
</div>
324
-
<div className="w-full max-w-[242px] text-[rgba(41,37,35,0.70)] text-sm font-normal leading-5 font-sans">
325
-
Complete solution for large organizations and enterprises.
326
-
</div>
327
-
</div>
328
-
329
-
<div className="self-stretch flex flex-col justify-start items-start gap-2">
330
-
<div className="flex flex-col justify-start items-start gap-1">
331
-
<div className="relative h-[60px] flex items-center text-[#37322F] text-5xl font-medium leading-[60px] font-serif">
332
-
<span className="invisible">Contact sales</span>
333
-
<span
334
-
className="absolute inset-0 flex items-center transition-all duration-500"
335
-
style={{
336
-
opacity: billingPeriod === "annually" ? 1 : 0,
337
-
transform: `scale(${billingPeriod === "annually" ? 1 : 0.8})`,
338
-
filter: `blur(${billingPeriod === "annually" ? 0 : 4}px)`,
339
-
}}
340
-
aria-hidden={billingPeriod !== "annually"}
341
-
>
342
-
Contact sales
343
-
</span>
344
-
<span
345
-
className="absolute inset-0 flex items-center transition-all duration-500"
346
-
style={{
347
-
opacity: billingPeriod === "monthly" ? 1 : 0,
348
-
transform: `scale(${billingPeriod === "monthly" ? 1 : 0.8})`,
349
-
filter: `blur(${billingPeriod === "monthly" ? 0 : 4}px)`,
350
-
}}
351
-
aria-hidden={billingPeriod !== "monthly"}
352
-
>
353
-
Contact sales
354
-
</span>
355
-
</div>
356
-
<div className="text-[#847971] text-sm font-medium font-sans"></div>
357
-
</div>
358
-
</div>
359
-
360
-
<div className="self-stretch px-4 py-[10px] relative bg-[#37322F] shadow-[0px_2px_4px_rgba(55,50,47,0.12)] overflow-hidden rounded-[99px] flex justify-center items-center">
361
-
<div className="w-full h-[41px] absolute left-0 top-[-0.5px] bg-gradient-to-b from-[rgba(255,255,255,0.20)] to-[rgba(0,0,0,0.10)] mix-blend-multiply"></div>
362
-
<div className="max-w-[108px] flex justify-center flex-col text-[#FBFAF9] text-[13px] font-medium leading-5 font-sans">
363
-
Contact sales
364
-
</div>
365
-
</div>
366
-
</div>
367
-
368
-
<div className="self-stretch flex flex-col justify-start items-start gap-2">
369
-
{[
370
-
"Everything in Professional",
371
-
"24/7 support",
372
-
"Self-hosting",
373
-
"Self-managing data",
374
-
"Advanced security features",
375
-
"Custom domain",
376
-
].map((feature, index) => (
377
-
<div
378
-
key={index}
379
-
className="self-stretch flex justify-start items-center gap-[13px]"
380
-
>
381
-
<div className="w-4 h-4 relative flex items-center justify-center">
382
-
<svg
383
-
width="12"
384
-
height="12"
385
-
viewBox="0 0 12 12"
386
-
fill="none"
387
-
xmlns="http://www.w3.org/2000/svg"
388
-
>
389
-
<path
390
-
d="M10 3L4.5 8.5L2 6"
391
-
stroke="#9CA3AF"
392
-
strokeWidth="1.5"
393
-
strokeLinecap="round"
394
-
strokeLinejoin="round"
395
-
/>
396
-
</svg>
397
-
</div>
398
-
<div className="flex-1 text-[rgba(55,50,47,0.80)] text-[12.5px] font-normal leading-5 font-sans">
399
-
{feature}
400
-
</div>
401
-
</div>
402
-
))}
403
-
</div>
404
-
</div>
405
-
</div>
406
-
407
-
{/* Right Decorative Pattern */}
408
-
<div className="w-12 self-stretch relative overflow-hidden hidden md:block">
409
-
<div className="w-[162px] left-[-58px] top-[-120px] absolute flex flex-col justify-start items-start">
410
-
{Array.from({ length: 200 }).map((_, i) => (
411
-
<div
412
-
key={i}
413
-
className="self-stretch h-4 rotate-[-45deg] origin-top-left outline outline-[0.5px] outline-[rgba(3,7,18,0.08)] outline-offset-[-0.25px]"
414
-
></div>
415
-
))}
416
-
</div>
417
-
</div>
418
-
</div>
419
-
</div>
420
-
</div>
421
-
);
422
-
}
-552
components/marketing/smart-simple-brilliant.tsx
-552
components/marketing/smart-simple-brilliant.tsx
···
1
-
import type React from "react";
2
-
3
-
interface SmartSimpleBrilliantProps {
4
-
width?: number | string;
5
-
6
-
height?: number | string;
7
-
8
-
className?: string;
9
-
10
-
theme?: "light" | "dark";
11
-
}
12
-
13
-
const SmartSimpleBrilliant: React.FC<SmartSimpleBrilliantProps> = ({
14
-
width = 482,
15
-
height = 300,
16
-
className = "",
17
-
theme = "dark",
18
-
}) => {
19
-
const themeVars =
20
-
theme === "light"
21
-
? {
22
-
"--ssb-surface": "#ffffff",
23
-
"--ssb-text": "#1b1919",
24
-
"--ssb-border": "rgba(0,0,0,0.08)",
25
-
"--ssb-inner-border": "rgba(0,0,0,0.12)",
26
-
"--ssb-shadow": "rgba(0,0,0,0.12)",
27
-
}
28
-
: ({
29
-
"--ssb-surface": "#333937",
30
-
"--ssb-text": "#f8f8f8",
31
-
"--ssb-border": "rgba(255,255,255,0.16)",
32
-
"--ssb-inner-border": "rgba(255,255,255,0.12)",
33
-
"--ssb-shadow": "rgba(0,0,0,0.28)",
34
-
} as React.CSSProperties);
35
-
36
-
const img =
37
-
"http://localhost:3845/assets/1b1e60b441119fb176db990a3c7fe2670a764855.svg";
38
-
const img1 =
39
-
"http://localhost:3845/assets/a502f04ccfc3811f304b58a3a982a5b6fa070e91.svg";
40
-
const img2 =
41
-
"http://localhost:3845/assets/9c07375bf3b9f1f1d8a0a24447829eb6f54fa928.svg";
42
-
const img3 =
43
-
"http://localhost:3845/assets/19500d66798ef5ea9dc9d5f971cd0e9c29674bd3.svg";
44
-
45
-
return (
46
-
<div
47
-
className={className}
48
-
style={
49
-
{
50
-
width,
51
-
height,
52
-
position: "relative",
53
-
background: "transparent",
54
-
display: "flex",
55
-
alignItems: "center",
56
-
justifyContent: "center",
57
-
...themeVars,
58
-
} as React.CSSProperties
59
-
}
60
-
role="img"
61
-
aria-label="Two calendar cards with colored event rows"
62
-
>
63
-
<div
64
-
style={{
65
-
position: "relative",
66
-
width: "295.297px",
67
-
height: "212.272px",
68
-
transform: "scale(1.2)",
69
-
}}
70
-
>
71
-
{}
72
-
<div
73
-
style={{
74
-
position: "absolute",
75
-
left: "123.248px",
76
-
top: "0px",
77
-
width: 0,
78
-
height: 0,
79
-
}}
80
-
>
81
-
<div style={{ transform: "rotate(5deg)", transformOrigin: "center" }}>
82
-
<div
83
-
style={{
84
-
width: "155.25px",
85
-
background: "#ffffff",
86
-
borderRadius: "9px",
87
-
padding: "6px",
88
-
boxShadow:
89
-
"0px 0px 0px 1px rgba(0,0,0,0.08), 0px 2px 4px rgba(0,0,0,0.07)",
90
-
}}
91
-
>
92
-
{}
93
-
<div
94
-
style={{
95
-
width: "100%",
96
-
height: "51px",
97
-
borderRadius: "4px",
98
-
overflow: "hidden",
99
-
background: "rgba(245,158,11,0.1)",
100
-
display: "flex",
101
-
}}
102
-
>
103
-
<div style={{ width: "2.25px", background: "#F59E0B" }} />
104
-
<div style={{ padding: "4.5px", width: "100%" }}>
105
-
<div
106
-
style={{
107
-
display: "flex",
108
-
gap: "3px",
109
-
alignItems: "center",
110
-
}}
111
-
>
112
-
<span
113
-
style={{
114
-
fontFamily: "Inter, sans-serif",
115
-
fontWeight: 500,
116
-
fontSize: "9px",
117
-
color: "#92400E",
118
-
}}
119
-
>
120
-
2:00
121
-
</span>
122
-
<span
123
-
style={{
124
-
fontFamily: "Inter, sans-serif",
125
-
fontWeight: 500,
126
-
fontSize: "9px",
127
-
color: "#92400E",
128
-
}}
129
-
>
130
-
PM
131
-
</span>
132
-
<div
133
-
style={{
134
-
background: "#92400E",
135
-
padding: "1.5px",
136
-
borderRadius: "100px",
137
-
}}
138
-
>
139
-
<div
140
-
style={{
141
-
width: "8px",
142
-
height: "8px",
143
-
overflow: "hidden",
144
-
position: "relative",
145
-
}}
146
-
>
147
-
<img
148
-
src={img || "/placeholder.svg"}
149
-
alt="video"
150
-
style={{
151
-
position: "absolute",
152
-
inset: "20% 10% 20% 10%",
153
-
}}
154
-
/>
155
-
</div>
156
-
</div>
157
-
</div>
158
-
<div
159
-
style={{
160
-
fontFamily: "Inter, sans-serif",
161
-
fontWeight: 600,
162
-
fontSize: "9px",
163
-
color: "#92400E",
164
-
}}
165
-
>
166
-
1:1 with Heather
167
-
</div>
168
-
</div>
169
-
</div>
170
-
171
-
{}
172
-
<div
173
-
style={{
174
-
width: "100%",
175
-
height: "79.5px",
176
-
borderRadius: "4px",
177
-
overflow: "hidden",
178
-
background: "rgba(14,165,233,0.1)",
179
-
marginTop: "3px",
180
-
display: "flex",
181
-
}}
182
-
>
183
-
<div style={{ width: "2.25px", background: "#0EA5E9" }} />
184
-
<div style={{ padding: "4.5px", width: "100%" }}>
185
-
<div
186
-
style={{
187
-
display: "flex",
188
-
gap: "3px",
189
-
alignItems: "center",
190
-
}}
191
-
>
192
-
<span
193
-
style={{
194
-
fontFamily: "Inter, sans-serif",
195
-
fontWeight: 500,
196
-
fontSize: "9px",
197
-
color: "#0C4A6E",
198
-
}}
199
-
>
200
-
2:00
201
-
</span>
202
-
<span
203
-
style={{
204
-
fontFamily: "Inter, sans-serif",
205
-
fontWeight: 500,
206
-
fontSize: "9px",
207
-
color: "#0C4A6E",
208
-
}}
209
-
>
210
-
PM
211
-
</span>
212
-
<div
213
-
style={{
214
-
background: "#0C4A6E",
215
-
padding: "1.5px",
216
-
borderRadius: "100px",
217
-
}}
218
-
>
219
-
<div
220
-
style={{
221
-
width: "8px",
222
-
height: "8px",
223
-
overflow: "hidden",
224
-
position: "relative",
225
-
}}
226
-
>
227
-
<img
228
-
src={img1 || "/placeholder.svg"}
229
-
alt="video"
230
-
style={{
231
-
position: "absolute",
232
-
inset: "20% 10% 20% 10%",
233
-
}}
234
-
/>
235
-
</div>
236
-
</div>
237
-
</div>
238
-
<div
239
-
style={{
240
-
fontFamily: "Inter, sans-serif",
241
-
fontWeight: 600,
242
-
fontSize: "9px",
243
-
color: "#0C4A6E",
244
-
}}
245
-
>
246
-
Concept Design Review II
247
-
</div>
248
-
</div>
249
-
</div>
250
-
251
-
{}
252
-
<div
253
-
style={{
254
-
width: "100%",
255
-
height: "51px",
256
-
borderRadius: "4px",
257
-
overflow: "hidden",
258
-
background: "rgba(16,185,129,0.1)",
259
-
marginTop: "3px",
260
-
display: "flex",
261
-
}}
262
-
>
263
-
<div style={{ width: "2.25px", background: "#10B981" }} />
264
-
<div style={{ padding: "4.5px", width: "100%" }}>
265
-
<div
266
-
style={{
267
-
display: "flex",
268
-
gap: "3px",
269
-
alignItems: "center",
270
-
}}
271
-
>
272
-
<span
273
-
style={{
274
-
fontFamily: "Inter, sans-serif",
275
-
fontWeight: 500,
276
-
fontSize: "9px",
277
-
color: "#064E3B",
278
-
}}
279
-
>
280
-
9:00
281
-
</span>
282
-
<span
283
-
style={{
284
-
fontFamily: "Inter, sans-serif",
285
-
fontWeight: 500,
286
-
fontSize: "9px",
287
-
color: "#064E3B",
288
-
}}
289
-
>
290
-
AM
291
-
</span>
292
-
</div>
293
-
<div
294
-
style={{
295
-
fontFamily: "Inter, sans-serif",
296
-
fontWeight: 600,
297
-
fontSize: "9px",
298
-
color: "#064E3B",
299
-
}}
300
-
>
301
-
Webinar: Figma ...
302
-
</div>
303
-
</div>
304
-
</div>
305
-
</div>
306
-
</div>
307
-
</div>
308
-
309
-
{}
310
-
<div
311
-
style={{
312
-
position: "absolute",
313
-
left: "0px",
314
-
top: "6.075px",
315
-
width: "155.25px",
316
-
}}
317
-
>
318
-
<div
319
-
style={{ transform: "rotate(-5deg)", transformOrigin: "center" }}
320
-
>
321
-
<div
322
-
style={{
323
-
width: "155.25px",
324
-
background: "#ffffff",
325
-
borderRadius: "9px",
326
-
padding: "6px",
327
-
boxShadow:
328
-
"-8px 6px 11.3px rgba(0,0,0,0.12), 0px 0px 0px 1px rgba(0,0,0,0.08), 0px 2px 4px rgba(0,0,0,0.06)",
329
-
}}
330
-
>
331
-
{}
332
-
<div
333
-
style={{
334
-
width: "100%",
335
-
height: "51px",
336
-
borderRadius: "4px",
337
-
overflow: "hidden",
338
-
background: "rgba(139,92,246,0.1)",
339
-
display: "flex",
340
-
}}
341
-
>
342
-
<div style={{ width: "2.25px", background: "#8B5CF6" }} />
343
-
<div style={{ padding: "4.5px", width: "100%" }}>
344
-
<div
345
-
style={{
346
-
display: "flex",
347
-
gap: "3px",
348
-
alignItems: "center",
349
-
}}
350
-
>
351
-
<span
352
-
style={{
353
-
fontFamily: "Inter, sans-serif",
354
-
fontWeight: 500,
355
-
fontSize: "9px",
356
-
color: "#581C87",
357
-
}}
358
-
>
359
-
11:00
360
-
</span>
361
-
<span
362
-
style={{
363
-
fontFamily: "Inter, sans-serif",
364
-
fontWeight: 500,
365
-
fontSize: "9px",
366
-
color: "#581C87",
367
-
}}
368
-
>
369
-
AM
370
-
</span>
371
-
<div
372
-
style={{
373
-
background: "#581C87",
374
-
padding: "1.5px",
375
-
borderRadius: "100px",
376
-
}}
377
-
>
378
-
<div
379
-
style={{
380
-
width: "8px",
381
-
height: "8px",
382
-
overflow: "hidden",
383
-
position: "relative",
384
-
}}
385
-
>
386
-
<img
387
-
src={img2 || "/placeholder.svg"}
388
-
alt="video"
389
-
style={{
390
-
position: "absolute",
391
-
inset: "20% 10% 20% 10%",
392
-
}}
393
-
/>
394
-
</div>
395
-
</div>
396
-
</div>
397
-
<div
398
-
style={{
399
-
fontFamily: "Inter, sans-serif",
400
-
fontWeight: 600,
401
-
fontSize: "9px",
402
-
color: "#581C87",
403
-
}}
404
-
>
405
-
Onboarding Presentation
406
-
</div>
407
-
</div>
408
-
</div>
409
-
410
-
{}
411
-
<div
412
-
style={{
413
-
width: "100%",
414
-
height: "51px",
415
-
borderRadius: "4px",
416
-
overflow: "hidden",
417
-
background: "#FFE4E6",
418
-
display: "flex",
419
-
marginTop: "3px",
420
-
}}
421
-
>
422
-
<div style={{ width: "2.25px", background: "#F43F5E" }} />
423
-
<div style={{ padding: "4.5px", width: "100%" }}>
424
-
<div
425
-
style={{
426
-
display: "flex",
427
-
gap: "3px",
428
-
alignItems: "center",
429
-
}}
430
-
>
431
-
<span
432
-
style={{
433
-
fontFamily: "Inter, sans-serif",
434
-
fontWeight: 500,
435
-
fontSize: "9px",
436
-
color: "#BE123C",
437
-
}}
438
-
>
439
-
4:00
440
-
</span>
441
-
<span
442
-
style={{
443
-
fontFamily: "Inter, sans-serif",
444
-
fontWeight: 500,
445
-
fontSize: "9px",
446
-
color: "#BE123C",
447
-
}}
448
-
>
449
-
PM
450
-
</span>
451
-
<div
452
-
style={{
453
-
background: "#BE123C",
454
-
padding: "1.5px",
455
-
borderRadius: "100px",
456
-
}}
457
-
>
458
-
<div
459
-
style={{
460
-
width: "8px",
461
-
height: "8px",
462
-
overflow: "hidden",
463
-
position: "relative",
464
-
}}
465
-
>
466
-
<img
467
-
src={img3 || "/placeholder.svg"}
468
-
alt="video"
469
-
style={{
470
-
position: "absolute",
471
-
inset: "20% 10% 20% 10%",
472
-
}}
473
-
/>
474
-
</div>
475
-
</div>
476
-
</div>
477
-
<div
478
-
style={{
479
-
fontFamily: "Inter, sans-serif",
480
-
fontWeight: 600,
481
-
fontSize: "9px",
482
-
color: "#BE123C",
483
-
}}
484
-
>
485
-
🍷 Happy Hour
486
-
</div>
487
-
</div>
488
-
</div>
489
-
490
-
{}
491
-
<div
492
-
style={{
493
-
width: "100%",
494
-
height: "79.5px",
495
-
borderRadius: "4px",
496
-
overflow: "hidden",
497
-
background: "rgba(139,92,246,0.1)",
498
-
display: "flex",
499
-
marginTop: "3px",
500
-
}}
501
-
>
502
-
<div style={{ width: "2.25px", background: "#8B5CF6" }} />
503
-
<div style={{ padding: "4.5px", width: "100%" }}>
504
-
<div
505
-
style={{
506
-
display: "flex",
507
-
gap: "3px",
508
-
alignItems: "center",
509
-
}}
510
-
>
511
-
<span
512
-
style={{
513
-
fontFamily: "Inter, sans-serif",
514
-
fontWeight: 500,
515
-
fontSize: "9px",
516
-
color: "#581C87",
517
-
}}
518
-
>
519
-
11:00
520
-
</span>
521
-
<span
522
-
style={{
523
-
fontFamily: "Inter, sans-serif",
524
-
fontWeight: 500,
525
-
fontSize: "9px",
526
-
color: "#581C87",
527
-
}}
528
-
>
529
-
AM
530
-
</span>
531
-
</div>
532
-
<div
533
-
style={{
534
-
fontFamily: "Inter, sans-serif",
535
-
fontWeight: 600,
536
-
fontSize: "9px",
537
-
color: "#581C87",
538
-
}}
539
-
>
540
-
🍔 New Employee Welcome Lunch!
541
-
</div>
542
-
</div>
543
-
</div>
544
-
</div>
545
-
</div>
546
-
</div>
547
-
</div>
548
-
</div>
549
-
);
550
-
};
551
-
552
-
export default SmartSimpleBrilliant;
-324
components/marketing/your-work-in-sync.tsx
-324
components/marketing/your-work-in-sync.tsx
···
1
-
import type React from "react";
2
-
3
-
interface YourWorkInSyncProps {
4
-
width?: number | string;
5
-
6
-
height?: number | string;
7
-
8
-
className?: string;
9
-
10
-
theme?: "light" | "dark";
11
-
}
12
-
13
-
const YourWorkInSync: React.FC<YourWorkInSyncProps> = ({
14
-
width = 482,
15
-
height = 300,
16
-
className = "",
17
-
theme = "dark",
18
-
}) => {
19
-
const themeVars =
20
-
theme === "light"
21
-
? {
22
-
"--yws-surface": "#ffffff",
23
-
"--yws-text-primary": "#37322f",
24
-
"--yws-text-secondary": "#6b7280",
25
-
"--yws-bubble-light": "#e8e5e3",
26
-
"--yws-bubble-dark": "#37322f",
27
-
"--yws-bubble-white": "#ffffff",
28
-
"--yws-border": "rgba(0,0,0,0.08)",
29
-
"--yws-shadow": "rgba(0,0,0,0.08)",
30
-
}
31
-
: ({
32
-
"--yws-surface": "#1f2937",
33
-
"--yws-text-primary": "#f9fafb",
34
-
"--yws-text-secondary": "#d1d5db",
35
-
"--yws-bubble-light": "#374151",
36
-
"--yws-bubble-dark": "#111827",
37
-
"--yws-bubble-white": "#ffffff",
38
-
"--yws-border": "rgba(255,255,255,0.12)",
39
-
"--yws-shadow": "rgba(0,0,0,0.24)",
40
-
} as React.CSSProperties);
41
-
42
-
const OneAIIMG = "/ai.png";
43
-
const imgFrame2147223206 =
44
-
"/professional-man-avatar-with-beard-and-glasses-loo.jpg";
45
-
const imgFrame2147223207 =
46
-
"/professional-person-avatar-with-curly-hair-and-war.jpg";
47
-
const imgArrowUp =
48
-
"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='currentColor' strokeWidth='3' strokeLinecap='round' strokeLinejoin='round'%3E%3Cpath d='m5 12 7-7 7 7'/%3E%3Cpath d='M12 19V5'/%3E%3C/svg%3E";
49
-
50
-
return (
51
-
<div
52
-
className={className}
53
-
style={
54
-
{
55
-
width,
56
-
height,
57
-
position: "relative",
58
-
background: "transparent",
59
-
...themeVars,
60
-
} as React.CSSProperties
61
-
}
62
-
role="img"
63
-
aria-label="Chat conversation showing team collaboration sync"
64
-
>
65
-
{}
66
-
<div
67
-
style={{
68
-
position: "absolute",
69
-
left: "50%",
70
-
top: "50%",
71
-
transform: "translate(-50%, -50%)",
72
-
width: "356px",
73
-
height: "216px",
74
-
}}
75
-
>
76
-
{}
77
-
<div
78
-
style={{
79
-
width: "356px",
80
-
height: "216px",
81
-
position: "relative",
82
-
transform: "scale(1.1)",
83
-
}}
84
-
>
85
-
{}
86
-
<div
87
-
style={{
88
-
position: "absolute",
89
-
left: "0px",
90
-
top: "0px",
91
-
display: "flex",
92
-
gap: "10px",
93
-
alignItems: "flex-start",
94
-
width: "356px",
95
-
height: "36px",
96
-
}}
97
-
>
98
-
{}
99
-
<div
100
-
style={{
101
-
width: "36px",
102
-
height: "36px",
103
-
borderRadius: "44px",
104
-
backgroundImage: `url('${OneAIIMG}')`,
105
-
backgroundSize: "cover",
106
-
backgroundPosition: "center",
107
-
border: "1px solid var(--yws-border)",
108
-
flexShrink: 0,
109
-
}}
110
-
/>
111
-
{}
112
-
<div
113
-
style={{
114
-
background:
115
-
theme === "light" ? "#e8e5e3" : "var(--yws-bubble-light)",
116
-
borderRadius: "999px",
117
-
padding: "0px 12px",
118
-
height: "36px",
119
-
display: "flex",
120
-
alignItems: "center",
121
-
justifyContent: "center",
122
-
}}
123
-
>
124
-
<span
125
-
style={{
126
-
fontFamily: "Inter, sans-serif",
127
-
fontWeight: 500,
128
-
fontSize: "13px",
129
-
lineHeight: "16px",
130
-
letterSpacing: "-0.4px",
131
-
color:
132
-
theme === "light" ? "#37322f" : "var(--yws-text-primary)",
133
-
whiteSpace: "nowrap",
134
-
}}
135
-
>
136
-
Hi, I'm One AI.
137
-
</span>
138
-
</div>
139
-
</div>
140
-
141
-
{/* Message 2: Right side with avatar */}
142
-
<div
143
-
style={{
144
-
position: "absolute",
145
-
right: "0px",
146
-
top: "60px",
147
-
display: "flex",
148
-
gap: "10px",
149
-
alignItems: "flex-start",
150
-
justifyContent: "flex-end",
151
-
}}
152
-
>
153
-
{/* Message bubble */}
154
-
<div
155
-
style={{
156
-
background:
157
-
theme === "light" ? "#37322f" : "var(--yws-bubble-dark)",
158
-
borderRadius: "999px",
159
-
padding: "0px 12px",
160
-
height: "36px",
161
-
display: "flex",
162
-
alignItems: "center",
163
-
justifyContent: "center",
164
-
}}
165
-
>
166
-
<span
167
-
style={{
168
-
fontFamily: "Inter, sans-serif",
169
-
fontWeight: 500,
170
-
fontSize: "13px",
171
-
lineHeight: "16px",
172
-
letterSpacing: "-0.4px",
173
-
color: "#ffffff",
174
-
whiteSpace: "nowrap",
175
-
}}
176
-
>
177
-
What can you do for me?
178
-
</span>
179
-
</div>
180
-
{/* Avatar */}
181
-
<div
182
-
style={{
183
-
width: "36px",
184
-
height: "36px",
185
-
borderRadius: "44px",
186
-
backgroundImage: `url('${imgFrame2147223206}')`,
187
-
backgroundSize: "cover",
188
-
backgroundPosition: "center",
189
-
border: "1px solid var(--yws-border)",
190
-
flexShrink: 0,
191
-
}}
192
-
/>
193
-
</div>
194
-
195
-
{/* Message 3: Left side with avatar */}
196
-
<div
197
-
style={{
198
-
position: "absolute",
199
-
left: "0px",
200
-
top: "120px",
201
-
display: "flex",
202
-
gap: "10px",
203
-
alignItems: "flex-start",
204
-
width: "210px",
205
-
height: "36px",
206
-
}}
207
-
>
208
-
{/* Avatar */}
209
-
<div
210
-
style={{
211
-
width: "36px",
212
-
height: "36px",
213
-
borderRadius: "44px",
214
-
backgroundImage: `url('${OneAIIMG}')`,
215
-
backgroundSize: "cover",
216
-
backgroundPosition: "center",
217
-
border: "1px solid var(--yws-border)",
218
-
flexShrink: 0,
219
-
}}
220
-
/>
221
-
{/* Message bubble */}
222
-
<div
223
-
style={{
224
-
background:
225
-
theme === "light" ? "#e8e5e3" : "var(--yws-bubble-light)",
226
-
borderRadius: "999px",
227
-
padding: "0px 12px",
228
-
height: "36px",
229
-
display: "flex",
230
-
alignItems: "center",
231
-
justifyContent: "center",
232
-
}}
233
-
>
234
-
<span
235
-
style={{
236
-
fontFamily: "Inter, sans-serif",
237
-
fontWeight: 500,
238
-
fontSize: "13px",
239
-
lineHeight: "16px",
240
-
letterSpacing: "-0.4px",
241
-
color:
242
-
theme === "light" ? "#37322f" : "var(--yws-text-primary)",
243
-
whiteSpace: "nowrap",
244
-
}}
245
-
>
246
-
Some calendar ideas...
247
-
</span>
248
-
</div>
249
-
</div>
250
-
251
-
{/* Message 4: Center with send button */}
252
-
<div
253
-
style={{
254
-
position: "absolute",
255
-
left: "146px",
256
-
top: "180px",
257
-
display: "flex",
258
-
gap: "10px",
259
-
alignItems: "center",
260
-
height: "36px",
261
-
}}
262
-
>
263
-
{/* Message bubble */}
264
-
<div
265
-
style={{
266
-
background: "#ffffff",
267
-
borderRadius: "16px",
268
-
padding: "0px 12px",
269
-
height: "36px",
270
-
display: "flex",
271
-
alignItems: "center",
272
-
justifyContent: "center",
273
-
boxShadow:
274
-
"0px 0px 0px 1px rgba(0,0,0,0.08), 0px 1px 2px -0.4px rgba(0,0,0,0.08)",
275
-
overflow: "hidden",
276
-
}}
277
-
>
278
-
<span
279
-
style={{
280
-
fontFamily: "Inter, sans-serif",
281
-
fontWeight: 400,
282
-
fontSize: "14px",
283
-
lineHeight: "20px",
284
-
color: "#030712",
285
-
whiteSpace: "nowrap",
286
-
}}
287
-
>
288
-
Sounds great!
289
-
</span>
290
-
</div>
291
-
{/* Send button */}
292
-
<div
293
-
style={{
294
-
width: "36px",
295
-
height: "36px",
296
-
borderRadius: "44px",
297
-
background:
298
-
theme === "light" ? "#37322f" : "var(--yws-bubble-dark)",
299
-
display: "flex",
300
-
alignItems: "center",
301
-
justifyContent: "center",
302
-
boxShadow: "0px 1px 2px 0px rgba(0,0,0,0.08)",
303
-
cursor: "pointer",
304
-
flexShrink: 0,
305
-
}}
306
-
>
307
-
<img
308
-
src={imgArrowUp || "/placeholder.svg"}
309
-
alt="Send"
310
-
style={{
311
-
width: "20px",
312
-
height: "20px",
313
-
filter: "brightness(0) invert(1)",
314
-
}}
315
-
/>
316
-
</div>
317
-
</div>
318
-
</div>
319
-
</div>
320
-
</div>
321
-
);
322
-
};
323
-
324
-
export default YourWorkInSync;
public/Banner-dark.jpg
public/Banner-dark.jpg
This is a binary file and will not be displayed.