@hellobetterdigitalnz/selwynui 0.0.1-5 → 0.0.1-7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hellobetterdigitalnz/selwynui",
-  "version": "0.0.1-5",
+  "version": "0.0.1-7",
   "type": "module",
   "main": "dist/index.cjs.js",
   "module": "dist/index.es.js",
@@ -29,6 +29,7 @@
     "react-dom": "^19.2.0",
     "react-icons": "^5.5.0",
     "sass": "^1.94.1",
+    "slick-carousel": "^1.8.1",
     "vite-plugin-dts": "^4.5.4"
   },
   "peerDependencies": {

package/src/Components/DataDisplay/DetailsCard/DetailsCard.stories.tsx

@@ -13,11 +13,15 @@ type Story = StoryObj<typeof DetailsCard>
 
 export const live: Story = {
     args: {
-        date: "6 Nov 2025",
-        title: "This is a card title that is quite long and probably wraps over a few lines",
+        title: "Listing Name",
         image:"./img/card-one.png",
-        link: '#',
+        link: {
+          title: 'Learn more',
+          href: '/',
+          target: '',
+        },
         variation: 'short'
+
     },
 };
 

package/src/Components/DataDisplay/DetailsCard/DetailsCard.tsx

@@ -11,11 +11,14 @@ const DetailsCard = (props: DetailsCardProps) => {
       image = '',
       variation= 'long',
       link = '',
-      category = 'all'
+      category = 'all',
+      pillar = 'visit'
     } = props;
 
     const classes = [
         styles.detailsCard,
+        `${pillar}--light`,
+        "visit",
         "detailsCard",  
     ];
     
@@ -24,11 +27,10 @@ const DetailsCard = (props: DetailsCardProps) => {
     }
 
 
-    return <>
-      {link ? <div className={cx(classes)} id={category}>
-        <a href={link} className={`${styles.cardWrap} ${styles.detailsCardWithLink}`}>
+    return <div className={cx(classes)} id={category}>
+        <a href={link.href} target={link.target} rel={link.rel} className={`${styles.cardWrap} ${styles.detailsCardWithLink}`}>
           {image && <div className={styles.cardImage}>
-            <img src={image} />
+            <img src={image} alt={title} />
           </div>}
           
           <div className={styles.cardContent}>
@@ -43,45 +45,15 @@ const DetailsCard = (props: DetailsCardProps) => {
                 {description}
               </div>}
             </div>
-            {link && <div className={styles.cardLink}>
-                Learn more
+            {link.title && <div className={styles.cardLink}>
+              {link.title}
                 <span>
                   <ArrowRight />
                 </span>
             </div>}
           </div>
         </a>
-      </div> : <div className={cx(classes)} id={category}>
-        <div className={styles.cardWrap}>
-          {image && <div className={styles.cardImage}>
-            <img src={image} />
-          </div>}
-          
-          <div className={styles.cardContent}>
-            <div className={styles.cardBody}>
-              {date && <div className={styles.cardDate}>
-                <p>{date}</p>
-              </div>}
-              {title && <div className={`${styles.cardTitle} typography`}>
-                <h6>{title}</h6>
-              </div>}
-              {description && <div className={`${styles.cardDesc} typography`}>
-                {description}
-              </div>}
-            </div>
-            {link && <div className={styles.cardLink}>
-              <a href={link}>
-                Learn more
-                <span>
-                  <ArrowRight />
-                </span>
-              </a>
-            </div>}
-          </div>
-        </div>
-      </div>}
-      
-    </>
+      </div>
 }
 
 export default DetailsCard;

package/src/Components/DataDisplay/DetailsCard/DetailsCardProps.tsx

@@ -3,7 +3,13 @@ interface DetailsCardProps {
     title?:string,
     description?:string,
     date?: string,
-    link?:string,
+    link?: {
+      title?: string;
+      href?: string;
+      target?: "_blank" | "_self" | "_parent" | "_top";
+      rel?: string;
+    };
+    pillar?: 'visit' | 'live' | 'business' | 'participate' | 'taste'
     image?:string,
     variation?: "long" | "short";
     category?: 'all' | 'adventure' | 'ski' | 'nature',

package/src/Components/DataDisplay/DetailsCard/detailsCard.module.scss

@@ -9,16 +9,20 @@
         min-height: 274px;
     }
 
+  &:hover {
+    background-color: var(--pathway-card-hover-bg);
+    border:1px solid var(--pathway-card-hover-text);
+
+    .cardContent {
+      color: var(--pathway-card-hover-text);
+    }
+
+  }
+
 }
 
 .detailsCardWithLink {
     color: var(--pathway-card-text);
-    transition: all ease 0.3s;
-
-    &:hover {
-        background-color: var(--pathway-card-hover-bg);
-        color: var(--pathway-card-hover-text);
-    }
 }
 
 .cardImage {
@@ -58,10 +62,6 @@
     .detailsCardShort & {
         min-height: 274px;
     }
-
-    &:hover {
-        border-radius: 12px;
-    }
 }
 
 .cardContent {

package/src/Components/DataDisplay/ImageContent/ImageContent.stories.tsx

@@ -78,6 +78,33 @@ const ImageContentMaskedTemplate: Story = {
   }
 }
 
