Skip to content

Commit 54cde1a

Browse files
Miran-FirdausiMiran-Firdausi
committed
fix: responsiveness imrovement
1 parent b407380 commit 54cde1a

File tree

4 files changed

+84
-83
lines changed

4 files changed

+84
-83
lines changed

‎src/components/Footer/index.jsx‎

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
1-
import React from "react";
21
import { Link, useLocation } from "react-router-dom";
32
import Logo from "@/assets/images/logo.svg";
43
import SitLogo from "@/assets/images/Teams/sitlogo.svg";
54

6-
const Footer = () => {
5+
function Footer() {
76
const location = useLocation();
87

98
const handleLinkClick = () => {
@@ -38,7 +37,7 @@ const Footer = () => {
3837
alt="Symbiosis Logo"
3938
className="h-10 md:h-12"
4039
/>
41-
<div className="hidden sm:block w-px h-10 bg-secondary-light"></div>
40+
<div className="hidden sm:block w-px h-10 bg-secondary-light" />
4241
<img src={Logo} alt="CodeX Logo" className="h-10 md:h-12" />
4342
</div>
4443
</div>
@@ -48,7 +47,7 @@ const Footer = () => {
4847
<div className="flex-1">
4948
<h4 className="text-lg font-medium mb-4 text-secondary-light relative inline-block sm:block">
5049
QUICK LINKS
51-
<span className="absolute bottom-0 left-0 w-full h-[2px] bg-secondary-light"></span>
50+
<span className="absolute bottom-0 left-0 w-full h-[2px] bg-secondary-light" />
5251
</h4>
5352
<ul className="space-y-2 text-text-light text-sm sm:text-base">
5453
{[
@@ -79,7 +78,7 @@ const Footer = () => {
7978
<div className="flex-1">
8079
<h4 className="text-lg font-medium mb-4 text-secondary-light relative inline-block sm:block ">
8180
SOCIAL
82-
<span className="absolute bottom-0 left-0 w-full h-[2px] bg-secondary-light"></span>
81+
<span className="absolute bottom-0 left-0 w-full h-[2px] bg-secondary-light" />
8382
</h4>
8483
<ul className="space-y-2 text-text-light text-sm sm:text-base">
8584
<li className="cursor-pointer">
@@ -101,7 +100,7 @@ const Footer = () => {
101100
<div className="relative bottom-0 left-0 w-full">
102101
<h4 className="text-lg font-medium mb-4 text-secondary-light relative inline-block sm:block">
103102
CONTACT
104-
<span className="absolute bottom-0 left-0 w-full h-[2px] bg-secondary-light"></span>
103+
<span className="absolute bottom-0 left-0 w-full h-[2px] bg-secondary-light" />
105104
</h4>
106105
</div>
107106
<ul className="space-y-2 text-text-light text-sm sm:text-base">
@@ -127,6 +126,6 @@ const Footer = () => {
127126
</div>
128127
</footer>
129128
);
130-
};
129+
}
131130

132131
export default Footer;

‎src/pages/Contact/index.jsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -44,20 +44,20 @@ function Contact() {
4444
>
4545
{result}
4646
</div>
47-
<div className="mt-8 flex gap-x-8 overflow-hidden">
48-
<span className="text-outlined uppercase text-8xl font-black text-transparent whitespace-nowrap">
47+
<div className="mt-8 flex gap-x-4 md:gap-x-8 overflow-hidden justify-center">
48+
<span className="text-outlined uppercase text-4xl md:text-8xl font-black text-transparent whitespace-nowrap">
4949
Contact Us
5050
</span>
51-
<span className="text-text-light uppercase text-8xl font-black whitespace-nowrap">
51+
<span className="text-text-light uppercase text-4xl md:text-8xl font-black whitespace-nowrap">
5252
Contact Us
5353
</span>
54-
<span className="text-outlined uppercase text-8xl font-black text-transparent whitespace-nowrap">
54+
<span className="text-outlined uppercase text-4xl md:text-8xl font-black text-transparent whitespace-nowrap">
5555
Contact Us
5656
</span>
5757
</div>
58-
<div className="mx-10 mt-16">
58+
<div className="mx-8 md:mx-10 mt-8">
5959
<form onSubmit={onSubmit}>
60-
<div className="m-auto flex flex-col p-8 bg-background-elevation rounded-lg shadow-lg px-12 py-8 max-w-2xl">
60+
<div className="m-auto flex flex-col p-8 bg-background-elevation rounded-lg shadow-lg px-8 md:px-12 py-8 max-w-2xl">
6161
<span className=" text-secondary-light uppercase tracking-widest m-auto mb-3">
6262
Drop us a message
6363
</span>
@@ -87,7 +87,7 @@ function Contact() {
8787
className="bg-background-elevation py-2 my-3 border-b-2 border-secondary-light text-text-light outline-none"
8888
required
8989
/>
90-
<div className=" flex justify-end mt-4">
90+
<div className=" flex justify-center md:justify-end mt-4">
9191
<button
9292
type="submit"
9393
className="bg-transparent rounded-full border-2 border-secondary-light px-8 py-2 text-secondary-light cursor-pointer"

‎src/pages/Gallery/Gallery.jsx‎

Lines changed: 68 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -161,76 +161,78 @@ export default function Gallery() {
161161

162162
return (
163163
<PageTransition>
164-
<Heading
165-
text="Gallery"
166-
className="text-center absolute top-0 left-0 right-0 mb-24"
167-
/>
168-
<div className="grid grid-cols-2 md:grid-cols-3 gap-4 m-[5%]">
169-
{images.map((image, index) => (
170-
<div
171-
role="button"
172-
aria-label="Open"
173-
onClick={() => openModal(index)}
174-
onKeyDown={(e) => {
175-
if (e.key === "Enter" || e.key === " ") {
176-
openModal(index);
177-
}
178-
}}
179-
tabIndex={0} // Makes the div focusable
180-
key={image.src}
181-
className="cursor-pointer"
182-
>
183-
<img
184-
className="h-auto max-w-full rounded-lg aspect-square"
185-
src={image.src}
186-
alt={`Gallery img ${index + 1}`}
187-
/>
188-
</div>
189-
))}
190-
191-
{modalOpen ? (
192-
<div className="fixed inset-0 flex items-center justify-center z-50 bg-black bg-opacity-75 overflow-y-auto">
193-
<div className="relative max-h-screen max-w-screen-lg p-4 bg-white rounded-lg">
194-
<button
195-
type="button"
196-
className="absolute top-0 right-0 m-4 text-white bg-gray-500 hover:bg-gray-700 font-bold py-2 px-4 border border-gray-700 rounded"
197-
onClick={closeModal}
198-
aria-label="Close"
199-
>
200-
x
201-
</button>
202-
<button
203-
className="absolute left-0 top-1/2 transform -translate-y-1/2 text-black font-bold py-2 px-4 border border-black rounded-3xl ml-5"
204-
onClick={goToPrevious}
205-
aria-label="Previous Image"
206-
type="button"
207-
>
208-
&lt;&lt;
209-
</button>
210-
<button
211-
className="absolute right-0 top-1/2 transform -translate-y-1/2 text-black font-bold py-2 px-4 border border-black rounded-3xl mr-5"
212-
onClick={goToNext}
213-
aria-label="Next Image"
214-
type="button"
215-
>
216-
&gt;&gt;
217-
</button>
164+
<div className="pt-8 pb-16">
165+
<Heading
166+
text="Gallery"
167+
className="text-center absolute top-0 left-0 right-0 mb-12 md:mb-24"
168+
/>
169+
<div className="grid grid-cols-2 md:grid-cols-3 gap-4 m-[5%]">
170+
{images.map((image, index) => (
171+
<div
172+
role="button"
173+
aria-label="Open"
174+
onClick={() => openModal(index)}
175+
onKeyDown={(e) => {
176+
if (e.key === "Enter" || e.key === " ") {
177+
openModal(index);
178+
}
179+
}}
180+
tabIndex={0} // Makes the div focusable
181+
key={image.src}
182+
className="cursor-pointer"
183+
>
218184
<img
219-
className="max-h-[80vh] max-w-[80vw] rounded-lg mb-4"
220-
src={images[selectedImageIndex].src}
221-
alt={`Selected gallery img ${selectedImageIndex + 1}`}
185+
className="h-auto max-w-full rounded-lg aspect-square"
186+
src={image.src}
187+
alt={`Gallery img ${index + 1}`}
222188
/>
223-
<div className="text-center max-w-[80vw]">
224-
<h3 className="text-lg font-semibold truncate">
225-
{images[selectedImageIndex].caption}
226-
</h3>
227-
<p className="text-sm text-gray-500">
228-
Date: {images[selectedImageIndex].date}
229-
</p>
189+
</div>
190+
))}
191+
192+
{modalOpen ? (
193+
<div className="fixed inset-0 flex items-center justify-center z-50 bg-black bg-opacity-75 overflow-y-auto">
194+
<div className="relative max-h-screen max-w-screen-lg p-4 bg-white rounded-lg">
195+
<button
196+
type="button"
197+
className="absolute top-0 right-0 m-4 text-white bg-gray-500 hover:bg-gray-700 font-bold py-2 px-4 border border-gray-700 rounded"
198+
onClick={closeModal}
199+
aria-label="Close"
200+
>
201+
x
202+
</button>
203+
<button
204+
className="absolute left-0 top-1/2 transform -translate-y-1/2 text-black font-bold py-2 px-4 border border-black rounded-3xl ml-5"
205+
onClick={goToPrevious}
206+
aria-label="Previous Image"
207+
type="button"
208+
>
209+
&lt;&lt;
210+
</button>
211+
<button
212+
className="absolute right-0 top-1/2 transform -translate-y-1/2 text-black font-bold py-2 px-4 border border-black rounded-3xl mr-5"
213+
onClick={goToNext}
214+
aria-label="Next Image"
215+
type="button"
216+
>
217+
&gt;&gt;
218+
</button>
219+
<img
220+
className="max-h-[80vh] max-w-[80vw] rounded-lg mb-4"
221+
src={images[selectedImageIndex].src}
222+
alt={`Selected gallery img ${selectedImageIndex + 1}`}
223+
/>
224+
<div className="text-center max-w-[80vw]">
225+
<h3 className="text-lg font-semibold truncate">
226+
{images[selectedImageIndex].caption}
227+
</h3>
228+
<p className="text-sm text-gray-500">
229+
Date: {images[selectedImageIndex].date}
230+
</p>
231+
</div>
230232
</div>
231233
</div>
232-
</div>
233-
) : null}
234+
) : null}
235+
</div>
234236
</div>
235237
</PageTransition>
236238
);

‎src/pages/Teams/index.jsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,12 +13,12 @@ function Teams() {
1313
<PageTransition>
1414
<div className="min-h-screen">
1515
<div className="flex justify-center items-center">
16-
<div className="flex-grow mx-auto pr-5 pl-5 space-x-30 py-8">
16+
<div className="flex-grow mx-auto px-5 space-x-30 pt-8 pb-16">
1717
<Heading
1818
text="MEET OUR TEAM"
19-
className="text-center absolute top-0 left-0 right-0 mb-24"
19+
className="text-center absolute top-0 left-0 right-0 mb-12 md:mb-24"
2020
/>
21-
<div className="flex flex-row flex-wrap gap-16 justify-center items-center mt-12">
21+
<div className="flex flex-row flex-wrap gap-8 md:gap-16 justify-center items-center mt-4 sm:mt-12">
2222
{teamMembers}
2323
</div>
2424
{/* <SkewButton text="SEE ALL" link="/all-members" className="mt-16" /> */}

0 commit comments

Comments
 (0)