@hellobetterdigitalnz/selwynui 0.0.1-37 → 0.0.1-39

package/src/Components/DataDisplay/ChatItenaryBlock/ChatItenaryBlock.tsx

@@ -63,10 +63,11 @@ const ChatItineraryBlock = (props: ChatItineraryBlockProps) => {
         </Header>
 
         <div className={`${styles.chatItineraryBlock} ${styles.hero} ${pillar}`}>
-          <div className={styles.heroBackground}>
+          <div style={{backgroundImage: `url('https://images.pexels.com/photos/1563356/pexels-photo-1563356.jpeg')`}} className={styles.heroBackground}></div>
+          <Container>
             <div className={styles.heroContent}>
               <h1 className={styles.titleHeader}>
-                Kia ora, I'm your AI<br />
+                Kia ora, I’m your AI<br />
                 <span className={styles.highlight}>Selwyn trip planner.</span>
               </h1>
               <p className={styles.subtitle}>
@@ -88,23 +89,23 @@ const ChatItineraryBlock = (props: ChatItineraryBlockProps) => {
                     </button>
                     <div className={styles.planButton}>
                       <div className={styles.planButtonDesktop}>
-                      <Button
-                        label={isLoading ? 'PLANNING...' : 'PLAN MY TRIP'}
-                        secondaryIcon={<PaperPlaneTilt type={'fill'}/>}
-                        onClick={handlePlanTrip}
-                        type={'button'}
-                        size={'default'}
-                      />
+                        <Button
+                          label={isLoading ? 'PLANNING...' : 'PLAN MY TRIP'}
+                          secondaryIcon={<PaperPlaneTilt type={'fill'}/>}
+                          onClick={handlePlanTrip}
+                          type={'button'}
+                          size={'default'}
+                        />
                       </div>
-                        <button className={styles.planButtonMobile} aria-label="Plan Trip" disabled={isLoading} onClick={handlePlanTrip}>
-                          <PaperPlaneTilt type={'fill'}/>
-                        </button>
+                      <button className={styles.planButtonMobile} aria-label="Plan Trip" disabled={isLoading} onClick={handlePlanTrip}>
+                        <PaperPlaneTilt type={'fill'}/>
+                      </button>
                     </div>
                   </div>
                 </div>
               </div>
             </div>
-          </div>
+          </Container>
         </div>
         <div className={styles.heroSvg}>
           <LargeHeroIcon/>
@@ -148,6 +149,23 @@ const ChatItineraryBlock = (props: ChatItineraryBlockProps) => {
               <div key={index} className={styles.daySection}>
                 <div className={styles.dayHeader}>
                   <h3>{day.title}</h3>
+                  {/*<div className={styles.navigationButtons}>*/}
+                  {/*  <button className={styles.navButtonLeft} aria-label="Previous">*/}
+                  {/*    <CaretLeft type={'light'}/>*/}
+                  {/*  </button>*/}
+                  {/*  <button className={styles.navButtonRight} aria-label="Next">*/}
+                  {/*    <CaretRight type={'light'}/>*/}
+                  {/*  </button>*/}
+                  {/*</div>*/}
+                </div>
+
+
+
+                <div className={styles.headerWithArrows}>
+                  <div className={styles.arrowHeaderContent}>
+                    <h4 className={styles.daySubtitle}>{day.subtitle}</h4>
+                    <p className={styles.dayDescription}>{day.description}</p>
+                  </div>
                   <div className={styles.navigationButtons}>
                     <button className={styles.navButtonLeft} aria-label="Previous">
                       <CaretLeft type={'light'}/>
@@ -158,15 +176,16 @@ const ChatItineraryBlock = (props: ChatItineraryBlockProps) => {
                   </div>
                 </div>
 
-                <h4 className={styles.daySubtitle}>{day.subtitle}</h4>
-                <p className={styles.dayDescription}>{day.description}</p>
-
                 <PathwayBlock
                   pillar={pillar}
                   cards={day.activities.map((activity) => ({
                     date: activity.date || "",
-                    description: activity.title,
-                    image: activity.image
+                    title: activity.title,
+                    description: activity.description,
+                    image: activity.image,
+                    link: activity.link,
+                    category: activity.category,
+                    variation: 'short',
                   }))}
                 />
               </div>
@@ -191,7 +210,7 @@ const ChatItineraryBlock = (props: ChatItineraryBlockProps) => {
             {itinerary?.tags && itinerary.tags.length > 0 && (
               <div className={styles.tags}>
                 {itinerary.tags.map((tag, index) => (
-                  <Button key={index} label={tag} size={'small'} level={'primary'} style={'hollow'}/>
+                  <Button key={index} label={tag} size={'default'} level={'primary'} style={'hollow'}/>
                 ))}
               </div>
             )}
@@ -209,7 +228,7 @@ const ChatItineraryBlock = (props: ChatItineraryBlockProps) => {
             {/*  </div>*/}
             {/*</div>*/}
 
-            <div className={styles.inputBox}>
+            <div className={styles.fixedInputBox}>
                   <textarea
                     value={userInput}
                     onChange={(e) => setUserInput(e.target.value)}

package/src/Components/DataDisplay/ChatItenaryBlock/ChatItenaryBlockProps.tsx

@@ -3,7 +3,14 @@
 export interface Activity {
   image: string;
   title: string;
-  link: string;
+  description: string;
+  link: {
+    title?: string | undefined;
+    href?: string | undefined;
+    target?: "_blank" | "_self" | "_parent" | "_top" | undefined;
+    rel?: string | undefined;
+  };
+  category: 'all' | 'adventure' | 'ski' | 'nature';
   date?: string;
 }
 

package/src/Components/DataDisplay/ChatItenaryBlock/chatItenaryBlock.module.scss

@@ -1,7 +1,8 @@
 .mainContainer {
   position: relative;
-  z-index: 10;
+  z-index: 1;
   width: 100%;
+  min-height: 100vh;
 }
 
 .chatItineraryBlock {
@@ -10,10 +11,16 @@
   &.hero {
     display: flex;
     flex-direction: column;
+    position: relative;
+    min-height: calc(100vh - 98px);
+
+    @media (max-width: 834px) {
+      min-height: calc(100vh - 60px);
+    }
   }
 
   &.itinerary {
-    padding: 48px 0 96px;
+    padding: 48px 0 76px;
     border-top: 1px solid var(--color-taste);
 
     @media (max-width: 834px) {
@@ -23,11 +30,7 @@
 }
 
 .heroBackground {
-  min-height: calc(100vh - 100px);
-  position: relative;
-  border-top: 1px solid var(--color-taste);
-  display: flex;
-  overflow: hidden;
+  height: 100%;
 
   &::after {
     content: '';
@@ -35,11 +38,11 @@
     right: 0;
     top: 0;
     bottom: 0;
-    width: 67%;
-    background-image: url('https://images.pexels.com/photos/1365425/pexels-photo-1365425.jpeg');
-    border-radius: 10000px 0 0 0;
-    background-size: cover;
+    width: 61%;
+    border-radius: 850px 0 0 0;
+    background-image: inherit;
     background-position: center;
+    background-repeat: no-repeat;
     z-index: 0;
 
     @media (max-width: 1024px) {
@@ -49,23 +52,22 @@
 
   @media (max-width: 834px) {
     min-height: calc(100vh - 80px);
+    display: none;
   }
 }
 
 .heroContent {
   position: relative;
-  padding-top: 96px;
+  padding-top: 84px;
   z-index: 2;
-  width: 46%;
-  min-width: 662px;
+  width: 50%;
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
-  padding-left: 120px;
   padding-right: 24px;
 
   .titleHeader {
-    padding-bottom: 72px;
+    padding-bottom: 59px;
     letter-spacing: -2.88px;
 
     @media (max-width: 834px) {
@@ -77,6 +79,7 @@
     font-size: var(--font-size-h3);
     font-weight: var(--font-weight-body-regular);
     line-height: 1;
+    color: var(--color-taste);
 
     @media (max-width: 834px) {
       font-size: var(--font-size-h4);
@@ -89,12 +92,17 @@
 
   .highlight {
     font-weight: var(--font-weight-h5);
+    letter-spacing: -3.6px;
+    line-height: 1;
+    color: var(--color-taste);
   }
 
   .subtitle {
-    font-size: var(--font-size-h6);
+    font-size: 28px;
     line-height: var(--line-height-h6);
-    margin: 0 0 72px 0;
+    margin: 0 0 70px 0;
+    letter-spacing: -0.56px;
+    color: var(--color-taste);
 
     @media (max-width: 834px) {
       font-size: var(--font-size-body-regular);
@@ -133,6 +141,7 @@
   padding: 24px 24px 24px 24px;
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
   width: 100%;
+  max-width: 669px;
   min-height: 200px;
   display: flex;
   flex-direction: column;
@@ -140,6 +149,7 @@
   @media (max-width: 834px) {
     padding: 16px;
     min-height: 180px;
+    width: 100%;
   }
 
   textarea {
@@ -288,19 +298,19 @@
 
 .itineraryWrapper {
   background: var(--color-sand);
-  border-radius: 16px;
-  padding: 40px;
+  border-radius: 16px 0;
+  padding: 65px 32px 0 32px;
   position: relative;
   animation: fadeIn 0.5s ease;
   width: 100%;
   overflow-y: auto;
   overflow-x: hidden;
-  max-height: calc(100vh - 380px);
+  max-height: calc(100vh - 400px);
 
   @media (max-width: 834px) {
     padding: 24px 16px;
-    border-radius: 8px;
-    max-height: calc(100vh - 320px);
+    border-radius: 8px 0;
+    max-height: calc(100vh - 360px);
   }
 
   // Optional: Style the scrollbar
@@ -369,7 +379,7 @@
   line-height: var(--line-height-h3);
   letter-spacing: -1.92px;
   color: var(--header-bg);
-  margin: 0 0 72px 0;
+  margin: 0 0 62px 0;
 
   @media (max-width: 834px) {
     font-size: var(--font-size-h5);
@@ -390,8 +400,6 @@
   line-height: var(--line-height-body-regular);
   font-weight: var(--font-weight-h4);
   color: var(--header-bg);
-  margin: 0 0 20px 0;
-  padding: 16px;
   background: var(--color-sand);
   border-radius: 24px;
 
@@ -402,7 +410,8 @@
 }
 
 .userMessage {
-  margin: 20px 0;
+  padding-top: 42px;
+  padding-bottom: 42px;
   display: flex;
   justify-content: flex-end;
 
@@ -430,8 +439,7 @@
 }
 
 .daySection {
-  margin: 40px 0;
-  padding: 48px 0;
+  padding: 62px 0;
 
   @media (max-width: 834px) {
     margin: 24px 0;
@@ -440,10 +448,6 @@
 }
 
 .dayHeader {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 16px;
 
   h3 {
     font-size: var(--font-size-h5);
@@ -458,9 +462,20 @@
   }
 }
 
+.headerWithArrows {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+  margin-bottom: 48px;
+
+  .arrowHeaderContent{
+    gap: 24px;
+  }
+}
+
 .navigationButtons {
   display: flex;
-  gap: 8px;
+  gap: 24px;
 
   @media (max-width: 834px) {
     display: none;
@@ -468,8 +483,8 @@
 }
 
 .navButtonRight {
-  width: 40px;
-  height: 40px;
+  width: 48px;
+  height: 48px;
   border-radius: 50%;
   background: var(--color-bg);
   border: none;
@@ -486,8 +501,8 @@
 }
 
 .navButtonLeft {
-  width: 40px;
-  height: 40px;
+  width: 48px;
+  height: 48px;
   border-radius: 50%;
   background: none;
   border: 1px solid var(--color-bg);
@@ -508,7 +523,8 @@
   font-weight: var(--font-weight-h4);
   line-height: var(--line-height-h6);
   letter-spacing: -0.56px;
-  margin: 0 0 12px 0;
+  margin-top: 22px;
+  margin-bottom: 14px;
 
   @media (max-width: 834px) {
     font-size: var(--font-size-h7);
@@ -519,7 +535,6 @@
   font-size: var(--font-size-body-regular);
   line-height: var(--line-height-body-regular);
   font-weight: var(--font-weight-h4);
-  margin: 0 0 48px 0;
 
   @media (max-width: 834px) {
     font-size: var(--font-size-body-sm);
@@ -653,7 +668,7 @@
     line-height: var(--line-height-h6);
     letter-spacing: -0.56px;
     color: var(--color-bg);
-    margin-top: 48px;
+    margin-top: 40px;
 
     @media (max-width: 834px) {
       font-size: var(--font-size-h7);
@@ -717,4 +732,46 @@
       display: flex;
     }
   }
+}
+
+.fixedInputBox {
+  background: var(--bg-modal-color);
+  border-radius: var(--tw-8, 32px);
+  border: 2px solid var(--color-taste);
+  padding: 24px 24px 24px 24px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
+  width: 100%;
+  height: 162px;
+  display: flex;
+  flex-direction: column;
+
+  @media (max-width: 834px) {
+    padding: 16px;
+    min-height: 180px;
+    width: 100%;
+  }
+
+  textarea {
+    width: 100%;
+    flex: 1;
+    border: none;
+    outline: none;
+    font-size: 18px;
+    resize: none;
+    font-family: inherit;
+    color: var(--header-bg);
+    margin-bottom: 16px;
+
+    @media (max-width: 834px) {
+      font-size: 16px;
+    }
+
+    &::placeholder {
+      color: var(--header-bg);
+
+      @media (max-width: 834px) {
+        font-size: var(--font-size-body-sm);
+      }
+    }
+  }
 }

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

@@ -43,7 +43,6 @@ const ImageContent = (props:  ImageContentProps) => {
         <div className={styles.imageContentWrapper}>
           <div className={styles.content}>
             <div className={styles.contentWrapper}>
-              {pillarLogo}
               <div className={styles.title}>
                 <h3>
                   {title}

package/src/Components/DataDisplay/KPIBlock/kpiBlock.module.scss

@@ -1,27 +1,55 @@
 .kpi {
-
   .kpiWrapper {
     display: flex;
     flex-direction: inherit;
     align-items: start;
 
+    @media (max-width: 900px) {
+      flex-direction: column;
+    }
 
     .header {
       flex: 0 0 40%;
       margin-right: 90px;
 
+      @media (max-width: 1200px) {
+        margin-right: 60px;
+      }
+
+      @media (max-width: 900px) {
+        flex: 1;
+        width: 100%;
+        margin-right: 0;
+        margin-bottom: 16px;
+      }
+
       h2 {
         font-size: var(--font-size-h4);
         font-weight: var(--font-weight-h5);
         letter-spacing: -1.92px;
         line-height: 1;
-        margin-bottom: 72px;
+        margin-bottom: 48px;
+
+        @media (max-width: 900px) {
+          font-size: var(--font-size-h5);
+          margin-bottom: 40px;
+        }
+
+        @media (max-width: 480px) {
+          font-size: var(--font-size-h6);
+          margin-bottom: 22px;
+          letter-spacing: -1.2px;
+        }
       }
 
       p {
         font-size: var(--font-size-body-regular);
         line-height: var(--line-height-body-regular);
         font-weight: var(--font-weight-body-sm);
+
+        @media (max-width: 900px) {
+          font-size: var(--font-size-body-sm);
+        }
       }
     }
 
@@ -29,13 +57,32 @@
       width: 60%;
       display: flex;
       flex-direction: column;
-      gap:48px;
+      gap: 48px;
+
+      @media (max-width: 900px) {
+        width: 100%;
+        gap: 32px;
+      }
+
+      @media (max-width: 480px) {
+        gap: 24px;
+      }
 
       .statItem {
         display: flex;
         padding-bottom: 48px;
-        border-bottom: 1px solid ;
+        border-bottom: 1px solid;
+
+        @media (max-width: 900px) {
+          padding-bottom: 32px;
+          flex-direction: column;
+          gap: 16px;
+        }
 
+        @media (max-width: 480px) {
+          padding-bottom: 24px;
+          gap: 12px;
+        }
 
         &:last-child {
           border-bottom: none;
@@ -49,6 +96,23 @@
           font-weight: var(--font-weight-h5);
           letter-spacing: -3.6px;
           min-width: 230px;
+
+          @media (max-width: 1200px) {
+            flex: 0 0 180px;
+            min-width: 180px;
+          }
+
+          @media (max-width: 900px) {
+            flex: 1;
+            min-width: 0;
+            font-size: var(--font-size-h4);
+            letter-spacing: -2.4px;
+          }
+
+          @media (max-width: 480px) {
+            font-size: var(--font-size-h5);
+            letter-spacing: -1.8px;
+          }
         }
 
         .description {
@@ -59,21 +123,46 @@
           display: flex;
           align-items: center;
           padding-left: 24px;
+
+          @media (max-width: 900px) {
+            padding-left: 0;
+            font-size: var(--font-size-body-sm);
+            align-items: flex-start;
+          }
         }
       }
     }
   }
 }
 
-.pillarIcon{
+.pillarIcon {
   position: absolute;
-  //top: 0;
   right: 0;
   bottom: 0;
   pointer-events: none;
+  z-index: 1;
 
-  svg{
+  @media (max-width: 1200px) {
+    right: -100px;
+    display: none;
+  }
+
+  @media (max-width: 900px) {
+    display: none;
+  }
+
+  svg {
     height: 577px;
     width: 639px;
+
+    @media (max-width: 1400px) {
+      height: 450px;
+      width: 500px;
+    }
+
+    @media (max-width: 1200px) {
+      height: 350px;
+      width: 400px;
+    }
   }
 }

package/src/Components/DataDisplay/ListingDetailBlock/ListingDetailBlock.tsx

@@ -3,6 +3,7 @@ import styles from "./ListingDetailBlock.module.scss";
 import {CheckCircle, Clock, DeviceMobile, MapPin, Mountains, Path} from "../../Icons";
 import {Button} from "../../Form";
 import ArrowRight from "../../Icons/Arrows/ArrowRight/ArrowRight.tsx";
+import Container from "../../Shared/Container/Container.tsx";
 
 const ListingDetailBlock = ({
     title,
@@ -16,6 +17,7 @@ const ListingDetailBlock = ({
     websiteUrl,
   }: ListingDetailBlockProps) => {
   return (
+    <Container>
     <div className={styles.listingDetail}>
       {/* Main Content - Left */}
       <div className={styles.mainContent}>
@@ -37,7 +39,7 @@ const ListingDetailBlock = ({
         {distance && (
           <div className={styles.infoItem}>
             <Path type={'fill'}/>
-            <div>
+            <div className={styles.sidebarItems}>
               <div className={styles.infoLabel}>Distance from Christchurch Airport</div>
               <div className={styles.infoValue}>{distance}</div>
             </div>
@@ -79,7 +81,7 @@ const ListingDetailBlock = ({
             <DeviceMobile type={'fill'}/>
             <div>
               <div className={styles.infoLabel}>Phone</div>
-              <div className={styles.infoValue}>{phone}</div>
+              <div className={styles.infoValuePhone}>{phone}</div>
             </div>
           </div>
         )}
@@ -92,6 +94,7 @@ const ListingDetailBlock = ({
         )}
       </div>
     </div>
+    </Container>
   );
 };