Extracted all strings from the main page into en.json

1 files changed, 19 insertions, 49 deletions

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index f50db726..6bdd9699 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -10,45 +10,19 @@
 		Footer
 	} from '$comp';
 
+  import { _ } from 'svelte-i18n';
+
 	let howItWorks;
 	let faq;
 	let about;
 
 	const howItWorksSteps = [
-		{
-			image: 'hand',
-			step: '1. Create your account',
-			description: 'A username & password is all you need to get started.'
-		},
-		{
-			image: 'bolt',
-			step: '2. Ask for payments',
-			description: 'The same as you normally would, but with bitcoin.'
-		},
-		{
-			image: 'smile',
-			step: "3. That's all!",
-			description: 'You can convert to local currency at any point.'
-		}
+		{ image: 'hand', stepID: 'step1' },
+		{ image: 'bolt', stepID: 'step2' },
+		{ image: 'smile', stepID: 'step3' }
 	];
 
-	const faqQuestions = [
-		{
-			question: 'What does it cost?',
-			answer:
-				'CoinOS is free to use. You only pay a 1% fee if/when you withdraw your funds. Compare this to 3% typically charged by a credit card processor.'
-		},
-		{
-			question: 'Do I need any special device or software?',
-			answer:
-				'No. CoinOS is web-based, so as long as you have an internet connection, you can use it on any device or hardware. Most merchants might use it on a phone or a tablet.'
-		},
-		{
-			question: 'Are my funds safe?',
-			answer:
-				'Your funds are stored on our secure server, however we recommend that you withdraw them to your own cold storage for long-term savings.'
-		}
-	];
+  const faqIDs = ["cost", "compatibility", "safety"];
 </script>
 
 <LandingHeader {howItWorks} {faq} {about} />
@@ -60,45 +34,41 @@
 	<!-- landing info 1 -->
 	<LandingInfoCard
 		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
-    worrying about chargebacks. Instant settlement, in seconds. Say goodbye to 3% credit card
-    processing fees."
+    title={$_('landing.info1.title')}
+    description={$_('landing.info1.description')}
 	/>
 
 	<!-- landing info 2 -->
 	<LandingInfoCard
 		image="phone-checkout"
-		title="Simple to use, custodial by default."
+    title={$_('landing.info2.title')}
 		order="reverse"
 	>
-		Just enter an amount, share QR code and you’re done.
+    {$_('landing.info2.description1')}
 		<br /><br />
-		CoinOS is custodial by default, which eliminates the need to understand how bitcoin/lightning works.
-		We do all the heavy lifting so you can focus on your business.
+    {$_('landing.info2.description2')}
 		<br /><br />
-		You always have the option of
-		<span class="underline underline-offset-4">taking custody</span> of your own keys.
+    {@html $_('landing.info2.description3')}
 	</LandingInfoCard>
 
 	<!-- landing info 3 -->
 	<div>
 		<LandingInfoCard
 			image="customize"
-			title="Brand it your way!"
-			description="Customize your point of sale look and feel, or keep it on default - totally up to you."
+      title={$_('landing.info3.title')}
+			description={$_('landing.info3.description')}
 		/>
 		<div bind:this={howItWorks} />
 	</div>
 
 	<!-- how it works -->
 	<div>
-		<h3 class="text-5xl font-medium mb-10 text-center">How it works</h3>
+		<h3 class="text-5xl font-medium mb-10 text-center">{$_('howItWorks.header')}</h3>
 		<div
 			class="block lg:flex justify-center items-center space-y-10 lg:space-y-0 lg:space-x-10 text-center"
 		>
 			{#each howItWorksSteps as step}
-				<HowItWorksCard image={step.image} step={step.step} description={step.description} />
+				<HowItWorksCard image={step.image} stepID={step.stepID} />
 			{/each}
 		</div>
 		<div bind:this={faq} />
@@ -107,9 +77,9 @@
 	<!-- faq -->
 	<div>
 		<div class="space-y-10">
-			<h3 class="text-5xl font-medium text-center">FAQ</h3>
-			{#each faqQuestions as question}
-				<FaqCard question={question.question} answer={question.answer} />
+			<h3 class="text-5xl font-medium text-center">{$_('faq.header')}</h3>
+			{#each faqIDs as faqID}
+				  <FaqCard questionID={faqID} />
 			{/each}
 		</div>
 		<div bind:this={about} />