Skip to content

Commit 763ab3c

Browse files
Susmita-DeySusmita-Dey
authored
Merge pull request #384 from BhartiNagpure/bharti
footer visibility resolve
2 parents 2c033bf + 3caff02 commit 763ab3c

File tree

1 file changed

+97
-27
lines changed

1 file changed

+97
-27
lines changed

‎src/components/Footer.jsx‎

Lines changed: 97 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -14,35 +14,35 @@ const Footer = () => {
1414
let year = new Date().getFullYear();
1515

1616
return (
17-
<footer className="bg-black bottom-0 mb-6 pt-32 font-primary">
18-
<div className="flex flex-col gap-8 justify-between content-center md:flex-row">
17+
<footer className="bg-black bottom-0 mb-6 pt-32 font-primary justify-center">
18+
<div className=" flex-col gap-8 justify-between content-center md:flex-row">
1919
{/* Logo */}
20-
<div className="grid-auto">
21-
<div className="flex flex-col justify-center">
20+
<div className="grid-auto ">
21+
<div className=" flex-col justify-center">
2222
<Image
2323
src={logo}
2424
alt="DevsInTech"
25-
width={140}
26-
height={140}
25+
width={100}
26+
height={120}
2727
className="mx-auto"
2828
/>
29-
<p className="font-medium text-center justify-items-center">
29+
<p className="text-green-500 text-2xl text-center justify-items-center font-mono">
3030
DevsInTech
3131
</p>
3232
</div>
3333
</div>
3434

3535
{/* About Us */}
3636

37-
<div className="flex flex-col content-center">
38-
<p className="text-center text-white text-md sm:text-lg md:text-xl md:text-left">
39-
<a href="https://devsintech.netlify.app/">DevsInTech</a> is a
37+
<div className="flex flex-col justif-center">
38+
<p className="text-center text-white text-md sm:text-lg md:text-m md:text-center">
39+
<a href="https://devsintech.netlify.app/" className="text-green-500 font-mono">DevsInTech</a> is a
4040
thriving and welcoming community of developers, tech
4141
professionals,and enthusiasts who share a common passion for
4242
technology. We are an Open-source project available on{" "}
43-
<a href="https://github.com/devs-in-tech/DevsInTech">GitHub</a>
43+
<a href="https://github.com/devs-in-tech/DevsInTech" className="text-blue-500">GitHub</a>
4444
</p>
45-
<ul className="mt-6 flex justify-center gap-6 md:justify-start md:gap-8">
45+
<ul className="mt-6 flex justify-center gap-6 md:justify-start md:gap-8">
4646
<li>
4747
<Link
4848
href="/"
@@ -126,21 +126,20 @@ const Footer = () => {
126126
<FaGithub size={20} />
127127
</Link>
128128
</li>
129-
130129
</ul>
131130
</div>
132131

133132
{/* COLUMNS */}
134133
<div className="m-auto">
135-
<div className="flex justify-between gap-16">
134+
<div className="flex justify-center gap-16">
136135
<div className="text-center font-secondary">
137136
<p className="text-lg font-medium text-white">Community</p>
138137

139-
<nav aria-label="Footer About Nav" className="mt-4 text-center">
138+
<nav aria-label="Footer About Nav" className="mt-4 text-center ">
140139
<ul className="space-y-4 font-black text-base">
141140
<li>
142141
<Link
143-
className="text-gray-900 transition hover:text-gray-900/75 dark:text-white dark:hover:text-white/75"
142+
className="text-purple-900 transition hover:text-gray-900/75 dark:text-white dark:hover:text-white/75"
144143
href="/"
145144
>
146145
Collaborate
@@ -149,7 +148,7 @@ const Footer = () => {
149148

150149
<li>
151150
<Link
152-
className="text-gray-900 transition hover:text-gray-900/75 dark:text-white dark:hover:text-white/75"
151+
className="text-purple-900 transition hover:text-gray-900/75 dark:text-white dark:hover:text-white/75"
153152
href="/"
154153
>
155154
Communicate
@@ -158,7 +157,7 @@ const Footer = () => {
158157

159158
<li>
160159
<Link
161-
className="text-gray-900 transition hover:text-gray-900/75 dark:text-white dark:hover:text-white/75"
160+
className="text-purple-900 transition hover:text-gray-900/75 dark:text-white dark:hover:text-white/75"
162161
href="/"
163162
>
164163
Courses
@@ -167,7 +166,7 @@ const Footer = () => {
167166

168167
<li>
169168
<Link
170-
className="text-gray-900 transition hover:text-gray-900/75 dark:text-white dark:hover:text-white/75"
169+
className="text-purple-900 transition hover:text-gray-900/75 dark:text-white dark:hover:text-white/75"
171170
href="/"
172171
>
173172
Webinars
@@ -176,7 +175,7 @@ const Footer = () => {
176175

177176
<li>
178177
<Link
179-
className="text-gray-900 transition hover:text-gray-900/75 dark:text-white dark:hover:text-white/75"
178+
className="text-purple-900 transition hover:text-gray-900/75 dark:text-white dark:hover:text-white/75"
180179
href="/"
181180
>
182181
Meetups
@@ -195,7 +194,7 @@ const Footer = () => {
195194
<ul className="space-y-4 font-black text-base">
196195
<li>
197196
<Link
198-
className="text-gray-900 transition hover:text-gray-900/75 dark:text-white dark:hover:text-white/75"
197+
className="text-purple-900 transition hover:text-gray-900/75 dark:text-white dark:hover:text-white/75"
199198
href="/"
200199
>
201200
Collaborate
@@ -204,7 +203,7 @@ const Footer = () => {
204203

205204
<li>
206205
<Link
207-
className="text-gray-900 transition hover:text-gray-900/75 dark:text-white dark:hover:text-white/75"
206+
className="text-purple-900 transition hover:text-gray-900/75 dark:text-white dark:hover:text-white/75"
208207
href="/"
209208
>
210209
Events
@@ -213,7 +212,7 @@ const Footer = () => {
213212

214213
<li>
215214
<Link
216-
className="text-gray-900 transition hover:text-gray-900/75 dark:text-white dark:hover:text-white/75"
215+
className="text-purple-900 transition hover:text-gray-900/75 dark:text-white dark:hover:text-white/75"
217216
href="/"
218217
>
219218
Courses
@@ -222,7 +221,7 @@ const Footer = () => {
222221

223222
<li>
224223
<Link
225-
className="text-gray-900 transition hover:text-gray-900/75 dark:text-white dark:hover:text-white/75"
224+
className="text-purple-900 transition hover:text-gray-900/75 dark:text-white dark:hover:text-white/75"
226225
href="/"
227226
>
228227
Webinars
@@ -231,7 +230,7 @@ const Footer = () => {
231230

232231
<li>
233232
<Link
234-
className="text-gray-900 transition hover:text-gray-900/75 dark:text-white dark:hover:text-white/75"
233+
className="text-purple-900 transition hover:text-gray-900/75 dark:text-white dark:hover:text-white/75"
235234
href="/"
236235
>
237236
Meetups
@@ -243,10 +242,81 @@ const Footer = () => {
243242
</div>
244243
</div>
245244
</div>
245+
<ul className="mt-6 flex justify-center text-center gap-6 md:justify-center md:gap-8">
246+
<li>
247+
<Link
248+
href="/"
249+
rel="noreferrer"
250+
target="_blank"
251+
className="text-blue-500 transition hover:text-blue-700/75 dark:text-white dark:hover:text-gray-100/90"
252+
>
253+
<FaFacebookF size={30} />
254+
</Link>
255+
</li>
256+
257+
<li>
258+
<Link
259+
href="https://twitter.com/devs_in_tech"
260+
aria-label="Visit us on Twitter"
261+
title="Twitter (External Link)"
262+
rel="noopener noreferrer"
263+
target="_blank"
264+
className="text-sky-500 transition hover:text-sky-700/75 dark:text-white dark:hover:text-gray-100/90"
265+
>
266+
<FaTwitter size={30} />
267+
</Link>
268+
</li>
269+
270+
{/* LinkedIn Icon */}
271+
272+
<li>
273+
<Link
274+
href="https://www.linkedin.com/company/devsintech-community/"
275+
target="_blank"
276+
aria-label="Visit us on Linkedin"
277+
title="Linkedin (External Link)"
278+
rel="noopener noreferrer"
279+
className="text-blue-800 transition hover:text-blue-900/75 dark:text-white dark:hover:text-gray-100/90"
280+
>
281+
<FaLinkedinIn size={30} />
282+
</Link>
283+
</li>
284+
285+
{/* Instagram icon */}
286+
287+
<li>
288+
<Link
289+
href="/"
290+
aria-label="Visit us on Instagram"
291+
title="Instagram (External Link)"
292+
rel="noopener noreferrer"
293+
target="_blank"
294+
className="text-red-500 transition hover:text-red-700/75 dark:text-white dark:hover:text-gray-100/90"
295+
>
296+
<FaInstagram size={30} />
297+
</Link>
298+
</li>
299+
300+
{/* Discord icon */}
301+
302+
<li>
303+
<Link
304+
href="https://discord.com/invite/g7FmxB9uZp"
305+
aria-label="Join with us on Discord"
306+
title="Discord (External Link)"
307+
rel="noopener noreferrer"
308+
target="_blank"
309+
className="text-blue-500 transition hover:text-blue-700/75 dark:text-white dark:hover:text-gray-100/90"
310+
>
311+
<FaDiscord size={30} />
312+
</Link>
313+
</li>
314+
</ul>
246315
<div className="mt-12 mb-0">
247316
<div className="text-center font-thin sm:flex sm:justify-center sm:text-center">
248-
<p className="mt-4 text-xl text-black dark:text-white sm:order-first sm:mt-0">
249-
&copy; {year} by DevsInTech Community
317+
<p className="mt-4 text-xl text-white dark:text-white sm:order-first sm:mt-0">
318+
&copy; {year} by DevsInTech Community <span className="text-red-600">&hearts;</span>
319+
250320
</p>
251321
</div>
252322
</div>

0 commit comments

Comments
 (0)