Extracted all strings from the main page into en.json

8 files changed, 123 insertions, 85 deletions

diff --git a/src/components/FaqCard.svelte b/src/components/FaqCard.svelte
index 3ebd7f45..3e855e42 100644
--- a/src/components/FaqCard.svelte
+++ b/src/components/FaqCard.svelte
@@ -1,11 +1,15 @@
 <script>
-	export let question;
-	export let answer;
+  import { _ } from 'svelte-i18n';
+
+  // this ID will be used to get the strings from the locale
+  // question is at faq.[questionID].question
+  // answer is at faq.[questionID].answer
+  export let questionID;
 </script>
 
 <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-2xl font-medium">{$_('faq.' + questionID + '.question')}</p>
 	<p class="text-secondary text-xl font-medium">
-		{answer}
+		{$_('faq.' + questionID + '.answer')}
 	</p>
 </div>
diff --git a/src/components/Footer.svelte b/src/components/Footer.svelte
index f1de0173..8d846f04 100644
--- a/src/components/Footer.svelte
+++ b/src/components/Footer.svelte
@@ -1,15 +1,16 @@
 <script>
 	import { Icon } from '$comp';
+  import { _ } from 'svelte-i18n';
 
 	const followLinks = [
-		{ url: 'https://twitter.com/coinoswallet', title: 'Twitter' },
-		{ url: 'https://github.com/coinos', title: 'GitHub' },
-		{ url: 'https://t.me/coinos', title: 'Telegram' }
+		{ url: 'https://twitter.com/coinoswallet', titleID: 'twitter' },
+		{ url: 'https://github.com/coinos', titleID: 'github' },
+		{ url: 'https://t.me/coinos', titleID: 'telegram' }
 	];
 
 	const companyLinks = [
-		{ url: 'mailto:[email protected]', title: 'Support' },
-		{ url: '/jobs', title: 'Jobs' }
+		{ url: 'mailto:[email protected]', titleID: 'support' },
+		{ url: '/jobs', titleID: 'jobs' }
 	];
 </script>
 
@@ -17,19 +18,19 @@
 	<Icon icon="logo" style="w-48 mx-auto md:mx-0" />
 
 	<div class="text-center md:text-left">
