Skip to content

Commit 011c693

Browse files
GenDeltaGenDelta
committed
fix: fixed overflow issues
1 parent 6e3c2f8 commit 011c693

File tree

4 files changed

+101
-85
lines changed

4 files changed

+101
-85
lines changed

‎src/components/AboutUs/index.jsx‎

Lines changed: 91 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -1,86 +1,107 @@
1-
import Marquee from 'react-fast-marquee'
2-
import Card from '@/components/Card';
1+
import Marquee from "react-fast-marquee";
2+
import Card from "@/components/Card";
33

44
export default function AboutSection() {
55
const images1 = [
6-
{ src: '/placeholder.svg?height=250&width=250', id: 'image1-1' },
7-
{ src: '/placeholder.svg?height=250&width=250', id: 'image1-2' },
8-
{ src: '/placeholder.svg?height=250&width=250', id: 'image1-3' },
9-
{ src: '/placeholder.svg?height=250&width=250', id: 'image1-4' }
6+
{ src: "/placeholder.svg?height=250&width=250", id: "image1-1" },
7+
{ src: "/placeholder.svg?height=250&width=250", id: "image1-2" },
8+
{ src: "/placeholder.svg?height=250&width=250", id: "image1-3" },
9+
{ src: "/placeholder.svg?height=250&width=250", id: "image1-4" },
1010
];
1111

1212
const images2 = [
13-
{ src: '/placeholder.svg?height=250&width=250', id: 'image2-1' },
14-
{ src: '/placeholder.svg?height=250&width=250', id: 'image2-2' },
15-
{ src: '/placeholder.svg?height=250&width=250', id: 'image2-3' },
16-
{ src: '/placeholder.svg?height=250&width=250', id: 'image2-4' }
13+
{ src: "/placeholder.svg?height=250&width=250", id: "image2-1" },
14+
{ src: "/placeholder.svg?height=250&width=250", id: "image2-2" },
15+
{ src: "/placeholder.svg?height=250&width=250", id: "image2-3" },
16+
{ src: "/placeholder.svg?height=250&width=250", id: "image2-4" },
1717
];
1818

1919
return (
2020
<>
2121
<section className="relative min-h-fit bg-secondary-dark text-white py-12 px-4 md:px-6 lg:px-8 overflow-hidden">
22-
<div className="absolute top-4 -left-1 w-8 h-8 bg-white rounded-full opacity-100" />
23-
<div className="absolute -top-2 right-20 w-20 h-20 bg-primary-dark rounded-full opacity-100 z-10" />
24-
<div className="max-w-full mx-auto px-24 relative z-20">
25-
<h1
26-
className="text-secondary-dark shadow-black font-poppins font-extrabold text-4xl md:text-6xl lg:text-8xl mb-12 relative z-20"
27-
style={{
28-
WebkitTextStroke: '2px #737373'
29-
}}
30-
>
31-
ABOUT US
32-
</h1>
33-
34-
<div className="mb-16 max-w-full relative">
35-
<p className="text-xl md:text-3xl font-poppins font-bold leading-relaxed">
36-
<span className="text-text-aboutuslight">Codex is the coding club at </span>
37-
<span className="text-text-aboutusorange">Symbiosis Institute of Technology</span>
38-
<span className="text-text-aboutuslight"> that brings together students passionate about technology and programming. Our club is committed to creating an engaging environment </span>
39-
<span className="text-text-aboutusdark">where members can learn, collaborate, and grow their coding expertise through a variety of activities and events.</span>
40-
</p>
41-
<button type="button" className="absolute -bottom-6 right-0 text-xl underline text-text-aboutuslight hover:text-text-light transition-colors">
42-
Know More
43-
</button>
44-
</div>
45-
</div>
46-
</section>
47-
<div className="space-y-8 w-full px-0">
48-
<div className="absolute bottom-0 -right-2 w-24 h-24 bg-white rounded-full opacity-100" />
49-
<Marquee
50-
gradient
51-
gradientColor={[28, 28, 28]}
52-
speed={40}
53-
className="overflow-hidden w-full"
22+
<div className="absolute top-4 -left-1 w-8 h-8 bg-white rounded-full opacity-100" />
23+
<div className="absolute -top-2 right-20 w-20 h-20 bg-primary-dark rounded-full opacity-100 z-10" />
24+
<div className="max-w-full mx-auto px-24 relative z-20">
25+
<h1
26+
className="text-secondary-dark shadow-black font-poppins font-extrabold text-4xl md:text-6xl lg:text-8xl mb-12 relative z-20"
27+
style={{
28+
WebkitTextStroke: "2px #737373",
29+
}}
5430
>
55-
{images1.map((image) => (
56-
<Card key={image.id} className="mx-4 overflow-hidden bg-zinc-800 border-zinc-700">
57-
<img
58-
src={image.src}
59-
alt={`Gallery ${image.id}`}
60-
className="h-[150px] w-[150px] md:h-[250px] md:w-[250px] object-cover hover:scale-105 transition-transform duration-300"
61-
/>
62-
</Card>
63-
))}
64-
</Marquee>
31+
ABOUT US
32+
</h1>
6533

66-
<Marquee
67-
gradient
68-
gradientColor={[28, 28, 28]}
69-
speed={40}
70-
direction="right"
71-
className="overflow-hidden w-full"
72-
>
73-
{images2.map((image) => (
74-
<Card key={image.id} className="mx-4 overflow-hidden bg-zinc-800 border-zinc-700">
75-
<img
76-
src={image.src}
77-
alt={`Gallery ${image.id}`}
78-
className="h-[150px] w-[150px] md:h-[250px] md:w-[250px] object-cover hover:scale-105 transition-transform duration-300"
79-
/>
80-
</Card>
81-
))}
82-
</Marquee>
34+
<div className="mb-16 max-w-full relative">
35+
<p className="text-xl md:text-3xl font-poppins font-bold leading-relaxed">
36+
<span className="text-text-aboutuslight">
37+
Codex is the coding club at{" "}
38+
</span>
39+
<span className="text-text-aboutusorange">
40+
Symbiosis Institute of Technology
41+
</span>
42+
<span className="text-text-aboutuslight">
43+
{" "}
44+
that brings together students passionate about technology and
45+
programming. Our club is committed to creating an engaging
46+
environment{" "}
47+
</span>
48+
<span className="text-text-aboutusdark">
49+
where members can learn, collaborate, and grow their coding
50+
expertise through a variety of activities and events.
51+
</span>
52+
</p>
53+
<button
54+
type="button"
55+
className="absolute -bottom-6 right-0 text-xl underline text-text-aboutuslight hover:text-text-light transition-colors"
56+
>
57+
Know More
58+
</button>
59+
</div>
8360
</div>
61+
</section>
62+
<div className="relative space-y-8 max-w-full px-0 overflow-hidden">
63+
<div className="absolute bottom-96 -right-2 w-24 h-24 bg-white rounded-full opacity-100" />
64+
<Marquee
65+
gradient
66+
gradientColor={[28, 28, 28]}
67+
speed={40}
68+
className="overflow-hidden w-full"
69+
>
70+
{images1.map((image) => (
71+
<Card
72+
key={image.id}
73+
className="mx-4 overflow-hidden bg-zinc-800 border-zinc-700"
74+
>
75+
<img
76+
src={image.src}
77+
alt={`Gallery ${image.id}`}
78+
className="h-[150px] w-[150px] md:h-[250px] md:w-[250px] object-cover hover:scale-105 transition-transform duration-300"
79+
/>
80+
</Card>
81+
))}
82+
</Marquee>
83+
84+
<Marquee
85+
gradient
86+
gradientColor={[28, 28, 28]}
87+
speed={40}
88+
direction="right"
89+
className="overflow-hidden w-full"
90+
>
91+
{images2.map((image) => (
92+
<Card
93+
key={image.id}
94+
className="mx-4 overflow-hidden bg-zinc-800 border-zinc-700"
95+
>
96+
<img
97+
src={image.src}
98+
alt={`Gallery ${image.id}`}
99+
className="h-[150px] w-[150px] md:h-[250px] md:w-[250px] object-cover hover:scale-105 transition-transform duration-300"
100+
/>
101+
</Card>
102+
))}
103+
</Marquee>
104+
</div>
84105
</>
85106
);
86-
}
107+
}

‎src/components/Card/index.jsx‎

Lines changed: 7 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,17 @@
1-
import PropTypes from 'prop-types';
1+
import PropTypes from "prop-types";
22

33
export function Card({ children, className }) {
4-
return (
5-
<div className={`rounded-3xl shadow-lg ${className}`}>
6-
{children}
7-
</div>
8-
);
4+
return <div className={`rounded-3xl shadow-lg ${className}`}>{children}</div>;
95
}
106

117
Card.propTypes = {
12-
children: PropTypes.node,
13-
className: PropTypes.string,
8+
children: PropTypes.node,
9+
className: PropTypes.string,
1410
};
1511

1612
Card.defaultProps = {
17-
children: null,
18-
className: '',
13+
children: null,
14+
className: "",
1915
};
2016

21-
export default Card;
17+
export default Card;

‎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

‎src/routes/index.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ const routes = [
1212
label: "AboutUs",
1313
path: "/about-us-test",
1414
requireAuth: false,
15-
render: <AboutSection />
15+
render: <AboutSection />,
1616
},
1717
{
1818
label: "Loader",

0 commit comments

Comments
 (0)