Skip to content

Commit 420d6db

Browse files
miss-yusrahmiss-yusrah
authored
feat/Implement About Us Page (#293)
* feat/Implement About Us Page * Updated about-us page into components
1 parent 09a5a5d commit 420d6db

File tree

7 files changed

+305
-0
lines changed

7 files changed

+305
-0
lines changed

‎frontend/app/(marketing)/components/NavBar.tsx‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,9 @@ function Navbar() {
1919

2020
{/* DESKTOP NAVIGATION (Hidden on mobile) */}
2121
<div className="hidden md:flex rounded-full p-4 border-[0.5px] border-[#EBFDFF99] text-[#DDDDDD99] items-center gap-x-[60px]">
22+
<Link href="/about" className="hover:text-white transition-colors">
23+
ABOUT
24+
</Link>
2225
<Link href="/features" className="hover:text-white transition-colors">
2326
FEATURES
2427
</Link>
@@ -53,6 +56,13 @@ function Navbar() {
5356
{/* MOBILE DROPDOWN MENU */}
5457
{isOpen && (
5558
<div className="md:hidden absolute top-full left-0 w-full bg-black border-t border-[#EBFDFF20] flex flex-col items-center py-8 space-y-6 shadow-2xl animate-in slide-in-from-top-5 fade-in duration-200">
59+
<Link
60+
href="/about"
61+
className="text-[#DDDDDD99] text-lg hover:text-white transition-colors"
62+
onClick={() => setIsOpen(false)}
63+
>
64+
ABOUT
65+
</Link>
5666
<Link
5767
href="/features"
5868
className="text-[#DDDDDD99] text-lg hover:text-white transition-colors"

‎frontend/app/about/components/Benefits.tsx‎

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
import React from "react";
2+
import { ArrowRight, Check } from "lucide-react";
3+
4+
const whyChoosePrediFi = [
5+
"Earn rewards for accurate predictions",
6+
"Create and manage your own prediction pools",
7+
"Trade predictions with other participants",
8+
"Fully decentralized and blockchain-verified",
9+
"No intermediaries or hidden fees",
10+
"Community-driven governance",
11+
];
12+
13+
export default function BenefitsAndCTASection() {
14+
return (
15+
<>
16+
{/* WHY CHOOSE PREDIFI*/}
17+
<section className="py-[60px] md:py-[100px] px-5">
18+
<div className="max-w-[1200px] mx-auto">
19+
<div className="flex flex-col md:flex-row gap-8 md:gap-12 items-center">
20+
{/* Left side - Image/Visual */}
21+
<div className="flex-1 flex justify-center">
22+
<div className="w-full max-w-[400px] h-[300px] md:h-[400px] rounded-[24px] bg-[#03353A4D] backdrop-blur-[15px] border border-[#37B7C322] flex items-center justify-center">
23+
<div className="text-6xl">🎯</div>
24+
</div>
25+
</div>
26+
27+
{/* Right side - Content */}
28+
<div className="flex-1">
29+
<h2 className="text-3xl md:text-4xl font-medium text-white mb-8">
30+
Why Choose PrediFi?
31+
</h2>
32+
33+
<div className="space-y-4">
34+
{whyChoosePrediFi.map((benefit, index) => (
35+
<div key={index} className="flex gap-4 items-start">
36+
<Check className="w-6 h-6 text-[#37B7C3] flex-shrink-0 mt-0.5" />
37+
<span className="text-base md:text-lg text-[#FFFFFFCC]">
38+
{benefit}
39+
</span>
40+
</div>
41+
))}
42+
</div>
43+
44+
<button className="mt-8 inline-flex items-center px-6 py-3 md:px-8 md:py-4 bg-[#37B7C3] text-black font-medium rounded-2xl hover:bg-[#2aa0ac] transition-colors">
45+
Start Predicting Today
46+
<ArrowRight size={20} className="ml-2" />
47+
</button>
48+
</div>
49+
</div>
50+
</div>
51+
</section>
52+
53+
{/* CTA SECTION */}
54+
<section className="py-[60px] md:py-[100px] px-5">
55+
<div className="max-w-[1000px] mx-auto text-center">
56+
<div className="rounded-[24px] md:rounded-[33px] bg-gradient-to-r from-[#03353A66] to-[#03353A4D] backdrop-blur-[15px] p-8 md:p-12 border border-[#37B7C322]">
57+
<h2 className="text-3xl md:text-4xl font-medium text-white mb-6">
58+
Ready to Predict the Future?
59+
</h2>
60+
<p className="text-base md:text-lg text-[#FFFFFFCC] mb-8 leading-[140%]">
61+
Join thousands of predictors on PrediFi and start earning rewards for your insights.
62+
</p>
63+
64+
<button className="inline-flex items-center px-8 py-4 md:px-10 md:py-5 bg-[#37B7C3] text-black font-semibold rounded-full hover:bg-[#2aa0ac] transition-colors text-lg">
65+
Explore Pools
66+
<ArrowRight size={22} className="ml-2" />
67+
</button>
68+
</div>
69+
</div>
70+
</section>
71+
</>
72+
);
73+
}

‎frontend/app/about/components/Hero.tsx‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import React from "react";
2+
3+
export default function HeroAndIntroSection() {
4+
return (
5+
<>
6+
{/* HERO SECTION */}
7+
<section className="relative py-12 md:py-[105px] flex flex-col items-center text-center overflow-visible px-5">
8+
<img
9+
src="/swirl-pattern.png"
10+
alt=""
11+
aria-hidden="true"
12+
className="absolute inset-0 w-full h-full object-cover pointer-events-none z-0"
13+
/>
14+
15+
<div className="relative z-10 flex flex-col items-center max-w-4xl">
16+
<h1 className="max-w-[736px] font-medium text-[48px] leading-[110%] md:text-[80px] md:leading-[120%] -tracking-[0.05em] md:-tracking-[10%] bg-[linear-gradient(263.91deg,#CEFFF7_30.32%,#59B1A6_93.13%)] bg-clip-text text-transparent">
17+
About PrediFi
18+
</h1>
19+
20+
<p className="mt-4 md:mt-6 mb-8 md:mb-10 max-w-2xl text-[#E0FFFB] text-base md:text-[18px]/[140%] tracking-[2%]">
21+
The decentralized prediction protocol that puts the power of predicting future outcomes directly in your hands.
22+
</p>
23+
</div>
24+
</section>
25+
26+
{/* WHAT IS PREDIFI SECTION*/}
27+
<section className="py-[60px] md:py-[100px] px-5 max-w-[1200px] mx-auto">
28+
<div className="rounded-[24px] md:rounded-[33px] bg-[#03353A4D] backdrop-blur-[15px] p-6 md:py-10 md:px-[80px]">
29+
<h2 className="text-3xl md:text-4xl font-medium text-white mb-6 md:mb-8 text-center">
30+
What is PrediFi?
31+
</h2>
32+
<p className="text-base md:text-lg text-[#FFFFFFCC] text-center leading-[140%] tracking-[2%]">
33+
PrediFi is a decentralized prediction market built on StarkNet that combines the thrill of prediction with blockchain transparency. Users create or join prediction pools, make predictions about future outcomes across multiple domains, and earn rewards for accuracy—all verified on-chain with zero intermediaries.
34+
</p>
35+
</div>
36+
</section>
37+
</>
38+
);
39+
}

‎frontend/app/about/components/HowItWorks.tsx‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
import React from "react";
2+
3+
export default function HowItWorksSection() {
4+
return (
5+
<section className="py-[60px] md:py-[100px] px-5">
6+
<div className="max-w-[1200px] mx-auto">
7+
<h2 className="text-3xl md:text-4xl font-medium text-white mb-[50px] md:mb-[80px] text-center">
8+
How It Works
9+
</h2>
10+
11+
<div className="space-y-6 md:space-y-8">
12+
{[
13+
{
14+
step: 1,
15+
title: "Join or Create a Pool",
16+
description:
17+
"Browse existing prediction pools or create your own with custom parameters.",
18+
},
19+
{
20+
step: 2,
21+
title: "Make Your Prediction",
22+
description:
23+
"Place your prediction with stake, choosing from available outcome options.",
24+
},
25+
{
26+
step: 3,
27+
title: "Wait for Resolution",
28+
description:
29+
"Smart contracts monitor real-time data feeds and verify outcomes automatically.",
30+
},
31+
{
32+
step: 4,
33+
title: "Claim Your Rewards",
34+
description:
35+
"If your prediction is correct, rewards are automatically distributed on-chain.",
36+
},
37+
].map((item) => (
38+
<div
39+
key={item.step}
40+
className="flex gap-6 md:gap-8 items-start rounded-[20px] bg-[#03353A4D] backdrop-blur-[15px] p-6 md:p-8 border border-[#FFFFFF0D]"
41+
>
42+
<div className="flex-shrink-0 w-12 h-12 md:w-16 md:h-16 rounded-full bg-[#37B7C3] flex items-center justify-center text-xl md:text-2xl font-bold text-black">
43+
{item.step}
44+
</div>
45+
<div className="flex-1">
46+
<h3 className="text-lg md:text-xl font-medium text-white mb-2">
47+
{item.title}
48+
</h3>
49+
<p className="text-sm md:text-base text-[#FFFFFFCC] leading-[140%]">
50+
{item.description}
51+
</p>
52+
</div>
53+
</div>
54+
))}
55+
</div>
56+
</div>
57+
</section>
58+
);
59+
}

‎frontend/app/about/components/Mission.tsx‎

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
import React from "react";
2+
3+
const missionPoints = [
4+
{
5+
icon: "🎯",
6+
title: "Decentralization at Core",
7+
description: "No central authority controlling outcomes. Every prediction lives on-chain.",
8+
},
9+
{
10+
icon: "🔒",
11+
title: "Trustless Verification",
12+
description: "Outcomes verified through smart contracts, not by intermediaries.",
13+
},
14+
{
15+
icon: "⚡",
16+
title: "Transparent & Fair",
17+
description: "Every transaction and result is verifiable on the blockchain.",
18+
},
19+
{
20+
icon: "🚀",
21+
title: "Built for Web3",
22+
description: "Native integration with StarkNet's scalability and security.",
23+
},
24+
];
25+
26+
const predictionDomains = [
27+
{
28+
title: "Sports Predictions",
29+
description: "Predict outcomes of your favorite sports events and earn rewards.",
30+
icon: "🏆",
31+
},
32+
{
33+
title: "Financial Markets",
34+
description:
35+
"Make informed predictions about asset prices, market movements, and trends.",
36+
icon: "📈",
37+
},
38+
{
39+
title: "Global Events",
40+
description: "Predict real-world outcomes across politics, weather, and more.",
41+
icon: "🌍",
42+
},
43+
];
44+
45+
export default function MissionAndDomainsSection() {
46+
return (
47+
<>
48+
{/* MISSION SECTION */}
49+
<section className="py-[60px] md:py-[100px] px-5">
50+
<div className="max-w-[1200px] mx-auto">
51+
<h2 className="text-3xl md:text-4xl font-medium text-white mb-[50px] md:mb-[80px] text-center">
52+
Our Mission
53+
</h2>
54+
55+
<div className="grid grid-cols-1 md:grid-cols-2 gap-6 md:gap-8">
56+
{missionPoints.map((point, index) => (
57+
<div
58+
key={index}
59+
className="rounded-[20px] bg-[#03353A4D] backdrop-blur-[15px] p-6 md:p-8 border border-[#FFFFFF0D] hover:border-[#37B7C333] transition-colors"
60+
>
61+
<div className="text-4xl mb-4">{point.icon}</div>
62+
<h3 className="text-xl md:text-2xl font-medium text-white mb-3">
63+
{point.title}
64+
</h3>
65+
<p className="text-sm md:text-base text-[#FFFFFFCC] leading-[140%]">
66+
{point.description}
67+
</p>
68+
</div>
69+
))}
70+
</div>
71+
</div>
72+
</section>
73+
74+
{/* PREDICTION DOMAINS SECTION */}
75+
<section className="py-[60px] md:py-[100px] px-5">
76+
<div className="max-w-[1200px] mx-auto">
77+
<h2 className="text-3xl md:text-4xl font-medium text-white mb-[50px] md:mb-[80px] text-center">
78+
What Can You Predict?
79+
</h2>
80+
81+
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 md:gap-8">
82+
{predictionDomains.map((domain, index) => (
83+
<div
84+
key={index}
85+
className="rounded-[20px] bg-gradient-to-br from-[#03353A4D] to-[#0A2F364D] backdrop-blur-[15px] p-6 md:p-8 border border-[#37B7C322]"
86+
>
87+
<div className="text-5xl mb-6">{domain.icon}</div>
88+
<h3 className="text-xl md:text-2xl font-medium text-white mb-3">
89+
{domain.title}
90+
</h3>
91+
<p className="text-sm md:text-base text-[#FFFFFFCC] leading-[140%]">
92+
{domain.description}
93+
</p>
94+
</div>
95+
))}
96+
</div>
97+
</div>
98+
</section>
99+
</>
100+
);
101+
}

‎frontend/app/about/page.tsx‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import Navbar from "../(marketing)/components/NavBar";
2+
import Footer from "../(marketing)/components/Footer";
3+
import Hero from "./components/Hero";
4+
import Mission from "./components/Mission";
5+
import HowItWorks from "./components/HowItWorks";
6+
import Benefits from "./components/Benefits";
7+
8+
export default function AboutPage() {
9+
return (
10+
<div className="text-sm min-h-screen bg-[#001112]">
11+
<Navbar />
12+
13+
<main className="w-screen overflow-x-hidden">
14+
<Hero />
15+
<Mission />
16+
<HowItWorks />
17+
<Benefits />
18+
<Footer />
19+
</main>
20+
</div>
21+
);
22+
}

‎frontend/app/layout.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ const dmMono = DM_Mono({
66
subsets: ["latin"],
77
weight: ["300", "400", "500"],
88
variable: "--font-dm-mono",
9+
preload: false,
910
});
1011

1112
export const metadata: Metadata = {

0 commit comments

Comments
 (0)