@hellobetterdigitalnz/selwynui 0.0.1-1

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

@@ -0,0 +1,163 @@
+.megaMenu{
+  position: absolute;
+  right: 0;
+  left: 0;
+  background: var(--color-bg);
+  top: 96px;
+  border-radius: 0 0 366px 0;
+  overflow-x: hidden;
+
+  .pillarIcon{
+    color: var(--color-text);
+    padding-bottom: 80px;
+
+    svg{
+      width: 180px;
+      height: 62px;
+    }
+
+  }
+
+  .megaMenuSvg{
+    position: absolute;
+    color: var(--color-text);
+    bottom: 0;
+  }
+
+  .megaMenuHolder{
+    height: 100%;
+    position: relative;
+  }
+
+  .megaMenuWrapper{
+    display: flex;
+    flex-wrap: wrap;
+    position: relative;
+    min-height: 878px;
+
+    .right{
+      width: 40%;
+    }
+
+    .left{
+      padding: 96px 120px 96px 0;
+      width: 60%;
+
+      ul{
+        list-style: none;
+
+        li{
+          margin-bottom: 36px;
+
+          a {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            color: var(--color-text);
+            font-size: var(--font-size-h5);
+            font-weight: 700;
+            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;
+              }
+            }
+          }
+
+          &:last-child{
+            margin-bottom: 0px;
+          }
+
+        }
+
+      }
+
+    }
+
+  }
+
+  .preview{
+    background: var(--color-sand);
+    border-radius: 0 0 366px 0;
+    overflow-x: hidden;
+    height: 100%;
+    min-width: 50vw;
+
+    .previewImg{
+      height: 452px;
+
+      img{
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+    }
+
+    .content{
+      padding-top: 64px;
+      padding-left: 72px;
+      max-width: 479px;
+      color: var(--color-bg);
+
+      h5{
+        font-size: var(--font-size-h5);
+        line-height: var(--line-height-h5);
+        font-weight: 400;
+        margin-bottom: 48px;
+
+        span{
+          font-weight: 700;
+        }
+      }
+
+    }
+
+    .action{
+      padding-top: 48px;
+      padding-left: 72px;
+    }
+
+  }
+
+
+  @media screen and (max-width: 1340px) {
+    .megaMenuWrapper{
+      display: flex;
+      flex-wrap: wrap;
+      position: relative;
+      min-height: 878px;
+
+      .right{
+        display: none;
+      }
+
+      .left{
+        padding: 64px 0px 64px 0;
+        width: 100%;
+      }
+
+    }
+
+    .preview{
+      .content{
+        padding-top: 64px;
+        padding-left: 72px;
+      }
+    }
+  }
+
+
+}
+
+
+@keyframes wiggle {
+  0%, 100% { transform: translateX(0); }
+  25% { transform: translateX(-4px); }
+  75% { transform: translateX(4px); }
+}

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

@@ -0,0 +1,115 @@
+.header{
+  background: var(--header-bg);
+
+  .headerWrapper{
+    display: flex;
+    align-items: flex-end;
+    justify-content: space-between;
+    min-height: 96px;
+  }
+
+  .headerLogo{
+    display: flex;
+    padding-bottom: 14px;
+
+    a{
+      display: flex;
+    }
+  }
+
+  .logo {
+    display: none;
+  }
+
+  .logoSmall {
+    display: block;
+  }
+
+  .headerRightWrapper{
+    display: flex;
+    align-items: center;
+    margin: 0 -12px;
+  }
+
+  .headerBottomItemHolder{
+    padding: 0 12px 30px 12px;
+    transition: all 0.3s ease-in;
+
+    a{
+      display: flex;
+      align-items: center;
+      color: var(--header-color);
+      font-size: 24px;
+      font-weight: 400;
+      line-height: 1.5;
+      cursor: pointer;
+
+      .icon{
+        display: flex;
+
+        svg{
+          width: 24px;
+          height: 24px;
+        }
+      }
+
+    }
+
+    .menuDropdown{
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      width: 100%;
+      opacity: 0;
+      transform: translateY(-10px);
+      transition: opacity 0.3s ease, transform 0.3s ease;
+      pointer-events: none;
+    }
+
+    &:hover{
+
+      a{
+        color: var(--font-color);
+      }
+
+      .menuDropdown{
+        opacity: 1;
+        transform: translateY(0);
+        pointer-events: auto;
+      }
+    }
+
+    &.active{
+      a{
+        color: var(--font-color);
+      }
+    }
+
+  }
+
+
+  @media screen and (min-width: 1648px) {
+    .headerRightWrapper{
+      display: flex;
+      align-items: center;
+      margin: 0 -28px;
+    }
+
+    .headerBottomItemHolder {
+      padding: 0 28px 30px 28px;
+    }
+  }
+
+
+  @media screen and (min-width: 992px) {
+      .logo {
+        display: block;
+      }
+
+      .logoSmall {
+        display: none;
+      }
+  }
+
+}

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

