Contact page (#101)

Co-authored-by: MinixBF <[email protected]>

src/lib/elements/Button.svelte

@@ -4,31 +4,35 @@
 	/**
 	 * Defines the style of the button. Defaults to `"primary"`.
 	 */
-	export let type: "primary" | "secondary" | "minimal" = "primary";
+	export let styleType: "primary" | "secondary" | "minimal" = "primary";
+	export let submit = false;
 
 	const dispatch = createEventDispatcher<{
 		click: null;
 	}>();
 </script>
 
-{#if type === "primary"}
+{#if styleType === "primary"}
 	<button
-		class="inline-flex items-center gap-2 rounded-xl border-[1px] border-transparent bg-dominant px-3 py-1 text-lg font-medium text-inverted shadow-lg shadow-primary/25 transition-colors duration-300 hover:border-dominant hover:bg-inherit hover:text-dominant
+		type={submit ? "submit" : "button"}
+		class="inline-flex items-center gap-2 rounded-xl border border-transparent bg-dominant px-3 py-1 text-lg font-medium text-inverted shadow-lg shadow-primary/25 transition-colors duration-300 hover:border-dominant hover:bg-inherit hover:text-dominant
 		{$$props.class ?? ''}"
 		on:click={() => dispatch("click")}
 	>
 		<slot />
 	</button>
-{:else if type === "secondary"}
+{:else if styleType === "secondary"}
 	<button
-		class="inline-flex items-center gap-2 rounded-xl border-[1px] border-dominant px-3 py-1 text-lg font-medium text-dominant shadow-lg shadow-primary/25 transition-colors duration-300 hover:border-primary hover:text-primary
+		type={submit ? "submit" : "button"}
+		class="inline-flex items-center gap-2 rounded-xl border border-dominant px-3 py-1 text-lg font-medium text-dominant shadow-lg shadow-primary/25 transition-colors duration-300 hover:border-primary hover:text-primary
 		{$$props.class ?? ''}"
 		on:click={() => dispatch("click")}
 	>
 		<slot />
 	</button>
-{:else if type === "minimal"}
+{:else if styleType === "minimal"}
 	<button
+		type={submit ? "submit" : "button"}
 		class="inline-flex items-center gap-1 text-base font-normal text-dominant underline-offset-4 hover:underline
 		{$$props.class ?? ''}"
 		on:click={() => dispatch("click")}

src/lib/elements/RadioButtonsGroup.svelte

@@ -30,7 +30,7 @@
 <div
 	role="radiogroup"
 	aria-label={description}
-	class="inline-flex space-x-1 rounded-full border-[1px] border-gray-400 p-1 text-primary shadow-2xl shadow-black
+	class="inline-flex space-x-1 rounded-full border border-gray-400 p-1 text-primary shadow-2xl shadow-black
 	{$$props.class ?? ''}"
 >
 	{#each values as toggle, index}

src/locales/en/contact.json

@@ -0,0 +1,34 @@
+{
+	"pageTitle": "Contact",
+	"description": "Let's talk about your project.",
+	"title": "Contact [us]",
+	"labels": {
+		"name": "Your name and surname",
+		"email": "Your email address, so we can reach you back",
+		"company": "Your company name",
+		"budget": "Do you have a budget in mind?",
+		"description": "Tell us about your project"
+	},
+	"fields": {
+		"name": "John Doe",
+		"nameError": "Please enter your name",
+		"email": "[email protected]",
+		"emailError": "Please enter a valid email address",
+		"company": "My Company Inc.",
+		"budget": {
+			"choose": "Choose a budget",
+			"none": "No budget",
+			"less": "Less than $1,000",
+			"1k": "$1,000 - $5,000",
+			"5k": "$5,000 - $10,000",
+			"10k": "$10,000 or more"
+		},
+		"description": "Project type, goals, targets, timeline, etc."
+	},
+	"sendButton": {
+		"default": "Send",
+		"loading": "Sending...",
+		"success": "Sent!",
+		"error": "Error"
+	}
+}

src/locales/fr/contact.json

@@ -0,0 +1,34 @@
+{
+	"pageTitle": "Contact",
+	"description": "Discutons ensemble de votre projet.",
+	"title": "Contactez-[nous]",
+	"labels": {
+		"name": "Votre nom et prénom",
+		"email": "Votre adresse email, que nous puissions vous répondre",
+		"company": "Votre entreprise",
+		"budget": "Avez-vous un budget en tête ?",
+		"description": "Dites-nous en plus sur votre projet"
+	},
+	"fields": {
+		"name": "Michel Dupont",
+		"nameError": "Veuillez indiquer votre nom et prénom",
+		"email": "[email protected]",
+		"emailError": "Veuillez indiquer une adresse email valide",
+		"company": "Dupont & Cie",
+		"budget": {
+			"choose": "Choisissez un budget",
+			"none": "Aucun",
+			"less": "Moins de 1 000 €",
+			"1k": "Entre 1 000 € et 5 000 €",
+			"5k": "Entre 5 000 € et 10 000 €",
+			"10k": "10 000 € ou plus"
+		},
+		"description": "Type de projet, objectifs, cible, délais, etc."
+	},
+	"sendButton": {
+		"default": "Envoyer",
+		"loading": "Envoi en cours...",
+		"success": "Message envoyé !",
+		"error": "Erreur"
+	}
+}

src/routes/+error.svelte

@@ -68,7 +68,7 @@
 
 	<!-- Bottom button -->
 	<Button
-		type="secondary"
+		styleType="secondary"
 		on:click={() => {
 			goto("/", { replaceState: true });
 		}}

src/routes/+layout.svelte

@@ -33,7 +33,7 @@
 			{ name: i("common.pages.process"), href: "#process" },
 			{ name: i("common.pages.technologies"), href: "#technologies" },
 			{ name: i("common.pages.company"), href: "#" }, // Dropdown: Values, Who we are
-			{ name: i("common.contact"), href: "." }
+			{ name: i("common.contact"), href: "/contact" }
 		];
 		footerItems = [
 			{
@@ -147,7 +147,7 @@
 					class:duration-1000={showButton}
 					class:pointer-events-none={!showButton}
 				>
-					<Button type="secondary">{i("common.contact")}</Button>
+					<Button styleType="secondary">{i("common.contact")}</Button>
 				</span>
 				<button
 					class="lg:hidden"
@@ -264,7 +264,7 @@
 				on:keypress={() => window.scrollTo({ top: 0, behavior: "smooth" })}
 			>
 				<ArrowUp
-					class="h-8 w-8 cursor-pointer rounded-full border-[1px] border-dominant p-1.5 text-dominant transition-colors duration-300 hover:border-transparent hover:bg-dominant hover:text-inverted"
+					class="h-8 w-8 cursor-pointer rounded-full border border-dominant p-1.5 text-dominant transition-colors duration-300 hover:border-transparent hover:bg-dominant hover:text-inverted"
 				/>
 			</button>
 		{/if}
@@ -276,7 +276,7 @@
 					on:keypress={() => window.scrollTo({ top: 0, behavior: "smooth" })}
 				>
 					<ArrowUp
-						class="h-8 w-8 cursor-pointer rounded-full border-[1px] border-dominant p-1.5 text-dominant transition-colors duration-300 hover:border-transparent hover:bg-dominant hover:text-inverted"
+						class="h-8 w-8 cursor-pointer rounded-full border border-dominant p-1.5 text-dominant transition-colors duration-300 hover:border-transparent hover:bg-dominant hover:text-inverted"
 					/>
 				</button>
 			{/if}

src/routes/+page.svelte

@@ -2,6 +2,7 @@
 	import { ROOT_URL } from "$config";
 	import type { SvelteComponent } from "svelte";
 	import type { SvelteHTMLElements } from "svelte/elements";
+	import { goto } from "$app/navigation";
 	import MagneticElement from "$shells/MagneticElement.svelte";
 	import Mouse3DTilting from "$shells/Mouse3DTilting.svelte";
 	import Section from "$layouts/Section.svelte";
@@ -145,8 +146,8 @@
 		images: [
 			{
 				url: `${ROOT_URL}/${i("home.og-banner")}`,
-				width: 1536,
-				height: 768,
+				width: 512,
+				height: 256,
 				alt: i("a11y.alt.og-banner")
 			}
 		],
@@ -175,6 +176,7 @@
 			url: ROOT_URL,
 			logo: `${ROOT_URL}/favicon.svg`
 		} /*,
+		// Add FAQ?
 		{
 			"@type": "WebSite",
 			url: ROOT_URL,
@@ -197,8 +199,8 @@
 	class="-mt-28 flex h-[100svh] flex-col items-center justify-center pt-28 md:-mt-32 md:pt-28"
 >
 	<div
-		class="m-auto grid h-fit grid-cols-1 items-center px-10 before:absolute before:inset-0
-			before:-z-10 before:max-w-full before:bg-gradient-to-l before:from-dominant before:to-transparent before:opacity-20 before:content-[''] md:px-32 xl:grid-cols-2"
+		class="m-auto grid h-fit grid-cols-1 items-center px-10
+		before:absolute before:inset-0 before:-z-10 before:max-w-full before:bg-gradient-to-l before:from-dominant before:to-transparent before:opacity-20 before:content-[''] md:px-32 xl:grid-cols-2"
 	>
 		<!-- Left part -->
 		<div
@@ -212,8 +214,8 @@
 			<div
 				class="flex origin-bottom-left flex-col gap-5 pt-10 scale-110 child:max-w-fit xs:flex-row"
 			>
-				<Button>{i("common.contact")}</Button>
-				<Button type="minimal" class="hover-child:translate-x-1">
+				<Button on:click={() => goto("/contact")}>{i("common.contact")}</Button>
+				<Button styleType="minimal" class="hover-child:translate-x-1">
 					{i("home.hero.cta-secondary")}
 					<ChevronRight class="h-4 w-4 transition-transform duration-500" />
 				</Button>
@@ -274,7 +276,7 @@
 			on:click={() => scrollTo("#process")}
 		>
 			<ArrowDown
-				class="h-8 w-8 cursor-pointer rounded-full border-[1px] border-transparent bg-dominant p-1.5 text-inverted
+				class="h-8 w-8 cursor-pointer rounded-full border border-transparent bg-dominant p-1.5 text-inverted
 				hover:border-dominant hover:bg-inherit hover:text-dominant"
 			/>
 		</button>
@@ -330,11 +332,15 @@
 			{/each}
 			<em class="text-center sm:hidden">
 				{i("home.solutions.more.before-link")}
-				<Button type="minimal">{i("home.solutions.more.link")}</Button>
+				<Button styleType="minimal">{i("home.solutions.more.link")}</Button>
 				{i("home.solutions.more.after-link")}
 			</em>
 			<div class="flex items-end justify-end">
-				<Button type="minimal" class="gap-2 text-end text-lg hover-child:translate-x-1">
+				<Button
+					styleType="minimal"
+					class="gap-2 text-end text-lg hover-child:translate-x-1"
+					on:click={() => goto("/contact")}
+				>
 					{solutions.slice(-1)[0]?.description ?? ""}
 					<ChevronRight class="h-4 w-4 transition-transform duration-500" />
 				</Button>
@@ -397,6 +403,6 @@
 			<!-- eslint-disable-next-line svelte/no-at-html-tags -->
 			{@html c(i("home.cta-bottom.title"))}
 		</h3>
-		<Button class="scale-110">{i("common.contact")}</Button>
+		<Button class="scale-110" on:click={() => goto("/contact")}>{i("common.contact")}</Button>
 	</div>
 </Section>