HackPrep Page Made

src/components/ContactCard.js

@@ -5,6 +5,10 @@ import Divider from "@material-ui/core/Divider";
 import MailIcon from "@material-ui/icons/Mail";
 import PhoneIcon from "@material-ui/icons/Phone";
 import LocationIcon from "@material-ui/icons/LocationOn";
+import GitHubIcon from "@material-ui/icons/GitHub";
+import LinkedInIcon from "@material-ui/icons/LinkedIn";
+import TwitterIcon from "@material-ui/icons/Twitter";
+import InstagramIcon from "@material-ui/icons/Instagram";
 
 import * as styles from "../styles/components/contactcard.module.scss";
 
@@ -30,7 +34,7 @@ function ContactCard() {
 						+91 70213 02112
 					</div>
 				</a>
-				<div className={styles.cardContent}>
+				<a className={styles.cardContent} href="https://goo.gl/maps/JNL4dRJRTPn8zYUc7">
 					<div className={styles.cardContentIcon}>
 						<LocationIcon />
 					</div>
@@ -39,6 +43,20 @@ function ContactCard() {
 						<br />
 						Vile Parle, Mumbai - 400 055
 					</div>
+				</a>
+				<div className={styles.cardSocials} >
+					<a className={styles.cardSocialsIcon} href="https://instagram.com/djunicode">
+						<InstagramIcon />
+					</a>
+					<a className={styles.cardSocialsIcon} href="https://github.com/djunicode">
+						<GitHubIcon />
+					</a>
+					<a className={styles.cardSocialsIcon} href="https://www.linkedin.com/company/djunicode">
+						<LinkedInIcon />
+					</a>
+					<a className={styles.cardSocialsIcon} href="https://twitter.com/djunicode">
+						<TwitterIcon />
+					</a>
 				</div>
 			</div>
 		</div>

src/pages/hackprep/index.js

@@ -0,0 +1,109 @@
+import React from "react";
+import { graphql } from "gatsby";
+import { GatsbyImage } from "gatsby-plugin-image";
+
+import { makeStyles } from "@material-ui/core/styles";
+import Grid from "@material-ui/core/Grid";
+import Paper from "@material-ui/core/Paper";
+import Button from "@material-ui/core/Button";
+import Table from '@material-ui/core/Table';
+import TableBody from '@material-ui/core/TableBody';
+import TableCell from '@material-ui/core/TableCell';
+import TableContainer from '@material-ui/core/TableContainer';
+import TableHead from '@material-ui/core/TableHead';
+import TableRow from '@material-ui/core/TableRow';
+
+
+import Carousel from "../../components/Carousel";
+import Layout from "../../components/Layout";
+import AvatarHelper from "../../components/AvatarHelper";
+import unicode from "../../images/unicode-logo.svg"
+
+import * as styles from "../../styles/templates/itemDetail.module.scss";
+
+function createData(date, stack) {
+    return { date, stack };
+}
+
+const rows = [
+    createData('6th May', 'Frontend/Design & Node'),
+    createData('8th May', 'Python/Django + Flutter'),
+];
+
+const useStyles = makeStyles((theme) => ({
+    grid: {
+        height: "100vh",
+        backgroundColor: "#3d3d3d",
+    },
+    image: {
+        height: "90%",
+        width: "70%",
+        margin: "5%",
+        marginLeft: "15%"
+    },
+
+}));
+function EventDetails() {
+    // Avatars img fix
+    const classes = useStyles()
+    return (
+        <Layout>
+            <Grid container className={styles.rootContainer} component={Paper}>
+                <Grid item xs={12} className={styles.header}>
+                    <h2>HACKPREP 3.0</h2>
+                </Grid>
+                {/* Carousel */}
+                <Grid item container className={styles.content}>
+                    <Grid item xs={12} className={styles.unicodeGrid} container>
+                        <Grid item xs={6}>
+                            <img src={unicode} className={classes.image}></img>
+                        </Grid>
+                        <Grid item xs={6}>
+                            <center><Button type="submit"
+                                size="large"
+                                variant="contained"
+                                color="secondary"
+                                className={styles.button}
+                                style={{transform: "translateY(300px)", fontSize: "2rem"}}> Register Now! </Button></center>
+                        </Grid>
+                    </Grid>
+                    <Grid item container xs={12}>
+                        <Grid item xs={12}>
+                            <h3>About the event</h3>
+                            <p>HackPrep is an annual series of events hosted by DJ Unicode in hopes to introduce the world of development to first-year coders. The aim of the event is to create a one-stop place to head-start their hackathon journeys, and cover important topics related to frontend, backend, and app development. Through HackPrep, we will be ensuring freshers get a clear idea of how to go about exploring the vast world of development, navigate through a plethora of resources, and eventually start building their own projects.</p>
+                            <TableContainer component={Paper}>
+                                <Table sx={{ minWidth: 650 }} aria-label="simple table" >
+                                    <TableHead>
+                                        <TableRow>
+                                            <TableCell>Date</TableCell>
+                                            <TableCell align="right">Stacks</TableCell>
+                                        </TableRow>
+                                    </TableHead>
+                                    <TableBody>
+                                        {rows.map((row) => (
+                                            <TableRow
+                                                key={row.name}
+                                                sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
+                                            >
+                                                <TableCell component="th" scope="row">
+                                                    {row.date}
+                                                </TableCell>
+                                                <TableCell align="right">{row.stack}</TableCell>
+                                            </TableRow>
+                                        ))}
+                                    </TableBody>
+                                </Table>
+                            </TableContainer>
+                        </Grid>
+                        {/* Links */}
+                        <Grid item xs={12}>
+                            <h3>Related Links: </h3>
+                        </Grid>
+                    </Grid>
+                </Grid>
+            </Grid>
+        </Layout>
+    );
+}
+
+export default EventDetails;

src/styles/components/contactcard.module.scss

@@ -46,7 +46,7 @@
 			background-color: rgba($color: $white, $alpha: 0.3);
 			margin-right: $extraspacing;
 			box-shadow: $boxShadowCard;
-
+			color: $white;
 			&.alternate {
 				background-color: $white;
 				color: $primary;
@@ -57,4 +57,32 @@
 			font-size: 0.9rem;
 		}
 	}
+
+	&-socials {
+		color: $white;
+		text-decoration: none;
+		flex: 0 0 100%;
+		margin: $standardspacing;
+		display: flex;
+		align-items:center;
+		justify-content: space-between;
+
+		&-icon {
+			flex-shrink: 0;
+			width: 50px;
+			height: 50px;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			border-radius: 50%;
+			background-color: rgba($color: $white, $alpha: 0.3);
+			margin-right: $extraspacing;
+			box-shadow: $boxShadowCard;
+			color: $white;
+			&.alternate {
+				background-color: $white;
+				color: $primary;
+			}
+		}
+	}
 }

src/styles/templates/itemDetail.module.scss

@@ -40,3 +40,19 @@ $bigSpace: 20px;
 	align-items: center;
 	justify-content: center;
 }
+.unicodeGrid {
+	height: 100vh;
+    background-color: #3d3d3d;
+}
+
+@media (max-width: 700px) {
+	.unicodeGrid {
+		height: 70vh;
+	}
+}
+
+@media (max-width: 400px) {
+	.unicodeGrid {
+		height: 50vh;
+	}
+}