diff options
Diffstat (limited to 'src/components')
| -rw-r--r-- | src/components/About.svelte | 77 |
1 files changed, 38 insertions, 39 deletions
diff --git a/src/components/About.svelte b/src/components/About.svelte index 55fc34d1..27193804 100644 --- a/src/components/About.svelte +++ b/src/components/About.svelte @@ -1,6 +1,17 @@ <script> 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: [] } + ]; </script> <h3 class="text-5xl font-medium mb-10 text-center">{$t('about.header')}</h3> @@ -21,49 +32,37 @@ <Image image="swoosh" style="w-32 absolute -bottom-20 lg:bottom-0 right-0 md:right-10" /> </div> -<div class="px-5 block lg:flex justify-center lg:space-x-32 items-center mt-40 lg:mt-20"> - <div class="space-y-5 mb-5 lg:mb-0"> - <h3 class="text-5xl font-medium mb-10 text-center lg:text-right"> - {$t('about.founder.header')} - </h3> +<div class="container grid grid-cols-2"> + {#each team as member} + <div class="flex"> + <div class="flex"> + <Image image={member.name} style="rounded-full mx-auto lg:mx-0 lg:ml-auto w-40" /> - <Image image="adam" style="rounded-full mx-auto lg:mx-0 lg:ml-auto w-40" /> + <div class="space-y-2"> + <span class="text-2xl text-center font-semibold block lg:text-right" + >{$t(`about.team.${member.name}.name`)}</span + > + <span class="text-xl text-center text-secondary block lg:text-right" + >{$t(`about.team.${member.name}.position`)}</span + > + </div> - <div class="space-y-2"> - <span class="text-2xl text-center font-semibold block lg:text-right" - >{$t('about.founder.name')}</span - > - <span class="text-xl text-center text-secondary block lg:text-right" - >{$t('about.founder.position')}</span - > + <div class="flex justify-center lg:justify-end 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}`}><Icon icon={social.type} style="w-6" /></a + > + {/each} + </div> + </div> </div> - - <div class="flex justify-center lg:justify-end items-center space-x-5"> - <a - href="https://twitter.com/adamsoltys" - target="_blank" - rel="noreferrer" - class="rounded-full p-2 bg-[#1D9BF0]"><Icon icon="twitter" style="w-6" /></a - > - <a - href="https://github.com/asoltys" - target="_blank" - rel="noreferrer" - class="rounded-full p-2 bg-gray-800"><Icon icon="github" style="w-6" /></a - > + <div class="text-secondary text-xl"> + {$t(`about.team.${member.name}.bio`)} </div> - </div> - - <ul - class="w-full mx-auto md:w-[700px] lg:w-[500px] xl:w-auto text-secondary px-1 md:px-10 text-xl list-disc space-y-5" - > - <li>{$t('about.founder.qualifications.bitcoin')}</li> - <li>{$t('about.founder.qualifications.webDev')}</li> - <li>{$t('about.founder.qualifications.bitcoinVancouver')}</li> - <li>{$t('about.founder.qualifications.bitcoinCoop')}</li> - <li>{$t('about.founder.qualifications.beliefs')}</li> - <li>{$t('about.founder.qualifications.familialRelationships')}</li> - </ul> + {/each} </div> <div class="mt-20"> |