@hellobetterdigitalnz/selwynui 0.0.1-2 → 0.0.1-22

package/src/Components/Layout/Header/MegaMenu/MegaMenu.tsx

@@ -1,98 +1,171 @@
-import MegaMenuProps from "./MegaMenuProps.tsx";
+import { useState } from "react";
+import MegaMenuProps, { MenuItem } from "./MegaMenuProps.tsx";
 import PillarLogo from "../../../Shared/PillarLogo/PillarLogo.tsx";
 import Button from "../../../Form/Button/Button.tsx";
 import ArrowRight from "../../../Icons/Arrows/ArrowRight/ArrowRight.tsx";
-import styles from "./megaMenu.module.scss"
+import styles from "./megaMenu.module.scss";
 import Container from "../../../Shared/Container/Container.tsx";
 
-const MegaMenu = (props : MegaMenuProps) => {
-
+const MegaMenu = (props: MegaMenuProps) => {
   const {
-    pillar,
-    menu,
-    imageSrc,
-    heading,
-    headingHighlight,
-    description
-  } = props
+    pillar = "main",
+    menu = [],
+    defaultImg,
+    defaultBoldTitle,
+    defaultDescription,
+    defaultTitle,
+    defaultAction,
+  } = props;
 
-  return <div className={`${styles.megaMenu} ${pillar}`}>
-    <div className={`${styles.megaMenuHolder}`}>
-      <Container>
-      <div className={`${styles.megaMenuWrapper} megaMenuWrapper`}>
-        <div className={styles.left}>
-          <div className={styles.pillarIcon}>
-            <PillarLogo brandPillar={pillar} brandFullLogo={true}/>
-          </div>
-          <ul>
-            <li>
-              <a href={''}>
-                Link
-                <ArrowRight type={'light'}/>
-              </a>
-            </li>
-            <li>
-              <a href={''}>
-                Link
-                <ArrowRight type={'light'}/>
-              </a>
-            </li>
-            <li>
-              <a href={''}>
-                Link
-                <ArrowRight type={'light'}/>
-              </a>
-            </li>
-            <li>
-              <a href={''}>
-                Link
-                <ArrowRight type={'light'}/>
-              </a>
-            </li>
-          </ul>
-        </div>
-        <div className={styles.right}>
-          <div className={styles.preview}>
-            <div className={styles.previewWrapper}>
-              <div className={styles.previewImg}>
-                <img src={'https://images.pexels.com/photos/709143/pexels-photo-709143.jpeg'}/>
-              </div>
-              <div className={styles.content}>
-                <h5>
-                  Spring gardens
-                  <br/>
-                  <span>in Selwyn</span>
-                </h5>
-                <p>
-                  Visit Selwyn is for those who like to take the back roads, breathe mountain air, and find their own pace. Stay a little longer, explore deeper, and refuel with great kai and local stories along the way.
-                </p>
+  // ACTIVE ITEM ON HOVER
+  const [activeItem, setActiveItem] = useState<MenuItem | null>(null);
+
+  // Preview values (image, title, description)
+  const previewImg = activeItem?.imageUrl || defaultImg;
+  const previewTitle = activeItem?.title || defaultTitle;
+  const previewBoldTitle = activeItem?.boldTitle || defaultBoldTitle;
+  const previewDesc = activeItem?.description || defaultDescription;
+
+  // Action button (from hovered item or default)
+  const previewAction = activeItem?.action || defaultAction || {
+    label: "",
+    url: "",
+    target: "_self",
+    rel: "",
+  };
+
+  return (
+    <div className={`${styles.megaMenu} megaMenu ${pillar}`}>
+      <div className={`${styles.megaMenuHolder} megaMenuHolder`}>
+        <Container>
+          <div className={`${styles.megaMenuWrapper} megaMenuWrapper`}>
+            {/* LEFT */}
+            <div className={`${styles.left} left`}>
+              <div className={`${styles.pillarIcon} pillarIcon`}>
+                <PillarLogo brandPillar={pillar} brandFullLogo={true} />
               </div>
-              <div className={styles.action}>
-                <Button pillar={pillar} label={'START EXPLORING'} secondaryIcon={<ArrowRight/>}/>
+
+              <ul>
+                {menu.map((item, i) => (
+                  <li key={i}>
+                    <a
+                      href={item.url || "#"}
+                      target={item.target || "_self"}
+                      onMouseEnter={() => setActiveItem(item)}
+                      onMouseLeave={() => setActiveItem(null)}
+                    >
+                      {item.label}
+                      <ArrowRight type={"light"} />
+                    </a>
+                  </li>
+                ))}
+              </ul>
+            </div>
+
+            {/* RIGHT PREVIEW */}
+            <div className={styles.right}>
+              <div className={styles.preview}>
+                <div className={styles.previewWrapper}>
+                  <div className={styles.previewImg}>
+                    {previewImg && <img src={previewImg} alt="" />}
+                  </div>
+
+                  <div className={styles.content}>
+                    <h5>
+                      {previewTitle}
+                      <br />
+                      <span>{previewBoldTitle}</span>
+                    </h5>
+
+                    <p>{previewDesc}</p>
+                  </div>
+
+                  { previewAction.label && <div className={styles.action}>
+                      <Button
+                        pillar={pillar}
+                        label={previewAction.label}
+                        linkable={true}
+                        link={{
+                          url: previewAction.url || "",
+                          target: previewAction.target || "_self",
+                          rel: previewAction.rel || "",
+                        }}
+                        secondaryIcon={<ArrowRight />}
+                      />
+                    </div>
+                  }
+                </div>
               </div>
             </div>
           </div>
+        </Container>
+
+        {/* SVG BACKGROUND */}
+        <div className={styles.megaMenuSvg}>
+          <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>
         </div>
       </div>
-    </Container>
-      <div className={styles.megaMenuSvg}>
-        <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>
-      </div>
     </div>
-  </div>
-}
+  );
+};
 
