@hellobetterdigitalnz/selwynui 0.0.1

package/public/img/visit-brand-piller.svg

@@ -0,0 +1,6 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.5387 0C6.95564 0 0 6.96447 0 15.5584H15.5387V0Z" fill="#23461F"/>
+<path d="M15.5387 16.4365C6.95564 16.4365 8.59502e-08 23.401 8.59502e-08 31.9949H15.5387V16.4365Z" fill="#23461F"/>
+<path d="M16.4613 0.00508195C25.0444 0.00508195 32 6.96955 32 15.5635H16.4613V0.00508195Z" fill="#23461F"/>
+<path d="M16.4613 16.4416C25.0444 16.4416 32 23.4061 32 32H16.4613V16.4416Z" fill="#23461F"/>
+</svg>

package/public/img/waikirikiri-full-logo.svg

@@ -0,0 +1,23 @@
+<svg width="155" height="49" viewBox="0 0 155 49" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M63.5671 3.5574L59.2831 19.2477H56.7169L51.4008 0.573097H53.8115L58.152 16.4451H58.2086L62.4713 0.573097H64.882L69.166 16.4451H69.2225L73.5348 0.573097H75.8111L70.495 19.2477H67.9006L63.6448 3.5574H63.5671Z" fill="#92C134"/>
+<path d="M84.1458 17.0252C83.5661 18.5698 81.7352 19.5342 79.5154 19.5342C77.2956 19.5342 75.2031 18.1993 75.2031 15.7672C75.2031 13.335 77.1048 12.1329 79.8053 11.8184L84.0892 11.2663V10.5045C84.0892 8.41475 82.7956 7.52016 80.9646 7.52016C79.1337 7.52016 78.0803 8.43572 77.9248 9.95233H75.8111C76.0727 7.28253 78.1934 5.76592 81.0212 5.76592C84.2518 5.76592 86.2595 7.28253 86.2595 10.4485V16.487C86.2595 17.4515 86.3161 18.3671 86.5776 19.2337H84.3791C84.2165 18.4999 84.1387 17.6402 84.1387 17.0112L84.1458 17.0252ZM84.0963 12.8947L80.4698 13.2861C78.8014 13.5237 77.43 13.943 77.43 15.7183C77.43 16.9483 78.3066 17.8918 79.9678 17.8918C82.0321 17.8918 84.0963 16.6128 84.0963 14.0758V12.8947Z" fill="#92C134"/>
+<path d="M88.4298 0.705889H90.9182V3.34773H88.4298V0.705889ZM88.5924 6.0944H90.7909V19.2477H88.5924V6.0944Z" fill="#92C134"/>
+<path d="M97.1603 13.0485L95.4425 14.6979V19.2477H93.244V0H95.4425V12.3985L102.003 6.0944H104.618L98.7439 11.6646L104.852 19.2477H102.208L97.1533 13.0485H97.1603Z" fill="#92C134"/>
+<path d="M106.654 0.705889H109.143V3.34773H106.654V0.705889ZM106.817 6.0944H109.016V19.2477H106.817V6.0944Z" fill="#92C134"/>
+<path d="M118.849 7.89756C118.531 7.82069 118.057 7.79273 117.711 7.79273C115.597 7.79273 113.66 9.44213 113.66 12.7619V19.2477H111.462V6.09441H113.575V9.20451C114.155 7.03093 115.852 5.80786 117.81 5.80786C118.156 5.80786 118.524 5.83581 118.842 5.91269V7.89756H118.849Z" fill="#92C134"/>
+<path d="M120.305 0.705889H122.794V3.34773H120.305V0.705889ZM120.461 6.0944H122.659V19.2477H120.461V6.0944Z" fill="#92C134"/>
+<path d="M129.036 13.0485L127.318 14.6979V19.2477H125.119V0H127.318V12.3985L133.878 6.0944H136.494L130.619 11.6646L136.727 19.2477H134.083L129.029 13.0485H129.036Z" fill="#92C134"/>
+<path d="M138.53 0.705889H141.018V3.34773H138.53V0.705889ZM138.685 6.0944H140.884V19.2477H138.685V6.0944Z" fill="#92C134"/>
+<path d="M150.724 7.89756C150.406 7.82069 149.933 7.79273 149.586 7.79273C147.472 7.79273 145.536 9.44213 145.536 12.7619V19.2477H143.337V6.09441H145.451V9.20451C146.03 7.03093 147.727 5.80786 149.685 5.80786C150.032 5.80786 150.399 5.83581 150.717 5.91269V7.89756H150.724Z" fill="#92C134"/>
+<path d="M151.643 0.705889H154.132V3.34773H151.643V0.705889ZM151.806 6.0944H154.005V19.2477H151.806V6.0944Z" fill="#92C134"/>
+<path d="M55.7626 38.104C55.9747 40.2496 57.9329 40.9276 59.9193 40.9276C61.7715 40.9276 63.3338 40.1937 63.3338 38.6491C63.3338 37.475 62.5632 36.9229 60.5061 36.5804L57.1694 35.9793C54.2073 35.4552 51.931 34.0154 51.931 30.6957C51.931 27.1662 55.1617 24.8668 59.474 24.8668C64.3447 24.8668 67.1159 26.9845 67.4905 30.5978H63.1783C63.0157 28.9764 61.5877 28.1097 59.5305 28.1097C57.6501 28.1097 56.4059 29.0253 56.4059 30.3602C56.4059 31.6951 57.332 32.0096 59.1276 32.3451L62.7258 33.023C66.006 33.5961 67.8299 35.2735 67.8299 38.3346C67.8299 41.941 64.4437 44.1635 60.0819 44.1635C55.2395 44.1635 51.7472 42.1996 51.3513 38.097H55.7697L55.7626 38.104Z" fill="#92C134"/>
+<path d="M75.6556 44.1774C71.6049 44.1774 68.4873 41.5636 68.4873 37.1675C68.4873 32.7714 71.6119 30.1575 75.6061 30.1575C80.0527 30.1575 82.2442 33.3235 82.2442 36.9578V38.132H72.7501C72.9905 39.991 73.9165 41.0883 75.6626 41.0883C76.9351 41.0883 77.7764 40.5152 78.1228 39.4948H82.1947C81.615 42.3952 79.1549 44.1774 75.6626 44.1774H75.6556ZM72.8279 35.8046H78.144C78.144 34.4418 77.2956 33.2187 75.6061 33.2187C74.072 33.2187 73.146 34.1622 72.8279 35.8046Z" fill="#92C134"/>
+<path d="M83.8277 43.8629V24.6152H88.246V43.8629H83.8277Z" fill="#92C134"/>
+<path d="M104.484 39.4669L106.866 30.472H111.15L106.944 43.8629H102.498L100.221 35.1826H100.165L97.8602 43.8629H93.4136L89.2074 30.472H93.5974L95.9798 39.4669H96.0575L98.2278 30.472H102.194L104.413 39.4669H104.484Z" fill="#92C134"/>
+<path d="M116.686 30.472L119.966 39.8373H120.015L123.161 30.472H127.502L122.369 43.9398C121.019 47.4413 119.061 48.7273 115.859 48.7273C115.328 48.7273 114.614 48.6993 114.035 48.5945V45.4005C114.402 45.4564 114.565 45.4564 114.827 45.4564C116.226 45.4564 116.834 45.2188 117.393 43.7301L112.232 30.472H116.686Z" fill="#92C134"/>
+<path d="M132.839 32.5338C133.504 31.1709 134.981 30.1505 137.017 30.1505C140.142 30.1505 142.043 32.0306 142.043 35.2735V43.849H137.597V36.3148C137.597 34.4557 136.854 33.5192 135.349 33.5192C133.97 33.5192 132.889 34.4068 132.889 36.6852V43.849H128.47V30.458H132.832V32.5268L132.839 32.5338Z" fill="#92C134"/>
+<path d="M0 23.2733C11.9612 23.2733 21.6603 32.8622 21.6603 44.6876H0V23.2733Z" fill="#92C134"/>
+<path d="M0 0.649965C11.9612 0.649965 21.6603 10.2389 21.6603 22.0642H0V0.649965Z" fill="#92C134"/>
+<path d="M44.6072 44.6806C44.6072 32.8552 34.9082 23.2663 22.9469 23.2663V44.6806H44.6072Z" fill="#92C134"/>
+<path d="M44.6072 22.0573C44.6072 10.2319 34.9082 0.64297 22.9469 0.64297V22.0573H44.6072Z" fill="#92C134"/>
+</svg>

