Initial commit

components/project-card.tsx

@@ -0,0 +1,61 @@
+"use client"
+
+import { Card, CardContent, CardFooter } from "@/components/ui/card"
+import { Badge } from "@/components/ui/badge"
+import { Button } from "@/components/ui/button"
+import { ArrowRight } from "lucide-react"
+import Image from "next/image"
+import { motion } from "framer-motion"
+import Link from "next/link"
+import { Portfolio } from "content-collections"
+
+interface ProjectCardProps {
+  project: Portfolio,
+}
+
+export function ProjectCard({ project: { title, description, tags, image, year, _meta }}: ProjectCardProps) {
+  return (
+    <motion.div whileHover={{ y: -5 }} transition={{ duration: 0.3 }}>
+      <Link href={`/portfolio/${_meta.path}`} className="block h-full">
+        <Card className="overflow-hidden border-primary-100 dark:border-primary-800 hover:shadow-md transition-shadow h-full">
+          <div className="relative h-48 w-full overflow-hidden">
+            <motion.div whileHover={{ scale: 1.05 }} transition={{ duration: 0.5 }} className="h-full w-full">
+              <Image src={image || "/placeholder.svg"} alt={title} fill className="object-cover" />
+            </motion.div>
+          </div>
+          <CardContent className="p-6">
+            <h3 className="text-xl font-bold text-primary-900 dark:text-primary-300 mb-2">{title} <span className="font-normal text-sm">({year})</span></h3>
+            <p className="text-gray-500 dark:text-gray-400 mb-4">{description}</p>
+            <div className="flex flex-wrap gap-2">
+              {tags.map((tag, index) => (
+                <Badge
+                  key={index}
+                  variant="secondary"
+                  className="bg-primary-100 text-primary-900 dark:bg-primary-900 dark:text-primary-100 hover:bg-primary-200 dark:hover:bg-primary-800"
+                >
+                  {tag}
+                </Badge>
+              ))}
+            </div>
+          </CardContent>
+          <CardFooter className="p-6 pt-0">
+            <Button
+              variant="ghost"
+              className="text-primary-900 dark:text-primary-300 hover:bg-primary-100 hover:text-primary-900 dark:hover:bg-primary-900 dark:hover:text-primary-100 p-4 group"
+            >
+              Vedi progetto
+              <motion.div
+                className="inline-block ml-2"
+                initial={{ x: 0 }}
+                whileHover={{ x: 5 }}
+                transition={{ duration: 0.3 }}
+              >
+                <ArrowRight className="h-4 w-4" />
+              </motion.div>
+            </Button>
+          </CardFooter>
+        </Card>
+      </Link>
+    </motion.div>
+  )
+}