-export default MegaMenu;
+export default MegaMenu;

package/src/Components/Layout/Header/MegaMenu/MegaMenuProps.tsx

@@ -1,20 +1,33 @@
 export interface MenuItem {
-  label: string;
-  url: string;
-  imageUrl: string;
-  title: string;
-  description: string;
-  target: string;
-  pillar: 'vist' | 'live' | 'business' | 'participate' | 'taste';
+  label?: string;
+  url?: string;
+  imageUrl?: string;
+  title?: string;
+  boldTitle?:string
+  description?: string;
+  target?: string;
+  action?: {
+    label?: string;
+    url?: string;
+    target?: "_blank" | "_self" | "_parent" | "_top" | undefined;
+    rel?: string;
+  };
+  pillar?: 'visit' | 'live' | 'business' | 'participate' | 'taste';
 }
 
 interface MegaMenuProps {
-  pillar: 'vist' | 'live' | 'business' | 'participate' | 'taste';
+  pillar: 'visit' | 'live' | 'business' | 'participate' | 'taste';
   menu: MenuItem[];
-  headingHighlight?: string;
   defaultImg?:string
   defaultTitle?: string;
+  defaultBoldTitle?: string;
   defaultDescription?:string;
+  defaultAction?: {
+    label?: string;
+    url?: string;
+    target?: "_blank" | "_self" | "_parent" | "_top" | undefined;
+    rel?: string;
+  };
 }
 
 export default MegaMenuProps;

package/src/Components/Layout/Header/MegaMenu/megaMenu.module.scss

@@ -3,7 +3,7 @@
   right: 0;
   left: 0;
   background: var(--color-bg);
-  top: 96px;
+  top: 97px;
   border-radius: 0 0 366px 0;
   overflow-x: hidden;
 
