Update components/services.tsx

components/services.tsx

@@ -0,0 +1,98 @@
+"use client";
+import { Container } from "@/components/container";
+import { Heading } from "@/components/heading";
+import { motion } from "framer-motion";
+import { Palette, Code, Smartphone, TrendingUp, Sparkles, Zap } from "lucide-react";
+
+const services = [
+  {
+    icon: Palette,
+    title: "Brand Identity",
+    description: "Crafting memorable brands that resonate with your audience and stand out in the market",
+    color: "from-pink-500 to-rose-500",
+  },
+  {
+    icon: Code,
+    title: "Web Development",
+    description: "Building lightning-fast, scalable websites with cutting-edge technologies and best practices",
+    color: "from-violet-500 to-purple-500",
+  },
+  {
+    icon: Smartphone,
+    title: "Mobile Apps",
+    description: "Creating intuitive mobile experiences that users love on iOS and Android platforms",
+    color: "from-blue-500 to-cyan-500",
+  },
+  {
+    icon: Sparkles,
+    title: "UI/UX Design",
+    description: "Designing beautiful, user-centric interfaces that drive engagement and conversions",
+    color: "from-orange-500 to-amber-500",
+  },
+  {
+    icon: TrendingUp,
+    title: "Digital Marketing",
+    description: "Strategic campaigns that amplify your brand and drive measurable business growth",
+    color: "from-green-500 to-emerald-500",
+  },
+  {
+    icon: Zap,
+    title: "Consulting",
+    description: "Expert guidance to transform your digital strategy and accelerate innovation",
+    color: "from-indigo-500 to-blue-500",
+  },
+];
+
+export function Services() {
+  return (
+    <section id="services" className="py-32 bg-slate-50 dark:bg-slate-950">
+      <Container>
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          viewport={{ once: true }}
+          transition={{ duration: 0.6 }}
+          className="text-center mb-20"
+        >
+          <Heading className="mb-4">Our Services</Heading>
+          <p className="text-xl text-slate-600 dark:text-slate-400 max-w-2xl mx-auto">
+            Full-spectrum digital solutions tailored to elevate your brand and achieve your goals
+          </p>
+        </motion.div>
+
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+          {services.map((service, index) => {
+            const Icon = service.icon;
+            return (
+              <motion.div
+                key={index}
+                initial={{ opacity: 0, y: 30 }}
+                whileInView={{ opacity: 1, y: 0 }}
+                viewport={{ once: true }}
+                transition={{ duration: 0.6, delay: index * 0.1 }}
+                className="group relative p-8 bg-white dark:bg-slate-900 rounded-2xl shadow-lg hover:shadow-2xl transition-all duration-300 border border-slate-200 dark:border-slate-800 hover:border-transparent overflow-hidden"
+              >
+                {/* Gradient background on hover */}
+                <div className={`absolute inset-0 bg-gradient-to-br ${service.color} opacity-0 group-hover:opacity-5 transition-opacity duration-300`} />
+                
+                <div className="relative z-10">
+                  <div className={`w-14 h-14 rounded-xl bg-gradient-to-br ${service.color} flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-300`}>
+                    <Icon className="w-7 h-7 text-white" />
+                  </div>
+                  
+                  <h3 className="text-2xl font-bold mb-3 text-slate-900 dark:text-white">
+                    {service.title}
+                  </h3>
+                  
+                  <p className="text-slate-600 dark:text-slate-400 leading-relaxed">
+                    {service.description}
+                  </p>
+                </div>
+              </motion.div>
+            );
+          })}
+        </div>
+      </Container>
+    </section>
+  );
+}