@@ -0,0 +1,77 @@
+// @ts-ignore
+import React from "react"
+import { Meta, StoryObj } from "@storybook/react-vite";
+import HeroBanner from "./HeroBanner";
+import { title } from "process";
+
+const meta: Meta = {
+  title: "Layout / HeroBanner",
+  component: HeroBanner,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  tags: ["autodocs"]
+}
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const HeroBannerTemplate: Story = {
+  render: () => {
+    
+    return (
+      <>
+        <HeroBanner
+          title={'Make your mark'}
+          boldTitle={'in Selwyn'}
+        />
+      </>
+    )
+  }
+}
+
+const HeroBannerMediumTemplate: Story = {
+  render: () => {
+
+    return (
+      <>
+        <HeroBanner
+          title={'Adventure'}
+          boldTitle={'starts here'}
+          description={'From the Southern Alps to the sea, Waikirikiri Selwyn’s diverse towns arespread across the Canterbury Plains between two mighty braided rivers. '}
+          heroSize={'medium'}
+        />
+      </>
+    )
+  }
+}
+
+const HeroBannerSmallTemplate: Story = {
+  render: () => {
+
+    return (
+      <>
+        <HeroBanner
+          title={'There’s plenty to do'}
+          boldTitle={'in Selwyn'}
+          description={'From the Southern Alps to the sea, Waikirikiri Selwyn’s diverse towns arespread across the Canterbury Plains between two mighty braided rivers. '}
+          heroSize={'small'}
+          pillar={"participate"}
+        />
+      </>
+    )
+  }
+}
+
+export const HeroBannerComponent = {
+  ...HeroBannerTemplate
+};
+
+export const HeroBannerMediumComponent = {
+  ...HeroBannerMediumTemplate
+};
+
+export const HeroBannerSmallComponent = {
+  ...HeroBannerSmallTemplate
+};

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

@@ -0,0 +1,77 @@
+import HeroBannerProps from "./HeroBannerProps.tsx";
+import styles from './heroBanner.module.scss'
+import Container from "../../Shared/Container/Container.tsx";
+import LargeHeroIcon from "./LargeHeroIcon.tsx";
+
+const HeroBanner = (props : HeroBannerProps) => {
+
+  const {heroSize = 'large', title, boldTitle, description, backgroundImg = 'https://images.pexels.com/photos/1563356/pexels-photo-1563356.jpeg', pillar = 'visit'} = props
+
+
+  if (heroSize === 'medium'){
+    return <div
+      className={`
+    ${styles.hero} 
+    ${styles.heroMedium}
+    ${pillar ? `${pillar}` : ""}
+    `}
+    >
+      <Container>
+        <div className={styles.heroWrapper}>
+          <div className={styles.content}>
+            <h1>{title} <span>{boldTitle}</span></h1>
+            {description && <p>{description}</p>}
+          </div>
+          <div className={styles.heroImg}>
+            <img src={backgroundImg} alt="hero banner" />
+          </div>
+        </div>
+      </Container>
+    </div>
+  }
+
+  if (heroSize === 'small'){
+    return <div
+      className={`
+    ${styles.hero} 
+    ${styles.heroSmall}
+    ${pillar ? `${pillar}` : ""}
+    `}
+    >
+      <Container>
+        <div className={styles.heroWrapper}>
+          <div className={styles.content}>
+            <h1>{title} <span>{boldTitle}</span></h1>
+            {description && <p>{description}</p>}
+          </div>
+          <div className={styles.heroImg}>
+            <img src={backgroundImg} alt="hero banner" />
+          </div>
+        </div>
+      </Container>
+    </div>
+  }
+
+  return <div
+    className={`
+    ${styles.hero} 
+    ${styles.heroLarge}
+    ${pillar ? `${pillar}` : ""}
+    `}
+  >
+    <div className={styles.heroImg}>
+      <img src={backgroundImg} alt="hero banner" />
+    </div>
+    <Container>
+      <div className={styles.heroWrapper}>
+        <h1>{title} <span>{boldTitle}</span></h1>
+        {description && <p>{description}</p>}
+      </div>
+    </Container>
+    <div className={styles.heroSvg}>
+      <LargeHeroIcon/>
+    </div>
+  </div>
+}
+
+export default HeroBanner;

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