@@ -19,6 +19,7 @@
   }
 
   .megaMenuSvg{
+    pointer-events: none;
     position: absolute;
     color: var(--color-text);
     bottom: 0;
@@ -33,7 +34,7 @@
     display: flex;
     flex-wrap: wrap;
     position: relative;
-    min-height: 878px;
+    min-height: calc(100vh - 96px);
 
     .right{
       width: 40%;
@@ -120,6 +121,7 @@
 
     .action{
       padding-top: 48px;
+      padding-bottom: 24px;
       padding-left: 72px;
     }
 

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

@@ -0,0 +1,26 @@
+import MobileNavigationProps from "./MobileNavigationProps.tsx";
+import styles from './mobileNavigation.module.scss'
+import {Container} from "../../../Shared";
+import MobileWhatuOverlay from "./MobileWhatuOverlay.tsx";
+
+const MobileNavigation = (props : MobileNavigationProps) => {
+
+  const {
+    children,
+    extraClass,
+    pillar = 'visit'
+  } = props
+
+  return <div className={`${styles.mobileNavigation} ${pillar} ${extraClass} mobileNavigation`}>
+    <Container>
+      <ul className={`${styles.mobileNavigationWrapper} mobileNavigationWrapper`}>
+        {children}
+      </ul>
+    </Container>
+    <div className={styles.svg}>
+      <MobileWhatuOverlay/>
+    </div>
+  </div>
+}
+
+export default MobileNavigation;

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

@@ -0,0 +1,17 @@
+import styles from './mobileNavigation.module.scss'
+import MobileNavigationItemProps from "./MobileNavigationItemProps.tsx";
+import ArrowRight from "../../../Icons/Arrows/ArrowRight/ArrowRight.tsx";
+
+const MobileNavigationItem = (props : MobileNavigationItemProps) => {
+
+  const {label} = props
+
+  return <div className={styles.mobileNavItem}>
+    <div className={styles.mobileNavItemWrapper}>
+      <h6>{label}</h6>
+      <ArrowRight type={'light'}/>
+    </div>
+  </div>
+}
+
+export default MobileNavigationItem;

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

@@ -0,0 +1,5 @@
+interface MobileNavigationItemProps {
+  label?: string;
+}
+
+export default MobileNavigationItemProps;

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

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

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

@@ -0,0 +1,21 @@
+import MobileSubNavigationProps from "./MobileSubNavigationProps.tsx";
+import styles from '../mobileNavigation.module.scss'
+import Container from "../../../../Shared/Container/Container.tsx";
+
+const MobileSubNavigation = (props : MobileSubNavigationProps) => {
+
+  const {
+    children,
+    extraClass
+  } = props
+
+  return <div className={`${styles.MobileSubNavigation} ${extraClass} MobileSubNavigation`}>
+    <Container>
+      <ul className={`${styles.MobileSubNavigationWrapper} MobileSubNavigationWrapper`}>
+        {children}
+      </ul>
+    </Container>
+  </div>
+}
+
+export default MobileSubNavigation;

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

@@ -0,0 +1,17 @@
+import styles from '../mobileNavigation.module.scss'
+import ArrowRight from "../../../../Icons/Arrows/ArrowRight/ArrowRight.tsx";
+import MobileNavigationItemProps from "../MobileNavigationItemProps.tsx";
+
+const MobileNavigationItem = (props : MobileNavigationItemProps) => {
+
+  const {label} = props
+
+  return <div className={styles.mobileNavItem}>
+    <div className={styles.mobileNavItemWrapper}>
+      <h6>{label}</h6>
+      <ArrowRight type={'light'}/>
+    </div>
+  </div>
+}
+
+export default MobileNavigationItem;

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

@@ -0,0 +1,5 @@
+interface MobileNavigationItemProps {
+  label?: string;
+}
+
+export default MobileNavigationItemProps;

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,16 @@
 .header{
-  background: var(--header-bg);
+  backdrop-filter: blur(10px);
+  border-bottom: 1px solid var(--color-taste);
+
+  &.active{
+    background: var(--header-bg);
+  }
 
   .headerWrapper{
     display: flex;
     align-items: flex-end;
     justify-content: space-between;
-    min-height: 96px;
+    min-height: 60px;
   }
 
   .headerLogo{
@@ -32,7 +37,7 @@
   }
 
   .headerBottomItemHolder{
-    padding: 0 12px 30px 12px;
+    padding: 0 12px 12px 12px;
     transition: all 0.3s ease-in;
 
     a{
@@ -48,6 +53,8 @@
         display: flex;
 
         svg{
+          margin-left: 20px;
+          flex-shrink: 0;
           width: 24px;
           height: 24px;
         }
@@ -90,6 +97,7 @@
 
 
   @media screen and (min-width: 1648px) {
+
     .headerRightWrapper{
       display: flex;
       align-items: center;
@@ -103,6 +111,11 @@
 
 
   @media screen and (min-width: 992px) {
+
+    .headerWrapper{
+      min-height: 96px;
+    }
+
       .logo {
         display: block;
       }
@@ -110,6 +123,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>
@@ -61,6 +71,9 @@ const HeroBanner = (props : HeroBannerProps) => {
   >
     <div className={styles.heroImg}>
       <img src={backgroundImg} alt="hero banner" />
+      <div className={styles.heroSvg}>
+        <LargeHeroIcon/>
+      </div>
     </div>
     <Container>
       <div className={styles.heroWrapper}>
@@ -68,9 +81,6 @@ const HeroBanner = (props : HeroBannerProps) => {
         {description && <p>{description}</p>}
       </div>
     </Container>
-    <div className={styles.heroSvg}>
-      <LargeHeroIcon/>
-    </div>
   </div>
 }
 

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;