import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { motion } from "framer-motion";

export default function VerisedServices() {
  return (
    <div className="min-h-screen bg-gray-50 p-6">
      <motion.h1 
        initial={{ opacity: 0, y: -20 }} 
        animate={{ opacity: 1, y: 0 }} 
        className="text-4xl font-bold text-center mb-6"
      >
        Verised Services
      </motion.h1>

      <p className="text-center text-lg mb-10">
        Reliable. Professional. Trusted Solutions for Your Needs.
      </p>

      <div className="grid md:grid-cols-3 gap-6">
        <Card className="rounded-2xl shadow">
          <CardContent className="p-4">
            <h2 className="text-xl font-semibold mb-2">Consulting</h2>
            <p>Expert advice to help you make informed decisions and grow your business.</p>
          </CardContent>
        </Card>

        <Card className="rounded-2xl shadow">
          <CardContent className="p-4">
            <h2 className="text-xl font-semibold mb-2">Logistics</h2>
            <p>Efficient and reliable transportation and delivery solutions.</p>
          </CardContent>
        </Card>

        <Card className="rounded-2xl shadow">
          <CardContent className="p-4">
            <h2 className="text-xl font-semibold mb-2">Support Services</h2>
            <p>Dedicated support to meet your everyday operational needs.</p>
          </CardContent>
        </Card>
      </div>

      <div className="text-center mt-10">
        <Button className="rounded-2xl px-6 py-3">Contact Us</Button>
      </div>
    </div>
  );
}