diff options
| author | secondl1ght <[email protected]> | 2022-07-21 12:48:46 -0600 |
|---|---|---|
| committer | secondl1ght <[email protected]> | 2022-07-21 12:48:46 -0600 |
| commit | 7ad85953f44f25b8c341bff94fd939014a7dd52e (patch) | |
| tree | acf4a594c36e25c81688fe05db8835636080e51e /src | |
| parent | 202d4db9e3b704f8a0010cd9a68db1b5534ad6f1 (diff) | |
| download | coinos-ui-7ad85953f44f25b8c341bff94fd939014a7dd52e.tar.gz coinos-ui-7ad85953f44f25b8c341bff94fd939014a7dd52e.zip | |
move landing header into comp
Diffstat (limited to 'src')
| -rw-r--r-- | src/components/LandingHeader.svelte | 22 | ||||
| -rw-r--r-- | src/components/index.js | 1 | ||||
| -rw-r--r-- | src/routes/index.svelte | 20 |
3 files changed, 26 insertions, 17 deletions
diff --git a/src/components/LandingHeader.svelte b/src/components/LandingHeader.svelte new file mode 100644 index 00000000..c6cd4095 --- /dev/null +++ b/src/components/LandingHeader.svelte @@ -0,0 +1,22 @@ +<script> + import { scroll } from '../lib/utils'; + import { PrimaryButton, SecondaryButton } from '../components'; + + export let howItWorks; + export let faq; +</script> + +<header class="w-full lg:w-5/6 pt-10 mx-auto"> + <nav class="block xl:flex flex-wrap justify-between items-center"> + <a href="/"> + <img src="/icons/logo.svg" alt="logo" class="mx-auto mb-5 xl:mb-0" /> + </a> + <div class="hidden space-x-10 md:flex flex-wrap justify-center items-center font-bold"> + <button on:click={() => scroll(howItWorks)}>How It Works</button> + <button on:click={() => scroll(faq)}>FAQ</button> + <button>About</button> + <SecondaryButton title="Start in Seconds" /> + <PrimaryButton title="Login" /> + </div> + </nav> +</header> diff --git a/src/components/index.js b/src/components/index.js index a9a8bb43..8f82d324 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -1,3 +1,4 @@ +export { default as LandingHeader } from './LandingHeader.svelte'; export { default as LandingInfoCard } from './LandingInfoCard.svelte'; export { default as HowItWorksCard } from './HowItWorksCard.svelte'; export { default as FaqCard } from './FaqCard.svelte'; diff --git a/src/routes/index.svelte b/src/routes/index.svelte index 0b32e672..f1d4e263 100644 --- a/src/routes/index.svelte +++ b/src/routes/index.svelte @@ -1,11 +1,10 @@ <script> - import { scroll } from '../lib/utils'; import { + LandingHeader, LandingInfoCard, HowItWorksCard, FaqCard, - PrimaryButton, - SecondaryButton + PrimaryButton } from '../components'; let howItWorks; @@ -49,20 +48,7 @@ ]; </script> -<header class="w-full lg:w-5/6 pt-10 mx-auto"> - <nav class="block xl:flex flex-wrap justify-between items-center"> - <a href="/"> - <img src="/icons/logo.svg" alt="logo" class="mx-auto mb-5 xl:mb-0" /> - </a> - <div class="hidden space-x-10 md:flex flex-wrap justify-center items-center font-bold"> - <button on:click={() => scroll(howItWorks)}>How It Works</button> - <button on:click={() => scroll(faq)}>FAQ</button> - <button>About</button> - <SecondaryButton title="Start in Seconds" /> - <PrimaryButton title="Login" /> - </div> - </nav> -</header> +<LandingHeader {howItWorks} {faq} /> <main class="space-y-40 py-20 md:py-32 lg:py-40 px-5 md:px-0"> <!-- hero --> |