Saad Ibn-Ezzoubayr
35545c2a8f
Initial commit of the L'Ami Fiduciaire SaaS platform built on Laravel 12, Vue 3, Inertia.js 2, and Tailwind CSS 4. Story 0.1 (rename folders to declarations in database) is implemented and code-reviewed: migration, rollback, and 6 Pest tests all passing. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
213 lines
10 KiB
Vue
213 lines
10 KiB
Vue
<script setup lang="ts">
|
|
import { Head, Link } from '@inertiajs/vue3';
|
|
import { dashboard, login, register } from '@/routes';
|
|
import AppLogoIcon from '@/components/AppLogoIcon.vue';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
|
import { Separator } from '@/components/ui/separator';
|
|
import {
|
|
Building2,
|
|
Calendar,
|
|
FileCheck,
|
|
Mail,
|
|
Shield,
|
|
Users,
|
|
} from 'lucide-vue-next';
|
|
|
|
withDefaults(
|
|
defineProps<{
|
|
canRegister: boolean;
|
|
}>(),
|
|
{
|
|
canRegister: true,
|
|
},
|
|
);
|
|
</script>
|
|
|
|
<template>
|
|
<Head :title="`${$page.props.name} — Gestion des dossiers fiscaux`" />
|
|
|
|
<div class="min-h-screen bg-background">
|
|
<!-- Header -->
|
|
<header class="sticky top-0 z-50 border-b border-sidebar-border/70 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
|
|
<div class="mx-auto flex h-16 max-w-6xl items-center justify-between px-4">
|
|
<Link href="/" class="flex items-center gap-2 font-semibold">
|
|
<AppLogoIcon class="size-8 fill-current text-primary" />
|
|
<span>{{ $page.props.name }}</span>
|
|
</Link>
|
|
<nav class="flex items-center gap-4">
|
|
<template v-if="$page.props.auth.user">
|
|
<Button as-child>
|
|
<Link :href="dashboard()">Tableau de bord</Link>
|
|
</Button>
|
|
</template>
|
|
<template v-else>
|
|
<Button variant="ghost" as-child>
|
|
<Link :href="login()">Connexion</Link>
|
|
</Button>
|
|
<Button v-if="canRegister" as-child>
|
|
<Link :href="register()">Créer un compte</Link>
|
|
</Button>
|
|
</template>
|
|
</nav>
|
|
</div>
|
|
</header>
|
|
|
|
<main>
|
|
<!-- Hero -->
|
|
<section class="px-4 py-20 md:py-28">
|
|
<div class="mx-auto max-w-4xl text-center">
|
|
<h1 class="text-4xl font-bold tracking-tight sm:text-5xl lg:text-6xl">
|
|
Simplifiez la gestion des
|
|
<span class="text-primary">dossiers fiscaux</span>
|
|
</h1>
|
|
<p class="mt-6 max-w-2xl mx-auto text-lg text-muted-foreground">
|
|
Plateforme dédiée aux cabinets d'expertise comptable au Maroc.
|
|
Centralisez les documents, les demandes de pièces et les validations clients en un seul endroit.
|
|
</p>
|
|
<div class="mt-10 flex flex-wrap items-center justify-center gap-4">
|
|
<template v-if="$page.props.auth.user">
|
|
<Button size="lg" as-child>
|
|
<Link :href="dashboard()">Accéder au tableau de bord</Link>
|
|
</Button>
|
|
</template>
|
|
<template v-else>
|
|
<Button size="lg" as-child>
|
|
<Link :href="register()">Commencer gratuitement</Link>
|
|
</Button>
|
|
<Button size="lg" variant="outline" as-child>
|
|
<Link :href="login()">Se connecter</Link>
|
|
</Button>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<Separator />
|
|
|
|
<!-- Features -->
|
|
<section class="px-4 py-20">
|
|
<div class="mx-auto max-w-6xl">
|
|
<div class="text-center mb-16">
|
|
<h2 class="text-3xl font-bold tracking-tight sm:text-4xl">
|
|
Tout ce dont votre cabinet a besoin
|
|
</h2>
|
|
<p class="mt-4 max-w-2xl mx-auto text-muted-foreground">
|
|
Une solution complète pour gérer les échanges de documents fiscaux avec vos clients.
|
|
</p>
|
|
</div>
|
|
<div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
|
|
<Card>
|
|
<CardHeader>
|
|
<div class="mb-2 flex size-12 items-center justify-center rounded-lg bg-primary/10">
|
|
<Users class="size-6 text-primary" />
|
|
</div>
|
|
<CardTitle>Gestion des clients</CardTitle>
|
|
<CardDescription>
|
|
Gérez vos clients et leurs informations (ICE, IF, RC, CNSS…)
|
|
</CardDescription>
|
|
</CardHeader>
|
|
</Card>
|
|
<Card>
|
|
<CardHeader>
|
|
<div class="mb-2 flex size-12 items-center justify-center rounded-lg bg-primary/10">
|
|
<Calendar class="size-6 text-primary" />
|
|
</div>
|
|
<CardTitle>Dossiers par type</CardTitle>
|
|
<CardDescription>
|
|
TVA, IS, IR, CNSS, Bilan annuel — créez et suivez vos dossiers
|
|
</CardDescription>
|
|
</CardHeader>
|
|
</Card>
|
|
<Card>
|
|
<CardHeader>
|
|
<div class="mb-2 flex size-12 items-center justify-center rounded-lg bg-primary/10">
|
|
<Mail class="size-6 text-primary" />
|
|
</div>
|
|
<CardTitle>Invitations sécurisées</CardTitle>
|
|
<CardDescription>
|
|
Envoyez des liens par email pour que vos clients déposent leurs documents
|
|
</CardDescription>
|
|
</CardHeader>
|
|
</Card>
|
|
<Card>
|
|
<CardHeader>
|
|
<div class="mb-2 flex size-12 items-center justify-center rounded-lg bg-primary/10">
|
|
<FileCheck class="size-6 text-primary" />
|
|
</div>
|
|
<CardTitle>Documents centralisés</CardTitle>
|
|
<CardDescription>
|
|
Tous les documents dans un espace unique, avec historique et téléchargement
|
|
</CardDescription>
|
|
</CardHeader>
|
|
</Card>
|
|
<!-- <Card>
|
|
<CardHeader>
|
|
<div class="mb-2 flex size-12 items-center justify-center rounded-lg bg-primary/10">
|
|
<Building2 class="size-6 text-primary" />
|
|
</div>
|
|
<CardTitle>Multi-tenant</CardTitle>
|
|
<CardDescription>
|
|
Un workspace par cabinet, isolation complète des données
|
|
</CardDescription>
|
|
</CardHeader>
|
|
</Card> -->
|
|
<Card>
|
|
<CardHeader>
|
|
<div class="mb-2 flex size-12 items-center justify-center rounded-lg bg-primary/10">
|
|
<Shield class="size-6 text-primary" />
|
|
</div>
|
|
<CardTitle>Validation client</CardTitle>
|
|
<CardDescription>
|
|
Demandez une confirmation avec signature pour valider vos situations
|
|
</CardDescription>
|
|
</CardHeader>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<Separator />
|
|
|
|
<!-- CTA -->
|
|
<section class="px-4 py-20">
|
|
<div class="mx-auto max-w-4xl text-center">
|
|
<h2 class="text-3xl font-bold tracking-tight sm:text-4xl">
|
|
Prêt à simplifier votre quotidien ?
|
|
</h2>
|
|
<p class="mt-4 text-muted-foreground">
|
|
Rejoignez les cabinets qui font confiance à {{ $page.props.name }}.
|
|
</p>
|
|
<div class="mt-8">
|
|
<template v-if="$page.props.auth.user">
|
|
<Button size="lg" as-child>
|
|
<Link :href="dashboard()">Accéder au tableau de bord</Link>
|
|
</Button>
|
|
</template>
|
|
<template v-else>
|
|
<Button size="lg" as-child>
|
|
<Link :href="register()">Créer un compte gratuit</Link>
|
|
</Button>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<!-- Footer -->
|
|
<footer class="border-t border-sidebar-border/70 py-8">
|
|
<div class="mx-auto max-w-6xl px-4">
|
|
<div class="flex flex-col items-center justify-between gap-4 sm:flex-row">
|
|
<div class="flex items-center gap-2">
|
|
<AppLogoIcon class="size-5 fill-current text-muted-foreground" />
|
|
<span class="text-sm text-muted-foreground">{{ $page.props.name }}</span>
|
|
</div>
|
|
<p class="text-sm text-muted-foreground">
|
|
Tous droits réservés © {{ new Date().getFullYear() }} {{ $page.props.name }}.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
</template>
|