create more components to DRY up code

4 files changed, 45 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>
diff --git a/src/components/PrimaryButton.svelte b/src/components/PrimaryButton.svelte
new file mode 100644
index 00000000..3caeb07d
--- /dev/null
+++ b/src/components/PrimaryButton.svelte
@@ -0,0 +1,8 @@
+<script>
+	export let title;
+	export let click;
+</script>
+
+<button class="bg-black text-white border rounded-full px-6 py-2 font-bold" on:click={click}
+	>{title}</button
+>
diff --git a/src/components/SecondaryButton.svelte b/src/components/SecondaryButton.svelte
new file mode 100644
index 00000000..723a7569
--- /dev/null
+++ b/src/components/SecondaryButton.svelte
@@ -0,0 +1,6 @@
+<script>
+	export let title;
+	export let click;
+</script>
+
+<button class="border rounded-full px-6 py-2 font-bold" on:click={click}>{title}</button>
diff --git a/src/components/index.js b/src/components/index.js
index 4c1bc8f3..a9a8bb43 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -1,2 +1,5 @@
+export { default as LandingInfoCard } from './LandingInfoCard.svelte';
 export { default as HowItWorksCard } from './HowItWorksCard.svelte';
 export { default as FaqCard } from './FaqCard.svelte';
+export { default as PrimaryButton } from './PrimaryButton.svelte';
+export { default as SecondaryButton } from './SecondaryButton.svelte';