From 69347974fc5ecfc6c961f5808bcf8d495233dfb0 Mon Sep 17 00:00:00 2001
From: Jadessu <junioradessu@gmail.com>
Date: Mon, 6 Jan 2025 21:04:33 +0000
Subject: [PATCH 1/2] add requested changes

---
 src/components/ImageDisplay/ImageDisplay.jsx  | 26 ++++++++++++-------
 .../ImageDisplay/ImageDisplay.module.css      |  4 ++-
 src/pages/FutaSection1.jsx                    |  1 -
 src/pages/FutaSection10/FutaSection10.jsx     |  6 +++++
 .../FutaSection10/FutaSection10.module.css    | 14 ++++++++++
 src/pages/FutaSection11/FutaSection11.jsx     |  6 +++--
 .../FutaSection11/FutaSection11.module.css    | 19 +++++++++++---
 .../FutaSection12/FutaSection12.module.css    |  4 +--
 src/pages/FutaSection2.jsx                    |  8 +++---
 src/pages/FutaSection3.jsx                    |  8 +++---
 src/pages/FutaSection4.jsx                    |  6 +++--
 src/pages/FutaSection5.jsx                    |  6 +++--
 src/pages/FutaSection6.jsx                    |  8 +++---
 src/pages/FutaSection7.jsx                    |  8 +++---
 src/pages/FutaSection8.jsx                    |  6 +++--
 src/pages/FutaSection9/FutaSection9.jsx       |  2 +-
 src/pages/Sections.module.css                 | 11 ++++++++
 17 files changed, 104 insertions(+), 39 deletions(-)

diff --git a/src/components/ImageDisplay/ImageDisplay.jsx b/src/components/ImageDisplay/ImageDisplay.jsx
index 826628e..c7e12e2 100644
--- a/src/components/ImageDisplay/ImageDisplay.jsx
+++ b/src/components/ImageDisplay/ImageDisplay.jsx
@@ -14,7 +14,7 @@ import wordColor from '../../assets/images/section7Image.svg';
 import wordMonochrome01 from '../../assets/images/section8FirstImage.svg';
 import wordMonochrome02 from '../../assets/images/section8SecondImage.svg';
 export default function ImageDisplay(props) {
-  const { image, image2, zipDownload } = props;
+  const { image, image2, zipDownload, imageName } = props;
 
   const images = [
     { name: 'fullLogo.svg', url: fullLogo },
@@ -68,18 +68,23 @@ export default function ImageDisplay(props) {
     });
   };
 
