GDSC-NMIMS-MPSTME-Mumbai · kamakshyan · Jan 30, 2023 · Feb 26, 2023 · Feb 26, 2023 · Feb 26, 2023
diff --git a/.husky/pre-commit b/.husky/pre-commit
diff --git a/package.json b/package.json
@@ -36,5 +36,9 @@
     "lint-staged": "^13.1.0",
     "prettier": "2.8.3",
     "prettier-plugin-astro": "^0.7.2"
-  }
+  },
+  "main": "index.js",
+  "repository": "https://github.com/GDSC-NMIMS-MPSTME-Mumbai/gdscmpstme.com.git",
+  "author": "Kamakshya Nanda <[email protected]>",
+  "license": "MIT"
 }
diff --git a/public/decorations/speaker-decor-red.svg b/public/decorations/speaker-decor-red.svg
diff --git a/public/images/EventLogo_AI Summit.png b/public/images/EventLogo_AI Summit.png
diff --git a/public/images/event-logo.png b/public/images/event-logo.png
diff --git a/public/images/speaker-img.png b/public/images/speaker-img.png
diff --git a/src/components/events/ArchivedEventCard.astro b/src/components/events/ArchivedEventCard.astro
@@ -0,0 +1,19 @@
+---
+const {title,descr,imgsrc,date,month,year} = Astro.props;
+// const date1 = date.slice(8,10)
+---
+
+<div class="flex flex-col border-2 border-yellow-400 bg-white p-8">
+    <div class="text-center w-48 h-auto">
+        <p class="text-sm -m-4 ml-auto w-1/2 p-1 rounded-md bg-yellow-500 lg:text-xs">
+            {month+" "+date+", "+year}
+        </p>
+        <img class="mx-auto" src={imgsrc} alt="">
+        <p class="text-lg font-bold mb-4">
+            {title}
+        </p>
+        <p class="h-64 overflow-hidden lg:text-md">
+            {descr}
+        </p>
+    </div>
+</div>
diff --git a/src/components/events/EventDetailed.astro b/src/components/events/EventDetailed.astro
@@ -0,0 +1,44 @@
+---
+import SpeakerCard from "./SpeakerCard.astro";
+import { getEvents } from "../../utils/fetchData";
+
+const events = await getEvents();
+---
+<div>
+    <div class="flex flex-col bg-purple-300 px-8 py-16">
+
+        <div class="flex flex-col mb-5">
+            <img src="./images/EventLogo_AI Summit.png" alt="">
+            <p class="text-4xl text-purple-900 font-bold mx-auto">{events.name}</p>
+        </div>
+        <div class="text-center">
+            <p class="text-lg mb-10">Join us as we host industry-experts and top researchers in the field of Artificial Intelligence, Machine Learning and Deep Learning to give you an insight into the world of Artificial Intelligence like no other.</p>
+            <a class="text-white px-12 rounded-sm bg-purple-600 py-3" href="">Register</a>
+        </div>
+    </div>
+    <div class="bg-yellow-300 bg-opacity-40 px-12 py-16">
+        <p class="text-2xl font-bold mb-5">
+            More About AI Summit
+        </p>
+        <p>
+            GDSC MPSTME is on its way to leave a mark of perfection with its upcoming global event: “The AI Summit”. It is an event featuring some of the most appreciated people in the field of Technology and Science.
+            <br>
+            <br>
+            Going live from 18th to 20th February, the goal of this AI Summit is to empower the current CS involved youth about what’s next in AI and how it is going to affect our future. With all of the major companies like Facebook (rebranding itself as Meta), Apple (adding AI into their products) and Google (building AI tech) turning there attention towards AI and Multi-reality to expand their area of working; the world would expect the working part of the population to be in coherence with theoretical, practical and industrial use-case side of AI. This is what the AI Summit hopes to achieve.
+            <br>
+            <br>
+            To bring this to wonderful thought into action, we have 3 amazing speakers coming up for the event to highlight this highly interesting topic!
+            <br>
+            <br>
+            <p class="font-bold">
+            Watch this space as we reveal more about our speakers!
+            </p>
+        </p>
+    </div>
+    <div class="flex flex-col px-12 py-16 bg-red-500 bg-opacity-20">
+        <p class="text-xl font-bold mb-16">Meet our Speakers</p>
+        <SpeakerCard />
+        <SpeakerCard />
+        <SpeakerCard />
+    </div>
+</div>
diff --git a/src/components/events/SpeakerCard.astro b/src/components/events/SpeakerCard.astro
@@ -0,0 +1,32 @@
+---
+import Icon from "astro-icon";
+const {
+    speakerName, speakerDesignation,speakerAbout, speakerImg,
+    speakerInsta,speakerBlog,speakerGit,speakerGoogle,
+    speakerLinkedin,speakerWeb,speakerTwitter,speakerWiki,speakerYoutube,
+} = Astro.props;
+
+// if(speakerTwitter == ""){
+
+// }
+---
+<div class="relative lg:flex lg:items-center">
+    <img class="mx-auto mb-10 w-4/5 lg:w-56 lg:mr-32" src={speakerImg} alt="">
+    <div>
+        <p class="text-red-500 font-bold">{speakerName}</p>
+        <p class="text-sm mb-2">{speakerDesignation}</p>
+        <div class="flex gap-2 mb-5">
+            <a id="icon twitter" href={speakerTwitter}><Icon class="h-6" name="ri:twitter-line" /></a>
+            <a id="icon Insta" href={speakerInsta}><Icon class="h-6" name="ri:instagram-line"/></a>
+            <a id="icon Wiki" href={speakerWiki}><Icon class="h-6" name="icomoon-free:wikipedia"/></a>
+            <a id="icon Youtube" href={speakerYoutube}><Icon class="h-6" name="ant-design:youtube-outlined"/></a>
+            <a id="icon Git" href={speakerGit}><Icon class="h-6" name="akar-icons:github-fill"/></a>
+            <a id="icon Linkedin" href={speakerLinkedin}><Icon class="h-6" name="uil:linkedin"/></a>
+            <a id="icon Web" href={speakerWeb}><Icon class="h-6" name="mdi:web"/></a>
+            <a id="icon Blog" href={speakerBlog}><Icon class="h-6" name="ion:journal-outline"/></a>
+            <a id="icon Google" href={speakerGoogle}><Icon class="h-6" name="simple-icons:googlescholar"/></a>
+        </div>
+        <p class="mb-10">{speakerAbout}</p>
+    </div>
+    <img class="" src="./decorations/speaker-decor-red.svg" alt="">
+</div>
diff --git a/src/pages/events/[event].astro b/src/pages/events/[event].astro
@@ -1,7 +1,7 @@
 ---
