Skip to content

Commit 3f864f4

Browse files
Mitiksha-28Mitiksha-28
committed
feat:add respponsiveness of about us page
1 parent f8120d7 commit 3f864f4

File tree

3 files changed

+85
-104
lines changed

3 files changed

+85
-104
lines changed

‎index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
</head>
1212

1313
<body>
14-
<div id="root"></div>
14+
<div id="root" style="min-width: 100vw;"></div>
1515
<script type="module" src="/src/main.jsx"></script>
1616
</body>
1717
</html>

‎src/pages/About/index.jsx‎

Lines changed: 82 additions & 100 deletions
Original file line numberDiff line numberDiff line change
@@ -1,129 +1,111 @@
1+
// import React from "react";
12
import Heading from "@/components/Heading/index";
23
import Stock1 from "@/assets/images/About/stockimage1.svg";
34
import Stock3 from "@/assets/images/About/stockimage3.svg";
4-
import Stock4 from "@/assets/images/About/stockimage4.svg";
55
import Oval from "@/assets/images/About/oval.svg";
66
import PageTransition from "../../components/PageTransition";
77

88
function About() {
99
return (
1010
<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.
11+
<div className="flex flex-col min-h-screen">
12+
{/* About Us Section */}
13+
<section className="bg-secondary-dark text-text-light py-12 px-4 md:px-8">
14+
<Heading
15+
text="ABOUT US"
16+
className="mb-8"
17+
frontTextStyle="text-text-light"
18+
/>
19+
<div className="max-w-4xl mx-auto">
20+
<p className="text-center text-base md:text-lg mb-8">
21+
Codex is the coding club at Symbiosis Institute of Technology that
22+
brings together students passionate about technology and
23+
programming. Our club is committed to creating an engaging
24+
environment where members can learn, collaborate, and grow their
25+
coding expertise through a variety of activities and events
2426
</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-
/>
27+
<div className="flex flex-col md:flex-row justify-center gap-4">
28+
<img
29+
src={Stock1}
30+
alt="About Us 1"
31+
className="w-full md:w-1/2 max-w-md mx-auto rounded-2xl h-auto object-cover"
32+
/>
33+
<img
34+
src={Stock3}
35+
alt="About Us 2"
36+
className="w-full md:w-1/2 max-w-md mx-auto rounded-2xl h-auto object-cover"
37+
/>
38+
</div>
3039
</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.
40+
</section>
41+
42+
{/* Our Vision Section */}
43+
<section className="bg-background-light text-text-dark py-12 px-4 md:px-8 relative">
44+
<Heading
45+
text="OUR VISION"
46+
className="mb-8"
47+
frontTextStyle="text-primary"
48+
/>
49+
<div className="max-w-4xl mx-auto">
50+
<p className="text-center text-base md:text-lg mb-8">
51+
To be a leading coding club that inspires students, driving
52+
excellence in programming and technology at Symbiosis Institute of
53+
Technology and beyond.
4454
</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>
4855
</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">
56+
</section>
57+
58+
{/* Our Mission Section */}
59+
<section className="bg-background-light text-text-dark py-12 px-4 md:px-8 relative">
60+
<Heading
61+
text="OUR MISSION"
62+
className="mb-8"
63+
frontTextStyle="text-primary"
64+
/>
65+
<div className="max-w-4xl mx-auto relative z-10">
66+
<p className="text-center text-base md:text-lg mb-8">
67+
To empower students (from beginner coders to advanced) with coding
68+
skills and knowledge through hands-on learning experiences,
69+
webinars and workshops fostering a community of innovative
70+
thinkers and problem-solvers.
71+
</p>
72+
</div>
73+
<img
74+
src={Oval}
75+
alt="Oval"
76+
className="w-full absolute bottom-0 left-0 z-0"
77+
/>
78+
</section>
79+
80+
{/* What We Do Section */}
81+
<section className="bg-secondary-dark text-text-light py-12 px-4 md:px-8 relative">
7482
<Heading
7583
text="WHAT WE DO?"
76-
className="mt-40 space-y-16"
84+
className="mb-8"
7785
frontTextStyle="text-text-light"
7886
/>
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.
87+
<div className="max-w-4xl mx-auto">
88+
<p className="text-center text-base md:text-lg mb-12">
89+
We organize coding workshops, competitions, collaborative projects
90+
and webinars to help students enhance their programming abilities.
91+
We also host guest lectures and webinars with industry experts to
92+
provide valuable insights and career guidance. Through our
93+
activities, we aim to build a supportive coding community.
9094
</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">
95+
<div className="flex flex-col md:flex-row justify-center gap-8">
9596
<img
9697
src={Stock1}
97-
alt="Stock1"
98-
className="h-96 w-96 object-none mx-auto"
98+
alt="What We Do 1"
99+
className="w-full md:w-1/2 max-w-md mx-auto rounded-lg h-auto object-cover"
99100
/>
100-
<div className="w-24 h-24 rounded-full bg-background-light absolute top-60 right-48">
101-
{}
102-
</div>
103101
<img
104102
src={Stock3}
105-
alt="Stock3"
106-
className="h-96 w-96 mx-auto z-0"
103+
alt="What We Do 2"
104+
className="w-full md:w-1/2 max-w-md mx-auto rounded-lg h-auto object-cover"
107105
/>
108106
</div>
109107
</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>
108+
</section>
127109
</div>
128110
</PageTransition>
129111
);

‎src/pages/Gallery/Gallery.jsx‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -105,7 +105,6 @@ const images = [
105105
},
106106
];
107107

108-
109108
export default function Gallery() {
110109
const [modalOpen, setModalOpen] = useState(false);
111110
const [selectedImageIndex, setSelectedImageIndex] = useState(null);
@@ -124,14 +123,14 @@ export default function Gallery() {
124123
// Function to navigate to the previous image
125124
const goToPrevious = () => {
126125
setSelectedImageIndex((prevIndex) =>
127-
prevIndex === 0 ? images.length - 1 : prevIndex - 1
126+
prevIndex === 0 ? images.length - 1 : prevIndex - 1,
128127
);
129128
};
130129

131130
// Function to navigate to the next image
132131
const goToNext = () => {
133132
setSelectedImageIndex((prevIndex) =>
134-
prevIndex === images.length - 1 ? 0 : prevIndex + 1
133+
prevIndex === images.length - 1 ? 0 : prevIndex + 1,
135134
);
136135
};
137136

0 commit comments

Comments
 (0)