diff --git a/app/globals.css b/app/globals.css index c40732e..7d75135 100644 --- a/app/globals.css +++ b/app/globals.css @@ -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); } @@ -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% { diff --git a/modules/landing/Hero.tsx b/modules/landing/Hero.tsx index f280139..39bbe01 100644 --- a/modules/landing/Hero.tsx +++ b/modules/landing/Hero.tsx @@ -33,21 +33,23 @@ export function Hero() { const showConnectCta = !session || isPending || !!error return ( -
+
-
-
+
+
+
+
-
+
-
+
- Cal.com native analytics + Holiday release • limited run

- Operational clarity for every{" "} + Holiday-ready clarity for every{" "}

- Streamline scheduling performance reviews with an opinionated dashboard that mirrors Cal.com'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.

@@ -106,28 +108,28 @@ export function Hero() {
  • - - • + + ★ OAuth-secured Cal.com access
  • - - • + + ★ Ready for revenue and ops reviews
  • - - • + + ★ Exportable KPIs on demand
-
-

Snapshot

+
+

Holiday snapshot

7 day bookings