add to connect

Author: sshane

src/lib/components/Grid.svelte

@@ -24,7 +24,7 @@
     --align-items: {alignItems};
     --column-gap: {columnGap};
     --row-gap: {rowGap};
-    --wrapped-columns: {wrapMode === 'single' ? 1 : (wrapMode === 'half' ? Math.floor(columns / 2) : columns)};
+    --wrapped-columns: {wrapMode === 'single' ? 1 : (wrapMode === 'double' ? 2 : (wrapMode === 'half' ? Math.floor(columns / 2) : columns))};
     --template-columns: {templateColumns};
 
     --lg-column-gap: {lgColumnGap ?? columnGap};

src/lib/icons/features/commacare.svg

@@ -14,6 +14,7 @@
   import MarkerIcon from "$lib/icons/features/marker.png";
   import SnapshotIcon from "$lib/icons/features/snapshot.png";
   import CommandLineIcon from "$lib/icons/features/command-line.svg?raw";
+  import CommacareIcon from "$lib/icons/features/commacare.svg?raw";
   import CheckmarkIcon from "$lib/icons/ui/checkmark.svg?raw";
   import CloseIcon from "$lib/icons/ui/close.svg?raw";
 </script>
@@ -37,12 +38,13 @@
     </div>
 
     <div class="features-banner">
-      <Grid columns={5} columnGap="2rem" size="medium">
+      <Grid columns={6} wrapMode="double" columnGap="2rem" size="medium">
         <div class="icon">{@html RecordingsIcon}</div>
         <div class="icon"><img src={TwentyFourSevenIcon} loading="lazy" alt=""></div>
         <div class="icon"><img src={MarkerIcon} loading="lazy" alt=""></div>
         <div class="icon"><img src={SnapshotIcon} loading="lazy" alt=""></div>
         <div class="icon">{@html CommandLineIcon}</div>
+        <div class="icon">{@html CommacareIcon}</div>
       </Grid>
     </div>
 
@@ -142,6 +144,23 @@
           <div class="cross">{@html CloseIcon}</div>
         </div>
       </div>
+      <div class="row">
+        <div class="feature-overview">
+          <div class="icon">{@html CommacareIcon}</div>
+          <div>
+            <hgroup>
+              <div>commacare</div>
+              <span class="muted">Extend your comma four's standard one year warranty for an additional year. <a class="muted-link" href="#what-is-commacare">See Terms</a></span>
+            </hgroup>
+          </div>
+        </div>
+        <div class="content">
+          <div class="check">{@html CheckmarkIcon}</div>
+        </div>
+        <div class="content">
+          <div class="cross">{@html CloseIcon}</div>
+        </div>
+      </div>
     </div>
   </div>
 </section>