aboutsummaryrefslogtreecommitdiffstats
path: root/src/components/About.svelte
diff options
context:
space:
mode:
authorAdam Soltys <[email protected]>2023-12-01 20:04:13 -0800
committerAdam Soltys <[email protected]>2023-12-01 20:04:13 -0800
commit216a600224fde22ce76b367557a02094ec693886 (patch)
treed1189bbaa39db204633523132a7d4767b952717d /src/components/About.svelte
parent7d9bc1f54dfd04172e8d6d43ebc2efd6f407e833 (diff)
downloadcoinos-ui-216a600224fde22ce76b367557a02094ec693886.tar.gz
coinos-ui-216a600224fde22ce76b367557a02094ec693886.zip
prettier
Diffstat (limited to 'src/components/About.svelte')
-rw-r--r--src/components/About.svelte131
1 files changed, 73 insertions, 58 deletions
diff --git a/src/components/About.svelte b/src/components/About.svelte
index 1dbd8038..6e0cdcb5 100644
--- a/src/components/About.svelte
+++ b/src/components/About.svelte
@@ -1,7 +1,7 @@
<script>
import { onMount } from "svelte";
- let locations;
+ let locations;
onMount(async () => {
try {
({ locations } = await fetch("/locations").then((r) => r.json()));
@@ -10,70 +10,85 @@
}
});
- import { Image, Icon, LocationsMap } from '$comp';
- import { t } from '$lib/translations';
+ import { Image, Icon, LocationsMap } from "$comp";
+ import { t } from "$lib/translations";
- let team = [
- {
- name: 'adam',
- socials: [
- { type: 'twitter', url: 'https://twitter.com/adamsoltys', color: 'bg-[#1D9BF0]' },
- { type: 'github', url: 'https://github.com/asoltys', color: 'bg-gray-800' }
- ]
- },
- { name: 'cole', socials: [] }
- ];
+ let team = [
+ {
+ name: "adam",
+ socials: [
+ {
+ type: "twitter",
+ url: "https://twitter.com/adamsoltys",
+ color: "bg-[#1D9BF0]",
+ },
+ {
+ type: "github",
+ url: "https://github.com/asoltys",
+ color: "bg-gray-800",
+ },
+ ],
+ },
+ { name: "cole", socials: [] },
+ ];
</script>
<div class="flex justify-center">
- <div class="container space-y-10">
- <h3 class="text-5xl font-medium text-center">
- {$t('about.team.header')}
- </h3>
- <div class="space-y-10 2xl:space-y-0 2xl:grid gap-y-10 grid-cols-2">
- {#each team as member}
- <div class="flex w-full">
- <div class="md:flex 2xl:items-start md:max-w-2xl mx-auto">
- <div class="w-[220px] mx-auto">
- <Image image={member.name} style="rounded-full mx-auto w-40 h-40 mb-5 object-cover" />
+ <div class="container space-y-10">
+ <h3 class="text-5xl font-medium text-center">
+ {$t("about.team.header")}
+ </h3>
+ <div class="space-y-10 2xl:space-y-0 2xl:grid gap-y-10 grid-cols-2">
+ {#each team as member}
+ <div class="flex w-full">
+ <div class="md:flex 2xl:items-start md:max-w-2xl mx-auto">
+ <div class="w-[220px] mx-auto">
+ <Image
+ image={member.name}
+ style="rounded-full mx-auto w-40 h-40 mb-5 object-cover"
+ />
- <div class="space-y-2">
- <span class="text-2xl text-center font-semibold block"
- >{$t(`about.team.${member.name}.name`)}</span
- >
- <span class="text-xl text-center text-secondary block"
- >{$t(`about.team.${member.name}.position`)}</span
- >
- </div>
+ <div class="space-y-2">
+ <span class="text-2xl text-center font-semibold block"
+ >{$t(`about.team.${member.name}.name`)}</span
+ >
+ <span class="text-xl text-center text-secondary block"
+ >{$t(`about.team.${member.name}.position`)}</span
+ >
+ </div>
- <div class="mt-2 flex justify-center items-center space-x-5">
- {#each member.socials as social}
- <a
- href={social.url}
- target="_blank"
- rel="noreferrer"
- class={`rounded-full p-2 ${social.color} hover:opacity-80`}
- ><Icon icon={social.type} style="w-6" /></a
- >
- {/each}
- </div>
- </div>
- <div class="text-secondary text-xl w-full max-w-[450px] mt-5">
- {$t(`about.team.${member.name}.bio`)}
- </div>
- </div>
- </div>
- {/each}
- </div>
- </div>
+ <div class="mt-2 flex justify-center items-center space-x-5">
+ {#each member.socials as social}
+ <a
+ href={social.url}
+ target="_blank"
+ rel="noreferrer"
+ class={`rounded-full p-2 ${social.color} hover:opacity-80`}
+ ><Icon icon={social.type} style="w-6" /></a
+ >
+ {/each}
+ </div>
+ </div>
+ <div class="text-secondary text-xl w-full max-w-[450px] mt-5">
+ {$t(`about.team.${member.name}.bio`)}
+ </div>
+ </div>
+ </div>
+ {/each}
+ </div>
+ </div>
</div>
{#if locations?.length}
- <div>
- <h3 class="text-5xl font-medium mb-5 text-center">{$t('about.locations.header')}</h3>
- <p class="text-secondary text-xl w-full md:w-10/12 lg:w-2/3 2xl:w-[800px] mx-auto mb-10">
- {@html $t('about.locations.description')}
- </p>
- <LocationsMap {locations} />
- </div>
+ <div>
+ <h3 class="text-5xl font-medium mb-5 text-center">
+ {$t("about.locations.header")}
+ </h3>
+ <p
+ class="text-secondary text-xl w-full md:w-10/12 lg:w-2/3 2xl:w-[800px] mx-auto mb-10"
+ >
+ {@html $t("about.locations.description")}
+ </p>
+ <LocationsMap {locations} />
+ </div>
{/if}