Skip to content

Commit f9f095a

Browse files
ameen4455ameen4455
authored
Merge pull request #6 from ameen4455/about-us-update
About us page
2 parents 3ef1029 + 001e62a commit f9f095a

File tree

2 files changed

+178
-8
lines changed

2 files changed

+178
-8
lines changed

‎src/pages/about_us.js‎

Lines changed: 159 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,11 @@ import { Layout } from "../components/common";
44

55
const Index = () => {
66
return (
7-
<Layout>
7+
<>
88
<TopSection />
99
<ImpactsAndProgress />
10-
</Layout>
10+
<PeopleAtIff />
11+
</>
1112
);
1213
};
1314

@@ -46,9 +47,9 @@ function TopSection() {
4647

4748
function ImpactsAndProgress() {
4849
return (
49-
<div className="px-4 py-6 md:py-16 md:text-lg text-gray-500 flex-col lg:flex-row gap-8 responsive-container flex">
50+
<div className="px-4 py-6 md:py-16 md:text-lg border-b-2 text-gray-500 flex-col lg:flex-row gap-8 responsive-container flex">
5051
<div className="">
51-
<h2 className=" text-gray-900 text-xl md:text-2xl font-semibold mb-2">
52+
<h2 className="text-subheading-2 mb-2">
5253
India’s digital rights under threat
5354
</h2>
5455
<p>
@@ -65,7 +66,7 @@ function ImpactsAndProgress() {
6566
</div>
6667

6768
<div className="">
68-
<h2 className="text-gray-900 text-xl md:text-2xl font-semibold mb-2">
69+
<h2 className="text-subheading-2 mb-2">
6970
Public advocacy, public victories
7071
</h2>
7172
<p>
@@ -83,3 +84,156 @@ function ImpactsAndProgress() {
8384
);
8485
}
8586

87+
function PeopleAtIff() {
88+
return (
89+
<div className="px-4 py-6 md:py-16 md:text-lg text-gray-500 responsive-container">
90+
<h1 className="text-subheading-1 mb-2">People at IFF</h1>
91+
<p>
92+
We are a group of fierce organisers, campaigners, designers, lawyers,
93+
and technologists who work on a broad range of digital rights issues.
94+
Our staff is small (yet, brave). IFF strengthens its work with
95+
principles of collaboration and unleashing the power of being a
96+
community-centric organisation. Our most important work comes from the
97+
labour and initiative of volunteers
98+
</p>
99+
<Staffs />
100+
<OfCounsels />
101+
<Interns />
102+
<Alumni />
103+
<Leadership />
104+
</div>
105+
);
106+
}
107+
108+
function Avatar({ name, title, description = null }) {
109+
return (
110+
<div className="flex text-base">
111+
<img
112+
src={"/images/icons/avatar.svg"}
113+
className="object-cover w-10 h-10 mr-3 mt-1 rounded-full z-10 border-none outline-none"
114+
/>
115+
<div>
116+
<h3 className="text-subheading-3">{name}</h3>
117+
<p>{title}</p>
118+
<p>{description}</p>
119+
</div>
120+
</div>
121+
);
122+
}
123+
124+
function Staffs() {
125+
return (
126+
<div className="mt-12">
127+
<h1 className="text-subheading-2 pb-2 mb-6 border-b-2">Staff</h1>
128+
129+
<div className="grid md:grid-cols-3 gap-5">
130+
<Avatar name={"Apar Gupta"} title={"Executive Director"} />
131+
<Avatar name={"Apar Gupta"} title={"Executive Director"} />
132+
<Avatar name={"Apar Gupta"} title={"Executive Director"} />
133+
<Avatar name={"Apar Gupta"} title={"Executive Director"} />
134+
<Avatar name={"Apar Gupta"} title={"Executive Director"} />
135+
<Avatar name={"Apar Gupta"} title={"Executive Director"} />
136+
<Avatar name={"Apar Gupta"} title={"Executive Director"} />
137+
<Avatar name={"Apar Gupta"} title={"Executive Director"} />
138+
</div>
139+
</div>
140+
);
141+
}
142+
143+
function OfCounsels() {
144+
return (
145+
<div className="mt-12">
146+
<h1 className="text-subheading-2 pb-2 mb-6 border-b-2">Of-Counsels and Legal Fellows</h1>
147+
148+
<div className="grid md:grid-cols-3 gap-5">
149+
<Avatar name={"Apar Gupta"} title={"Executive Director"} />
150+
<Avatar name={"Apar Gupta"} title={"Executive Director"} />
151+
<Avatar name={"Apar Gupta"} title={"Executive Director"} />
152+
</div>
153+
</div>
154+
);
155+
}
156+
157+
function Interns() {
158+
return (
159+
<div className="mt-12">
160+
<h1 className="text-subheading-2 pb-2 mb-6 border-b-2">Interns</h1>
161+
162+
<div className="grid md:grid-cols-3 gap-5">
163+
<Avatar name={"Apar Gupta"} title={"Executive Director"} />
164+
<Avatar name={"Apar Gupta"} title={"Executive Director"} />
165+
<Avatar name={"Apar Gupta"} title={"Executive Director"} />
166+
<Avatar name={"Apar Gupta"} title={"Executive Director"} />
167+
</div>
168+
</div>
169+
);
170+
}
171+
172+
function Alumni() {
173+
return (
174+
<div className="mt-12">
175+
<h1 className="text-subheading-2 pb-2 mb-6 border-b-2">Alumni</h1>
176+
<div className="flex flex-wrap flex-col sm:flex-row ">
177+
{[...Array(10)].map((x, i) => {
178+
return (
179+
<div key={i} className="">
180+
<h3 className="text-subheading-3 mr-4 mb-2">Anushree Verma</h3>
181+
</div>
182+
);
183+
})}
184+
</div>
185+
<p className="mt-6 text-base">Work alongside the best in the digital rights sector</p>
186+
187+
<button className="btn-secondary mt-4">
188+
Jobs & Internship
189+
</button>
190+
</div>
191+
);
192+
}
193+
194+
function Leadership() {
195+
return (
196+
<div className="mt-12">
197+
<h1 className="text-subheading-2 pb-2 mb-6 border-b-2"> Leadership at IFF</h1>
198+
199+
<div className="grid md:grid-cols-2 gap-y-10 gap-x-20">
200+
<Avatar
201+
name={"Apar Gupta"}
202+
title={"Executive Director"}
203+
description={
204+
"He is a lawyer and is the Asia Policy Director at Access Now. Raman was also one of the founders of the SaveTheInternet movement and advises IFF towards fulfilling its mission and objectives."
205+
}
206+
/>
207+
<Avatar
208+
name={"Apar Gupta"}
209+
title={"Executive Director"}
210+
description={
211+
"He is a lawyer and is the Asia Policy Director at Access Now. Raman was also one of the founders of the SaveTheInternet movement and advises IFF towards fulfilling its mission and objectives."
212+
}
213+
/>{" "}
214+
<Avatar
215+
name={"Apar Gupta"}
216+
title={"Executive Director"}
217+
description={
218+
"He is a lawyer and is the Asia Policy Director at Access Now. Raman was also one of the founders of the SaveTheInternet movement and advises IFF towards fulfilling its mission and objectives."
219+
}
220+
/>
221+
<Avatar
222+
name={"Apar Gupta"}
223+
title={"Executive Director"}
224+
description={
225+
"He is a lawyer and is the Asia Policy Director at Access Now. Raman was also one of the founders of the SaveTheInternet movement and advises IFF towards fulfilling its mission and objectives."
226+
}
227+
/>
228+
<Avatar
229+
name={"Apar Gupta"}
230+
title={"Executive Director"}
231+
description={
232+
"He is a lawyer and is the Asia Policy Director at Access Now. Raman was also one of the founders of the SaveTheInternet movement and advises IFF towards fulfilling its mission and objectives."
233+
}
234+
/>{" "}
235+
</div>
236+
</div>
237+
);
238+
}
239+

‎src/styles/global.css‎

Lines changed: 19 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -20,14 +20,30 @@
2020
}
2121

2222
.btn {
23-
@apply border-2 border-iff-orange text-white bg-iff-orange px-6 py-2 rounded-sm;
23+
@apply border-2 border-iff-orange text-white bg-iff-orange px-6 py-2 rounded-md;
2424
}
2525

2626
.btn-secondary {
27-
@apply border-2 border-iff-orange text-iff-orange px-6 py-2 rounded-sm;
27+
@apply border-2 border-iff-orange text-iff-orange px-6 py-2 rounded-md;
2828
}
2929

3030
.responsive-container {
31-
@apply md:mx-auto max-w-screen-md 2xl:max-w-screen-lg;
31+
@apply md:mx-auto max-w-screen-lg;
32+
}
33+
34+
.text-subheading-1 {
35+
@apply text-gray-900 text-2xl md:text-3xl font-semibold
36+
}
37+
38+
.text-subheading-2 {
39+
@apply text-gray-900 text-xl md:text-2xl font-semibold
40+
}
41+
42+
.text-subheading-3 {
43+
@apply text-gray-900 text-base font-semibold
44+
}
45+
46+
.text-paragraph {
47+
3248
}
3349
}

0 commit comments

Comments
 (0)