feat(www): introduce blog

apps/www/src/components/BlogCard.tsx

@@ -0,0 +1,88 @@
+"use client";
+
+import { motion } from "framer-motion";
+import Image from "next/image";
+import Link from "next/link";
+import { urlFor } from "@/lib/sanity";
+
+interface BlogCardProps {
+  post: {
+    _id: string;
+    title: string;
+    slug: { current: string };
+    formattedDate?: string;
+    author?: {
+      name?: string;
+      title?: string;
+      image?: any;
+    };
+  };
+  index?: number;
+}
+
+export function BlogCard({ post, index = 0 }: BlogCardProps) {
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 10 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{
+        duration: 0.4,
+        delay: index * 0.05,
+        ease: "easeOut",
+      }}
+    >
+      <Link href={`/blog/${post.slug.current}`} className="group block h-full">
+        <motion.article
+          className="h-full min-h-[320px] bg-linear-to-b from-primary/20 to-primary/1 border border-primary/20 rounded-md p-6 sm:p-8 flex flex-col"
+          whileHover={{
+            borderColor: "rgba(119, 128, 217, 0.5)",
+          }}
+          transition={{
+            duration: 0.2,
+            ease: "easeOut",
+          }}
+        >
+          {post.formattedDate && (
+            <div className="text-base font-medium tracking-[-0.9px] text-black mb-6">
+              {post.formattedDate}
+            </div>
+          )}
+          <h3 className="text-xl sm:text-2xl font-normal leading-tight tracking-tighter text-black group-hover:text-[var(--secondary)] transition-colors flex-grow">
+            <span className="font-sans font-medium tracking-[-1.5px]">
+              {post.title}
+            </span>
+          </h3>
+          {post.author && (
+            <div className="flex items-center gap-3 mt-auto pt-6">
+              {post.author.image ? (
+                <div className="relative w-10 h-10 rounded overflow-hidden shrink-0">
+                  <Image
+                    src={urlFor(post.author.image).width(80).url()}
+                    alt={post.author.name || "Author"}
+                    fill
+                    className="object-cover"
+                  />
+                </div>
+              ) : (
+                <div className="w-10 h-10 rounded-full bg-[var(--secondary)]/20 shrink-0" />
+              )}
+              <div>
+                {post.author.name && (
+                  <div className="text-base font-mono font-semibold tracking-wider text-primary uppercase">
+                    {post.author.name}
+                  </div>
+                )}
+                {post.author.title && (
+                  <div className="text-xs font-mono font-normal tracking-wider text-[#28327D] uppercase">
+                    {post.author.title}
+                  </div>
+                )}
+              </div>
+            </div>
+          )}
+        </motion.article>
+      </Link>
+    </motion.div>
+  );
+}
+