Skip to content

Commit cacfc94

Browse files
Mitiksha-28Mitiksha-28
committed
layout changes for smaller device
1 parent 197db79 commit cacfc94

File tree

2 files changed

+124
-66
lines changed

2 files changed

+124
-66
lines changed

‎src/assets/images/Teams/sitlogo.svg‎

Lines changed: 8 additions & 9 deletions
Loading

‎src/components/Footer/index.jsx‎

Lines changed: 116 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -1,72 +1,131 @@
1-
import Heading from "@/components/Heading/index";
1+
import React from "react";
2+
import { Link, useLocation } from "react-router-dom";
23
import Logo from "@/assets/images/logo.svg";
3-
import instagramIcon from "@/assets/images/Teams/instagram.svg";
4-
import linkedinIcon from "@/assets/images/Teams/linkedin.svg";
5-
import githubIcon from "@/assets/images/Teams/github.svg";
64
import SitLogo from "@/assets/images/Teams/sitlogo.svg";
75

8-
function Footer() {
9-
return (
10-
<footer className="bg-secondary-dark text-white py-6">
11-
{/* Heading orange */}
12-
<div className="text-center relative bg-primary">
13-
<Heading
14-
text="MADE WITH LOVE BY"
15-
className="my-6"
16-
frontTextStyle="text-text-light"
17-
/>
18-
</div>
6+
const Footer = () => {
7+
const location = useLocation();
8+
9+
const handleLinkClick = () => {
10+
window.scrollTo({ top: 0, behavior: "smooth" });
11+
};
1912

20-
{/* Connect Us */}
21-
<div className="mt-12 text-center">
22-
<h2 className="text-xl font-semibold uppercase">Connect With Us</h2>
23-
<div className="flex flex-col md:flex-row justify-center items-center mt-6 gap-y-6 md:gap-x-8">
24-
{/* SIT Logo */}
25-
<img
26-
src={SitLogo}
27-
alt="Symbiosis Institute of Technology"
28-
className="w-20 md:w-24"
29-
/>
30-
<div className="hidden md:block h-12 w-[1px] bg-gray-500" />
31-
{/* Codex Logo */}
32-
<img src={Logo} alt="Codex Logo" className="w-20 md:w-24" />
13+
return (
14+
<footer className="bg-secondary-dark text-text-light">
15+
{/* 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">
18+
<div className="text-2xl xs:text-4xl sm:text-6xl lg:text-8xl text-outlined text-transparent">
19+
MADE WITH LOVE BY
20+
</div>
21+
<div className="text-text-light text-xl xs:text-2xl sm:text-4xl lg:text-6xl absolute w-full leading-none bottom-[-10%]">
22+
TEAM CODEX
23+
</div>
3324
</div>
3425
</div>
3526

36-
{/* Social media */}
37-
<div className="mt-6 flex justify-center gap-x-6">
38-
<a
39-
href="https://www.linkedin.com/company/codex-sit-pune/"
40-
target="_blank"
41-
rel="noopener noreferrer"
42-
>
43-
<img src={linkedinIcon} alt="LinkedIn" className="w-8 md:w-10" />
44-
</a>
45-
<a
46-
href="https://github.com/codeXsit"
47-
target="_blank"
48-
rel="noopener noreferrer"
49-
>
50-
<img src={githubIcon} alt="GitHub" className="w-8 md:w-10" />
51-
</a>
52-
<a
53-
href="https://www.instagram.com/codex_sit/"
54-
target="_blank"
55-
rel="noopener noreferrer"
56-
>
57-
<img src={instagramIcon} alt="Instagram" className="w-8 md:w-10" />
58-
</a>
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">
30+
<p className="text-secondary-light leading-relaxed">
31+
Our club is committed to creating an engaging environment where
32+
members can learn, collaborate, and grow their coding expertise
33+
through a variety of activities and events.
34+
</p>
35+
<div className="flex flex-col sm:flex-row items-center sm:items-start gap-4 sm:gap-6">
36+
<img
37+
src={SitLogo}
38+
alt="Symbiosis Logo"
39+
className="h-10 sm:h-12"
40+
/>
41+
<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" />
43+
</div>
44+
</div>
45+
46+
<div className="grid sm:grid-cols-3 grid-cols-2 gap-8 text-center sm:text-left ">
47+
{/* Quick Links */}
48+
<div>
49+
<h4 className="text-lg font-medium mb-4 text-secondary-light relative inline-block sm:block">
50+
QUICK LINKS
51+
<span className="absolute bottom-0 left-0 w-full h-[2px] bg-secondary-light"></span>
52+
</h4>
53+
<ul className="space-y-2 text-text-light text-sm sm:text-base">
54+
{[
55+
{ name: "Home", path: "/" },
56+
{ name: "About Us", path: "/about-us" },
57+
{ name: "Our Team", path: "/teams" },
58+
{ name: "Gallery", path: "/gallery" },
59+
{ name: "Events", path: "/events" },
60+
{ name: "Contact", path: "/contact" },
61+
].map((link) => (
62+
<li
63+
key={link.name}
64+
className={`cursor-pointer ${
65+
location.pathname === link.path
66+
? "text-secondary-light"
67+
: ""
68+
}`}
69+
>
70+
<Link to={link.path} onClick={handleLinkClick}>
71+
{link.name}
72+
</Link>
73+
</li>
74+
))}
75+
</ul>
76+
</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
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>
114+
</div>
115+
</div>
116+
</div>
59117
</div>
60118

61119
{/* Copyright */}
62-
<div className="text-center mt-6 border-t border-gray-500 pt-6">
63-
<p className="text-sm">
64-
&copy; 2024 <span className="font-bold">Codex</span> | All Rights
65-
Reserved
66-
</p>
120+
<div className="border-t border-secondary-light">
121+
<div className="max-w-6xl mx-auto px-4 py-6">
122+
<p className="text-center text-sm sm:text-base text-secondary-light">
123+
© 2024 CodeX | All rights reserved
124+
</p>
125+
</div>
67126
</div>
68127
</footer>
69128
);
70-
}
129+
};
71130

72131
export default Footer;

0 commit comments

Comments
 (0)