feature(public,docs): new public website and docs

apps/public/components/twitter-card.tsx

@@ -0,0 +1,88 @@
+import {
+  BadgeIcon,
+  CheckCheckIcon,
+  CheckIcon,
+  HeartIcon,
+  MessageCircleIcon,
+  RefreshCwIcon,
+} from 'lucide-react';
+import Image from 'next/image';
+
+interface TwitterCardProps {
+  avatarUrl?: string;
+  name: string;
+  handle: string;
+  content: React.ReactNode;
+  replies?: number;
+  retweets?: number;
+  likes?: number;
+  verified?: boolean;
+}
+
+export function TwitterCard({
+  avatarUrl,
+  name,
+  handle,
+  content,
+  replies = 0,
+  retweets = 0,
+  likes = 0,
+  verified = false,
+}: TwitterCardProps) {
+  const renderContent = () => {
+    if (typeof content === 'string') {
+      return <p className="text-muted-foreground">{content}</p>;
+    }
+
+    if (Array.isArray(content) && typeof content[0] === 'string') {
+      return content.map((line) => <p key={line}>{line}</p>);
+    }
+
+    return content;
+  };
+
+  return (
+    <div className="border rounded-lg p-4 col gap-4 bg-background-light">
+      <div className="row gap-4">
+        <div className="size-12 rounded-full bg-muted overflow-hidden shrink-0">
+          {avatarUrl && (
+            <img src={avatarUrl} alt={name} width={48} height={48} />
+          )}
+        </div>
+        <div className="col gap-1">
+          <div className="col">
+            <div className="row gap-2 items-center">
+              <span className="font-medium">{name}</span>
+              {verified && (
+                <div className="relative">
+                  <BadgeIcon className="size-4 fill-[#1D9BF0] text-[#1D9BF0]" />
+                  <div className="absolute inset-0 center-center">
+                    <CheckIcon className="size-2 text-white" strokeWidth={3} />
+                  </div>
+                </div>
+              )}
+            </div>
+            <span className="text-muted-foreground text-sm leading-0">
+              @{handle}
+            </span>
+          </div>
+          {renderContent()}
+          <div className="row gap-4 text-muted-foreground text-sm mt-4">
+            <div className="row gap-2">
+              <MessageCircleIcon className="transition-all size-4 fill-background hover:fill-blue-500 hover:text-blue-500" />
+              {/* <span>{replies}</span> */}
+            </div>
+            <div className="row gap-2">
+              <RefreshCwIcon className="transition-all size-4 fill-background hover:text-emerald-500" />
+              {/* <span>{retweets}</span> */}
+            </div>
+            <div className="row gap-2">
+              <HeartIcon className="transition-all size-4 fill-background hover:fill-rose-500 hover:text-rose-500" />
+              {/* <span>{likes}</span> */}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}