Add French translations of new pages and update site configuration
Introduced French translations of new pages including 404, contact, products index, home, and services. Also updated site configuration to handle French translations and added a new ContactSection_fr.astro component for the French version of the Contact Us section.
This commit is contained in:
Emil Gulamov
parent
a7abaee69f
commit
82916cce1b
7 changed files with 661 additions and 0 deletions
|
|
@ -12,6 +12,13 @@ export default defineConfig({
|
|||
image: {
|
||||
domains: ["images.unsplash.com"],
|
||||
},
|
||||
i18n: {
|
||||
defaultLocale: "en",
|
||||
locales: ["en", "fr"],
|
||||
routing: {
|
||||
prefixDefaultLocale: false
|
||||
}
|
||||
},
|
||||
prefetch: true,
|
||||
integrations: [
|
||||
tailwind(),
|
||||
|
|
|
|||
119
src/components/sections/ContactSection_fr.astro
Normal file
119
src/components/sections/ContactSection_fr.astro
Normal file
|
|
@ -0,0 +1,119 @@
|
|||
---
|
||||
// Import the necessary dependencies.
|
||||
import AuthBtn from "../ui/buttons/AuthBtn.astro";
|
||||
import ContactIconBlock from "../ui/blocks/ContactIconBlock.astro";
|
||||
import TextInput from "../ui/forms/input/TextInput.astro";
|
||||
import EmailContactInput from "../ui/forms/input/EmailContactInput.astro";
|
||||
import PhoneInput from "../ui/forms/input/PhoneInput.astro";
|
||||
import TextAreaInput from "../ui/forms/input/TextAreaInput.astro";
|
||||
import Icon from "../ui/icons/Icon.astro";
|
||||
|
||||
// Define the variables that will be used in this component
|
||||
const title: string = "Contactez-nous";
|
||||
const subTitle: string =
|
||||
"Vous avez des questions ou souhaitez discuter d'un projet ? Contactez-nous et laissons-nous élaborer la solution parfaite avec nos outils et services.";
|
||||
const formTitle: string = "Remplissez le formulaire ci-dessous";
|
||||
const formSubTitle: string =
|
||||
"Nous vous répondrons dans un délai de 1 à 2 jours ouvrables.";
|
||||
---
|
||||
|
||||
<!-- Contact Us -->
|
||||
<section class="mx-auto max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14">
|
||||
<div class="mx-auto max-w-2xl lg:max-w-5xl">
|
||||
<div class="text-center">
|
||||
<h1
|
||||
class="text-balance text-2xl font-bold tracking-tight text-neutral-800 dark:text-neutral-200 md:text-4xl md:leading-tight"
|
||||
>
|
||||
{title}
|
||||
</h1>
|
||||
<p class="mt-1 text-pretty text-neutral-600 dark:text-neutral-400">
|
||||
{subTitle}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="mt-12 grid items-center gap-6 lg:grid-cols-2 lg:gap-16">
|
||||
<div class="flex flex-col rounded-xl p-4 sm:p-6 lg:p-8">
|
||||
<h2
|
||||
class="mb-8 text-xl font-bold text-neutral-700 dark:text-neutral-300"
|
||||
>
|
||||
{formTitle}
|
||||
</h2>
|
||||
<!-- Form for user input with various input fields.-->
|
||||
<!-- Each field utilizes a different input component for the specific type of input (text, email, phone, and textarea)-->
|
||||
<form>
|
||||
<div class="grid gap-4">
|
||||
<div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
|
||||
<TextInput
|
||||
id="hs-firstname-contacts"
|
||||
label="Prénom"
|
||||
name="hs-firstname-contacts"
|
||||
/>
|
||||
<TextInput
|
||||
id="hs-lastname-contacts"
|
||||
label="Nom"
|
||||
name="hs-firstname-contacts"
|
||||
/>
|
||||
</div>
|
||||
<EmailContactInput id="hs-email-contacts" />
|
||||
<PhoneInput id="hs-phone-number" />
|
||||
<TextAreaInput
|
||||
id="hs-about-contacts"
|
||||
label="Détails"
|
||||
name="hs-about-contacts"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="mt-4 grid">
|
||||
<AuthBtn title="Envoyer un message" />
|
||||
</div>
|
||||
|
||||
<div class="mt-3 text-center">
|
||||
<p class="text-sm text-neutral-600 dark:text-neutral-400">
|
||||
{formSubTitle}
|
||||
</p>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!--ContactIconBlocks are used to display different methods of contacting, including visiting office, email, browsing knowledgebase, and FAQ.-->
|
||||
<div class="divide-y divide-neutral-300 dark:divide-neutral-700">
|
||||
<ContactIconBlock
|
||||
heading="Base de connaissances"
|
||||
content="Parcourez tous nos articles de base de connaissances."
|
||||
isLinkVisible={true}
|
||||
linkTitle="Visiter les guides et tutoriels"
|
||||
linkURL="#"
|
||||
isArrowVisible={true}
|
||||
><Icon name="question" />
|
||||
</ContactIconBlock>
|
||||
|
||||
<ContactIconBlock
|
||||
heading="FAQ"
|
||||
content="Explorez notre FAQ pour des réponses rapides et claires aux questions courantes."
|
||||
isLinkVisible={true}
|
||||
linkTitle="Visiter la FAQ"
|
||||
linkURL="#"
|
||||
isArrowVisible={true}
|
||||
><Icon name="chatBubble" />
|
||||
</ContactIconBlock>
|
||||
|
||||
<ContactIconBlock
|
||||
heading="Visitez notre bureau"
|
||||
content="ScrewFast UK"
|
||||
isAddressVisible={true}
|
||||
addressContent="72 Union Terrace, E10 4PE London"
|
||||
><Icon name="mapPin" />
|
||||
</ContactIconBlock>
|
||||
|
||||
<ContactIconBlock
|
||||
heading="Contactez-nous par e-mail"
|
||||
content="Préférez-vous le texte écrit ? Envoyez-nous un e-mail à"
|
||||
isLinkVisible={true}
|
||||
linkTitle="support@screwfast.uk"
|
||||
linkURL="#"
|
||||
><Icon name="envelopeOpen" />
|
||||
</ContactIconBlock>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
45
src/pages/fr/404.astro
Normal file
45
src/pages/fr/404.astro
Normal file
|
|
@ -0,0 +1,45 @@
|
|||
---
|
||||
// Import section components
|
||||
import MainLayout from "@/layouts/MainLayout.astro";
|
||||
import Btn404 from "@/components/ui/buttons/Btn404.astro";
|
||||
|
||||
// Define variables for page content
|
||||
const title: string = "404";
|
||||
const subTitle: string = "Oops, ce n'est pas l'outil que vous recherchiez !";
|
||||
const content: string =
|
||||
"Ne laissez pas ce contretemps vous ralentir. Revenons à la construction de votre chef-d'œuvre.";
|
||||
const btnTitle: string = "Retournez";
|
||||
---
|
||||
|
||||
<MainLayout title="Page Not Found | ScrewFast" lang="fr">
|
||||
<section class="grid h-svh place-content-center">
|
||||
<div class="mx-auto max-w-screen-xl px-4 py-8 lg:px-6 lg:py-16">
|
||||
<div class="mx-auto max-w-screen-sm text-center">
|
||||
<h1
|
||||
class="text-dark mb-4 text-7xl font-extrabold text-yellow-500 dark:text-yellow-400 lg:text-9xl"
|
||||
>
|
||||
{title}
|
||||
</h1>
|
||||
<p
|
||||
class="mb-4 text-balance text-3xl font-bold tracking-tight text-neutral-700 dark:text-neutral-300 md:text-4xl"
|
||||
>
|
||||
{subTitle}
|
||||
</p>
|
||||
|
||||
<p
|
||||
class="mb-4 text-pretty text-lg text-neutral-600 dark:text-neutral-400"
|
||||
>
|
||||
{content}
|
||||
</p>
|
||||
<!--Display a button that navigates user back to the previous page-->
|
||||
<Btn404 title={btnTitle} id="go-back" />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</MainLayout>
|
||||
<!--JavaScript code that adds click event to the Button, resulting in going back to the previous page in history-->
|
||||
<script>
|
||||
document.getElementById("go-back")?.addEventListener("click", () => {
|
||||
history.back();
|
||||
});
|
||||
</script>
|
||||
30
src/pages/fr/contact.astro
Normal file
30
src/pages/fr/contact.astro
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
---
|
||||
// Import the necessary components
|
||||
import MainLayout from "@/layouts/MainLayout.astro";
|
||||
import ContactSection from "@/components/sections/ContactSection_fr.astro";
|
||||
---
|
||||
|
||||
<!--Utilizing MainLayout for the outer layout of the page, and defining meta for SEO purposes-->
|
||||
<MainLayout
|
||||
title="Contact | ScrewFast"
|
||||
lang="fr"
|
||||
structuredData={{
|
||||
"@context": "https://schema.org",
|
||||
"@type": "WebPage",
|
||||
"@id": "https://screwfast.uk/contact",
|
||||
url: "https://screwfast.uk/contact",
|
||||
name: "Contact Us | ScrewFast",
|
||||
description:
|
||||
"Have questions or want to discuss a project? Reach out, and let's craft the perfect solution with our tools and services.",
|
||||
isPartOf: {
|
||||
"@type": "WebSite",
|
||||
url: "https://screwfast.uk",
|
||||
name: "ScrewFast",
|
||||
description:
|
||||
"ScrewFast offers top-tier hardware tools and expert construction services to meet all your project needs.",
|
||||
},
|
||||
inLanguage: "en-US",
|
||||
}}
|
||||
>
|
||||
<ContactSection />
|
||||
</MainLayout>
|
||||
143
src/pages/fr/index.astro
Normal file
143
src/pages/fr/index.astro
Normal file
|
|
@ -0,0 +1,143 @@
|
|||
---
|
||||
// Import the necessary components
|
||||
import MainLayout from "@/layouts/MainLayout.astro";
|
||||
import HeroSection from "@/components/sections/landing/HeroSection.astro";
|
||||
import HeroSectionAlt from "@/components/sections/landing/HeroSectionAlt.astro";
|
||||
import ClientsSection from "@/components/sections/landing/ClientsSection.astro";
|
||||
import FeaturesGeneral from "@/components/sections/features/FeaturesGeneral.astro";
|
||||
import FeaturesNavs from "@/components/sections/features/FeaturesNavs.astro";
|
||||
import TestimonialsSection from "@/components/sections/testimonials/TestimonialsSection.astro";
|
||||
import PricingSection from "@/components/sections/pricing/PricingSection.astro";
|
||||
import FAQ from "@/components/sections/FAQ.astro";
|
||||
import AnnouncementBanner from "@/components/ui/banners/AnnouncementBanner.astro";
|
||||
import heroImage from "@/images/hero-image.avif";
|
||||
import faqs from "@/data_files/faqs.json";
|
||||
import features from "@/data_files/features.json";
|
||||
import featureImage from "@/images/features-image.avif";
|
||||
import construction from "@/images/construction-image.avif";
|
||||
import tools from "@/images/automated-tools.avif";
|
||||
import dashboard from "@/images/dashboard-image.avif";
|
||||
|
||||
const avatarSrcs: Array<string> = [
|
||||
"https://images.unsplash.com/photo-1568602471122-7832951cc4c5?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=300&h=300&q=80",
|
||||
"https://images.unsplash.com/photo-1531927557220-a9e23c1e4794?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=300&h=300&q=80",
|
||||
"https://images.unsplash.com/photo-1541101767792-f9b2b1c4f127?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&&auto=format&fit=facearea&facepad=3&w=300&h=300&q=80",
|
||||
"https://images.unsplash.com/photo-1492562080023-ab3db95bfbce?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=300&h=300&q=80",
|
||||
];
|
||||
---
|
||||
|
||||
<MainLayout lang="fr">
|
||||
<AnnouncementBanner
|
||||
btnId="dismiss-button"
|
||||
btnTitle="Découvrez ScrewFast sur GitHub"
|
||||
url="https://github.com/mearashadowfax/ScrewFast"
|
||||
/>
|
||||
|
||||
<HeroSection
|
||||
title=`Équipez vos projets avec <span class="text-yellow-500 dark:text-yellow-400">ScrewFast</span>`
|
||||
subTitle="Outils matériels de haute qualité et services de construction experts pour tous les besoins en projet."
|
||||
primaryBtn="Commencez à explorer"
|
||||
primaryBtnURL="/products"
|
||||
secondaryBtn="Contacter l'équipe commerciale"
|
||||
secondaryBtnURL="/contact"
|
||||
withReview={true}
|
||||
avatars={avatarSrcs}
|
||||
rating=`<span class="font-bold">4.8</span> / 5`
|
||||
starCount={4}
|
||||
reviews=`À partir de plus de <span class="font-bold">12,8k</span> avis`
|
||||
src={heroImage}
|
||||
alt="Pile de boîtes de produits ScrewFast contenant des outils matériels assortis"
|
||||
/>
|
||||
|
||||
<ClientsSection
|
||||
title="Faites confiance aux leaders de l'industrie"
|
||||
subTitle="Découvrez la fiabilité choisie par les géants de l'industrie."
|
||||
/>
|
||||
|
||||
<FeaturesGeneral
|
||||
title="Répondre aux exigences de l'industrie"
|
||||
subTitle="Chez ScrewFast, nous relevons les défis uniques rencontrés dans les secteurs du matériel et de la construction. Des outils de pointe aux services experts, nous sommes déterminés à vous aider à surmonter les obstacles et à atteindre vos objectifs."
|
||||
src={featureImage}
|
||||
alt="Produits ScrewFast dans des boîtes flottantes"
|
||||
features={features}
|
||||
/>
|
||||
|
||||
<FeaturesNavs
|
||||
title=`Personnalisez les offres de <span class="text-yellow-500 dark:text-yellow-400">ScrewFast</span> pour répondre parfaitement à vos besoins en matériel et en construction.`
|
||||
tabs={[
|
||||
{
|
||||
heading: "Outils de pointe",
|
||||
content:
|
||||
"Optimisez vos projets avec les outils de pointe de ScrewFast. Faites l'expérience d'une efficacité accrue dans la gestion de la construction avec nos solutions automatisées sophistiquées.",
|
||||
svg: "tools",
|
||||
src: tools,
|
||||
alt: "Équipement lourd jaune et noir sur un champ d'herbe brune",
|
||||
first: true,
|
||||
},
|
||||
{
|
||||
heading: "Tableaux de bord intuitifs",
|
||||
content:
|
||||
"Naviguez facilement avec les tableaux de bord intuitifs de ScrewFast. Configurez et supervisez vos projets de manière transparente, avec des interfaces conviviales conçues pour une gestion efficace des flux de travail rapide et efficace.",
|
||||
svg: "dashboard",
|
||||
src: dashboard,
|
||||
alt: "Capture d'écran ou représentation graphique du tableau de bord intuitif",
|
||||
second: true,
|
||||
},
|
||||
{
|
||||
heading: "Fonctionnalités robustes",
|
||||
content:
|
||||
"Minimisez la complexité, maximisez la productivité. Les fonctionnalités robustes de ScrewFast sont conçues pour rationaliser votre processus de construction, offrant des résultats qui se distinguent par leur excellence.",
|
||||
svg: "house",
|
||||
src: construction,
|
||||
alt: "Structure métallique grise d'un bâtiment près d'une grue à tour pendant la journée",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
|
||||
<TestimonialsSection
|
||||
title="Accélérez vos projets"
|
||||
subTitle="Chez ScrewFast, nous assurons un démarrage rapide avec une configuration de compte instantanée. Découvrez la vitesse de la construction redéfinie."
|
||||
testimonials={[
|
||||
{
|
||||
content:
|
||||
"ScrewFast a considérablement augmenté l'efficacité de notre projet. La configuration a été instantanée et leurs temps de réponse rapides sont phénoménaux. Vraiment un changement de jeu dans le support matériel et de construction !",
|
||||
author: "Samantha Ruiz",
|
||||
role: "Directrice des opérations | ConstructIt Inc.",
|
||||
avatarSrc:
|
||||
"https://images.unsplash.com/photo-1593104547489-5cfb3839a3b5?q=80&w=1453&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D8&auto=format&fit=facearea&facepad=2&w=320&h=320&q=80",
|
||||
},
|
||||
]}
|
||||
statistics={[
|
||||
{
|
||||
count: "70k+",
|
||||
description:
|
||||
"clients équipés — des bricoleurs aux grandes entreprises de construction",
|
||||
},
|
||||
{
|
||||
count: "35%",
|
||||
description:
|
||||
"hausse de l'efficacité des projets avec les outils et services de ScrewFast",
|
||||
},
|
||||
{
|
||||
count: "15,3%",
|
||||
description:
|
||||
"réduction des coûts de maintenance rapportée par des clients à long terme",
|
||||
},
|
||||
{
|
||||
count: "2x",
|
||||
description:
|
||||
"assemblage plus rapide grâce à des solutions de fixation innovantes",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
|
||||
<PricingSection />
|
||||
|
||||
<FAQ title="Questions<br />fréquemment posées" faqs={faqs} />
|
||||
|
||||
<HeroSectionAlt
|
||||
title="Construisons ensemble"
|
||||
subTitle="ScrewFast est un modèle open source, méticuleusement conçu avec les frameworks Astro, Tailwind CSS et Preline UI."
|
||||
url="https://github.com/mearashadowfax/ScrewFast"
|
||||
/>
|
||||
</MainLayout>
|
||||
136
src/pages/fr/products/index.astro
Normal file
136
src/pages/fr/products/index.astro
Normal file
|
|
@ -0,0 +1,136 @@
|
|||
---
|
||||
// Importing necessary components
|
||||
import MainLayout from "@/layouts/MainLayout.astro";
|
||||
import PrimaryCTA from "@/components/ui/buttons/PrimaryCTA.astro";
|
||||
import CardSmall from "@/components/ui/cards/CardSmall.astro";
|
||||
import CardWide from "@/components/ui/cards/CardWide.astro";
|
||||
import FeaturesStatsAlt from "@/components/sections/features/FeaturesStatsAlt.astro";
|
||||
import TestimonialsSectionAlt from "@/components/sections/testimonials/TestimonialsSectionAlt.astro";
|
||||
|
||||
// Importing necessary functions from Astro
|
||||
import { getCollection } from "astro:content";
|
||||
import type { CollectionEntry } from "astro:content";
|
||||
|
||||
// Fetching all the product related content and sorting it by main.id
|
||||
const product: CollectionEntry<"products">[] = (
|
||||
await getCollection("products")
|
||||
).sort(
|
||||
(a: CollectionEntry<"products">, b: CollectionEntry<"products">) =>
|
||||
a.data.main.id - b.data.main.id
|
||||
);
|
||||
|
||||
// Define variables for page content
|
||||
const title: string = "Produits";
|
||||
const subTitle: string =
|
||||
"Explorez la durabilité et la précision des outils ScrewFast, conçus aussi bien pour les professionnels que pour les amateurs. Chacun de nos produits est fabriqué avec précision et conçu pour durer, garantissant que vous disposez du bon outil pour chaque tâche.";
|
||||
|
||||
// Testimonial data that will be rendered in the component
|
||||
const testimonials = [
|
||||
{
|
||||
content:
|
||||
"Depuis que nous avons adopté les outils matériels de ScrewFast, l'efficacité sur nos chantiers de construction a explosé. La durabilité des boulons hexagonaux et la précision des vis machine sont tout simplement inégalées. C'est rafraîchissant de travailler avec une entreprise qui comprend vraiment les exigences quotidiennes de l'industrie.",
|
||||
author: "Jason Clark",
|
||||
role: "Contremaître de chantier | TopBuild",
|
||||
avatarSrc:
|
||||
"https://images.unsplash.com/photo-1500648767791-00dcc994a43e?q=80&w=1374&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=facearea&facepad=2&w=320&h=320&q=80",
|
||||
avatarAlt: "Description de l'image",
|
||||
},
|
||||
|
||||
{
|
||||
content:
|
||||
"En tant que designer d'intérieur, je suis toujours à la recherche de matériaux et d'outils de haute qualité qui m'aident à donner vie à mes visions. L'assortiment de vis mixtes de ScrewFast a révolutionné mes projets, offrant le mélange parfait de qualité et de variété. Le support client exceptionnel était la cerise sur le gâteau !",
|
||||
author: "Maria Gonzalez",
|
||||
role: "Designer d'intérieur | Creative Spaces",
|
||||
avatarSrc:
|
||||
"https://images.unsplash.com/photo-1544005313-94ddf0286df2?q=80&w=1376&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D8&auto=format&fit=facearea&facepad=2&w=320&h=320&q=80",
|
||||
avatarAlt: "Description de l'image",
|
||||
},
|
||||
|
||||
{
|
||||
content:
|
||||
"Je suis menuisier professionnel depuis plus de 15 ans, et je peux sincèrement dire que les boulons et écrous à tarauder de ScrewFast sont parmi les meilleurs que j'ai utilisés. Ils adhèrent comme aucun autre, et j'ai une confiance totale dans chaque joint et élément. De plus, le service est impeccable - ils se soucient vraiment du succès de mon projet.",
|
||||
author: "Richard Kim",
|
||||
role: "Menuisier-Maître | WoodWright",
|
||||
avatarSrc:
|
||||
"https://images.unsplash.com/photo-1474176857210-7287d38d27c6?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D8&auto=format&fit=facearea&facepad=2&w=320&h=320&q=80",
|
||||
avatarAlt: "Description de l'image",
|
||||
},
|
||||
];
|
||||
---
|
||||
|
||||
<MainLayout
|
||||
title="Products | ScrewFast"
|
||||
lang="fr"
|
||||
structuredData={{
|
||||
"@context": "https://schema.org",
|
||||
"@type": "WebPage",
|
||||
"@id": "https://screwfast.uk/products",
|
||||
url: "https://screwfast.uk/products",
|
||||
name: "Hardware Tools | ScrewFast",
|
||||
description:
|
||||
"Explore the durability and precision of ScrewFast tools, designed for both professionals and enthusiasts.",
|
||||
isPartOf: {
|
||||
"@type": "WebSite",
|
||||
url: "https://screwfast.uk",
|
||||
name: "ScrewFast",
|
||||
description:
|
||||
"ScrewFast offers top-tier hardware tools and expert construction services to meet all your project needs.",
|
||||
},
|
||||
inLanguage: "en-US",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
class="mx-auto max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 2xl:max-w-full"
|
||||
>
|
||||
<div class="mb-4 flex items-center justify-between gap-8 sm:mb-8 md:mb-12">
|
||||
<div class="flex items-center gap-12">
|
||||
<h1
|
||||
class="text-balance text-2xl font-bold tracking-tight text-neutral-800 dark:text-neutral-200 md:text-4xl md:leading-tight"
|
||||
>
|
||||
{title}
|
||||
</h1>
|
||||
{
|
||||
subTitle && (
|
||||
<p class="hidden max-w-screen-sm text-pretty text-neutral-600 dark:text-neutral-400 md:block">
|
||||
{subTitle}
|
||||
</p>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
<PrimaryCTA
|
||||
title="Histoires de clients"
|
||||
url="#testimonials"
|
||||
noArrow={true}
|
||||
/>
|
||||
</div>
|
||||
<!--Displaying products in alternating styles. Alternative product gets different card styling.-->
|
||||
<!--Maps through all product entries and displays them with either CardSmall or CardWide based on their position.-->
|
||||
<section class="grid grid-cols-1 gap-4 sm:grid-cols-3 md:gap-6 xl:gap-8">
|
||||
{
|
||||
product.map((product, index) => {
|
||||
const position = index % 4;
|
||||
if (position === 0 || position === 3) {
|
||||
return <CardSmall product={product} />;
|
||||
} else {
|
||||
return <CardWide product={product} />;
|
||||
}
|
||||
})
|
||||
}
|
||||
</section>
|
||||
</div>
|
||||
<!--Features statistics section-->
|
||||
<FeaturesStatsAlt
|
||||
title="Pourquoi choisir ScrewFast ?"
|
||||
subTitle="Transformez vos idées en résultats tangibles avec les outils ScrewFast. Que vous commenciez par un croquis sur un coin de table ou plongiez dans un projet de construction complet, nos outils sont conçus pour vous aider à construire en toute confiance."
|
||||
benefits={[
|
||||
"Outils robustes et fiables pour des performances durables.",
|
||||
"Solutions innovantes adaptées aux besoins de construction modernes.",
|
||||
"Support client dédié au succès de votre projet.",
|
||||
]}
|
||||
/>
|
||||
<!--Testimonials section-->
|
||||
<TestimonialsSectionAlt
|
||||
title="Ce que disent nos clients"
|
||||
testimonials={testimonials}
|
||||
/>
|
||||
</MainLayout>
|
||||
181
src/pages/fr/services.astro
Normal file
181
src/pages/fr/services.astro
Normal file
|
|
@ -0,0 +1,181 @@
|
|||
---
|
||||
// Import necessary components
|
||||
import MainLayout from "@/layouts/MainLayout.astro";
|
||||
import MainSection from "@/components/ui/blocks/MainSection.astro";
|
||||
import LeftSection from "@/components/ui/blocks/LeftSection.astro";
|
||||
import RightSection from "@/components/ui/blocks/RightSection.astro";
|
||||
import FeaturesStats from "@/components/sections/features/FeaturesStats.astro";
|
||||
|
||||
// Import necessary images
|
||||
import blueprints from "@/images/blueprints-image.avif";
|
||||
import personWorking from "@/images/person-working.avif";
|
||||
import beforeAfter from "@/images/before-after.avif";
|
||||
import constructionWorkers from "@/images/construction-workers.avif";
|
||||
import aerialView from "@/images/aerial-view.avif";
|
||||
import usingTools from "@/images/using-tools.avif";
|
||||
import progressBuilding from "@/images/progress-building.avif";
|
||||
import underConstruction from "@/images/under-construction.avif";
|
||||
|
||||
interface Article {
|
||||
isRightSection: boolean;
|
||||
title: string;
|
||||
subTitle: string;
|
||||
btnExists?: boolean;
|
||||
btnTitle?: string;
|
||||
btnURL?: string;
|
||||
single?: boolean;
|
||||
img?: any;
|
||||
imgAlt?: string;
|
||||
imgOne?: any;
|
||||
imgOneAlt?: string;
|
||||
imgTwo?: any;
|
||||
imgTwoAlt?: string;
|
||||
}
|
||||
|
||||
const articles: Article[] = [
|
||||
{
|
||||
isRightSection: true,
|
||||
title: "Fournir des conseils d'experts",
|
||||
subTitle:
|
||||
"Se lancer dans un projet de construction peut être accablant. Avec nos services de consultation professionnelle, nous vous guidons à chaque étape, en veillant à ce que vous preniez des décisions éclairées. Que vous soyez un passionné du bricolage ou un entrepreneur qualifié, nos experts sont là pour vous offrir des conseils sur mesure sur la sélection de produits, l'envergure du projet et la conformité aux réglementations locales.",
|
||||
single: false,
|
||||
imgOne: blueprints,
|
||||
imgOneAlt: "Plans et tablette numérique avec des plans de construction.",
|
||||
imgTwo: personWorking,
|
||||
imgTwoAlt: "Personne travaillant au bureau",
|
||||
},
|
||||
{
|
||||
isRightSection: false,
|
||||
title: "Transformer les conceptions en réalité",
|
||||
subTitle:
|
||||
"Nos artisans qualifiés apportent précision et excellence à chaque projet de construction. Des installations mineures aux travaux structuraux substantiels, ScrewFast offre des services de construction fiables pour concrétiser vos plans. Nous assurons les normes les plus élevées de sécurité et de savoir-faire, en utilisant des outils et des matériaux de haute qualité de notre vaste inventaire.",
|
||||
img: beforeAfter,
|
||||
imgAlt: "Chantier de construction avant et après",
|
||||
btnExists: true,
|
||||
btnTitle: "En savoir plus",
|
||||
btnURL: "#",
|
||||
},
|
||||
{
|
||||
isRightSection: true,
|
||||
title: "Naviguer dans les projets avec une supervision professionnelle",
|
||||
subTitle:
|
||||
"La gestion de projet efficace est au cœur de toute construction réussie. ScrewFast offre une planification approfondie et des services de gestion solides qui maintiennent votre projet dans les délais et dans le budget. Laissez-nous gérer les complexités de la coordination des flux de travail, de l'allocation des ressources et de la communication avec les parties prenantes pendant que vous vous concentrez sur votre vision.",
|
||||
single: false,
|
||||
imgOne: constructionWorkers,
|
||||
imgOneAlt: "Ouvriers du bâtiment orchestrant un projet",
|
||||
imgTwo: aerialView,
|
||||
imgTwoAlt: "Vue aérienne d'une construction gérée",
|
||||
},
|
||||
{
|
||||
isRightSection: false,
|
||||
title: "Garantir des performances durables",
|
||||
subTitle:
|
||||
"Notre engagement envers votre projet ne s'arrête pas à son achèvement. ScrewFast propose des services de maintenance et de support continus pour assurer la longévité et les performances de votre construction. Des vérifications régulières à l'assistance en cas d'urgence, notre équipe réactive est là pour vous fournir un soutien sans faille.",
|
||||
img: usingTools,
|
||||
imgAlt:
|
||||
"Homme en gilet orange et noir portant un casque blanc tenant un outil électrique jaune et noir",
|
||||
},
|
||||
{
|
||||
isRightSection: true,
|
||||
title: "Élaboration de stratégies sur mesure pour des défis uniques",
|
||||
subTitle:
|
||||
"Pour nos clients d'entreprise de plus grande envergure, ScrewFast propose des solutions personnalisées conçues pour répondre à des défis spécifiques de l'industrie. En comprenant vos besoins uniques, nous concevons des stratégies sur mesure visant à optimiser vos opérations, à améliorer l'efficacité et à faire avancer votre entreprise.",
|
||||
single: false,
|
||||
imgOne: progressBuilding,
|
||||
imgOneAlt: "Structure de bâtiment en cours de construction",
|
||||
imgTwo: underConstruction,
|
||||
imgTwoAlt: "Bâtiment marron et gris en construction",
|
||||
btnExists: true,
|
||||
btnTitle: "Lire la suite",
|
||||
btnURL: "#",
|
||||
},
|
||||
];
|
||||
---
|
||||
|
||||
<MainLayout
|
||||
title="Services | ScrewFast"
|
||||
lang="fr"
|
||||
structuredData={{
|
||||
"@context": "https://schema.org",
|
||||
"@type": "WebPage",
|
||||
"@id": "https://screwfast.uk/services",
|
||||
url: "https://screwfast.uk/services",
|
||||
name: "Expert Consultation Services | ScrewFast",
|
||||
description:
|
||||
"Uniting expertise with your vision, ScrewFast provides exceptional service and comprehensive solutions in the hardware and construction industry, from consultation to project completion.",
|
||||
isPartOf: {
|
||||
"@type": "WebSite",
|
||||
url: "https://screwfast.uk",
|
||||
name: "ScrewFast",
|
||||
description:
|
||||
"ScrewFast offers top-tier hardware tools and expert construction services to meet all your project needs.",
|
||||
},
|
||||
inLanguage: "en-US",
|
||||
}}
|
||||
>
|
||||
<!--MainSection is the introductory section of the page, it also contains a CTA button-->
|
||||
<MainSection
|
||||
title="Unir l'expertise à votre vision"
|
||||
subTitle="Chez ScrewFast, nous sommes fiers de fournir des solutions complètes et un service exceptionnel dans l'industrie du matériel et de la construction. Notre équipe expérimentée est dédiée à soutenir votre projet de sa conception à son achèvement avec une gamme de services spécialisés."
|
||||
btnExists={true}
|
||||
btnTitle="Planifier une consultation"
|
||||
btnURL="#"
|
||||
/>
|
||||
<!-- RightSection and LeftSection contain details about various services along with pertinent imagery.
|
||||
They alternate for variety in design.
|
||||
The 'btnExists' property is used to toggle the display of a button in these sections.
|
||||
When btnExists={true}, a button is displayed.
|
||||
This can be used to link to more detailed information or related resources.
|
||||
RightSection can also conditionally render one or two images based on the 'single' property.
|
||||
If 'single' is true, it displays one image, otherwise it displays two.
|
||||
-->
|
||||
{
|
||||
articles.map((article) => {
|
||||
return article.isRightSection ? (
|
||||
<RightSection
|
||||
title={article.title}
|
||||
subTitle={article.subTitle}
|
||||
single={article.single}
|
||||
imgOne={article.imgOne}
|
||||
imgOneAlt={article.imgOneAlt}
|
||||
imgTwo={article.imgTwo}
|
||||
imgTwoAlt={article.imgTwoAlt}
|
||||
btnExists={article.btnExists}
|
||||
btnTitle={article.btnTitle}
|
||||
btnURL={article.btnURL}
|
||||
/>
|
||||
) : (
|
||||
<LeftSection
|
||||
title={article.title}
|
||||
subTitle={article.subTitle}
|
||||
img={article.img}
|
||||
imgAlt={article.imgAlt}
|
||||
btnExists={article.btnExists}
|
||||
btnTitle={article.btnTitle}
|
||||
btnURL={article.btnURL}
|
||||
/>
|
||||
);
|
||||
})
|
||||
}
|
||||
<!--FeaturesStats section showcases essential stats valuable to users-->
|
||||
<FeaturesStats
|
||||
title="Par les chiffres"
|
||||
subTitle="Notre engagement envers la qualité et la fiabilité est évident dans chaque projet que nous entreprenons. Chez ScrewFast, nous nous engageons à fournir des services de premier plan dans l'industrie qui garantissent que vos projets de construction sont conçus pour durer."
|
||||
mainStatTitle="96%"
|
||||
mainStatSubTitle="de nos clients évaluent leur expérience avec ScrewFast comme exceptionnelle"
|
||||
stats={[
|
||||
{
|
||||
stat: "99,8%",
|
||||
description: "taux de réalisation de projets",
|
||||
},
|
||||
{
|
||||
stat: "5 000+",
|
||||
description: "installations réussies",
|
||||
},
|
||||
{
|
||||
stat: "85%",
|
||||
description: "croissance client année après année",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</MainLayout>
|
||||
Loading…
Add table
Reference in a new issue