@hellobetterdigitalnz/selwynui 0.0.1-1

package/src/Components/DataDisplay/PathwayBlock/PathwayBlock.tsx

@@ -0,0 +1,37 @@
+import PathwayBlockProps from "./PathwayBlockProps.tsx";
+import styles from './pathwayBlock.module.scss';
+import Container from "../../Shared/Container/Container.tsx";
+import DetailsCard from "../DetailsCard/DetailsCard.tsx";
+
+const PathwayBlock = (props: PathwayBlockProps) => {
+  const {
+    title = 'Lorem ipsum',
+    cards = [],
+    pillar = 'visit'
+  } = props;
+
+  return (
+    <div className={`${styles.pathwayBlock} ${pillar ? `${pillar}` : ""}`}>
+      <Container>
+        <div className={styles.pathwayBlockWrapper}>
+          {title &&<h1 className={styles.header}>{title}</h1>}
+          <div className={styles.cardsGrid}>
+            {cards.map((card, index) => (
+              <div className={styles.card}>
+                <DetailsCard
+                  key={index}
+                  title={card.description}
+                  image={card.image}
+                  link="Learn More"
+
+                />
+              </div>
+            ))}
+          </div>
+        </div>
+      </Container>
+    </div>
+  );
+};
+
+export default PathwayBlock;

package/src/Components/DataDisplay/PathwayBlock/PathwayBlockProps.tsx

@@ -0,0 +1,13 @@
+export interface PathwayCard {
+  date: string;
+  description: string;
+  image: string;
+}
+
+interface PathwayBlockProps {
+  title?: string;
+  cards?: PathwayCard[];
+  pillar?: 'visit' | 'live' | 'business' | 'participate' | 'taste' | 'main';
+}
+
+export default PathwayBlockProps;

package/src/Components/DataDisplay/PathwayBlock/pathwayBlock.module.scss

@@ -0,0 +1,34 @@
+.pathwayBlock {
+
+
+
+}
+
+.pathwayBlockWrapper {
+
+}
+
+.header {
+  font-size: var(--font-size-h3);
+  font-weight: var();
+  margin: 0 0 72px 0;
+}
+.cardsGrid {
+  display: flex;
+  flex-wrap: wrap;
+  margin: -12px;
+}
+
+.card{
+  width: 33.33%;
+  padding: 12px;
+
+  @media (max-width: 999px) {
+    width: 50%;
+  }
+
+  @media (max-width: 599px) {
+    width: 100%;
+  }
+
+}

package/src/Components/DataDisplay/PromoBannerBlock/PromoBanner.stories.tsx

@@ -0,0 +1,45 @@
+import React from "react";
+import { Meta, StoryObj } from "@storybook/react";
+import PromoBannerBlock from './PromoBannerBlock';
+import Button from '../../Form/Button/Button';
+import ArrowRight from "../../Icons/Arrows/ArrowRight/ArrowRight";
+import ElementHolder from "../../Shared/ElementHolder/ElementHolder";
+
+const meta: Meta = {
+    title: "DataDisplay / PromoBannerBlock",
+    parameters: {
+        layout: 'fullscreen',
+    },
+    tags: ["autodocs"],
+}
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const PromoBannerBlockTemplate: Story = {
+    render: () => {
+        return (
+            <ElementHolder paddingTop="none" paddingBottom="none" pillar="visit" level="primary">
+                <PromoBannerBlock
+                    introTitle={'A district that’s growing, grounded, and full of opportunity.'}
+                    introText={'From the Southern Alps to the sea, Waikirikiri Selwyn’s diverse towns arespread across the Canterbury Plains between two mighty braided rivers. This is where ideas take root, families and businesses grow, and communities come together. We don’t just dream of a better future, we make it happen.'}
+                    brandPiller={'visit'}
+                    pillerTitle={'Visit'}
+                    title={'Spring gardens'}
+                    boldTitle={'in Selwyn'}
+                    content={'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.'}
+                    image={'promo-banner-image.svg'}
+                    button={
+                        <Button label={'START EXPLORING'} piller={'visit'} level={'primary'} icon={<ArrowRight />} />
+                    }
+
+                />
+            </ElementHolder>
+        )
+    }
+}
+
+export const PromoBannerBlockComponent = {
+    ...PromoBannerBlockTemplate
+}

package/src/Components/DataDisplay/PromoBannerBlock/PromoBannerBlock.tsx

