Skip to content

UI updates on dark theme #178

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
ShamzX0 wants to merge 5 commits into
base: main
Choose a base branch
from
Open

UI updates on dark theme #178

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
036d6b6
fix: feature cards dark theme styling
ShamzX0 Mar 12, 2025
fb97a0d
fix: about us dark theme styling
ShamzX0 Mar 12, 2025
4760eac
refactor: dropdown arrow animation
ShamzX0 Mar 12, 2025
674196d
fix: blog cards positioning
ShamzX0 Mar 12, 2025
f7be6ae
tidy: clean up
ShamzX0 Mar 12, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
69 changes: 59 additions & 10 deletions frontend/src/components/LandingPage/About.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,31 @@
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">
<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
Expand All @@ -17,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
Expand All @@ -34,19 +63,39 @@ 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.
</p>
</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
Expand All @@ -60,4 +109,4 @@ const About = () => {
);
};

export default About;
export default About;
47 changes: 28 additions & 19 deletions frontend/src/components/LandingPage/Blog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,29 +13,38 @@ 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 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"
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 mb-6 md:mb-11 h-14 text-black'>
{title}
</div>
<div className="flex-grow overflow-hidden">
<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='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>
</div>
</div>
);
};

export default BlogPost;
export default BlogPost;
20 changes: 13 additions & 7 deletions frontend/src/components/LandingPage/Features.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand All @@ -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
Expand All @@ -36,16 +38,18 @@ 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
src="/images/UserShield.svg"
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
Expand All @@ -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">
Expand All @@ -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
Expand Down