Skip to content

Add Christmas themed styling #77

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
zhyd1997 wants to merge 1 commit into
base: main
Choose a base branch
from
Draft

Add Christmas themed styling #77

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
137 changes: 84 additions & 53 deletions app/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,73 +4,73 @@
@custom-variant dark (&:is(.dark *));

:root {
--background: oklch(0.99 0.002 255);
--foreground: oklch(0.23 0.02 255);
--card: oklch(0.99 0.001 255);
--background: oklch(0.98 0.02 125);
--foreground: oklch(0.24 0.04 135);
--card: oklch(0.98 0.015 125);
--card-foreground: var(--foreground);
--popover: oklch(1 0 0);
--popover-foreground: var(--foreground);
--primary: oklch(0.33 0.03 255);
--primary-foreground: oklch(0.99 0.002 255);
--secondary: oklch(0.95 0.005 255);
--primary: oklch(0.38 0.08 150);
--primary-foreground: oklch(0.98 0.02 125);
--secondary: oklch(0.95 0.05 95);
--secondary-foreground: var(--foreground);
--muted: oklch(0.94 0.004 255);
--muted-foreground: oklch(0.45 0.015 255);
--accent: oklch(0.75 0.08 230);
--accent-foreground: oklch(0.19 0.02 255);
--destructive: oklch(0.56 0.16 27);
--destructive-foreground: oklch(0.99 0.002 255);
--border: oklch(0.91 0.003 255);
--input: oklch(0.92 0.003 255);
--ring: var(--accent);
--chart-1: oklch(0.62 0.09 231);
--chart-2: oklch(0.7 0.06 210);
--chart-3: oklch(0.55 0.05 260);
--chart-4: oklch(0.64 0.06 175);
--chart-5: oklch(0.76 0.07 120);
--muted: oklch(0.93 0.03 120);
--muted-foreground: oklch(0.48 0.035 125);
--accent: oklch(0.63 0.17 25);
--accent-foreground: oklch(0.98 0.02 125);
--destructive: oklch(0.54 0.17 25);
--destructive-foreground: oklch(0.99 0.01 125);
--border: oklch(0.9 0.02 120);
--input: oklch(0.92 0.02 120);
--ring: oklch(0.74 0.17 40);
--chart-1: oklch(0.52 0.12 160);
--chart-2: oklch(0.65 0.17 25);
--chart-3: oklch(0.7 0.12 105);
--chart-4: oklch(0.58 0.08 170);
--chart-5: oklch(0.72 0.1 55);
--radius: 0.75rem;
--sidebar: oklch(0.98 0.002 255);
--sidebar: oklch(0.97 0.02 125);
--sidebar-foreground: var(--foreground);
--sidebar-primary: var(--primary);
--sidebar-primary-foreground: var(--primary-foreground);
--sidebar-accent: oklch(0.95 0.005 255);
--sidebar-accent: oklch(0.95 0.05 95);
--sidebar-accent-foreground: var(--foreground);
--sidebar-border: var(--border);
--sidebar-ring: var(--ring);
}

.dark {
--background: oklch(0.12 0.02 255);
--foreground: oklch(0.96 0.01 255);
--card: oklch(0.16 0.015 255);
--card-foreground: oklch(0.97 0.01 255);
--popover: oklch(0.14 0.015 255);
--popover-foreground: oklch(0.97 0.01 255);
--primary: oklch(0.82 0.01 255);
--primary-foreground: oklch(0.17 0.02 255);
--secondary: oklch(0.21 0.006 255);
--secondary-foreground: oklch(0.88 0.01 255);
--muted: oklch(0.2 0.006 255);
--muted-foreground: oklch(0.67 0.01 255);
--accent: oklch(0.63 0.07 230);
--accent-foreground: oklch(0.15 0.02 255);
--destructive: oklch(0.48 0.16 27);
--destructive-foreground: oklch(0.96 0.01 255);
--border: oklch(0.26 0.005 255);
--input: oklch(0.26 0.005 255);
--ring: var(--accent);
--chart-1: oklch(0.7 0.09 231);
--chart-2: oklch(0.62 0.07 210);
--chart-3: oklch(0.68 0.06 175);
--chart-4: oklch(0.58 0.05 260);
--chart-5: oklch(0.72 0.06 120);
--sidebar: oklch(0.15 0.01 255);
--sidebar-foreground: oklch(0.92 0.01 255);
--sidebar-primary: oklch(0.82 0.01 255);
--sidebar-primary-foreground: oklch(0.17 0.02 255);
--sidebar-accent: oklch(0.21 0.006 255);
--sidebar-accent-foreground: oklch(0.88 0.01 255);
--sidebar-border: oklch(0.26 0.005 255);
--background: oklch(0.16 0.05 150);
--foreground: oklch(0.94 0.03 105);
--card: oklch(0.2 0.05 150);
--card-foreground: oklch(0.96 0.03 105);
--popover: oklch(0.17 0.045 150);
--popover-foreground: oklch(0.96 0.03 105);
--primary: oklch(0.82 0.08 155);
--primary-foreground: oklch(0.16 0.05 150);
--secondary: oklch(0.27 0.04 150);
--secondary-foreground: oklch(0.92 0.03 105);
--muted: oklch(0.24 0.035 150);
--muted-foreground: oklch(0.68 0.04 120);
--accent: oklch(0.64 0.18 25);
--accent-foreground: oklch(0.15 0.03 150);
--destructive: oklch(0.47 0.18 25);
--destructive-foreground: oklch(0.96 0.03 105);
--border: oklch(0.27 0.03 150);
--input: oklch(0.27 0.03 150);
--ring: oklch(0.74 0.18 40);
--chart-1: oklch(0.68 0.14 150);
--chart-2: oklch(0.68 0.19 25);
--chart-3: oklch(0.74 0.13 105);
--chart-4: oklch(0.6 0.11 170);
--chart-5: oklch(0.75 0.12 55);
--sidebar: oklch(0.18 0.045 150);
--sidebar-foreground: oklch(0.93 0.03 105);
--sidebar-primary: oklch(0.82 0.08 155);
--sidebar-primary-foreground: oklch(0.16 0.05 150);
--sidebar-accent: oklch(0.27 0.04 150);
--sidebar-accent-foreground: oklch(0.92 0.03 105);
--sidebar-border: oklch(0.27 0.03 150);
--sidebar-ring: var(--ring);
}