@@ -0,0 +1,77 @@
+import Container from "../../Shared/Container/Container"
+import PromoBannerBlockProps from "./PromoBannerBlockProps"
+import BrandPillerLogo from "./brand-piller"
+import PromoBannerBgDesign from "./promo-banner-bg-design"
+import styles from "./promoBanner.module.scss"
+
+const PromoBannerBlock = (props: PromoBannerBlockProps) => {
+    const {
+        introTitle,
+        introText,
+        brandPiller,
+        pillerTitle = "visit",
+        title,
+        boldTitle,
+        content,
+        image,
+        button,
+        extraClass,
+    } = props
+
+    return (
+        <div className={styles.promoBannerBlock}>
+            <Container>
+                <div className={`${styles.promoBlockWrapper} ${extraClass}`}>
+                    <div className={styles.promoBannerBlockContainer}>
+
+                        <div className={styles.promoBannerTop}>
+                            <div className={styles.promoBannerTopLeft}>
+                                <h1>
+                                    {introTitle}
+                                </h1>
+                            </div>
+
+                            <div className={styles.promoBannerVerticalLine}></div>
+
+                            <div className={styles.promoBannerTopRight}>
+                                <h1>
+                                    {introText}
+                                </h1>
+                            </div>
+
+                            <div className={styles.promoBannerBgDesignContainer}>
+                                <PromoBannerBgDesign />
+                            </div>
+                        </div>
+
+                        <div className={styles.promoBannerBottom}>
+                            <div className={styles.promoBannerBottomLeft}>
+                                <div className={styles.promoBannerBrandPiller}>
+                                    <div className={styles.brandPillerLogo}>
+                                        {<BrandPillerLogo brandPiller={brandPiller} />}
+                                    </div>
+                                    {pillerTitle}
+                                </div>
+
+                                <div className={styles.promoBannerTitleContainer}>
+                                    <h1>{title}</h1>
+                                    <h2>{boldTitle}</h2>
+                                </div>
+
+                                <p>{content}</p>
+
+                                {button}
+                            </div>
+
+                            <div className={styles.promoBannerBottomRight}>
+                                <img src={`./img/${image}`} alt="" />
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </Container>
+        </div>
+    )
+}
+
+export default PromoBannerBlock;

package/src/Components/DataDisplay/PromoBannerBlock/PromoBannerBlockProps.tsx

@@ -0,0 +1,16 @@
+import { ReactNode } from "react";
+
+interface PromoBannerBlockProps {
+    introTitle?: string;
+    introText?: string;
+    brandPiller?: 'visit' | 'live' | 'business' | 'participate' | 'taste' | 'main';
+    pillerTitle?: 'Visit' | 'Live' | 'Business' | 'Participate' | 'Taste' | 'Main';
+    title?: string;
+    boldTitle?: string;
+    content?: string;
+    image?: string;
+    button?: ReactNode;
+    extraClass?: string;
+}
+
+export default PromoBannerBlockProps;

package/src/Components/DataDisplay/PromoBannerBlock/brand-piller.tsx