@@ -0,0 +1,10 @@
+interface HeroBannerProps {
+  heroSize?: 'large' | 'medium' | 'small'
+  title?: string
+  boldTitle?:string
+  description?:string
+  backgroundImg?:string
+  pillar?: 'visit' | 'live' | 'business' | 'participate'
+}
+
+export default HeroBannerProps;

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

@@ -0,0 +1,18 @@
+const LargeHeroIcon = () =>{
+  return <svg xmlns="http://www.w3.org/2000/svg" width="741" height="340" viewBox="0 0 741 340" fill="none">
+    <g opacity="0.3">
+      <path opacity="0.5" d="M0 113.208C68.1991 113.208 123.5 163.901 123.5 226.417H0V113.208Z" fill="currentColor"/>
+      <path opacity="0.25" d="M247 113.208C178.801 113.208 123.5 163.901 123.5 226.417H247V113.208Z" fill="currentColor"/>
+      <path opacity="0.5" d="M741 226.417C672.801 226.417 617.5 175.724 617.5 113.208H741V226.417Z" fill="currentColor"/>
+      <path opacity="0.75" d="M123.5 226.417C191.699 226.417 247 277.109 247 339.625H123.5V226.417Z" fill="currentColor"/>
+      <path opacity="0.5" d="M247 339.625C315.199 339.625 370.5 288.933 370.5 226.417H247V339.625Z" 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 -7.62939e-05C562.199 -7.62939e-05 617.5 50.6924 617.5 113.208H494V-7.62939e-05Z" fill="currentColor"/>
+      <path opacity="0.5" d="M370.5 226.417C438.699 226.417 494 175.724 494 113.208H370.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 LargeHeroIcon;

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

@@ -0,0 +1,179 @@
+.hero{
+  background: var(--color-bg);
+
+  &Large{
+    position: relative;
+    min-height: 90vh;
+
+    .heroImg{
+      position: absolute;
+      left: 0;
+      right: 0;
+      top: 0;
+      bottom: 0;
+      border-radius: 0 0 366px 0;
+      overflow: hidden;
+      background: linear-gradient(180deg, rgba(0, 0, 0, 0.50) 0%, rgba(0, 0, 0, 0.00) 41.35%), linear-gradient(0deg, rgba(124, 132, 123, 0.05) 0%, rgba(124, 132, 123, 0.05) 100%), #000;
+
+      img{
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        object-position: center;
+      }
+
+    }
+
+    .heroWrapper{
+      position: relative;
+      z-index: 10;
+      width: 100%;
+      height: 100%;
+      padding-top: 112px;
+      color: var(--color-text);
+
+      h1{
+        max-width: 898px;
+        font-size: var(--font-size-h1);
+        line-height: 1;
+        font-weight: 400;
+        letter-spacing: -7.68px;
+
+        span{
+          font-weight: 700;
+        }
+      }
+
+    }
+
+    .heroSvg{
+      color: var(--color-text);
+      position: absolute;
+      z-index: 5;
+      left: 0;
+      bottom: 0;
+      height: 340px;
+    }
+
+  }
+
+  &Medium{
+    position: relative;
+
+    .heroWrapper{
+      display: flex;
+      min-height: 72vh;
+      flex-wrap: wrap;
+
+      .content{
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        width: 50%;
+        padding:120px 0;
+        color: var(--color-text);
+
+        h1{
+          max-width: 604px;
+          font-size: var(--font-size-h2);
+          line-height: 1;
+          font-weight: 400;
+          letter-spacing: -5.6px;
+
+          span{
+            font-weight: 700;
+          }
+        }
+
+       p{
+         font-size: 24px;
+         line-height: 1.3;
+         font-weight: 400;
+         margin-top: 90px;
+         max-width: 604px;
+       }
+
+      }
+
+      .heroImg{
+        position: absolute;
+        right: 0;
+        width: 50%;
+        height: 100%;
+        border-radius: 500px 0 0 0;
+        overflow: hidden;
+
+        img{
+          width: 100%;
+          height: 100%;
+          object-fit: cover;
+          object-position: center;
+        }
+
+
+      }
+
+
+    }
+  }
+
+  &Small{
+    position: relative;
+
+    .heroWrapper{
+      display: flex;
+      min-height: 50vh;
+      flex-wrap: wrap;
+
+      .content{
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        width: 50%;
+        color: var(--color-text);
+        padding:  100px 0;
+
+        h1{
+          max-width: 604px;
+          font-size: var(--font-size-h3);
+          line-height: 1;
+          font-weight: 400;
+          letter-spacing: -3.6px;
+
+          span{
+            font-weight: 700;
+          }
+        }
+
+        p{
+          font-size: 24px;
+          line-height: 1.3;
+          font-weight: 400;
+          margin-top: 90px;
+          max-width: 604px;
+        }
+
+      }
+
+      .heroImg{
+        position: absolute;
+        right: 0;
+        width: 50%;
+        height: 100%;
+        border-radius: 500px 0 0 0;
+        overflow: hidden;
+
+        img{
+          width: 100%;
+          height: 100%;
+          object-fit: cover;
+          object-position: center;
+        }
+
+
+      }
+
+    }
+  }
+
+}

package/src/Components/Layout/index.ts

@@ -0,0 +1,32 @@
+// Footer
+export { default as Footer } from './Footer/Footer';
+export type { default as FooterProps } from './Footer/FooterProps';
+export { default as FooterTop } from './Footer/FooterTop';
+export type { default as FooterTopProps } from './Footer/FooterTopProps';
+export { default as FooterMiddle } from './Footer/FooterMiddle';
+export type { default as FooterMiddleProps } from './Footer/FooterMiddleProps';
+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 type { default as FooterBottomRightProps } from './Footer/FooterBottomRightProps';
+export { default as FooterItem } from './Footer/FooterItem';
+export type {default as FooterItemProps } from './Footer/FooterItemProps';
+
+// Header
+export { default as Header } from './Header/Header';
+export type { default as HeaderProps } from './Header/HeaderProps';
+export { default as HeaderRight } from './Header/HeaderRight';
+export type { default as HeaderRightProps } from './Header/HeaderRight';
+export { default as HeaderRightItem } from './Header/HeaderRightItem';
+export type { default as HeaderRightItemProps } from './Header/HeaderRightItemProps';
+
+// HeroBanner
+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.tsx

@@ -0,0 +1,19 @@
+import styles from "./container.module.scss";
+import ContainerProps from "./ContainerProps.tsx";
+import cslx from "clsx";
+const Container = (props : ContainerProps) =>{
+
+  const {children, type="default"} = props
+
+  const className = cslx(
+    styles.container,
+    {
+      [styles.default]: type === "default",
+    })
+
+  return <div className={className}>
+    {children}
+  </div>;
+}
+
+export default Container

package/src/Components/Shared/Container/ContainerProps.tsx

@@ -0,0 +1,8 @@
+import {ReactNode} from "react";
+
+interface ContainerProps {
+  children?: ReactNode
+  type?: "default"
+}
+
+export default ContainerProps