Update components/services.tsx

components/services.tsx

@@ -0,0 +1,73 @@
+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>
+  );
+}