From a5b9dd40d1169e49974df4c8d2a3035d1730651a Mon Sep 17 00:00:00 2001
From: MinixBF <40363781+MinixBF@users.noreply.github.com>
Date: Mon, 4 Sep 2023 23:10:21 +0200
Subject: [PATCH] About us section (#97)

Co-authored-by: Antoine Lethimonnier <43064022+WarningImHack3r@users.noreply.github.com>
---
 src/locales/en/home.json |  5 +++++
 src/locales/fr/home.json |  5 +++++
 src/routes/+page.svelte  | 21 +++++++++++++++++++++
 tailwind.config.ts       |  4 ++++
 4 files changed, 35 insertions(+)

diff --git a/src/locales/en/home.json b/src/locales/en/home.json
index efc14f60..b2a97427 100644
--- a/src/locales/en/home.json
+++ b/src/locales/en/home.json
@@ -31,6 +31,11 @@
 			"after-link": "!"
 		}
 	},
+	"about-us": {
+		"title": "About us",
+		"desc": "We are three co-founders who share the same passion for taking on challenges. After our engineering school, we realized that we complemented each other both in terms of human interaction and technical skills. Too often, we come across websites or applications with bugs or maintenance problems. That's why we want to use our skills to help start-ups and companies meet their needs by creating high-quality solutions.",
+		"more": "Learn more about us"
+	},
 	"cta-bottom": {
 		"subtitle": "Ready to get started?",
 		"title": "Let's build your [dream] project"
diff --git a/src/locales/fr/home.json b/src/locales/fr/home.json
index faecac2b..50013d4c 100644
--- a/src/locales/fr/home.json
+++ b/src/locales/fr/home.json
@@ -31,6 +31,11 @@
 			"after-link": " !"
 		}
 	},
+	"about-us": {
+		"title": "À propos de [nous]",
+		"desc": "Nous sommes trois cofondateurs qui partagent la même passion pour les défis. Après notre école d'ingénieur, nous avons réalisé que nous étions complémentaires tant au niveau de l'interaction humaine que des compétences techniques. Trop souvent, nous rencontrons des sites web ou des applications avec des bugs ou des problèmes de maintenance. C'est pourquoi nous voulons mettre nos compétences au service des start-ups et des entreprises pour les aider à répondre à leurs besoins en créant des solutions de qualité.",
+		"more": "En savoir plus sur nous"
+	},
 	"cta-bottom": {
 		"subtitle": "Prêt à vous lancer ?",
 		"title": "Construisons votre projet [de rêve]"
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index b263d794..328f7a49 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -307,6 +307,27 @@
 	</div>
 </Section>
 
+<!-- About us -->
+<Section id="about-us">
+	<svelte:fragment slot="title">
+		<!-- eslint-disable-next-line svelte/no-at-html-tags -->
+		{@html c(i("home.about-us.title"))}
+	</svelte:fragment>
+	<div class="pb-10 max-sm:child:!-mx-8 flex items-center justify-center">
+		<div class="flex min-w-full flex-col gap-4 rounded-3xl backdrop-filter backdrop-blur border border-opacity-25 border-white bg-glass p-8 md:p-16">
+			<p class="text-lg text-gray-200">
+				{i("home.about-us.desc")}
+			</p>
+		</div>
+	</div>
+	<!-- <div class="flex items-center justify-end">
+		<Button type="minimal" class="gap-2 text-end text-lg hover-child:translate-x-1">
+			{i("home.about-us.more")}
+			<ChevronRight class="h-4 w-4 min-w-max transition-transform duration-500" />
+		</Button>
+	</div> -->
+</Section>
+
 <!-- Bottom CTA -->
 <Section>
 	<div class="my-32 flex flex-col items-center justify-center">
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 2e5fb0c1..d1ef85e0 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -34,6 +34,10 @@ export default {
 				primary: "black",
 				secondary: "#1c1c1e"
 			},
+			backgroundImage: {
+				glass:
+					"linear-gradient(107.36deg,hsla(0,0%,80%,.1) 37.79%,hsla(0,0%,90%,0.08) 80%,hsla(0,0%,100%,0) 102.99%)"
+			},
 			maxWidth: {
 				"large-screen": "120rem"
 			}