3 files changed, 39 insertions, 33 deletions
diff --git a/src/components/LandingHero.svelte b/src/components/LandingHero.svelte
new file mode 100644
index 00000000..756564de
--- /dev/null
+++ b/src/components/LandingHero.svelte
@@ -0,0 +1,35 @@
+<script>
+	import { PrimaryButton } from '../components';
+</script>
+
+<div>
+	<div class="space-y-10">
+		<h1
+			class="text-5xl md:text-6xl lg:text-7xl 2xl:text-8xl font-medium text-center w-full md:w-3/4 lg:w-1/2 max-w-7xl mx-auto leading-tight"
+		>
+			The <span class="relative">
+				easiest
+				<img
+					src="/icons/rays.svg"
+					alt="rays"
+					class="absolute -top-16 left-5 md:left-8 lg:left-14 2xl:left-24"
+				/>
+			</span> way to accept Bitcoin in your store.
+		</h1>
+		<h2
+			class="text-center text-secondary w-full md:w-3/5 lg:w-2/5 max-w-3xl mx-auto text-xl leading-normal font-medium"
+		>
+			Grow your customer base and revenue by accepting Bitcoin with an easy-to-use and managed Point
+			of Sale. No software or hardware required.
+		</h2>
+		<div class="flex justify-center">
+			<PrimaryButton title="Start in Seconds" />
+		</div>
+	</div>
+	<!-- hero image -->
+	<img
+		src="/images/hero-image.png"
+		alt="tablet-pos"
+		class="w-full md:w-2/3 max-w-5xl mx-auto mt-20"
+	/>
+</div>
diff --git a/src/components/index.js b/src/components/index.js
index 8f82d324..448db45d 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -1,4 +1,5 @@
 export { default as LandingHeader } from './LandingHeader.svelte';
+export { default as LandingHero } from './LandingHero.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 f1d4e263..8912e41e 100644
--- a/src/routes/index.svelte
+++ b/src/routes/index.svelte
@@ -1,10 +1,10 @@
 <script>
 	import {
 		LandingHeader,
+		LandingHero,
 		LandingInfoCard,
 		HowItWorksCard,
-		FaqCard,
-		PrimaryButton
+		FaqCard
 	} from '../components';
 
 	let howItWorks;
@@ -52,37 +52,7 @@
 
 <main class="space-y-40 py-20 md:py-32 lg:py-40 px-5 md:px-0">
 	<!-- hero -->
-	<div>
-		<div class="space-y-10">
-			<h1
-				class="text-5xl md:text-6xl lg:text-7xl 2xl:text-8xl font-medium text-center w-full md:w-3/4 lg:w-1/2 max-w-7xl mx-auto leading-tight"
-			>
-				The <span class="relative">
-					easiest
-					<img
-						src="/icons/rays.svg"
-						alt="rays"
-						class="absolute -top-16 left-5 md:left-8 lg:left-14 2xl:left-24"
-					/>
-				</span> way to accept Bitcoin in your store.
-			</h1>
-			<h2
-				class="text-center text-secondary w-full md:w-3/5 lg:w-2/5 max-w-3xl mx-auto text-xl leading-normal font-medium"
-			>
-				Grow your customer base and revenue by accepting Bitcoin with an easy-to-use and managed
-				Point of Sale. No software or hardware required.
-			</h2>
-			<div class="flex justify-center">
-				<PrimaryButton title="Start in Seconds" />
-			</div>
-		</div>
-		<!-- hero image -->
-		<img
-			src="/images/hero-image.png"
-			alt="tablet-pos"
-			class="w-full md:w-2/3 max-w-5xl mx-auto mt-20"
-		/>
-	</div>
+	<LandingHero />
 
 	<!-- landing info 1 -->
 	<LandingInfoCard