d8052bb17c
Footer internal links were absolute anchors copied verbatim from React (correct at root, but under /next they jumped out to the React site). Switched the 7 route links to RouterLink so the router base is applied; hash (#apropos/#contact) and external (store.targo.ca) links left as-is. Verified: footer now links /next/internet, /next/support, /next/accessibilite, etc. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
94 lines
5.1 KiB
Vue
94 lines
5.1 KiB
Vue
<script setup lang="ts">
|
|
import { Phone, Mail, MapPin } from "lucide-vue-next";
|
|
import targoLogo from "@/assets/targo-logo.png";
|
|
|
|
const currentYear = new Date().getFullYear();
|
|
</script>
|
|
|
|
<template>
|
|
<footer class="bg-targo-dark text-white pt-24 pb-12 border-t border-white/5 relative overflow-hidden">
|
|
<!-- Decorative background element -->
|
|
<div class="absolute top-0 right-0 w-[500px] h-[500px] bg-targo-green/5 rounded-full blur-[120px] -translate-y-1/2 translate-x-1/2 pointer-events-none" />
|
|
|
|
<div class="container">
|
|
<div class="grid md:grid-cols-4 gap-12 mb-12">
|
|
<!-- Brand -->
|
|
<div class="md:col-span-1 space-y-6">
|
|
<img :src="targoLogo" alt="Targo - 100% Fibre" class="h-10 mb-2 brightness-0 invert" />
|
|
<p class="text-white/60 text-sm leading-relaxed max-w-xs">La puissance de la fibre locale.
|
|
La fiabilité, la performance et l'expertise à proximité pour propulser vos communications.</p>
|
|
</div>
|
|
|
|
<!-- Quick links -->
|
|
<div>
|
|
<h4 class="font-display font-bold mb-6 text-lg">Services</h4>
|
|
<ul class="space-y-3 text-sm text-white/60">
|
|
<li><RouterLink to="/internet" class="hover:text-targo-green transition-colors">Internet</RouterLink></li>
|
|
<li><RouterLink to="/television" class="hover:text-targo-green transition-colors">Télévision</RouterLink></li>
|
|
<li><RouterLink to="/telephone" class="hover:text-targo-green transition-colors">Téléphone</RouterLink></li>
|
|
<li><RouterLink to="/support" class="hover:text-targo-green transition-colors">Support</RouterLink></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- Company -->
|
|
<div>
|
|
<h4 class="font-display font-bold mb-6 text-lg">Plus</h4>
|
|
<ul class="space-y-3 text-sm text-white/60">
|
|
<li><a href="#apropos" class="hover:text-targo-green transition-colors">À propos</a></li>
|
|
<li><a href="#contact" class="hover:text-targo-green transition-colors">Contact</a></li>
|
|
<li><a href="https://store.targo.ca/clients" class="hover:text-targo-green transition-colors">Mon compte</a></li>
|
|
<li><RouterLink to="/politique-de-confidentialite" class="hover:text-targo-green transition-colors">Politique de confidentialité</RouterLink></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- Contact -->
|
|
<div>
|
|
<h4 class="font-sans font-bold mb-8 text-white uppercase tracking-widest text-xs">Nous joindre</h4>
|
|
<ul class="space-y-5 text-sm">
|
|
<li class="flex items-center gap-4 group">
|
|
<div class="w-10 h-10 rounded-xl bg-white/5 flex items-center justify-center group-hover:bg-targo-green group-hover:text-white transition-all duration-300">
|
|
<Phone class="w-5 h-5" />
|
|
</div>
|
|
<div class="flex flex-col">
|
|
<span class="text-white/50 text-[10px] uppercase font-bold tracking-wider">Appelez-nous</span>
|
|
<span class="text-white/80 font-medium group-hover:text-targo-green transition-colors">514-448-0773</span>
|
|
</div>
|
|
</li>
|
|
<li class="flex items-center gap-4 group">
|
|
<div class="w-10 h-10 rounded-xl bg-white/5 flex items-center justify-center group-hover:bg-targo-green group-hover:text-white transition-all duration-300">
|
|
<Mail class="w-5 h-5" />
|
|
</div>
|
|
<div class="flex flex-col">
|
|
<span class="text-white/50 text-[10px] uppercase font-bold tracking-wider">Écrivez-nous</span>
|
|
<span class="text-white/80 font-medium group-hover:text-targo-green transition-colors">support@targo.ca</span>
|
|
</div>
|
|
</li>
|
|
<li class="flex items-start gap-4 group">
|
|
<div class="w-10 h-10 rounded-xl bg-white/5 flex items-center justify-center group-hover:bg-targo-green group-hover:text-white transition-all duration-300 mt-1">
|
|
<MapPin class="w-5 h-5" />
|
|
</div>
|
|
<div class="flex flex-col">
|
|
<span class="text-white/50 text-[10px] uppercase font-bold tracking-wider">Visitez-nous</span>
|
|
<span class="text-white/80 font-medium leading-relaxed group-hover:text-targo-green transition-colors">
|
|
1867 chemin de la rivière<br />Ste-Clotilde, Québec
|
|
</span>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Bottom -->
|
|
<div class="pt-12 border-t border-white/5 flex flex-col md:flex-row justify-between items-center gap-6">
|
|
<p class="text-xs text-white/40 font-medium">
|
|
© {{ currentYear }} TARGO Communications. Tous droits réservés.
|
|
</p>
|
|
<div class="flex items-center gap-8 text-xs font-semibold uppercase tracking-wider text-white/40">
|
|
<RouterLink to="/accessibilite" class="hover:text-targo-green transition-all">Plan d'accessibilité</RouterLink>
|
|
<RouterLink to="/politique-de-confidentialite" class="hover:text-targo-green transition-all">Conditions d'utilisation</RouterLink>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
</template>
|