@hellobetterdigitalnz/selwynui 0.0.1-8 → 0.0.1-80

package/src/Components/Layout/Footer/FooterBottom.tsx

@@ -1,21 +1,94 @@
+import FacebookLogo from "../../Icons/Brands/FacebookLogo/FacebookLogo";
+import InstagramLogo from "../../Icons/Brands/InstagramLogo/InstagramLogo";
+import LinkedinLogo from "../../Icons/Brands/LinkedinLogo/LinkedinLogo";
 import Container from "../../Shared/Container/Container";
 import FooterBottomProps from "./FooterBottomProps";
 import styles from "./footer.module.scss";
 
 const FooterBottom = (props: FooterBottomProps) => {
-    const {
-        children 
-    } = props
+  const {
+    logoImgUrl, copyRightYear, copyRightText, footerLinks, facebookLink,
+    instagramLink,
+    linkedinLink,
+  } = props
 
-    return (
-        <div className={styles.footerBottom}>
-            <Container>
-                <div className={styles.footerBottomWrapper}>
-                    {children}
+  return (
+    <div className={styles.footerBottom}>
+      <Container border={false}>
+        <div className={styles.footerBottomWrapper}>
+          <div className={`${styles.footerBottomRight} ${styles.footerBottomRightMobile}`}>
+            <div className={styles.footerBottomRightWrapper}>
+              <div className={styles.footerLogoWrapper}>
+                {facebookLink && <div className={styles.footerLogo}>
+                  <a target={'_blank'} href={facebookLink}>
+                    <FacebookLogo type="regular" />
+                  </a>
+                </div>}
+              </div>
+              <div className={styles.footerLogoWrapper}>
+                {instagramLink && <div className={styles.footerLogo}>
+                  <a target={'_blank'} href={instagramLink}>
+                    <InstagramLogo type="regular" />
+                  </a>
+                </div>}
+              </div>
+              <div className={styles.footerLogoWrapper}>
+                {linkedinLink && <div className={styles.footerLogo}>
+                  <a target={'_blank'} href={linkedinLink}>
+                    <LinkedinLogo type="regular" />
+                  </a>
+                </div>}
+              </div>
+            </div>
+          </div>
+          <div className={styles.footerBottomLeft}>
+            <div className={styles.footerBottomLeftWrapper}>
+              <div className={styles.footerBottomLeftLogo}>
+                <img src={logoImgUrl} alt="" />
+                <p>© <span>{copyRightYear}</span> {copyRightText}</p>
+              </div>
+            </div>
+          </div>
+          <div className={styles.footerBottomRight}>
+            <div className={styles.footerBottomLeftLinks}>
+                  <ul>
+                    {
+                      footerLinks?.map((footerLink, index) => (
+                        <li key={index}>
+                          <a href={footerLink.link}>{footerLink.title}</a>
+                        </li>
+                      ))
+                    }
+                  </ul>
                 </div>
-            </Container>
+            <div className={styles.footerBottomRightWrapper}>
+              <div className={styles.footerLogoWrapper}>
+                {facebookLink && <div className={styles.footerLogo}>
+                  <a target={'_blank'} href={facebookLink}>
+                    <FacebookLogo type="regular" />
+                  </a>
+                </div>}
+              </div>
+              <div className={styles.footerLogoWrapper}>
+                {instagramLink && <div className={styles.footerLogo}>
+                  <a target={'_blank'} href={instagramLink}>
+                    <InstagramLogo type="regular" />
+                  </a>
+                </div>}
+              </div>
+              <div className={styles.footerLogoWrapper}>
+                {linkedinLink && <div className={styles.footerLogo}>
+                  <a target={'_blank'} href={linkedinLink}>
+                    <LinkedinLogo type="regular" />
+                  </a>
+                </div>}
+              </div>
+            </div>
+          </div>
         </div>
-    )
+      </Container>
+    </div>
+  )
 }
 
 export default FooterBottom;

package/src/Components/Layout/Footer/FooterBottomLeft.tsx

