Initial commit

components/blog-card.tsx

@@ -0,0 +1,77 @@
+"use client"
+
+import { Card, CardContent, CardFooter } from "@/components/ui/card"
+import { Badge } from "@/components/ui/badge"
+import { Button } from "@/components/ui/button"
+import { ArrowRight, Calendar, Clock } from "lucide-react"
+import Image from "next/image"
+import Link from "next/link"
+import { motion } from "framer-motion"
+import type { Post } from "content-collections"
+
+interface BlogCardProps {
+  post: Post
+}
+
+export function BlogCard({ post }: BlogCardProps) {
+  return (
+    <motion.div whileHover={{ y: -5 }} transition={{ duration: 0.3 }}>
+      <Link href={`/blog/${post.slug}`} 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={post.coverImage || "/placeholder.svg"} alt={post.title} fill className="object-cover" />
+            </motion.div>
+          </div>
+          <CardContent className="p-6">
+            <div className="flex items-center gap-2 mb-3">
+              <Badge
+                variant="secondary"
+                className="bg-primary-100 text-primary-900 dark:bg-primary-900 dark:text-primary-100"
+              >
+                {post.category}
+              </Badge>
+              <div className="flex items-center text-sm text-gray-500 dark:text-gray-400">
+                <Calendar className="h-3 w-3 mr-1" />
+                {post.date}
+              </div>
+              <div className="flex items-center text-sm text-gray-500 dark:text-gray-400">
+                <Clock className="h-3 w-3 mr-1" />
+                {post.readTime}
+              </div>
+            </div>
+            <h3 className="text-xl font-bold text-primary-900 dark:text-primary-300 mb-2 line-clamp-2">{post.title}</h3>
+            <p className="text-gray-500 dark:text-gray-400 mb-4 line-clamp-3">{post.excerpt}</p>
+            <div className="flex flex-wrap gap-2 mb-4">
+              {post.tags.map((tag, index) => (
+                <Badge
+                  key={index}
+                  variant="outline"
+                  className="bg-transparent border-primary-200 text-primary-700 dark:border-primary-800 dark:text-primary-300"
+                >
+                  {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"
+            >
+              Leggi post
+              <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>
+  )
+}