-import WIP from '../../components/WIP.astro';
 import Layout from '../../layouts/Layout.astro';
-
+import SpeakerCard from '../../components/events/SpeakerCard.astro';
+import { Icon } from 'astro-icon';
 import { getEvents, getEvent } from '../../utils/fetchData';
 
 export async function getStaticPaths() {
@@ -17,10 +17,98 @@ export async function getStaticPaths() {
 const { event: slug } = Astro.params;
 
 const event = await getEvent(slug);
+const month = event.startDate.toLocaleString('default', { month:'short'});
+const time = event.startDate.toLocaleString('en-US', { hour: 'numeric', minute: 'numeric', hour12: true });
+
+const currentDate = new Date();
+var btn_message = "Register";
+
+if(currentDate > event.endDate){
+  btn_message = "Learn More";
+}
 ---
 
 <Layout title={`${event.name} | GDSC MPSTME`}>
-  <main>
-    <WIP text={event.name} />
+  <main class="flex-1 overflow-x-hidden">
+    <div class="relative flex flex-col items-center">
+      <img class="hidden lg:block absolute w-24 transform rotate-12 z-40" src="./decorations/lines-green.svg" alt="">
+      <div class="flex flex-col bg-purple-300 px-8 pb-48 lg:flex-row lg:justify-between lg:items-center lg:px-32 lg:py-16">
+          <div class="flex flex-col text-center">
+              <img class="lg:w-80" src={event.imgUrl} alt="">
+          </div>
+          <div class="flex flex-col items-center text-center lg:text-left lg:w-2/3 lg:pl-16">
+              <p class="text-4xl text-purple-900 mb-5 font-bold mx-auto lg:mx-0 lg:mr-auto">{event.name}</p>
+              <p class="text-lg mb-10">{event.summary}</p>
+              <a id="register_btn" class="flex w-1/2 justify-center text-white px-12 rounded-sm bg-purple-600 py-3 lg:mr-auto lg:w-1/3" href={event.registerationLink}>{btn_message}
+                <Icon class="h-6" name="carbon:chevron-right"/>
+              </a>
+          </div>
+      </div>
+
+      <div class="absolute z-20 top-[190vw] flex flex-col border-2 border-green-500 rounded-xl w-2/3 p-8 bg-green-200  lg:flex-row lg:w-2/5 lg:justify-between lg:top-[28vw] lg:px-16">
+        <div class="flex flex-col justify-between text-center gap-2 mb-5 lg:mb-0">
+          <Icon name="ic:sharp-calendar-month" class="h-20" />
+          <p>
+            {event.startDate.getDate()} to {event.endDate.getDate()}
+            <br>
+            <span class="uppercase tracking-wide">{month}</span>
+          </p>
+        </div>
+        <div class="flex flex-col justify-between text-center gap-2 mb-5 lg:mb-0">
+          <Icon name="ic:baseline-access-time" class="h-20" />
+          <p>
+            {time} <br> Onwards
+          </p>
+        </div>
+        <div class="flex flex-col justify-between gap-2 text-center">
+          <Icon name="ic:baseline-location-on" class="h-20" />
+          <p>
+            {event.location}
+          </p>
+        </div>
+
+      </div>
+
+      <div class="clip_bottom relative z-10 bg-yellow-100 px-12 pt-[105vw] pb-32 lg:pt-52 lg:px-32">
+          <p class="text-2xl font-bold mb-5">
+              More <span class="text-blue-600">About</span> {event.name}
+          </p>
+          <p>
+              {event.description}
+              <br>
+              <br>
+              <p class="font-bold">
+              Watch this space as we reveal more about our speakers!
+              </p>
+          </p>
+      </div>
+      <div class="flex flex-col relative w-full -z-10 -mt-32 px-12 pt-44 pb-16 bg-red-500 bg-opacity-20 lg:px-32">
+          <p class="text-2xl font-bold mb-16">Meet our <span class="text-blue-600">Speakers</span></p>
+          {
+            event.speakers.map(speaker =>(
+            <SpeakerCard speakerInsta ={speaker.instagramLink}
+            speakerBlog={speaker.blogLink}
+            speakerGit = {speaker.githubLink}
+            speakerGoogle = {speaker.googleScholarLink}
+            speakerLinkedin = {speaker.linkedinLink}
+            speakerWeb = {speaker.website}
+            speakerTwitter = {speaker.twitterLink}
+            speakerWiki = {speaker.wikipediaLink}
+            speakerYoutube = {speaker.youtubeLink}
+            speakerImg={speaker.imgUrl} speakerName={speaker.name} speakerDesignation={speaker.designation} speakerAbout={speaker.bio}/>
+            ))
+          }
+
+      </div>
+      <img class="lg:block z-50 absolute" src="./decorations/dots-red.svg" alt="">
+    </div>
+      <style>
+        .clip_top{
+            clip-path: polygon(0 10%, 100% 0%, 100% 100%, 0% 100%);
+        }
+        .clip_bottom{
+            clip-path: polygon(0 0, 100% 0%, 100% 92%, 0% 100%);
+        }
+      </style>
   </main>
 </Layout>
diff --git a/src/pages/events/index.astro b/src/pages/events/index.astro
@@ -1,20 +1,152 @@
 ---
 import Layout from '../../layouts/Layout.astro';
-import { getEvents } from '../../utils/fetchData';
+import { getLatestEvent, getEvents, getEvent } from '../../utils/fetchData';
+import ArchivedEventCard from '../../components/events/ArchivedEventCard.astro';
+import Icon from 'astro-icon';
+
+const events = await getLatestEvent();
+const allEvents = await getEvents();
+
+const startdateLatest = events.startDate;
+const enddateLatest = events.endDate;
+
+const date = startdateLatest.getDate();
+const dateend = enddateLatest.getDate();
+
+var date1 = date.toString();
+var date2 = dateend.toString();
+
+if (date < 9 ) {
+    date1 = "0"+date1;
+} else if (dateend < 9){
+    date2 = "0"+date2;
+} else {
+    date1 = date.toString();
+    date2 = dateend.toString();
+}
+
+const year = startdateLatest.getFullYear();
+const month = startdateLatest.toLocaleString('default', { month:'short'});
+const monthend = enddateLatest.toLocaleString('default', { month:'short'});
+
 
-const events = await getEvents();
 ---
 
 <Layout title="Events | GDSC MPSTME">
-  <main class="flex-1">
-    <ul class="m-5">
-      {
-        events.map(event => (
-          <li>
-            👉 <a href={`/events/${event.slug}`}>{event.name}</a>
-          </li>
-        ))
+  <main class="flex-1 overflow-x-hidden">
+    <div class="flex flex-col relative mt-10 -mb-44 z-10 bg-purple-300 p-10 w-5/6 mx-auto rounded-3xl lg:p-6">
+      <!-- <div class="flex flex-col text-4xl text-purple-900 ml-auto lg:text-3xl">
+          <p class="ml-auto">{date} - {dateend}</p>
+      </div>
+      <div class="text-purple-900 ml-auto">
+        <p class="ml-auto text-md uppercase tracking-[.30em] lg:text-lg lg:ml-14">{month}</p>
+      </div> -->
+      <div class="flex text-purple-900 ml-auto">
+        <div class="flex flex-col">
+            <p class="text-4xl">{date1}</p>
+            <p class="ml-auto text-lg tracking-wider uppercase">{month}</p>
+        </div>
+        <span class="text-4xl">&nbsp;-&nbsp;</span>
+        <div class="flex flex-col">
+            <p class="text-4xl">{date2}</p>
+            <p class="ml-auto text-lg tracking-wider uppercase">{monthend}</p>
+        </div>
+      </div>
+      <div class="flex flex-col lg:flex-row">
+          <div class="lg:w-1/2">
+              <img class="-mb-10" src={events.imgUrl} alt="">
+          </div>
+          <div class="flex flex-col lg:w-3/4 lg:justify-center lg:pr-12">
+              <p class="text-3xl text-center font-bold mb-5 mx-auto lg:mx-0 lg:text-4xl lg:text-left">{events.name}</p>
+              <p class="text-lg w-2/5 mx-auto px-2 text-center rounded-full text-white bg-purple-700 mb-5 lg:w-1/6 lg:mx-0 ">{events.tags}</p>
+              <p class="text-xl text-center mb-5 lg:text-lg lg:text-left">{events.summary}</p>
+              <div class="flex flex-col text-center lg:flex-row">
+                  <a class="flex justify-center px-3 py-2 bg-purple-700 text-white mb-3 lg:mb-0 lg:mr-3 lg:w-1/3" href={`/events/${events.slug}`}>More Details
+                    <Icon name="carbon:chevron-right" class="h-6" /></a>
+                  <a class="flex justify-center px-3 py-2 border-2 border-purple-700 lg:mb-0 lg:w-1/3" href={events.registrationLink}>Register
+                    <Icon name="carbon:chevron-right" class="h-6" /></a>
+              </div>
+          </div>
+      </div>
+      <img class="hidden lg:block absolute w-24 -top-10 -left-10" src="./decorations/code.svg" alt="">
+      <img class="hidden lg:block absolute w-24 bottom-24 transform rotate-12 -right-10" src="./decorations/lines-green.svg" alt="">
+  </div>
+
+  <div class="clip_top relative bg-yellow-400 bg-opacity-20 p-8 lg:px-32 lg:pt-16 lg:pb-44">
+
+      <div class="mt-44">
+          <div class="flex flex-col">
+              <p class="text-xl font-bold text-blue-500">Events Archive</p>
+              <p class="text-2xl font-bold">Successful, Memorable Events Organized So Far</p>
+          </div>
+          <div class="horizontal-scrollbar flex py-8 overflow-x-scroll gap-10 lg:gap-14">
+              {
+                allEvents.map(event =>(
+                  <a href={`/events/${event.slug}`}>
+                    <ArchivedEventCard date={event.startDate.getDate()} month={event.startDate.toLocaleString('default', { month:'short'})} year={event.startDate.getFullYear()}  imgsrc={event.imgUrl} title={event.name} descr={event.summary}/>
+                  </a>
+                ))
+              }
+          </div>
+      </div>  
+  </div>
+
+
+
+  <div class="clip_bottom relative z-10 flex flex-col p-8 bg-red-100 lg:px-32 lg:py-16">
+      <div class="mb-24">
+          <div class="mb-6">
+              <p class="text-xl font-bold text-blue-500"> 
+                  Partner
+              </p>
+              <p class="text-2xl font-bold">
+                  Our Partner Enables Us To Give Our Best
+              </p>
+          </div>
+          <div class="flex flex-col lg:flex-row lg:items-center">
+              <img class="mx-auto mb-6 lg:mr-10" src="./images/wolfram-research-logo.png" alt="">
+              <div class="text-center lg:text-left">
+                  <p class="text-2xl mb-2 font-bold">
+                      Wolfram Research, Inc.
+                  </p>
+                  <p class="text-lg">
+                      Founded by Stephen Wolfram in 1987, Wolfram Research is one of the world's most respected computer, web and cloud software companies—as well as a powerhouse of scientific and technical innovation. As a pioneer in computation and computational knowledge, we have pursued a long-term vision to develop the science, technology and tools to make computation an ever-more-potent force in today's and tomorrow's world.
+                  </p>
+              </div>
+          </div>
+      </div>
+
+  </div>
+  <div class="h-24">
+
+  </div>
+    <img class="hidden absolute lg:block  z-30 w-64 right-0 -bottom-[170vh] " src="./decorations/dots-red.svg" alt=""> <!-- -bottom-28 -->
+    <img class="hidden lg:block w-32 absolute z-30 -bottom-[245vh] left-[20vw] " src="./decorations/globe-green.svg" alt="">
+    <img class="hidden lg:block w-28 absolute z-30 -bottom-[240vh] left-[35vw]" src="./decorations/book-red.svg" alt="">
+    <img class="hidden lg:block w-22 absolute z-30 -bottom-[235vh] left-1/2" src="./decorations/apple-yellow.svg" alt="">
+    <img class="hidden lg:block w-32 absolute z-30 -bottom-[235vh] right-1/4" src="./decorations/set-square-blue.svg" alt="">
+
+
+  <style>
+      .horizontal-scrollbar::-webkit-scrollbar {
+          width: 5px;
+          height: 8px;
+          background-color: rgb(255, 255, 255);
+          border-radius: 10px;
+      }
+      .horizontal-scrollbar::-webkit-scrollbar:vertical {
+          display: none;
+      }
+      .horizontal-scrollbar::-webkit-scrollbar-thumb:horizontal {
+          background: rgba(251, 191, 14, 1);
+          border-radius: 10px;
+      }
+      .clip_top{
+          clip-path: polygon(0 10%, 100% 0%, 100% 100%, 0% 100%);
+      }
+      .clip_bottom{
+          clip-path: polygon(0 0, 100% 0%, 100% 92%, 0% 100%);
       }
-    </ul>
+  </style>
   </main>
 </Layout>