Sentiopulse · tasin2610 · Sep 18, 2025 · Sep 18, 2025
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -3,6 +3,7 @@ import "@rainbow-me/rainbowkit/styles.css";
 import { Geist, Geist_Mono } from "next/font/google";
 import "./globals.css";
 import Web3Providers from "../components/Web3Providers";
+import Navbar from "../components/Navbar/navbar";
 
 const geistSans = Geist({
   variable: "--font-geist-sans",
@@ -29,7 +30,10 @@ export default function RootLayout({
       <body
         className={`${geistSans.variable} ${geistMono.variable} antialiased`}
       >
-        <Web3Providers>{children}</Web3Providers>
+        <Web3Providers>
+          <Navbar/>
+          {children}
+          </Web3Providers>
       </body>
     </html>
   );

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -1,9 +1,9 @@
-import PostsList from "@/components/PostComponents/PostsList";
+import HomePage from "../components/HomepageComponents/HomePage"
 
-export default function HomePage() {
+export default function Allpage() {
   return (
       <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
-        <PostsList />
+        <HomePage/>
       </main>
   );
 }
diff --git a/src/components/HomepageComponents/BullishMarketCard.tsx b/src/components/HomepageComponents/BullishMarketCard.tsx
@@ -41,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-[950px] bg-gradient-to-r from-green-50 to-white border-l-green-500 border-5">
+      <Card className="flex w-[500px] h-[290px] md:w-[1000px] bg-gradient-to-r from-green-50 to-white border-l-green-500 border-l-5 pb-5">
         <CardHeader className="flex flex-col w-full">
           <div className="flex flex-row justify-between w-full">
             <CardTitle className="font-semibold">Bullish Market</CardTitle>
@@ -54,68 +54,68 @@ export default function BullishMarketCard() {
               </span>
             </CardAction>
           </div>
-          <CardDescription className="flex flex-row justify-evenly items-center gap-8 w-full mt-4">
+          <CardDescription className="flex flex-row justify-evenly items-center gap-8 w-full mt-8">
             <div className="flex flex-col">
-              <span className="text-xl font-bold text-green-500">
+              <span className="text-2xl 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">
+              <span className="text-2xl 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">
+              <span className="text-2xl 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]">
+          <div className="flex flex-col justify-start gap-0.5">
+            <div className="flex flex-row items-center w-28 justify-between mb-0.5">
               <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"
+                className="block bg-green-500 h-2 rounded-2xl transition-all"
               ></span>
-              <span className="text-muted-foreground text-xs">
+              <span className="text-muted-foreground font-semibold text-[13px] w-6 text-right ml-1">
                 {MockData.sentimentPercentages.BULLISH}%
               </span>
             </div>
-            <div className="flex flex-row items-center gap-6 w-[100px]">
+            <div className="flex flex-row items-center w-28 justify-between mb-0.5">
               <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"
+                className="block bg-gray-500 h-2 rounded-2xl transition-all"
               ></span>
-              <span className="text-muted-foreground text-xs">
+              <span className="text-muted-foreground font-semibold text-[13px] w-6 text-right ml-1">
                 {MockData.sentimentPercentages.NEUTRAL}%
               </span>
             </div>
-            <div className="flex flex-row items-center gap-6 w-[100px]">
+            <div className="flex flex-row items-center w-28 justify-between mb-0.5">
               <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"
+                className="block bg-red-500 h-2 rounded-2xl transition-all"
               ></span>
-              <span className="text-muted-foreground text-xs">
+              <span className="text-muted-foreground font-semibold text-[13px] w-6 text-right ml-1">
                 {MockData.sentimentPercentages.BEARISH}%
               </span>
             </div>
@@ -126,7 +126,7 @@ export default function BullishMarketCard() {
             <span>
               <CiCalendar size={16} className="text-gray-500" />
             </span>
-            <span className="text-muted-foreground text-xs">
+            <span className="text-muted-foreground font-semibold text-xs">
               Updated {MockData.minutesAgo} minutes ago
             </span>
           </div>

diff --git a/src/components/HomepageComponents/HomePage.tsx b/src/components/HomepageComponents/HomePage.tsx
@@ -0,0 +1,19 @@
+import PostsGallery from "./PostGallery";
+import BullishMarketCard from "./BullishMarketCard";
+import PostSearch from "./PostSearch";
+import PostFilter from "./PostFilter";
+import PostGalleryTitle from "./PostGalleryTitle";
+
+export default function HomePage() {
+  return (
+    <div>
+      <div className="flex flex-row justify-center space-x-3">
+      <PostSearch/>
+      <PostFilter/>
+      </div>
+      <BullishMarketCard />
+      <PostGalleryTitle current={2} total={2}/>
+      <PostsGallery/>
+    </div>
+  );
+}
diff --git a/src/components/HomepageComponents/PostFilter.tsx b/src/components/HomepageComponents/PostFilter.tsx
@@ -0,0 +1,14 @@
+import { CiFilter } from "react-icons/ci";
+
+export default function PostFilter() {
+  return (
+    <div className="h-10 w-20 flex flex-row gap-2 border rounded-md px-2 bg-violet-50 hover:bg-blue-500 hover:text-background">
+      <div className="flex justify-center items-center">
+        <CiFilter size={17} style={{ strokeWidth: 1 }} />
+      </div>
+      <div className="flex justify-center items-center text-md font-semibold">
+        Filter
+      </div>
+    </div>
+  );
+}
diff --git a/...components/PostComponents/PostGallery.tsx → ...onents/HomepageComponents/PostGallery.tsx b/...components/PostComponents/PostGallery.tsx → ...onents/HomepageComponents/PostGallery.tsx
@@ -4,9 +4,10 @@ import { CiChat1 } from "react-icons/ci";
 import { FaTwitter, FaLinkedin, FaReddit } from "react-icons/fa";
 import { IoIosTrendingUp, IoIosTrendingDown } from "react-icons/io";
 import { FiMinus } from "react-icons/fi";
+import { FaArrowRight } from "react-icons/fa6";
 
-import { Card, CardDescription, CardHeader, CardTitle } from "../ui/card";
-import TagRenderer from "./TagRenderer";
+import { Card, CardAction, CardDescription, CardHeader, CardTitle } from "../ui/card";
+import TagRenderer from "../PostComponents/TagRenderer";
 import type { Sentiment, Source } from "@prisma/client";
 
 type PostGroup = {
@@ -194,12 +195,18 @@ export function PostCard({ postGroup }: { postGroup: PostGroup }) {
   ];
 
   return (
-    <Card className="w-72 h-80 font-sans">
+    <Card className="w-80 h-80 font-sans transition-transform duration-200 hover:-translate-y-2 group cursor-pointer">
       <CardHeader className="p-3">
         <CardTitle className="text-sm font-semibold leading-tight mb-2">
+          <div className="flex flex-row justify-between">
+            <div className="group-hover:text-blue-500">
           {postGroup.title}
+            </div>
+            <div className="text-muted-foreground group-hover:text-blue-500">
+              <FaArrowRight/>
+            </div>
+          </div>
         </CardTitle>
-
         <CardDescription className="text-xs text-gray-600 mb-3 line-clamp-3">
           {dominantSentiment.description}
         </CardDescription>
@@ -288,7 +295,7 @@ export default function PostsGallery({
   postGroups = mockPostGroup,
 }: PostsGalleryProps) {
   return (
-    <div className="flex flex-row justify-start ml-30 gap-6 p-2">
+    <div className="flex md:flex-row justify-start md:ml-20 gap-6 p-2">
       {postGroups.map((postGroup, index) => (
         <PostCard key={index} postGroup={postGroup} />
       ))}

diff --git a/src/components/HomepageComponents/PostGalleryTitle.tsx b/src/components/HomepageComponents/PostGalleryTitle.tsx
@@ -0,0 +1,20 @@
+type PostGalleryTitleProps = {
+  current: number;
+  total: number;
+};
+
+// Removed unused topics array
+
+export default function PostGalleryTitle({
+  current,
+  total,
+}: PostGalleryTitleProps) {
+  return (
+    <div className="flex flex-row items-center justify-between font-sans mt-10 mb-5 mx-20">
+      <div className="text-2xl font-bold">Market Insights</div>
+      <div className="text-muted-foreground">
+        {current} of {total} topics
+      </div>
+    </div>
+  );
+}
diff --git a/...components/PostComponents/PostFilters.tsx → ...ponents/HomepageComponents/PostSearch.tsx b/...components/PostComponents/PostFilters.tsx → ...ponents/HomepageComponents/PostSearch.tsx
@@ -1,13 +1,11 @@
-import { Select, SelectItem } from "@/components/ui/select";
 import { Input } from "@/components/ui/input";
-import { PostSortSelect, SortField, SortOrder } from "./PostSortSelect";
 
 interface PostFiltersProps {
   search: string;
   onSearchChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
 }
 
-export default function PostFilters({
+export default function PostSearch({
   search,
   onSearchChange,
 }: PostFiltersProps) {
@@ -17,8 +15,8 @@ export default function PostFilters({
         <Input
           value={search}
           onChange={onSearchChange}
-          placeholder="Search posts..."
-          className="w-full max-w-md shadow-md rounded-lg border border-gray-200 focus:border-blue-400 focus:ring-2 focus:ring-blue-100 transition"
+          placeholder="Search posts by keyword..."
+          className="md:w-[600px] h-10 shadow-md rounded-lg bg-violet-50 border-2 focus-visible:!border-blue-500 focus:!ring-0 focus-visible:!ring-0"
         />
       </div>
     </div>

diff --git a/src/components/Navbar/navbar.tsx b/src/components/Navbar/navbar.tsx
@@ -0,0 +1,29 @@
+import { IoMdTrendingUp } from "react-icons/io";
+import { MdOutlineLightMode } from "react-icons/md";
+
+export default function Navbar() {
+  return (
+    <div className="sticky top-0 bg-transparent backdrop-blur-md w-full h-[80px] border-b-2 px-10 py-4 font-sans">
+      <div className="flex flex-row items-center justify-between">
+        <div className="flex flex-row gap-4">
+          <div className="flex items-center">
+            <div className="flex justify-center items-center bg-blue-500 h-10 w-10 text-background font-bold rounded-lg">
+              <IoMdTrendingUp size={26} />
+            </div>
+          </div>
+          <div className="flex flex-col">
+            <div className="text-2xl font-semibold text-blue-500">
+              SentioPulse
+            </div>
+            <div className="text-muted-foreground text-sm">
+              Market Sentiment Aggregation
+            </div>
+          </div>
+        </div>
+        <div className="flex justify-center items-center h-10 w-10 hover:bg-blue-500 hover:text-background hover:rounded-lg">
+          <MdOutlineLightMode size={20}/>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/PostComponents/PostSortSelect.tsx b/src/components/PostComponents/PostSortSelect.tsx
diff --git a/src/components/PostComponents/PostsList.tsx b/src/components/PostComponents/PostsList.tsx
@@ -1,12 +1,13 @@
 "use client";
 import { useEffect, useState, useRef, useCallback } from "react";
 import SentimentBar from "./SentimentBar";
-import PostFilters from "./PostFilters";
+import PostFilters from "../HomepageComponents/PostSearch";
 import { SortField, SortOrder } from "./PostSortSelect";
 import Spinner from "./Spinner";
 import type { Post } from "@prisma/client";
-import PostGallery from "./PostGallery";
+import PostGallery from "../HomepageComponents/PostGallery";
 import BullishMarketCard from "../HomepageComponents/BullishMarketCard";
+import Posr
 
 export default function PostsList() {
   const [error, setError] = useState<string | null>(null);
@@ -98,7 +99,7 @@ export default function PostsList() {
 
   return (
     <div className="mt-8">
-      <PostFilters
+      <PostSearch
         search={search}
         onSearchChange={onChangeHandler}
       />