update images to higher quality, refactor and updates from genes review

3 files changed, 24 insertions, 26 deletions

diff --git a/src/components/FaqCard.svelte b/src/components/FaqCard.svelte
index 5753fd87..3ebd7f45 100644
--- a/src/components/FaqCard.svelte
+++ b/src/components/FaqCard.svelte
@@ -3,9 +3,9 @@
 	export let answer;
 </script>
 
-<div class="mx-auto w-full md:w-2/3 lg:w-1/2 space-y-5">
+<div class="mx-auto w-full md:w-2/3 lg:w-[700px] space-y-5">
 	<p class="text-2xl font-medium">{question}</p>
-	<p class="text-secondary text-xl font-medium w-full md:w-2/3 max-w-2xl">
+	<p class="text-secondary text-xl font-medium">
 		{answer}
 	</p>
 </div>
diff --git a/src/components/LandingInfoCard.svelte b/src/components/LandingInfoCard.svelte
index d693d78d..2b2dd2a1 100644
--- a/src/components/LandingInfoCard.svelte
+++ b/src/components/LandingInfoCard.svelte
@@ -1,5 +1,4 @@
 <script>
-	export let gradients;
 	export let image;
 	export let title;
 	export let description;
@@ -7,17 +6,17 @@
 </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>
+	{#if image}
+		<img
+			src="/images/{image}.png"
+			alt={image}
+			class="w-2/3 md:w-5/12 lg:w-2/5 xl:w-1/3 2xl:w-1/4 max-w-xl mx-auto lg:mx-0 mb-10 lg:mb-0 {order ===
+				'reverse' && 'order-last'}"
+		/>
+	{/if}
 	<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">
+		<h3 class="text-5xl font-medium text-left w-full mx-auto lg:mx-0 md:w-[500px]">{title}</h3>
+		<p class="text-secondary text-xl font-medium w-full md:w-[500px] mx-auto lg:mx-0">
 			{#if description}
 				{description}
 			{:else}
diff --git a/src/routes/index.svelte b/src/routes/index.svelte
index da3c01a5..b52dab67 100644
--- a/src/routes/index.svelte
+++ b/src/routes/index.svelte
@@ -71,13 +71,14 @@
 			<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
+				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.
+					/>
+				</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"
@@ -89,17 +90,16 @@
 				<PrimaryButton title="Start in Seconds" />
 			</div>
 		</div>
-
-		<div
-			class="bg-gradient-to-br from-[#F5F7FA] via-[#EAF2FF] to-[#DEDFFF] rounded-full w-[300px] h-[300px] md:w-[450px] md:h-[450px] lg:w-[500px] lg:h-[500px] xl:w-[600px] xl:h-[600px] 2xl:w-[650px] 2xl:h-[650px] mx-auto mt-20 flex justify-center items-center"
-		>
-			<img src="/images/hero-image.svg" alt="tablet-pos" />
-		</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>
 
 	<!-- landing info 1 -->
 	<LandingInfoCard
-		gradients="from-[#FFF9FF] via-[#F7FBFE] to-[#ECEFFF]"
 		image="lightning-qr"
 		title="Instant payments via Lightning."
 		description="The moment your customer sends a payment, it’s there. No waiting for bank settlements or
@@ -109,7 +109,6 @@
 
 	<!-- landing info 2 -->
 	<LandingInfoCard
-		gradients="from-[#F5F7FA] via-[#EAF2FF] to-[#DEDFFF]"
 		image="phone-checkout"
 		title="Simple to use, custodial by default."
 		order="reverse"
@@ -125,7 +124,7 @@
 
 	<!-- landing info 3 -->
 	<LandingInfoCard
-		gradients="from-[#FFF9FF] via-[#F7FBFE] to-[#ECEFFF]"
+		image="lightning-qr"
 		title="Brand it your way!"
 		description="Customize your point of sale look and feel, or keep it on default - totally up to you."
 	/>