@hellobetterdigitalnz/selwynui 0.0.1-1

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

@@ -0,0 +1,326 @@
+.footer {
+  width: 100%;
+
+  .container {
+    max-width: 1832px;
+    margin: 0 auto;
+  }
+
+  // Footer Top
+  .footerTop {
+    border-radius: 12px 12px 0 0;
+    background-color: var(--color-taste);
+    padding: 24px 16px;
+
+    .footerTopWrapper {
+      color: var(--color-visit);
+
+      .footerTopLeft {
+        align-items: center;
+
+        h1 {
+          font-size: var(--font-size-h5);
+          font-weight: var(--font-weight-h4);
+          line-height: var(--line-height-h4);
+        }
+
+        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;
+
+      img {
+        padding-bottom: 72px;
+      }
+
+      .footerItem {
+        h3 {
+          color: var(--color-taste);
+          font-size: var(--font-size-small);
+          font-weight: var(--font-weight-h4);
+        }
+
+        ul {
+          display: none;
+        }
+      }
+    }
+
+    .footerMiddleLinks {
+      font-size: var(--font-size-regular);
+
+      .footerSocialMediaLogos {
+
+        .footerBottomRight {
+          .footerBottomRightWrapper {
+
+            display: flex;
+
+            .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;
+                  color: var(--color-inverse-text);
+
+                  svg {
+                    height: 24px;
+                    width: 24px;
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  // Footer Bottom
+  .footerBottom {
+    background-color: var(--color-visit);
+    padding-bottom: 72px;
+
+    .footerBottomWrapper {
+
+      .footerBottomLeft {
+
+        .footerBottomLeftWrapper {
+
+          .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: none;
+      }
+    }
+  }
+
+  @media screen and (min-width: 1440px) {
+
+    // Footer Top
+    .footerTop {
+      position: relative;
+      padding: 72px 0 0 0;
+
+      .footerTopWrapper {
+        display: flex;
+        gap: 154px;
+        justify-content: space-between;
+
+        .footerTopLeft {
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          align-items: start;
+
+          h1 {
+            font-size: var(--font-size-h3);
+            font-weight: var(--font-weight-h1);
+            line-height: var(--line-height-h3);
+          }
+
+          h2 {
+            font-size: var(--font-size-h3);
+            font-weight: var(--font-weight-bold);
+            line-height: var(--line-height-h3);
+          }
+        }
+
+        .footerTopRight {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+
+          p {
+            font-size: var(--font-size-small);
+          }
+        }
+      }
+
+      .footerBgDesignContainer {
+        display: block;
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        right: 96px;
+
+        svg {
+          height: 100%;
+        }
+      }
+    }
+
+
+    // Footer Middle
+    .footerMiddle {
+      .footerMiddleWrapper {
+        display: flex;
+        flex-wrap: wrap;
+        padding-top: 64px;
+        padding-bottom: 32px;
+
+        .footerLogoContainer {
+          flex: 1;
+        }
+      }
+
+      .footerMiddleLinks {
+        display: flex;
+        flex-grow: 1;
+        flex-wrap: wrap;
+
+        .footerSocialMediaLogos {
+          .footerBottomRight {
+            .footerBottomRightWrapper {
+
+              display: none;
+            }
+          }
+        }
+      }
+
+      .footerItem {
+        width: 20%;
+
+        h3 {
+          padding-bottom: 28px;
+          font-weight: var(--font-weight-body-sm);
+        }
+
+        ul {
+          display: block !important;
+
+          gap: 16px;
+          list-style: none;
+          padding: 0;
+          margin: 0;
+        }
+
+        a {
+          color: var(--color-sand);
+          font-size: var(--font-size-body-xsm);
+        }
+      }
+    }
+
+    // Footer Bottom
+    .footerBottom {
+      padding-bottom: 38px;
+
+      .footerBottomWrapper {
+        display: flex;
+        justify-content: space-between;
+
+        .footerBottomLeft {
+
+          .footerBottomLeftWrapper {
+            display: flex;
+            gap: 166px;
+
+            .footerBottomLeftLogo {
+              padding-bottom: 0;
+            }
+
+          }
+        }
+
+        .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);
+
+                svg {
+                  height: 24px;
+                  width: 24px;
+                }
+              }
+            }
+
+            .footerMiddleSocialMediaWrapper {
+              display: flex;
+            }
+          }
+        }
+
+        .paddingBottomLeft {}
+      }
+    }
+  }
+}

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

@@ -0,0 +1,67 @@
+import React from "react";
+import {Meta, StoryObj} from "@storybook/react-vite";
+import Header from "./Header";
+import HeaderRight from "./HeaderRight";
+import HeaderRightItem from "./HeaderRightItem";
+import MagnifyingGlass from "./MagnifyingGlass/MagnifyingGlass";
+import MegaMenu from "./MegaMenu/MegaMenu";
+
+
+const meta: Meta = {
+  title: "Layout / Header",
+  component: Header,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  tags: ["autodocs"],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const logo = (
+    <a href={"/"}>
+      <img src={'/img/waikirikiri-full-logo.svg'} width={190} height={60} alt={'Hello Better'}/>
+    </a>
+);
+
+const logoSmall = (
+    <a href={"/"}>
+      <img src={'/img/waikirikiri-full-logo.svg'} width={110} height={45} alt={'Hello Better'}/>
+    </a>
+);
+
+
+const HeaderTemplate: Story = {
+  render: () => {
+
+    // @ts-ignore
+    return <Header logo={logo} logoSmall={logoSmall}>
+      <HeaderRight>
+        <HeaderRightItem menuDropdown={<MegaMenu pillar={'live'}/>}>
+          Participate
+        </HeaderRightItem>
+        <HeaderRightItem>
+          Business
+        </HeaderRightItem>
+        <HeaderRightItem>
+          Live
+        </HeaderRightItem>
+        <HeaderRightItem>
+          Visit
+        </HeaderRightItem>
+        <HeaderRightItem>
+          Taste
+        </HeaderRightItem>
+        <HeaderRightItem>
+          <MagnifyingGlass/>
+        </HeaderRightItem>
+      </HeaderRight>
+    </Header>
+  },
+};
+
+export const HeaderComponent = {
+  ...HeaderTemplate,
+};

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

@@ -0,0 +1,27 @@
+import styles from "./header.module.scss"
+import HeaderProps from "./HeaderProps.tsx";
+import Container from "../../Shared/Container/Container.tsx";
+const Header = (props : HeaderProps) => {
+
+  const { children, logoSmall, logo } = props
+
+  return <header className={styles.header}>
+   <Container>
+     <div className={styles.headerWrapper}>
+       <div className={styles.headerLogo}>
+         <div className={`${styles.logo} HeaderLogo`}>
+           {logo}
+         </div>
+         <div className={`${styles.logoSmall} HeaderLogoSmall`}>
+           {logoSmall}
+         </div>
+       </div>
+       <div className={styles.headerRight}>
+         {children}
+       </div>
+     </div>
+   </Container>
+  </header>
+}
+
+export default Header;

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

@@ -0,0 +1,9 @@
+import {ReactNode} from "react";
+
+interface HeaderProps{
+  children?:ReactNode
+  logo?: ReactNode,
+  logoSmall?: ReactNode,
+}
+
+export default HeaderProps

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

@@ -0,0 +1,12 @@
+import styles from './header.module.scss'
+import HeaderRightProps from "./HeaderRightProps.tsx";
+
+const HeaderRight = ({children} : HeaderRightProps) =>{
+
+  return <div className={styles.headerRightWrapper}>
+    {children}
+  </div>
+
+}
+
+export default HeaderRight

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

@@ -0,0 +1,21 @@
+import styles from './header.module.scss'
+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}`}>
+      {icon && <div className={styles.icon}>
+        {icon}
+      </div>}
+      {children}
+    </a>
+    {menuDropdown && (
+      <div className={styles.menuDropdown}>
+        {menuDropdown}
+      </div>
+    )}
+  </div>;
+}
+
+export default HeaderRightItem

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

@@ -0,0 +1,13 @@
+import { ReactNode } from "react"
+
+interface HeaderRightItemProps {
+  children?: ReactNode
+  extraClass?: string
+  icon?:ReactNode
+  menuDropdown?:ReactNode
+  href?:string
+  target?:string
+  active?:boolean
+}
+
+export default HeaderRightItemProps;

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

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

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

@@ -0,0 +1,10 @@
+const MagnifyingGlass = () => {
+  return <svg xmlns="http://www.w3.org/2000/svg" width="36" height="37" viewBox="0 0 36 37" fill="none">
+    <path d="M15.75 27C21.9632 27 27 21.9632 27 15.75C27 9.5368 21.9632 4.5 15.75 4.5C9.5368 4.5 4.5 9.5368 4.5 15.75C4.5 21.9632 9.5368 27 15.75 27Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M23.7051 23.7051L31.4999 31.4999" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M24 17.5C20.4101 17.5 17.5 20.4101 17.5 24C17.5 20.4101 14.5899 17.5 11 17.5C14.5899 17.5 17.5 14.5899 17.5 11C17.5 14.5899 20.4101 17.5 24 17.5Z" fill="currentColor"/>
+    <circle cx="12" cy="12" r="2.5" fill="currentColor"/>
+  </svg>
+}
+
+export default MagnifyingGlass;

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

@@ -0,0 +1,98 @@
+import MegaMenuProps 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 Container from "../../../Shared/Container/Container.tsx";
+
+const MegaMenu = (props : MegaMenuProps) => {
+
+  const {
+    pillar,
+    menu,
+    imageSrc,
+    heading,
+    headingHighlight,
+    description
+  } = 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>
+              </div>
+              <div className={styles.action}>
+                <Button pillar={pillar} label={'START EXPLORING'} secondaryIcon={<ArrowRight/>}/>
+              </div>
+            </div>
+          </div>
+        </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;

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

@@ -0,0 +1,20 @@
+export interface MenuItem {
+  label: string;
+  url: string;
+  imageUrl: string;
+  title: string;
+  description: string;
+  target: string;
+  pillar: 'vist' | 'live' | 'business' | 'participate' | 'taste';
+}
+
+interface MegaMenuProps {
+  pillar: 'vist' | 'live' | 'business' | 'participate' | 'taste';
+  menu: MenuItem[];
+  headingHighlight?: string;
+  defaultImg?:string
+  defaultTitle?: string;
+  defaultDescription?:string;
+}
+
+export default MegaMenuProps;