aboutsummaryrefslogtreecommitdiffstats
path: root/src/components/HowItWorksCard.svelte
blob: 784c738d11bcc749ce65e71e79bbabf2f13e0686 (plain) (blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script>
	import Icon from './Icon.svelte';
	import { t } from '$lib/translations';
	export let image;
	export let stepID;
</script>

<div class="space-y-5">
	<Icon icon={image} style="mx-auto w-32 h-32" />
	<p class="text-2xl font-medium">{$t('howItWorks.' + stepID + '.header')}</p>
	<p class="text-secondary text-xl font-medium w-full md:w-2/3 mx-auto">
		{$t('howItWorks.' + stepID + '.description')}
	</p>
</div>
/* Literal.String.Heredoc */ .highlight .si { color: #33B; background-color: #FFF0F0 } /* Literal.String.Interpol */ .highlight .sx { color: #2B2; background-color: #F0FFF0 } /* Literal.String.Other */ .highlight .sr { color: #080; background-color: #FFF0FF } /* Literal.String.Regex */ .highlight .s1 { color: #D20; background-color: #FFF0F0 } /* Literal.String.Single */ .highlight .ss { color: #A60; background-color: #FFF0F0 } /* Literal.String.Symbol */ .highlight .bp { color: #038 } /* Name.Builtin.Pseudo */ .highlight .fm { color: #06B; font-weight: bold } /* Name.Function.Magic */ .highlight .vc { color: #369 } /* Name.Variable.Class */ .highlight .vg { color: #D70 } /* Name.Variable.Global */ .highlight .vi { color: #33B } /* Name.Variable.Instance */ .highlight .vm { color: #369 } /* Name.Variable.Magic */ .highlight .il { color: #00D; font-weight: bold } /* Literal.Number.Integer.Long */
<script>
  import { Icon, LocaleSelector } from "$comp";
  import { t } from "$lib/translations";

  const followLinks = [
    { url: "https://twitter.com/coinoswallet", titleID: "twitter" },
    { url: "https://t.me/coinoswallet", titleID: "telegram" },
    { url: "https://linktr.ee/coinos.io", titleID: "linktree" },
  ];

  const companyLinks = [
    { url: "/docs", titleID: "documentation" },
    { url: "/support", titleID: "support" },
  ];
</script>

<footer
  class="space-y-10 md:space-y-0 text-xl block md:flex justify-around mb-20"
>
  <div class="space-y-5">
    <div class="text-center w-full">
      <a href="/"><Icon icon="logo" style="w-48 mx-auto md:mx-0" /></a>
    </div>
    <div class="flex gap-2 justify-center sm:hidden">
      <div>
        <a href="/register">
          <button
            class="bg-black text-white border rounded-full px-4 py-2 font-bold hover:opacity-80 text-lg"
          >
            {$t("nav.startInSeconds")}
          </button>
        </a>
      </div>
    </div>
    <div class="w-full flex">
      <div class="mx-auto">
        <LocaleSelector
          style="p-2 text-center hover:opacity-80 cursor-pointer border rounded-full"
        />
      </div>
    </div>
  </div>

  <div class="text-center md:text-left">
    <p class="font-semibold">{$t("footer.followUs")}</p>
    <ul class="mt-5 text-secondary space-y-3 font-medium">
      {#each followLinks as link}
        <li>
          <a
            href={link.url}
            target="_blank"
            rel="noreferrer"
            class="hover:opacity-80">{$t("footer." + link.titleID)}</a
          >
        </li>
      {/each}
    </ul>
  </div>

  <div class="text-center md:text-left">
    <p class="font-semibold">{$t("footer.company")}</p>
    <ul class="mt-5 text-secondary space-y-3">
      {#each companyLinks as link}
        <li>
          <a href={link.url} class="hover:opacity-80"
            >{$t("footer." + link.titleID)}</a
          >
        </li>
      {/each}
    </ul>
  </div>

  <Icon icon="shield" style="mx-auto md:mx-0" />
</footer>