Skip to content

Commit 3b00b6c

Browse files
Miran-FirdausiMiran-Firdausi
authored
Merge pull request #68 from codeXsit/codex-1-about-page
feat:add respponsiveness of about us page
2 parents 2a1cfe2 + 29b7ec2 commit 3b00b6c

File tree

2 files changed

+143
-104
lines changed

2 files changed

+143
-104
lines changed

‎src/components/Footer/index.jsx‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
import { useState, useContext } from "react";
2+
import { Link, useLocation } from "react-router-dom";
3+
import PropTypes from "prop-types";
4+
import SymbiosisLogo from "@/assets/images/symbiosis-logo.png";
5+
import CodexLogo from "@/assets/images/codex-logo.png";
6+
import { CursorVariantContext } from "@/context/CursorVariantProvider";
7+
import Heading from "@/components/Heading/index";
8+
9+
function Footer() {
10+
const [isOpen, setIsOpen] = useState(false);
11+
const location = useLocation();
12+
13+
const { setCursorVariantNone, setCursorVariantDefault } =
14+
useContext(CursorVariantContext);
15+
16+
const handleLinkClick = () => {
17+
setIsOpen(false);
18+
};
19+
20+
return (
21+
<footer className="bg-primary py-6 mt-8">
22+
<div className="container mx-auto">
23+
<div className="flex justify-between items-center mb-4">
24+
<p className="text-white font-bold">CONNECT WITH US</p>
25+
<div className="flex space-x-4">
26+
<a href="#" className="text-white hover:text-gray-300">
27+
<i className="fab fa-instagram"></i>
28+
</a>
29+
<a href="#" className="text-white hover:text-gray-300">
30+
<i className="fab fa-facebook-f"></i>
31+
</a>
32+
<a href="#" className="text-white hover:text-gray-300">
33+
<i className="fab fa-linkedin-in"></i>
34+
</a>
35+
<a href="#" className="text-white hover:text-gray-300">
36+
<i className="fab fa-github"></i>
37+
</a>
38+
</div>
39+
</div>
40+
<div className="flex justify-between items-center">
41+
<div className="flex items-center space-x-4">
42+
<img
43+
src={SymbiosisLogo}
44+
alt="Symbiosis Institute of Technology"
45+
className="h-8"
46+
/>
47+
<p className="text-white font-bold">MADE WITH LOVE BY</p>
48+
<img src={CodexLogo} alt="Team Codex" className="h-8" />
49+
</div>
50+
<p className="text-center text-white">
51+
© 2024 CODEX | ALL RIGHTS RESERVED
52+
</p>
53+
</div>
54+
</div>
55+
</footer>
56+
);
57+
}
58+
59+
export default Footer;

‎src/pages/About/index.jsx‎

Lines changed: 84 additions & 104 deletions
Original file line numberDiff line numberDiff line change
@@ -1,129 +1,109 @@
1+
// import React from "react";
12
import Heading from "@/components/Heading/index";
2-
import Stock1 from "@/assets/images/About/stockimage1.svg";
3-
import Stock3 from "@/assets/images/About/stockimage3.svg";
4-
import Stock4 from "@/assets/images/About/stockimage4.svg";
53
import Oval from "@/assets/images/About/oval.svg";
64
import PageTransition from "../../components/PageTransition";
75