package/public/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/src/App.tsx

@@ -0,0 +1,8 @@
+
+
+function App() {
+
+  return <></>
+}
+
+export default App

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

@@ -0,0 +1,39 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import DetailsCard from './DetailsCard';
+import { FaArrowRight } from "react-icons/fa";
+
+const meta : Meta<typeof DetailsCard> = {
+    title: "Form / DetailsCard",
+    component: DetailsCard,
+
+}
+
+export default meta;
+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",
+        image:"./img/card-one.png",
+        link: '#',
+        variation: 'short'
+    },
+};
+
+export const Visit: Story = {
+    args: {
+        date: "6 Nov 2025",
+        title: "This is a card title that is quite long and probably wraps over a few lines",
+        image:"./img/card-two.png"
+    }
+}
+
+export const business: Story = {
+    args: {
+        date: "6 Nov 2025",
+        title: "This is a card title that is quite long and probably wraps over a few lines",
+        image:"./img/card-three.png",
+        link: '#'
+    }
+}

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

@@ -0,0 +1,87 @@
+import cx from "classnames";
+import DetailsCardProps from './DetailsCardProps';
+import styles from "./detailsCard.module.scss";
+import ArrowRight from "../../Icons/Arrows/ArrowRight/ArrowRight";
+
+const DetailsCard = (props: DetailsCardProps) => {
+    const {
+      title = '',
+      description = '',
+      date = '',
+      image = '',
+      variation= 'long',
+      link = '',
+      category = 'all'
+    } = props;
+
+    const classes = [
+        styles.detailsCard,
+        "detailsCard",  
+    ];
+    
+    if(variation==='short') {
+      classes.push(styles.detailsCardShort)
+    }
+
+
+    return <>
+      {link ? <div className={cx(classes)} id={category}>
+        <a href={link} className={`${styles.cardWrap} ${styles.detailsCardWithLink}`}>
+          {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}>
+                Learn more
+                <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>}
+      
+    </>
+}
+
+export default DetailsCard;

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

