@hellobetterdigitalnz/selwynui 0.0.1

package/src/Components/Icons/index.ts

@@ -0,0 +1,165 @@
+// export type { default as IconProps } from './IconProps';
+
+// Arrows
+export { default as CaretDown } from './Arrows/CaretDown/CaretDown';
+export { default as CaretUp } from './Arrows/CaretUp/CaretUp';
+export { default as CaretRight } from './Arrows/CaretRight/CaretRight';
+export { default as CaretLeft } from './Arrows/CaretLeft/CaretLeft';
+export { default as CaretUpDown } from './Arrows/CaretUpDown/CaretUpDown.tsx';
+export { default as ArrowLeft } from './Arrows/ArrowLeft/ArrowLeft.tsx';
+export { default as ArrowsDownUp } from './Arrows/ArrowsDownUp/ArrowsDownUp.tsx';
+export { default as ArrowsOutCardinal } from './Arrows/ArrowsOutCardinal/ArrowsOutCardinal.tsx';
+export { default as CaretCircleRight } from './Arrows/CaretCircleRight/CaretCircleRight.tsx';
+
+
+// Brands and logos
+export { default as WindowsLogo } from './Brands/WindowsLogo/WindowsLogo';
+
+// Commerce
+export { default as CurrencyDollarSimple } from './Commerce/CurrencyDollarSimple/CurrencyDollarSimple';
+export { default as Scale } from './Commerce/Scale/Scale.tsx';
+export { default as CreditCard } from "./Commerce/CreditCard/CreditCard.tsx"
+
+// Communication
+export { default as AddressBook } from './Communication/AddressBook/AddressBook';
+export { default as Asterisk } from './Communication/Asterisk/Asterisk';
+export { default as At } from './Communication/At/At';
+export { default as Broadcast } from './Communication/Broadcast/Broadcast';
+export { default as Chat } from './Communication/Chat/Chat';
+export { default as Translate } from './Communication/Translate/Translate.tsx';
+export { default as Phone } from './Communication/Phone/Phone.tsx';
+export { default as EnvelopeSimple } from './Communication/EnvelopeSimple/EnvelopeSimple.tsx';
+export { default as Export } from './Communication/Export/Export.tsx';
+export { default as ChatCircleText } from './Communication/ChatCircleText/ChatCircleText.tsx';
+
+// Design
+export { default as Eye } from './Design/Eye/Eye';
+export { default as EyeSlash } from './Design/EyeSlash/EyeSlash';
+export { default as PencilLine } from './Design/PencilLine/PencilLine.tsx';
+export { default as PencilSimple } from './Design/PencilSimple/PencilSimple.tsx';
+export { default as Ruler } from './Design/Ruler/Ruler.tsx';
+export { default as DropHalfBottom } from './Design/DropHalfBottom/DropHalfBottom.tsx';
+export { default as SquaresFour } from './Design/SquaresFour/SquaresFour.tsx';
+export { default as GearFine } from './Design/GearFine/GearFine.tsx';
+
+// Education
+export { default as BookOpenText } from './Education/BookOpenText/BookOpenText.tsx';
+export { default as GraduationCap } from './Education/GraduationCap/GraduationCap.tsx';
+
+//Map and Travel
+export { default as Globe } from './MapAndTravel/Globe/Globe.tsx';
+export { default as House } from './MapAndTravel/House/House.tsx';
+export { default as HouseSimple } from './MapAndTravel/HouseSimple/HouseSimple.tsx';
+export { default as Path } from './MapAndTravel/Path/Path.tsx';
+export { default as Tram } from './MapAndTravel/Tram/Tram.tsx';
+export { default as RoadHorizon } from './MapAndTravel/RoadHorizon/RoadHorizon.tsx';
+export { default as SwimmingPool } from './MapAndTravel/SwimmingPool/SwimmingPool.tsx';
+export { default as MapPin } from './MapAndTravel/MapPin/MapPin.tsx';
+export { default as MapTriFold } from './MapAndTravel/MapTriFold/MapTriFold.tsx';
+export { default as SteeringWheel } from './MapAndTravel/SteeringWheel/SteeringWheel.tsx';
+export { default as Van } from './MapAndTravel/Van/Van.tsx';
+
+
+// Maths and Finance
+export { default as XIcon } from './MathsAndFinance/XIcon/XIcon';
+export { default as Plus } from './MathsAndFinance/Plus/Plus.tsx';
+export { default as Minus } from './MathsAndFinance/Minus/Minus.tsx';
+export { default as NumberSquareThree } from './MathsAndFinance/NumberSquareThree/NumberSquareThree.tsx';
+export { default as ChartBar } from './MathsAndFinance/ChartBar/ChartBar.tsx';
+export { default as ChartLine } from './MathsAndFinance/ChartLine/ChartLine.tsx';
+export { default as ChartPie } from './MathsAndFinance/ChartPie/ChartPie.tsx';
+export { default as ChartBarHorizontal } from './MathsAndFinance/ChartBarHorizontal/ChartBarHorizontal.tsx';
+export { default as PlusCircle } from './MathsAndFinance/PlusCircle/PlusCircle.tsx';
+export { default as Calculator } from './MathsAndFinance/Calculator/Calculator.tsx';
+
+//Media
+export { default as SildersHorizontal } from './Media/SlidersHorizontal/SlidersHorizontal.tsx';
+export { default as PlayCircle } from './Media/PlayCircle/PlayCircle.tsx';
+export { default as StopCircle } from './Media/StopCircle/StopCircle.tsx';
+export { default as Camera } from './Media/Camera/Camera.tsx';
+export { default as Microphone } from './Media/Microphone/Microphone.tsx';
+export { default as VideoCamera } from './Media/VideoCamera/VideoCamera.tsx';
+
+
+// Office and Editing
+export { default as TextAa } from './OfficeAndEditing/TextAa/TextAa.tsx';
+export { default as TextColumns } from './OfficeAndEditing/TextColumns/TextColumns.tsx';
+export { default as Folder } from './OfficeAndEditing/Folder/Folder.tsx';
+export { default as Folders } from './OfficeAndEditing/Folders/Folders.tsx';
+export { default as ListBullets } from './OfficeAndEditing/ListBullets/ListBullets.tsx';
+export { default as List } from './OfficeAndEditing/List/List.tsx';
+export { default as ListDashes } from './OfficeAndEditing/ListDashes/ListDashes.tsx';
+export { default as Printer } from './OfficeAndEditing/Printer/Printer.tsx';
+export { default as Trash } from './OfficeAndEditing/Trash/Trash.tsx';
+export { default as TrashSimple } from './OfficeAndEditing/TrashSimple/TrashSimple.tsx';
+export { default as FloppyDisk } from './OfficeAndEditing/FloppyDisk/FloppyDisk.tsx';
+export { default as Copy } from './OfficeAndEditing/Copy/Copy.tsx';
+export { default as Files } from './OfficeAndEditing/Files/Files.tsx';
+export { default as FileText } from './OfficeAndEditing/FileText/FileText.tsx';
+export { default as FolderSimplePlus } from './OfficeAndEditing/FolderSimplePlus/FolderSimplePlus.tsx'
+
+//People
+export { default as User } from './People/User/User.tsx';
+export { default as Users } from './People/Users/Users.tsx';
+export { default as UserCircle } from './People/UserCircle/UserCircle.tsx';
+export { default as UserSwitch } from './People/UserSwitch/UserSwitch.tsx';
+export { default as PersonSimpleWalk } from './People/PersonSimpleWalk/PersonSimpleWalk.tsx';
+export { default as PersonSimpleBike } from './People/PersonSimpleBike/PersonSimpleBike.tsx';
+export { default as Person } from './People/Person/Person.tsx';
+export { default as PersonArmsSpread } from './People/PersonArmsSpread/PersonArmsSpread.tsx';
+
+
+
+// Security and warnings
+export { default as WarningCircle } from './SecurityAndWarnings/WarningCircle/WarningCircle';
+export { default as LockSimple } from './SecurityAndWarnings/LockSimple/LockSimple.tsx';
+export { default as LockKeyOpen } from './SecurityAndWarnings/LockKeyOpen/LockKeyOpen.tsx';
+export { default as Question } from './SecurityAndWarnings/Question/Question.tsx';
+export { default as Key } from './SecurityAndWarnings/Key/Key.tsx';
+export { default as Info } from './SecurityAndWarnings/Info/Info.tsx';
+export { default as ShieldCheck } from './SecurityAndWarnings/ShieldCheck/ShieldCheck.tsx';
+
+// Systems and devices
+export { default as Bell } from './SystemAndDevice/Bell/Bell';
+export { default as MagnifyingGlass } from './SystemAndDevice/MagnifyingGlass/MagnifyingGlass';
+export { default as DotsSixVertical } from './SystemAndDevice/DotSixVertical/DotSixVertical.tsx';
+export { default as DotsSix } from './SystemAndDevice/DotsSix/DotsSix.tsx';
+export { default as DotsThree } from './SystemAndDevice/DotsThree/DotsThree.tsx';
+export { default as DotsThreeVertical } from './SystemAndDevice/DotsThreeVertical/DotsThreeVertical.tsx';
+export { default as CheckSquare } from './SystemAndDevice/CheckSquare/CheckSquare.tsx';
+export { default as RadioButtonIcon } from './SystemAndDevice/RadioButtonIcon/RadioButtonIcon.tsx';
+export { default as Gear } from './SystemAndDevice/Gear/Gear.tsx';
+export { default as DownloadSimple } from './SystemAndDevice/DownloadSimple/DownloadSimple.tsx';
+export { default as SignOut } from './SystemAndDevice/SignOut/SignOut.tsx';
+export { default as SignIn } from './SystemAndDevice/SignIn/SignIn.tsx';
+export { default as Check } from './SystemAndDevice/Check/Check.tsx';
+export { default as ToggleRight } from './SystemAndDevice/ToggleRight/ToggleRight.tsx';
+export { default as ToggleLeft } from './SystemAndDevice/ToggleLeft/ToggleLeft.tsx';
+export { default as CloudCheck } from './SystemAndDevice/CloudCheck/CloudCheck.tsx';
+export { default as DeviceMobile } from './SystemAndDevice/DeviceMobile/DeviceMobile.tsx';
+export { default as Desktop } from './SystemAndDevice/Desktop/Desktop.tsx';
+
+
+
+// Time
+export { default as Calendar } from './Time/Calendar/Calendar';
+export { default as CalendarCheck } from './Time/CalendarCheck/CalendarCheck.tsx';
+export { default as CalendarBank } from './Time/CalendarBank/CalendarBank';
+export { default as Clock } from './Time/Clock/Clock';
+export { default as ClockCounterClockwise } from './Time/ClockCounterClockwise/ClockCounterClockwise.tsx';
+
+// Health And Wellness
+export { default as Barbell } from './HealthAndWellness/Barbell/Barbell'
+
+// Weather And Nature
+export { default as Mountains } from './WeatherAndNature/Mountains/Mountains';
+export { default as Tree } from './WeatherAndNature/Tree/Tree';
+export { default as Campfire } from './WeatherAndNature/Campfire/Campfire';
+export { default as CloudSun } from './WeatherAndNature/CloudSun/CloudSun.tsx';
+export { default as Snowflake } from './WeatherAndNature/Snowflake/Snowflake.tsx';
+export { default as Plant } from './WeatherAndNature/Plant/Plant.tsx';
+export { default as Sparkle } from './WeatherAndNature/Sparkle/Sparkle.tsx';
+export { default as Flower } from './WeatherAndNature/Flower/Flower.tsx';
+export { default as Moon } from './WeatherAndNature/Moon/Moon.tsx';
+
+

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

