Skip to content

Commit f6a03f5

Browse files
Miran-FirdausiMiran-Firdausi
committed
fix: minor styling fix of footer
1 parent 2882dc3 commit f6a03f5

File tree

2 files changed

+47
-49
lines changed

2 files changed

+47
-49
lines changed

‎src/components/Footer/index.jsx‎

Lines changed: 47 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -11,10 +11,10 @@ const Footer = () => {
1111
};
1212

1313
return (
14-
<footer className="bg-secondary-dark text-text-light">
14+
<footer className="min-h-screen bg-secondary-dark text-text-light flex flex-col">
1515
{/* Orange Banner */}
16-
<div className="bg-primary py-16 sm:py-24 relative">
17-
<div className="relative text-center font-black uppercase tracking-tighter my-6">
16+
<div className="bg-primary relative flex justify-center items-center py-12 flex-1">
17+
<div className="relative text-center font-black uppercase tracking-tighter">
1818
<div className="text-2xl xs:text-4xl sm:text-6xl lg:text-8xl text-outlined text-transparent">
1919
MADE WITH LOVE BY
2020
</div>
@@ -24,28 +24,28 @@ const Footer = () => {
2424
</div>
2525
</div>
2626

27-
<div className="max-w-6xl mx-auto px-4 py-12 sm:py-16">
28-
<div className="grid grid-cols-1 sm:grid-cols-2 gap-8 sm:gap-12 text-center sm:text-left">
29-
<div className="space-y-6 flex flex-col items-center justify-between sm:items-start">
27+
<div className="max-w-7xl mx-auto px-4 py-12 sm:py-16">
28+
<div className="grid grid-cols-1 sm:grid-cols-2 gap-8 sm:gap-12 md:gap-20 text-center sm:text-left">
29+
<div className="space-y-6 flex flex-col justify-between items-center sm:items-start">
3030
<p className="text-secondary-light leading-relaxed">
3131
Our club is committed to creating an engaging environment where
3232
members can learn, collaborate, and grow their coding expertise
3333
through a variety of activities and events.
3434
</p>
35-
<div className="flex flex-col sm:flex-row items-center sm:items-start gap-4 sm:gap-6">
35+
<div className="flex flex-col sm:flex-row items-center sm:items-start gap-4 sm:gap-4 md:w-full">
3636
<img
3737
src={SitLogo}
3838
alt="Symbiosis Logo"
39-
className="h-10 sm:h-12"
39+
className="h-10 md:h-12"
4040
/>
4141
<div className="hidden sm:block w-px h-10 bg-secondary-light"></div>
42-
<img src={Logo} alt="CodeX Logo" className="h-10 sm:h-12" />
42+
<img src={Logo} alt="CodeX Logo" className="h-10 md:h-12" />
4343
</div>
4444
</div>
4545

46-
<div className="grid sm:grid-cols-3 grid-cols-2 gap-8 text-center sm:text-left ">
46+
<div className="flex flex-row gap-8 text-center justify-center sm:text-left ">
4747
{/* Quick Links */}
48-
<div>
48+
<div className="flex-1">
4949
<h4 className="text-lg font-medium mb-4 text-secondary-light relative inline-block sm:block">
5050
QUICK LINKS
5151
<span className="absolute bottom-0 left-0 w-full h-[2px] bg-secondary-light"></span>
@@ -74,51 +74,52 @@ const Footer = () => {
7474
))}
7575
</ul>
7676
</div>
77-
78-
{/* Social Links */}
79-
<div>
80-
<h4 className="text-lg font-medium mb-4 text-secondary-light relative inline-block sm:block ">
81-
SOCIAL
82-
<span className="absolute bottom-0 left-0 w-full h-[2px] bg-secondary-light"></span>
83-
</h4>
84-
<ul className="space-y-2 text-text-light text-sm sm:text-base">
85-
<li className="cursor-pointer">
86-
<a href="https://www.instagram.com/codex_sit/">Instagram</a>
87-
</li>
88-
<li className="cursor-pointer">
89-
<a href="https://www.linkedin.com/company/codex-sit-pune/">
90-
LinkedIn
91-
</a>
92-
</li>
93-
<li className="cursor-pointer">
94-
<a href="https://github.com/codeXsit">Github</a>
95-
</li>
96-
</ul>
97-
</div>
98-
99-
{/* Contact Section */}
100-
<div className="col-span-2 sm:col-span-1 flex flex-col items-center sm:items-start text-center sm:text-left">
101-
<div className="relative bottom-0 left-0 w-full">
102-
<h4 className="text-lg font-medium mb-4 text-secondary-light relative inline-block sm:block">
103-
CONTACT
77+
<div className="flex flex-col flex-1 md:flex-[2] md:flex-row gap-4">
78+
{/* Social Links */}
79+
<div className="flex-1">
80+
<h4 className="text-lg font-medium mb-4 text-secondary-light relative inline-block sm:block ">
81+
SOCIAL
10482
<span className="absolute bottom-0 left-0 w-full h-[2px] bg-secondary-light"></span>
10583
</h4>
84+
<ul className="space-y-2 text-text-light text-sm sm:text-base">
85+
<li className="cursor-pointer">
86+
<a href="https://www.instagram.com/codex_sit/">Instagram</a>
87+
</li>
88+
<li className="cursor-pointer">
89+
<a href="https://www.linkedin.com/company/codex-sit-pune/">
90+
LinkedIn
91+
</a>
92+
</li>
93+
<li className="cursor-pointer">
94+
<a href="https://github.com/codeXsit">Github</a>
95+
</li>
96+
</ul>
97+
</div>
98+
99+
{/* Contact Section */}
100+
<div className="col-span-2 sm:col-span-1 flex flex-col flex-1 items-center sm:items-start text-center sm:text-left">
101+
<div className="relative bottom-0 left-0 w-full">
102+
<h4 className="text-lg font-medium mb-4 text-secondary-light relative inline-block sm:block">
103+
CONTACT
104+
<span className="absolute bottom-0 left-0 w-full h-[2px] bg-secondary-light"></span>
105+
</h4>
106+
</div>
107+
<ul className="space-y-2 text-text-light text-sm sm:text-base">
108+
<li>
109+
<a href="mailto:[email protected]" className="underline">
110+
Drop us a Message
111+
</a>
112+
</li>
113+
</ul>
106114
</div>
107-
<ul className="space-y-2 text-text-light text-sm sm:text-base">
108-
<li>
109-
<a href="mailto:[email protected]" className="underline">
110-
Drop us a Message
111-
</a>
112-
</li>
113-
</ul>
114115
</div>
115116
</div>
116117
</div>
117118
</div>
118119

119120
{/* Copyright */}
120121
<div className="border-t border-secondary-light">
121-
<div className="max-w-6xl mx-auto px-4 py-6">
122+
<div className="max-w-6xl mx-auto px-4 py-4">
122123
<p className="text-center text-sm sm:text-base text-secondary-light">
123124
© 2024 CodeX | All rights reserved
124125
</p>

‎src/pages/Contact/index.jsx‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -54,9 +54,6 @@ function Contact() {
5454
<span className="text-outlined uppercase text-8xl font-black text-transparent whitespace-nowrap">
5555
Contact Us
5656
</span>
57-
<span className="text-text-light uppercase text-8xl font-black">
58-
Events
59-
</span>
6057
</div>
6158
<div className="mx-10 mt-16">
6259
<form onSubmit={onSubmit}>

0 commit comments

Comments
 (0)