Update components/booking.tsx

components/booking.tsx

@@ -0,0 +1,81 @@
+"use client";
+import { Container } from "@/components/container";
+import { Heading } from "@/components/heading";
+import { Subheading } from "@/components/subheading";
+import { motion } from "framer-motion";
+import { Calendar, CheckCircle2, Clock, Video } from "lucide-react";
+
+export function Booking() {
+  return (
+    <section id="book" className="py-32 bg-neutral-900 text-white relative overflow-hidden">
+      {/* Decorative elements */}
+      <div className="absolute top-0 right-0 w-1/2 h-full bg-blue-600/5 blur-[120px] -z-10" />
+      <div className="absolute bottom-0 left-0 w-1/2 h-full bg-purple-600/5 blur-[120px] -z-10" />
+
+      <Container>
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-20 items-center">
+          <motion.div
+            initial={{ opacity: 0, x: -30 }}
+            whileInView={{ opacity: 1, x: 0 }}
+            viewport={{ once: true }}
+            transition={{ duration: 0.6 }}
+          >
+            <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-blue-500/10 border border-blue-500/20 text-blue-400 text-sm font-bold mb-8">
+              <Calendar className="w-4 h-4" />
+              <span>Free Discovery Call</span>
+            </div>
+            <Heading className="text-white text-5xl md:text-6xl font-black leading-tight">
+              Ready to <span className="text-blue-500">Scale</span> Your Business?
+            </Heading>
+            <Subheading className="mt-8 text-neutral-400 text-xl leading-relaxed max-w-xl">
+              Book a free 15-minute discovery call to discuss your growth challenges and see if we're a good fit to work together.
+            </Subheading>
+            
+            <div className="mt-12 space-y-8">
+              {[
+                { icon: Clock, text: "15-minute focused strategy session", color: "text-blue-400" },
+                { icon: Video, text: "Face-to-face Zoom consultation", color: "text-purple-400" },
+                { icon: CheckCircle2, text: "Actionable growth roadmap", color: "text-emerald-400" }
+              ].map((item, i) => (
+                <div key={i} className="flex items-center gap-5 group">
+                  <div className={`h-12 w-12 rounded-2xl bg-white/5 border border-white/10 flex items-center justify-center transition-all group-hover:scale-110 group-hover:bg-white/10`}>
+                    <item.icon className={`h-6 w-6 ${item.color}`} />
+                  </div>
+                  <p className="text-lg font-medium text-neutral-200">{item.text}</p>
+                </div>
+              ))}
+            </div>
+          </motion.div>
+          
+          <motion.div
+            initial={{ opacity: 0, scale: 0.9 }}
+            whileInView={{ opacity: 1, scale: 1 }}
+            viewport={{ once: true }}
+            transition={{ duration: 0.6 }}
+            className="relative"
+          >
+            <div className="absolute -inset-4 bg-gradient-to-r from-blue-600 to-purple-600 rounded-[2.5rem] blur-2xl opacity-20 animate-pulse" />
+            <div className="relative bg-white rounded-[2rem] overflow-hidden shadow-2xl min-h-[650px] flex flex-col items-center justify-center text-neutral-900 border border-white/10">
+              <div className="absolute top-0 left-0 w-full h-2 bg-gradient-to-r from-blue-600 to-purple-600" />
+              <div className="text-center p-12">
+                <div className="w-20 h-20 bg-blue-50 rounded-3xl flex items-center justify-center mx-auto mb-8">
+                  <Calendar className="w-10 h-10 text-blue-600" />
+                </div>
+                <h3 className="text-2xl font-black mb-4">Schedule Your Call</h3>
+                <p className="text-neutral-500 mb-10 max-w-xs mx-auto">Select a date and time that works best for your schedule.</p>
+                
+                <div className="w-full max-w-md mx-auto aspect-[4/5] bg-neutral-50 rounded-2xl border-2 border-dashed border-neutral-200 flex flex-col items-center justify-center p-8 group hover:border-blue-300 transition-colors cursor-pointer">
+                  <div className="w-16 h-16 rounded-full bg-white shadow-sm flex items-center justify-center mb-4 group-hover:scale-110 transition-transform">
+                    <Calendar className="w-8 h-8 text-neutral-300 group-hover:text-blue-500 transition-colors" />
+                  </div>
+                  <span className="text-neutral-400 font-bold group-hover:text-blue-600 transition-colors">Calendly Widget Integration</span>
+                  <p className="text-xs text-neutral-400 mt-4 text-center">Your booking widget will appear here, allowing clients to book directly on your site.</p>
+                </div>
+              </div>
+            </div>
+          </motion.div>
+        </div>
+      </Container>
+    </section>
+  );
+}