74 lines
3.0 KiB
TypeScript
74 lines
3.0 KiB
TypeScript
import { Container } from "@/components/container";
|
|
import { Heading } from "@/components/heading";
|
|
import { Subheading } from "@/components/subheading";
|
|
import { Card, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
|
|
import { Monitor, Utensils, Rocket, Layout, Settings, RefreshCw } from "lucide-react";
|
|
|
|
const services = [
|
|
{
|
|
title: "Website Design",
|
|
description: "Custom, modern designs tailored to your brand identity and business goals.",
|
|
icon: Monitor,
|
|
},
|
|
{
|
|
title: "Business Websites",
|
|
description: "Professional corporate sites that build trust and convert visitors into clients.",
|
|
icon: Rocket,
|
|
},
|
|
{
|
|
title: "Restaurant & Café",
|
|
description: "Specialized layouts with menu integration and online reservation capabilities.",
|
|
icon: Utensils,
|
|
},
|
|
{
|
|
title: "Landing Pages",
|
|
description: "High-converting single pages designed specifically for your marketing campaigns.",
|
|
icon: Layout,
|
|
},
|
|
{
|
|
title: "Maintenance",
|
|
description: "Ongoing support, security updates, and performance optimization for your site.",
|
|
icon: Settings,
|
|
},
|
|
{
|
|
title: "Website Redesign",
|
|
description: "Give your outdated website a modern makeover to improve UX and SEO.",
|
|
icon: RefreshCw,
|
|
},
|
|
];
|
|
|
|
export function Services() {
|
|
return (
|
|
<section className="relative py-24 overflow-hidden bg-white">
|
|
{/* Subtle Grid Pattern */}
|
|
<div className="absolute inset-0 -z-10 opacity-[0.05]">
|
|
<div className="absolute inset-0" style={{ backgroundImage: 'radial-gradient(#000 1px, transparent 1px)', backgroundSize: '30px 30px' }} />
|
|
</div>
|
|
|
|
<Container>
|
|
<div className="text-center max-w-3xl mx-auto mb-20">
|
|
<Heading className="text-4xl md:text-5xl mb-4 text-neutral-900 font-bold">Our Services</Heading>
|
|
<Subheading className="text-lg text-neutral-600 font-medium">
|
|
Everything you need to establish a powerful online presence and grow your business.
|
|
</Subheading>
|
|
</div>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
|
{services.map((service, index) => (
|
|
<Card key={index} className="group relative overflow-hidden border-neutral-200 bg-white hover:border-primary/50 hover:shadow-xl transition-all duration-500 hover:-translate-y-2">
|
|
<CardHeader className="relative z-10">
|
|
<div className="w-14 h-14 rounded-2xl bg-primary/10 flex items-center justify-center mb-6 group-hover:bg-primary transition-colors duration-500">
|
|
<service.icon className="w-7 h-7 text-primary group-hover:text-white" />
|
|
</div>
|
|
<CardTitle className="text-2xl mb-3 text-neutral-900 font-bold">{service.title}</CardTitle>
|
|
<CardDescription className="text-base text-neutral-600 leading-relaxed font-medium">
|
|
{service.description}
|
|
</CardDescription>
|
|
</CardHeader>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
</Container>
|
|
</section>
|
|
);
|
|
}
|