88dc3714a1
React/Vite/shadcn-ui site for Gigafibre ISP. Address qualification via PostgreSQL (5.2M AQ addresses, pg_trgm fuzzy search). No Supabase dependency for address search. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
81 lines
3.6 KiB
TypeScript
81 lines
3.6 KiB
TypeScript
import { Users, MapPin, Building2, Heart } from "lucide-react";
|
|
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é."
|
|
}];
|
|
const About = () => {
|
|
return <section id="apropos" className="py-20 md:py-32">
|
|
<div className="container">
|
|
<div className="grid lg:grid-cols-2 gap-16 items-center">
|
|
{/* Image/Visual side */}
|
|
<div className="relative">
|
|
<div className="relative rounded-3xl overflow-hidden aspect-[4/3]">
|
|
<img
|
|
src={targoBureaux}
|
|
alt="Bureaux TARGO à Sainte-Clotilde"
|
|
className="w-full h-full object-cover"
|
|
/>
|
|
</div>
|
|
|
|
{/* Stats card */}
|
|
<div className="absolute -bottom-6 -left-6 bg-card p-6 rounded-2xl shadow-xl border border-border">
|
|
<div className="font-display text-4xl font-bold text-primary mb-1">Ste-Clotilde</div>
|
|
<div className="text-muted-foreground">Québec, Canada</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Content side */}
|
|
<div className="space-y-8">
|
|
<div>
|
|
<span className="inline-block px-4 py-1 bg-primary/10 rounded-full text-primary font-medium text-sm mb-4">
|
|
À propos
|
|
</span>
|
|
<h2 className="font-display text-4xl md:text-5xl font-bold mb-6">
|
|
100% fibre <span className="text-gradient-targo">locale</span>
|
|
</h2>
|
|
<p className="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 className="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 className="grid sm:grid-cols-2 gap-6 pt-4">
|
|
{features.map(feature => <div key={feature.title} className="flex gap-4">
|
|
<div className="w-12 h-12 rounded-xl bg-primary/10 flex items-center justify-center flex-shrink-0">
|
|
<feature.icon className="w-6 h-6 text-primary" />
|
|
</div>
|
|
<div>
|
|
<h3 className="font-display font-semibold mb-1">{feature.title}</h3>
|
|
<p className="text-sm text-muted-foreground">{feature.description}</p>
|
|
</div>
|
|
</div>)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>;
|
|
};
|
|
export default About; |