-		<p class="font-semibold">Follow Us</p>
+		<p class="font-semibold">{$_('footer.followUs')}</p>
 		<ul class="mt-5 text-secondary space-y-3 font-medium">
 			{#each followLinks as link}
-				<li><a href={link.url} target="_blank" rel="noreferrer">{link.title}</a></li>
+				<li><a href={link.url} target="_blank" rel="noreferrer">{$_('footer.' + link.titleID)}</a></li>
 			{/each}
 		</ul>
 	</div>
 
 	<div class="text-center md:text-left">
-		<p class="font-semibold">Company</p>
+		<p class="font-semibold">{$_('footer.company')}</p>
 		<ul class="mt-5 text-secondary space-y-3">
 			{#each companyLinks as link}
-				<li><a href={link.url}>{link.title}</a></li>
+				<li><a href={link.url}>{$_('footer.' + link.titleID)}</a></li>
 			{/each}
 		</ul>
 	</div>
diff --git a/src/components/HowItWorksCard.svelte b/src/components/HowItWorksCard.svelte
index 519cdcdc..b0ef2aad 100644
--- a/src/components/HowItWorksCard.svelte
+++ b/src/components/HowItWorksCard.svelte
@@ -1,14 +1,14 @@
 <script>
 	import Icon from './Icon.svelte';
+  import { _ } from 'svelte-i18n';
 	export let image;
-	export let step;
-	export let description;
+	export let stepID;
 </script>
 
 <div class="space-y-5">
 	<Icon icon={image} style="mx-auto w-32 h-32" />
-	<p class="text-2xl font-medium">{step}</p>
+	<p class="text-2xl font-medium">{$_('howItWorks.' + stepID + '.header')}</p>
 	<p class="text-secondary text-xl font-medium w-full md:w-2/3 mx-auto">
-		{description}
+		{$_('howItWorks.' + stepID + '.description')}
 	</p>
 </div>
diff --git a/src/components/LandingHeader.svelte b/src/components/LandingHeader.svelte
index cc743b79..3e53a613 100644
--- a/src/components/LandingHeader.svelte
+++ b/src/components/LandingHeader.svelte
@@ -28,9 +28,9 @@
 
 		<!-- desktop nav -->
 		<div class="hidden space-x-10 md:flex flex-wrap justify-center items-center font-bold">
-			<button on:click={() => scroll(howItWorks)}>{$_('nav.howItWorks')}</button>
-			<button on:click={() => scroll(faq)}>{$_('nav.faq')}</button>
-			<button on:click={() => scroll(about)}>{$_('nav.about')}</button>
+			<button on:click={() => scroll(howItWorks)}>{$_('howItWorks.header')}</button>
+			<button on:click={() => scroll(faq)}>{$_('faq.header')}</button>
+			<button on:click={() => scroll(about)}>{$_('about.header')}</button>
 			{#if !$user}
 				<button class="border rounded-full px-6 py-2 font-bold" on:click={() => goto('/register')}
 					>{$_('nav.startInSeconds')}
@@ -45,13 +45,13 @@
 				<button
 					class="border rounded-full px-6 py-2 font-bold"
 					on:click={() => goto(`/${$user.username}/dashboard`)}
-					>Account
+					>{$_('nav.account')}
 				</button>
 				<button
 					class="bg-black text-white border rounded-full px-6 py-2 font-bold"
 					on:click={() => goto('/logout')}
 				>
-					Sign out
+					{$_('nav.signOut')}
 				</button>
 			{/if}
 		</div>
@@ -92,13 +92,13 @@
 					<button
 						class="border rounded-full px-6 py-2 font-bold block"
 						on:click={() => goto(`/${$user.username}/dashboard`)}
-						>Account
+						>{$_('nav.account')}
 					</button>
 					<button
 						class="bg-black text-white border rounded-full px-6 py-2 font-bold block"
 						on:click={() => goto('/logout')}
 					>
-						Sign out
+            {$_('nav.signOut')}
 					</button>
 				{/if}
 				<LocaleSelector style="py-1" />
diff --git a/src/components/LandingHero.svelte b/src/components/LandingHero.svelte
index 750f5626..7c044a4d 100644
--- a/src/components/LandingHero.svelte
+++ b/src/components/LandingHero.svelte
@@ -2,6 +2,7 @@
 	import { goto } from '$app/navigation';
 	import { Icon, Image } from '$comp';
 	import { user } from '$lib/store';
+  import { _ } from 'svelte-i18n';
 </script>
 
 <div class="mt-[96.88px] md:mt-0">
@@ -9,16 +10,15 @@
 		<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
+			{$_('landing.header_before_icon')} <span class="relative">
+				{$_('landing.header_with_icon')}
 				<Icon icon="rays" style="absolute -top-16 left-5 md:left-8 lg:left-14 2xl:left-24" />
-			</span> way to accept bitcoin in your store.
+			</span> {$_('landing.header_after_icon')}
 		</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.
+      {$_('landing.subheader')}
 		</h2>
 		{#if !$user}
 			<div class="flex justify-center">
@@ -26,7 +26,7 @@
 					class="bg-black text-white border rounded-full px-6 py-2 font-bold"
 					on:click={() => goto('/register')}
 				>
-					Start in Seconds
+					{$_('nav.startInSeconds')}
 				</button>
 			</div>
 		{/if}
diff --git a/src/locales/en.json b/src/locales/en.json
index 2e4de596..c8d90970 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -22,11 +22,68 @@
 		  "familialRelationships": "Husband, father, brother, son"
     }
   },
+  "faq": {
+    "header": "FAQ",
+		"cost": {
+			"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."
+		},
+		"compatibility": {
+			"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."
+		},
+		"safety": {
+			"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."
+		}
+  },
+  "footer": {
+    "followUs": "Follow Us",
+    "twitter": "Twitter",
+    "github": "GitHub",
+    "company": "Company",
+    "telegram": "Telegram",
+    "support": "Support",
+    "jobs": "Jobs"
+  },
+  "howItWorks": {
+    "header": "How It Works",
+    "step1": {
+			"header": "1. Create your account",
+			"description": "A username & password is all you need to get started."
+    },
+    "step2": {
+			"header": "2. Ask for payments",
+			"description": "The same as you normally would, but with bitcoin."
+    },
+    "step3": {
+			"header": "3. That's all!",
+			"description": "You can convert to local currency at any point."
+    }
+  },
+  "landing": {
+    "header_before_icon": "The",
+    "header_with_icon": "easiest",
+    "header_after_icon": "way to accept bitcoin in your store.",
+    "subheader": "Grow your customer base and revenue by accepting bitcoin with an easy-to-use and managed Point of Sale. No software or hardware required.",
+    "info1": {
+      "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."
+    },
+    "info2": {
+      "title": "Simple to use, custodial by default",
+      "description1": "Just enter an amount, share QR code and you’re done.",
+      "description2": "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.",
+      "description3": "You always have the option of <span class=\"underline underline-offset-4\">taking custody</span> of your own keys."
+    },
+    "info3": {
+      "title": "Brand it your way!",
+      "description": "Customize your point of sale look and feel, or keep it on default - totally up to you."
+    }
+  },
 	"nav": {
-		"howItWorks": "How It Works",
-		"faq": "FAQ",
-		"about": "About",
 		"startInSeconds": "Start in Seconds",
+    "account": "Account",
 		"signIn": "Sign In",
     "signOut": "Sign Out",
     "dashboard": "Dashboard",
diff --git a/src/locales/fr.json b/src/locales/fr.json
index 9adc9488..44320607 100644
--- a/src/locales/fr.json
+++ b/src/locales/fr.json
@@ -1,9 +1,15 @@
 {
 	"langname": "Français",
+  "about": {
+    "header": "À Propos"
+  },
+  "faq": {
+    "header": "FAQ"
+  },
+  "howItWorks": {
+    "header": "Comment Elle Fonctionne"
+  },
 	"nav": {
-		"howItWorks": "Comment Ça Fonctionne",
-		"faq": "FAQ",
-		"about": "À Propos",
 		"startInSeconds": "Commence en Secondes",
 		"signIn": "Connexion"
 	}
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} />