From 00b7a7920f0aa620122a9fc6cf8632123f91c481 Mon Sep 17 00:00:00 2001
From: Nishitbariya <85815172+Nishitbaria@users.noreply.github.com>
Date: Wed, 25 Oct 2023 23:08:34 +0530
Subject: [PATCH] feat: Event Page

---
 Technodes/src/App.jsx                         |   4 +-
 Technodes/src/Pages/EventPage/Event.jsx       |  16 ++
 Technodes/src/components/EventCards.jsx       |  17 --
 Technodes/src/components/Footer.jsx           | 150 ++++++++----------
 .../components/core/Eventpage/EventCard.jsx   |  44 +++++
 .../components/core/Eventpage/EventCards.jsx  |  34 ++++
 .../components/core/Eventpage/Herosection.jsx |  44 +++++
 7 files changed, 207 insertions(+), 102 deletions(-)
 create mode 100644 Technodes/src/Pages/EventPage/Event.jsx
 delete mode 100644 Technodes/src/components/EventCards.jsx
 create mode 100644 Technodes/src/components/core/Eventpage/EventCard.jsx
 create mode 100644 Technodes/src/components/core/Eventpage/EventCards.jsx
 create mode 100644 Technodes/src/components/core/Eventpage/Herosection.jsx

diff --git a/Technodes/src/App.jsx b/Technodes/src/App.jsx
index 24cfcf7..89dd2b2 100644
--- a/Technodes/src/App.jsx
+++ b/Technodes/src/App.jsx
@@ -5,7 +5,7 @@ import Projects from "./Pages/Projects";
 import Team from "./Pages/Team";
 import Error from "./Pages/Error";
 import Navbar from "./components/Navbar";
