From f8c8475c396ee68ed2f0ba3d2fdf9ed103598dd2 Mon Sep 17 00:00:00 2001
From: "opencode-agent[bot]" <opencode-agent[bot]@users.noreply.github.com>
Date: Sat, 7 Feb 2026 20:05:14 -0500
Subject: [PATCH] feat: add Cal.com scheduling integration

- Create CalEmbed component for embedding Cal.com calendar
- Add Schedule section to main page with booking interface
- Add Schedule navigation link in header
- Configure Cal.com with dark theme matching site design
---
 app/page.tsx             | 45 +++++++++++++++++++++++++++++++++
 bun.lock                 |  3 ++-
 components/cal-embed.tsx | 54 ++++++++++++++++++++++++++++++++++++++++
 3 files changed, 101 insertions(+), 1 deletion(-)
 create mode 100644 components/cal-embed.tsx

diff --git a/app/page.tsx b/app/page.tsx
index 8612531..b838e85 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -2,6 +2,7 @@ import { ArrowRight, ArrowUpRight } from "lucide-react";
 import { Footer } from "@/components/footer";
 import { Globe } from "@/components/globe";
 import { GithubBadge } from "@/components/github-badge";
+import { CalEmbed } from "@/components/cal-embed";
 
 const EVENTS = [
   { id: "01", title: "Lima #1", city: "Lima", country: "Peru", date: "Aug 2024" },
@@ -66,6 +67,12 @@ export default function HomePage() {
               >
                 Events
               </a>
+              <a
+                href="#schedule"
+                className="text-label hover:text-signal transition-colors hidden sm:block"
+              >
+                Schedule
+              </a>
               <GithubBadge />
               <a
                 href="https://crafters.chat/"
@@ -401,6 +408,44 @@ export default function HomePage() {
           </div>
         </section>
 
+        {/* ════════════════════════════════════════
+            SCHEDULE
+           ════════════════════════════════════════ */}
+        <section id="schedule" className="section-border relative overflow-hidden">
+          <div className="grid-overlay" style={{ opacity: 0.3 }} />
+
+          <div className="relative z-10 px-5 sm:px-8 py-8 sm:py-12">
+            {/* Section header */}
+            <div className="flex justify-center mb-6">
+              <div className="line-marker">
+                <span className="text-label">Schedule</span>
+              </div>
+            </div>
+
+            <h2 className="text-headline text-foreground text-center mb-4">
+              Book a Meeting
+            </h2>
+
+            <div className="flex justify-center mb-6">
+              <div className="line-signal-center w-48" />
+            </div>
+
+            <div className="max-w-md mx-auto mb-8 text-center">
+              <p className="text-xs text-muted-foreground font-mono leading-relaxed">
+                Want to chat about partnerships, sponsorships, or bringing Code
+                Brew to your city? Schedule a time to connect with our team.
+              </p>
+            </div>
+
+            {/* Cal.com embed */}
+            <div className="max-w-4xl mx-auto">
+              <div className="border border-border rounded-sm overflow-hidden bg-background/50 backdrop-blur-sm">
+                <CalEmbed calLink="team/codebrew/meet" className="w-full" />
+              </div>
+            </div>
+          </div>
+        </section>
+
         {/* ════════════════════════════════════════
             PARTNERS
            ════════════════════════════════════════ */}
diff --git a/bun.lock b/bun.lock
index a2b3265..1e166fd 100644
--- a/bun.lock
+++ b/bun.lock
@@ -1,5 +1,6 @@
 {
   "lockfileVersion": 1,
+  "configVersion": 0,
   "workspaces": {
     "": {
       "name": "codebrew.tech",
@@ -25,7 +26,7 @@
         "png-to-ico": "^3.0.1",
         "sharp": "^0.34.5",
         "tailwindcss": "^4",
-        "typescript": "^5",
+        "typescript": "5.9.3",
       },
     },
   },
diff --git a/components/cal-embed.tsx b/components/cal-embed.tsx
new file mode 100644
index 0000000..337f577
--- /dev/null
+++ b/components/cal-embed.tsx
@@ -0,0 +1,54 @@
+"use client";
+
+import { useEffect, useRef } from "react";
+
+interface CalEmbedProps {
+  calLink?: string;
+  className?: string;
+}
+
+export function CalEmbed({ 
+  calLink = "team/codebrew/meet", 
+  className = "" 
+}: CalEmbedProps) {
+  const calRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    // Load Cal.com embed script
+    const script = document.createElement("script");
+    script.src = "https://app.cal.com/embed/embed.js";
+    script.async = true;
+    
+    script.onload = () => {
+      // Initialize Cal after script loads
+      if (typeof window !== "undefined" && "Cal" in window) {
+        const Cal = (window as Window & { Cal: (action: string, config: { origin: string }) => void }).Cal;
+        Cal("init", {origin: "https://app.cal.com"});
+      }
+    };
+    
+    document.body.appendChild(script);
+
+    return () => {
+      // Cleanup script on unmount
+      const scripts = document.querySelectorAll('script[src="https://app.cal.com/embed/embed.js"]');
+      scripts.forEach(s => s.remove());
+    };
+  }, []);
+
+  return (
+    <div className={className}>
+      <div
+        ref={calRef}
+        data-cal-link={calLink}
+        data-cal-config='{"layout":"month_view","theme":"dark"}'
+        style={{ 
+          width: "100%", 
+          height: "100%", 
+          minHeight: "600px",
+          overflow: "scroll"
+        }}
+      />
+    </div>
+  );
+}