From fb5595d9fb42546ec0bfdc2776ba60c5428915f8 Mon Sep 17 00:00:00 2001
From: Ginza Hatemi <ginzahatemi@gmail.com>
Date: Tue, 16 Sep 2025 01:38:55 -0600
Subject: [PATCH 1/2] feat: Simplify HomePage layout and add BullishMarketCard
 component

---
 src/app/page.tsx                              |   9 --
 .../HomepageComponents/BullishMarketCard.tsx  | 112 ++++++++++++++++++
 src/components/PostComponents/PostsList.tsx   |   2 +
 3 files changed, 114 insertions(+), 9 deletions(-)
 create mode 100644 src/components/HomepageComponents/BullishMarketCard.tsx

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 66c94dd..5149103 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -2,17 +2,8 @@ import PostsList from "@/components/PostComponents/PostsList";
 
 export default function HomePage() {
   return (
-    <div className="min-h-screen bg-gray-50">
-      <header className="bg-white shadow-sm border-b">
-        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-          <div className="flex justify-between items-center h-16">
-            <h1 className="text-xl font-semibold">SentioPulse</h1>
-          </div>
-        </div>
-      </header>
       <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
         <PostsList />
       </main>
-    </div>
   );
 }
diff --git a/src/components/HomepageComponents/BullishMarketCard.tsx b/src/components/HomepageComponents/BullishMarketCard.tsx
new file mode 100644
index 0000000..1b02351
--- /dev/null
+++ b/src/components/HomepageComponents/BullishMarketCard.tsx
@@ -0,0 +1,112 @@
+import {
+  Card,
+  CardAction,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "../ui/card";
+import { FaRegChartBar } from "react-icons/fa";
+import { CiCalendar } from "react-icons/ci";
+
+// Mock data representing overall sentiment and source aggregation
+const MockData = {
+  totalSourceCount: 1247, // explicit total source count for display
+  sentimentCounts: {
+    BULLISH: 812,
+    NEUTRAL: 215,
+    BEARISH: 220,
+  },
+  get sentimentPercentages(): {
+    BULLISH: number;
+    NEUTRAL: number;
+    BEARISH: number;
+  } {
+    const { BULLISH, NEUTRAL, BEARISH } = this.sentimentCounts;
+    const total = BULLISH + NEUTRAL + BEARISH;
+    return {
+      BULLISH: Math.round((BULLISH / total) * 100),
+      NEUTRAL: Math.round((NEUTRAL / total) * 100),
+      BEARISH: Math.round((BEARISH / total) * 100),
+    };
+  },
+  updatedAt: new Date('2025-09-16T09:55:00Z'), // Fixed date for SSR compatibility
+  get minutesAgo() {
+    return Math.floor((Date.now() - this.updatedAt.getTime()) / 60000);
+  },
+};
+
+export default function BullishMarketCard() {
+  return (
+    <div className="flex justify-center font-sans">
+      <Card className="flex w-[500px] h-[240px] md:w-[800px] bg-gradient-to-r from-green-50 to-white border-l-green-500">
+        <CardHeader className="flex flex-col w-full">
+          <div className="flex flex-row justify-between w-full">
+            <CardTitle className="font-semibold">Bullish Market</CardTitle>
+            <CardAction className="flex flex-row gap-1 bg-muted px-1.5 py-0.5 border rounded-2xl">
+              <span>
+                <FaRegChartBar size={14} />
+              </span>
+              <span className="font-bold text-[11px]">
+                {MockData.totalSourceCount} Sources
+              </span>
+            </CardAction>
+          </div>
+          <CardDescription className="flex flex-row justify-evenly items-center gap-8 w-full mt-4">
+            <div className="flex flex-col">
+              <span className="text-xl font-bold text-green-500">
+                {MockData.sentimentPercentages.BULLISH}%
+              </span>
+              <span className="text-xs">Bullish</span>
+            </div>
+            <div className="flex flex-col">
+              <span className="text-xl font-bold">
+                {MockData.sentimentPercentages.NEUTRAL}%
+              </span>
+              <span className="text-xs">Neutral</span>
+            </div>
+            <div className="flex flex-col">
+              <span className="text-xl font-bold text-red-500">
+                {MockData.sentimentPercentages.BEARISH}%
+              </span>
+              <span className="text-xs">Bearish</span>
+            </div>
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <div className="flex flex-col justify-start">
+            <div className="flex flex-row items-center gap-6 w-[100px]">
+              <span style={{ width: `${MockData.sentimentPercentages.BULLISH}%` }} className="bg-green-500 h-2.5 rounded-2xl"></span>
+              <span className="text-muted-foreground text-xs">
+                {MockData.sentimentPercentages.BULLISH}%
+              </span>
+            </div>
+            <div className="flex flex-row items-center gap-6 w-[100px]">
+              <span style={{ width: `${MockData.sentimentPercentages.NEUTRAL}%` }} className="bg-gray-500 h-2.5 w-10 rounded-2xl"></span>
+              <span className="text-muted-foreground text-xs">
+                {MockData.sentimentPercentages.NEUTRAL}%
+              </span>
+            </div>
+            <div className="flex flex-row items-center gap-6 w-[100px]">
+              <span style={{ width: `${MockData.sentimentPercentages.BEARISH}%` }} className="bg-red-500 h-2.5 w-10 rounded-2xl"></span>
+              <span className="text-muted-foreground text-xs">
+                {MockData.sentimentPercentages.BEARISH}%
+              </span>
+            </div>
+          </div>
+        </CardContent>
+        <CardFooter>
+          <div className="flex flex-row gap-2 items-center">
+            <span>
+              <CiCalendar size={16} className="text-gray-500" />
+            </span>
+            <span className="text-muted-foreground text-xs">
+              Updated {MockData.minutesAgo} minutes ago
+            </span>
+          </div>
+        </CardFooter>
+      </Card>
+    </div>
+  );
+}
diff --git a/src/components/PostComponents/PostsList.tsx b/src/components/PostComponents/PostsList.tsx
index ec1e560..e1a321c 100644
--- a/src/components/PostComponents/PostsList.tsx
+++ b/src/components/PostComponents/PostsList.tsx
@@ -6,6 +6,7 @@ import { SortField, SortOrder } from "./PostSortSelect";
 import Spinner from "./Spinner";
 import type { Post } from "@prisma/client";
 import PostGallery from "./PostGallery";
+import BullishMarketCard from "../HomepageComponents/BullishMarketCard";
 
 export default function PostsList() {
   const [error, setError] = useState<string | null>(null);
@@ -101,6 +102,7 @@ export default function PostsList() {
         search={search}
         onSearchChange={onChangeHandler}
       />
+      <BullishMarketCard/>
       <PostGallery/>
     </div>
   );

From 59e3b94f23b495d1fe26331c687ca2a4606db87c Mon Sep 17 00:00:00 2001
From: Ginza Hatemi <ginzahatemi@gmail.com>
Date: Tue, 16 Sep 2025 02:15:56 -0600
Subject: [PATCH 2/2] fix: Adjust layout of PostsGallery for better alignment

---
 .../HomepageComponents/BullishMarketCard.tsx  | 35 ++++++++++++++++---
 src/components/PostComponents/PostGallery.tsx |  2 +-
 2 files changed, 31 insertions(+), 6 deletions(-)

diff --git a/src/components/HomepageComponents/BullishMarketCard.tsx b/src/components/HomepageComponents/BullishMarketCard.tsx
index 1b02351..a04a68c 100644
--- a/src/components/HomepageComponents/BullishMarketCard.tsx
+++ b/src/components/HomepageComponents/BullishMarketCard.tsx
@@ -1,3 +1,4 @@
+"use client";
 import {
   Card,
   CardAction,
@@ -31,7 +32,7 @@ const MockData = {
       BEARISH: Math.round((BEARISH / total) * 100),
     };
   },
-  updatedAt: new Date('2025-09-16T09:55:00Z'), // Fixed date for SSR compatibility
+  updatedAt: new Date("2025-09-16T09:55:00Z"), // Fixed date for SSR compatibility
   get minutesAgo() {
     return Math.floor((Date.now() - this.updatedAt.getTime()) / 60000);
   },
@@ -40,7 +41,7 @@ const MockData = {
 export default function BullishMarketCard() {
   return (
     <div className="flex justify-center font-sans">
-      <Card className="flex w-[500px] h-[240px] md:w-[800px] bg-gradient-to-r from-green-50 to-white border-l-green-500">
+      <Card className="flex w-[500px] h-[240px] md:w-[950px] bg-gradient-to-r from-green-50 to-white border-l-green-500 border-5">
         <CardHeader className="flex flex-col w-full">
           <div className="flex flex-row justify-between w-full">
             <CardTitle className="font-semibold">Bullish Market</CardTitle>
@@ -77,19 +78,43 @@ export default function BullishMarketCard() {
         <CardContent>
           <div className="flex flex-col justify-start">
             <div className="flex flex-row items-center gap-6 w-[100px]">
-              <span style={{ width: `${MockData.sentimentPercentages.BULLISH}%` }} className="bg-green-500 h-2.5 rounded-2xl"></span>
+              <span
+                role="progressbar"
+                aria-label="Bullish sentiment"
+                aria-valuemin={0}
+                aria-valuemax={100}
+                aria-valuenow={MockData.sentimentPercentages.BULLISH}
+                style={{ width: `${MockData.sentimentPercentages.BULLISH}%` }}
+                className="block bg-green-500 h-2.5 rounded-2xl"
+              ></span>
               <span className="text-muted-foreground text-xs">
                 {MockData.sentimentPercentages.BULLISH}%
               </span>
             </div>
             <div className="flex flex-row items-center gap-6 w-[100px]">
-              <span style={{ width: `${MockData.sentimentPercentages.NEUTRAL}%` }} className="bg-gray-500 h-2.5 w-10 rounded-2xl"></span>
+              <span
+                role="progressbar"
+                aria-label="Neutral sentiment"
+                aria-valuemin={0}
+                aria-valuemax={100}
+                aria-valuenow={MockData.sentimentPercentages.NEUTRAL}
+                style={{ width: `${MockData.sentimentPercentages.NEUTRAL}%` }}
+                className="block bg-gray-500 h-2.5 rounded-2xl"
+              ></span>
               <span className="text-muted-foreground text-xs">
                 {MockData.sentimentPercentages.NEUTRAL}%
               </span>
             </div>
             <div className="flex flex-row items-center gap-6 w-[100px]">
-              <span style={{ width: `${MockData.sentimentPercentages.BEARISH}%` }} className="bg-red-500 h-2.5 w-10 rounded-2xl"></span>
+              <span
+                role="progressbar"
+                aria-label="Bearish sentiment"
+                aria-valuemin={0}
+                aria-valuemax={100}
+                aria-valuenow={MockData.sentimentPercentages.BEARISH}
+                style={{ width: `${MockData.sentimentPercentages.BEARISH}%` }}
+                className="block bg-red-500 h-2.5 rounded-2xl"
+              ></span>
               <span className="text-muted-foreground text-xs">
                 {MockData.sentimentPercentages.BEARISH}%
               </span>
diff --git a/src/components/PostComponents/PostGallery.tsx b/src/components/PostComponents/PostGallery.tsx
index 13fc099..c75ab9a 100644
--- a/src/components/PostComponents/PostGallery.tsx
+++ b/src/components/PostComponents/PostGallery.tsx
@@ -191,7 +191,7 @@ export default function PostsGallery({
   posts = mockPostsData,
 }: PostsGalleryProps) {
   return (
-    <div className="flex flex-row justify-center gap-6 p-2">
+    <div className="flex flex-row justify-start ml-30 gap-6 p-2">
       {posts.map((post, index) => (
         <SinglePostCard key={index} post={post} />
       ))}