move landing header into comp

2 files changed, 23 insertions, 0 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';