import React, { useState } from "react";
import { motion } from "framer-motion";

const data = [
  { id: 1, title: "Web Development", desc: "React, Next.js, Node.js" },
  { id: 2, title: "UI/UX Design", desc: "Figma, Adobe XD, Prototyping" },
  { id: 3, title: "Digital Marketing", desc: "SEO, Ads, Email Marketing" },
  { id: 4, title: "DevOps", desc: "Docker, Kubernetes, CI/CD" },
];

export default function App() {
  const [search, setSearch] = useState("");

  const filtered = data.filter((item) =>
    item.title.toLowerCase().includes(search.toLowerCase())
  );

  return (
    <div className="min-h-screen bg-gray-100 p-10">
      <h1 className="text-3xl font-bold text-center mb-6"> My Skills Dashboard</h1>