@@ -1,8 +1,13 @@
+import FacebookLogo from "../../Icons/Brands/FacebookLogo/FacebookLogo";
+import InstagramLogo from "../../Icons/Brands/InstagramLogo/InstagramLogo";
+import LinkedinLogo from "../../Icons/Brands/LinkedinLogo/LinkedinLogo";
 import FooterBottomLeftProps from "./FooterBottomLeftProps";
 import styles from './footer.module.scss';
 
 const FooterBottomLeft = (props: FooterBottomLeftProps) => {
-    const {logoImgUrl, copyRightYear, copyRightText, footerLinks} = props;
+    const {logoImgUrl, copyRightYear, copyRightText, footerLinks,facebookLink,
+        instagramLink,
+        linkedinLink,} = props;
 
     return (
         <div className={styles.footerBottomLeft}>
@@ -12,6 +17,7 @@ const FooterBottomLeft = (props: FooterBottomLeftProps) => {
                     <p>© <span>{copyRightYear}</span> {copyRightText}</p>
                 </div>
 
+                <div>
                 <div className={styles.footerBottomLeftLinks}>
                     <ul>
                         {
@@ -23,6 +29,35 @@ const FooterBottomLeft = (props: FooterBottomLeftProps) => {
                         }
                     </ul>
                 </div>
+                <div className={styles.footerBottomRight}>
+            <div className={styles.footerBottomRightWrapper}>
+                <div className={styles.footerLogoWrapper}>
+                    {facebookLink && <div className={styles.footerLogo}>
+                        <a target={'_blank'} href={facebookLink}>
+                            <FacebookLogo type="regular"/>
+                        </a>
+                    </div>}
+                </div>
+
+                <div className={styles.footerLogoWrapper}>
+                    {instagramLink && <div className={styles.footerLogo}>
+                        <a target={'_blank'} href={instagramLink}>
+                            <InstagramLogo type="regular"/>
+                        </a>
+                    </div>}
+                </div>
+
+
+                <div className={styles.footerLogoWrapper}>
+                    {linkedinLink && <div className={styles.footerLogo}>
+                        <a target={'_blank'} href={linkedinLink}>
+                            <LinkedinLogo type="regular"/>
+                        </a>
+                    </div>}
+                </div>
+            </div>
+        </div>
+                </div>
             </div>
         </div>
     )

package/src/Components/Layout/Footer/FooterBottomLeftProps.tsx

@@ -8,6 +8,10 @@ interface FooterBottomLeftProps {
     copyRightYear?: number | string;
     copyRightText?: string;
     footerLinks?: FooterLinkItem[];
+    facebookLink?: string;
+    instagramLink?: string;
+    linkedinLink?: string;
+    
 }
 
 export default FooterBottomLeftProps;

package/src/Components/Layout/Footer/FooterBottomProps.tsx

@@ -1,7 +1,20 @@
 import { ReactNode } from "react";
 
+export interface FooterLinkItem {
+    title?: string;
+    link?: string;
+}
+
+
 interface FooterBottomProps {
     children?: ReactNode;
+    logoImgUrl?: string;
+        copyRightYear?: number | string;
+        copyRightText?: string;
+        footerLinks?: FooterLinkItem[];
+        facebookLink?: string;
+        instagramLink?: string;
+        linkedinLink?: string;
 }
 
 export default FooterBottomProps;

package/src/Components/Layout/Footer/FooterMiddle.tsx

@@ -1,4 +1,3 @@
-import FooterBottomRight from "./FooterBottomRight"
 import FooterMiddleProps from "./FooterMiddleProps"
 import styles from "./footer.module.scss"
 
@@ -8,9 +7,6 @@ const FooterMiddle = (props: FooterMiddleProps) => {
     return <>
         <div className={styles.footerMiddleLinks}>
             {children}
-            <div className={styles.footerSocialMediaLogos}>
-                <FooterBottomRight facebookLink="#" instagramLink="#" linkedinLink="#" />
-            </div>
         </div>
     </>
 }

package/src/Components/Layout/Footer/FooterProps.tsx

@@ -5,7 +5,7 @@ interface FooterProps {
     footerMiddle?: ReactNode
     footerBottom?: ReactNode
     extraClass?: string
-    logo?: string
+    logo?: string | undefined
 }
 
 export default FooterProps;

package/src/Components/Layout/Footer/FooterTop.tsx

@@ -8,11 +8,11 @@ const FooterTop = (props: FooterTopProps) => {
 
     return (
         <div className={styles.footerTop}>
-            <Container>
+            <Container border={false}>
                 <div className={styles.footerTopWrapper}>
                     <div className={styles.footerTopLeft}>
                         <h1>{title}</h1>
-                        <h2>{subtitle}</h2>
+                        <h1 className={styles.footerSub}>{subtitle}</h1>
                     </div>
 
                     <div className={styles.footerTopRight}>

package/src/Components/Layout/Footer/footer.module.scss

@@ -12,93 +12,102 @@
     background-color: var(--color-taste);
     padding: 24px 16px;
 
-    .footerTopWrapper {
-      color: var(--color-visit);
+  }
 
-      .footerTopLeft {
-        align-items: center;
+  .footerTopWrapper {
+    color: var(--color-visit);
+    padding-bottom: 44px;
+    align-items: end;
+  }
 
-        h1 {
-          font-size: var(--font-size-h5);
-          font-weight: var(--font-weight-h4);
-          line-height: var(--line-height-h4);
-        }
+  .footerTopLeft {
+    align-items: center;
 
-        h2 {
-          font-size: var(--font-size-h5);
-          font-weight: var(--font-weight-bold);
-          line-height: var(--line-height-h5);
-          padding-bottom: 32px;
-        }
-      }
+    h1 {
+      font-size: var(--font-footer-h1);
+      font-weight: var(--font-weight-h4);
+      line-height: var(--line-height-h4);
 
-      .footerTopRight {
-        p {
-          font-size: var(--font-size-body-regular);
-        }
+      &.footerSub {
+        font-weight: 700;
       }
     }
 
-    .footerBgDesignContainer {
-      display: none;
+    // h2 {
+    //   font-size: var(--font-size-h5);
+    //   font-weight: var(--font-weight-bold);
+    //   line-height: var(--line-height-h5);
+    //   // padding-bottom: 32px;
+    // }
+  }
+
+  .footerTopRight {
+    p {
+      font-size: var(--font-size-body-regular);
     }
   }
 
+  .footerBgDesignContainer {
+    display: none;
+  }
+
   // Footer Middle
   .footerMiddle {
     background-color: var(--color-visit);
+  }
 
-    .footerMiddleWrapper {
-      padding-top: 35px;
+  .footerMiddleWrapper {
+    padding-top: 35px;
 
-      img {
-        padding-bottom: 72px;
-      }
+    img {
+      padding-bottom: 72px;
+    }
 
-      .footerItem {
-        h3 {
-          color: var(--color-taste);
-          font-size: var(--font-size-small);
-          font-weight: var(--font-weight-h4);
-        }
+    .footerItem {
+      h3 {
+        color: var(--color-taste);
+        font-size: 36px;
+        font-weight: var(--font-weight-h4);
+      }
 
-        ul {
-          display: none;
-        }
+      ul {
+        display: none;
       }
     }
+  }
 
-    .footerMiddleLinks {
-      font-size: var(--font-size-regular);
+  .footerMiddleLinks {
+    font-size: var(--font-size-regular);
 
-      .footerSocialMediaLogos {
+    .footerSocialMediaLogos {
 
-        .footerBottomRight {
-          .footerBottomRightWrapper {
+      .footerBottomRight {
+        .footerBottomRightWrapper {
+
+          display: flex;
 
-            display: flex;
 
-            .footerLogoWrapper {
-              padding: 0 8px 0 0;
-              padding-block: 72px;
 
-              .footerLogo {
+          .footerLogoWrapper {
+            padding: 0 8px 0 0;
+            padding-block: 72px;
+
+            .footerLogo {
+              display: flex;
+              background-color: #92c134;
+              border-radius: 50%;
+              height: 40px;
+              width: 40px;
+              align-items: center;
+              justify-content: center;
+
+              a {
                 display: flex;
-                background-color: #92c134;
-                border-radius: 50%;
-                height: 40px;
-                width: 40px;
-                align-items: center;
-                justify-content: center;
-
-                a {
-                  display: flex;
-                  color: var(--color-inverse-text);
-
-                  svg {
-                    height: 24px;
-                    width: 24px;
-                  }
+                color: var(--color-inverse-text);
+
+                svg {
+                  height: 24px;
+                  width: 24px;
                 }
               }
             }
@@ -113,49 +122,84 @@
     background-color: var(--color-visit);
     padding-bottom: 72px;
 
-    .footerBottomWrapper {
+    .footerBottomLeftWrapper {
 
-      .footerBottomLeft {
+      .footerBottomLeftLogo {
+        color: var(--font-color);
+        font-size: var(--font-size-body-sm);
+      }
 
-        .footerBottomLeftWrapper {
+      img {
+        padding-bottom: 24px;
+      }
 
-          .footerBottomLeftLogo {
-            color: var(--font-color);
-            font-size: var(--font-size-body-sm);
-            padding-bottom: 72px;
-          }
 
-          img {
-            padding-bottom: 24px;
+    }
+
+    .footerBottomLeftLinks {
+      display: flex;
+      align-items: flex-end;
+
+      ul {
+        display: flex;
+        gap: 24px;
+        list-style: none;
+        padding: 0;
+        margin: 0;
+
+        a {
+          color: var(--color-taste);
+          font-size: var(--font-size-body-sm);
+        }
+      }
+    }
+
+   
+
+  }
+
+  .footerBottomRight {
+          display: flex;
+          align-items: flex-end;
+          flex: 1;
+          justify-content: space-between;
+
+          &.footerBottomRightMobile {
+            display: none;
           }
 
-          .footerBottomLeftLinks {
-            display: flex;
-            align-items: flex-end;
+          .footerBottomRightWrapper {
 
-            ul {
+            display: none;
+            gap: 16px;
+
+            .footerLogo {
               display: flex;
-              gap: 24px;
-              list-style: none;
-              padding: 0;
-              margin: 0;
+              background-color: var(--color-taste);
+              border-radius: 50%;
+              height: 40px;
+              width: 40px;
+              align-items: center;
+              justify-content: center;
 
               a {
-                color: var(--color-taste);
-                font-size: var(--font-size-body-sm);
+                display: flex;
+                color: var(--color-visit);
+
+                svg {
+                  height: 24px;
+                  width: 24px;
+                }
               }
             }
+
+            .footerMiddleSocialMediaWrapper {
+              display: flex;
+            }
           }
         }
-      }
-
-      .footerBottomRight {
-        display: none;
-      }
-    }
-  }
 
-  @media screen and (min-width: 1440px) {
+  @media screen and (min-width: 960px) {
 
     // Footer Top
     .footerTop {
@@ -164,7 +208,6 @@
 
       .footerTopWrapper {
         display: flex;
-        gap: 154px;
         justify-content: space-between;
 
         .footerTopLeft {
@@ -187,12 +230,17 @@
         }
 
         .footerTopRight {
-          display: flex;
-          justify-content: center;
-          align-items: center;
+          // display: flex;
+          // justify-content: center;
+          // align-items: center;
+          min-width: 576px;
+          padding-right: 108px;
+          position: relative;
+          z-index: 9;
 
           p {
-            font-size: var(--font-size-small);
+            font-size: var(--font-size-h6);
+            margin-bottom: 16px;
           }
         }
       }
@@ -218,9 +266,10 @@
         flex-wrap: wrap;
         padding-top: 64px;
         padding-bottom: 32px;
+        padding-right: 108px;
 
         .footerLogoContainer {
-          flex: 1;
+          width: 359px;
         }
       }
 
@@ -228,11 +277,11 @@
         display: flex;
         flex-grow: 1;
         flex-wrap: wrap;
+        margin: 0 -36px;
 
         .footerSocialMediaLogos {
           .footerBottomRight {
             .footerBottomRightWrapper {
-
               display: none;
             }
           }
@@ -241,9 +290,11 @@
 
       .footerItem {
         width: 20%;
+        padding: 0 36px;
 
         h3 {
           padding-bottom: 28px;
+          font-size: 18px !important;
           font-weight: var(--font-weight-body-sm);
         }
 
@@ -275,7 +326,7 @@
 
           .footerBottomLeftWrapper {
             display: flex;
-            gap: 166px;
+            width: 359px;
 
             .footerBottomLeftLogo {
               padding-bottom: 0;
@@ -285,42 +336,79 @@
         }
 
         .footerBottomRight {
-          display: flex;
-          align-items: flex-end;
-
           .footerBottomRightWrapper {
-
             display: flex;
-            gap: 16px;
+          }
+        }
 
-            .footerLogo {
-              display: flex;
-              background-color: var(--color-taste);
-              border-radius: 50%;
-              height: 40px;
-              width: 40px;
-              align-items: center;
-              justify-content: center;
+        
+      }
+    }
+  }
 
-              a {
-                display: flex;
-                color: var(--color-visit);
+  @media screen and (max-width: 960px) {
+    .footerTop {
+      padding-left: 0;
+      padding-right: 0;
 
-                svg {
-                  height: 24px;
-                  width: 24px;
-                }
-              }
-            }
+      .footerTopLeft {
+        margin-bottom: 32px;
+      }
 
-            .footerMiddleSocialMediaWrapper {
-              display: flex;
-            }
+      .footerTopRight {
+        p {
+          margin-bottom: 16px;
+        }
+      }
+
+      .footerTopWrapper {
+        padding-bottom: 0;
+      }
+
+
+    }
+
+    .footerMiddle {
+      .footerMiddleWrapper {
+        .footerItem {
+          margin-bottom: 24px;
+
+          h3 {
+            font-size: var(--font-size-h5);
+          }
+
+          &:last-child {
+            margin-bottom: 0;
           }
         }
+      }
+    }
+
+    .footerMiddleLinks {
+      padding-bottom: 72px;
+    }
 
-        .paddingBottomLeft {}
+    .footerBottom {
+      padding-bottom: 35px;
+      .footerBottomRight {
+        &.footerBottomRightMobile {
+          display: flex;
+          margin-bottom: 72px;
+
+          .footerBottomRightWrapper {
+            display: flex;
+          }
+        }
+      }
+
+      .footerBottomLeftLogo {
+        margin-bottom: 72px;
       }
     }
+
   }
+
+
+
+
 }