@@ -0,0 +1,178 @@
+import React from "react";
+import { Meta, StoryObj } from "@storybook/react-vite";
+import Footer from "./Footer";
+import FooterTop from "./FooterTop";
+import FooterMiddle from "./FooterMiddle";
+import FooterItem from "./FooterItem";
+import FooterBottom from "./FooterBottom";
+import FooterBottomLeft from "./FooterBottomLeft";
+import FooterBottomRight from "./FooterBottomRight";
+
+const meta: Meta = {
+    title: "Layout / Footer",
+    component: Footer,
+    parameters: {
+        layout: 'fullscreen',
+    },
+    tags: ["autodocs"]
+}
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const FooterTemplate: Story = {
+    render: () => {
+        const footerTop = (
+            <FooterTop title={'Selwyn.'} subtitle={'A place for more.'}>
+                <p>Stay in the know, sign up to our newsletter.</p>
+                <div>
+                   
+                    {/* need to add the NEWSLETTER SIGNUP component */}
+                </div>
+            </FooterTop>
+        )
+
+        const footerMiddle = (
+            <FooterMiddle>
+                <FooterItem title={'Visit'}>
+                    <li>
+                        <a href="#">Footer Item</a>
+                    </li>
+                    <li>
+                        <a href="#">Footer Item</a>
+                    </li>
+                    <li>
+                        <a href="#">Footer Item</a>
+                    </li>
+                    <li>
+                        <a href="#">Footer Item</a>
+                    </li>
+                    <li>
+                        <a href="#">Footer Item</a>
+                    </li>
+                    <li>
+                        <a href="#">Footer Item</a>
+                    </li>
+                    <li>
+                        <a href="#">Footer Item</a>
+                    </li>
+                </FooterItem>
+
+                <FooterItem title={'Live'}>
+                    <li>
+                        <a href="#">Footer Item</a>
+                    </li>
+                    <li>
+                        <a href="#">Footer Item</a>
+                    </li>
+                    <li>
+                        <a href="#">Footer Item</a>
+                    </li>
+                    <li>
+                        <a href="#">Footer Item</a>
+                    </li>
+                    <li>
+                        <a href="#">Footer Item</a>
+                    </li>
+                    <li>
+                        <a href="#">Footer Item</a>
+                    </li>
+                    <li>
+                        <a href="#">Footer Item</a>
+                    </li>
+                </FooterItem>
+
+                <FooterItem title={'Business'}>
+                    <li>
+                        <a href="#">Footer Item</a>
+                    </li>
+                    <li>
+                        <a href="#">Footer Item</a>
+                    </li>
+                    <li>
+                        <a href="#">Footer Item</a>
+                    </li>
+                    <li>
+                        <a href="#">Footer Item</a>
+                    </li>
+                    <li>
+                        <a href="#">Footer Item</a>
+                    </li>
+                    <li>
+                        <a href="#">Footer Item</a>
+                    </li>
+                </FooterItem>
+
+                <FooterItem title={'Taste'}>
+                    <li>
+                        <a href="#">Footer Item</a>
+                    </li>
+                    <li>
+                        <a href="#">Footer Item</a>
+                    </li>
+                    <li>
+                        <a href="#">Footer Item</a>
+                    </li>
+                    <li>
+                        <a href="#">Footer Item</a>
+                    </li>
+                    <li>
+                        <a href="#">Footer Item</a>
+                    </li>
+                    <li>
+                        <a href="#">Footer Item</a>
+                    </li>
+                </FooterItem>
+
+                <FooterItem title={'Participate'}>
+                    <li>
+                        <a href="#">Footer Item</a>
+                    </li>
+                    <li>
+                        <a href="#">Footer Item</a>
+                    </li>
+                    <li>
+                        <a href="#">Footer Item</a>
+                    </li>
+                    <li>
+                        <a href="#">Footer Item</a>
+                    </li>
+                    <li>
+                        <a href="#">Footer Item</a>
+                    </li>
+                    <li>
+                        <a href="#">Footer Item</a>
+                    </li>
+
+                </FooterItem>
+            </FooterMiddle>
+        )
+
+        const footerBottom = (
+            <FooterBottom>
+                <FooterBottomLeft logoImgUrl="./img/footer-logo.svg" copyRightYear={2025} copyRightText={'Selwyn District Council'} footerLinks={[
+                    { title: "Privacy Policy", link: "#" },
+                    { title: "Terms of Use", link: "#" }
+                ]}>
+                </FooterBottomLeft>
+
+                <FooterBottomRight facebookLink="#" instagramLink="#" linkedinLink="#" />
+            </FooterBottom>
+        );
+
+        return (
+            <Footer
+                logo='img\waikirikiri-full-logo.svg'
+                footerTop={footerTop}
+                footerMiddle={footerMiddle}
+                footerBottom={footerBottom}
+            >
+            </Footer>
+        )
+    }
+}
+
+export const FooterComponent = {
+    ...FooterTemplate
+};

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

