From 036d6b6c0d384e33c699f49b0afa5e4e41a71dd7 Mon Sep 17 00:00:00 2001
From: ShamzX0 <posp.petrr@gmail.com>
Date: Wed, 12 Mar 2025 11:42:48 +0900
Subject: [PATCH 1/5] fix: feature cards dark theme styling

---
 .../src/components/LandingPage/Features.tsx   | 20 ++++++++++++-------
 1 file changed, 13 insertions(+), 7 deletions(-)

diff --git a/frontend/src/components/LandingPage/Features.tsx b/frontend/src/components/LandingPage/Features.tsx
index 8ea5e6fd..e2a6ea14 100644
--- a/frontend/src/components/LandingPage/Features.tsx
+++ b/frontend/src/components/LandingPage/Features.tsx
@@ -14,7 +14,9 @@ const Features = () => {
     >
 
       {/* Card 1 */}
-      <div className="w-[19rem] lg:w-[26rem] h-[100%] pb-3 bg-black z-10 relative rounded-2xl">
+      <div className={`w-[19rem] lg:w-[26rem] h-[100%] pb-3 z-10 relative rounded-2xl 
+  ${isDarkMode ? "bg-white" : "bg-black"}`}>
+
         <div className={`border-2 border-current z-20 w-[18.5rem] lg:w-[25rem] lg:py-16 lg:px-10 rounded-2xl lg:shadow-custom shadow-custom2 mb-3 p-8 ${isDarkMode ? "bg-black text-white" : "bg-white text-black"
           }`}>
           <div className="flex">
@@ -23,7 +25,7 @@ const Features = () => {
               width={40}
               height={40}
               alt=""
-              className="lg:w-[40px] w-6"
+              className={`lg:w-[40px] w-6 ${isDarkMode ? "invert" : ""}`}
             />
             <p className="font-semibold lg:py-5 p-1">
               Transparent Marketplace
@@ -36,8 +38,10 @@ const Features = () => {
       </div>
 
       {/* Card 2 */}
-      <div className="w-[19rem] lg:w-[26rem] h-[100%] pb-3 bg-black z-10 relative rounded-2xl">
-        <div className={`border-2 border-current z-20 w-[18.5rem] lg:w-[25rem] lg:py-16 lg:px-10 rounded-2xl lg:shadow-custom shadow-custom2 mb-3 p-8 ${isDarkMode ? "bg-black text-white" : "bg-white text-black"
+      <div className={`w-[19rem] lg:w-[26rem] h-[100%] pb-3 z-10 relative rounded-2xl 
+  ${isDarkMode ? "bg-white" : "bg-black"}`}>
+
+        <div className={`border-2 border-current z-20 w-[18.5rem] lg:w-[25rem] lg:py-16 lg:px-10 rounded-2xl  lg:shadow-custom shadow-custom2 mb-3 p-8 ${isDarkMode ? "bg-black text-white" : "bg-white text-black"
           }`}>
           <div className="flex">
             <Image
@@ -45,7 +49,7 @@ const Features = () => {
               width={40}
               height={40}
               alt=""
-              className="lg:w-[40px] w-6"
+              className={`lg:w-[40px] w-6 ${isDarkMode ? "invert" : ""}`}
             />
             <p className="font-semibold lg:py-5 p-1">
               User-Centric Interface
@@ -59,7 +63,9 @@ const Features = () => {
 
 
       {/* Card 3 */}
-      <div className="w-[19rem] lg:w-[26rem] h-[100%] pb-3 bg-black z-10 relative rounded-2xl">
+      <div className={`w-[19rem] lg:w-[26rem] h-[100%] pb-3 z-10 relative rounded-2xl 
+  ${isDarkMode ? "bg-white" : "bg-black"}`}>
+
         <div className={`border-2 border-current z-20 w-[18.5rem] lg:w-[25rem] lg:py-16 lg:px-10 rounded-2xl lg:shadow-custom shadow-custom2 mb-3 p-8 ${isDarkMode ? "bg-black text-white" : "bg-white text-black"
           }`}>
           <div className="flex items-center">
@@ -68,7 +74,7 @@ const Features = () => {
               width={40}
               height={40}
               alt=""
-              className="lg:w-[40px] lg:h-[40px] w-6"
+              className={`lg:w-[40px] w-6 ${isDarkMode ? "invert" : ""}`}
             />
             <p className="font-semibold lg:py-5 p-1">
               Transparent Marketplace

From fb97a0d9981ffe028c48a7d72ff9d395861a23da Mon Sep 17 00:00:00 2001
From: ShamzX0 <posp.petrr@gmail.com>
Date: Wed, 12 Mar 2025 12:48:26 +0900
Subject: [PATCH 2/5] fix: about us dark theme styling

---
 frontend/src/components/LandingPage/About.tsx | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/LandingPage/About.tsx b/frontend/src/components/LandingPage/About.tsx
index 7f77279e..d177036d 100644
--- a/frontend/src/components/LandingPage/About.tsx
+++ b/frontend/src/components/LandingPage/About.tsx
@@ -1,8 +1,17 @@
 import { MoveDownRight } from "lucide-react";
+import { useContext } from "react";
+import { DarkModeContext } from "./DarkMode";
 
 const About = () => {
+  const { isDarkMode } = useContext(DarkModeContext);
+
   return (
-    <div className="bg-gradient-to-br from-black to-gray-900 rounded-2xl px-8 w-full mx-auto text-white shadow-lg">
+    <div
+      className={`rounded-2xl px-8 w-full mx-auto shadow-lg ${isDarkMode
+        ? "bg-gradient-to-br from-white to-gray-100 text-black"
+        : "bg-gradient-to-br from-black to-gray-900 text-white"
+        }`}
+    >
       <details className="mb-4 cursor-pointer group py-10 border-b border-gray-700">
         <summary className="lg:text-3xl font-light flex justify-between items-center text-base">
           Gradual Liquidation Process

From 4760eacc7250eccfca2ab4bc61d8872fdccdf9df Mon Sep 17 00:00:00 2001
From: ShamzX0 <posp.petrr@gmail.com>
Date: Wed, 12 Mar 2025 12:51:05 +0900
Subject: [PATCH 3/5] refactor: dropdown arrow animation

---
 frontend/src/components/LandingPage/About.tsx | 58 ++++++++++++++++---
 1 file changed, 49 insertions(+), 9 deletions(-)

diff --git a/frontend/src/components/LandingPage/About.tsx b/frontend/src/components/LandingPage/About.tsx
index d177036d..00a4dba4 100644
--- a/frontend/src/components/LandingPage/About.tsx
+++ b/frontend/src/components/LandingPage/About.tsx
@@ -13,9 +13,19 @@ const About = () => {
         }`}
     >
       <details className="mb-4 cursor-pointer group py-10 border-b border-gray-700">
-        <summary className="lg:text-3xl font-light flex justify-between items-center text-base">
+        <summary className="lg:text-3xl tracking-wide font-light flex justify-between items-center text-base">
           Gradual Liquidation Process
-          <MoveDownRight className="group-open:rotate-[45deg] w-[50px] lg:w-[60px] transition-transform" size={60} color="#fff" strokeWidth={1.25} />
+          <MoveDownRight
+            className="group-open:rotate-[85deg] 
+                 group-open:scale-50 
+                 w-[50px] 
+                 lg:w-[60px] 
+                 transition-transform 
+                 duration-800 
+                 ease-in-out"
+            size={60}
+            strokeWidth={1.25}
+          />
         </summary>
         <p className="mt-2 ml-4 lg:text-xl font-thin font-opensans text-sm">
           To ensure fair market value for collateral, our platform employs limit
@@ -26,9 +36,19 @@ const About = () => {
       </details>
 
       <details className="mb-4 cursor-pointer group py-10 border-b border-gray-700">
-        <summary className="lg:text-3xl tracking-wide font-extralight flex justify-between items-center text-base">
+        <summary className="lg:text-3xl tracking-wide font-light flex justify-between items-center text-base">
           Dynamic Proposal System
-          <MoveDownRight className="group-open:rotate-[45deg] w-[50px] lg:w-[60px] transition-transform" size={60} color="#fff" strokeWidth={1.25} />
+          <MoveDownRight
+            className="group-open:rotate-[85deg] 
+                 group-open:scale-50 
+                 w-[50px] 
+                 lg:w-[60px] 
+                 transition-transform 
+                 duration-800 
+                 ease-in-out"
+            size={60}
+            strokeWidth={1.25}
+          />
         </summary>
         <p className="mt-2 ml-4 lg:text-xl font-thin font-opensans text-sm">
           Users on our platform have the ability to create proposals for lending
@@ -43,9 +63,19 @@ const About = () => {
       </details>
 
       <details className="mb-4 cursor-pointer group py-10 border-b border-gray-700">
-        <summary className="lg:text-3xl tracking-wide font-extralight flex justify-between items-center text-base">
+        <summary className="lg:text-3xl tracking-wide font-light flex justify-between items-center text-base">
           Immutable Deal Creation
-          <MoveDownRight className="group-open:rotate-[45deg] w-[50px] lg:w-[60px] transition-transform" size={60} color="#fff" strokeWidth={1.25} />
+          <MoveDownRight
+            className="group-open:rotate-[85deg] 
+                 group-open:scale-50 
+                 w-[50px] 
+                 lg:w-[60px] 
+                 transition-transform 
+                 duration-800 
+                 ease-in-out"
+            size={60}
+            strokeWidth={1.25}
+          />
         </summary>
         <p className="mt-2 ml-4 lg:text-xl font-thin font-opensans text-sm">
           Details about immutable deal creation.
@@ -53,9 +83,19 @@ const About = () => {
       </details>
 
       <details className="cursor-pointer group py-10">
-        <summary className="lg:text-3xl tracking-wide font-extralight flex justify-between items-center text-base">
+        <summary className="lg:text-3xl tracking-wide font-light flex justify-between items-center text-base">
           Decentralized Peer-to-Peer Lending Deals
-          <MoveDownRight className="group-open:rotate-[45deg] w-[50px] lg:w-[60px] transition-transform" size={60} color="#fff" strokeWidth={1.25} />
+          <MoveDownRight
+            className="group-open:rotate-[85deg] 
+                 group-open:scale-50 
+                 w-[50px] 
+                 lg:w-[60px] 
+                 transition-transform 
+                 duration-800 
+                 ease-in-out"
+            size={60}
+            strokeWidth={1.25}
+          />
         </summary>
         <p className="mt-2 ml-4 lg:text-xl font-thin font-opensans text-sm">
           Peer Protocols decentralized peer-to-peer marketplace serves as the
@@ -69,4 +109,4 @@ const About = () => {
   );
 };
 
-export default About;
+export default About;
\ No newline at end of file

From 674196d7b7254049455934e6b5c469b78c9dae74 Mon Sep 17 00:00:00 2001
From: ShamzX0 <posp.petrr@gmail.com>
Date: Wed, 12 Mar 2025 13:16:53 +0900
Subject: [PATCH 4/5] fix: blog cards positioning

---
 frontend/src/components/LandingPage/Blog.tsx | 41 +++++++++++---------
 1 file changed, 23 insertions(+), 18 deletions(-)

diff --git a/frontend/src/components/LandingPage/Blog.tsx b/frontend/src/components/LandingPage/Blog.tsx
index c22d317b..23ea264b 100644
--- a/frontend/src/components/LandingPage/Blog.tsx
+++ b/frontend/src/components/LandingPage/Blog.tsx
@@ -13,25 +13,30 @@ const BlogPost: React.FC<BlogPostProps> = ({ title, summary }) => {
   const { isDarkMode } = useContext(DarkModeContext);
 
   return (
-    <div className="rounded-lg overflow-hidden shadow-lg border border-black mb-6 md:mb-0">
-      <Image
-        src="/images/Deon.png"
-        alt="Card image"
-        width={30}
-        height={4}
-        className="w-full"
-      />
-      <div className="px-6 py-4">
-        <div className="font-bold text-xl text-black mb-2">{title}</div>
-        <p className={`${isDarkMode ? "text-white" : "text-gray-700 text-left"}`}>
-          {summary}
-        </p>
+    <div className="rounded-lg overflow-hidden shadow-lg border border-black h-full flex flex-col">
+      <div className="w-full h-48 relative">
+        <Image
+          src="/images/Deon.png"
+          alt="Card image"
+          fill
+          className="object-cover"
+        />
       </div>
-      <div className="flex lg:justify-center justify-start px-8 my-4">
-        <Link href="/blog">
-        <button className="bg-black text-white py-2 px-4 rounded border border-transparent hover:bg-white hover:text-black hover:border-black">
-          See More
-        </button>
+      <div className="px-6 py-4 flex-grow flex flex-col h-64">
+        <div className="font-bold text-xl text-black mb-11 h-14">
+          {title}
+        </div>
+        <div className="flex-grow overflow-hidden">
+          <p className={`${isDarkMode ? "text-white" : "text-gray-700"} text-left line-clamp-5`}>
+            {summary}
+          </p>
+        </div>
+      </div>
+      <div className="px-6 pb-6 pt-2">
+        <Link href="/blog" className="block w-full">
+          <button className="bg-black text-white py-2 px-4 rounded border border-transparent hover:bg-white hover:text-black hover:border-black w-full">
+            See More
+          </button>
         </Link>
       </div>
     </div>

From f7be6aededa16d592fe9edefecc8c84c2de169d1 Mon Sep 17 00:00:00 2001
From: ShamzX0 <posp.petrr@gmail.com>
Date: Wed, 12 Mar 2025 13:50:01 +0900
Subject: [PATCH 5/5] tidy: clean up

---
 frontend/src/components/LandingPage/Blog.tsx | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/LandingPage/Blog.tsx b/frontend/src/components/LandingPage/Blog.tsx
index 23ea264b..23cf4770 100644
--- a/frontend/src/components/LandingPage/Blog.tsx
+++ b/frontend/src/components/LandingPage/Blog.tsx
@@ -13,7 +13,9 @@ const BlogPost: React.FC<BlogPostProps> = ({ title, summary }) => {
   const { isDarkMode } = useContext(DarkModeContext);
 
   return (
-    <div className="rounded-lg overflow-hidden shadow-lg border border-black h-full flex flex-col">
+    <div
+      className={`rounded-lg overflow-hidden shadow-lg border border-black bg-white text-black h-full flex flex-col m-8 md:m-0 ${isDarkMode && 'border-white'}`}
+    >
       <div className="w-full h-48 relative">
         <Image
           src="/images/Deon.png"
@@ -23,18 +25,20 @@ const BlogPost: React.FC<BlogPostProps> = ({ title, summary }) => {
         />
       </div>
       <div className="px-6 py-4 flex-grow flex flex-col h-64">
-        <div className="font-bold text-xl text-black mb-11 h-14">
+        <div className='font-bold text-xl mb-6 md:mb-11 h-14 text-black'>
           {title}
         </div>
         <div className="flex-grow overflow-hidden">
-          <p className={`${isDarkMode ? "text-white" : "text-gray-700"} text-left line-clamp-5`}>
+          <p className='text-black text-left line-clamp-5'>
             {summary}
           </p>
         </div>
       </div>
       <div className="px-6 pb-6 pt-2">
         <Link href="/blog" className="block w-full">
-          <button className="bg-black text-white py-2 px-4 rounded border border-transparent hover:bg-white hover:text-black hover:border-black w-full">
+          <button
+            className='py-2 px-4 rounded border border-transparent bg-black text-white hover:bg-white hover:text-black hover:border-black w-full'
+          >
             See More
           </button>
         </Link>
@@ -43,4 +47,4 @@ const BlogPost: React.FC<BlogPostProps> = ({ title, summary }) => {
   );
 };
 
-export default BlogPost;
+export default BlogPost;
\ No newline at end of file