Upcomingevent

package.json

@@ -14,6 +14,7 @@
   },
   "dependencies": {
     "lucide-react": "^0.468.0",
+    "prop-types": "^15.8.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-icons": "^5.4.0",
@@ -32,4 +33,4 @@
     "globals": "^15.12.0",
     "vite": "^6.0.1"
   }
-}
+}

src/App.jsx

@@ -17,4 +17,4 @@ function App() {
   )
 }
 
-export default App
+export default App

src/components/Navbar.css

@@ -3,7 +3,7 @@
     width: 100vw;
     align-items: center;
     justify-content: space-between;
-    padding: 0 20px;
+    padding: 0 20px 50px 20px;
 }
 
 .logo {
@@ -151,4 +151,4 @@
         height: 45px;
         margin-right: 60px;
     }
-}
+}

src/components/Navbar.jsx

@@ -1,4 +1,4 @@
-import {React, useEffect, useState} from 'react';
+import {React ,useEffect, useState} from 'react';
 import "../components/Navbar.css";
 // import PClub_logo from "../assets/PClub.png";
 import PClub_logo from "/public/PClub.png";

src/components/UpcomingEventCard.css

@@ -0,0 +1,197 @@
+/* Styling for the event card */
+.event-card {
+
+    padding: 20px;
+    margin: 20px 20px 20px 100px;
+    background-color: rgba(12, 18, 36, 1);
+    color:white;
+    display:flex;
+    width:100%;
+    max-width: 1440px;
+    height:430px;
+    align-items: center;
+
+  }
+.event-photo{
+  width:100%;
+  height:80%;
+  padding-top: 0px;
+
+
+}
+.image-style{
+  border-radius:8px;
+
+}
+.event-name{
+  width: 99.5%;
+  border: 1px solid #ddd;
+  text-align: center;
+  border-radius: 5px;
+  font-size:25px;
+  font-family: sans-serif;
+  font-weight: normal;
+  margin-bottom:15px;
+  margin-right: 0px;
+
+}
+
+.prop{
+  color:grey;
+  text-align: right;
+  margin-left: auto;
+  width:100%;
+  font-size: 15px;
+}
+.event-info{
+  padding:0 50px;
+  width:80%;
+  text-align:left;
+  height:100%;
+
+}
+
+.button{
+  color:cyan;
+  border-color: cyan;
+  width:175px;
+  border-radius:5px;
+  height:30px ;
+  background-color: rgba(12, 18, 36, 1);
+  font-size: 15px;
+
+
+}
+
+.section-1 {
+    flex:1;
+    height:100%;
+    width:20%;
+    font-size: 24px;
+    font-weight: bold;
+    padding:0 8px 0 0;
+  }
+
+  .event-description {
+    font-size: 19px;
+    margin-bottom: 20px;
+    color:grey;
+    width:100%;
+    height:40%;
+    padding-top: 50px;
+    font-family: sans-serif;
+  }
+
+  .event-date, .event-time, .event-venue, .event-teamsize {
+    font-size: 15px;
+    margin-bottom: 8px;
+    display:inline-flex;
+    justify-content: space-between;
+    width: 50%;
+    padding-bottom: 5px;
+    font-family: sans-serif;
+  }
+  .event-venue{
+    padding-bottom:20px
+  }
+  /* Mobile Screens */
+@media only screen and (max-width: 500px) {
+
+  .event-card {
+      margin:auto  0px; 
+      height: auto; 
+      flex-direction: column;
+      align-items: center; 
+  }
+
+  .event-name {
+      font-size: 20px;
+      width:270px;
+  }
+
+  .event-photo {
+      height: 50%; 
+  }
+
+  .event-info {
+      width: 100%;
+      padding: 0px; 
+  }
+
+  .button {
+      width: 150px; 
+      margin-top:10px;
+  }
+
+  .section-1 {
+      width: 100%; 
+      font-size: 18px; 
+      padding:0px;
+  }
+
+  .event-description {
+      font-size: 16px; 
+      padding-top: 20px; 
+  }
+
+  .event-date, .event-time, .event-venue, .event-teamsize {
+      font-size: 13px; 
+      width: 100%; 
+      justify-content: flex-start;
+      margin:0px; 
+  }
+
+  .event-venue {
+      padding-bottom: 5px; 
+  }
+
+
+
+}
+
+
+@media only screen and (min-width: 501px) and (max-width: 1024px) {
+  /* Adjust the event card for tablets and laptops */
+  .event-card {
+      margin-left: 0px; 
+  }
+
+  .event-name {
+      font-size: 22px; 
+  }
+
+  .event-photo {
+      height: 60%; 
+  }
+
+  .event-info {
+      width: 85%;
+      padding: 0 10px; 
+  }
+
+  .button {
+      width: 100px; 
+      margin-top: 10px;
+  }
+
+  .section-1 {
+      width: 100%;
+      font-size: 20px;
+  }
+
+  .event-description {
+      font-size: 13px; 
+      padding-top: 0px;
+  }
+
+  .event-date, .event-time, .event-venue, .event-teamsize {
+      font-size: 12px;
+      width: 100%; 
+      justify-content: flex-start; 
+      margin:0px
+  }
+  .event-venue{
+    padding-bottom:5px;
+  }
+
+}

src/components/UpcomingEventCard.jsx

@@ -0,0 +1,50 @@
+
+import "../components/UpcomingEventCard.css";
+import dragon from "/public/dragon-270x310.png"; //BEST FIT 270px X 310px (270x290/300 could work as well!!) 
+const UpcomingEventCard = ({ name, description, date, time, venue, teamsize }) => {
+  const props={color:"grey"};
+
+  return (
+    <div className="event-card">
+      <div className="section-1">
+
+        <div className="event-name">{name}</div>
+
+        <div className="event-photo">
+          <img className="image-style" src={dragon} ></img>
+        </div> 
+
+      </div>
+
+      <div className="event-info">
+        <p style={props} className="event-description">{description}</p>
+        <div>
+          <div>
+            <p className="event-teamsize" >TEAM/PARTICIPATION </p>
+            <span className="prop">{teamsize}</span>
+          </div>
+
+          <div>
+            <p className="event-date">DATE </p>
+            <span className="prop">{date}</span>
+          </div>
+
+          <div>
+            <p className="event-time">TIME </p>
+            <span className="prop">{time}</span>
+          </div>
+
+          <div>
+            <p className="event-venue">VENUE </p>
+            <span className="prop">{venue}</span>
+          </div>
+
+        </div>
+        <button className="button">REGISTER</button>
+      </div>
+
+    </div>
+  );
+}
+
+export default UpcomingEventCard;