Person Card design updates

Team5599 · Nov 8, 2023 · a4bc078 · a4bc078
1 parent 7fc60c5
commit a4bc078
Show file tree

Hide file tree

Showing 2 changed files with 72 additions and 26 deletions.
diff --git a/app/components/PersonCard/PersonCard.jsx b/app/components/PersonCard/PersonCard.jsx
@@ -5,20 +5,58 @@ import Image from 'next/image';
 const PersonCard = ({personData}) => {
     return (
         <div className={styles.personCard}>
-            <Image
-                src={personData.image}
-                className={styles.personCardImage}
-                fill={true}
-                unoptimized
-                alt={`${personData.name} | Roles:`}
-            />
-            <div className={styles.cardOverlay}>
-               <span>{personData.name}</span>
-               <span>DIRECTOR OF TITLING</span>
-               <div>
+            <div
+                className={styles.personCardImageContainer}
+            >
+                <Image
+                    src={personData.image}
+                    className={styles.personCardImage}
+                    fill={true}
+                    unoptimized
+                    alt={`${personData.name} [MAIN ROLE]:`}
+                />
+            </div>
+            <div className={styles.personCardBottomsheet}>
+                <div
+                    style={{
+                        display : 'flex',
+                        flexDirection : 'column'
+                    }}
+                >
+                    <span
+                        style={{
+                            fontWeight : 600,
+                            fontSize: 22
+                        }}
+                    >
+                        {personData.name}
+                    </span>
+                    <span
+                        style={{
+                            fontWeight : 500,
+                            fontSize : 14
+                        }}
+                    >
+                        DIRECTOR OF TITLING
+                    </span>
+                    <span
+                        className={styles.quoteBlock}
+                        style={{
+                            marginTop : 10,
+                            color : '#ccc'
+                        }}
+                    >
+                        Quote Block
+                    </span>
+                </div>
+
+                <div style={{
+                    textAlign : 'center'
+                }}>
                     <span>Social - Media - Icons</span>
-               </div>
+                </div>
             </div>
+            <svg style={{maxWidth : '100%', height : 40}} width="100vw" height="40px" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 40" preserveAspectRatio="none" ><path  d="M300 0L0 0 300 40 300 0z" className="shape-fill" fill="#1b1616" fillOpacity="1"></path></svg>
         </div>
     )
 }

diff --git a/app/components/PersonCard/personCard.module.css b/app/components/PersonCard/personCard.module.css
@@ -1,31 +1,39 @@
 .personCard {
     display: flex;
+    flex-direction: column;
     flex-basis: 22%;
     max-width: 300px;
-    justify-content: center;
-    align-items: center;
     aspect-ratio: 1/1.4;
-    background-color: red;
     position: relative;
     margin-bottom: 100px;
 }
 
+.personCardImageContainer {
+    position: relative;
+    width: 100%;
+    aspect-ratio: 1/1;
+}
+
 .personCardImage {
     flex : 1;
     object-fit: cover;
+    background-color: #000;
 }
 
-.cardOverlay {
-    background-color: #fff;
-    padding: 20px;
+.personCardBottomsheet {
     display: flex;
     flex-direction: column;
-    align-items: center;
-    text-align: center;
-    margin-left: 20px;
-    margin-right: 20px;
-    gap : 10px;
-    position: absolute;
-    top : calc(100% - 60px);
-    height : 100px;
+    justify-content: space-between;
+    padding : 10px;
+    padding-top : 20px;
+    color : #fff;
+    background-color:  #1b1616;
+    min-height: 160px;
+}
+
+.quoteBlock::before {
+    content: "\0022";
+    font-size: 2em;
+    font-weight: bold;
+    vertical-align: -.3em;
 }