Skip to content

Commit b9cf31b

Browse files
Dios-001Dios-001
committed
updated index.css and made events page
1 parent 44c51c4 commit b9cf31b

File tree

8 files changed

+89
-27
lines changed

8 files changed

+89
-27
lines changed

‎src/assets/images/Events/image1.jpg‎

105 KB
Loading

‎src/assets/images/Events/image2.jpg‎

58.9 KB
Loading

‎src/assets/images/Events/image4.jpg‎

55.9 KB
Loading

‎src/assets/styles/index.css‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,3 +22,21 @@ a {
2222
-webkit-text-stroke-width: 2px;
2323
-webkit-text-stroke-color: #737373;
2424
}
25+
26+
27+
.words {
28+
position: relative;
29+
animation: move-words 25s linear infinite;
30+
margin: 0;
31+
}
32+
33+
34+
35+
@keyframes move-words {
36+
0% {
37+
left: 100%;
38+
}
39+
100% {
40+
left: -100%;
41+
}
42+
}

‎src/pages/Events/EventPage.jsx‎

Lines changed: 14 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,41 @@
11
import React from 'react';
22
import Card from './card';
3-
3+
import userData from './events.json'
4+
import { useState, useEffect } from 'react';
45

56
const EventPage = () => {
67
const borderStyle = {
78
color: 'transparent',
89
WebkitTextStrokeWidth: '0.5px',
910
WebkitTextStrokeColor: 'white',
1011
}
11-
12-
12+
const [users, setUsers] = useState([]);
13+
14+
useEffect(() => {
15+
setUsers(userData);
16+
}, []);
1317
return (
1418

1519
<div className="bg-zinc-950">
1620
<div className="TheFlotingThing">
17-
<marquee>
21+
<div className='words'>
1822
<p className="text-white text-7xl py-10 font-extrabold inline-block px-1" style={borderStyle}>EVENTS</p>
1923
<p className='text-white text-7xl py-10 font-extrabold inline-block px-2'> EVENTS</p>
2024
<p className='text-white text-7xl py-10 font-extrabold inline-block px-2'style={borderStyle}>EVENTS</p>
2125
<p className='text-white text-7xl py-10 font-extrabold inline-block px-2'> EVENTS</p>
2226
<p className='text-white text-7xl py-10 font-extrabold inline-block px-2'style={borderStyle}>EVENTS</p>
23-
<p className='text-white text-7xl py-10 font-extrabold inline-block px-2'> EVENTS</p>
27+
2428

2529

26-
</marquee>
30+
</div>
2731

2832
</div>
2933
<div className="TheScrollingThing flex space-x-10 overflow-x-auto py-10">
3034
{/* Add enough content to exceed the width of the container */}
31-
<div className="min-w-80"><Card/></div>
32-
<div className="min-w-80"><Card/></div>
33-
<div className="min-w-80"><Card/></div>
34-
<div className="min-w-80"><Card/></div>
35-
<div className="min-w-80"><Card/></div>
36-
<div className="min-w-80"><Card/></div>
37-
<div className="min-w-80"><Card/></div>
38-
<div className="min-w-80"><Card/></div>
39-
<div className="min-w-80"><Card/></div>
40-
<div className="min-w-80"><Card/></div>
35+
{users.map((user) => (
36+
<Card key={user.name} user={user} />
37+
))}
38+
4139
</div>
4240
</div>
4341
);

‎src/pages/Events/card.jsx‎

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,30 @@
11
import React, { useState, useEffect } from 'react';
22

3-
export default function Card() {
3+
export default function Card({user}) {
4+
45
const [truncatedText, setTruncatedText] = useState('');
56
const maxLength = 25; // Maximum number of words
67

78
useEffect(() => {
8-
const text = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id nunc volutpat, auctor sapien et, condimentum dolor. Aenean magna justo, vulputate quis feugiat non, maximus bibendum augue. Ut ligula odio, tristique fermentum libero a, ornare mattis arcu. Cras suscipit nisi purus, eget malesuada tortor tincidunt vitae. Vivamus vitae nibh ut est sollicitudin bibendum. Vestibulum interdum quis metus laoreet cursus. Donec eu sodales neque. Praesent suscipit nec nisi in rutrum. Sed varius odio nec ante vulputate, id egestas tellus dapibus.";
9-
const words = text.split(' ');
10-
if (words.length > maxLength) {
9+
const text = user.description
10+
const words = text.split(' ');
11+
12+
if (words.length > maxLength) {
1113
setTruncatedText(words.slice(0, maxLength).join(' ') + '...');
1214
} else {
1315
setTruncatedText(text);
1416
}
15-
}, []);
17+
}, []);
1618
return (
1719
<>
1820
<div className="shadow-lg bg-zinc-600 rounded-2xl max-w-96 h-[30rem] relative">
19-
<img className="w-mag rounded-se-2xl rounded-ss-2xl" src="src/assets/images/example_pic.jpeg" alt="its-5am-im-tired-AF.jpeg" />
20-
<div className='content-box px-4 pt-2'>
21-
<p className="py-1 font-medium text-white break-words">Some Title Here</p>
22-
<p className="date font-thin py-2 pr-3 text-zinc-400">17/02/2024</p>
21+
<img className="w-mag rounded-se-2xl rounded-ss-2xl" src={user.image} alt={user.alt} />
22+
<div className='content-box px-4 pt-2'>
23+
<p className="py-1 font-medium text-white break-words">{user.name}</p>
24+
<p className="date font-thin py-2 pr-3 text-zinc-400">{user.date}</p>
2325
<p className="description text-white font-light ">{truncatedText}</p>
2426
</div>
25-
<a href="https://example.com" className="absolute bottom-0 left-0 right-0 text-center tracking-widest font-thin drop-shadow-lg text-white py-7 hover:text-red-600">READ MORE</a>
27+
<a href={user.link} className="absolute bottom-0 left-0 right-0 text-center tracking-widest font-thin drop-shadow-lg text-white py-7 hover:text-red-600">READ MORE</a>
2628
</div>
2729
</>
2830
);

‎src/pages/Events/events.json‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
[
2+
{
3+
"name": "Event1",
4+
"date": "12/12/24",
5+
"description": "lorem ipsum dolor ",
6+
"image": "src/assets/images/Events/image1.jpg",
7+
"link":"https://www.youtube.com/watch?v=dQw4w9WgXcQ",
8+
"alt":"event1-image"
9+
10+
},
11+
{
12+
"name": "Event2",
13+
"date": "13/12/24",
14+
"description": "lorem ipsum dolor ",
15+
"image": "src/assets/images/Events/image2.jpg",
16+
"link":"https://www.youtube.com/watch?v=dQw4w9WgXcQ",
17+
"alt":"event2-image"
18+
19+
},
20+
{
21+
"name": "Event3",
22+
"date": "14/12/24",
23+
"description": "lorem ipsum dolor ",
24+
"image": "src/assets/images/Events/image3.jpg",
25+
"link":"https://www.youtube.com/watch?v=dQw4w9WgXcQ",
26+
"alt":"event3-image"
27+
28+
},
29+
{
30+
"name": "Event4",
31+
"date": "15/12/24",
32+
"description": "lorem ipsum dolor ",
33+
"image": "src/assets/images/Events/image4.jpg",
34+
"link":"https://www.youtube.com/watch?v=dQw4w9WgXcQ",
35+
"alt":"event4-image"
36+
37+
}
38+
]

‎src/routes/index.jsx‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import Home from "@/pages/Home/index";
22
import Teams from "@/pages/Teams/index";
3-
3+
import EventPage from "../pages/Events/EventPage";
44
const routes = [
55
{
66
lable: "Teams",
@@ -14,6 +14,12 @@ const routes = [
1414
requireAuth: false,
1515
render: <Home />,
1616
},
17+
{
18+
lable:"Events",
19+
path: "/events",
20+
requireAuth: false,
21+
render: <EventPage />,
22+
}
1723
];
1824

1925
export default routes;

0 commit comments

Comments
 (0)