Skip to content

Commit

Permalink
style: updated hero
Browse files Browse the repository at this point in the history
  • Loading branch information
deansallinen committed Dec 17, 2024
1 parent dfd1db1 commit ed048f5
Show file tree
Hide file tree
Showing 5 changed files with 74 additions and 57 deletions.
Binary file added src/lib/assets/hero/[email protected]
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/lib/assets/hero/[email protected]
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
24 changes: 24 additions & 0 deletions src/lib/assets/unicove-wordmark.svelte
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
<script lang="ts">
let props = $props();
</script>

<svg
class={props.class}
viewBox="0 0 256 44"
xmlns="http://www.w3.org/2000/svg"
width="256"
height="44"
fill="none"
><path
fill="#fff"
d="M43.803.732h5.688c8.429 0 16.12 3.195 21.95 8.452V.732h11.036V44H71.442V33.91c-.07-10.318-7.113-18.963-16.604-21.363V44H43.803V.732ZM11.035 24.098V.732H0v23.366C0 35.09 8.817 44 19.694 44c10.877 0 19.695-8.91 19.695-19.902V.732H28.353v23.366c0 4.833-3.876 8.75-8.659 8.75-4.782 0-8.659-3.917-8.659-8.75ZM186.597 44h-5.687V.732h11.035V32.18c9.416-2.409 16.384-11.028 16.384-21.292V.732h11.035v10.155c0 18.288-14.671 33.113-32.767 33.113ZM97.926.732V44H86.891V.732h11.035ZM256 .732h-32.222V44H256V32.849h-21.187v-4.907h14.634V16.79h-14.634v-4.907H256V.732Z"
/><path
fill="#fff"
fill-rule="evenodd"
d="M133.68 22.366c0-11.948 9.585-21.634 21.408-21.634s21.408 9.686 21.408 21.634S166.911 44 155.088 44s-21.408-9.686-21.408-21.634Zm21.408-10.482c-5.729 0-10.373 4.693-10.373 10.482 0 5.79 4.644 10.483 10.373 10.483 5.729 0 10.373-4.693 10.373-10.483 0-5.789-4.644-10.482-10.373-10.482Z"
clip-rule="evenodd"
/><path
fill="#fff"
d="M113.375 22.366c0-5.789 4.645-10.482 10.373-10.482h5.518V.732h-5.518c-11.823 0-21.408 9.686-21.408 21.634S111.925 44 123.748 44h5.518V32.849h-5.518c-5.728 0-10.373-4.693-10.373-10.483Z"
/></svg
>
60 changes: 3 additions & 57 deletions src/routes/[network]/(homepage)/+page.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,8 @@
import EOSPriceHistory from '$lib/components/chart/eospricehistory.svelte';
import RamPriceHistory from '$lib/components/chart/rampricehistory.svelte';
import AssetText from '$lib/components/elements/asset.svelte';
import StakedHEX from './components/stakedhex.svelte';
import Hero from './components/hero.svelte';
import { getContext, onMount, type Snippet } from 'svelte';
import { Asset } from '@wharfkit/antelope';
import type { HistoricalPrice } from '$lib/types';
Expand Down Expand Up @@ -88,56 +88,8 @@
</Stack>
{/snippet}

<Subgrid id="homepage" class="mb-4 content-start items-start gap-y-20 pt-8 sm:pt-12 md:pt-0">
<!-- <Pageheader title={data.network.chain.name} /> -->

<!-- Hero -->
<section
id="hero"
class="md:bg-hero-gradient relative col-span-full grid grid-cols-4 items-start gap-x-4 gap-y-10 sm:items-center md:grid-cols-subgrid md:gap-y-4"
>
<!-- Text block -->
<Stack
class="z-10 col-span-full col-start-1 row-start-1 items-start xs:col-span-3 xs:col-start-1 sm:col-span-3 sm:col-start-1 sm:row-start-1 sm:max-w-sm sm:place-self-center md:col-span-6 md:col-start-1 md:max-w-xl md:place-self-auto"
>
<h1 class="text-balance text-3xl font-semibold leading-tight md:text-4xl md:leading-tight">
Unicove is your gateway to the {networkName} Network
</h1>
<p class="text-muted mb-2 text-balance text-xl leading-tight md:text-2xl md:leading-tight">
Stake, Send, Manage Tokens, and Explore {networkName} – all with ease
</p>
<!-- <Button href={`/${data.network}/signup`}>Create your EOS account now</Button> -->
<!-- <Button disabled>Create your EOS account (Coming Soon)</Button> -->
</Stack>

