Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Events Details Page #36

Open
wants to merge 10 commits into
base: dev
Choose a base branch
from
Open

Events Details Page #36

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
ee8a7b9
ADD: Event Page
31adityakumar Mar 2, 2023
4e819a1
FIX: Coomit Issue
31adityakumar Mar 2, 2023
d162b39
FIX: Merge conflict
31adityakumar Mar 2, 2023
b92792e
FIX: React Helmet and key prop
31adityakumar Mar 6, 2023
e327c5b
FIX: Bug fixes
31adityakumar Mar 20, 2023
a08a8c9
FIX: Merge Conflict
31adityakumar Mar 20, 2023
18a7cfb
FIX: Merge Event Card
31adityakumar Apr 14, 2023
da55221
UPD: Modified Cards
31adityakumar Apr 14, 2023
168d039
Merge branch 'dev' of https://github.com/E-cell-NITS/Srijan-2023 into…
31adityakumar Apr 14, 2023
8192bdf
FIX: Card Render
31adityakumar Apr 21, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added public/images/EventHero1.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 2 additions & 2 deletions src/App.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import { Routes, Route } from "react-router-dom";

import { Home, Registration, Sponsors, Team, NotFound404 } from "./Pages";

import { Home, Registration, Sponsors, Team, NotFound404, EventPage } from "./Pages";
import { Navbar, Footer } from "./Components";

