From 63bc9ec9626aa6fc92f21c615b4beb4df4a90e42 Mon Sep 17 00:00:00 2001
From: soumit-s <soumit.srim@gmail.com>
Date: Sun, 20 Aug 2023 01:10:13 +0530
Subject: [PATCH] Created Interhacktive event page.

---
 client/app/events/interhacktive/page.js       | 175 ++++++++++++
 client/styles/events/Interhacktive.module.css | 255 ++++++++++++++++++
 2 files changed, 430 insertions(+)
 create mode 100644 client/app/events/interhacktive/page.js
 create mode 100644 client/styles/events/Interhacktive.module.css

diff --git a/client/app/events/interhacktive/page.js b/client/app/events/interhacktive/page.js
new file mode 100644
index 0000000..63f339e
--- /dev/null
+++ b/client/app/events/interhacktive/page.js
@@ -0,0 +1,175 @@
+'use client'
+
+import Link from 'next/link';
+
+import DateElement from '../../../component/Date';
+import SponsorList from '../../../component/Sponsor';
+import { EVENTS } from '../../../data'
+import styles from '../../../styles/events/Interhacktive.module.css'
+import useMediaQuery from '../../../hooks/useMediaQuery'
+
+import { ArrowDown, CalendarCheck, LinkedinLogo } from '@phosphor-icons/react';
+import { useEffect, useState } from 'react';
+
+const JUDGES = [
+    { name: 'Aakash Munshi', linkedIn: 'https://www.linkedin.com/in/akash-munshi/' },
+    { name: 'Jyoti Mishra', linkedIn: 'https://www.linkedin.com/in/jyotim29/' },
+    { name: 'Rahul Jaiswal', linkedIn: 'https://www.linkedin.com/in/rahul-jaiswal-570042ab/' },
+    { name: 'Sandip Palit', linkedIn: 'https://www.linkedin.com/in/sandip-palit/' },
+    { name: 'Saswat Nayak', linkedIn: 'https://www.linkedin.com/in/saswat-nayak-a41212166/' },
+    { name: 'Sayan Sengupta', linkedIn: 'https://www.linkedin.com/in/sayansenguptaa' }
+]
+
+
+
+export default function Interhacktive() {
+    const event = EVENTS.interhacktive0;
+
+    return (
+        <div className={styles.holder}>
+            <div className={styles.container}>
+                <div className={styles.header}>
+                    <div className={styles.articleTitle}>
+                        {event.heading}
+                    </div>
+                    <div className={styles.eventDate}>
+                        <CalendarCheck className={styles.eventDateCalender} />
+                        <DateElement date={event.date} />
+                    </div>
+                </div>
+
+                <div className={styles.eventBanner}>
+                    <img src="/static/assets/ih_1.png" className={styles.image}></img>
+                </div>
+
+                <div className={styles.section}>
+                    <div><RegisterButton /></div>
+                </div>
+
+                <div className={`${styles.normalTxt} ${styles.section}`}>
+                    <p>Unleash Your Ideas At Interhacktive, The First Intra-College Hackathon Hosted By IEI Students' Chapter CSE (AOT). Begin The Two- Part Journey By Completing Tasks Online In The First Phase And In The Second Phase, Shine At The Offline Project Demonstration. Make History At AOT As We Embark In A New Age Of Technological Brilliance! Showcase Your Creativity, Win Exciting Prizes, And Pave Your Path To Success</p>
+                </div>
+
+                <div className={styles.section}>
+                    <div><DownloadBrochure /></div>
+                </div>
+
+                <div className={styles.section}>
+                    <SponsorSection sponsors={EVENTS.interhacktive0.sponsors}/>
+                </div>
+
+                <div className={styles.section}>
+                    <PersonTable title='Judges' persons={JUDGES} />
+                </div>
+            </div>
+        </div>
+    )
+}
+
+function DownloadBrochure() {
+    return (
+        <a
+            className={styles.downloadBrochure}
+            href="/downloads/interhacktive_brochure.pdf"
+        >
+            Download Brochure
+            <ArrowDown />
+        </a>
+    )
+}
+
+function RegisterButton() {
+    return (
+        <div className={styles.registerBtn}>
+            <div>Register</div>
+        </div>
+    )
+}
+
+function SponsorSection({ sponsors }) {
+    return (
+        <div className={styles.sponsorListSection}>
+            <div className={styles.sponsorListHeading}>
+                Our Sponsors
+            </div>
+            <div className={styles.sponsorList}>
+                <SponsorList sponsors={sponsors} />
+            </div>
+        </div>
+    )
+}
+
+
+
+
+function Person({ name, dpUrl = '/static/assets/avatar.png', linkedIn }) {
+    return (
+        <div className={styles.person}>
+            <div className={styles.personDp}><img src={dpUrl} /></div>
+            <div className={styles.personInfo}>
+                <div className={styles.personName}>{name}</div>
+
+                <Link href={linkedIn} className={styles.personSocial}>
+                    <LinkedinLogo width='1.5em' height='1.5em' />
+                    <div>Linked In</div>
+                </Link>
+
+            </div>
+        </div>
+    )
+}
+
+function PersonTable({ title, persons }) {
+
+    const isMedScreen = useMediaQuery('(min-width: 768px)')
+    const [ceil, setCeil] = useState();
+    const [rows, setRows] = useState([]);
+
+    useEffect(() => {
+        setCeil(isMedScreen ? 3 : 1)
+    }, [isMedScreen])
+
+    useEffect(() => {
+        let rows = []
+        for (let i = 0; i < persons.length; i += ceil) {
+            const row = persons.slice(i, Math.min(i + ceil, persons.length))
+            if (row.length < ceil) {
+                for (let k = row.length; k < ceil; ++k) {
+                    row.push(null)
+                }
+            }
+
+            rows.push(row)
+
+            setRows(rows)
+        }
+    }, [ceil])
+
+    return (
+        <div>
+            <div className={styles.h2}>{title}</div>
+            <table className={styles.personTableTable}>
+                <tbody>
+                    {rows.map((persons, id) => (
+                        <PersonRow key={id} persons={persons} />
+                    ))}
+                </tbody>
+            </table>
+        </div>
+    )
+}
+
+function PersonRow({ persons }) {
+    return (
+        <tr className={styles.personTableRow}>
+            {
+                persons.map((person, id) => (
+                    <td key={id} className={styles.personTableCell}>
+                        {person && <Person {...person} />}
+                    </td>
+                ))
+            }
+        </tr>
+    )
+}
+
diff --git a/client/styles/events/Interhacktive.module.css b/client/styles/events/Interhacktive.module.css
new file mode 100644
index 0000000..bbe780a
--- /dev/null
+++ b/client/styles/events/Interhacktive.module.css
@@ -0,0 +1,255 @@
+.image {
+    border-radius: 1em;
+    border: 1px solid #333;
+    width: 100%;
+    display: block;
+}
+
+.holder {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 2rem;
+    margin-top: 4em;
+}
+
+.header {
+    margin-bottom: 2em;
+}
+
+.eventBanner {
+    margin-bottom: 2em;
+}
+
+.section {
+    margin-bottom: 2em;
+}
+
+.normalTxt {
+    color: #999;
+    line-height: 2em;
+    font-size: 0.9em;
+    letter-spacing: 0.07em;
+}
+
+.articleTitle {
+    font-size: 3em;
+    font-weight: bold;
+    color: var(--fontColor);
+    letter-spacing: 0.1em;
+
+    position: relative;
+
+    padding: 0.5em 0;
+}
+
+.articleTitle::before {
+    content: "";
+    position: absolute;
+    left: -0.4em;
+    top: 0;
+    height: 0em;
+
+    border-left: 1px solid;
+
+    border-image-slice: 1;
+    border-image-source: linear-gradient(to bottom, #333, 50%, transparent);
+}
+
+.articleTitle::after {
+    content: "";
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+
+    border-bottom: 1px dashed #333;
+}
+
+.h1, .h2 {
+    color: var(--fontColor);
+    font-size: 3em;
+    font-weight: bold;
+    letter-spacing: 0.1em;
+    border-bottom: 1px solid;
+
+    border-image-slice: 1;
+    border-image-source: linear-gradient(to right, #333, 90%, transparent);
+    padding: 1rem 0;
+
+    word-break: break-all;
+}
+
+.h2 {
+    font-size: 2em;;
+}
+
+.eventDate {
+    color: #444;
+    margin-top: 1.5em;
+    /* margin-bottom: 4em; */
+
+    display: flex;
+    align-items: center;
+
+    gap: 1em;
+}
+
+.eventDateCalender {
+    font-size: 1.5em;
+}
+
+.downloadBrochure {
+    width: fit-content;
+    color: var(--fontColor);
+    letter-spacing: 0.08em;
+
+    display: flex;
+    align-items: center;
+    gap: 0.7em;
+}
+
+.registerBtn, .registerBtn > div {
+    width: fit-content;
+    color: black;
+    font-size: 0.94em;
+    font-weight: bold;
+    color: white;
+    letter-spacing: 0.08em;
+}
+
+.registerBtn {
+    --outline-offset: 0.25em;
+    padding: calc(var(--outline-offset) + 1px);
+    cursor: pointer;
+}
+
+.registerBtn > div {
+    background: var(--fontColor);
+    padding: 0.7em 0.8em;
+    border-radius: 0.2em;
+
+    outline: 1px dashed #666;
+    outline-offset: var(--outline-offset);
+
+    transition: all 300ms;
+}
+
+.registerBtn:hover > div {
+    outline-color: #888;
+}
+
+.personTableTitle {
+    color: var(--fontColor);
+    font-weight: bold;
+    font-size: 5em;
+    letter-spacing: 0.1em;
+
+    margin: 1em 0;
+}
+
+.personTableTable {
+    width: 100%;
+
+    border-spacing: 0 2em;
+}
+
+.person {
+    display: flex;
+    align-items: center;
+    gap: 1em;
+
+    width: fit-content;
+}
+
+.personDp > img  {
+    width: 4em;
+    height: 4em;
+
+    display: block;
+    border-radius: 100%;
+    outline: 2px dashed #666;
+    outline-offset: 1mm;
+}
+
+.personName {
+    color: var(--fontColor);
+
+    margin-bottom: 0.5em;
+}
+
+.personSocial {
+    display: flex;
+    align-items: center;
+    gap: 0.5em;
+
+    color: var(--textColor);
+
+    font-size: 0.8em;
+}
+
+
+.sponsorList {
+    font-size: 3em;
+}
+
+.sponsorListHeading {
+    color: var(--textColor);
+    font-size: 0.9rem;
+    padding: 1em 0;
+    width: 100%;
+
+    display: flex;
+    align-items: center;
+
+    margin-bottom: 0.3em;
+}
+
+.sponsorListHeading::before {
+    content: '\2605';
+    font-size: 1.5em;
+    margin-right: 0.5rem;
+}
+
+
+
+
+@media only screen and (min-width: 768px) {
+    .holder {
+        padding-top: 10rem;
+        margin-top: 0;
+    }
+
+    .container {
+        width: 90%;
+    }
+
+    .h1, .articleTitle {
+        font-size: 5em;
+    }
+
+    .h2 {
+        font-size: 3em;
+    }
+
+    .articleTitle::before {
+        left: -0.5em;
+        height: 70vh;
+    }
+
+    .articleTitle::after {
+        left: -1em;
+    }
+}
+
+@media only screen and (min-width: 1280px) {
+    .container {
+        width: 70%
+    }
+}
+
+@media only screen and (min-width: 1536px)  {
+    .container {
+        width: 50%;
+    } 
+}
\ No newline at end of file