<!-- Network logo -->
<div
class="relative left-12 top-8 z-10 col-span-full col-start-3 row-start-1 max-h-80 justify-self-center xs:block sm:col-start-3 md:inset-0 md:col-span-3 md:col-start-7 xl:col-span-4 xl:col-start-6"
>
<img class="h-40 object-contain md:h-72" src={networkLogo} alt={networkName} />
</div>

<!-- Unicove logo outline -->
<div
class="relative col-span-full col-start-1 row-start-1 justify-self-end opacity-30 xs:right-8 xs:col-start-3 xs:place-self-center xs:opacity-100 sm:right-8 sm:col-start-3 md:inset-0 md:col-span-full md:opacity-50"
>
<svg
class="size-48 md:h-full md:w-full"
viewBox="0 0 632 606"
width="632"
height="606"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="m189.404 242.503-.246-1.635 7.648-27.491a17.921 17.921 0 0 1 4.406-7.683l26.653-27.435a11.284 11.284 0 0 1 14.68-1.328l20.282 14.505 23.48-13.592c17.194-9.954 25.613-30.324 20.522-49.654l-.159.134a69.32 69.32 0 0 1-33.916 15.452l-10.848-15.289c-1.759-2.479-.73-5.964 1.922-7.426 11.164-6.154 19.531-16.585 23.103-29.075l.955-3.34-42.165-30.943a1.426 1.426 0 0 1-.39-1.855c.377-.66 1.204-.9 1.871-.546l41.187 21.89-4.329-30.37 10.326 5.62a37.718 37.718 0 0 0 41.571-3.642l2.486-1.978c2.903 14.355 17.325 23.158 31.274 19.09l5.177-1.51-1.212 9.086c-2.424 18.192 8.395 35.608 25.632 41.477l-6.179 7.933c-10.732 13.778-10.838 33.145-.259 47.042l6.438 8.456-27.303 14.068a93.692 93.692 0 0 1-1.855 3.364l-27.197 47.063m-153.555-.388c-32.413 11.963-71.278 6.89-98.22-15.219L46.984 363.402l269.085 195.614 269.084-195.614-46.219-142.331a20.223 20.223 0 0 0-11.925 4.87c-35.392 30.483-92.775 30.483-128.167 0-7.605-6.549-18.854-6.55-26.458 0-8.698 7.491-18.723 13.141-29.424 16.95m-153.555-.388 2.633 17.506c.351 2.33 2.989 3.497 4.925 2.178l18.631-12.698c1.623-1.106 1.879-3.417.537-4.857l-7.513-8.064.643-4.161m-19.856 10.096c6.979-2.576 13.658-5.941 19.856-10.096m133.699 10.484-.157.272a89.571 89.571 0 0 0-11.813 38.921l-.019-.002c-2.328 20.296 4.616 40.56 18.871 55.071l28.556 29.071.544.589c45.153 53.122 7.744 135.218-61.614 135.218-69.572 0-106.904-82.534-61.319-135.564l5.89-6.852 43.478 50.887c-7.964 10.001-.947 25.058 11.951 25.058 13.067 0 20.114-15.467 11.608-25.475l-3.672-4.319.034-.03-51.365-60.12.103-.12-12.83-15.094c-25.482-29.98-32.043-70.711-19.407-106.25m101.161 18.739c-32.843 11.692-72.049 6.042-98.744-16.95a20.342 20.342 0 0 0-2.417-1.789m0 0c-7.431-4.693-17.208-4.097-24.042 1.789a88.938 88.938 0 0 1-8.496 6.466m32.538-8.255.148-.413-7.302-20.796-22.957 13.745-2.427 15.719M3.25 349.252c-6.146 18.928.587 39.663 16.679 51.361l269.085 195.614c16.091 11.697 37.881 11.697 53.972 0l269.085-195.614c16.092-11.698 22.825-32.433 16.679-51.361L525.968 32.742C519.822 13.816 502.194 1 482.304 1H149.696c-19.89 0-37.518 12.815-43.665 31.743L3.251 349.252Zm356.738-28.066c-6.845-8.258-10.777-18.545-11.241-29.235l20.71-12.807a162.12 162.12 0 0 0 16.442-37.848l2.148-7.407c.772-2.661 4.694-1.888 4.417.871l-.169 1.682c-1.729 17.215 17.263 28.623 31.437 18.883 2.167-1.489 4.672 1.343 2.961 3.347l-5.448 6.379c-10.503 12.298-2.872 31.432 13.146 32.962l.991.094c2.628.251 2.545 4.15-.092 4.285l-1.962.102a180.49 180.49 0 0 1-53.656-5.301l-19.684 23.993ZM187.679 99.901c4.816-4.722 11.841-9.444 18.673-10.141-6.88-.705-13.938-5.468-18.77-10.239-4.825-4.851-9.657-11.98-10.369-18.921-.704 6.877-5.456 13.924-10.207 18.76-4.848 4.843-11.988 9.687-18.932 10.4 6.855.705 13.897 5.443 18.722 10.19 4.848 4.86 9.696 12.004 10.417 18.962.728-6.982 5.593-14.143 10.466-19.01Zm295.102 55.707c-5.509.562-11.175 4.37-15.059 8.179-3.929 3.925-7.852 9.7-8.44 15.331-.581-5.611-4.491-11.373-8.401-15.292-3.89-3.828-9.569-7.65-15.098-8.218 5.6-.575 11.358-4.481 15.268-8.387 3.831-3.9 7.663-9.583 8.231-15.129.574 5.598 4.471 11.347 8.362 15.259 3.897 3.848 9.589 7.689 15.137 8.257Z"
stroke="#fff"
stroke-opacity=".4"
stroke-linejoin="round"
/>
</svg>
</div>
</section>
<Subgrid id="homepage" class="mb-4 content-start items-start gap-y-20 md:pt-0">
<Hero {networkLogo} {networkName} />

