Skip to content

Commit b7ad8f5

Browse files
ajay-dhangarajay-dhangar
committed
Sponsors Page added
1 parent 21a0120 commit b7ad8f5

File tree

11 files changed

+284
-23
lines changed

11 files changed

+284
-23
lines changed

‎authors.json

Whitespace-only changes.

‎docusaurus.config.js

Lines changed: 19 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,8 @@ const config = {
3939
keywords: ["my-custom-admonition"],
4040
extendDefaults: true,
4141
},
42-
editUrl: "https://github.com/codeharborhub/codeharborhub.github.io/edit/main/",
42+
editUrl:
43+
"https://github.com/codeharborhub/codeharborhub.github.io/edit/main/",
4344
remarkPlugins: [remarkMath],
4445
rehypePlugins: [rehypeKatex],
4546
},
@@ -48,7 +49,8 @@ const config = {
4849
},
4950
blog: {
5051
showReadingTime: true,
51-
editUrl: "https://github.com/codeharborhub/codeharborhub.github.io/edit/main/",
52+
editUrl:
53+
"https://github.com/codeharborhub/codeharborhub.github.io/edit/main/",
5254
remarkPlugins: [[npm2yarn, { converters: ["pnpm"] }]],
5355
},
5456
theme: {
@@ -170,44 +172,41 @@ const config = {
170172
html: '<span class="nav-emoji">🤝</span> Community',
171173
position: "left",
172174
},
175+
173176
{
174-
html: '<span class="nav-emoji"> 📊</span> Quiz',
175-
to: "https://quiz-app-ajay-dhangar.vercel.app/",
176-
},
177-
{
178-
html: '<span class="nav-emoji"> 📺</span> Broadcast',
179-
to: "https://codeharborhub-broadcast-web.vercel.app/",
177+
to: "/our-sponsors/",
178+
html: '<span class="nav-emoji">💰</span> Sponsors',
180179
},
181180

182181
{
183182
to: "/blog",
184183
html: '<span class="nav-emoji">📰</span> Blog',
185184
},
185+
186186
{
187187
type: "dropdown",
188-
html: '<span class="nav-emoji">🏷️</span> Tags',
188+
html: '<span class="nav-emoji">🔗</span> More',
189189
position: "left",
190190
items: [
191+
{
192+
html: '<span class="nav-emoji"> 📊</span> Quiz',
193+
to: "https://quiz-app-ajay-dhangar.vercel.app/",
194+
},
195+
{
196+
html: '<span class="nav-emoji"> 📺</span> Broadcast',
197+
to: "https://codeharborhub-broadcast-web.vercel.app/",
198+
},
191199
{
192200
label: "🏷️ Tutorial Tags 📚",
193201
to: "/docs/tags/",
194202
activeBaseRegex: "/docs/tags/",
195203
},
196204

197-
{
198-
type: "html",
199-
value: '<hr style="margin: 0.3rem 0;">',
200-
},
201-
202205
{
203206
label: "🏷️ Courses Tags 🎓",
204207
to: "/courses/tags/",
205208
activeBaseRegex: "/courses/tags/",
206209
},
207-
{
208-
type: "html",
209-
value: '<hr style="margin: 0.3rem 0;">',
210-
},
211210

212211
{
213212
label: "🏷️ DSA Tags 🧠",
@@ -216,6 +215,7 @@ const config = {
216215
},
217216
],
218217
},
218+
219219
{
220220
type: "search",
221221
position: "right",
@@ -556,4 +556,4 @@ const config = {
556556
],
557557
};
558558

559-
export default config;
559+
export default config;

‎src/css/custom.css

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -26,9 +26,7 @@
2626
--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
2727
--ifm-task-complete-color: #2e9e32e1;
2828
--ifm-task-incomplete-color: #3d78cbe1;
29-
30-
/* scrollbar-width: thin;
31-
scrollbar-color: #47a94a white; */
29+
--ifm-bg-color: #f8f9fa;
3230
}
3331

3432
[data-theme="dark"] {
@@ -42,6 +40,7 @@
4240
--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
4341
--ifm-task-complete-color: #25c2a0;
4442
--ifm-task-incomplete-color: #3d78cbe1;
43+
--ifm-bg-color: #1a202c;
4544
}
4645

4746
.header-github-link::before {

‎src/database/sponsors/index.tsx

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import e from "express";
2+
3+
interface Sponsor {
4+
name: string;
5+
image: string;
6+
description: string;
7+
github?: string;
8+
linkedin?: string;
9+
twitter?: string;
10+
instagram?: string;
11+
}
12+
13+
const sponsors: Sponsor[] = [
14+
{
15+
name: 'Ajay Dhangar',
16+
image: '/sponsors/ajay-dhangar.jpg',
17+
description: 'Full Stack Engineer',
18+
github: 'https://github.com/ajay-dhangar',
19+
linkedin: 'https://linkedin.com/in/ajay-dhangar',
20+
twitter: 'https://x.com/CodesWithAjay',
21+
instagram: 'https://www.instagram.com/_ajay.dhangar'
22+
},
23+
];
24+
25+
export default sponsors;

‎src/pages/cookie-policy/index.tsx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import React from 'react';
22
import Layout from '@theme/Layout';
33
import styled from 'styled-components';
44

5-
// Styled Components
65
const CookiePolicyContainer = styled.div`
76
width: 50%;
87
display: block;

‎src/pages/our-sponsors/SponsorCard/index.tsx

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import React from 'react';
2+
import { FaGithub, FaLinkedin, FaTwitter, FaInstagram } from 'react-icons/fa';
3+
4+
interface SponsorCardProps {
5+
name: string;
6+
image: string;
7+
description: string;
8+
github?: string;
9+
linkedin?: string;
10+
twitter?: string;
11+
instagram?: string;
12+
}
13+
14+
const SponsorCard: React.FC<SponsorCardProps> = ({ name, image, description, github, linkedin, twitter, instagram }) => {
15+
return (
16+
<div className="sponsor-card">
17+
<img src={image} alt={name} />
18+
<h3>{name}</h3>
19+
<p>{description}</p>
20+
<div className="social-links">
21+
{github && <a href={github} target="_blank" rel="noopener noreferrer" className="github"><FaGithub /></a>}
22+
{linkedin && <a href={linkedin} target="_blank" rel="noopener noreferrer" className="linkedin"><FaLinkedin /></a>}
23+
{twitter && <a href={twitter} target="_blank" rel="noopener noreferrer" className="twitter"><FaTwitter /></a>}
24+
{instagram && <a href={instagram} target="_blank" rel="noopener noreferrer" className="instagram"><FaInstagram /></a>}
25+
</div>
26+
</div>
27+
);
28+
};
29+
30+
export default SponsorCard;

‎src/pages/our-sponsors/Sponsors.css

Lines changed: 135 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,135 @@
1+
.sponsor-page {
2+
padding: 2rem;
3+
}
4+
5+
.sponsor-page .sponsor-header {
6+
text-align: center;
7+
margin-bottom: 2rem;
8+
}
9+
10+
.TitleText {
11+
background: linear-gradient(
12+
90deg,
13+
rgb(152 0 255) 0%,
14+
rgb(246 41 41) 50%,
15+
rgb(255 169 8) 100%
16+
);
17+
background-clip: text;
18+
-webkit-text-fill-color: transparent;
19+
}
20+
21+
.sponsor-page .sponsors-list {
22+
display: grid;
23+
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
24+
gap: 1rem;
25+
margin-top: 2rem;
26+
}
27+
28+
.sponsor-page .sponsor-card {
29+
border: 1px solid #ddd;
30+
border-radius: 8px;
31+
padding: 16px;
32+
text-align: center;
33+
width: 200px;
34+
}
35+
36+
.sponsor-page .sponsor-card img {
37+
border-radius: 50%;
38+
width: 100px;
39+
height: 100px;
40+
object-fit: cover;
41+
}
42+
43+
.sponsor-page .sponsor-card .social-links {
44+
margin-top: 8px;
45+
display: flex;
46+
justify-content: center;
47+
gap: 8px;
48+
}
49+
50+
.sponsor-page .sponsor-card .social-links a {
51+
display: inline-flex;
52+
align-items: center;
53+
justify-content: center;
54+
width: 35px;
55+
height: 35px;
56+
border-radius: 50%;
57+
color: #fff;
58+
background-color: var(--ifm-color-primary);
59+
text-decoration: none;
60+
transition: background-color 0.3s ease, transform 0.3s ease;
61+
}
62+
63+
.sponsor-page .sponsor-card .social-links a:hover {
64+
transform: scale(1.1);
65+
}
66+
67+
.sponsor-page .sponsor-card .social-links a.github:hover {
68+
background-color: #333;
69+
}
70+
71+
.sponsor-page .sponsor-card .social-links a.linkedin:hover {
72+
background-color: #0073b1;
73+
}
74+
75+
.sponsor-page .sponsor-card .social-links a.twitter:hover {
76+
background-color: #1da1f2;
77+
}
78+
79+
.sponsor-page .sponsor-card .social-links a.instagram:hover {
80+
background-color: #e4405f;
81+
}
82+
83+
.sponsor-page .sponsor-card.empty-card {
84+
display: flex;
85+
align-items: center;
86+
justify-content: center;
87+
cursor: pointer;
88+
border: 1px dashed #ddd;
89+
90+
}
91+
92+
.sponsor-page .scanner-popup {
93+
position: fixed;
94+
top: 0;
95+
left: 0;
96+
right: 0;
97+
bottom: 0;
98+
background: rgba(0, 0, 0, 0.5);
99+
display: flex;
100+
justify-content: center;
101+
align-items: center;
102+
z-index: 1000;
103+
}
104+
105+
.scanner-content {
106+
padding: 2rem;
107+
border-radius: 8px;
108+
text-align: center;
109+
max-width: 400px;
110+
width: 100%;
111+
background: white;
112+
}
113+
114+
.support-links {
115+
margin-top: 5rem;
116+
display: flex;
117+
justify-content: center;
118+
gap: 16px;
119+
align-items: center;
120+
}
121+
122+
.scanner-button {
123+
background: var(--ifm-color-primary);
124+
color: white;
125+
padding: 8px 16px;
126+
border-radius: 8px;
127+
cursor: pointer;
128+
border: none;
129+
}
130+
131+
@media (max-width: 600px) {
132+
.sponsor-card {
133+
width: 100%;
134+
}
135+
}

‎src/pages/our-sponsors/index.tsx

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
import React, { useState } from "react";
2+
import SponsorCard from "./SponsorCard";
3+
import "./Sponsors.css";
4+
import Layout from "@theme/Layout";
5+
import sponsors from "../../database/sponsors";
6+
7+
const OurSponsors: React.FC = () => {
8+
const [showScanner, setShowScanner] = useState(false);
9+
10+
const handleJoinSponsor = () => {
11+
setShowScanner(true);
12+
};
13+
14+
const handlePaymentSuccess = () => {
15+
setShowScanner(false);
16+
alert("Payment successful! Please fill in your sponsor info.");
17+
window.location.href = "https://forms.gle/8zBeFP98bpjDxm9u8";
18+
};
19+
20+
return (
21+
<Layout>
22+
<div className="sponsor-page">
23+
<div className="sponsor-header">
24+
<h1 className="TitleText">Our Sponsors</h1>
25+
<p>
26+
CodeHarborHub is supported by these amazing sponsors. You can also
27+
join them to support the community.
28+
</p>
29+
</div>
30+
<div className="sponsors-list">
31+
{sponsors.map((sponsor) => (
32+
<SponsorCard key={sponsor.name} {...sponsor} />
33+
))}
34+
<div className="sponsor-card empty-card" onClick={handleJoinSponsor}>
35+
<h3>Join as a Sponsor</h3>
36+
</div>
37+
</div>
38+
{showScanner && (
39+
<div className="scanner-popup">
40+
<div className="scanner-content">
41+
<h2 className="TitleText">Scan to Sponsor</h2>
42+
<img
43+
src="/sponsors/scan-pay.jpg"
44+
alt="Payment Scanner"
45+
/>
46+
<button
47+
className="scanner-button"
48+
onClick={handlePaymentSuccess}>I have paid</button>
49+
</div>
50+
</div>
51+
)}
52+
<div className="support-links">
53+
<iframe
54+
src="https://github.com/sponsors/Ajay-Dhangar/button"
55+
title="Sponsor Ajay-Dhangar"
56+
height="32"
57+
width="114"
58+
style={{ border: 0, borderRadius: "6px" }}
59+
></iframe>
60+
<a
61+
href="https://www.patreon.com/ajay_dhangar"
62+
target="_blank"
63+
rel="noopener noreferrer"
64+
>
65+
Support on Patreon
66+
</a>
67+
</div>
68+
</div>
69+
</Layout>
70+
);
71+
};
72+
73+
export default OurSponsors;

‎src/pages/submit-info/index.tsx

Whitespace-only changes.

‎static/sponsors/ajay-dhangar.jpg

15.2 KB
Loading

‎static/sponsors/scan-pay.jpg

99.1 KB
Loading

0 commit comments

Comments
 (0)