86
function About() {
97
return (
108
<PageTransition>
11-
<div className="min-h-screen">
12-
<Heading
13-
text="ABOUT US"
14-
className="my-6"
15-
frontTextStyle="text-text-light"
16-
/>
17-
<div className="flex flex-grow flex-wrap items-center overflow-hidden">
18-
<div className="container space-y-8">
19-
<p className="p-2 px-64 mx-auto m-w-12 text-xl text-wrap text-text-light text-center mt-6 space-y-16">
20-
Praesent vestibulum libero non diam consequat euismod. Maecenas
21-
purus sapien, mollis ut dapibus et, varius in ipsum. Morbi mollis
22-
varius tincidunt. Lorem ipsum dolor sit amet, consectetur
23-
adipiscing elit.
9+
<div className="flex flex-col min-h-screen">
10+
{/* About Us Section */}
11+
<section className="bg-secondary-dark text-text-light py-8 px-4 md:px-8">
12+
<Heading
13+
text="ABOUT US"
14+
className="mb-8"
15+
frontTextStyle="text-text-light"
16+
/>
17+
<div className="max-w-4xl mx-auto">
18+
<p className="text-center text-base md:text-lg mb-8">
19+
Codex is the coding club at Symbiosis Institute of Technology that
20+
brings together students passionate about technology and
21+
programming. Our club is committed to creating an engaging
22+
environment where members can learn, collaborate, and grow their
23+
coding expertise through a variety of activities and events
2424
</p>
25-
<img
26-
src={Stock1}
27-
alt="Stock1"
28-
className="m-h-12 m-w-12 mx-auto space-y-8 rounded-2xl"
29-
/>
25+
<div className="flex flex-col md:flex-row justify-center gap-4">
26+
<img
27+
src="/CodeX-Website/gallery/Laser Lock/ll4.jpg"
28+
alt="About Us 1"
29+
className="w-full md:w-1/2 max-w-md mx-auto rounded-2xl h-auto object-cover"
30+
/>
31+
<img
32+
src="/CodeX-Website/gallery/Laser Lock/ll5.jpg"
33+
alt="About Us 2"
34+
className="w-full md:w-1/2 max-w-md mx-auto rounded-2xl h-auto object-cover"
35+
/>
36+
</div>
3037
</div>
31-
</div>
32-
<Heading
33-
text="OUR MISSION"
34-
className="my-12"
35-
frontTextStyle="text-text-light"
36-
/>
37-
<div className="flex flex-grow flex-wrap items-center relative">
38-
<div className="container space-y-8">
39-
<p className="p-2 px-64 mx-auto m-w-12 text-xl text-wrap text-text-light text-center mt-6 space-y-16">
40-
Praesent vestibulum libero non diam consequat euismod. Maecenas
41-
purus sapien, mollis ut dapibus et, varius in ipsum. Morbi mollis
42-
varius tincidunt. Lorem ipsum dolor sit amet, consectetur
43-
adipiscing elit.
38+
</section>
39+
40+
{/* Our Vision Section */}
41+
<section className="bg-background-light text-text-dark py-12 px-4 md:px-8 relative">
42+
<Heading
43+
text="OUR VISION"
44+
className="mb-8"
45+
frontTextStyle="text-primary"
46+
/>
47+
<div className="max-w-4xl mx-auto">
48+
<p className="text-center text-base md:text-lg mb-8">
49+
To be a leading coding club that inspires students, driving
50+
excellence in programming and technology at Symbiosis Institute of
51+
Technology and beyond.
4452
</p>
45-
<div className="w-48 h-24 rounded-tl-full rounded-tr-full bg-background-light absolute -bottom-15 right-20">
46-
{}
47-
</div>
4853
</div>
49-
</div>
50-
</div>
51-
<div className="bg-background-light min-h-screen relative">
52-
<div className="w-48 h-24 rounded-bl-full rounded-br-full bg-primary absolute bottom-15 right-20">
53-
{}
54-
</div>
55-
<Heading
56-
text="OUR VISION"
57-
className="mt-32"
58-
frontTextStyle="text-primary"
59-
/>
60-
<div className="container space-y-8">
61-
<p className="p-2 px-64 py-32 space-y-16 mx-auto m-w-12 text-xl text-wrap text-text-dark text-center mt-6">
62-
Praesent vestibulum libero non diam consequat euismod. Maecenas
63-
purus sapien, mollis ut dapibus et, varius in ipsum. Morbi mollis
64-
varius tincidunt. Lorem ipsum dolor sit amet, consectetur adipiscing
65-
elit.
66-
</p>
67-
</div>
68-
<div className="width-full">
69-
<img src={Oval} alt="Oval" className="absolute bottom-0" />
70-
</div>
71-
</div>
72-
<div className="min-h-screen overflow-hidden">
73-
<div className="items-center relative">
54+
</section>
55+
56+
{/* Our Mission Section */}
57+
<section className="bg-background-light text-text-dark py-12 px-4 md:px-8 relative">
58+
<Heading
59+
text="OUR MISSION"
60+
className="mb-8"
61+
frontTextStyle="text-primary"
62+
/>
63+
<div className="max-w-4xl mx-auto relative z-10">
64+
<p className="text-center text-base md:text-lg mb-8">
65+
To empower students (from beginner coders to advanced) with coding
66+
skills and knowledge through hands-on learning experiences,
67+
webinars and workshops fostering a community of innovative
68+
thinkers and problem-solvers.
69+
</p>
70+
</div>
71+
<img
72+
src={Oval}
73+
alt="Oval"
74+
className="w-full absolute bottom-0 left-0 z-0"
75+
/>
76+
</section>
77+
78+
{/* What We Do Section */}
79+
<section className="bg-secondary-dark text-text-light py-12 px-4 md:px-8 relative">
7480
<Heading
7581
text="WHAT WE DO?"
76-
className="mt-40 space-y-16"
82+
className="mb-8"
7783
frontTextStyle="text-text-light"
7884
/>
79-
<div className="w-20 h-20 rounded-full bg-primary absolute -top-10 right-10">
80-
{}
81-
</div>
82-
</div>
83-
<div className="flex flex-wrap items-center relative">
84-
<div className="space-y-8">
85-
<p className="p-2 px-64 mx-auto m-w-12 text-xl text-wrap text-text-light text-center mt-6 space-y-6">
86-
Praesent vestibulum libero non diam consequat euismod. Maecenas
87-
purus sapien, mollis ut dapibus et, varius in ipsum. Morbi mollis
88-
varius tincidunt. Lorem ipsum dolor sit amet, consectetur
89-
adipiscing elit.
85+
<div className="max-w-4xl mx-auto">
86+
<p className="text-center text-base md:text-lg mb-12">
87+
We organize coding workshops, competitions, collaborative projects
88+
and webinars to help students enhance their programming abilities.
89+
We also host guest lectures and webinars with industry experts to
90+
provide valuable insights and career guidance. Through our
91+
activities, we aim to build a supportive coding community.
9092
</p>
91-
<div className="w-12 h-12 rounded-full bg-background-light absolute top-2 left-10">
92-
{}
93-
</div>
94-
<div className="flex flex-row items-center flex-grow px-64 py-8">
93+
<div className="flex flex-col md:flex-row justify-center gap-8">
9594
<img
96-
src={Stock1}
97-
alt="Stock1"
98-
className="h-96 w-96 object-none mx-auto"
95+
src="/CodeX-Website/gallery/Community Session/cs4.jpg"
96+
alt="What We Do 1"
97+
className="w-full md:w-1/2 max-w-md mx-auto rounded-lg h-auto object-cover"
9998
/>
100-
<div className="w-24 h-24 rounded-full bg-background-light absolute top-60 right-48">
101-
{}
102-
</div>
10399
<img
104-
src={Stock3}
105-
alt="Stock3"
106-
className="h-96 w-96 mx-auto z-0"
100+
src="/CodeX-Website/gallery/AIML SESSION/aiml2.jpg"
101+
alt="What We Do 2"
102+
className="w-full md:w-1/2 max-w-md mx-auto rounded-lg h-auto object-cover"
107103
/>
108104
</div>
109105
</div>
110-
</div>
111-
</div>
112-
<div className="min-h-fit my-48 px-8">
113-
<div className="flex flex-row">
114-
<img src={Stock4} alt="Stock4" className="max-h-96 max-w-96" />
115-
<div className="flex flex-wrap px-12 mt-12">
116-
<p className="text-5xl text-text-light font-bold max-w-screen font-poppins">
117-
OUR VISION
118-
</p>
119-
<p className="mx-auto max-w-screen text-xl text-wrap text-text-light text-left">
120-
Praesent vestibulum libero non diam consequat euismod. Maecenas
121-
purus sapien, mollis ut dapibus et, varius in ipsum. Morbi mollis
122-
varius tincidunt. Lorem ipsum dolor sit amet, consectetur
123-
adipiscing elit.
124-
</p>
125-
</div>
126-
</div>
106+
</section>
127107
</div>
128108
</PageTransition>
129109
);

0 commit comments

Comments
 (0)