ServicePageClient.tsx:
"use client"

import { services } from "@/data/services"
import ServiceCard from "@/components/ui/ServiceCard"
import { motion } from "framer-motion"

export default function ServicesPageClient() {
  // Animation variants
  const container = {
    hidden: { opacity: 0 },
    show: {
      opacity: 1,
      transition: {
        staggerChildren: 0.1,
      },
    },
  }

  const item = {
    hidden: { opacity: 0, y: 20 },
    show: { opacity: 1, y: 0, transition: { duration: 0.5 } },
  }

  return (
    <section className="py-16">
      <div className="max-w-3xl mx-auto text-center mb-16">
        <h1 className="text-4xl font-bold mb-6">Our Services</h1>
        <p className="text-lg text-gray-600">
          We offer a full range of digital services to help you grow your online presence and achieve your business goals.
        </p>
      </div>

      <motion.div
        variants={container}
        initial="hidden"
        animate="show"
        className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"
      >
        {services.map((service) => (
          <motion.div key={service.id} variants={item}>
            <ServiceCard title={service.title} description={service.description} icon={service.icon} />
          </motion.div>
        ))}
      </motion.div>
    </section>
  )
}

className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"