@@ -0,0 +1,50 @@
+import PromoBannerBlockProps from "./PromoBannerBlockProps"
+
+const BrandPillerLogo = ({ brandPiller }: PromoBannerBlockProps) => {
+    if (brandPiller === 'visit') {
+        return (<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120" fill="none">
+            <path d="M58.2132 5.43071e-08C26.0583 2.43097e-08 -2.4212e-08 25.9535 -5.40888e-08 57.9793L58.2132 57.9793L58.2132 5.43071e-08Z" fill="currentColor" />
+            <path d="M58.2132 61.2518C26.0583 61.2518 2.40646e-07 87.2053 2.10769e-07 119.231L58.2132 119.231L58.2132 61.2518Z" fill="currentColor" />
+            <path d="M61.6699 0.0189383C93.8249 0.0189383 119.883 25.9725 119.883 57.9982L61.6699 57.9982L61.6699 0.0189383Z" fill="currentColor" />
+            <path d="M61.6699 61.2707C93.8249 61.2707 119.883 87.2242 119.883 119.25L61.6699 119.25L61.6699 61.2707Z" fill="currentColor" />
+        </svg>)
+    }
+
+    if (brandPiller === 'taste') {
+        return <svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120" fill="none">
+            <path d="M61.678 119.25C93.8369 119.25 119.898 93.2965 119.898 61.2707L61.678 61.2707L61.678 119.25Z" fill="currentColor" />
+            <path d="M61.678 57.9982C93.8369 57.9982 119.898 32.0447 119.898 0.0189667L61.678 0.0189616L61.678 57.9982Z" fill="currentColor" />
+            <path d="M58.2208 119.231C26.0618 119.231 0.000330335 93.2775 0.000333134 61.2518L58.2208 61.2518L58.2208 119.231Z" fill="currentColor" />
+            <path d="M58.2208 57.9793C26.0618 57.9793 0.000335689 32.0258 0.000338489 4.77696e-06L58.2208 9.86676e-06L58.2208 57.9793Z" fill="currentColor" />
+        </svg>
+    }
+
+    if (brandPiller === 'business') {
+        return <svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120" fill="none">
+            <path d="M119.671 61.2805C87.582 61.2805 61.5616 87.2381 61.5616 119.25H119.671V61.2805Z" fill="currentColor" />
+            <path d="M119.671 0.0378473C87.582 0.0378473 61.5616 25.9955 61.5616 58.0074H119.671V0.0378473Z" fill="currentColor" />
+            <path d="M0 119.212C0 87.2003 26.0205 61.2426 58.1098 61.2426V119.212H0Z" fill="currentColor" />
+            <path d="M0 57.9695C0 25.9576 26.0205 0 58.1098 0V57.9695H0Z" fill="currentColor" />
+        </svg>
+    }
+
+    if (brandPiller === 'live') {
+        return <svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120" fill="none">
+            <path d="M61.3528 61.2702C61.3528 93.2858 87.28 119.25 119.25 119.25V61.2702H61.3528Z" fill="currentColor" />
+            <path d="M119.25 57.9987C119.25 25.9831 93.3228 0.018911 61.3528 0.018911V57.9987H119.25Z" fill="currentColor" />
+            <path d="M57.8971 119.231C25.9272 119.231 0 93.2669 0 61.2513H57.8971V119.231Z" fill="currentColor" />
+            <path d="M0.0191358 0C31.9891 0 57.9163 25.9642 57.9163 57.9798H0.0191358V0Z" fill="currentColor" />
+        </svg>
+    }
+
+    if (brandPiller === 'participate') {
+        return <svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120" fill="none">
+            <path d="M0 58.01C32.1003 58.01 58.1332 32.0323 58.1332 0H0V58.01Z" fill="currentColor" />
+            <path d="M0 61.24C32.1003 61.24 58.1332 87.2177 58.1332 119.25H0V61.24Z" fill="currentColor" />
+            <path d="M119.794 58.01C87.6937 58.01 61.6608 32.0323 61.6608 0H119.794V58.01Z" fill="currentColor" />
+            <path d="M119.794 61.24C87.6937 61.24 61.6608 87.2177 61.6608 119.25H119.794V61.24Z" fill="currentColor" />
+        </svg>
+    }
+}
+
+export default BrandPillerLogo;

package/src/Components/DataDisplay/PromoBannerBlock/promo-banner-bg-design.tsx

@@ -0,0 +1,14 @@
+const PromoBannerBgDesign = () => {
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" width="543" height="490" viewBox="0 0 543 490" fill="none">
+            <g opacity="0.05">
+                <path d="M0 251.765C145.603 251.765 263.669 358.442 263.669 490H0V251.765Z" fill="#92C134" />
+                <path d="M0 0.0778264C145.603 0.0778264 263.669 106.755 263.669 238.313H0V0.0778264Z" fill="#92C134" />
+                <path d="M543 489.922C543 358.364 424.934 251.687 279.331 251.687V489.922H543Z" fill="#92C134" />
+                <path d="M543 238.235C543 106.677 424.934 0 279.331 0V238.235H543Z" fill="#92C134" />
+            </g>
+        </svg>
+    )
+}
+
+export default PromoBannerBgDesign;

package/src/Components/DataDisplay/PromoBannerBlock/promoBanner.module.scss

