3c7f04870c
Pixel-identical port of the React marketing site: Tailwind config, HSL theme tokens, fonts (Plus Jakarta Sans / Space Grotesk) and custom utilities copied verbatim; shadcn-vue (reka-ui) components; all 33 routes ported. Served at www.gigafibre.ca/next (noindex) behind nginx, ahead of replacing the React site. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
84 lines
3.4 KiB
Vue
84 lines
3.4 KiB
Vue
<script setup lang="ts">
|
|
import { Users, MapPin, Building2, Heart } from "lucide-vue-next";
|
|
import targoBureaux from "@/assets/targo-bureaux.jpg";
|
|
|
|
const features = [{
|
|
icon: MapPin,
|
|
title: "Fibre 100% locale",
|
|
description: "Un réseau fibre optique indépendant, conçu et géré localement pour notre communauté."
|
|
}, {
|
|
icon: Users,
|
|
title: "Service personnalisé",
|
|
description: "Une équipe dévouée qui connaît chaque client. Un service humain, proche de vous."
|
|
}, {
|
|
icon: Building2,
|
|
title: "Économie locale",
|
|
description: "Nous créons des emplois de qualité et soutenons les organismes et écoles de la région."
|
|
}, {
|
|
icon: Heart,
|
|
title: "Engagement communautaire",
|
|
description: "Fiers partenaires des événements locaux, nous redonnons à notre communauté."
|
|
}];
|
|
</script>
|
|
|
|
<template>
|
|
<section id="apropos" class="py-20 md:py-32">
|
|
<div class="container">
|
|
<div class="grid lg:grid-cols-2 gap-16 items-center">
|
|
<!-- Image/Visual side -->
|
|
<div class="relative">
|
|
<div class="relative rounded-3xl overflow-hidden aspect-[4/3]">
|
|
<img
|
|
:src="targoBureaux"
|
|
alt="Bureaux TARGO à Sainte-Clotilde"
|
|
class="w-full h-full object-cover"
|
|
/>
|
|
</div>
|
|
|
|
<!-- Stats card -->
|
|
<div class="absolute -bottom-6 -left-6 bg-card p-6 rounded-2xl shadow-xl border border-border">
|
|
<div class="font-display text-4xl font-bold text-primary mb-1">Ste-Clotilde</div>
|
|
<div class="text-muted-foreground">Québec, Canada</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Content side -->
|
|
<div class="space-y-8">
|
|
<div>
|
|
<span class="inline-block px-4 py-1 bg-primary/10 rounded-full text-primary font-medium text-sm mb-4">
|
|
À propos
|
|
</span>
|
|
<h2 class="font-display text-4xl md:text-5xl font-bold mb-6">
|
|
100% fibre <span class="text-gradient-targo">locale</span>
|
|
</h2>
|
|
<p class="text-muted-foreground text-lg mb-4">
|
|
Fondée il y a 20 ans par un citoyen local, TARGO est née pour connecter les citoyens d'ici,
|
|
à une époque où les grands fournisseurs ne s'y intéressaient pas. Au fil des années, nous avons
|
|
branché des milliers de familles et d'entreprises de la région, en offrant une connexion fiable
|
|
et des prix stables.
|
|
</p>
|
|
<p class="text-muted-foreground">
|
|
En choisissant TARGO, vous soutenez un service local qui réinvestit chaque année plus de
|
|
100 000 $ dans la communauté et favorise l'embauche de talents d'ici, incluant des emplois
|
|
d'été et des postes liés à l'innovation.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Features grid -->
|
|
<div class="grid sm:grid-cols-2 gap-6 pt-4">
|
|
<div v-for="feature in features" :key="feature.title" class="flex gap-4">
|
|
<div class="w-12 h-12 rounded-xl bg-primary/10 flex items-center justify-center flex-shrink-0">
|
|
<component :is="feature.icon" class="w-6 h-6 text-primary" />
|
|
</div>
|
|
<div>
|
|
<h3 class="font-display font-semibold mb-1">{{ feature.title }}</h3>
|
|
<p class="text-sm text-muted-foreground">{{ feature.description }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</template>
|