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>
76 lines
2.6 KiB
Vue
76 lines
2.6 KiB
Vue
<script setup lang="ts">
|
|
import { CheckCircle, ArrowRight } from "lucide-vue-next";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
|
|
|
|
interface PricingTier {
|
|
name: string;
|
|
price: string;
|
|
description: string;
|
|
features: string[];
|
|
popular?: boolean;
|
|
promo?: string;
|
|
}
|
|
|
|
withDefaults(defineProps<{
|
|
title?: string;
|
|
subtitle?: string;
|
|
tiers: PricingTier[];
|
|
}>(), {
|
|
title: "Nos forfaits",
|
|
subtitle: "Simple et transparent",
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<section class="py-16 md:py-24 bg-muted/30">
|
|
<div class="container mx-auto px-4">
|
|
<div v-if="title || subtitle" class="text-center max-w-2xl mx-auto mb-12">
|
|
<h2 class="text-3xl md:text-4xl font-bold text-foreground mb-4 font-display">{{ title }}</h2>
|
|
<p class="text-muted-foreground">{{ subtitle }}</p>
|
|
</div>
|
|
|
|
<div class="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto">
|
|
<Card
|
|
v-for="(tier, index) in tiers"
|
|
:key="index"
|
|
:class="`relative ${tier.popular ? 'border-primary border-2 shadow-xl' : ''}`"
|
|
>
|
|
<span v-if="tier.popular" class="absolute -top-3 left-1/2 -translate-x-1/2 bg-primary text-primary-foreground px-4 py-1 rounded-full text-sm font-medium">
|
|
Recommandé
|
|
</span>
|
|
|
|
<CardHeader class="text-center pt-8">
|
|
<CardTitle class="text-2xl">{{ tier.name }}</CardTitle>
|
|
<CardDescription>{{ tier.description }}</CardDescription>
|
|
<div class="mt-4">
|
|
<span class="text-4xl font-bold text-primary">{{ tier.price }}</span>
|
|
<span class="text-muted-foreground text-sm">/mois</span>
|
|
</div>
|
|
</CardHeader>
|
|
|
|
<CardContent>
|
|
<ul class="space-y-3 mb-6">
|
|
<li v-for="(feature, i) in tier.features" :key="i" class="flex items-start gap-3 text-sm text-muted-foreground">
|
|
<CheckCircle class="w-5 h-5 text-primary flex-shrink-0" />
|
|
<span>{{ feature }}</span>
|
|
</li>
|
|
</ul>
|
|
|
|
<Button
|
|
class="w-full"
|
|
:variant="tier.popular ? 'default' : 'outline'"
|
|
as-child
|
|
>
|
|
<a href="/#contact">Choisir ce forfait <ArrowRight class="w-4 h-4 ml-2" /></a>
|
|
</Button>
|
|
<p v-if="tier.promo" class="text-xs text-primary text-center font-medium mt-4">
|
|
{{ tier.promo }}
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</template>
|