@hellobetterdigitalnz/selwynui 0.0.1-1 → 0.0.1-10

package/src/Components/Layout/Header/MobileNavigation/MobileSubNavigation/MobileSubNavigationProps.tsx

@@ -0,0 +1,9 @@
+import {ReactNode} from "react";
+
+interface MobileSubNavigationProps {
+  children?:ReactNode;
+  extraClass?:string;
+  pillar?: 'visit' | 'live' | 'business' | 'participate' | 'taste'
+}
+
+export default MobileSubNavigationProps;

package/src/Components/Layout/Header/MobileNavigation/MobileWhatuOverlay.tsx

@@ -0,0 +1,18 @@
+const MobileWhatuOverlay = () =>{
+  return <svg xmlns="http://www.w3.org/2000/svg" width="741" height="340" viewBox="0 0 741 340" fill="none">
+    <g opacity="0.1">
+      <path opacity="0.5" d="M0 113.209C68.1991 113.209 123.5 163.901 123.5 226.417H0V113.209Z" fill="currentColor"/>
+      <path opacity="0.25" d="M247 113.209C178.801 113.209 123.5 163.901 123.5 226.417H247V113.209Z" fill="currentColor"/>
+      <path opacity="0.5" d="M741 226.417C672.801 226.417 617.5 175.725 617.5 113.209H741V226.417Z" fill="currentColor"/>
+      <path opacity="0.75" d="M123.5 226.416C191.699 226.416 247 277.109 247 339.624H123.5V226.416Z" fill="currentColor"/>
+      <path opacity="0.5" d="M247 339.624C315.199 339.624 370.5 288.932 370.5 226.416H247V339.624Z" fill="currentColor"/>
+      <path opacity="0.25" d="M494 339.625C425.801 339.625 370.5 288.932 370.5 226.417H494V339.625Z" fill="currentColor"/>
+      <path opacity="0.75" d="M617.5 226.417C549.301 226.417 494 277.109 494 339.625H617.5V226.417Z" fill="currentColor"/>
+      <path opacity="0.25" d="M494 0.000656128C562.199 0.000656128 617.5 50.6932 617.5 113.209H494V0.000656128Z" fill="currentColor"/>
+      <path opacity="0.5" d="M370.5 226.417C438.699 226.417 494 175.725 494 113.209H370.5V226.417Z" fill="currentColor"/>
+      <path opacity="0.75" d="M247 113.208C315.199 113.208 370.5 62.5158 370.5 0H247V113.208Z" fill="currentColor"/>
+    </g>
+  </svg>
+}
+
+export default MobileWhatuOverlay

package/src/Components/Layout/Header/MobileNavigation/mobileNavigation.module.scss

@@ -0,0 +1,62 @@
+.mobileNavigation{
+  position: absolute;
+  top: 61px;
+  right: 0;
+  left: 0;
+  height: calc(100vh - 59px);
+  background: var(--header-bg);
+  border-radius: 0 0 200px 0;
+  overflow-x: hidden;
+
+  .mobileNavigationWrapper{
+    padding-top: 48px;
+    list-style: none;
+  }
+
+  .mobileNavItemWrapper{
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    cursor: pointer;
+    color: var(--header-color);
+    transition: all 0.3s ease-in-out;
+
+    svg {
+      margin-left: 16px;
+      transition: transform 0.3s ease-in-out;
+    }
+
+    &:hover {
+      svg {
+        animation: wiggle 0.6s ease-in-out infinite;
+      }
+    }
+
+    h6{
+      font-size: var(--font-size-h6);
+      line-height: var(--line-height-h6);
+      font-weight: var(--font-weight-h6);
+    }
+
+  }
+
+}
+
+.svg{
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  color: var(--header-color);
+
+  svg{
+    width: 100%;
+  }
+
+}
+
+@keyframes wiggle {
+  0%, 100% { transform: translateX(0); }
+  25% { transform: translateX(-4px); }
+  75% { transform: translateX(4px); }
+}

package/src/Components/Layout/Header/header.module.scss

