feat: Updated Home Page UI, Added About US, Added Recent 6 Posts from pagination API successfully Issue 4

frontend/src/pages/About.tsx

@@ -0,0 +1,37 @@
+import { Link } from "react-router-dom";
+import about from '../assets/about.png'
+import bgHero from "../assets/bgHero.png";
+
+function About() {
+  return (
+    <div className="w-full bg-[#000435] py-16 px-4" style={{ backgroundImage: `url(${bgHero})`, backgroundSize: 'cover', backgroundPosition: 'center' }}>
+      <div className="max-w-[1240px] mx-auto grid md:grid-cols-2">
+        <img className="w-[550px] mx-auto my-4" src={about} alt="About Us" />
+        <div className="flex flex-col justify-center">
+          <p className="bg-gradient-to-r from-blue-600 via-blue-500 to-white inline-block text-transparent bg-clip-text text-4xl font-bold py-1" >👨‍💻 About Style Share</p>
+          <h1 className='md:text-4xl sm:text-3xl font-bold py-4'>Unleashing Creativity - Tailwind CSS</h1>
+          <p className="text-lg text-gray-300  text-justify" >
+            💁‍♂️ Our mission is to make the design process more accessible and efficient for everyone. 
+            Whether you are a seasoned developer looking for inspiration or a beginner taking your first steps into the world of web design, our platform offers a wealth of resources tailored to your needs.          
+          </p>
+          <p className='md:text-3xl sm:text-3xl text-2xl font-bold py-4'>🤔 How it Works !</p>
+          <p className="text-lg text-gray-300" >
+              <span> ✅ Search any component with search bar from various developers.</span><br/>
+              <span> ✅ contribute to open source for more tailwind components.</span><br/>
+              <span> ✅ Create your own component to help other developers.</span><br/>
+              <span> ✅ Create posts from New Posts section.</span><br/>
+              <span> ✅ And that's it you are ready to go.</span><br/>
+              <span> ✅ Other features coming soon.</span><br/>
+            </p>
+            <Link
+              to="/app/posts"
+              className=' 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 w-[150px] text-center font-medium my-6 mx-auto md:mx-0'            >
+              Explore Now
+            </Link>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default About;

frontend/src/pages/Home.tsx

@@ -1,26 +1,37 @@
 import { Link } from "react-router-dom";
+import hero from "../assets/hero.png";
+import bgHero from "../assets/bgHero.png";
+import '../styles/hero.css'
+import About from "./About";
+import HomePagePost from "./HomePagePosts";
 
 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="w-full bg-[#000435] py-16 px-4" style={{ backgroundImage: `url(${bgHero})`, backgroundSize: 'cover', backgroundPosition: 'center' }}>
+      <div className="max-w-[1240px] mx-auto grid md:grid-cols-2">
+        <div className="flex flex-col justify-center">
+        <h1 className="text-6xl font-extrabold leading-tight pb-3">👋 Welcome to <span className="bg-gradient-to-r from-blue-600 via-blue-500 to-white inline-block text-transparent bg-clip-text">Style Share !</span></h1>
+          <h1 className='md:text-3xl sm:text-3xl font-medium py-2'>A simple web-based platform where users can easily</h1>
+          <p className="text-lg text-gray-300 font-semibold" >
+          <span> ✅ Contribute</span><br/>
+              <span> ✅ Create</span><br/>
+              <span> ✅ Explore</span><br/>
+              <span> ✅ Share</span><br/>
+            </p>
+            <Link
+              to="/app/posts"
+              className=' 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 w-[150px] text-center font-medium my-6 mx-auto md:mx-0'            >
+              Explore Now
+            </Link>
         </div>
+        <img className="w-[600px] imgAnimate" src={hero} alt="About Us" />
       </div>
     </div>
+      <About/>
+      <HomePagePost/>
+    </div>
   );
 }
 
-export default Home;
+export default Home;

frontend/src/pages/HomePagePosts.tsx

@@ -0,0 +1,48 @@
+import { useEffect, useState } from 'react';
+import axios from 'axios';
+import { IPost } from '../types';
+import Loader from '../components/Loader';
+import PostCard from '../components/PostCard';
+
+const HomePagePost = () => {
+  const [posts, setPosts] = useState<IPost[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState('');
+
+  useEffect(() => {
+    const fetchPosts = async () => {
+      try {
+        setLoading(true);
+        const response = await axios.get('/api/v1/posts?page=1&pageSize=-6');
+        setPosts(response.data.posts.reverse());
+        setLoading(false);
+      } catch (error) {
+        setError('Failed to fetch posts');
+        setLoading(false);
+      }
+    };
+
+    fetchPosts();
+  }, []);
+
+  if (loading) {
+    return <Loader />;
+  }
+
+  if (error) {
+    return <div className='text-red-500 font-semibold text-lg text-center'>{error}</div>;
+  }
+
+  return (
+    <div className='max-w-screen-xl flex flex-col items-center justify-center mx-auto p-4'>
+      <h1 className="text-3xl font-semibold my-4 text-white">📃 Recent Posts Added</h1>
+      <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4 w-full my-10">
+        {posts.map((post, index) => (
+          <PostCard key={index} post={post} />
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default HomePagePost;

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(15px);
+  }
+  100% {
+    transform: translatey(0px);
+  }
+}