Requested changes

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,
 };

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) {
 

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>
   );

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>

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;

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>

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;

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) {

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>
   );
 }

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>
   );
 }

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>
   );
 }

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>
   );
 }

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>
   );
 }

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>
   );
 }

src/pages/FutaSection8.jsx

@@ -2,12 +2,13 @@ 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} >
-
-          <ImageDisplay image={section8First} image2={section8Second} />
+   <div className={styles.mainColumn}>
+   <p>Word / Monochrome</p>
+        <ImageDisplay image={section8First} image2={section8Second} imageName='wordMonochrome'/>
+        </div>
     </div>
   );
 }

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' },

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%;