@@ -0,0 +1,181 @@
+.promoBannerBlock {
+    overflow-x: hidden;
+    padding: 48px 16px;
+
+    .promoBannerBlockContainer {
+        .promoBannerTop {
+            .promoBannerTopLeft {
+                padding: 0 16px;
+
+                h1 {
+                    font-size: var(--font-size-h5);
+                    line-height: var(--line-height-h5);
+                    font-weight: var(--font-weight-h4);
+                }
+            }
+
+            .promoBannerTopRight {
+                padding: 48px 16px;
+
+                h1 {
+                    font-size: var(--font-size-regular);
+                    font-weight: var(--font-weight-body-regular);
+                    line-height: var(--line-height-label);
+                }
+            }
+
+            .promoBannerBgDesignContainer {
+                display: none;
+            }
+
+        }
+
+        .promoBannerBottom {
+            border-radius: 16px 16px 100px 0;
+            background: linear-gradient(to bottom,
+                    var(--pathway-card-bg) 0%,
+                    var(--pathway-card-bg) 60%,
+                    transparent 60%);
+
+            .promoBannerBottomLeft {
+                color: var(--pathway-card-text);
+                padding: 32px 16px;
+
+                .promoBannerBrandPiller {
+                    display: flex;
+                    align-items: center;
+                    gap: 16px;
+                    margin: auto;
+                    font-size: var(--font-size-body-regular);
+
+                    .brandPillerLogo {
+                        svg {
+                            width: 32px;
+                            height: 32px;
+                        }
+                    }
+                }
+
+                .promoBannerTitleContainer {
+                    padding-block: 32px;
+
+                    h1 {
+                        font-size: var(--font-size-small);
+                        font-weight: var(--font-weight-body-sm);
+                        line-height: var(--line-height-h5);
+                    }
+
+                    h2 {
+                        font-size: var(--font-size-small);
+                        font-weight: var(--font-weight-bold);
+                        line-height: var(--line-height-body-regular);
+                    }
+                }
+
+                p {
+                    font-size: var(--font-size-body-regular);
+                    font-weight: var(--font-weight-body-regular);
+                    line-height: var(--line-height-body-regular);
+                    padding-bottom: 32px;
+                }
+            }
+
+            .promoBannerBottomRight {
+                img {
+                    height: 100%;
+                    width: 100%;
+                    object-fit: cover;
+                    border-radius: 0 0 0 16px;
+                }
+            }
+        }
+    }
+
+    @media screen and (min-width: 992px) {
+        padding: 120px 0;
+
+        .promoBannerBlockContainer {
+            .promoBannerTop {
+                display: flex;
+                flex-grow: 1;
+                margin: 0 -72px;
+                position: relative;
+
+                .promoBannerTopLeft {
+                    padding: 0 72px;
+                    width: 50%;
+
+                    h1 {
+                        font-size: var(--font-size-h4);
+                        line-height: var(--line-height-h4);
+                    }
+                }
+
+                .promoBannerTopRight {
+                    width: 50%;
+                    padding: 0 72px;
+
+                    h1 {
+                        font-size: var(--font-size-small);
+                    }
+                }
+
+                .promoBannerVerticalLine {
+                    background: var(--color-text);
+                    width: 1px;
+                }
+
+                .promoBannerBgDesignContainer {
+                    display: block;
+                    position: absolute;
+                    top: -120px;
+                    bottom: 0;
+                    right: -120px;
+                }
+
+            }
+
+            .promoBannerBottom {
+                display: flex;
+                padding-top: 90px;
+                background: transparent;
+
+                .promoBannerBottomLeft {
+                    background-color: var(--pathway-card-bg);
+                    padding: 72px 90px 72px 72px;
+                    border-radius: 16px 0 0 16px;
+                    width: 50%;
+
+                    .promoBannerTitleContainer {
+                        padding-block: 48px;
+
+                        h1 {
+                            font-size: var(--font-size-h3);
+                            font-weight: var(--font-weight-h3);
+                            line-height: var(--line-height-h3);
+                        }
+
+                        h2 {
+                            font-size: var(--font-size-h3);
+                            line-height: var(--line-height-h3);
+                        }
+                    }
+
+                    p {
+                        padding-bottom: 48px;
+                    }
+                }
+
+                .promoBannerBottomRight {
+                    width: 50%;
+
+                    img {
+                        border-radius: 0 16px 96px 0;
+                    }
+                }
+            }
+
+        }
+    }
+
+}

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

@@ -0,0 +1,46 @@
+// @ts-ignore
+import React from "react"
+import { Meta, StoryObj } from "@storybook/react-vite";
+import TestimonyCard from "./TestimonyCard";
+import ElementHolder from "../../Shared/ElementHolder/ElementHolder";
+
+const meta: Meta = {
+  title: "Layout / TestimonyCard",
+  component: TestimonyCard,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  tags: ["autodocs"]
+}
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const TestimonyCardTemplate: Story = {
+  render: () => {
+    return (
+      <>
+        <ElementHolder paddingTop="sm" paddingBottom="sm" piller="visit" level="light">
+        <TestimonyCard
+          testimonies={[
+            {
+              image: 'https://images.pexels.com/photos/1563356/pexels-photo-1563356.jpeg',
+              testimony: 'Living in Selwyn is like waking up in a dream every single day. The community is not only vibrant but also filled with friendly faces and engaging activities that bring everyone together.\n\nThe sunsets here are truly breathtaking, painting the sky in hues of orange, pink, and purple, creating a picturesque backdrop that makes every evening feel special!',
+              author: '— Liam & Emma'
+            },
+            {
+              testimony: 'The sense of community here is incredible.',
+              author: '— Sarah & James'
+            }
+          ]}
+        />
+        </ElementHolder>
+      </>
+    )
+  }
+}
+
+export const TestimonyCardComponent = {
+  ...TestimonyCardTemplate
+};