@@ -0,0 +1,12 @@
+
+interface DetailsCardProps {
+    title?:string,
+    description?:string,
+    date?: string,
+    link?:string,
+    image?:string,
+    variation?: "long" | "short";
+    category?: 'all' | 'adventure' | 'ski' | 'nature',
+}
+
+export default DetailsCardProps;

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

@@ -0,0 +1,123 @@
+.detailsCard {
+    min-height: 400px;
+    border-radius: 12px;
+    border:1px solid var(--pathway-card-border);
+    color: var(--pathway-card-text);
+    background-color: var(--pathway-card-bg);
+
+    &.detailsCardShort {
+        min-height: 274px;
+    }
+
+}
+
+.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 {
+    height: 200px;
+    img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        object-position: center;
+        border-radius: 12px 12px 0 0;
+    }
+
+    .detailsCardShort & {
+        height: 204px;
+    }
+}
+
+.cardContent {
+    padding: 24px;
+    flex: 1;
+}
+
+.cardDate {
+    margin-bottom: var(--spacing-1-1\/2);
+    p {
+        font-size: var(--font-size-body-sm);
+        line-height: var( --line-height-body-regular);
+        font-weight: var(--font-weight-bold);
+    }
+}
+
+.cardWrap {
+    min-height: 400px;
+    display: flex;
+    flex-direction: column;
+
+    .detailsCardShort & {
+        min-height: 274px;
+    }
+
+    &:hover {
+        border-radius: 12px;
+    }
+}
+
+.cardContent {
+    display: flex;
+    flex-direction: column;
+}
+
+.cardBody {
+    flex: 1;
+}
+
+.cardTitle {
+    h6 {
+        font-weight: var(--font-weight-body-regular);
+    }
+}
+
+.cardLink {
+    max-height: 18px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-size: var(--font-size-body-sm);
+    font-weight: var(--font-weight-bold);
+
+    span {
+        img {
+            width: 32px;
+            height: 32px;
+        }
+    }
+}
+
+@media (min-width:760px) {
+    .detailsCard {
+        min-height:590px;
+        
+        &.detailsCardShort {
+            min-height: 474px;
+        }
+    }
+
+    .cardImage {
+        height: 300px;
+
+        .detailsCardShort & {
+            height: 304px;
+        }
+    }
+
+    .cardWrap {
+        min-height: 590px;
+
+        .detailsCardShort & {
+            min-height: 474px;
+        }
+    }
+
+}

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