Expand Down Expand Up @@ -124,6 +124,37 @@
}
}

@layer utilities {
.holiday-lights {
background-image:
radial-gradient(circle at 12% 18%, rgba(214, 86, 86, 0.22), transparent 36%),
radial-gradient(circle at 78% 12%, rgba(16, 154, 95, 0.18), transparent 32%),
radial-gradient(circle at 20% 78%, rgba(220, 169, 80, 0.26), transparent 38%),
radial-gradient(circle at 82% 74%, rgba(15, 118, 110, 0.18), transparent 40%);
}

.holiday-snowfall {
background-image:
radial-gradient(2px 2px at 20% 20%, rgba(255, 255, 255, 0.6), transparent 50%),
radial-gradient(3px 3px at 40% 10%, rgba(255, 255, 255, 0.45), transparent 55%),
radial-gradient(2px 2px at 70% 30%, rgba(255, 255, 255, 0.55), transparent 50%),
radial-gradient(3px 3px at 80% 60%, rgba(255, 255, 255, 0.5), transparent 55%),
radial-gradient(2px 2px at 30% 80%, rgba(255, 255, 255, 0.4), transparent 50%);
background-size: 420px 620px, 360px 560px, 520px 720px, 440px 640px, 500px 700px;
animation: snowfall 22s linear infinite;
opacity: 0.7;
}
}

@keyframes snowfall {
from {
background-position: 0 0, 0 0, 0 0, 0 0, 0 0;
}
to {
background-position: 0 800px, 0 700px, 0 900px, 0 820px, 0 880px;
}
}