package/src/Components/DataDisplay/TestimonyCard/TestimonyCard.tsx

@@ -0,0 +1,64 @@
+import { useState } from 'react';
+import TestimonyCardProps from "./TestimonyCardProps.tsx";
+import styles from './testimonyCard.module.scss';
+import Container from "../../Shared/Container/Container.tsx";
+
+
+
+const TestimonyCard = (props: TestimonyCardProps) => {
+  const {
+    testimonies,
+    pillar = 'visit'
+  } = props;
+
+  const [currentIndex, setCurrentIndex] = useState(0);
+
+  const defaultImage = 'https://images.pexels.com/photos/1563356/pexels-photo-1563356.jpeg';
+
+  return <div
+    className={`
+    ${styles.testimonyCard} 
+    ${styles.testimonyCardLarge}
+    ${pillar ? `${pillar}` : ""}
+    `}
+  >
+    <Container>
+      <div className={styles.testimonyCardWrapper}>
+        <div className={styles.testimonyCardLeft}>
+          <img
+            src={testimonies[currentIndex].image || defaultImage}
+            alt={`${testimonies[currentIndex].author} testimonial`}
+          />
+        </div>
+        <div className={styles.testimonyCardRight}>
+          <div className={styles.testimonyContent}>
+            <div className={styles.quoteIcon}>
+              <svg xmlns="http://www.w3.org/2000/svg" width="56" height="39" viewBox="0 0 56 39" fill="none">
+                <path d="M23.1134 27.0562C23.1134 32.4847 18.9331 36 13.4798 36C8.02648 36 4.75277 33.6194 3.3652 27.0562C1.97764 20.493 7.78599 17.227 13.2393 17.227C18.6926 17.227 23.1134 21.6276 23.1134 27.0562Z" fill="#92C134"/>
+                <path d="M53.0015 27.0558C53.0015 32.4844 48.8212 35.9997 43.3679 35.9997C37.9145 35.9997 34.6408 33.619 33.2533 27.0558C31.8657 20.4926 37.674 17.2267 43.1274 17.2267C48.5807 17.2267 53.0015 21.6273 53.0015 27.0558Z" fill="#92C134"/>
+                <path d="M3.3652 27.0562C4.75277 33.6194 8.02648 36 13.4798 36C18.9331 36 23.1134 32.4847 23.1134 27.0562C23.1134 21.6276 18.6926 17.227 13.2393 17.227C7.78599 17.227 1.97764 20.493 3.3652 27.0562ZM3.3652 27.0562C1.97764 20.493 4.78431 13.7613 7.99019 9.54638C11.1961 5.33146 17.2399 2.24873 21.5318 3.16115M33.2533 27.0558C34.6408 33.619 37.9145 35.9997 43.3679 35.9997C48.8212 35.9997 53.0015 32.4844 53.0015 27.0558C53.0015 21.6273 48.5807 17.2267 43.1274 17.2267C37.674 17.2267 31.8657 20.4926 33.2533 27.0558ZM33.2533 27.0558C31.8657 20.4926 34.6724 13.761 37.8782 9.54606C41.0841 5.33115 47.1279 2.24841 51.4199 3.16083" stroke="#92C134" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/>
+              </svg>
+            </div>
+            <h6>{testimonies[currentIndex].testimony}</h6>
+          </div>
+          <p>{testimonies[currentIndex].author}</p>
+
+          {testimonies.length > 1 && (
+            <div className={styles.pagination}>
+              {testimonies.map((_, index) => (
+                <button
+                  key={index}
+                  className={`${styles.dot} ${index === currentIndex ? styles.active : ''}`}
+                  onClick={() => setCurrentIndex(index)}
+                  aria-label={`Go to testimonial ${index + 1}`}
+                />
+              ))}
+            </div>
+          )}
+        </div>
+      </div>
+    </Container>
+  </div>
+};
+
+export default TestimonyCard;

package/src/Components/DataDisplay/TestimonyCard/TestimonyCardProps.tsx

@@ -0,0 +1,13 @@
+export interface Testimony {
+  image?: string;
+  testimony: string;
+  author: string;
+}
+
+interface TestimonyCardProps {
+  // testimonySize?: 'large' | 'medium' | 'small';
+  testimonies: Testimony[];
+  pillar?: 'visit' | 'live' | 'business' | 'participate' | 'taste' | 'main';
+}
+
+export default TestimonyCardProps;