@@ -0,0 +1,150 @@
+// @ts-ignore
+import React from "react"
+import { Meta, StoryObj } from "@storybook/react-vite";
+import ImageContent from "./ImageContent";
+import ElementHolder from "../../Shared/ElementHolder/ElementHolder";
+
+
+const meta: Meta = {
+  title: "Layout / ImageContent",
+  component: ImageContent,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  tags: ["autodocs"]
+}
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const ImageContentTemplate: Story = {
+  render: () => {
+
+    return (
+      <>
+       <ElementHolder
+         paddingTop={'md'}
+         paddingBottom={'md'}
+         pillar={'live'}
+         level={'light'}
+       >
+         <ImageContent/>
+       </ElementHolder>
+      </>
+    )
+  }
+}
+
+
+const ImageContentMaskedTemplate: Story = {
+  render: () => {
+
+    return (
+      <>
+        <ElementHolder
+          paddingTop={'md'}
+          paddingBottom={'md'}
+          pillar={'live'}
+          level={'primary'}
+        >
+          <ImageContent
+            rendition={'masked'}
+            pillar={'live'}
+            images={{
+              setOfFour: [
+                'https://images.pexels.com/photos/1563356/pexels-photo-1563356.jpeg',
+                'https://images.pexels.com/photos/2176593/pexels-photo-2176593.jpeg',
+                'https://images.pexels.com/photos/1563356/pexels-photo-1563356.jpeg',
+                'https://images.pexels.com/photos/1563356/pexels-photo-1563356.jpeg',
+              ],
+            }}
+          />
+        </ElementHolder>
+      </>
+    )
+  }
+}
+
+const ImageContentFullTemplate: Story = {
+  render: () => {
+
+    return (
+      <>
+        <ElementHolder
+          paddingTop={'none'}
+          paddingBottom={'none'}
+          pillar={'live'}
+          level={'primary'}
+        >
+          <ImageContent
+            rendition={'full'}
+            pillar={'live'}
+            images={{
+              single: [
+                'https://images.pexels.com/photos/1563356/pexels-photo-1563356.jpeg',
+              ],
+            }}
+            list={[
+              {
+                id:'1',
+                label:'What are you doing'
+              },
+              {
+                id:'2',
+                label:'What are you doing'
+              },
+              {
+                id:'3',
+                label:'What are you doing'
+              }
+            ]}
+            imageBorder={'top'}
+          />
+        </ElementHolder>
+        <ElementHolder
+          paddingTop={'none'}
+          paddingBottom={'none'}
+          pillar={'live'}
+          level={'primary'}
+        >
+          <ImageContent
+            rendition={'full'}
+            pillar={'live'}
+            images={{
+              single: [
+                'https://images.pexels.com/photos/1563356/pexels-photo-1563356.jpeg',
+              ],
+            }}
+            list={[
+              {
+                id:'1',
+                label:'What are you doing'
+              },
+              {
+                id:'2',
+                label:'What are you doing'
+              },
+              {
+                id:'3',
+                label:'What are you doing'
+              }
+            ]}
+          />
+        </ElementHolder>
+      </>
+    )
+  }
+}
+
+export const ImageContentComponent = {
+  ...ImageContentTemplate
+};
+
+export const ImageContentMaskedComponent = {
+  ...ImageContentMaskedTemplate
+}
+
+export const ImageContentFullTemplateComponent ={
+  ...ImageContentFullTemplate
+}

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