<section class="col-span-full @container" class:hidden={!context.settings.data.debugMode}>
<div class="grid min-h-72 rounded-2xl bg-mineShaft-950 px-4 @xl:grid-cols-2 @xl:gap-4">
Expand Down Expand Up @@ -349,9 +301,3 @@
</div>
</section>
</Subgrid>

<style>
:root {
--bg-menu: var(--network-theme, #00b5ff60);
}
</style>
47 changes: 47 additions & 0 deletions src/routes/[network]/(homepage)/components/hero.svelte
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
<script lang="ts">
import Stack from '$lib/components/layout/stack.svelte';
import UnicoveWordmark from '$lib/assets/unicove-wordmark.svelte';
import bgDesktop from '$lib/assets/hero/[email protected]?enhanced';
import bgMobile from '$lib/assets/hero/[email protected]?enhanced';
let { networkName, networkLogo } = $props();
</script>

<section id="hero" class="col-span-full grid grid-cols-subgrid gap-y-14 pt-6 md:items-center">
<div id="hero-background" class="col-span-full row-start-1 hidden md:block">
<enhanced:img class="w-auto object-contain" src={bgDesktop} alt="" fetchpriority="high" />
</div>

<picture
id="network-logo"
class="relative col-span-full row-start-1 -ml-4 grid w-screen place-items-center md:col-start-7 md:ml-0 md:w-auto xl:col-start-6"
>
<img
class="z-10 w-[41%] max-w-72 object-contain md:w-full"
src={networkLogo}
alt={networkName}
fetchpriority="high"
/>
<enhanced:img
class="absolute left-1/2 top-0 -translate-x-1/2 object-contain md:hidden"
src={bgMobile}
alt=""
fetchpriority="high"
/>
</picture>

<!-- Text block -->
<Stack
class="z-10 col-span-full grid gap-5 md:col-span-5 md:col-start-1 md:row-start-1 lg:col-span-4 lg:col-start-1 xl:col-start-2"
>
<UnicoveWordmark class="h-7 w-auto md:h-auto" />
<h1 class="text-balance text-3xl font-bold leading-tight lg:text-4xl lg:leading-tight">
<span class="sr-only">Unicove:</span>
Your gateway to the {networkName} Network
</h1>
<p class="text-muted mb-2 text-balance text-xl leading-tight lg:text-xl lg:leading-tight">
Stake, Send, Manage Tokens, and Explore {networkName} – all with ease
</p>
<!-- <Button href={`/${data.network}/signup`}>Create your EOS account now</Button> -->
</Stack>
</section>

0 comments on commit ed048f5

Please sign in to comment.