/* Cal.com inspired motion treatments */
@keyframes gradient-flow {
0% {
Expand Down
34 changes: 18 additions & 16 deletions modules/landing/Hero.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,21 +33,23 @@ export function Hero() {
const showConnectCta = !session || isPending || !!error

return (
<section className="relative overflow-hidden border-b border-border bg-background">
<section className="relative overflow-hidden border-b border-border bg-gradient-to-b from-secondary/80 via-background to-background pb-24 md:pb-32">
<div className="pointer-events-none absolute inset-0 -z-10">
<div className="absolute inset-x-0 top-0 h-[540px] bg-[radial-gradient(circle_at_top,_rgba(15,23,42,0.14),_transparent_65%)] dark:bg-[radial-gradient(circle_at_top,_rgba(148,163,184,0.2),_transparent_70%)]" />
<div className="absolute left-1/2 top-1/2 h-64 w-64 -translate-x-1/2 -translate-y-1/2 rounded-full bg-[conic-gradient(from_120deg,_rgba(14,165,233,0.3),_transparent_55%)] blur-3xl" />
<div className="holiday-lights absolute inset-0" />
<div className="holiday-snowfall absolute inset-0" />
<div className="absolute inset-x-0 top-0 h-[540px] bg-[radial-gradient(circle_at_25%_10%,_rgba(220,38,38,0.12),_transparent_45%),_radial-gradient(circle_at_75%_20%,_rgba(16,185,129,0.14),_transparent_50%),_radial-gradient(circle_at_50%_45%,_rgba(234,179,8,0.18),_transparent_50%)] dark:bg-[radial-gradient(circle_at_25%_10%,_rgba(248,113,113,0.16),_transparent_50%),_radial-gradient(circle_at_75%_20%,_rgba(52,211,153,0.16),_transparent_55%),_radial-gradient(circle_at_50%_45%,_rgba(250,204,21,0.2),_transparent_55%)]" />
<div className="absolute left-1/2 top-1/2 h-64 w-64 -translate-x-1/2 -translate-y-1/2 rounded-full bg-[conic-gradient(from_120deg,_rgba(220,38,38,0.28),_transparent_55%)] blur-3xl" />
</div>

<div className="container relative mx-auto px-4 py-24 md:py-32">
<div className="container relative mx-auto px-4 pt-24 md:pt-32">
<div className="grid items-center gap-16 lg:grid-cols-[3fr_2fr]">
<div className="text-center lg:text-left">
<div className="mx-auto mb-6 inline-flex items-center gap-2 rounded-full border border-border/60 bg-secondary/60 px-4 py-1 text-[0.65rem] font-semibold uppercase tracking-[0.24em] text-muted-foreground lg:mx-0">
<div className="mx-auto mb-6 inline-flex items-center gap-2 rounded-full border border-border/60 bg-secondary/70 px-4 py-1 text-[0.65rem] font-semibold uppercase tracking-[0.24em] text-muted-foreground shadow-sm lg:mx-0">
<span className="inline-block h-2 w-2 rounded-full bg-accent" />
Cal.com native analytics
Holiday release • limited run
</div>
<h1 className="text-balance font-sans text-4xl font-semibold tracking-tight text-foreground sm:text-5xl md:text-6xl">
Operational clarity for every{" "}
Holiday-ready clarity for every{" "}
<span className="relative inline-flex h-10 w-24 rotate-[-1deg] shrink-0 items-center justify-center md:h-16 md:w-32">
<Image
src="/platforms/cal-logo-light.jpeg"
Expand All @@ -69,7 +71,7 @@ export function Hero() {
booking
</h1>
<p className="mt-6 text-pretty text-base leading-relaxed text-muted-foreground md:text-lg">
Streamline scheduling performance reviews with an opinionated dashboard that mirrors Cal.com&apos;s product language. Monitor pipeline health, surface revenue signals, and confidently communicate growth to stakeholders.
Celebrate the busiest season with a Cal.com dashboard wrapped in evergreen gradients and warm berry accents. Keep tabs on pipeline health, showcase revenue signals, and end the quarter with a little sparkle.
</p>

<div className="mt-10 flex flex-col items-center gap-3 sm:flex-row sm:justify-start">
Expand Down Expand Up @@ -106,28 +108,28 @@ export function Hero() {

<ul className="mt-10 flex flex-col items-center gap-4 text-sm text-muted-foreground sm:flex-row sm:items-start sm:text-left">
<li className="flex items-center gap-2">
<span className="inline-flex h-5 w-5 items-center justify-center rounded-full bg-secondary text-xs font-semibold text-foreground">
•
<span className="inline-flex h-5 w-5 items-center justify-center rounded-full bg-accent/10 text-xs font-semibold text-accent">
★
</span>
OAuth-secured Cal.com access
</li>
<li className="flex items-center gap-2">
<span className="inline-flex h-5 w-5 items-center justify-center rounded-full bg-secondary text-xs font-semibold text-foreground">
•
<span className="inline-flex h-5 w-5 items-center justify-center rounded-full bg-accent/10 text-xs font-semibold text-accent">
★
</span>
Ready for revenue and ops reviews
</li>
<li className="flex items-center gap-2">
<span className="inline-flex h-5 w-5 items-center justify-center rounded-full bg-secondary text-xs font-semibold text-foreground">
•
<span className="inline-flex h-5 w-5 items-center justify-center rounded-full bg-accent/10 text-xs font-semibold text-accent">
★
</span>
Exportable KPIs on demand
</li>
</ul>
</div>

<div className="mx-auto w-full max-w-md rounded-3xl border border-border/70 bg-card/70 p-8 text-left shadow-lg backdrop-blur">
<p className="text-xs font-semibold uppercase tracking-[0.24em] text-muted-foreground">Snapshot</p>
<div className="mx-auto w-full max-w-md rounded-3xl border border-border/70 bg-card/80 p-8 text-left shadow-lg backdrop-blur">
<p className="text-xs font-semibold uppercase tracking-[0.24em] text-muted-foreground">Holiday snapshot</p>
<dl className="mt-6 grid grid-cols-2 gap-6">
<div>
<dt className="text-xs uppercase tracking-[0.18em] text-muted-foreground">7 day bookings</dt>
Expand Down