const App = () => {
Expand All @@ -14,6 +13,7 @@ const App = () => {
<Route path="/sponsors" element={<Sponsors />} />
<Route path="/team" element={<Team />} />
<Route path="*" element={<NotFound404 />} />
<Route path="/event/:id" element={<EventPage />} />
</Routes>

<Footer />
Expand Down
153 changes: 153 additions & 0 deletions src/Components/Event/Event.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,153 @@
import styles from "./Event.module.scss";
import EventCard from "../EventCard/EventCard";
import Data from "../../Data/EventCardData.json";
const evCard = Data.cardDataArray;

const Event = ({ data, selected }) => {
return (
<section className={styles.event}>
<div className={styles.left} key={data.id}>
<div className={styles.img}>
<img src={data.img} alt="" />
</div>
<div className={styles.hero}>
<div className={styles.heroleft}>
<h2>{data["event-title"]}</h2>
<p>{data["head-content"]}</p>
</div>
<div className={styles.heroright}>
<div className={styles.button}>
<button className={styles.btn}>
<a href={data["reg-link"]} target="_blank">
Register
</a>
</button>
</div>
{data.stage_timeline.map((item) => {
return (
<div className={styles.stageTimeline} key={item.stage_id}>
<h3>DATE</h3>
<p>Stage 1 :{item.stage1_datetime}</p>
<p>{item.stage1_venue}</p>
<br />
<p>Stage 2 :{item.stage2_datetime}</p>
<p>{item.stage2_venue}</p>
</div>
);
})}
</div>
</div>
<div className={styles.content}>
<h1>Rules and Regulations</h1>
<div className={styles.overview}>
<h2 className={styles.head1}>OVERVIEW</h2>
<br />
<div>
{data.content.overview.map((val) => {
return (
<div key={data.id}>
<p>{val}</p>
<br />
</div>
);
})}
</div>
<br />
<div>
{data.content.outcome.map((val) => {
return (
<div key={data.id}>
<p>{val}</p>
<br />
</div>
);
})}
</div>
<br />
</div>
<div className={styles.stage1}>
{data.content.stage1.map((item) => {
return (
<div className={styles.overview} key={item.stage_id}>
<h2 className={styles.head1}>{item.stage_name}</h2>
<br />
<div>
{item.stage_rules.map((val) => {
return (
<div key={data.id}>
<p>{val}</p>
<br />
</div>
);
})}
</div>
<br />
<a href={item.decklink} target="_blank">
Click here.
</a>
</div>
);
})}
</div>
<div className={styles.stage2}>
{data.content.stage2.map((item) => {
return (
<div className={styles.overview} key={item.stage_id}>
<h2 className={styles.head1}>{item.stage_name}</h2>
<br />
<div>
{item.stage_rules.map((val) => {
return (
<div key={data.id}>
<p>{val}</p>
<br />
</div>
);
})}
</div>
</div>
);
})}
</div>
<div className={styles.overview}>
<h2 className={styles.head1}>GUIDELINES</h2>
<br />
<div>
{data.content.guidelines.map((val) => {
return (
<div key={data.id}>
<p>{val}</p>
<br />
</div>
);
})}
</div>
<br />
<a href={data.content.sublink} target="_blank">
Click here.
</a>
</div>
</div>
</div>
<div className={styles.right}>
<h3>Other Events</h3>
{evCard
.slice(0, selected)
.concat(evCard.slice(selected + 1))
.map((item) => (
<EventCard
key={item.id}
size="small"
id={item.id}
content={item.content}
title1={item.title1}
title2={item.title2}
image={item.image}
/>
))}
</div>
</section>
);
};

export default Event;
153 changes: 153 additions & 0 deletions src/Components/Event/Event.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,153 @@
.event {
display: flex;
justify-content: center;
background: var(--srijan4-gradient-4);
color: white;
margin-bottom: 1rem;
}
.left {
width: 70%;
margin: 1.5rem;
padding: 0.5rem;
display: flex;
align-items: center;
flex-direction: column;
}
.button {
display: flex;
justify-content: flex-end;
margin-bottom: 1rem;
}
.btn {
width: 7rem;
height: 2rem;
border-radius: 10rem;
background: var(--srijan4-gradient-10);
cursor: pointer;
a {
text-decoration: none;
color: white;
font-weight: 500;
}
a:hover {
color: var(--srijan4-dark-pink);
}
border: none;
}
.right {
width: 30%;
display: flex;
align-items: center;
flex-direction: column;
margin: 1rem;
padding: 0.5rem;
}
.img img {
height: 30vw;
width: 50vw;
}
.hero {
display: flex;
}
.heroleft {
width: 60%;
padding: 1rem;
h2 {
font-size: 2rem;
}
p {
font-size: 0.9rem;
font-weight: 400;
}
}
.heroright {
width: 40%;
padding: 1rem;
}
.stageTimeline {
border-radius: 10px;
background: var(--srijan4-gradient-10);
padding: 0.5rem;
text-align: center;
font-weight: 600;
}
.content h1 {
background: var(--srijan4-gradient-10);
background-size: 100%;
-webkit-background-clip: text;
-moz-background-clip: text;
-webkit-text-fill-color: transparent;
-moz-text-fill-color: transparent;
font-weight: 700;
text-align: left !important;
}
.head1 {
color: var(--srijan4-dark-pink) !important;
}
.overview {
margin-bottom: 2rem;
p {
font-size: 0.9rem;
font-weight: 400;
}
a {
text-decoration: none;
color: white;
font-weight: 500;
font-size: 1.2rem;
}
a:hover {
color: var(--srijan4-dark-pink);
}
}
@media only screen and (max-width: 1000px) {
.img img {
height: 30vw;
width: 50vw;
}
.stageTimeline {
p {
font-size: 0.75rem;
}
}
.content {
h1 {
font-size: 2rem;
}
}
}
@media only screen and (max-width: 805px) {
.heroleft {
h2 {
font-size: 1.5rem;
}
p {
font-size: 0.8rem;
}
}
.stageTimeline {
p {
font-size: 0.7rem;
}
}
.content {
h1 {
font-size: 2rem;
}
p {
font-size: 0.8rem;
}
}
}
@media only screen and (max-width: 750px) {
.right {
display: none;
}
.left {
width: 100%;
}
.img img {
width: 50vw;
height: 30vw;
}
}
2 changes: 1 addition & 1 deletion src/Components/EventCard/EventCard.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ const EventCard = (props) => {
<Link to="/" className={styles.btn}>
Register
</Link>
<Link to="/" className={styles.btn}>
<Link to={`/event/${props.id}`} className={styles.btn}>
Details
</Link>
</div>
Expand Down
2 changes: 2 additions & 0 deletions src/Components/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import Sidelinks from "./Sidelinks/Sidelinks";
import GalleryCarousel from "./GalleryCarousel/GalleryCarousel";
import EventCard from "./EventCard/EventCard";
import Hero from "./Hero/Hero";
import Event from "./Event/Event";

export {
Button,
Expand All @@ -26,4 +27,5 @@ export {
Sponsors,
Sidelinks,
Hero,
Event,
};
10 changes: 5 additions & 5 deletions src/Data/EventCardData.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,35 +1,35 @@
{
"cardDataArray": [
{
"id": 0,
"id": 1,
"title1": "IPL Auction",
"title2": "Lorem ipsum",
"image": "https://wallpapercave.com/wp/wp4789782.jpg",
"content": "Teams will have the option to Teams will have the option to rLorem ipsum dolor sit amet consectetur adipisicing elit.dolor sit amet consectetur adipisicing elit. Libero nisi nostrum et veniam porro cum dignissimos at quasi assumenda repellat debitis aperiam dolorem rerum officiis, sit necessitatibus numquam reprehenderit consequatur commodi expedita. Saepe quos quasi, unde nihil soluta eos voluptatibus laborum corrupti, culpa, reiciendis quidem dicta? Eaque corporis tenetur laborum necessitatibus. Libero nisi nostrum et veniam porro cum dignissimos at quasi assumenda repellat debitis aperiam dolorem rerum officiis, sit necessitatibus numquam reprehenderit consequatur commodi expedita. Saepe quos quasi, unde nihil soluta eos voluptatibus laborum corrupti, culpa, reiciendis quidem dicta? Eaque corporis tenetur laborum necessitatibus. Aperiam, commodi velit, porro aliquid pariatur ipsam maiores vero praesentium obcaecati, officia assumenda ex eveniet rerum. Qui voluptas, iure repellat consectetur iste asperiores nihil nesciunt laborum fugiat facere ipsa mollitia quasi corporis similique, placeat nulla aliquid. Id ipsa quia, laborum, soluta ratione necessitatibus laboriosam debitis temporibus magni dolore quasi. ."
},
{
"id": 1,
"id": 2,
"title1": "Tech Nerds",
"title2": "Lorem ipsum",
"image": "https://img.freepik.com/free-photo/colleagues-reading-using-laptop-during-study-session_23-2149285397.jpg?w=740&t=st=1677492146~exp=1677492746~hmac=d16efa4df126d4c5afb1125cc7dcf5aea2e81bf3b966d118c10a4ea4af85ee42",
"content": "Technerd, a competition that allows you to demonstrate your technical expertise. Utilize your technical competencies to overcome all the barriers to your idea and bring about a satisfactory output that is beneficial to everyone."
},
{
"id": 2,
"id": 3,
"title1": "Outwit the Board Room",
"title2": "Lorem ipsum",
"image": "https://img.freepik.com/premium-photo/office-business-boardroom-meeting-room-conference-table-modern-style-3d-rendering_43151-405.jpg?w=1480",
"content": "Outwit the Board Room” is the ultimate test of a startups’ core players’ decision making ability, juggling the restraints as they go."
},
{
"id": 3,
"id": 4,
"title1": "StartUp Expo",
"title2": "Lorem ipsum",
"image": "https://img.freepik.com/free-photo/young-attractive-business-colleagues-thoughtfully-working-new-project-with-laptop-papers-modern-office_574295-5141.jpg?w=1480&t=st=1677492084~exp=1677492684~hmac=b34d6995be0dffb4c22e5af28e5f79e49e7141167ab39ff6edf6effd91d68185",
"content": "Startup Expo is the one-in-all stop to get your startup the boost it needs to reach its full potential. It is the ideal avenue that lures investors, influencers and attendees from anywhere and everywhere."
},
{
"id": 4,
"id": 5,
"title1": "Extra Dummy",
"title2": "Lorem ipsum",
"image": "https://wallpapercave.com/wp/wp4789782.jpg",
Expand Down
Loading