diff --git a/src/lib/components/Badge.svelte b/src/lib/components/Badge.svelte index e62204a3..67fa0672 100644 --- a/src/lib/components/Badge.svelte +++ b/src/lib/components/Badge.svelte @@ -4,6 +4,7 @@
diff --git a/src/lib/components/Grid.svelte b/src/lib/components/Grid.svelte index 7e93f22e..4298d1bb 100644 --- a/src/lib/components/Grid.svelte +++ b/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}; diff --git a/src/lib/constants/faq.svelte b/src/lib/constants/faq.svelte index 426f9ca8..82d9527d 100644 --- a/src/lib/constants/faq.svelte +++ b/src/lib/constants/faq.svelte @@ -344,6 +344,23 @@
  • You can sign back up at any time.
    • ` + }, { + question: 'What is commacare?', + answer: ` +

    + commacare extends your comma four's warranty for an additional year beyond the standard one-year warranty, giving you two years of total coverage. +

    +

    + We've made commacare simple and straightforward: +

    + + ` }, { question: 'I installed my own SIM card, but it\'s not working.', answer: ` diff --git a/src/lib/icons/features/commacare.svg b/src/lib/icons/features/commacare.svg new file mode 100644 index 00000000..3cd02228 --- /dev/null +++ b/src/lib/icons/features/commacare.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/lib/icons/ui/black-checkmark.svg b/src/lib/icons/ui/black-checkmark.svg new file mode 100644 index 00000000..0fa3eaeb --- /dev/null +++ b/src/lib/icons/ui/black-checkmark.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/routes/connect/+page.svelte b/src/routes/connect/+page.svelte index 856ceabb..773dde2b 100644 --- a/src/routes/connect/+page.svelte +++ b/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"; @@ -37,12 +39,13 @@
    - +
    {@html RecordingsIcon}
    {@html CommandLineIcon}
    +
    {@html CommacareIcon}
    @@ -56,10 +59,10 @@
    Features
    - connectprime & lite subscription + connectprime subscription
    - connectfree + connectlite subscription
    @@ -79,7 +82,7 @@
    {@html CheckmarkIcon}
    -
    3 days of storage
    +
    1 year of storage
    @@ -94,7 +97,7 @@
    {@html CheckmarkIcon}
    -
    {@html CloseIcon}
    +
    {@html CheckmarkIcon}
    @@ -109,7 +112,7 @@
    {@html CheckmarkIcon}
    -
    {@html CloseIcon}
    +
    {@html CheckmarkIcon}
    @@ -124,7 +127,7 @@
    {@html CheckmarkIcon}
    -
    {@html CloseIcon}
    +
    {@html CheckmarkIcon}
    @@ -138,11 +141,60 @@
    {@html CheckmarkIcon}
    +
    +
    {@html CheckmarkIcon}
    +
    +
    +
    +
    +
    {@html CommacareIcon}
    +
    +
    +
    commacare
    + Extend your comma four's standard one year warranty for an additional year. See Terms +
    +
    {@html BlackCheckmarkIcon} COMMA PRIME EXCLUSIVE
    +
    +
    +
    +
    {@html CheckmarkIcon}
    +
    {@html CloseIcon}
    + +
    + +
    +
    +
    Free Features
    +
    + connectfree +
    +
    +
    +
    +
    {@html RecordingsIcon}
    +
    +
    +
    Cloud storage of drive videos
    + Review your driving history, access routes, and watch videos of past drives. +
    +
    {@html CheckmarkIcon} 3 days of storage
    +
    +
    + + + + +
    +
    {@html CheckmarkIcon}
    +
    3 days of storage
    +
    +
    +
    @@ -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 {