@@ -0,0 +1,32 @@
+import Container from "../../Shared/Container/Container";
+import FooterProps from "./FooterProps";
+import styles from "./footer.module.scss";
+
+const Footer = (props: FooterProps) => {
+    const {
+        footerTop,
+        footerMiddle,
+        footerBottom,
+        extraClass,
+        logo
+    } = props
+
+    return (
+        <footer className={`${styles.footer} ${extraClass}`}>
+            {footerTop}
+            {footerMiddle && <div className={styles.footerMiddle}>
+                <Container>
+                    <div className={styles.footerMiddleWrapper}>
+                        <div className={styles.footerLogoContainer}>
+                            <img src={logo} alt="" />
+                        </div>
+                        {footerMiddle}
+                    </div>
+                </Container>
+            </div>}
+            {footerBottom}
+        </footer>
+    )
+}
+
+export default Footer;

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

@@ -0,0 +1,21 @@
+import Container from "../../Shared/Container/Container";
+import FooterBottomProps from "./FooterBottomProps";
+import styles from "./footer.module.scss";
+
+const FooterBottom = (props: FooterBottomProps) => {
+    const {
+        children 
+    } = props
+
+    return (
+        <div className={styles.footerBottom}>
+            <Container>
+                <div className={styles.footerBottomWrapper}>
+                    {children}
+                </div>
+            </Container>
+        </div>
+    )
+}
+
+export default FooterBottom;

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

