add stories, mission and projects with tabs

components/cards/ProjectCardNew.tsx

@@ -0,0 +1,54 @@
+// @ts-nocheck
+
+import React from 'react';
+import { readexPro } from '~/elements/fonts';
+
+
+const statusColors: Record<string, string> = {
+  done: '🟢',
+  'in progress': '🟡',
+  submitted: '🔵',
+  concept: '⚪',
+};
+
+export const ProjectCardNew = ({
+  title,
+  description,
+  image,
+  agent,
+  status,
+}: {
+  title: string;
+  description: string;
+  image?: string | null;
+  agent?: string;
+  status?: 'done' | 'in progress' | 'submitted' | 'concept';
+}) => (
+  <div className="border border-primary/30 bg-black/60 rounded-md p-4 w-full max-w-sm m-2 cursor-pointer outline outline-1 outline-primary/40 hover:outline-cyan transition-all">
+    {image ? (
+      <div className="w-full h-40 bg-gray-800 rounded-md overflow-hidden mb-3">
+        <img src={image} alt="project" className="object-cover w-full h-full" />
+      </div>
+    ) : (
+      <div className="w-full h-40 bg-gray-800 rounded-md mb-3" />
+    )}
+
+    <h3 className={`${readexPro.className} text-white text-lg font-semibold mb-1`}>
+      {title}
+    </h3>
+
+    {agent && (
+      <p className="text-sm text-gray-400 mb-1">
+        Agent: <span className="text-white">{agent}</span>
+      </p>
+    )}
+
+    {status && (
+      <p className="text-sm mb-2">
+        Status: <span>{statusColors[status.toLowerCase()] || '⚪'} {status}</span>
+      </p>
+    )}
+
+    <p className="text-sm text-gray-300">{description}</p>
+  </div>
+);

components/cards/StoryCard.tsx

@@ -0,0 +1,65 @@
+import React from 'react';
+import Image from 'next/image';
+import { readexPro } from '~/elements/fonts';
+import { DynamicIcon } from '~/elements';
+
+export const StoryCard = ({
+  avatar,
+  username,
+  title,
+  company,
+  time,
+  content,
+  image,
+  onPress,
+}: any) => {
+  return (
+    <div
+      className="border border-primary/30 hover:outline hover:outline-2 hover:outline-primary/60 transition-all bg-black/70 rounded-md p-4 mb-6 max-w-2xl w-full cursor-pointer"
+      onClick={onPress}
+    >
+      <div className="flex items-start gap-4 mb-2">
+        <div className="w-12 h-12 rounded-full bg-gray-500 overflow-hidden">
+          {avatar ? (
+            <Image src={avatar} alt="avatar" width={48} height={48} />
+          ) : (
+            <div className="w-full h-full bg-gray-600" />
+          )}
+        </div>
+        <div className="flex flex-col">
+          <span className={`${readexPro.className} text-white font-semibold`}>{username}</span>
+          <span className="text-sm text-gray-400">{company} • {time}</span>
+        </div>
+      </div>
+      <div className={`${readexPro.className} text-white text-md mb-3`}>
+        {title}
+      </div>
+      <div className="text-gray-300 text-sm mb-3 line-clamp-4">
+        {content}
+      </div>
+      {image && (
+        <div className="w-full h-60 bg-gray-800 relative rounded-md overflow-hidden">
+          <Image src={image} alt="post" fill className="object-cover" />
+        </div>
+      )}
+      <div className="flex justify-between mt-4 text-sm text-gray-400">
+        <div className="flex flex-col items-center">
+          <button onClick={(e)=>{e.stopPropagation()}} className="hover:text-white border border-transparent hover:border-cyan px-4 py-1 rounded transition-all">
+            Like
+          </button>
+        </div>
+        <div className="flex flex-col items-center">
+          <button onClick={(e)=>{e.stopPropagation()}} className="hover:text-white border border-transparent hover:border-cyan px-4 py-1 rounded transition-all">
+            Comment
+          </button>
+        </div>
+        <div className="flex flex-col items-center">
+          <button onClick={(e)=>{e.stopPropagation()}} className="hover:text-white border border-transparent hover:border-cyan px-4 py-1 rounded transition-all">
+            Share
+          </button>
+        </div>
+      </div>
+
+    </div>
+  );
+};

components/cards/index.tsx

@@ -1,5 +1,7 @@
 export * from './HexagonalCard'
 export * from './BaseCard'
+export * from './StoryCard'
+export * from './ProjectCardNew'
 export * from './CarmelCard'
 export * from './ChallengeCard'
 export * from './AssetGroupCard'

screens/ListScreen.tsx

@@ -12,6 +12,38 @@ import { useCarmel } from '~/sdk';
 import Link from 'next/link';
 import { Tabs } from '~/elements';
 
+
+const mockItems = [
+  {
+    title: "How to Build a Full-Stack App",
+    intro: "An easy-to-follow guide to building scalable full-stack applications using Next.js and Firebase.",
+    username: "devguru",
+    author: "Alex Dev",
+    project: "FullStackProject",
+    community: "CodeMasters",
+    tags: ["Next.js", "Firebase", "WebDev"],
+    shortIntro: true,
+    highlight: true,
+    banner: "'https://picsum.photos/seed/sample/600/300'", // or null
+    avatar: null,
+    onItemPress: "route:/id",
+  },
+  {
+    title: "Designing Scalable UI Systems",
+    intro: "Learn how to use Tailwind CSS and component libraries to create scalable UIs.",
+    username: "uidesigner",
+    author: "Emily Design",
+    project: "DesignKit",
+    community: "UIHub",
+    tags: ["Tailwind", "Design", "UX"],
+    shortIntro: false,
+    highlight: false,
+    banner: "'https://picsum.photos/seed/sample/600/300'",
+    avatar: null,
+    onItemPress: "route:/id",
+  },
+];
+
 const List = ({ items, wide, isLoading, card, section, containerClasses, shortIntro, onItemPress, actionTitle, placeholder, highlight }: any) => {
   const ListPlaceholder = placeholder
   const Card = card
@@ -87,7 +119,7 @@ export const ListScreen = ({ auth, nodes, sections = [], mainAction, onItemPress
   const MainCard = () => {
     let sec = section()
 
-    return card || sec.card
+    return <div/>
   }
 
   const getItems = () => {
@@ -141,11 +173,11 @@ export const ListScreen = ({ auth, nodes, sections = [], mainAction, onItemPress
             <TabBar/>
             <List 
               nodes={nodes}
-              items={getItems()}
+              items={mockItems}
               wide={wide}
               highlight={highlight}
-              isLoading={carmel.isLoading}
-              card={MainCard()}
+              isLoading={false}
+              card={BaseCard}
               containerClasses={containerClasses}
               shortIntro
               section={MainSection()}