feat: added N2O to mobile prof-shows

dvm-bitspilani · Oct 18, 2024 · 4634f2c · 4634f2c
2 parents 9ca586d + 0c68260
commit 4634f2c
Show file tree

Hide file tree

Showing 6 changed files with 148 additions and 2 deletions.
diff --git a/assets/MobileLanding/ProfShowsMobile/HarshVivek.png b/assets/MobileLanding/ProfShowsMobile/HarshVivek.png
diff --git a/assets/MobileLanding/ProfShowsMobile/youtube.svg b/assets/MobileLanding/ProfShowsMobile/youtube.svg
diff --git a/components/MobileLanding/Artist/ArtistN2O/artistn2o.module.scss b/components/MobileLanding/Artist/ArtistN2O/artistn2o.module.scss
@@ -0,0 +1,98 @@
+.name {
+  color: #fff;
+  text-align: right;
+  font-family: "Thedus Condensed Light", sans-serif;
+  font-size: 50px;
+  font-style: normal;
+  font-weight: 900;
+  line-height: 36px; /* 67.021% */
+  letter-spacing: 2.867px;
+  mix-blend-mode: difference;
+  text-align: left;
+  margin-left: 1.8rem;
+}
+
+.info {
+  display: flex;
+  flex-direction: row;
+  position: relative;
+
+  .button {
+    display: flex;
+    flex-direction: column;
+    margin-left: 1.8rem;
+    gap: 0.7rem;
+
+    .date {
+      color: #fff;
+      font-family: "Tilt Warp", sans-serif;
+      font-size: 19.52px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 40px; /* 571.875% */
+      letter-spacing: 0.976px;
+      mix-blend-mode: difference;
+      padding-top: 0.5rem;
+      text-align: left;
+    }
+
+    .youtube {
+      display: flex;
+      flex-direction: column;
+      gap: 0.7rem;
+
+      a {
+        display: flex;
+        text-align: center;
+        gap: 7px;
+        padding: 0 10px;
+        align-items: center;
+        text-decoration: none;
+        background-color: #e4c66b;
+        height: 30px;
+        width: fit-content;
+        border-radius: 23px;
+        color: #000000;
+
+        Image {
+            height: 12px;
+            width: 15px;
+        }
+
+        p {
+          font-family: Thedus Condensed Light,sans-serif;
+          font-size: 14px;
+          font-weight: 900;
+          line-height: 111.63px;
+          letter-spacing: 0.05em;
+          text-align: left;
+        }
+      }
+    }
+  }
+
+  .artistImg {
+    position: absolute;
+    right: 0;
+    top: -40px;
+  }
+}
+
+@media(max-width: 400px) {
+    .name  {
+        font-size: 43px;
+        line-height: 30px;
+    }
+}
+
+@media(max-width:370px) {
+    .name {
+        margin-left: 1.3rem;
+    }
+
+    .info {
+        .button {
+            margin-left: 1.3rem;
+        }
+    }
+}
diff --git a/components/MobileLanding/Artist/ArtistN2O/artistn2o.tsx b/components/MobileLanding/Artist/ArtistN2O/artistn2o.tsx
@@ -0,0 +1,43 @@
+import React from "react";
+import styles from "./artistn2o.module.scss";
+import harshVivek from "@/assets/MobileLanding/ProfShowsMobile/HarshVivek.png";
+import youtube from "@/assets/MobileLanding/ProfShowsMobile/youtube.svg";
+import Image from "next/image";
+
+export default function ArtistN2O() {
+    return (
+        <>
+            <div className={styles.name}>
+                <p>HARSH GUJRAL</p>
+                <p>VIVEK SAMTANI</p>
+            </div>
+            <div className={styles.info}>
+                <div className={styles.button}>
+                    <div className={styles.date}>October 27</div>
+                    <div className={styles.youtube}>
+                        <a href="https://www.youtube.com/@Harshgujral" target="_main">
+                            <Image
+                                src={youtube}
+                                alt="icon"
+                            />
+                            <p>@harshgujral</p>
+                        </a>
+                        <a href="https://www.youtube.com/@VivekSamtani" target="_main">
+                            <Image
+                                src={youtube}
+                                alt="icon"
+                            />
+                            <p>@viveksamtani</p>
+                        </a>
+                    </div>
+                </div>
+                <div className={styles.artistImg}>
+                    <Image
+                        src={harshVivek}
+                        alt="n2o"
+                    />
+                </div>
+            </div>
+        </>
+    );
+}
diff --git a/components/MobileLanding/MobileLanding/MobileLanding.tsx b/components/MobileLanding/MobileLanding/MobileLanding.tsx
@@ -9,6 +9,7 @@ import MobileRegBtn from "@/components/MobileLanding/RegBtn/RegBtn";
 import MobileHeading from "@/components/MobileLanding/AboutUsHeading/MobileHeading";
 import VideoCarousel from "@/components/MobileLanding/VideoCarousel/VideoCarousel";
 import Artist from "@/components/MobileLanding/Artist/Artist";
+import ArtistN2O from "../Artist/ArtistN2O/artistn2o";
 import ContactUsMobile from "@/components/MobileLanding/ContactUs/ContactUs";
 
 import slotMachine2D from "@/assets/Landing/slotMachine2D2.png";
@@ -178,6 +179,7 @@ export default function MobileLanding() {
             playingArtist={playingArtist}
             setPlayingArtist={setPlayingArtist}
           />
+          <ArtistN2O />
         </div>
         <Image
           src={profShowsBackground}

diff --git a/components/MobileLanding/MobileLanding/mobileLanding.module.scss b/components/MobileLanding/MobileLanding/mobileLanding.module.scss
@@ -73,7 +73,7 @@
 
   .profShows {
     width: 100vw;
-    height: calc(3 * 400px);
+    height: calc(4 * 400px);
     position: relative;
     background: #190d2c;
     display: flex;
@@ -83,7 +83,7 @@
     @include fadeProfShowBackdrop();
 
     @media (width < 400px) {
-      height: calc(3 * 350px);
+      height: calc(4 * 350px);
     }
 
     .profShowsBackground {