From 4ae7855829faacfc5c29ff3284ef0d751bb2bc6c Mon Sep 17 00:00:00 2001
From: secondl1ght <85003930+secondl1ght@users.noreply.github.com>
Date: Thu, 21 Jul 2022 11:04:30 -0600
Subject: create more components to DRY up code

---
 src/components/LandingInfoCard.svelte | 28 ++++++++++++++++++++++++++++
 src/components/PrimaryButton.svelte   |  8 ++++++++
 src/components/SecondaryButton.svelte |  6 ++++++
 src/components/index.js               |  3 +++
 4 files changed, 45 insertions(+)
 create mode 100644 src/components/LandingInfoCard.svelte
 create mode 100644 src/components/PrimaryButton.svelte
 create mode 100644 src/components/SecondaryButton.svelte

(limited to 'src/components')

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';
-- 
cgit v1.2.3