-import Events from "./Pages/Events";
+import Event from "./Pages/EventPage/Event"
 import Contact from "./Pages/Contact";
 
 export default function App() {
@@ -17,7 +17,7 @@ export default function App() {
         <Routes>
           <Route path="/" element={<Home />}></Route>
           <Route path="/Projects" element={<Projects />}></Route>
-          <Route path="/Event" element={<Events />}></Route>
+          <Route path="/Event" element={<Event />}></Route>
           <Route path="/Team" element={<Team />}></Route>
           <Route path="/Contact" element={<Contact />}></Route>
           <Route path="/Error" element={<Error />}></Route>
diff --git a/Technodes/src/Pages/EventPage/Event.jsx b/Technodes/src/Pages/EventPage/Event.jsx
new file mode 100644
index 0000000..eeb41ec
--- /dev/null
+++ b/Technodes/src/Pages/EventPage/Event.jsx
@@ -0,0 +1,16 @@
+import React from 'react'
+import HeroSection from '../../components/core/Eventpage/Herosection'
+import EventCards from '../../components/core/Eventpage/EventCards'
+import NewsLetter  from "../../components/NewsLetter"
+import Footer  from "../../components/Footer"
+
+export default function Event() {
+  return (
+    <div className='bg-[#141414]'>
+   <HeroSection/>
+   <EventCards/>
+   <NewsLetter/>
+   <Footer/>
+   </div>
+  )
+}
diff --git a/Technodes/src/components/EventCards.jsx b/Technodes/src/components/EventCards.jsx
deleted file mode 100644
index e55e98d..0000000
--- a/Technodes/src/components/EventCards.jsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import React from 'react'
-
-function EventCards() {
-  return (
-    <div className='m-10 transition duration-200 hover:scale-105'>
-      <div className=' max-w-sm p-5 border border-gray-700 rounded-lg shadow bg-gray-800'>
-        <div className='flex flex-col items-center'>
-            <img className='w-52 h-52 mb-3 ' src="https://www.marketconnectionsinc.com/wp-content/uploads/2018/02/Event-icon.png" alt="Event 1 " />
-            <h5 className='text-xl font-sans font-bold text-textcolor'>Event 1</h5>
-            <h4 className='my-3 font-sans text-textdark'>15-17 May</h4>
-        </div>
-      </div>
-    </div>
-  )
-}
-
-export default EventCards
diff --git a/Technodes/src/components/Footer.jsx b/Technodes/src/components/Footer.jsx
index 872c1c2..c695adb 100644
--- a/Technodes/src/components/Footer.jsx
+++ b/Technodes/src/components/Footer.jsx
@@ -1,126 +1,110 @@
 import React from "react";
-import { Link } from "react-router-dom"
+import { Link } from "react-router-dom";
 
 export default function Footer() {
   return (
     <div>
-      <footer class="bg-primary ">
-        <div class="mx-auto w-full max-w-screen-xl">
-          <div class="grid grid-cols-2 gap-8 px-4 py-6 lg:py-8 md:grid-cols-4">
+      <footer className="bg-primary ">
+        <div className="mx-auto w-full max-w-screen-xl">
+          <div className="grid grid-cols-2 gap-8 px-4 py-6 lg:py-8 md:grid-cols-4">
             <div>
-              <h2 class="mb-6 text-sm font-semibold text-textcolor uppercase">
-                Company
+              <h2 className="mb-6 text-sm font-semibold text-textcolor uppercase">
+                Organization
               </h2>
-              <ul class="text-textdark font-medium">
-                <li class="mb-4">
-                  <a href="#" class=" hover:underline">
+              <ul className="text-textdark font-medium">
+                <li className="mb-4">
+                  <a href="#" className=" hover:underline">
                     About
                   </a>
                 </li>
-                <li class="mb-4">
-                  <a href="#" class="hover:underline">
-                    Careers
+                <li className="mb-4">
+                  <a href="#" className="hover:underline">
+                    FAQs
                   </a>
                 </li>
-                <li class="mb-4">
-                  <a href="#" class="hover:underline">
-                    Brand Center
-                  </a>
-                </li>
-                <li class="mb-4">
-                  <a href="#" class="hover:underline">
-                    Blog
+                <li className="mb-4">
+                  <a href="#" className="hover:underline">
+                    NewsLetter
                   </a>
                 </li>
               </ul>
             </div>
             <div>
-              <h2 class="mb-6 text-sm font-semibold text-textcolor uppercase">
-                Help center
+              <h2 className="mb-6 text-sm font-semibold text-textcolor uppercase">
+                Socials
               </h2>
-              <ul class="text-textdark font-medium">
-                <li class="mb-4">
-                  <a href="#" class="hover:underline">
+              <ul className="text-textdark font-medium">
+                <li className="mb-4">
+                  <a href="#" className="hover:underline">
                     Discord Server
                   </a>
                 </li>
-                <li class="mb-4">
-                  <a href="#" class="hover:underline">
+                <li className="mb-4">
+                  <a href="#" className="hover:underline">
                     Twitter
                   </a>
                 </li>
-                <li class="mb-4">
-                  <a href="#" class="hover:underline">
-                    Facebook
+                <li className="mb-4">
+                  <a href="#" className="hover:underline">
+                    Youtube
                   </a>
                 </li>
-                <li class="mb-4">
-                <Link to="/Contact">Contact Us</Link>
+                <li className="mb-4">
+                  <Link to="/Contact">GitHub</Link>
                 </li>
               </ul>
             </div>
             <div>
-              <h2 class="mb-6 text-sm font-semibold text-textcolor uppercase">
-                Legal
+              <h2 className="mb-6 text-sm font-semibold text-textcolor uppercase">
+                Community
               </h2>
-              <ul class="text-textdark font-medium">
-                <li class="mb-4">
-                  <a href="#" class="hover:underline">
-                    Privacy Policy
-                  </a>
-                </li>
-                <li class="mb-4">
-                  <a href="#" class="hover:underline">
-                    Licensing
+              <ul className="text-textdark font-medium">
+                <li className="mb-4">
+                  <a href="#" className="hover:underline">
+                    Blogs
                   </a>
                 </li>
-                <li class="mb-4">
-                  <a href="#" class="hover:underline">
-                    Terms &amp; Conditions
+                <li className="mb-4">
+                  <a href="#" className="hover:underline">
+                    Events
                   </a>
                 </li>
               </ul>
             </div>
             <div>
-              <h2 class="mb-6 text-sm font-semibold text-textcolor uppercase ">
-                Download
+              <h2 className="mb-6 text-sm font-semibold text-textcolor uppercase ">
+                Contact us
               </h2>
-              <ul class="text-textdark font-medium">
-                <li class="mb-4">
-                  <a href="#" class="hover:underline">
-                    iOS
-                  </a>
-                </li>
-                <li class="mb-4">
-                  <a href="#" class="hover:underline">
-                    Android
+              <ul className="text-textdark font-medium">
+                <li className="mb-4">
+                  <a href="#" className="hover:underline">
+                    technodes2.0@gmail.com
                   </a>
                 </li>
-                <li class="mb-4">
-                  <a href="#" class="hover:underline">
-                    Windows
+                <li className="mb-4">
+                  <a href="#" className="hover:underline">
+                    Discord
                   </a>
                 </li>
-                <li class="mb-4">
-                  <a href="#" class="hover:underline">
-                    MacOS
+                <li className="mb-4">
+                  <a href="#" className="hover:underline">
+                    Telegram
                   </a>
                 </li>
               </ul>
             </div>
           </div>
-          <div class="px-4 py-6 bg-gray-100 dark:bg-secondary md:flex md:items-center md:justify-between">
-            <span class="text-sm text-textdark dark:text-gray-300 sm:text-center">
-              © 2023 <a href="/">TechNodes™</a>. All Rights
-              Reserved.
+          <div className="px-4 py-6 bg-gray-100 dark:bg-secondary md:flex md:items-center md:justify-between">
+            <span className="text-sm text-textdark dark:text-gray-300 sm:text-center">
+              © 2023 <a href="/">TechNodes™</a>. All Rights Reserved.
             </span>
-            <div class="flex mt-4 space-x-6 sm:justify-center md:mt-0">
+            <div className="flex mt-4 space-x-6 sm:justify-center md:mt-0">
               <a
                 href="#"
-                class="text-gray-400 hover:text-gray-900 dark:hover:text-white"
+                className="text-gray-400 hover:text-gray-900 dark:hover:text-white"
               >
                 <svg
-                  class="w-5 h-5"
+                  className="w-5 h-5"
                   fill="currentColor"
                   viewBox="0 0 24 24"
                   aria-hidden="true"
@@ -131,14 +115,14 @@ export default function Footer() {
                     clip-rule="evenodd"
                   />
                 </svg>
-                <span class="sr-only">Facebook page</span>
+                <span className="sr-only">Facebook page</span>
               </a>
               <a
                 href="#"
-                class="text-gray-400 hover:text-gray-900 dark:hover:text-white"
+                className="text-gray-400 hover:text-gray-900 dark:hover:text-white"
               >
                 <svg
-                  class="w-5 h-5"
+                  className="w-5 h-5"
                   fill="currentColor"
                   viewBox="0 0 24 24"
                   aria-hidden="true"
@@ -149,28 +133,28 @@ export default function Footer() {
                     clip-rule="evenodd"
                   />
                 </svg>
-                <span class="sr-only">Instagram page</span>
+                <span className="sr-only">Instagram page</span>
               </a>
               <a
                 href="#"
-                class="text-gray-400 hover:text-gray-900 dark:hover:text-white"
+                className="text-gray-400 hover:text-gray-900 dark:hover:text-white"
               >
                 <svg
-                  class="w-5 h-5"
+                  className="w-5 h-5"
                   fill="currentColor"
                   viewBox="0 0 24 24"
                   aria-hidden="true"
                 >
                   <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" />
                 </svg>
-                <span class="sr-only">Twitter page</span>
+                <span className="sr-only">Twitter page</span>
               </a>
               <a
                 href="#"
-                class="text-gray-400 hover:text-gray-900 dark:hover:text-white"
+                className="text-gray-400 hover:text-gray-900 dark:hover:text-white"
               >
                 <svg
-                  class="w-5 h-5"
+                  className="w-5 h-5"
                   fill="currentColor"
                   viewBox="0 0 24 24"
                   aria-hidden="true"
@@ -181,14 +165,14 @@ export default function Footer() {
                     clip-rule="evenodd"
                   />
                 </svg>
-                <span class="sr-only">GitHub account</span>
+                <span className="sr-only">GitHub account</span>
               </a>
               <a
                 href="#"
-                class="text-gray-400 hover:text-gray-900 dark:hover:text-white"
+                className="text-gray-400 hover:text-gray-900 dark:hover:text-white"
               >
                 <svg
-                  class="w-5 h-5"
+                  className="w-5 h-5"
                   fill="currentColor"
                   viewBox="0 0 24 24"
                   aria-hidden="true"
@@ -199,7 +183,7 @@ export default function Footer() {
                     clip-rule="evenodd"
                   />
                 </svg>
-                <span class="sr-only">Dribbble account</span>
+                <span className="sr-only">Dribbble account</span>
               </a>
             </div>
           </div>
diff --git a/Technodes/src/components/core/Eventpage/EventCard.jsx b/Technodes/src/components/core/Eventpage/EventCard.jsx
new file mode 100644
index 0000000..9c3f9e4
--- /dev/null
+++ b/Technodes/src/components/core/Eventpage/EventCard.jsx
@@ -0,0 +1,44 @@
+import { FaGithub } from "react-icons/fa";
+
+const DetailCard = ({ image, title, description, url, btnText, git }) => {
+  return (
+    <>
+      <div className="overflow-hidden rounded-2xl bg-content/5 p-4 bg-[#1f1f1f]">
+        <img
+          src={image}
+          className="aspect-video w-full rounded-lg object-cover object-center"
+          alt={title + "banner"}
+        />
+        <div className="pt-6 pb-3">
+          <h3>{title}</h3>
+          <p className="mt-2">{description}</p>
+          <div className="mt-4 flex gap-2">
+            <a
+              href="#_"
+              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"
+              data-primary="green-400"
+              data-rounded="rounded-2xl"
+              data-primary-reset="{}"
+            >
+              Get Started
+              <svg
+                className="w-4 h-4 ml-1"
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 20 20"
+                fill="currentColor"
+              >
+                <path
+                  fill-rule="evenodd"
+                  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"
+                  clip-rule="evenodd"
+                ></path>
+              </svg>
+            </a>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default DetailCard;
diff --git a/Technodes/src/components/core/Eventpage/EventCards.jsx b/Technodes/src/components/core/Eventpage/EventCards.jsx
new file mode 100644
index 0000000..6e203e9
--- /dev/null
+++ b/Technodes/src/components/core/Eventpage/EventCards.jsx
@@ -0,0 +1,34 @@
+import React from 'react'
+import EventCard from './EventCard'
+
+export default function EventCards() {
+  return (
+    <section id='events' className='bg-[#141414]'>
+    <div className='layout py-20'>
+      <h1 className='h1'> Events </h1>
+      <hr className='styled-hr my-6' />
+      <div className='grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3'>
+        {eventsData2.map((event) => (
+          <EventCard {...event} key={event.image} />
+        ))}
+      </div>
+    </div>
+  </section>
+  )
+}
+
+
+
+// Event Data section for the Event Cards   
+
+const eventsData2 = [
+    {
+      title: 'Hacktoberfest 2021',
+      description:
+        '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.',
+      image: "https://events.mlh.io/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBakVhIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--ec16f7fc3d72121459ba4bcd45d5073a195ae5b4/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lJY0c1bkJqb0dSVlE2QzNKbGMybDZaVWtpRGpFeU1EQjROakF3SVFZN0JsUT0iLCJleHAiOm51bGwsInB1ciI6InZhcmlhdGlvbiJ9fQ==--bb74e2531ca3e0ee463ad8c55d04110fcf863b74/MLH@2x-8.png",
+      url: 'https://events.mlh.io/events/10181-hack-this-fall-x-hacktoberfest-23-in-person-edition',
+      btnText: 'Know more',
+    },
+
+  ];
\ No newline at end of file
diff --git a/Technodes/src/components/core/Eventpage/Herosection.jsx b/Technodes/src/components/core/Eventpage/Herosection.jsx
new file mode 100644
index 0000000..61f4e87
--- /dev/null
+++ b/Technodes/src/components/core/Eventpage/Herosection.jsx
@@ -0,0 +1,44 @@
+import React from "react";
+
+export default function HeroSection() {
+  return (
+    <div>
+      <section className="flex h-screen items-center justify-center text-center">
+        <div className="layout max-w-4xl">
+          <h1 className="heading">Events that inspire </h1>
+          <h2 className="h3 my-5 font-medium text-content">
+            Do you wish to contribute to the community, compete for exciting
+            rewards, and expand your knowledge? If that's the case, you're in
+            the right place. Join the Technodes community and participate in our
+            fantastic events. Check out the upcoming events and join in
+          </h2>
+          <div className="mt-5 flex items-center justify-center gap-x-6">
+            <a
+              href="#_"
+              className="relative inline-flex items-center px-12 py-3 overflow-hidden text-lg font-medium text-indigo-600 border-2 border-indigo-600 rounded-full hover:text-white group hover:bg-gray-50"
+            >
+              <span className="absolute left-0 block w-full h-0 transition-all bg-indigo-600 opacity-100 group-hover:h-full top-1/2 group-hover:top-0 duration-400 ease"></span>
+              <span className="absolute right-0 flex items-center justify-start w-10 h-10 duration-300 transform translate-x-full group-hover:translate-x-0 ease">
+                <svg
+                  className="w-5 h-5"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    d="M14 5l7 7m0 0l-7 7m7-7H3"
+                  ></path>
+                </svg>
+              </span>
+              <span className="relative">Learn More </span>
+            </a>
+          </div>
+        </div>
+      </section>
+    </div>
+  );
+}