anki-landing-page/src/lib/components/sections/BasicConcepts.svelte at 811d1a36cf480a93dc91f0a39ca2edd16577b3af · ankitects/anki-landing-page · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<script>
  import { base } from '$app/paths';
  import DualHeader from '$lib/components/common/DualHeader.svelte';
  import { Localized } from '@nubolab-ffwd/svelte-fluent';
</script>

<section class="relative z-1 mx-auto w-[min(100%,986px)] pt-12">
  <DualHeader id="basic-concepts">
    {#snippet subtitle()}
      <p><Localized id="anki-supports-complex-workflows-but-getting-started-is-easy" /></p>
    {/snippet}
  </DualHeader>
  <div class="flex flex-col items-center gap-6 md:gap-20 md:flex-row">
    <img
      src="{base}/graphics/deck-graphic-light.svg"
      alt="deck-graphic-light"
      class="aspect-5/3 grow md:max-w-[35%] border-2 border-black/[13%] dark:hidden"
    />
    <img
      src="{base}/graphics/deck-graphic-dark.svg"
      alt="deck-graphic-dark"
      class="aspect-5/3 grow md:max-w-[35%] hidden dark:inline"
    />
    <div class="w-full flex flex-col gap-2 mt-6 md:mt-0">
      <h3 class="text-2xl font-medium capitalize"><Localized id="decks" /></h3>
      <p class="text-lg text-subtle tracking-wide leading-snug">
        <Localized id="decks-description" />
      </p>
    </div>
  </div>
  <div class="mt-12 flex flex-col items-center gap-6 md:gap-20 md:flex-row-reverse">
    <img
      src="{base}/graphics/review-graphic-light.svg"
      alt="review-graphic-light"
      class="aspect-5/3 grow md:max-w-[35%] border-2 border-black/[13%] dark:hidden"
    />
    <img
      src="{base}/graphics/review-graphic-dark.svg"
      alt="review-graphic-dark"
      class="aspect-5/3 grow md:max-w-[35%] hidden dark:inline"
    />
    <div class="w-full flex flex-col gap-2 mt-6 md:mt-0">
      <h3 class="text-2xl font-medium capitalize"><Localized id="reviews" /></h3>
      <p class="text-lg text-subtle tracking-wide leading-snug">
        <Localized id="reviews-description" />
      </p>
    </div>
  </div>
</section>