feat: Updated Home Page UI successfully Issue 4

frontend/src/index.css

@@ -3,5 +3,5 @@
 @tailwind utilities;
 
 #root {
-    @apply min-h-screen bg-[#000435]
-}
+  @apply min-h-screen bg-[#000435];
+}

frontend/src/pages/Home.tsx

@@ -1,22 +1,40 @@
 import { Link } from "react-router-dom";
+import hero from "../assets/hero.png";
+import bgHero from "../assets/bgHero.png";
+import '../styles/hero.css'
 
 function Home() {
   return (
-    <div className="max-w-screen-xl mx-auto px-4 py-8 text-white">
-      <div className="grid grid-cols-1 md:grid-cols-2 gap-8 items-center justify-center">
-        <div>
-          <h1 className="text-6xl font-bold mb-4">Welcome to Style Share</h1>
-          <p className="text-xl  mb-6">
-            A simple web based platform where users can easily create, explore,
-            and share Tailwind CSS components and designs with fellow users.
-          </p>
-          <button className="bg-blue-700 text-white py-2 px-4 rounded-md hover:bg-blue-600">
-            <Link to="/app/posts">Explore</Link>
-          </button>
-        </div>
-        {/* <div className="h-58 w-45 bg-red"></div> */}
-        <div className="hidden md:block">
-          <img src={"https://img.freepik.com/free-vector/hand-drawn-web-developers_23-2148819604.jpg?w=996&t=st=1717153877~exp=1717154477~hmac=e1058df089e7d3f064f8e2a261e53f09f5aac845bf99095fcd7bf80767d31fa1"} alt="Code" className="rounded-lg shadow-lg shadow-blue-500/50 w-144" />
+    <div className="min-h-screen bg-[#000435] text-white" style={{ backgroundImage: `url(${bgHero})`, backgroundSize: 'cover', backgroundPosition: 'center' }}>
+      <div className="max-w-screen-xl mx-auto px-4 py-8">
+        <div className="grid grid-cols-1 md:grid-cols-2 items-center justify-center">
+          <div>
+            <h1 className="text-6xl font-extrabold mb-4 leading-tight">👋 Welcome to Style Share</h1>
+            <h6 className="text-xl mb-3 text-gray-400">
+              A simple web-based platform where users can easily <br/>
+            </h6>
+            <div className="text-xl mb-3 text-gray-400">
+              <span > ✅ create</span><br/>
+              <span> ✅ explore</span><br/>
+              <span> ✅ share</span><br/>
+            </div>
+            <h6 className="text-xl mb-6 text-gray-400">
+            Tailwind CSS components and designs with fellow users.<br/>
+            </h6>
+            <Link
+              to="/app/posts"
+              className="inline-block bg-gradient-to-r from-blue-700 to-blue-500 hover:from-blue-600 hover:to-blue-400 text-white py-3 px-6 rounded-md shadow-md transition-transform transform hover:-translate-y-1 hover:shadow-lg"
+            >
+              Explore Now
+            </Link>
+          </div>
+          <div className="md:block">
+            <img
+              src={hero}
+              alt="Code"
+              className="imgAnimate w-full"
+            />
+          </div>
         </div>
       </div>
     </div>

frontend/src/pages/Posts.tsx

@@ -12,6 +12,9 @@ const Posts = () => {
   const [tagInput, setTagInput] = useState('');
   const [filterTags, setFilterTags] = useState<string[]>([]);
   const filterRef = useRef<HTMLDivElement>(null);
+  const [searchQuery, setSearchQuery] = useState('');
+  const [currentPage, setCurrentPage] = useState(1);
+  const postsPerPage = 9;
 
   useEffect(() => {
     const fetchPosts = async () => {
@@ -64,11 +67,33 @@ const Posts = () => {
   };
 
   const filteredPosts = posts.filter(post =>
-    filterTags.every(tag => post.tags.map(t => t.toLowerCase()).includes(tag))
+    filterTags.every(tag => post.tags.map(t => t.toLowerCase()).includes(tag)) &&
+    (post.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
+     post.description.toLowerCase().includes(searchQuery.toLowerCase()) ||
+     post.author.username.toLowerCase().includes(searchQuery.toLowerCase()))
   );
 
+  const totalPages = Math.ceil(filteredPosts.length / postsPerPage);
+
+  const currentPosts = filteredPosts.slice(
+    (currentPage - 1) * postsPerPage,
+    currentPage * postsPerPage
+  );
+
+  const handlePreviousPage = () => {
+    if (currentPage > 1) {
+      setCurrentPage(currentPage - 1);
+    }
+  };
+
+  const handleNextPage = () => {
+    if (currentPage < totalPages) {
+      setCurrentPage(currentPage + 1);
+    }
+  };
+
   if (loading) {
-    return <Loader/>;
+    return <Loader />;
   }
 
   if (error) {
@@ -126,12 +151,44 @@ const Posts = () => {
             </div>
           </div>
         )}
+        <input
+          type="text"
+          value={searchQuery}
+          onChange={(e) => setSearchQuery(e.target.value)}
+          placeholder="🔍 Search anything"
+          className="p-2 w-full max-w-xs rounded-md bg-gray-700 text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
+        />
       </div>
       <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4 w-full">
-        {filteredPosts.map((post) => (
-          <PostCard post={post} />
+        {currentPosts.map((post, index) => (
+          <PostCard key={index} post={post} />
         ))}
       </div>
+      <div className="flex justify-center items-center mt-4">
+        <button
+          onClick={handlePreviousPage}
+          disabled={currentPage === 1}
+          className={`px-4 py-2 mx-1 text-white rounded ${currentPage === 1 ? 'bg-gray-600 cursor-not-allowed' : 'bg-blue-600 hover:bg-blue-700'}`}
+        >
+          Previous
+        </button>
+        {[...Array(totalPages)].map((_, index) => (
+          <button
+            key={index}
+            onClick={() => setCurrentPage(index + 1)}
+            className={`px-4 py-2 mx-1 text-white rounded ${currentPage === index + 1 ? 'bg-blue-500' : 'bg-blue-600 hover:bg-blue-700'}`}
+          >
+            {index + 1}
+          </button>
+        ))}
+        <button
+          onClick={handleNextPage}
+          disabled={currentPage === totalPages}
+          className={`px-6 py-2 mx-1 text-white rounded ${currentPage === totalPages ? 'bg-gray-600 cursor-not-allowed' : 'bg-blue-600 hover:bg-blue-700'}`}
+        >
+          Next
+        </button>
+      </div>
     </div>
   );
 };

frontend/src/styles/hero.css

@@ -0,0 +1,15 @@
+.imgAnimate {
+  animation: float 5s ease-in-out infinite;
+}
+
+@keyframes float {
+  0% {
+    transform: translatey(0px);
+  }
+  50% {
+    transform: translatey(30px);
+  }
+  100% {
+    transform: translatey(0px);
+  }
+}