commacare

src/lib/components/Badge.svelte

@@ -4,6 +4,7 @@
 </script>
 
 <div
+  class="badge-container"
   class:dark={style == "dark"}
   class:light={style == "light"}
   class:accent={style == "accent"}
@@ -13,7 +14,7 @@
 </div>
 
 <style>
-  div {
+  .badge-container {
     font-family: JetBrains Mono, monospace;
     font-size: 0.875rem;
     text-transform: uppercase;
@@ -34,6 +35,6 @@
 
   .accent {
     background-color: var(--color-accent);
-    color: var(--color-background);
+    color: black;
   }
 </style>

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/constants/faq.svelte

@@ -344,6 +344,23 @@
               <li>You can sign back up at any time.</li>
             </ul>
           `
+        }, {
+          question: 'What is commacare?',
+          answer: `
+            <p>
+              commacare extends your comma four's warranty for an additional year beyond the standard one-year warranty, giving you two years of total coverage.
+            </p>
+            <p>
+              We've made commacare simple and straightforward:
+            </p>
+            <ul>
+              <li>commacare is included automatically with your comma prime subscription ($24/mo).</li>
+              <li>You must start your prime subscription within the first 30 days of receiving your comma four to be eligible for commacare.</li>
+              <li>If you cancel your prime subscription, your commacare warranty ends immediately and cannot be resumed. The standard warranty terms will continue to apply for any remaining time in the first year.</li>
+              <li>commacare is only available with prime ($24/mo). prime lite subscribers are not eligible for commacare.</li>
+              <li>commacare provides the same coverage as the standard one-year warranty. It does not cover theft, loss, or accidental damage.</li>
+            </ul>
+          `
         }, {
           question: 'I installed my own SIM card, but it\'s not working.',
           answer: `

src/routes/connect/+page.svelte

@@ -14,7 +14,9 @@
   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 BlackCheckmarkIcon from "$lib/icons/ui/black-checkmark.svg?raw";
   import CloseIcon from "$lib/icons/ui/close.svg?raw";
 </script>
 
@@ -37,12 +39,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>
 
@@ -56,10 +59,10 @@
       <div class="row header">
         <div class="title">Features</div>
         <div class="content badge">
-          <span class="badge-prefix muted">connect</span><Badge style="dark" display="inline">prime & lite subscription</Badge>
+          <span class="badge-prefix muted">connect</span><Badge style="accent" display="inline">prime subscription</Badge>
         </div>
         <div class="content badge">
-          <span class="badge-prefix muted">connect</span><Badge style="dark" display="inline">free</Badge>
+          <span class="badge-prefix muted">connect</span><Badge style="dark" display="inline">lite subscription</Badge>
         </div>
       </div>
       <div class="row">
@@ -79,7 +82,7 @@
         </div>
         <div class="content">
           <div class="check">{@html CheckmarkIcon}</div>
-          <div>3 days of storage</div>
+          <div>1 year of storage</div>
         </div>
       </div>
       <div class="row">
@@ -94,7 +97,7 @@
           <div class="check">{@html CheckmarkIcon}</div>
         </div>
         <div class="content">
-          <div class="cross">{@html CloseIcon}</div>
+          <div class="check">{@html CheckmarkIcon}</div>
         </div>
       </div>
       <div class="row">
@@ -109,7 +112,7 @@
           <div class="check">{@html CheckmarkIcon}</div>
         </div>
         <div class="content">
-          <div class="cross">{@html CloseIcon}</div>
+          <div class="check">{@html CheckmarkIcon}</div>
         </div>
       </div>
       <div class="row">
@@ -124,7 +127,7 @@
           <div class="check">{@html CheckmarkIcon}</div>
         </div>
         <div class="content">
-          <div class="cross">{@html CloseIcon}</div>
+          <div class="check">{@html CheckmarkIcon}</div>
         </div>
       </div>
       <div class="row">
@@ -138,11 +141,60 @@
         <div class="content">
           <div class="check">{@html CheckmarkIcon}</div>
         </div>
+        <div class="content">
+          <div class="check">{@html CheckmarkIcon}</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 class="mobile-badge"><Badge style="accent" display="inline-flex"><span class="check black">{@html BlackCheckmarkIcon}</span> COMMA PRIME EXCLUSIVE</Badge></div>
+          </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 style="height: 2rem;"></div>
+
+    <div id="features-table">
+      <div class="row header">
+        <div class="title">Free Features</div>
+        <div class="content badge">
+          <span class="badge-prefix muted">connect</span><Badge style="dark" display="inline">free</Badge>
+        </div>
+      </div>
+      <div class="row">
+        <div class="feature-overview">
+          <div class="icon">{@html RecordingsIcon}</div>
+          <div>
+            <hgroup>
+              <div>Cloud storage of drive videos</div>
+              <span class="muted">Review your driving history, access routes, and watch videos of past drives.</span>
+            </hgroup>
+            <div class="mobile-badge"><Badge style="dark" display="inline-flex"><span class="check">{@html CheckmarkIcon}</span> 3 days of storage</Badge></div>
+          </div>
+        </div>
+<!--        <div class="content">-->
+<!--          <div class="check">{@html CheckmarkIcon}</div>-->
+<!--          <div>1 year of storage</div>-->
+<!--        </div>-->
+        <div class="content">
+          <div class="check">{@html CheckmarkIcon}</div>
+          <div>3 days of storage</div>
+        </div>
+      </div>
+    </div>
   </div>
 </section>
 
@@ -229,6 +281,14 @@
     }
   }
 
+  #connect :global(.badge-container) {
+    margin-bottom: 0 !important;
+  }
+
+  .muted-link {
+    text-decoration: underline;
+  }
+
   #connect {
     & h1 {
       font-size: 2.5rem;
@@ -276,7 +336,7 @@
     & .badge-prefix {
       font-family: JetBrains Mono, monospace;
       text-transform: uppercase;
-      margin-bottom: 0.5rem;
+      line-height: 1;
       margin-right: 0.5rem;
     }
 
@@ -300,10 +360,15 @@
           }
         }
 
+        &.header {
+          gap: 12px;
+        }
+
         & .title {
+          display: flex;
+          align-items: center;
           font-size: 1.25rem;
           font-weight: 600;
-          display: flex;
           width: 40%;
         }
 
@@ -319,7 +384,13 @@
           }
         }
 
-        & .check { color: var(--color-accent-hover); }
+        & .check {
+          color: var(--color-accent-hover);
+
+          &.black {
+            color: black;
+          }
+        }
         & .cross { color: var(--color-red); }
 
         & .feature-overview {