Update components/services.tsx

components/services.tsx

@@ -0,0 +1,110 @@
+"use client";
+import { Container } from "@/components/container";
+import { Heading } from "@/components/heading";
+import { Subheading } from "@/components/subheading";
+import { Card, CardHeader, CardTitle, CardDescription, CardContent } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Check, Zap } from "lucide-react";
+import { motion } from "framer-motion";
+
+const services = [
+  {
+    title: "Growth Audit",
+    price: "$2,500",
+    description: "A comprehensive deep-dive into your current funnel and growth metrics.",
+    features: ["Full Funnel Analysis", "Conversion Rate Audit", "Growth Roadmap", "60-min Strategy Session"],
+    cta: "Get an Audit",
+    popular: false
+  },
+  {
+    title: "Fractional Head of Growth",
+    price: "$5,000/mo",
+    description: "Ongoing strategic leadership to build and manage your growth engine.",
+    features: ["Weekly Strategy Calls", "Team Management", "Experiment Design", "Unlimited Slack Support"],
+    cta: "Apply to Work Together",
+    popular: true
+  },
+  {
+    title: "Custom Workshop",
+    price: "Custom",
+    description: "Intensive training for your marketing and product teams.",
+    features: ["Tailored Curriculum", "Hands-on Implementation", "Post-Workshop Support", "Team Alignment"],
+    cta: "Inquire Now",
+    popular: false
+  }
+];
+
+export function Services() {
+  return (
+    <section id="services" className="py-32 bg-white relative overflow-hidden">
+      <div className="absolute top-0 left-0 w-full h-px bg-gradient-to-r from-transparent via-neutral-200 to-transparent" />
+      
+      <Container>
+        <div className="text-center max-w-3xl mx-auto mb-20">
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true }}
+            transition={{ duration: 0.5 }}
+          >
+            <Heading className="text-4xl md:text-5xl">Strategic Services</Heading>
+            <Subheading className="mt-6 text-lg text-neutral-600">
+              Tailored solutions designed to solve your specific growth bottlenecks and accelerate revenue.
+            </Subheading>
+          </motion.div>
+        </div>
+        
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-8 items-stretch">
+          {services.map((service, index) => (
+            <motion.div
+              key={index}
+              initial={{ opacity: 0, y: 30 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              viewport={{ once: true }}
+              transition={{ duration: 0.5, delay: index * 0.1 }}
+              className="h-full"
+            >
+              <Card className={`relative flex flex-col h-full border-2 transition-all duration-300 hover:shadow-2xl group ${service.popular ? 'border-blue-600 shadow-xl scale-105 z-10' : 'border-neutral-100 hover:border-blue-200'}`}>
+                {service.popular && (
+                  <div className="absolute top-0 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-blue-600 text-white px-6 py-1.5 rounded-full text-sm font-bold flex items-center gap-2 shadow-lg">
+                    <Zap className="w-4 h-4 fill-current" />
+                    Most Popular
+                  </div>
+                )}
+                <CardHeader className="pt-10">
+                  <CardTitle className="text-2xl font-bold">{service.title}</CardTitle>
+                  <div className="mt-6 flex items-baseline gap-1">
+                    <span className="text-5xl font-black tracking-tight">{service.price}</span>
+                  </div>
+                  <CardDescription className="mt-6 text-neutral-600 leading-relaxed">
+                    {service.description}
+                  </CardDescription>
+                </CardHeader>
+                <CardContent className="flex-grow pt-6">
+                  <ul className="space-y-5">
+                    {service.features.map((feature, i) => (
+                      <li key={i} className="flex items-start gap-3 text-sm font-medium text-neutral-700">
+                        <div className="mt-0.5 h-5 w-5 rounded-full bg-blue-50 flex items-center justify-center shrink-0">
+                          <Check className="h-3.5 w-3.5 text-blue-600" />
+                        </div>
+                        {feature}
+                      </li>
+                    ))}
+                  </ul>
+                </CardContent>
+                <div className="p-8 pt-0">
+                  <Button 
+                    className={`w-full h-14 text-lg font-bold rounded-xl transition-all ${service.popular ? 'bg-blue-600 hover:bg-blue-700 shadow-lg shadow-blue-200' : 'bg-neutral-900 hover:bg-neutral-800'}`} 
+                    onClick={() => document.getElementById('book')?.scrollIntoView({ behavior: 'smooth' })}
+                  >
+                    {service.cta}
+                  </Button>
+                </div>
+              </Card>
+            </motion.div>
+          ))}
+        </div>
+      </Container>
+    </section>
+  );
+}