diff options
| author | secondl1ght <[email protected]> | 2022-07-21 11:04:30 -0600 |
|---|---|---|
| committer | secondl1ght <[email protected]> | 2022-07-21 11:04:30 -0600 |
| commit | 617e369d283db949fce021550f17efaaf41a234f (patch) | |
| tree | e34be852a2934e312a2d19fc8b28bc37cf4c8480 /src/components/LandingInfoCard.svelte | |
| parent | 0d45c144b1d310cbd48410660077041577863712 (diff) | |
| download | coinos-ui-617e369d283db949fce021550f17efaaf41a234f.tar.gz coinos-ui-617e369d283db949fce021550f17efaaf41a234f.zip | |
create more components to DRY up code
Diffstat (limited to 'src/components/LandingInfoCard.svelte')
| -rw-r--r-- | src/components/LandingInfoCard.svelte | 28 |
1 files changed, 28 insertions, 0 deletions
diff --git a/src/components/LandingInfoCard.svelte b/src/components/LandingInfoCard.svelte new file mode 100644 index 00000000..d693d78d --- /dev/null +++ b/src/components/LandingInfoCard.svelte @@ -0,0 +1,28 @@ +<script> + export let gradients; + export let image; + export let title; + export let description; + export let order; +</script> + +<div class="block lg:flex justify-center lg:space-x-20 items-center"> + <div + class="{order === 'reverse' && + 'order-last'} bg-gradient-to-r {gradients} rounded-full w-[250px] h-[250px] md:w-[300px] md:h-[300px] lg:w-[350px] lg:h-[350px] xl:w-[450px] xl:h-[450px] 2xl:w-[500px] 2xl:h-[500px] flex justify-center items-center mx-auto lg:mx-0 mb-10 lg:mb-0" + > + {#if image} + <img src="/images/{image}.svg" alt={image} class="w-5/6" /> + {/if} + </div> + <div class="w-full lg:w-1/2 max-w-3xl space-y-10 mx-auto lg:mx-0"> + <h3 class="text-5xl font-medium text-left">{title}</h3> + <p class="text-secondary text-xl font-medium w-full lg:w-3/4 mx-auto lg:mx-0"> + {#if description} + {description} + {:else} + <slot /> + {/if} + </p> + </div> +</div> |