bd7a077f46
JSX collapses the newline between {price} and <sup>.cents</sup>; a Vue template
renders it as a visible space. Made the dollar amount and the <sup> cents
adjacent in Services/Telephone/Television price cards. Verified: $39.95/$25.00/$10.00.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
198 lines
8.0 KiB
Vue
198 lines
8.0 KiB
Vue
<script setup lang="ts">
|
|
import Header from "@/components/layout/Header.vue";
|
|
import Footer from "@/components/layout/Footer.vue";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Card, CardContent } from "@/components/ui/card";
|
|
import { Check, Tv, Play, Pause, Rewind, MonitorPlay, ArrowRight } from "lucide-vue-next";
|
|
|
|
const tvPlans = [
|
|
{
|
|
name: "Télé essentiel",
|
|
channels: "40+",
|
|
price: 20,
|
|
features: ["40+ chaînes populaires", "Chaînes HD incluses", "Guide TV interactif", "1 récepteur inclus"],
|
|
popular: false,
|
|
},
|
|
{
|
|
name: "Télé familial",
|
|
channels: "80+",
|
|
price: 25,
|
|
features: ["80+ chaînes variées", "Toutes les chaînes HD", "Enregistreur numérique", "2 récepteurs inclus", "Replay 7 jours"],
|
|
popular: true,
|
|
},
|
|
{
|
|
name: "Télé premium",
|
|
channels: "150+",
|
|
price: 45,
|
|
features: ["150+ chaînes premium", "Chaînes spécialisées", "Sports et cinéma inclus", "3 récepteurs inclus", "Replay 30 jours", "VOD incluse"],
|
|
popular: false,
|
|
},
|
|
];
|
|
|
|
const features = [
|
|
{
|
|
icon: MonitorPlay,
|
|
title: "Qualité HD/4K",
|
|
description: "Image cristalline sur toutes vos chaînes préférées en haute définition.",
|
|
},
|
|
{
|
|
icon: Pause,
|
|
title: "Pause & reprise",
|
|
description: "Mettez en pause le direct et reprenez quand vous le souhaitez.",
|
|
},
|
|
{
|
|
icon: Rewind,
|
|
title: "Replay 7/30 jours",
|
|
description: "Revenez en arrière et regardez les émissions que vous avez manquées.",
|
|
},
|
|
{
|
|
icon: Play,
|
|
title: "Vidéo sur demande",
|
|
description: "Accédez à un catalogue de films et séries à la demande.",
|
|
},
|
|
];
|
|
|
|
const channelCategories = [
|
|
{ name: "Nouvelles", count: "12" },
|
|
{ name: "Sports", count: "15" },
|
|
{ name: "Divertissement", count: "25" },
|
|
{ name: "Films", count: "18" },
|
|
{ name: "Enfants", count: "10" },
|
|
{ name: "Documentaires", count: "8" },
|
|
];
|
|
</script>
|
|
|
|
<template>
|
|
<div class="min-h-screen">
|
|
<Header />
|
|
<main class="">
|
|
<!-- Hero Section -->
|
|
<section class="pt-40 pb-20 bg-gradient-to-br from-secondary via-background to-secondary">
|
|
<div class="container">
|
|
<div class="max-w-3xl mx-auto text-center">
|
|
<span class="inline-block px-4 py-1 bg-primary/10 rounded-full text-primary font-medium text-sm mb-4">
|
|
Télévision HD
|
|
</span>
|
|
<h1 class="font-display text-4xl md:text-6xl font-bold mb-6">
|
|
La télé allumée <span class="text-gradient-targo">par la fibre</span>
|
|
</h1>
|
|
<p class="text-xl text-muted-foreground mb-8">
|
|
Vivez une expérience télévisuelle immersive avec la fibre ultra-rapide. Le meilleur du divertissement en haute définition pour propulser vos soirées en famille.
|
|
</p>
|
|
<div class="flex flex-col sm:flex-row gap-4 justify-center mb-16 animate-fade-in" style="animation-delay: 0.2s; animation-fill-mode: both">
|
|
<Button size="lg" class="gradient-targo glow-targo">
|
|
Voir les forfaits
|
|
<ArrowRight class="w-5 h-5 ml-2" />
|
|
</Button>
|
|
<Button size="lg" variant="outline" class="border-primary text-primary">
|
|
Chaînes disponibles
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- TV Plans Cards in Hero -->
|
|
<div class="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto">
|
|
<Card
|
|
v-for="(plan, index) in tvPlans"
|
|
:key="plan.name"
|
|
:class="`relative overflow-hidden transition-all duration-300 hover:shadow-xl hover:-translate-y-1 animate-fade-in ${plan.popular ? 'border-primary shadow-lg ring-2 ring-primary/20' : ''}`"
|
|
:style="{ animationDelay: `${0.3 + index * 0.15}s`, animationFillMode: 'both' }"
|
|
>
|
|
<div v-if="plan.popular" class="absolute top-4 right-4 px-3 py-1 gradient-targo text-primary-foreground text-xs font-medium rounded-full">
|
|
Populaire
|
|
</div>
|
|
<CardContent class="p-8 flex flex-col h-full">
|
|
<h3 class="font-display text-2xl font-bold mb-2">{{ plan.name }}</h3>
|
|
<div class="flex items-baseline gap-1 mb-6">
|
|
<span class="font-display text-5xl font-bold text-primary">${{ Math.floor(plan.price) }}<sup class="text-2xl">.00</sup></span>
|
|
<span class="text-muted-foreground">/mois +tx</span>
|
|
</div>
|
|
<div class="flex items-center gap-2 mb-6 p-3 bg-primary/10 rounded-lg">
|
|
<Tv class="w-5 h-5 text-primary" />
|
|
<span class="font-bold text-primary">{{ plan.channels }} chaînes</span>
|
|
</div>
|
|
<ul class="space-y-3 mb-8 flex-grow">
|
|
<li v-for="feature in plan.features" :key="feature" class="flex items-center gap-3">
|
|
<div class="w-5 h-5 rounded-full bg-primary/10 flex items-center justify-center flex-shrink-0">
|
|
<Check class="w-3 h-3 text-primary" />
|
|
</div>
|
|
<span class="text-sm text-muted-foreground">{{ feature }}</span>
|
|
</li>
|
|
</ul>
|
|
<div class="mt-auto">
|
|
<Button
|
|
:class="`w-full ${plan.popular ? 'gradient-targo' : ''}`"
|
|
:variant="plan.popular ? 'default' : 'outline'"
|
|
as-child
|
|
>
|
|
<a href="/#contact">Choisir ce forfait</a>
|
|
</Button>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Channel Categories -->
|
|
<section class="py-16 bg-primary text-primary-foreground">
|
|
<div class="container">
|
|
<div class="grid grid-cols-2 md:grid-cols-6 gap-6 text-center">
|
|
<div v-for="category in channelCategories" :key="category.name">
|
|
<span class="font-display text-4xl font-bold">{{ category.count }}</span>
|
|
<p class="text-primary-foreground/80">{{ category.name }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
|
|
<!-- Features -->
|
|
<section class="py-20 bg-secondary/50">
|
|
<div class="container">
|
|
<div class="text-center max-w-2xl mx-auto mb-16">
|
|
<h2 class="font-display text-4xl font-bold mb-4">
|
|
Fonctionnalités avancées
|
|
</h2>
|
|
<p class="text-muted-foreground text-lg">
|
|
Plus qu'une simple télévision, une expérience interactive complète.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
|
|
<Card v-for="feature in features" :key="feature.title" class="text-center p-6">
|
|
<CardContent class="p-0">
|
|
<div class="w-16 h-16 mx-auto mb-4 rounded-2xl gradient-targo flex items-center justify-center">
|
|
<component :is="feature.icon" class="w-8 h-8 text-primary-foreground" />
|
|
</div>
|
|
<h3 class="font-display text-xl font-bold mb-2">{{ feature.title }}</h3>
|
|
<p class="text-muted-foreground text-sm">{{ feature.description }}</p>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Combo offer -->
|
|
<section class="py-20">
|
|
<div class="container">
|
|
<Card class="gradient-targo p-12 text-center text-primary-foreground">
|
|
<h2 class="font-display text-3xl md:text-4xl font-bold mb-4">
|
|
Économisez avec nos combos
|
|
</h2>
|
|
<p class="text-xl mb-8 text-primary-foreground/90">
|
|
Combinez Internet + Télé + Téléphone et économisez jusqu'à 20% sur votre facture.
|
|
</p>
|
|
<Button size="lg" variant="secondary" class="text-primary font-semibold">
|
|
Voir les combos
|
|
<ArrowRight class="w-5 h-5 ml-2" />
|
|
</Button>
|
|
</Card>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
<Footer />
|
|
</div>
|
|
</template>
|