@@ -0,0 +1,118 @@
+import styles from './imageContent.module.scss'
+import Container from "../../Shared/Container/Container.tsx";
+import ImageContentProps from "./ImageContentProps.tsx";
+import ImageContentMaskingImages from "./ImageContentMaskingImages.tsx";
+import {CaretCircleRight} from "../../Icons";
+const ImageContent = (props:  ImageContentProps) => {
+
+  const { rendition = 'contained',  alignment = 'right', images, list, imageBorder = 'bottom'} = props
+
+
+  if (rendition === 'full'){
+    return <div className={`${styles.imageContent} ${styles.imageContentFull} ${styles[alignment]} ${styles[imageBorder]} `}>
+      <Container>
+        <div className={styles.imageContentWrapper}>
+          <div className={styles.imageWrapper}>
+            <div className={styles.imageHolder}>
+              <img src={'https://images.pexels.com/photos/1563356/pexels-photo-1563356.jpeg'}/>
+            </div>
+          </div>
+          <div className={styles.content}>
+            <div className={styles.contentWrapper}>
+              <div className={styles.title}>
+                <h3>
+                  Acquire
+                  <br/>
+                  <span>funding</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>
+              {list && <ul className={styles.list}>
+                {list.map((i) => (
+                  <li key={i.id}>
+                    <div className={styles.listWrapper}>
+                      <CaretCircleRight type={'regular'}/>
+                      {i.label}
+                    </div>
+                  </li>
+                ))}
+              </ul>}
+              <div className={styles.action}>
+                <button>LOREM IPSUM</button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </Container>
+    </div>
+  }
+
+  if (rendition === 'masked'){
+    return (
+      <div className={`${styles.imageContent} ${styles.maskedImageContent} ${styles[alignment]}`}>
+        <Container>
+          <div className={styles.imageContentWrapper}>
+
+            {/* IMAGE BLOCK */}
+            <div className={styles.imageWrapper}>
+              <ImageContentMaskingImages pillar={'taste'} single={images?.single} setOfFour={images?.setOfFour}/>
+            </div>
+
+            {/* CONTENT */}
+            <div className={styles.content}>
+              <div className={styles.contentWrapper}>
+
+                <div className={styles.title}>
+                  <h4>Porta mauris nibh nibh erat. Molestie adipiscing cursus quam egestas.</h4>
+                </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.
+                  </p>
+                </div>
+                <div className={styles.action}>
+                  <button>LOREM IPSUM</button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </Container>
+      </div>
+    );
+  }
+
+
+  return <div className={`${styles.imageContent} ${styles[alignment]}`}>
+    <Container>
+      <div className={styles.imageContentWrapper}>
+        <div className={styles.imageWrapper}>
+          <div className={styles.imageHolder}>
+            <img src={'https://images.pexels.com/photos/1563356/pexels-photo-1563356.jpeg'}/>
+          </div>
+        </div>
+        <div className={styles.content}>
+          <div className={styles.contentWrapper}>
+            <div className={styles.title}>
+              <h3>
+                Acquire
+                <br/>
+                <span>funding</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>
+            <div className={styles.action}>
+              <button>LOREM IPSUM</button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </Container>
+  </div>
+}
+
+export default ImageContent;