+const ImageContentFluidTemplate : Story = {
+  render: () => {
+
+    return (
+      <>
+        <ElementHolder
+          paddingTop={'none'}
+          paddingBottom={'none'}
+          pillar={'taste'}
+          level={'primary'}
+        >
+          <ImageContent
+            rendition={'fluid'}
+            pillar={'live'}
+            imageSrc={'https://images.pexels.com/photos/1563356/pexels-photo-1563356.jpeg'}
+            title={'Lorem'}
+            boldTitle={'ipsum dolor'}
+            displayFullLogo={false}
+            content={'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat'}
+            action={<Button style={'solid'} pillar={'taste'} level={"secondary"} label={'LOREM IPSUM'}/>}
+          />
+        </ElementHolder>
+      </>
+    )
+  }
+}
+
 const ImageContentFullTemplate: Story = {
   render: () => {
 
@@ -111,8 +138,8 @@ const ImageContentFullTemplate: Story = {
                 label:'What are you doing'
               }
             ]}
-            imageBorder={'top'}
-            alignment={'left'}
+            imageBorder={'top-right'}
+            alignment={'right'}
             imageSrc={'https://images.pexels.com/photos/1563356/pexels-photo-1563356.jpeg'}
           />
         </ElementHolder>
@@ -162,4 +189,8 @@ export const ImageContentMaskedComponent = {
 
 export const ImageContentFullTemplateComponent ={
   ...ImageContentFullTemplate
+}
+
+export const ImageContentFluidTemplateComponent ={
+  ...ImageContentFluidTemplate
 }

package/src/Components/DataDisplay/ImageContent/ImageContent.tsx

@@ -10,7 +10,6 @@ const ImageContent = (props:  ImageContentProps) => {
   const {
     pillar,
     displayFullLogo = false,
-    displayIconWithTitle = false,
     title,
     boldTitle,
     content,
@@ -18,34 +17,33 @@ const ImageContent = (props:  ImageContentProps) => {
     images,
     imageSrc,
     alignment = "right",
-    imageBorder = "bottom",
+    imageBorder = "top-right",
     rendition = "contained",
     list,
   } = props;
 
+  const pillarLogo = (
+    <div className={`${styles.pillarlogo} ${!displayFullLogo ? styles.pillarlogoFull : ''}`}>
+      <PillarLogo brandPillar={pillar} brandFullLogo={displayFullLogo}/>
+      {!displayFullLogo && <p>
+        {pillar === "main" && "Visit"}
+        {pillar === "live" && "Live"}
+        {pillar === "visit" && "Vist"}
+        {pillar === "taste" && "Taste"}
+        {pillar === "business" && "Business"}
+        {pillar === "participate" && "Participate"}
+      </p>}
+    </div>
+  )
+
 
   if (rendition === 'full'){
-    return <div className={`${styles.imageContent} ${styles.imageContentFull} ${styles[alignment]} ${styles[imageBorder]} `}>
+    return <div className={`${styles.imageContent} ${styles.imageContentFull}  ${styles[imageBorder]} `}>
       <Container>
         <div className={styles.imageContentWrapper}>
-          <div className={styles.imageWrapper}>
-            <div className={styles.imageHolder}>
-              {imageSrc &&  <img src={imageSrc}/>}
-            </div>
-          </div>
           <div className={styles.content}>
             <div className={styles.contentWrapper}>
-              <div className={styles.pillarlogo}>
-                <PillarLogo brandPillar={pillar} brandFullLogo={displayFullLogo}/>
-                {!displayFullLogo && <p>
-                  {pillar === "main" && "Visit"}
-                  {pillar === "live" && "Live"}
-                  {pillar === "visit" && "Vist"}
-                  {pillar === "taste" && "Taste"}
-                  {pillar === "business" && "Business"}
-                  {pillar === "participate" && "Participate"}
-                </p>}
-              </div>
+              {pillarLogo}
               <div className={styles.title}>
                 <h3>
                   {title}
@@ -73,6 +71,11 @@ const ImageContent = (props:  ImageContentProps) => {
               </div>}
             </div>
           </div>
+          <div className={styles.imageWrapper}>
+            <div className={styles.imageHolder}>
+              {imageSrc &&  <img src={imageSrc}/>}
+            </div>
+          </div>
         </div>
       </Container>
       <div className={styles.svgBackgroundPillar}>
@@ -81,6 +84,45 @@ const ImageContent = (props:  ImageContentProps) => {
     </div>
   }
 
+  if(rendition === "fluid"){
+    return <div className={`${styles.imageContent} ${styles.imageContentFluid} ${styles[alignment]}`}>
+      <Container>
+        <div className={styles.imageContentWrapper}>
+          <div className={styles.imageWrapper}>
+            <div className={styles.imageHolder}>
+              {imageSrc &&  <img src={imageSrc}/>}
+              <div className={styles.clipPath}>
+                <svg xmlns="http://www.w3.org/2000/svg" width="362" height="725" viewBox="0 0 362 725" fill="none">
+                  <path d="M0 0C0 296.003 141.877 559.012 361.463 725H0V0Z" fill="currentColor"/>
+                </svg>
+              </div>
+            </div>
+          </div>
+          <div className={styles.content}>
+            <div className={styles.contentWrapper}>
+              {pillarLogo}
+              <div className={styles.title}>
+                <h3>
+                  {title}
+                  {boldTitle && (<>
+                    <br/>
+                    <span>{boldTitle}</span>
+                  </>)}
+                </h3>
+              </div>
+              <div className={styles.desc}>
+                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+              </div>
+              {action && <div className={styles.action}>
+                {action}
+              </div>}
+            </div>
+          </div>
+        </div>
+      </Container>
+    </div>
+  }
+
   if (rendition === 'masked'){
     return (
       <div className={`${styles.imageContent} ${styles.maskedImageContent} ${styles[alignment]}`}>
@@ -95,17 +137,7 @@ const ImageContent = (props:  ImageContentProps) => {
             {/* CONTENT */}
             <div className={styles.content}>
               <div className={styles.contentWrapper}>
-                <div className={`${styles.pillarlogo} ${!displayFullLogo ? styles.pillarlogoFull : ''}`}>
-                  <PillarLogo brandPillar={pillar} brandFullLogo={displayFullLogo}/>
-                  {!displayFullLogo && <p>
-                    {pillar === "main" && "Visit"}
-                    {pillar === "live" && "Live"}
-                    {pillar === "visit" && "Vist"}
-                    {pillar === "taste" && "Taste"}
-                    {pillar === "business" && "Business"}
-                    {pillar === "participate" && "Participate"}
-                  </p>}
-                </div>
+                {pillarLogo}
                 <div className={styles.title}>
                   <h4>{title}</h4>
                 </div>

package/src/Components/DataDisplay/ImageContent/ImageContentProps.tsx

@@ -10,6 +10,7 @@ export type PillarType =
 
 export type RenditionType =
   | "full"
+  | "fluid"
   | "contained"
   | "masked";
 
@@ -34,7 +35,7 @@ export interface ImageContentProps {
   images?: ImageSet;
   imageSrc?:string;
   alignment?: 'left' | 'right';
-  imageBorder?: 'top' | 'bottom'
+  imageBorder?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'
   rendition?: RenditionType;
   list?: Item[];
 }

package/src/Components/DataDisplay/ImageContent/imageContent.module.scss

@@ -157,6 +157,7 @@
   // full image
   &.imageContentFull{
     position: relative;
+    overflow: hidden;
 
     .svgBackgroundPillar{
       position: absolute;
@@ -174,71 +175,51 @@
       }
     }
 
-    &.top{
-      &.left{
-      .imageHolder {
-        border-radius: 0px 500px 0px 0px;
-      }
-    }
+   &.top-left{
+     .imageHolder{
+       border-radius: 200px 0 0 0;
+     }
+   }
 
-      &.right{
-        .imageHolder {
-          border-radius: 500px 0px 0px;
-        }
+    &.top-right{
+      .imageHolder{
+        border-radius: 0 200px 0 0;
       }
     }
 
-    &.bottom{
-      &.left{
-        .imageHolder {
-          border-radius: 0px 0px 500px 0px;
-        }
-      }
-
-      &.right{
-        .imageHolder {
-          border-radius: 0px 0px 0px 500px;
-        }
+    &.bottom-right{
+      .imageHolder{
+        border-radius: 0 0 200px 0;
       }
     }
 
-    &.left{
-      .imageContentWrapper {
-        flex-direction: row;
-      }
-
-      .imageHolder {
-        height: 100%;
-        position: absolute;
-        width: calc(50vw + 10px);
-        right: 0;
-        left: unset;
-      }
-
-      .content{
-        padding-left: 0;
-        padding-right: 0;
+    &.bottom-left{
+      .imageHolder{
+        border-radius: 0 0 0 200px;
       }
-
     }
 
     .imageContentWrapper{
       margin: 0px;
-      min-height: 935px;
     }
 
     .imageWrapper{
       position: relative;
       padding: 0px;
+      //width: 100%;
+      z-index: 1;
+      margin-top: 0;
+      width: calc(100% + 32px);
+      margin-left: -16px;
+      margin-right: -15px;
     }
 
     .imageHolder {
       padding: 0;
       height: 100%;
-      position: absolute;
-      width: calc(50vw - 10px);
-      left: 0;
-      overflow: hidden;
+      width: 100%;
+      min-width: 50vw;
+      min-height: 380px;
 
 
       &::before {
@@ -254,8 +235,9 @@
     }
 
     .content{
-      padding: 0;
-      padding-right: 198px;
+      padding-top: 32px;
+      padding-bottom: 32px;
+      padding-right: 0px;
 
       .desc{
       }
@@ -290,7 +272,65 @@
 
   }
 
-  @media screen and (min-width: 992px){
+  //Fluid
+  &.imageContentFluid{
+    overflow-x: hidden;
+
+    .pillarlogo{
+      display: flex;
+      margin-bottom: 48px;
+      align-items: center;
+
+      p{
+        margin-left: 16px;
+        font-size: 18px;
+        font-style: normal;
+        font-weight: 700;
+        line-height: 140%;
+      }
+
+      &.pillarlogoFull{
+        svg{
+          width: 32px;
+          height: 32px;
+        }
+      }
+      svg{
+        width: 160px;
+        height: 54px;
+      }
+
+    }
+
+    .imageContentWrapper{
+      min-height: 725px;
+    }
+
+    .imageHolder{
+      min-width: 50vw;
+      border-radius: 0;
+      width: calc(100% + 32px);
+      margin-left: -16px;
+      margin-right: -16px;
+      position: relative;
+
+      .clipPath{
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        color: var(--color-block-bg);
+      }
+
+    }
+
+    .content{
+      padding-top: 32px;
+      padding-bottom: 32px;
+    }
+
+  }
+
+  @media screen and (min-width: 1200px){
 
     &Wrapper{
       margin: 0 -52px;
@@ -353,23 +393,43 @@
         margin-bottom: 48px;
       }
 
-      &.left{
+      &.top-left{
+        .imageHolder{
+          border-radius: 500px 0 0 0;
+        }
+      }
 
-        .imageHolder {
-          height: 100%;
-          position: absolute;
-          width: calc(50vw + 10px);
-          right: 0;
-          left: unset;
+      &.top-right{
+        .imageHolder{
+          border-radius: 0 500px 0 0;
         }
+      }
 
-        .content{
-          padding-left: 198px;
-          padding-right: 0;
+      &.bottom-right{
+        .imageHolder{
+          border-radius: 0 0 500px 0;
         }
+      }
 
+      &.bottom-left{
+        .imageHolder{
+          border-radius: 0 0 0 500px;
+        }
       }
 
+      .imageContentWrapper{
+        margin: 0px;
+        min-height: 935px;
+      }
+
+      .imageWrapper{
+        width: 50%;
+      }
+
+        .content{
+          padding-right: 198px;
+        }
+
     }
 
   }

package/src/Components/DataDisplay/Pathway/Pathway.stories.tsx

@@ -1,27 +1,64 @@
+import React from 'react'
 import type { Meta, StoryObj } from '@storybook/react-vite';
 import Pathway from './Pathway';
-import { FaArrowRight } from "react-icons/fa";
+import {ElementHolder} from "../../Shared";
 
 const meta : Meta<typeof Pathway> = {
     title: "Form / Pathway",
     component: Pathway,
-
 }
 
 export default meta;
 type Story = StoryObj<typeof Pathway>
 
-export const grid: Story = {
-    args: {
-        title: "This is a card title that is quite long and probably wraps over a few lines",
-        link: '#',
-        filters: ["all", "adventure", "ski", "nature", "city"], 
-        cards: [
-            { title: "Ballooning Canterbury", link: "#", image: "./img/card-one.png", category: "adventure" },
+const GridTemplate: Story = {
+    render : () =>{
+
+      return <ElementHolder paddingTop={'md'} paddingBottom={"md"}>
+        <Pathway
+          title={'Food and drink'}
+          description={'Find the ideal event venues in Selwyn, where beautiful landscapes blend with top-notch facilities. '}
+          variation={'grid'}
+          filters={["all", "adventure", "ski", "nature", "city"]}
+          cards={
+            [
+              { title: "Ballooning Canterbury", link: "#", image: "./img/card-one.png", category: "adventure", pillar: "live" },
+              { title: "Ski Resort", link: "#", image: "./img/card-two.png", category: "ski" },
+              { title: "Nature Walk", link: "#", image: "./img/card-three.png", category: "nature" },
+              { title: "City Tour", link: "#", image: "./img/card-four.png" }
+            ]
+          }
+        />
+      </ElementHolder>
+    }
+};
+
+const CarouselTemplate: Story = {
+  render : () =>{
+
+    return <ElementHolder paddingTop={'md'} paddingBottom={"md"}>
+      <Pathway
+        title={'Food and drink'}
+        description={'Find the ideal event venues in Selwyn, where beautiful landscapes blend with top-notch facilities. '}
+        variation={'carousel'}
+        cards={
+          [
+            { title: "Ballooning Canterbury", link: "#", image: "./img/card-one.png", category: "adventure", pillar: "live" },
             { title: "Ski Resort", link: "#", image: "./img/card-two.png", category: "ski" },
             { title: "Nature Walk", link: "#", image: "./img/card-three.png", category: "nature" },
-            { title: "City Tour", link: "#", image: "./img/card-four.png" } 
-        ]
-
-    },
+            { title: "City Tour", link: "#", image: "./img/card-four.png" }
+          ]
+        }
+      />
+    </ElementHolder>
+  }
 };
+
+
+export const GridView = {
+  ...GridTemplate,
+}
+
+export const CarouselView = {
+  ...CarouselTemplate,
+}

package/src/Components/DataDisplay/Pathway/Pathway.tsx

@@ -2,7 +2,6 @@ import cx from "classnames";
 import  PathwayProps from './PathwayProps';
 import styles from "./pathway.module.scss";
 import cslx from "clsx";
-import ElementHolder from "../../Shared/ElementHolder/ElementHolder";
 import Container from "../../Shared/Container/Container";
 import DetailsCard from "../DetailsCard/DetailsCard";
 import { CaretDown } from "../../Icons";
@@ -29,10 +28,22 @@ const Pathway = (props:PathwayProps) => {
   const classes = [styles.pathway, "pathway", variation === "carousel" && styles.pathwayCarousel];
 
   return (
-    <ElementHolder paddingTop="none" level="light">
+    <div>
       <Container>
         {variation === "carousel" ? (
-          <div className={cx(classes)}>{/* TODO */}</div>
+          <div className={cx(classes)}>
+            <div className={styles.contentWrapper}>
+             <div className={styles.content}>
+               <div className={styles.pathwayTitle}><h3>{title}</h3></div>
+               <div className={styles.pathwayDescription}><p>{description}</p></div>
+             </div>
+              <div className={styles.silderNav}>
+              </div>
+            </div>
+            {/*<div className={styles.}>*/}
+
+            {/*</div>*/}
+          </div>
         ) : (
           <div className={cslx(classes)}>
             <div className={styles.pathwayTitle}><h3>{title}</h3></div>
@@ -76,7 +87,7 @@ const Pathway = (props:PathwayProps) => {
           </div>
         )}
       </Container>
-    </ElementHolder>
+    </div>
   );
 };
 

package/src/Components/DataDisplay/index.ts

@@ -19,6 +19,5 @@ export { default as PromoBannerBlock } from './PromoBannerBlock/PromoBannerBlock
 export type { default as PromoBannerBlockProps } from './PromoBannerBlock/PromoBannerBlockProps';
 
 //ImageContent
-
 export {default as ImageContent} from './ImageContent/ImageContent'
 export type {default as ImageContentProps} from './ImageContent/ImageContentProps'

package/src/Components/DataDisplay/slider.scss

@@ -0,0 +1,2 @@
+@import "../../../node_modules/slick-carousel/slick/slick.css";
+@import "../../../node_modules/slick-carousel/slick/slick-theme.css";

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

@@ -161,7 +161,7 @@ const FooterTemplate: Story = {
             </FooterBottom>
         );
 
-        return (
+      return (
             <Footer
                 logo='img\waikirikiri-full-logo.svg'
                 footerTop={footerTop}

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

@@ -5,6 +5,10 @@ import HeaderRight from "./HeaderRight";
 import HeaderRightItem from "./HeaderRightItem";
 import MagnifyingGlass from "./MagnifyingGlass/MagnifyingGlass";
 import MegaMenu from "./MegaMenu/MegaMenu";
+import {List} from "../../Icons";
+import  "./header.scss"
+import MobileNavigation from "./MobileNavigation/MobileNavigation";
+import MobileNavigationItem from "./MobileNavigation/MobileNavigationItem";
 
 
 const meta: Meta = {
@@ -28,7 +32,7 @@ const logo = (
 
 const logoSmall = (
     <a href={"/"}>
-      <img src={'/img/waikirikiri-full-logo.svg'} width={110} height={45} alt={'Hello Better'}/>
+      <img src={'/img/waikirikiri-full-logo.svg'} width={110} height={34} alt={'Hello Better'}/>
     </a>
 );
 
@@ -39,25 +43,48 @@ const HeaderTemplate: Story = {
     // @ts-ignore
     return <Header logo={logo} logoSmall={logoSmall}>
       <HeaderRight>
-        <HeaderRightItem menuDropdown={<MegaMenu pillar={'live'}/>}>
+        <HeaderRightItem  extraClass={'desktop-item'} menuDropdown={<MegaMenu pillar={'live'}/>}>
           Participate
         </HeaderRightItem>
-        <HeaderRightItem>
+        <HeaderRightItem extraClass={'desktop-item'}>
           Business
         </HeaderRightItem>
-        <HeaderRightItem>
+        <HeaderRightItem extraClass={'desktop-item'}>
           Live
         </HeaderRightItem>
-        <HeaderRightItem>
+        <HeaderRightItem extraClass={'desktop-item'}>
           Visit
         </HeaderRightItem>
-        <HeaderRightItem>
+        <HeaderRightItem extraClass={'desktop-item'}>
           Taste
         </HeaderRightItem>
-        <HeaderRightItem>
+        <HeaderRightItem extraClass={'desktop-item'}>
           <MagnifyingGlass/>
         </HeaderRightItem>
+        <HeaderRightItem extraClass={'mobile-item'}>
+          <List/>
+        </HeaderRightItem>
       </HeaderRight>
+      <MobileNavigation>
+        <li>
+          <MobileNavigationItem label={'Attractions'}/>
+        </li>
+        <li>
+          <MobileNavigationItem label={'Eateries'}/>
+        </li>
+        <li>
+          <MobileNavigationItem label={'Accommodation'}/>
+        </li>
+        <li>
+          <MobileNavigationItem label={'Why visit Selwyn'}/>
+        </li>
+        <li>
+          <MobileNavigationItem label={'Events'}/>
+        </li>
+        <li>
+          <MobileNavigationItem label={'Venues'}/>
+        </li>
+      </MobileNavigation>
     </Header>
   },
 };

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

@@ -3,8 +3,8 @@ import HeaderRightItemProps from "./HeaderRightItemProps.tsx";
 
 const HeaderRightItem = (props : HeaderRightItemProps) =>{
   const { href , target,  children, extraClass, icon, menuDropdown, active } = props
-  return <div className={`${styles.headerBottomItemHolder} ${active && styles.active}`}>
-    <a href={href} target={target} className={`${styles.headerBottomItem} ${extraClass}`}>
+  return <div className={`${styles.headerBottomItemHolder} ${extraClass} ${active && styles.active}`}>
+    <a href={href} target={target} className={`${styles.headerBottomItem} headerBottomItem`}>
       {icon && <div className={styles.icon}>
         {icon}
       </div>}

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

@@ -0,0 +1,25 @@
+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
+  } = props
+
+  return <div className={`${styles.mobileNavigation} ${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,8 @@
+import {ReactNode} from "react";
+
+interface MobileNavigationProps {
+  children?:ReactNode;
+  extraClass?:string;
+}
+
+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";
+
+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 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/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,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;
@@ -70,7 +71,7 @@
         flex-direction: column;
         justify-content: center;
         width: 100%;
-        padding: 72px 0 32px 0;
+        padding: 20px 0 20px 0;
         color: var(--color-text);
 
         h1{
@@ -95,23 +96,41 @@
 
       }
 
-      .heroImg{
-        border-radius: 500px 0 0 0;
+      .heroImg {
         overflow: hidden;
-        width: calc(100% + 28px);
-        margin-left: -14px;
-        margin-right: -14px;
+        width: calc(100% + 32px);
+        margin-left: -16px;
+        margin-right: -16px;
+        position: relative;
 
-        img{
+        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%;
+          }
+
         }
       }
 
 
+
     }
   }
 
@@ -120,7 +139,7 @@
 
     .heroWrapper{
       display: flex;
-      min-height: 50vh;
+      min-height: 600px;
       flex-wrap: wrap;
 
       .content{
@@ -154,11 +173,11 @@
       }
 
       .heroImg{
-        border-radius: 500px 0 0 0;
         overflow: hidden;
-        width: calc(100% + 28px);
-        margin-left: -14px;
-        margin-right: -14px;
+        width: calc(100% + 32px);
+        margin-left: -16px;
+        margin-right: -16px;
+        position: relative;
 
         img{
           width: 100%;
@@ -167,6 +186,22 @@
           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%;
+          }
+
+        }
+
 
       }
 
@@ -180,7 +215,7 @@
 
         .content {
           width: 50%;
-          padding: 120px 0;
+          padding: 60px 0;
 
           p{
             margin-top: 90px;

package/src/Components/Layout/index.ts

@@ -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'