style: fixed mobile responsiveness

dvm-bitspilani · Oct 15, 2024 · 976514d · 976514d
1 parent ff19d4f
commit 976514d
Show file tree

Hide file tree

Showing 3 changed files with 74 additions and 60 deletions.
diff --git a/components/MobileLanding/ContactUs/MobileContactCard/MobileContactCard.tsx b/components/MobileLanding/ContactUs/MobileContactCard/MobileContactCard.tsx
@@ -1,66 +1,72 @@
-import styles from './card.module.scss'
+import styles from "./card.module.scss";
 import Image from "next/image";
 
-import background from '@/assets/MobileLanding/ContactUs/CardBackground.svg'
-import phoneIcon from '@/assets/MobileLanding/ContactUs/PhoneIcon.svg'
-import mailIcon from '@/assets/MobileLanding/ContactUs/MailIcon.svg'
-import {StaticImport} from "next/dist/shared/lib/get-img-props";
+import background from "@/assets/MobileLanding/ContactUs/CardBackground.svg";
+import phoneIcon from "@/assets/MobileLanding/ContactUs/PhoneIcon.svg";
+import mailIcon from "@/assets/MobileLanding/ContactUs/MailIcon.svg";
+import { StaticImport } from "next/dist/shared/lib/get-img-props";
 
 interface Props {
-    name: string;
-    image: string | StaticImport;
-    dep1: string;
-    dep2: string;
-    contactDetails: boolean;
-    phone: string | null;
-    email: string | null;
+  name: string;
+  image: string | StaticImport;
+  dep1: string;
+  dep2: string;
+  contactDetails: boolean;
+  phone: string | null;
+  email: string | null;
 }
 
 interface ContactProps {
-    phone: string | null;
-    email: string | null;
+  phone: string | null;
+  email: string | null;
 }
 
-export function ContactBlock({phone, email}: ContactProps) {
-    return (
-        <div className={styles.contactBlock}>
-            <a
-                target="_blank"
-                rel="noopener noreferrer"
-                href={phone ?? '#'}
-                style={{visibility: phone === null ? "hidden" : "visible"}}
-            >
-                <Image src={phoneIcon} alt='phone icon'/>
-            </a>
-            <a
-                target="_blank"
-                rel="noopener noreferrer"
-                href={email ?? '#'}
-                style={{visibility: email === null ? "hidden" : "visible"}}
-            >
-                <Image src={mailIcon} alt='mail icon'/>
-            </a>
-        </div>
-    )
+export function ContactBlock({ phone, email }: ContactProps) {
+  return (
+    <div className={styles.contactBlock}>
+      <a
+        target="_blank"
+        rel="noopener noreferrer"
+        href={phone ?? "#"}
+        style={{ visibility: phone === null ? "hidden" : "visible" }}
+      >
+        <Image src={phoneIcon} alt="phone icon" />
+      </a>
+      <a
+        target="_blank"
+        rel="noopener noreferrer"
+        href={email ?? "#"}
+        style={{ visibility: email === null ? "hidden" : "visible" }}
+      >
+        <Image src={mailIcon} alt="mail icon" />
+      </a>
+    </div>
+  );
 }
 
 export default function MobileContactCard({
-                                              name, image, dep1, dep2, contactDetails, phone, email
-                                          }: Props) {
-    return (
-        <div className={styles.container}>
-            <div className={styles.cardContent}>
-                <p className={styles.heading}>{name}</p>
-                <Image src={image} alt={name} className={styles.image}/>
-                <p className={styles.desc}>{dep1}</p>
-                <p className={styles.desc}>{dep2}</p>
-                {contactDetails ? <ContactBlock email={email} phone={phone}/> : null}
-            </div>
-            <Image
-                src={background}
-                alt='card background'
-                className={styles.background}
-            />
-        </div>
-    )
-}
+  name,
+  image,
+  dep1,
+  dep2,
+  contactDetails,
+  phone,
+  email,
+}: Props) {
+  return (
+    <div className={styles.container}>
+      <div className={styles.cardContent}>
+        <p className={styles.heading}>{name}</p>
+        <Image src={image} alt={name} className={styles.image} />
+        <p className={styles.desc}>{dep1}</p>
+        <p className={styles.desc}>{dep2}</p>
+        {contactDetails ? <ContactBlock email={email} phone={phone} /> : null}
+      </div>
+      <Image
+        src={background}
+        alt="card background"
+        className={styles.background}
+      />
+    </div>
+  );
+}
diff --git a/components/MobileLanding/ContactUs/MobileContactCard/card.module.scss b/components/MobileLanding/ContactUs/MobileContactCard/card.module.scss
@@ -9,6 +9,7 @@
   .cardContent {
     position: absolute;
     display: flex;
+    max-width: 280.5px;
     flex-direction: column;
     align-items: center;
     gap: 5px;
@@ -22,14 +23,19 @@
 
     .heading {
       text-align: center;
-      text-shadow: 0 0 1px rgba(255, 226, 191, 0.10);
+      text-shadow: 0 0 1px rgba(255, 226, 191, 0.1);
       font-family: "Playfair Display", sans-serif;
       font-size: 14px;
       font-style: normal;
       font-weight: 500;
       line-height: normal;
       letter-spacing: -0.56px;
-      background: linear-gradient(141deg, #D4A753 38.83%, #907440 53.62%, #D4A753 75.62%);
+      background: linear-gradient(
+        141deg,
+        #d4a753 38.83%,
+        #907440 53.62%,
+        #d4a753 75.62%
+      );
       background-clip: text;
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
@@ -47,7 +53,12 @@
       font-weight: 400;
       line-height: normal;
       letter-spacing: -0.36px;
-      background: linear-gradient(112deg, #D4A753 25.95%, #AA8237 44.71%, #D4A753 72.61%);
+      background: linear-gradient(
+        112deg,
+        #d4a753 25.95%,
+        #aa8237 44.71%,
+        #d4a753 72.61%
+      );
       background-clip: text;
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;

diff --git a/components/MobileLanding/MobileLanding/mobileLanding.module.scss b/components/MobileLanding/MobileLanding/mobileLanding.module.scss
@@ -100,9 +100,6 @@
           height: auto;
         }
       }
-
-      &:last-of-type {
-      }
     }
 
     .artistContainer {