From 4e4ade4a369fc7d1f2b685af6852509a7c7d0f94 Mon Sep 17 00:00:00 2001
From: ashiii1 <aashishaik526@gmail.com>
Date: Sat, 19 Oct 2024 14:12:49 +0530
Subject: [PATCH 1/2] redirect to similar cards

---
 src/components/ExpandedCard.jsx | 56 +++++++++++++++++++++++++++++
 src/components/PostCard.jsx     |  6 ++--
 src/components/RecentPosts.jsx  | 63 +++++++++++++++++++++++++--------
 src/pages/Home.jsx              | 55 ++++++++++++++++++++--------
 4 files changed, 148 insertions(+), 32 deletions(-)
 create mode 100644 src/components/ExpandedCard.jsx

diff --git a/src/components/ExpandedCard.jsx b/src/components/ExpandedCard.jsx
new file mode 100644
index 0000000..a0b26ec
--- /dev/null
+++ b/src/components/ExpandedCard.jsx
@@ -0,0 +1,56 @@
+import Footer from "./Footer";
+
+const ExpandedCard = ({ post, similarPosts, onBack }) => {
+  return (
+    <>
+    <div className="relative min-h-screen bg-white text-black p-4">
+      {/* Back button in the top-left corner */}
+      <button
+        className="absolute top-64 left-56 text-white bg-gray-800 p-3 rounded-full"
+        onClick={onBack}
+      >
+        ← Back
+      </button>
+
+      <div className="flex flex-col items-center mt-8"> {/* Added margin-top to adjust spacing below the back button */}
+        <img
+          src={post.img}
+          alt={post.title}
+          className="w-full max-w-3xl h-auto object-cover rounded-lg mb-6"
+        />
+        <h2 className="text-3xl font-bold mb-2">{post.title}</h2>
+        <p className="text-lg text-black mb-12">
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent
+          commodo cursus magna, vel scelerisque nisl consectetur et.
+        </p>
+
+        <h3 className="text-2xl  font-bold mb-4">Similar Posts</h3>
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+          {similarPosts.map((similarPost) => (
+            <div
+              key={similarPost.id}
+              className="bg-gray-800 rounded-lg shadow-md overflow-hidden"
+            >
+              <img
+                src={similarPost.img}
+                alt={similarPost.title}
+                className="w-full h-64 object-fill object-center"
+              />
+              <div className="p-4">
+                <h4 className="text-lg text-white font-bold">{similarPost.title}</h4>
+              </div>
+            </div>
+          ))}
+        </div>
+        
+      </div>
+     
+    </div>
+    
+     <Footer/>
+    
+     </>
+  );
+};
+
+export default ExpandedCard;
diff --git a/src/components/PostCard.jsx b/src/components/PostCard.jsx
index 001a4e7..a4f53c6 100644
--- a/src/components/PostCard.jsx
+++ b/src/components/PostCard.jsx
@@ -1,12 +1,10 @@
-// import React from "react";
-
 const PostCard = ({ post }) => {
   return (
-    <div className="bg-secondary rounded-lg shadow-md overflow-hidden">
+    <div className="bg-secondary rounded-lg shadow-md overflow-hidden transition-transform duration-300 ease-in-out transform hover:scale-105 cursor-pointer"> 
       <img
         src={post.img}
         alt={post.title}
-        className="w-full h-64 object-fill object-center"
+        className="w-full h-64 object-cover" // Use object-cover for proper scaling
       />
       <div className="p-4">
         <h3 className="text-lg text-white font-bold">{post.title}</h3>
diff --git a/src/components/RecentPosts.jsx b/src/components/RecentPosts.jsx
index 425b998..f3a6819 100644
--- a/src/components/RecentPosts.jsx
+++ b/src/components/RecentPosts.jsx
@@ -1,20 +1,55 @@
-// import React from "react";
-import PostCard from "./PostCard";
-import LoadMoreButton from "./LoadMoreButton";
+// // import React from "react";
+// import PostCard from "./PostCard";
+// import LoadMoreButton from "./LoadMoreButton";
 
-const RecentPosts = ({ posts }) => {
+// const RecentPosts = ({ posts }) => {
+//   return (
+//     <section className="container mx-auto px-4 py-12">
+//       <h2 className="text-2xl text-white font-semibold mb-8">
+//         Recent blog posts
+//       </h2>
+//       <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+//         {posts.map((post) => (
+//           <PostCard key={post.id} post={post} />
+//         ))}
+//       </div>
+//       <LoadMoreButton />
+//     </section>
+//   );
+// };
+
+// export default RecentPosts;
+
+const RecentPosts = ({ blogPosts, onCardClick }) => {
   return (
-    <section className="container mx-auto px-4 py-12">
-      <h2 className="text-2xl text-white font-semibold mb-8">
-        Recent blog posts
-      </h2>
-      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
-        {posts.map((post) => (
-          <PostCard key={post.id} post={post} />
-        ))}
+    <div className="py-12">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="lg:text-center">
+        
+        </div>
+
+        <div className="mt-10 grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
+          {blogPosts.map((post) => (
+            <div
+              key={post.id}
+              className="relative rounded-lg shadow-lg overflow-hidden cursor-pointer"
+              onClick={() => onCardClick(post)} // Handle card click
+            >
+              <img
+                src={post.img}
+                alt={post.title}
+                className="w-full h-64 object-cover object-center"
+              />
+              <div className="p-6">
+                <h3 className="text-lg font-bold">{post.title}</h3>
+                <p className="mt-2 text-gray-600">{post.author}</p>
+                <p className="mt-1 text-sm text-gray-500">{post.date}</p>
+              </div>
+            </div>
+          ))}
+        </div>
       </div>
-      <LoadMoreButton />
-    </section>
+    </div>
   );
 };
 
diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx
index c43fc63..9ecfb1a 100644
--- a/src/pages/Home.jsx
+++ b/src/pages/Home.jsx
@@ -1,26 +1,24 @@
+import  { useState } from "react";
 import Footer from "../components/Footer";
 import HeroSection from "../components/HeroSection";
 import RecentPosts from "../components/RecentPosts";
+import ExpandedCard from "../components/ExpandedCard"; 
 
 const Home = () => {
   const heroPosts = [
     {
-      title:
-        "Breaking Into Product Design: Advice from Untitled Founder, Frankie",
-      description:
-        "Learn key strategies to break into the product design field with insights from Frankie.",
+      title: "Breaking Into Product Design: Advice from Untitled Founder, Frankie",
+      description: "Learn key strategies to break into the product design field with insights from Frankie.",
       img: "https://images.unsplash.com/photo-1651066471224-b970dd45acc3?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
     },
     {
       title: "Mastering UX Design: Tips from Industry Experts",
-      description:
-        "Discover how leading UX designers build intuitive experiences.",
+      description: "Discover how leading UX designers build intuitive experiences.",
       img: "https://plus.unsplash.com/premium_photo-1681755915233-9acafb348a7f?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
     },
     {
       title: "The Importance of Wireframing in UX Design",
-      description:
-        "How wireframing can streamline your design process and improve outcomes.",
+      description: "How wireframing can streamline your design process and improve outcomes.",
       img: "https://images.unsplash.com/photo-1657639466571-15adb5ab7bea?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
     },
   ];
@@ -68,18 +66,47 @@ const Home = () => {
       date: "Mar 10, 2020",
       img: "https://plus.unsplash.com/premium_photo-1727537538673-07a31d71efe3?q=80&w=1932&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
     },
-    // More posts...
   ];
 
+  // State to track the selected post
+  const [selectedPost, setSelectedPost] = useState(null);
+
+  // Handle card click
+  const handleCardClick = (post) => {
+    setSelectedPost(post);
+  };
+
+  // Handle back button click
+  const handleBackClick = () => {
+    setSelectedPost(null);
+  };
+
+  // Get similar posts (for simplicity, we'll just filter out the selected one)
+  const getSimilarPosts = (selectedPost) => {
+    return blogPosts.filter((post) => post.id !== selectedPost.id).slice(0, 3);
+  };
+
   return (
     <div className="bg-background min-h-screen">
-      {/* Hero Section with multiple posts */}
-      <HeroSection posts={heroPosts} />
+      {/* If a post is selected, show the ExpandedCard */}
+      {selectedPost ? (
+        <ExpandedCard
+          post={selectedPost}
+          similarPosts={getSimilarPosts(selectedPost)}
+          onBack={handleBackClick}
+        />
+      ) : (
+        <>
+          {/* Hero Section */}
+          <HeroSection posts={heroPosts} />
 
-      {/* Recent Blog Posts */}
-      <RecentPosts posts={blogPosts} />
+          {/* Recent Posts Section */}
+          <RecentPosts blogPosts={blogPosts} onCardClick={handleCardClick} />
 
-      <Footer />
+          {/* Footer */}
+          <Footer />
+        </>
+      )}
     </div>
   );
 };

From 7a9420976b4ba75228a1cd0d29041777b9a43ecc Mon Sep 17 00:00:00 2001
From: ashiii1 <aashishaik526@gmail.com>
Date: Sat, 19 Oct 2024 17:45:52 +0530
Subject: [PATCH 2/2] resolving conflicts

---
 src/components/RecentPosts.jsx | 22 ----------------------
 1 file changed, 22 deletions(-)

diff --git a/src/components/RecentPosts.jsx b/src/components/RecentPosts.jsx
index f3a6819..08d965d 100644
--- a/src/components/RecentPosts.jsx
+++ b/src/components/RecentPosts.jsx
@@ -1,25 +1,3 @@
-// // import React from "react";
-// import PostCard from "./PostCard";
-// import LoadMoreButton from "./LoadMoreButton";
-
-// const RecentPosts = ({ posts }) => {
-//   return (
-//     <section className="container mx-auto px-4 py-12">
-//       <h2 className="text-2xl text-white font-semibold mb-8">
-//         Recent blog posts
-//       </h2>
-//       <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
-//         {posts.map((post) => (
-//           <PostCard key={post.id} post={post} />
-//         ))}
-//       </div>
-//       <LoadMoreButton />
-//     </section>
-//   );
-// };
-
-// export default RecentPosts;
-
 const RecentPosts = ({ blogPosts, onCardClick }) => {
   return (
     <div className="py-12">