About us section (#97)

Co-authored-by: Antoine Lethimonnier <[email protected]>

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"

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]"

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">

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"
 			}