@@ -1,11 +1,13 @@
 .header{
   background: var(--header-bg);
+  backdrop-filter: blur(10px);
+  border-bottom: 1px solid var(--color-taste);
 
   .headerWrapper{
     display: flex;
     align-items: flex-end;
     justify-content: space-between;
-    min-height: 96px;
+    min-height: 60px;
   }
 
   .headerLogo{
@@ -32,7 +34,7 @@
   }
 
   .headerBottomItemHolder{
-    padding: 0 12px 30px 12px;
+    padding: 0 12px 12px 12px;
     transition: all 0.3s ease-in;
 
     a{
@@ -90,6 +92,7 @@
 
 
   @media screen and (min-width: 1648px) {
+
     .headerRightWrapper{
       display: flex;
       align-items: center;
@@ -103,6 +106,11 @@
 
 
   @media screen and (min-width: 992px) {
+
+    .headerWrapper{
+      min-height: 96px;
+    }
+
       .logo {
         display: block;
       }
@@ -110,6 +118,12 @@
       .logoSmall {
         display: none;
       }
+
+
+    .headerBottomItemHolder {
+      padding-bottom:30px ;
+    }
+
   }
 
 }

package/src/Components/Layout/Header/header.scss

@@ -0,0 +1,15 @@
+.desktop-item{
+  display: none !important;
+
+  @media screen and (min-width: 992px) {
+    display: flex !important;
+  }
+}
+
+.mobileNavigation{
+  .mobileNavigationWrapper{
+    li{
+      padding: 16px;
+    }
+  }
+}

package/src/Components/Layout/HeroBanner/HeroBanner.tsx

@@ -24,6 +24,11 @@ const HeroBanner = (props : HeroBannerProps) => {
           </div>
           <div className={styles.heroImg}>
             <img src={backgroundImg} alt="hero banner" />
+            <div className={styles.clipPath}>
+              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 911 725" fill="none">
+                <path d="M911 0C470.407 -4.11029e-07 102.958 311.255 18.3389 725H0V0H911Z" fill="currentColor"/>
+              </svg>
+            </div>
           </div>
         </div>
       </Container>
@@ -46,6 +51,11 @@ const HeroBanner = (props : HeroBannerProps) => {
           </div>
           <div className={styles.heroImg}>
             <img src={backgroundImg} alt="hero banner" />
+            <div className={styles.clipPath}>
+              <svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 911 600" fill="none">
+                <path d="M911 0C516.03 -3.68467e-07 179.841 250.132 53.4912 600H0V0H911Z" fill="currentColor"/>
+              </svg>
+            </div>
           </div>
         </div>
       </Container>

package/src/Components/Layout/HeroBanner/HeroBannerProps.tsx

@@ -4,7 +4,7 @@ interface HeroBannerProps {
   boldTitle?:string
   description?:string
   backgroundImg?:string
-  pillar?: 'visit' | 'live' | 'business' | 'participate'
+  pillar?: 'visit' | 'live' | 'business' | 'participate' | 'taste'
 }
 
 export default HeroBannerProps;

package/src/Components/Layout/HeroBanner/heroBanner.module.scss

@@ -59,6 +59,7 @@
 
   &Medium{
     position: relative;
+    overflow-x: hidden;
 
     .heroWrapper{
       display: flex;
@@ -69,8 +70,8 @@
         display: flex;
         flex-direction: column;
         justify-content: center;
-        width: 50%;
-        padding:120px 0;
+        width: 100%;
+        padding: 20px 0 20px 0;
         color: var(--color-text);
 
         h1{
@@ -89,31 +90,47 @@
          font-size: 24px;
          line-height: 1.3;
          font-weight: 400;
-         margin-top: 90px;
+         margin-top: 72px;
          max-width: 604px;
        }
 
       }
 
-      .heroImg{
-        position: absolute;
-        right: 0;
-        width: 50%;
-        height: 100%;
-        border-radius: 500px 0 0 0;
+      .heroImg {
         overflow: hidden;
+        width: calc(100% + 32px);
+        margin-left: -16px;
+        margin-right: -16px;
+        position: relative;
 
-        img{
-          width: 100%;
+        img {
           height: 100%;
+          width: 100%;
           object-fit: cover;
           object-position: center;
+          min-height: 360px;
+          display: block;
         }
 
+        .clipPath {
+          position: absolute;
+          top: 0;
+          left: 0;
+          bottom: 0;
+          //width: 100%;
+          height: 100%;
+          color: var(--color-block-bg);
+          pointer-events: none;
 
+          svg{
+            height: 100%;
+          }
+
+        }
       }
 
 
+
     }
   }
 
@@ -122,14 +139,14 @@
 
     .heroWrapper{
       display: flex;
-      min-height: 50vh;
+      min-height: 600px;
       flex-wrap: wrap;
 
       .content{
         display: flex;
         flex-direction: column;
         justify-content: center;
-        width: 50%;
+        width: 100%;
         color: var(--color-text);
         padding:  100px 0;
 
@@ -156,12 +173,11 @@
       }
 
       .heroImg{
-        position: absolute;
-        right: 0;
-        width: 50%;
-        height: 100%;
-        border-radius: 500px 0 0 0;
         overflow: hidden;
+        width: calc(100% + 32px);
+        margin-left: -16px;
+        margin-right: -16px;
+        position: relative;
 
         img{
           width: 100%;
@@ -170,10 +186,68 @@
           object-position: center;
         }
 
+        .clipPath {
+          position: absolute;
+          top: 0;
+          left: 0;
+          bottom: 0;
+          width: 100%;
+          //height: 100%;
+          color: var(--color-block-bg);
+          pointer-events: none;
+
+          svg{
+            height: 100%;
+          }
+
+        }
+
+
+      }
+
+    }
+  }
+
+  @media screen and (min-width: 992px) {
+
+    &Medium{
+      .heroWrapper{
+
+        .content {
+          width: 50%;
+          padding: 60px 0;
+
+          p{
+            margin-top: 90px;
+          }
+
+        }
+
+        .heroImg{
+          margin-right: calc((100vw - 100%) / -1);
+          width: 50vw;
+          margin-left: 0;
+        }
 
       }
+    }
+
+    &Small{
+      .heroWrapper {
 
+        .content{
+          width: 50%;
+          padding: 10px 0;
+        }
+
+        .heroImg {
+          margin-right: calc((100vw - 100%) / -1);
+          width: 50vw;
+          margin-left: 0;
+        }
+      }
     }
+
   }
 
 }

package/src/Components/Layout/index.ts

@@ -9,7 +9,7 @@ export { default as FooterBottom } from './Footer/FooterBottom';
 export type { default as FooterBottomProps } from './Footer/FooterBottomProps';
 export { default as FooterBottomLeft } from './Footer/FooterBottomLeft';
 export type { default as FooterBottomLeftProps } from './Footer/FooterBottomLeftProps';
-export { default as FooerBottomRight } from './Footer/FooterBottomRight';
+export { default as FooterBottomRight } from './Footer/FooterBottomRight';
 export type { default as FooterBottomRightProps } from './Footer/FooterBottomRightProps';
 export { default as FooterItem } from './Footer/FooterItem';
 export type {default as FooterItemProps } from './Footer/FooterItemProps';
@@ -27,6 +27,5 @@ export { default as HeroBanner } from './HeroBanner/HeroBanner';
 export type { default as HeroBannerProps } from './HeroBanner/HeroBannerProps';
 
 // Megamenu
-
 export { default as MegaMenu} from './Header/MegaMenu/MegaMenu.tsx'
 export type { default as MegaMenuProps } from './Header/MegaMenu/MegaMenuProps.tsx'

package/src/Components/Shared/Container/container.module.scss

@@ -1,13 +1,13 @@
 .container {
-    padding: 0px 14px 0 14px;
+    padding: 0px 16px 0 16px;
     margin: 0px auto;
 
   &.default{
-    max-width: 1428px;
+    max-width: 1432px;
   }
 
    @media screen and (min-width: 1748px) {
-       padding: 0px 14px 0 14px;
+       padding: 0px 16px 0 16px;
    }
 
 }

package/src/Components/index.ts

@@ -0,0 +1,5 @@
+export * from './DataDisplay'
+export * from './Form'
+export * from './Icons'
+export * from './Layout'
+export * from './Shared'

package/dist/index.es.d.ts

@@ -1,2 +0,0 @@
-export * from './index'
-export {}