111 lines
4.9 KiB
TypeScript
111 lines
4.9 KiB
TypeScript
"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>
|
|
);
|
|
}
|