chore: update devbook.md to mark completion of layout, UI components, and homepage; update dev.db

src/components/ui/Card.tsx

@@ -0,0 +1,66 @@
+import { HTMLAttributes, forwardRef } from 'react';
+
+interface CardProps extends HTMLAttributes<HTMLDivElement> {
+  hover?: boolean;
+}
+
+export const Card = forwardRef<HTMLDivElement, CardProps>(
+  ({ className = '', hover = false, children, ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        className={`
+          rounded-xl border border-border bg-card
+          ${hover ? 'transition-colors hover:bg-card-hover cursor-pointer' : ''}
+          ${className}
+        `}
+        {...props}
+      >
+        {children}
+      </div>
+    );
+  }
+);
+
+Card.displayName = 'Card';
+
+export const CardHeader = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
+  ({ className = '', ...props }, ref) => (
+    <div ref={ref} className={`p-6 pb-4 ${className}`} {...props} />
+  )
+);
+
+CardHeader.displayName = 'CardHeader';
+
+export const CardTitle = forwardRef<HTMLHeadingElement, HTMLAttributes<HTMLHeadingElement>>(
+  ({ className = '', ...props }, ref) => (
+    <h3 ref={ref} className={`text-lg font-semibold text-foreground ${className}`} {...props} />
+  )
+);
+
+CardTitle.displayName = 'CardTitle';
+
+export const CardDescription = forwardRef<HTMLParagraphElement, HTMLAttributes<HTMLParagraphElement>>(
+  ({ className = '', ...props }, ref) => (
+    <p ref={ref} className={`mt-1 text-sm text-muted ${className}`} {...props} />
+  )
+);
+
+CardDescription.displayName = 'CardDescription';
+
+export const CardContent = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
+  ({ className = '', ...props }, ref) => (
+    <div ref={ref} className={`p-6 pt-0 ${className}`} {...props} />
+  )
+);
+
+CardContent.displayName = 'CardContent';
+
+export const CardFooter = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
+  ({ className = '', ...props }, ref) => (
+    <div ref={ref} className={`flex items-center p-6 pt-0 ${className}`} {...props} />
+  )
+);
+
+CardFooter.displayName = 'CardFooter';
+