kleap
/
app-clever-panda-sprint
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update components/services.tsx

This commit is contained in:
kleap-admin 2026-01-16 17:09:43 +00:00
parent d76b661249
commit 7be3fa4c10
1 changed files with 31 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
components/services.tsx
View File

@ -1,50 +1,65 @@
"use client";
import { Container } from "@/components/container"; import { Container } from "@/components/container";
import { Heading } from "@/components/heading"; import { Heading } from "@/components/heading";
import { Subheading } from "@/components/subheading"; import { Subheading } from "@/components/subheading";
import { Sparkles, Droplets, Shield, Clock } from "lucide-react"; import { Sparkles, Droplets, Shield, Clock } from "lucide-react";
import { CardBody, CardContainer, CardItem } from "@/components/ui/3d-card";
const services = [ const services = [
{ {
title: "Full Interior Deep Clean", title: "Full Interior Deep Clean",
description: "Vacuuming, floor mats, dashboard wipe-down, and window cleaning. We get into all the cracks and crevices.", description: "Vacuuming, floor mats, dashboard wipe-down, and window cleaning. We get into all the cracks and crevices.",
icon: Droplets icon: Droplets,
price: "$80"
}, },
{ {
title: "Exterior Hand Wash", title: "Exterior Hand Wash",
description: "Safe hand wash and dry. No scratchy automatic brushes—just soft microfiber and premium soap.", description: "Safe hand wash and dry. No scratchy automatic brushes—just soft microfiber and premium soap.",
icon: Sparkles icon: Sparkles,
price: "$40"
}, },
{ {
title: "Wheel & Tire Shine", title: "Wheel & Tire Shine",
description: "We scrub the brake dust off your rims and apply a long-lasting tire shine for that showroom look.", description: "We scrub the brake dust off your rims and apply a long-lasting tire shine for that showroom look.",
icon: Shield icon: Shield,
price: "$25"
}, },
{ {
title: "Quick Turnaround", title: "Full Detail Package",
description: "We work efficiently right in your driveway or ours. Most jobs done in 2-3 hours.", description: "The ultimate treatment. Interior deep clean plus exterior wash and tire shine for a complete refresh.",
icon: Clock icon: Clock,
price: "$110"
} }
]; ];
export function Services() { export function Services() {
return ( return (
<section id="services" className="py-24 bg-neutral-50 dark:bg-neutral-900/50"> <section id="services" className="py-24 bg-neutral-50 dark:bg-neutral-900/50 overflow-hidden">
<Container> <Container>
<div className="text-center max-w-3xl mx-auto mb-16"> <div className="text-center max-w-3xl mx-auto mb-16">
<Heading>What We Do</Heading> <Heading>What I Do</Heading>
<Subheading className="mt-4"> <Subheading className="mt-4">
Real human service. We use professional-grade tools and a lot of patience to get your car spotless. Professional results. I use top-tier pressure washers, steam cleaners, and premium chemicals to get your car spotless.
</Subheading> </Subheading>
</div> </div>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8"> <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
{services.map((service, i) => ( {services.map((service, i) => (
<div key={i} className="p-8 rounded-2xl bg-white dark:bg-neutral-950 border border-neutral-200 dark:border-neutral-800 shadow-sm"> <CardContainer key={i} className="py-0">
<div className="w-12 h-12 rounded-full bg-blue-100 dark:bg-blue-900/30 flex items-center justify-center mb-6"> <CardBody className="bg-white dark:bg-neutral-950 border border-neutral-200 dark:border-neutral-800 shadow-sm rounded-2xl p-8 h-full">
<service.icon className="w-6 h-6 text-blue-600" /> <CardItem translateZ="50" className="w-12 h-12 rounded-full bg-blue-100 dark:bg-blue-900/30 flex items-center justify-center mb-6">
</div> <service.icon className="w-6 h-6 text-blue-600" />
<h3 className="text-xl font-bold mb-3">{service.title}</h3> </CardItem>
<p className="text-neutral-600 dark:text-neutral-400 text-sm leading-relaxed">{service.description}</p> <CardItem translateZ="60" className="text-xl font-bold mb-3">
</div> {service.title}
</CardItem>
<CardItem translateZ="40" className="text-neutral-600 dark:text-neutral-400 text-sm leading-relaxed mb-6">
{service.description}
</CardItem>
<CardItem translateZ="80" className="text-2xl font-black text-blue-600">
{service.price}
</CardItem>
</CardBody>
</CardContainer>
))} ))}
</div> </div>
</Container> </Container>