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>
86 lines
3.4 KiB
Vue
86 lines
3.4 KiB
Vue
<script setup lang="ts">
|
|
import type { Component } from "vue";
|
|
import { RouterLink } from "vue-router";
|
|
import Header from "@/components/layout/Header.vue";
|
|
import Footer from "@/components/layout/Footer.vue";
|
|
import { Button } from "@/components/ui/button";
|
|
import { ArrowRight, Phone } from "lucide-vue-next";
|
|
|
|
defineProps<{
|
|
title: string;
|
|
subtitle?: string;
|
|
description: string;
|
|
icon?: Component;
|
|
heroImage?: string;
|
|
}>();
|
|
</script>
|
|
|
|
<template>
|
|
<div class="min-h-screen bg-targo-dark text-white selection:bg-targo-green selection:text-white">
|
|
<Header />
|
|
|
|
<!-- Hero Section -->
|
|
<section class="relative pt-32 pb-20 md:pt-40 md:pb-32 overflow-hidden">
|
|
<!-- Background Elements -->
|
|
<div class="absolute inset-0 bg-[radial-gradient(circle_at_top_right,_var(--tw-gradient-stops))] from-targo-green/20 via-targo-dark to-targo-dark" />
|
|
<div class="absolute top-0 left-0 w-full h-full bg-[url('/grid-pattern.svg')] opacity-5" />
|
|
|
|
<div class="container relative mx-auto px-4">
|
|
<div
|
|
v-motion
|
|
:initial="{ opacity: 0, y: 30 }"
|
|
:enter="{ opacity: 1, y: 0, transition: { duration: 800, ease: 'easeOut' } }"
|
|
class="max-w-4xl mx-auto text-center"
|
|
>
|
|
<RouterLink
|
|
to="/business"
|
|
class="inline-flex items-center text-targo-green-light hover:text-white transition-colors mb-8 text-sm font-medium tracking-wide uppercase"
|
|
>
|
|
← Retour aux solutions affaires
|
|
</RouterLink>
|
|
|
|
<div
|
|
v-if="icon"
|
|
v-motion
|
|
:initial="{ scale: 0.8, opacity: 0 }"
|
|
:enter="{ scale: 1, opacity: 1, transition: { delay: 200, duration: 500 } }"
|
|
class="w-20 h-20 bg-targo-green/10 rounded-2xl flex items-center justify-center mx-auto mb-8 border border-targo-green/20 backdrop-blur-sm shadow-[0_0_30px_rgba(0,200,83,0.2)]"
|
|
>
|
|
<component :is="icon" class="h-10 w-10 text-targo-green" />
|
|
</div>
|
|
|
|
<h1 class="text-5xl md:text-6xl lg:text-7xl font-bold mb-6 font-display tracking-tight">
|
|
{{ title }} <span class="text-transparent bg-clip-text bg-gradient-to-r from-targo-green to-targo-green-light">{{ subtitle }}</span>
|
|
</h1>
|
|
|
|
<p class="text-lg md:text-xl text-gray-400 mb-10 max-w-3xl mx-auto leading-relaxed">
|
|
{{ description }}
|
|
</p>
|
|
|
|
<div
|
|
v-motion
|
|
:initial="{ opacity: 0, y: 20 }"
|
|
:enter="{ opacity: 1, y: 0, transition: { delay: 400, duration: 500 } }"
|
|
class="flex flex-col sm:flex-row gap-4 justify-center"
|
|
>
|
|
<Button size="lg" class="bg-targo-green hover:bg-targo-green-dark text-white font-bold text-lg px-8 py-6 rounded-xl shadow-lg shadow-targo-green/20 transition-all hover:scale-105">
|
|
Demander une soumission
|
|
<ArrowRight class="ml-2 h-5 w-5" />
|
|
</Button>
|
|
<Button size="lg" variant="outline" class="text-lg px-8 py-6 border-white/10 bg-white/5 text-white hover:bg-white/10 hover:text-white rounded-xl backdrop-blur-sm transition-all hover:scale-105">
|
|
<Phone class="mr-2 h-5 w-5" />
|
|
1-855-888-2746
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<slot />
|
|
|
|
<div class="border-t border-white/5">
|
|
<Footer />
|
|
</div>
|
|
</div>
|
|
</template>
|