@@ -0,0 +1,31 @@
+import FooterBottomLeftProps from "./FooterBottomLeftProps";
+import styles from './footer.module.scss';
+
+const FooterBottomLeft = (props: FooterBottomLeftProps) => {
+    const {logoImgUrl, copyRightYear, copyRightText, footerLinks} = props;
+
+    return (
+        <div className={styles.footerBottomLeft}>
+            <div className={styles. footerBottomLeftWrapper}>
+                <div className={styles.footerBottomLeftLogo}>
+                    <img src={logoImgUrl} alt="" />
+                    <p>© <span>{copyRightYear}</span> {copyRightText}</p>
+                </div>
+
+                <div className={styles.footerBottomLeftLinks}>
+                    <ul>
+                        {
+                            footerLinks?.map((footerLink, index) => (
+                                <li key={index}>
+                                    <a href={footerLink.link}>{footerLink.title}</a>
+                                </li>
+                            ))
+                        }
+                    </ul>
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default FooterBottomLeft;

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

@@ -0,0 +1,13 @@
+export interface FooterLinkItem {
+    title?: string;
+    link?: string;
+}
+
+interface FooterBottomLeftProps {
+    logoImgUrl?: string;
+    copyRightYear?: number | string;
+    copyRightText?: string;
+    footerLinks?: FooterLinkItem[];
+}
+
+export default FooterBottomLeftProps;

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

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

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

@@ -0,0 +1,47 @@
+import FooterBottomRightProps from "./FooterBottomRightProps";
+import styles from "./footer.module.scss";
+import FacebookLogo from "../../Icons/Brands/FacebookLogo/FacebookLogo";
+import InstagramLogo from "../../Icons/Brands/InstagramLogo/InstagramLogo";
+import LinkedinLogo from "../../Icons/Brands/LinkedinLogo/LinkedinLogo";
+
+
+const FooterBottomRight = (props: FooterBottomRightProps) => {
+    const {
+        facebookLink,
+        instagramLink,
+        linkedinLink,
+    } = props
+
+    return (
+        <div className={styles.footerBottomRight}>
+            <div className={styles.footerBottomRightWrapper}>
+                <div className={styles.footerLogoWrapper}>
+                    {facebookLink && <div className={styles.footerLogo}>
+                        <a target={'_blank'} href={facebookLink}>
+                            <FacebookLogo type="regular"/>
+                        </a>
+                    </div>}
+                </div>
+
+                <div className={styles.footerLogoWrapper}>
+                    {instagramLink && <div className={styles.footerLogo}>
+                        <a target={'_blank'} href={instagramLink}>
+                            <InstagramLogo type="regular"/>
+                        </a>
+                    </div>}
+                </div>
+
+
+                <div className={styles.footerLogoWrapper}>
+                    {linkedinLink && <div className={styles.footerLogo}>
+                        <a target={'_blank'} href={linkedinLink}>
+                            <LinkedinLogo type="regular"/>
+                        </a>
+                    </div>}
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default FooterBottomRight;

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

@@ -0,0 +1,7 @@
+interface FooterBottomRightProps {
+    facebookLink?: string;
+    instagramLink?: string;
+    linkedinLink?: string;
+}
+
+export default FooterBottomRightProps;

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

@@ -0,0 +1,17 @@
+import FooterMiddleItemProps from "./FooterItemProps";
+import styles from "./footer.module.scss"
+
+const FooterMiddleItem = (props: FooterMiddleItemProps) => {
+    const {title, children} = props
+
+    return (
+        <div className={styles.footerItem}>
+            <h3>{title}</h3>
+            <ul>
+                {children}
+            </ul>
+        </div>
+    )
+}
+
+export default FooterMiddleItem

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

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

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

@@ -0,0 +1,14 @@
+import FooterMiddleProps from "./FooterMiddleProps"
+import styles from "./footer.module.scss"
+
+const FooterMiddle = (props: FooterMiddleProps) => {
+    const { children } = props
+
+    return <>
+        <div className={styles.footerMiddleLinks}>
+            {children}
+        </div>
+    </>
+}
+
+export default FooterMiddle;

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

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

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

@@ -0,0 +1,11 @@
+import { ReactNode } from "react";
+
+interface FooterProps {
+    footerTop?: ReactNode
+    footerMiddle?: ReactNode
+    footerBottom?: ReactNode
+    extraClass?: string
+    logo?: string
+}
+
+export default FooterProps;

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

@@ -0,0 +1,30 @@
+import Container from "../../Shared/Container/Container";
+import FooterTopProps from "./FooterTopProps";
+import FooterBgDesign from "./footer-bg-design";
+import styles from './footer.module.scss'
+
+const FooterTop = (props: FooterTopProps) => {
+    const { title, subtitle, children } = props
+
+    return (
+        <div className={styles.footerTop}>
+            <Container>
+                <div className={styles.footerTopWrapper}>
+                    <div className={styles.footerTopLeft}>
+                        <h1>{title}</h1>
+                        <h2>{subtitle}</h2>
+                    </div>
+
+                    <div className={styles.footerTopRight}>
+                        {children}
+                    </div>
+                </div>
+                <div className={styles.footerBgDesignContainer}>
+                            <FooterBgDesign/>
+                        </div>
+            </Container>
+        </div>
+    )
+}
+
+export default FooterTop

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

@@ -0,0 +1,9 @@
+import { ReactNode } from "react";
+
+interface FooterTopProps {
+    title?: string;
+    subtitle?: string;
+    children?: ReactNode;
+}
+
+export default FooterTopProps;

package/src/Components/Layout/Footer/footer-bg-design.tsx

@@ -0,0 +1,21 @@
+const FooterBgDesign = () => {
+    return (
+        <svg width="524" height="240" viewBox="0 0 524 240" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <g opacity="0.2">
+                <path opacity="0.5" d="M0 80C48.1937 80 87.2727 115.822 87.2727 160H0V80Z" fill="#EFEAE7" />
+                <path opacity="0.25" d="M174.546 80C126.352 80 87.2729 115.822 87.2729 160H174.546V80Z" fill="#EFEAE7" />
+                <path opacity="0.5" d="M523.636 160C475.443 160 436.364 124.178 436.364 80H523.636V160Z" fill="#EFEAE7" />
+                <path opacity="0.75" d="M87.2729 160C135.467 160 174.546 195.822 174.546 240H87.2729V160Z" fill="#EFEAE7" />
+                <path opacity="0.5" d="M174.545 240C222.739 240 261.818 204.178 261.818 160H174.545V240Z" fill="#EFEAE7" />
+                <path opacity="0.25" d="M349.091 240C300.897 240 261.818 204.178 261.818 160H349.091V240Z" fill="#EFEAE7" />
+                <path opacity="0.75" d="M436.364 160C388.17 160 349.091 195.822 349.091 240H436.364V160Z" fill="#EFEAE7" />
+                <path opacity="0.25" d="M349.091 0C397.285 0 436.364 35.8225 436.364 80H349.091V0Z" fill="#EFEAE7" />
+                <path opacity="0.5" d="M261.818 160C310.012 160 349.091 124.178 349.091 80H261.818V160Z" fill="#EFEAE7" />
+                <path opacity="0.75" d="M174.545 80C222.739 80 261.818 44.1775 261.818 0H174.545V80Z" fill="#EFEAE7" />
+            </g>
+        </svg>
+    )
+}
+
+export default FooterBgDesign;
+