Updated sponsors and merch page

.gitignore

@@ -14,6 +14,7 @@
 
 # production
 /build
+package-lock.json
 
 # misc
 .DS_Store

Dockerfile

@@ -0,0 +1,15 @@
+FROM node:latest
+
+WORKDIR /app
+
+COPY . .
+
+#RUN yarn add sharp
+
+RUN npm i
+
+RUN npm run build
+
+EXPOSE 3000
+
+CMD ["npm", "start"]

components/EventsWorkshop/EventsCard.js

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import styles from './eventsworkshop.module.css';
-import { FcExpand, FcCollapse } from "react-icons/fc";
+import { HiDownload } from "react-icons/hi";
 
 function EventsCard(props) {
 
@@ -19,12 +19,21 @@ function EventsCard(props) {
             <div className={styles.cardContent}>
                 <h5>{props.data.category}</h5>
                 <h2>{props.data.title}</h2>
-                <p>{isExpanded ? props.data.desc : props.data.desc.substring(0, 200) + '...'}</p>
+                <p>{isExpanded ? props.data.desc : props.data.desc.substring(0, 70) + '...'}</p>
+                {/* <h5>{props.data.date}</h5>
+                <div className={styles.poster_contact} >
+                    {isExpanded && props.data.contacts ? <h3>Contacts :</h3> : ""}
+                    {isExpanded ? Contacts(props.data?.contacts || []) : ""}
+                </div> */}
+                {isExpanded && props.data.download ? <div className={styles.download} onClick={() => expand(!isExpanded)}>
+                    <a className={styles.register_btn} href={props.data.download} target={"_blank"} rel="noreferrer"><i className={styles.down_icon}><HiDownload /></i>{"  Download"}</a>
+                </div> : ""}
+
                 <div className={isExpanded ? styles.ecard_styles : styles.ecard_actions}>
                     {isExpanded ? <p >Fee: {props.data.fees}</p> : ""}
 
                     <div className={islive ? styles.register : styles.disabled}>
-                        <a className={islive ? styles.register_btn : ''} href="#" target={islive ? "_parent" : ""} rel="noreferrer">{islive ? isExpanded ? "Register" : "Register" : "Closed"}</a>
+                        <a className={islive ? styles.register_btn : ''} href={props.data.register_link} target={islive ? "_blank" : ""} rel="noreferrer">{islive ? isExpanded ? "Register" : "Register" : "Closed"}</a>
                     </div>
                     {isExpanded ? "" : <div className={isExpanded ? "" : styles.register} onClick={() => expand(!isExpanded)}>
                         <a className={isExpanded ? '' : styles.register_btn} href="#" target={islive ? "_parent" : ""} rel="noreferrer">{isExpanded ? "" : "Learn More"}</a>
@@ -33,7 +42,7 @@ function EventsCard(props) {
 
                 </div>
             </div>
-           
+
             {/* <h5>{props.data.category}</h5>
             <h2>{props.data.title}</h2>
             <p>{isExpanded ? props.data.desc : props.data.desc.substring(0, 200) + '...'}</p> */}

components/EventsWorkshop/EventsWorkshop.js

@@ -2,10 +2,10 @@ import React,{useEffect, useState} from 'react';
 import styles from './eventsworkshop.module.css'
 import EventsCard from './EventsCard';
 import WorkshopCard from './WorkshopCard';
-import HackathonsCard from './HackathonsCard';
-import Dummy from "../config/dummy.json";
+
+import Events from "../config/events2k23.json";
 // import Events from '../config/events.json';
-// import Workshop from "../config/workshop.json";
+import Workshop from "../config/workshops2k23.json";
 // import Hackathons from "../config/hackathons.json";
 
 function EventsWorkshop({number}) {
@@ -24,15 +24,15 @@ function EventsWorkshop({number}) {
             </div>
             {(events == 0) ?
                 <div className={styles.events__section}>
-                    {Dummy.map((event, i) => {
-                        return <EventsCard data={event} key={i} />
+                    {Workshop.map((workshop, i) => {
+                        return <WorkshopCard data={workshop} key={i} />
                     })}
 
                 </div>
                 : (events == 1) ?
                     <div className={styles.events__section}>
-                        {Dummy.map((workshop, i) => {
-                            return <WorkshopCard data={workshop} key={i} />
+                        {Events.map((event, i) => {
+                            return <EventsCard data={event} key={i} />
                         })}
                     </div>
                     :

components/EventsWorkshop/Hackathons.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import styles from './eventsworkshop.module.css'
+import ctstyles from "../Contact/contact.module.css";
+import HackathonsCard from './HackathonsCard';
+import Hackathon from "../config/hackathons2k23.json";
+function Hackathons() {
+    return (
+        <div className={styles.events__workshop}>
+
+            <div
+                className={`${ctstyles.contactHeadingMain} ${ctstyles.flexCenter}`}
+                data-aos="fade-down"
+            >
+                HACKATHONS
+            </div>
+            <div className={styles.events__section}>
+                {Hackathon.map((hackathon, i) => {
+                    return <HackathonsCard data={hackathon} key={i} />
+                })}
+            </div>
+        </div>
+    )
+}
+
+export default Hackathons

components/EventsWorkshop/HackathonsCard.js

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import styles from './eventsworkshop.module.css';
-import { FcExpand, FcCollapse } from "react-icons/fc";
+import { HiDownload } from "react-icons/hi";
 
 function HackathonsCard(props) {
 
@@ -15,28 +15,26 @@ function HackathonsCard(props) {
     },[]);
 
     return (
-        <div className = {styles.ecard} data-aos="fade-up">
-            <h5>{props.data.category}</h5>
-            <h2>{props.data.title}</h2>
-            <p>{isExpanded ? props.data.desc : props.data.desc.substring(0,200) + '...'}</p>
-            {isExpanded && props.data.timeline ? <h3>Timeline :</h3> : ""}
-            <div className={styles.poster}>
-            <div className={styles.poster_contact}>
-            {isExpanded && props.data.timeline ? Timeline(props.data.timeline) : ""}
-            {isExpanded ? <h3>Contacts :</h3> : ""}
-            {isExpanded ? Contacts(props.data.contacts) : ""}
-            </div>
-            {isExpanded && props.data.timeline ? <a style={{margin: 'auto'}} href={props.data.img} rel="noreferrer" target='_blank'><img src={props.data.img}/></a>: ""}
-            </div>
-            <button id = {styles.expand} onClick = {() => expand(!isExpanded)}> {isExpanded ? <FcCollapse /> : <FcExpand />} </button>
-            <div className = {styles.ecard_actions}>
-                <h5>{props.data.date}</h5>
-                {props.data.download_link &&
-                <div className={styles.register}>                  
-                    <a className={styles.download_btn} href={props.data.download_link} download={props.data.title} target={"_blank"} rel="noreferrer">Download Pdf <img src='/download-solid.svg' height='16px'></img></a>
-                </div>}
-                <div className={islive ? styles.register : styles.disabled}>                  
-                    <a className={islive ? styles.register_btn : ''} href={islive ? props.data.register_link : "/"} target={islive ? "_blank" : ""} rel="noreferrer">{islive ? "Register" : "Closed"}</a>
+        <div className={styles.ecard} data-aos="fade-up">
+            {props.data.poster ? <div className={styles.cardImg}><img src={props.data.poster} /></div> : ""}
+            <div className={styles.cardContent}>
+                <h5>{props.data.category}</h5>
+                <h2>{props.data.title}</h2>
+                <p>{isExpanded ? props.data.desc : props.data.desc.substring(0, 70) + '...'}</p>
+                {isExpanded && props.data.download ? <div className={styles.download} onClick={() => expand(!isExpanded)}>
+                    <a className={styles.register_btn} href={props.data.download} target={"_blank"} rel="noreferrer"><i className={styles.down_icon}><HiDownload /></i>{"  Download"}</a>
+                </div> : ""}
+                <div className={isExpanded ? styles.ecard_styles : styles.ecard_actions}>
+                    {isExpanded ? <p >Fee: {props.data.fees}</p> : ""}
+
+                    <div className={islive ? styles.register : styles.disabled}>
+                        <a className={islive ? styles.register_btn : ''} href={props.data.register_link} target={islive ? "_parent" : ""} rel="noreferrer">{islive ? isExpanded ? "Register" : "Register" : "Closed"}</a>
+                    </div>
+                    {isExpanded ? "" : <div className={isExpanded ? "" : styles.register} onClick={() => expand(!isExpanded)}>
+                        <a className={isExpanded ? '' : styles.register_btn} href="#" target={islive ? "_parent" : ""} rel="noreferrer">{isExpanded ? "" : "Learn More"}</a>
+                    </div>}
+
+
                 </div>
             </div>
         </div>

components/EventsWorkshop/WorkshopCard.js

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import styles from './eventsworkshop.module.css';
-import { FcExpand, FcCollapse } from "react-icons/fc";
+import { HiDownload } from "react-icons/hi";
 
 function EventsCard(props) {
 
@@ -20,12 +20,15 @@ function EventsCard(props) {
             <div className={styles.cardContent}>
                 <h5>{props.data.category}</h5>
                 <h2>{props.data.title}</h2>
-                <p>{isExpanded ? props.data.desc : props.data.desc.substring(0, 200) + '...'}</p>
+                <p>{isExpanded ? props.data.desc : props.data.desc.substring(0, 70) + '...'}</p>
+                {isExpanded && props.data.download ? <div className={styles.download} onClick={() => expand(!isExpanded)}>
+                    <a className={styles.register_btn} href={props.data.download} target={"_blank"} rel="noreferrer"><i className={styles.down_icon}><HiDownload /></i>{"  Download"}</a>
+                </div> : ""}
                 <div className={isExpanded ? styles.ecard_styles : styles.ecard_actions}>
                     {isExpanded ? <p >Fee: {props.data.fees}</p> : ""}
 
                     <div className={islive ? styles.register : styles.disabled}>
-                        <a className={islive ? styles.register_btn : ''} href="#" target={islive ? "_parent" : ""} rel="noreferrer">{islive ? isExpanded ? "Register" : "Register" : "Closed"}</a>
+                        <a className={islive ? styles.register_btn : ''} href={props.data.register_link} target={islive ? "_parent" : ""} rel="noreferrer">{islive ? isExpanded ? "Register" : "Register" : "Closed"}</a>
                     </div>
                     {isExpanded ? "" : <div className={isExpanded ? "" : styles.register} onClick={() => expand(!isExpanded)}>
                         <a className={isExpanded ? '' : styles.register_btn} href="#" target={islive ? "_parent" : ""} rel="noreferrer">{isExpanded ? "" : "Learn More"}</a>

components/EventsWorkshop/eventsworkshop.module.css

@@ -50,12 +50,13 @@
 
 .ecard {
     width: 100%;
-    padding: 20px;
+    padding: 30px 10px;
     border-radius: 20px;
     background-color: rgba(255, 255, 255, 0.20);
     backdrop-filter: blur(3.8px);
     box-shadow: 6px 9px 12px -3px rgba(0, 0, 0, 0.65);
     display: flex;
+    /* gap: 20px; */
     /* flex-direction: row; */
     margin: 2rem 0;
     transition: height 2s;
@@ -114,7 +115,7 @@
 .ecard_actions {
     display: flex;
     justify-content: flex-start;
-    align-items: center;
+    align-items: flex-end;
     flex-wrap: wrap;
     gap: 20px;
     padding-top: 5%;
@@ -142,6 +143,14 @@
     justify-content: space-between;
 }
 
+.download {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 20px 0;
+}
+
+
 .poster {
     display: flex;
     justify-content: space-between;
@@ -156,22 +165,26 @@
 }
 
 .cardImg {
-    width: 50%;
+    width: 30%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
     height: auto;
     overflow: hidden;
     /* padding: 2%; */
 
 }
 
 .cardImg img {
-    width: 100%;
-    height: 100%;
+    width: 80%;
+    height: auto;
     border-radius: 15px;
     object-fit: cover;
 
 }
 
 .cardContent {
+    width: 70%;
     padding: 0 2%;
 }
 
@@ -185,12 +198,12 @@
 }
 
 .poster_contact>h3 {
-    background-image: var(--text-gradient-color);
-    background-clip: padding-box;
-    -webkit-background-clip: text;
+    color: var(--color-light-blue);
+    /* background-clip: padding-box;
+    -webkit-background-clip: text; */
     background-size: 100%;
     margin-right: auto;
-    -webkit-text-fill-color: transparent;
+    /* -webkit-text-fill-color: transparent; */
 }
 
 .poster>p {
@@ -308,7 +321,7 @@
 }
 
 .contacts {
-    padding: 20px;
+    padding: 10px;
 }
 
 #expand {
@@ -373,10 +386,15 @@
     }
 
     .cardImg {
+
         width: 100%;
         padding: 2% 0;
     }
 
+    .cardContent {
+        width: 100%;
+    }
+
     .poster {
         flex-direction: column;
     }

components/Merch/MerchComp.js

@@ -1,16 +1,16 @@
 import React, { useState } from 'react'
 import styles from './merch.module.css'
 import MerchItem from "./Merchandise";
-import tshirt from '../../public/shirtpreview/tshirt.webp'
-import hoodie from '../../public/shirtpreview/hoodie.webp'
+import tshirt from '../../public/shirtpreview/tee_front.webp'
+import hoodie from '../../public/shirtpreview/hoodie_front.webp'
 
 
 function Merch() {
-
     return (
+
         <div className={styles.merch_container}>
                 <MerchItem merchName={"TSHIRT"} imageLink={tshirt} shoppingLink="/merch/tshirt"/>
-                <MerchItem merchName={"HOODIE"} imageLink={hoodie} shoppingLink="/merch/hoodie"/>
+                {/* <MerchItem merchName={"HOODIE"} imageLink={hoodie} shoppingLink="/merch/hoodie" /> */}
         </div>
     )
 }