-  // Function to download an image
-  const downloadImage = (src, filename) => {
-    // Create a temporary anchor element
+  const downloadImage = async (src, filename) => {
+    const response = await fetch(src);
+    const blob = await response.blob();
+    const url = URL.createObjectURL(blob);
+  
     const link = document.createElement('a');
-    link.href = src;
+    link.href = url;
     link.download = filename || 'downloaded-image';
-
-    // Append to the body, click, and remove
+  
     document.body.appendChild(link);
     link.click();
     document.body.removeChild(link);
+  
+    // Clean up the object URL
+    URL.revokeObjectURL(url);
   };
+  
 
   // Function to generate filename
   const generateFilename = (src) => {
@@ -95,7 +100,7 @@ export default function ImageDisplay(props) {
           <img src={image} alt='' className={styles.img1} />
           <button
             className={styles.downloadButton}
-            onClick={() => downloadImage(image, generateFilename(image))}
+            onClick={() => downloadImage(image, imageName)}
           >
             download
             <BsDownload />
@@ -106,7 +111,7 @@ export default function ImageDisplay(props) {
           <img src={image2} alt='' className={styles.img2} />
           <button
             className={styles.downloadButton}
-            onClick={() => downloadImage(image, generateFilename(image))}
+            onClick={() => downloadImage(image, imageName + 'white')}
           >
             download
             <BsDownload />
@@ -125,7 +130,7 @@ export default function ImageDisplay(props) {
           onClick={
             zipDownload
               ? () => downloadZip() // Pass a function reference
-              : () => downloadImage(image, generateFilename(image)) // Pass a function reference
+              : () => downloadImage(image, imageName) // Pass a function reference
           }
         >
           download
@@ -139,5 +144,6 @@ export default function ImageDisplay(props) {
 ImageDisplay.propTypes = {
   image: PropTypes.string.isRequired,
   image2: PropTypes.string.isRequired,
+  imageName: PropTypes.string.isRequired,
   zipDownload: PropTypes.boolean,
 };
diff --git a/src/components/ImageDisplay/ImageDisplay.module.css b/src/components/ImageDisplay/ImageDisplay.module.css
index bceefd1..bf85e29 100644
--- a/src/components/ImageDisplay/ImageDisplay.module.css
+++ b/src/components/ImageDisplay/ImageDisplay.module.css
@@ -41,10 +41,12 @@
 .main img, .main_dual img, .main svg, .main_dual svg{
     max-width: 100%;
     max-height: 100%;
+    max-width: 600px;
 }
 
 .img2, .img1{
-    max-width: 600px !important;
+    max-width: 400px !important;
+    
 }
 @media only screen and (max-width: 768px) {
 
diff --git a/src/pages/FutaSection1.jsx b/src/pages/FutaSection1.jsx
index ebb2f5c..b4a295e 100644
--- a/src/pages/FutaSection1.jsx
+++ b/src/pages/FutaSection1.jsx
@@ -5,7 +5,6 @@ import styles from './Sections.module.css';
 export default function FutaSection1() {
   return (
     <div className={styles.section1bg} >
-
       <ImageDisplay image={section1image} zipDownload />
     </div>
   );
diff --git a/src/pages/FutaSection10/FutaSection10.jsx b/src/pages/FutaSection10/FutaSection10.jsx
index 49e9f39..383da77 100644
--- a/src/pages/FutaSection10/FutaSection10.jsx
+++ b/src/pages/FutaSection10/FutaSection10.jsx
@@ -1,9 +1,15 @@
+import { FiExternalLink } from 'react-icons/fi'
 import styles from './FutaSection10.module.css'
 export default function FutaSection10() {
     
 
     return (
         <div className={styles.container}>
+            <div className={styles.link}>
+                <a href="https://fonts.google.com/specimen/Fira+Mono" target='_blank' rel='noreferrer'>Typography</a>
+                <FiExternalLink />
+
+            </div>
             <div className={styles.content}>
                 <h2>Fira Mono</h2>
                 <h3>ABCDEFGHIJKLMNOPQRSTUVWXYZ</h3>
diff --git a/src/pages/FutaSection10/FutaSection10.module.css b/src/pages/FutaSection10/FutaSection10.module.css
index 65fff0e..3e55c1b 100644
--- a/src/pages/FutaSection10/FutaSection10.module.css
+++ b/src/pages/FutaSection10/FutaSection10.module.css
@@ -4,6 +4,8 @@
   display: flex;
   justify-content: center;
   align-items: center;
+  flex-direction: column;
+  gap: 8px;
 }
 
 .content {
@@ -16,6 +18,18 @@
 
 }
 
+.link{
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 4px;
+  color: var(--text2);
+  transition: all var(--animation-speed) ease-in-out;
+}
+
+.link:hover{
+  color: var(--accent1)
+}
 .content h2, .content h3{
     font-family: "Fira Mono";
 font-size: 64px;
diff --git a/src/pages/FutaSection11/FutaSection11.jsx b/src/pages/FutaSection11/FutaSection11.jsx
index e2c7bb8..e66b34a 100644
--- a/src/pages/FutaSection11/FutaSection11.jsx
+++ b/src/pages/FutaSection11/FutaSection11.jsx
@@ -6,8 +6,9 @@ export default function FutaSection11() {
     
     return (
         <div className={styles.main}>
-
-            
+           
+            <div className={styles.mainColumn}>
+        <p>Clear space</p>
             <div className={styles.content}>
                 <img src={image1} alt="" className={styles.img1}/>
                 <div className={styles.contentColumn}>
@@ -16,6 +17,7 @@ export default function FutaSection11() {
 
 
                 </div>
+            </div>
 
             </div>
         </div>
diff --git a/src/pages/FutaSection11/FutaSection11.module.css b/src/pages/FutaSection11/FutaSection11.module.css
index 29e65d3..4301a49 100644
--- a/src/pages/FutaSection11/FutaSection11.module.css
+++ b/src/pages/FutaSection11/FutaSection11.module.css
@@ -15,11 +15,11 @@
     padding: 3rem;
 }
 .main img{
-    max-width: 90%;
-    max-height: 90%;
+    max-width: 70%;
+    max-height: 70%;
 }
 .img1{
-    max-width: 565px !important;
+    max-width: 380px !important;
 }
 
 .contentColumn{
@@ -28,6 +28,17 @@
     gap: 1rem;
     align-items: center;
 }
+
+.mainColumn{
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    align-items: center;
+}
+
+.mainColumn p{
+    color: var(--text2);
+}
 @media only screen and (max-width: 768px) {
     .content{
         flex-direction: column;
@@ -39,7 +50,7 @@
     }
 
     .main img{
-        max-width: 80%;
+        max-width: 70%;
     }
         .main_dual{
 flex-direction: column;
diff --git a/src/pages/FutaSection12/FutaSection12.module.css b/src/pages/FutaSection12/FutaSection12.module.css
index ba8c99a..4123af7 100644
--- a/src/pages/FutaSection12/FutaSection12.module.css
+++ b/src/pages/FutaSection12/FutaSection12.module.css
@@ -4,7 +4,7 @@
     display: grid;
     grid-template-columns: 1fr 1fr;
     align-items: center;
-    padding: 4rem 1rem;
+    padding: 4rem ;
     gap: 1rem;
 }
 
@@ -28,7 +28,7 @@ line-height: normal;
 letter-spacing: -0.36px;
 }
 .content img{
-    max-width: 300px !important;
+    max-width: 250px !important;
 }
 
 @media only screen and (max-width: 768px) {
diff --git a/src/pages/FutaSection2.jsx b/src/pages/FutaSection2.jsx
index 93e3777..cf056e0 100644
--- a/src/pages/FutaSection2.jsx
+++ b/src/pages/FutaSection2.jsx
@@ -4,9 +4,11 @@ import styles from './Sections.module.css';
 
 export default function FutaSection2() {
   return (
-    <div className={styles.main} >
-
-      <ImageDisplay image={section2} />
+    <div className={styles.main}>
+      <div className={styles.mainColumn}>
+        <p>description here</p>
+        <ImageDisplay image={section2} />
+      </div>
     </div>
   );
 }
diff --git a/src/pages/FutaSection3.jsx b/src/pages/FutaSection3.jsx
index a81ee50..909329b 100644
--- a/src/pages/FutaSection3.jsx
+++ b/src/pages/FutaSection3.jsx
@@ -4,9 +4,11 @@ import styles from './Sections.module.css';
 
 export default function FutaSection3() {
   return (
-    <div className={styles.main} >
-
-      <ImageDisplay image={section3} />
+    <div className={styles.main}>
+      <div className={styles.mainColumn}>
+        <p>Mark / Color</p>
+        <ImageDisplay image={section3} imageName={'markColor'} />
+      </div>
     </div>
   );
 }
diff --git a/src/pages/FutaSection4.jsx b/src/pages/FutaSection4.jsx
index 38b1d49..cdddb34 100644
--- a/src/pages/FutaSection4.jsx
+++ b/src/pages/FutaSection4.jsx
@@ -6,8 +6,10 @@ import styles from './Sections.module.css';
 export default function FutaSection4() {
   return (
     <div className={styles.main} >
-
-          <ImageDisplay image={section4First} image2={section4Second} />
+   <div className={styles.mainColumn}>
+   <p>Mark / Monochrome</p>
+        <ImageDisplay image={section4First} image2={section4Second} imageName='markMonochrome'/>
+        </div>
     </div>
   );
 }
diff --git a/src/pages/FutaSection5.jsx b/src/pages/FutaSection5.jsx
index 0b6d514..d544bb6 100644
--- a/src/pages/FutaSection5.jsx
+++ b/src/pages/FutaSection5.jsx
@@ -5,8 +5,10 @@ import styles from './Sections.module.css';
 export default function FutaSection5() {
   return (
     <div className={styles.main} >
-
-          <ImageDisplay image={section5}  />
+   <div className={styles.mainColumn}>
+   <p>Wordmark / Color</p>
+        <ImageDisplay image={section5} imageName='wordMarkColor' />
+        </div>
     </div>
   );
 }
diff --git a/src/pages/FutaSection6.jsx b/src/pages/FutaSection6.jsx
index 93ef0bc..bc3fd2f 100644
--- a/src/pages/FutaSection6.jsx
+++ b/src/pages/FutaSection6.jsx
@@ -6,8 +6,10 @@ import styles from './Sections.module.css';
 export default function FutaSection6() {
   return (
     <div className={styles.main} >
-
-          <ImageDisplay image={section6First} image2={section6Second} />
-    </div>
+   <div className={styles.mainColumn}>
+   <p>Wordmark / Monochrome</p>
+          <ImageDisplay image={section6First} image2={section6Second} imageName='wordmarkMonochrome' />
+      </div>
+      </div>
   );
 }
diff --git a/src/pages/FutaSection7.jsx b/src/pages/FutaSection7.jsx
index fc1e302..a1fdb97 100644
--- a/src/pages/FutaSection7.jsx
+++ b/src/pages/FutaSection7.jsx
@@ -5,8 +5,10 @@ import styles from './Sections.module.css';
 export default function FutaSection7() {
   return (
     <div className={styles.main} >
-
-          <ImageDisplay image={section7}  />
-    </div>
+   <div className={styles.mainColumn}>
+   <p>Word / Color</p>
+          <ImageDisplay image={section7} imageName='wordColor' />
+      </div>
+      </div>
   );
 }
diff --git a/src/pages/FutaSection8.jsx b/src/pages/FutaSection8.jsx
index cb5580f..736ad54 100644
--- a/src/pages/FutaSection8.jsx
+++ b/src/pages/FutaSection8.jsx
@@ -6,8 +6,10 @@ import styles from './Sections.module.css';
 export default function FutaSection8() {
   return (
     <div className={styles.main} >
-
-          <ImageDisplay image={section8First} image2={section8Second} />
+   <div className={styles.mainColumn}>
+   <p>Word / Monochrome</p>
+        <ImageDisplay image={section8First} image2={section8Second} imageName='wordMonochrome'/>
+        </div>
     </div>
   );
 }
diff --git a/src/pages/FutaSection9/FutaSection9.jsx b/src/pages/FutaSection9/FutaSection9.jsx
index 1d39bb5..957e3f3 100644
--- a/src/pages/FutaSection9/FutaSection9.jsx
+++ b/src/pages/FutaSection9/FutaSection9.jsx
@@ -13,7 +13,7 @@ export default function FutaSection9() {
     return (
 
         <div className={styles.container}>
-            <h2>Core colors</h2>
+            <h2>Core colors (Click to copy)</h2>
             <div className={styles.content}>
                 {[
                     { label: 'ACCENT1', hash: 'AACFD1' },
diff --git a/src/pages/Sections.module.css b/src/pages/Sections.module.css
index 462deae..c949c89 100644
--- a/src/pages/Sections.module.css
+++ b/src/pages/Sections.module.css
@@ -13,6 +13,17 @@
   -o-background-size: cover;
   background-size: cover;
 }
+
+.mainColumn{
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  align-items: center;
+}
+
+.mainColumn p{
+  color: var(--text2);
+}
 .section1bg{
     width: 100%;
     height: 100%;

From 829093bdea82ba4c2ac1569bed5b1db6a536c41a Mon Sep 17 00:00:00 2001
From: Jadessu <junioradessu@gmail.com>
Date: Mon, 6 Jan 2025 21:05:36 +0000
Subject: [PATCH 2/2] add requested changes

---
 src/pages/FutaSection8.jsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/pages/FutaSection8.jsx b/src/pages/FutaSection8.jsx
index 736ad54..d6869fe 100644
--- a/src/pages/FutaSection8.jsx
+++ b/src/pages/FutaSection8.jsx
@@ -2,7 +2,6 @@ import section8First from '../assets/images/section8FirstImage.svg';
 import section8Second from '../assets/images/section8SecondImage.svg';
 import ImageDisplay from '../components/ImageDisplay/ImageDisplay';
 import styles from './Sections.module.css';
-
 export default function FutaSection8() {
   return (
     <div className={styles.main} >