Skip to content

Commit 00b7a79

Browse files
NishitbariaNishitbaria
committed
feat: Event Page
1 parent 8fca154 commit 00b7a79

File tree

7 files changed

+207
-102
lines changed

7 files changed

+207
-102
lines changed

‎Technodes/src/App.jsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import Projects from "./Pages/Projects";
55
import Team from "./Pages/Team";
66
import Error from "./Pages/Error";
77
import Navbar from "./components/Navbar";
8-
import Events from "./Pages/Events";
8+
import Event from "./Pages/EventPage/Event"
99
import Contact from "./Pages/Contact";
1010

1111
export default function App() {
@@ -17,7 +17,7 @@ export default function App() {
1717
<Routes>
1818
<Route path="/" element={<Home />}></Route>
1919
<Route path="/Projects" element={<Projects />}></Route>
20-
<Route path="/Event" element={<Events />}></Route>
20+
<Route path="/Event" element={<Event />}></Route>
2121
<Route path="/Team" element={<Team />}></Route>
2222
<Route path="/Contact" element={<Contact />}></Route>
2323
<Route path="/Error" element={<Error />}></Route>

‎Technodes/src/Pages/EventPage/Event.jsx

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import React from 'react'
2+
import HeroSection from '../../components/core/Eventpage/Herosection'
3+
import EventCards from '../../components/core/Eventpage/EventCards'
4+
import NewsLetter from "../../components/NewsLetter"
5+
import Footer from "../../components/Footer"
6+
7+
export default function Event() {
8+
return (
9+
<div className='bg-[#141414]'>
10+
<HeroSection/>
11+
<EventCards/>
12+
<NewsLetter/>
13+
<Footer/>
14+
</div>
15+
)
16+
}

‎Technodes/src/components/EventCards.jsx

-17
This file was deleted.

‎Technodes/src/components/Footer.jsx

+67-83
Original file line numberDiff line numberDiff line change
@@ -1,126 +1,110 @@
11
import React from "react";
2-
import { Link } from "react-router-dom"
2+
import { Link } from "react-router-dom";
33

44
export default function Footer() {
55
return (
66
<div>
7-
<footer class="bg-primary ">
8-
<div class="mx-auto w-full max-w-screen-xl">
9-
<div class="grid grid-cols-2 gap-8 px-4 py-6 lg:py-8 md:grid-cols-4">
7+
<footer className="bg-primary ">
8+
<div className="mx-auto w-full max-w-screen-xl">
9+
<div className="grid grid-cols-2 gap-8 px-4 py-6 lg:py-8 md:grid-cols-4">
1010
<div>
11-
<h2 class="mb-6 text-sm font-semibold text-textcolor uppercase">
12-
Company
11+
<h2 className="mb-6 text-sm font-semibold text-textcolor uppercase">
12+
Organization
1313
</h2>
14-
<ul class="text-textdark font-medium">
15-
<li class="mb-4">
16-
<a href="#" class=" hover:underline">
14+
<ul className="text-textdark font-medium">
15+
<li className="mb-4">
16+
<a href="#" className=" hover:underline">
1717
About
1818
</a>
1919
</li>
20-
<li class="mb-4">
21-
<a href="#" class="hover:underline">
22-
Careers
20+
<li className="mb-4">
21+
<a href="#" className="hover:underline">
22+
FAQs
2323
</a>
2424
</li>
25-
<li class="mb-4">
26-
<a href="#" class="hover:underline">
27-
Brand Center
28-
</a>
29-
</li>
30-
<li class="mb-4">
31-
<a href="#" class="hover:underline">
32-
Blog
25+
<li className="mb-4">
26+
<a href="#" className="hover:underline">
27+
NewsLetter
3328
</a>
3429
</li>
3530
</ul>
3631
</div>
3732
<div>
38-
<h2 class="mb-6 text-sm font-semibold text-textcolor uppercase">
39-
Help center
33+
<h2 className="mb-6 text-sm font-semibold text-textcolor uppercase">
34+
Socials
4035
</h2>
41-
<ul class="text-textdark font-medium">
42-
<li class="mb-4">
43-
<a href="#" class="hover:underline">
36+
<ul className="text-textdark font-medium">
37+
<li className="mb-4">
38+
<a href="#" className="hover:underline">
4439
Discord Server
4540
</a>
4641
</li>
47-
<li class="mb-4">
48-
<a href="#" class="hover:underline">
42+
<li className="mb-4">
43+
<a href="#" className="hover:underline">
4944
Twitter
5045
</a>
5146
</li>
52-
<li class="mb-4">
53-
<a href="#" class="hover:underline">
54-
Facebook
47+
<li className="mb-4">
48+
<a href="#" className="hover:underline">
49+
Youtube
5550
</a>
5651
</li>
57-
<li class="mb-4">
58-
<Link to="/Contact">Contact Us</Link>
52+
<li className="mb-4">
53+
<Link to="/Contact">GitHub</Link>
5954
</li>
6055
</ul>
6156
</div>
6257
<div>
63-
<h2 class="mb-6 text-sm font-semibold text-textcolor uppercase">
64-
Legal
58+
<h2 className="mb-6 text-sm font-semibold text-textcolor uppercase">
59+
Community
6560
</h2>
66-
<ul class="text-textdark font-medium">
67-
<li class="mb-4">
68-
<a href="#" class="hover:underline">
69-
Privacy Policy
70-
</a>
71-
</li>
72-
<li class="mb-4">
73-
<a href="#" class="hover:underline">
74-
Licensing
61+
<ul className="text-textdark font-medium">
62+
<li className="mb-4">
63+
<a href="#" className="hover:underline">
64+
Blogs
7565
</a>
7666
</li>
77-
<li class="mb-4">
78-
<a href="#" class="hover:underline">
79-
Terms &amp; Conditions
67+
<li className="mb-4">
68+
<a href="#" className="hover:underline">
69+
Events
8070
</a>
8171
</li>
8272
</ul>
8373
</div>
8474
<div>
85-
<h2 class="mb-6 text-sm font-semibold text-textcolor uppercase ">
86-
Download
75+
<h2 className="mb-6 text-sm font-semibold text-textcolor uppercase ">
76+
Contact us
8777
</h2>
88-
<ul class="text-textdark font-medium">
89-
<li class="mb-4">
90-
<a href="#" class="hover:underline">
91-
iOS
92-
</a>
93-
</li>
94-
<li class="mb-4">
95-
<a href="#" class="hover:underline">
96-
Android
78+
<ul className="text-textdark font-medium">
79+
<li className="mb-4">
80+
<a href="#" className="hover:underline">
81+
[email protected]
9782
</a>
9883
</li>
99-
<li class="mb-4">
100-
<a href="#" class="hover:underline">
101-
Windows
84+
<li className="mb-4">
85+
<a href="#" className="hover:underline">
86+
Discord
10287
</a>
10388
</li>
104-
<li class="mb-4">
105-
<a href="#" class="hover:underline">
106-
MacOS
89+
<li className="mb-4">
90+
<a href="#" className="hover:underline">
91+
Telegram
10792
</a>
10893
</li>
10994
</ul>
11095
</div>
11196
</div>
112-
<div class="px-4 py-6 bg-gray-100 dark:bg-secondary md:flex md:items-center md:justify-between">
113-
<span class="text-sm text-textdark dark:text-gray-300 sm:text-center">
114-
© 2023 <a href="/">TechNodes™</a>. All Rights
115-
Reserved.
97+
<div className="px-4 py-6 bg-gray-100 dark:bg-secondary md:flex md:items-center md:justify-between">
98+
<span className="text-sm text-textdark dark:text-gray-300 sm:text-center">
99+
© 2023 <a href="/">TechNodes™</a>. All Rights Reserved.
116100
</span>
117-
<div class="flex mt-4 space-x-6 sm:justify-center md:mt-0">
101+
<div className="flex mt-4 space-x-6 sm:justify-center md:mt-0">
118102
<a
119103
href="#"
120-
class="text-gray-400 hover:text-gray-900 dark:hover:text-white"
104+
className="text-gray-400 hover:text-gray-900 dark:hover:text-white"
121105
>
122106
<svg
123-
class="w-5 h-5"
107+
className="w-5 h-5"
124108
fill="currentColor"
125109
viewBox="0 0 24 24"
126110
aria-hidden="true"
@@ -131,14 +115,14 @@ export default function Footer() {
131115
clip-rule="evenodd"
132116
/>
133117
</svg>
134-
<span class="sr-only">Facebook page</span>
118+
<span className="sr-only">Facebook page</span>
135119
</a>
136120
<a
137121
href="#"
138-
class="text-gray-400 hover:text-gray-900 dark:hover:text-white"
122+
className="text-gray-400 hover:text-gray-900 dark:hover:text-white"
139123
>
140124
<svg
141-
class="w-5 h-5"
125+
className="w-5 h-5"
142126
fill="currentColor"
143127
viewBox="0 0 24 24"
144128
aria-hidden="true"
@@ -149,28 +133,28 @@ export default function Footer() {
149133
clip-rule="evenodd"
150134
/>
151135
</svg>
152-
<span class="sr-only">Instagram page</span>
136+
<span className="sr-only">Instagram page</span>
153137
</a>
154138
<a
155139
href="#"
156-
class="text-gray-400 hover:text-gray-900 dark:hover:text-white"
140+
className="text-gray-400 hover:text-gray-900 dark:hover:text-white"
157141
>
158142
<svg
159-
class="w-5 h-5"
143+
className="w-5 h-5"
160144
fill="currentColor"
161145
viewBox="0 0 24 24"
162146
aria-hidden="true"
163147
>
164148
<path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84" />
165149
</svg>
166-
<span class="sr-only">Twitter page</span>
150+
<span className="sr-only">Twitter page</span>
167151
</a>
168152
<a
169153
href="#"
170-
class="text-gray-400 hover:text-gray-900 dark:hover:text-white"
154+
className="text-gray-400 hover:text-gray-900 dark:hover:text-white"
171155
>
172156
<svg
173-
class="w-5 h-5"
157+
className="w-5 h-5"
174158
fill="currentColor"
175159
viewBox="0 0 24 24"
176160
aria-hidden="true"
@@ -181,14 +165,14 @@ export default function Footer() {
181165
clip-rule="evenodd"
182166
/>
183167
</svg>
184-
<span class="sr-only">GitHub account</span>
168+
<span className="sr-only">GitHub account</span>
185169
</a>
186170
<a
187171
href="#"
188-
class="text-gray-400 hover:text-gray-900 dark:hover:text-white"
172+
className="text-gray-400 hover:text-gray-900 dark:hover:text-white"
189173
>
190174
<svg
191-
class="w-5 h-5"
175+
className="w-5 h-5"
192176
fill="currentColor"
193177
viewBox="0 0 24 24"
194178
aria-hidden="true"
@@ -199,7 +183,7 @@ export default function Footer() {
199183
clip-rule="evenodd"
200184
/>
201185
</svg>
202-
<span class="sr-only">Dribbble account</span>
186+
<span className="sr-only">Dribbble account</span>
203187
</a>
204188
</div>
205189
</div>

‎Technodes/src/components/core/Eventpage/EventCard.jsx

+44
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
import { FaGithub } from "react-icons/fa";
2+
3+
const DetailCard = ({ image, title, description, url, btnText, git }) => {
4+
return (
5+
<>
6+
<div className="overflow-hidden rounded-2xl bg-content/5 p-4 bg-[#1f1f1f]">
7+
<img
8+
src={image}
9+
className="aspect-video w-full rounded-lg object-cover object-center"
10+
alt={title + "banner"}
11+
/>
12+
<div className="pt-6 pb-3">
13+
<h3>{title}</h3>
14+
<p className="mt-2">{description}</p>
15+
<div className="mt-4 flex gap-2">
16+
<a
17+
href="#_"
18+
className="inline-flex items-center justify-center w-full px-6 py-3 mb-2 text-lg text-white bg-secondary rounded-md sm:w-auto sm:mb-0"
19+
data-primary="green-400"
20+
data-rounded="rounded-2xl"
21+
data-primary-reset="{}"
22+
>
23+
Get Started
24+
<svg
25+
className="w-4 h-4 ml-1"
26+
xmlns="http://www.w3.org/2000/svg"
27+
viewBox="0 0 20 20"
28+
fill="currentColor"
29+
>
30+
<path
31+
fill-rule="evenodd"
32+
d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
33+
clip-rule="evenodd"
34+
></path>
35+
</svg>
36+
</a>
37+
</div>
38+
</div>
39+
</div>
40+
</>
41+
);
42+
};
43+
44+
export default DetailCard;

‎Technodes/src/components/core/Eventpage/EventCards.jsx

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import React from 'react'
2+
import EventCard from './EventCard'
3+
4+
export default function EventCards() {
5+
return (
6+
<section id='events' className='bg-[#141414]'>
7+
<div className='layout py-20'>
8+
<h1 className='h1'> Events </h1>
9+
<hr className='styled-hr my-6' />
10+
<div className='grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3'>
11+
{eventsData2.map((event) => (
12+
<EventCard {...event} key={event.image} />
13+
))}
14+
</div>
15+
</div>
16+
</section>
17+
)
18+
}
19+
20+
21+
22+
// Event Data section for the Event Cards
23+
24+
const eventsData2 = [
25+
{
26+
title: 'Hacktoberfest 2021',
27+
description:
28+
'Hacktoberfest is an annual month-long celebration of open-source software run by DigitalOcean. It encourages individuals of all skill levels to engage with open-source software during the month of October and is open to everyone in our global community.',
29+
image: "https://events.mlh.io/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBakVhIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--ec16f7fc3d72121459ba4bcd45d5073a195ae5b4/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lJY0c1bkJqb0dSVlE2QzNKbGMybDZaVWtpRGpFeU1EQjROakF3SVFZN0JsUT0iLCJleHAiOm51bGwsInB1ciI6InZhcmlhdGlvbiJ9fQ==--bb74e2531ca3e0ee463ad8c55d04110fcf863b74/[email protected]",
30+
url: 'https://events.mlh.io/events/10181-hack-this-fall-x-hacktoberfest-23-in-person-edition',
31+
btnText: 'Know more',
32+
},
33+
34+
];

0 commit comments

Comments
 (0)