Skip to content

Commit b407380

Browse files
Miran-FirdausiMiran-Firdausi
authored
Merge pull request #69 from codeXsit/codex-footer
feat: initial design of footer(have issues)
2 parents 12f9da9 + f6a03f5 commit b407380

File tree

4 files changed

+144
-4
lines changed

4 files changed

+144
-4
lines changed

‎src/App.jsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { HashRouter as Router, Routes, Route } from "react-router-dom";
44
import { ToastContainer } from "react-toastify";
55
import routes from "@/routes/index";
66
import Navbar from "@/components/Navbar/index";
7+
import Footer from "@/components/Footer/index";
78
import Cursor from "./components/Cursor";
89
import CursorVariantProvider from "@/context/CursorVariantProvider";
910
import Loader from "@/components/Loader";
@@ -44,7 +45,8 @@ function App() {
4445
key={route.label}
4546
/>
4647
))}
47-
</Routes>
48+
</Routes>
49+
<Footer/>
4850
</Router>
4951
)}
5052
</AnimatePresence>

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

Lines changed: 9 additions & 0 deletions
Loading

‎src/components/Footer/index.jsx‎

Lines changed: 132 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,132 @@
1+
import React from "react";
2+
import { Link, useLocation } from "react-router-dom";
3+
import Logo from "@/assets/images/logo.svg";
4+
import SitLogo from "@/assets/images/Teams/sitlogo.svg";
5+
6+
const Footer = () => {
7+
const location = useLocation();
8+
9+
const handleLinkClick = () => {
10+
window.scrollTo({ top: 0, behavior: "smooth" });
11+
};
12+
13+
return (
14+
<footer className="min-h-screen bg-secondary-dark text-text-light flex flex-col">
15+
{/* Orange Banner */}
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">
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>
24+
</div>
25+
</div>
26+
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">
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-4 md:w-full">
36+
<img
37+
src={SitLogo}
38+
alt="Symbiosis Logo"
39+
className="h-10 md: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 md:h-12" />
43+
</div>
44+
</div>
45+
46+
<div className="flex flex-row gap-8 text-center justify-center sm:text-left ">
47+
{/* Quick Links */}
48+
<div className="flex-1">
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+
<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
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 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>
114+
</div>
115+
</div>
116+
</div>
117+
</div>
118+
</div>
119+
120+
{/* Copyright */}
121+
<div className="border-t border-secondary-light">
122+
<div className="max-w-6xl mx-auto px-4 py-4">
123+
<p className="text-center text-sm sm:text-base text-secondary-light">
124+
© 2024 CodeX | All rights reserved
125+
</p>
126+
</div>
127+
</div>
128+
</footer>
129+
);
130+
};
131+
132+
export default Footer;

‎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)