295 lines
17 KiB
TypeScript
295 lines
17 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
|
import HeroBillboardRotatedCarousel from '@/components/sections/hero/HeroBillboardRotatedCarousel';
|
|
import MediaAbout from '@/components/sections/about/MediaAbout';
|
|
import FeatureCardOne from '@/components/sections/feature/FeatureCardOne';
|
|
import ContactCTA from '@/components/sections/contact/ContactCTA';
|
|
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="text-shift"
|
|
defaultTextAnimation="background-highlight"
|
|
borderRadius="soft"
|
|
contentWidth="smallMedium"
|
|
sizing="mediumLarge"
|
|
background="none"
|
|
cardStyle="glass-depth"
|
|
primaryButtonStyle="diagonal-gradient"
|
|
secondaryButtonStyle="glass"
|
|
headingFontWeight="medium"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarLayoutFloatingOverlay
|
|
brandName="Synthèse"
|
|
navItems={[
|
|
{ name: "Comment ça marche", id: "how-it-works" },
|
|
{ name: "Fonctionnalités", id: "features" },
|
|
{ name: "Exemples", id: "examples" },
|
|
{ name: "Ressources", id: "resources" }
|
|
]}
|
|
button={{
|
|
text: "Créer mon diagnostic", href: "#contact"
|
|
}}
|
|
className="sticky top-4 z-50"
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroBillboardRotatedCarousel
|
|
title="Transformez votre façon de travailler en application"
|
|
description="Vous nous décrivez comment vous travaillez. Nous construisons l'outil autour."
|
|
tag="Nouvelle approche"
|
|
buttons={[
|
|
{ text: "Créer mon diagnostic", href: "#contact" }
|
|
]}
|
|
carouselItems={[
|
|
{
|
|
id: "1", imageSrc: "http://img.b2bpic.net/free-photo/investor-addresses-factory-management-investment-pitch-meeting_482257-126957.jpg?_wi=1", imageAlt: "Spline animation placeholder - workflow to application"
|
|
},
|
|
{
|
|
id: "2", imageSrc: "http://img.b2bpic.net/free-photo/investor-addresses-factory-management-investment-pitch-meeting_482257-126957.jpg?_wi=2", imageAlt: "Application customization flow"
|
|
},
|
|
{
|
|
id: "3", imageSrc: "http://img.b2bpic.net/free-photo/investor-addresses-factory-management-investment-pitch-meeting_482257-126957.jpg?_wi=3", imageAlt: "Workflow transformation"
|
|
},
|
|
{
|
|
id: "4", imageSrc: "http://img.b2bpic.net/free-photo/investor-addresses-factory-management-investment-pitch-meeting_482257-126957.jpg?_wi=4", imageAlt: "Custom app generation"
|
|
},
|
|
{
|
|
id: "5", imageSrc: "http://img.b2bpic.net/free-photo/investor-addresses-factory-management-investment-pitch-meeting_482257-126957.jpg?_wi=5", imageAlt: "Business process automation"
|
|
},
|
|
{
|
|
id: "6", imageSrc: "http://img.b2bpic.net/free-photo/investor-addresses-factory-management-investment-pitch-meeting_482257-126957.jpg?_wi=6", imageAlt: "Digital workflow visualization"
|
|
}
|
|
]}
|
|
background={{ variant: "plain" }}
|
|
autoPlay={true}
|
|
autoPlayInterval={4000}
|
|
className="py-20 md:py-28"
|
|
/>
|
|
</div>
|
|
|
|
<div id="problem" data-section="problem">
|
|
<MediaAbout
|
|
title="Pourquoi adapter votre entreprise à un logiciel standard ?"
|
|
description="Pendant longtemps les entreprises devaient adapter leur façon de travailler aux logiciels existants. Aujourd'hui il est possible de faire l'inverse."
|
|
useInvertedBackground={false}
|
|
imageSrc="http://img.b2bpic.net/free-photo/empty-high-end-office-workspace-with-advanced-technology-enhance-efficiency_482257-119656.jpg"
|
|
imageAlt="Outils traditionnels disparates"
|
|
/>
|
|
</div>
|
|
|
|
<div id="how-it-works" data-section="how-it-works">
|
|
<FeatureCardOne
|
|
title="Tout part de votre façon de travailler"
|
|
description="Un processus simple en trois étapes pour transformer votre workflow en application."
|
|
features={[
|
|
{
|
|
title: "Vous décrivez votre workflow", description: "Expliquez simplement comment vos équipes travaillent, vos processus clés et vos outils actuels.", imageSrc: "http://img.b2bpic.net/free-photo/investor-addresses-factory-management-investment-pitch-meeting_482257-126957.jpg?_wi=7", imageAlt: "Workflow description interface"
|
|
},
|
|
{
|
|
title: "Nous analysons vos tâches", description: "Notre système analyse vos besoins spécifiques et identifie les opportunités d'optimisation.", imageSrc: "http://img.b2bpic.net/free-photo/investor-addresses-factory-management-investment-pitch-meeting_482257-126957.jpg?_wi=8", imageAlt: "Analysis and task mapping"
|
|
},
|
|
{
|
|
title: "Nous construisons votre application", description: "Votre application personnalisée est générée et prête à intégrer dans votre entreprise.", imageSrc: "http://img.b2bpic.net/free-photo/investor-addresses-factory-management-investment-pitch-meeting_482257-126957.jpg?_wi=9", imageAlt: "Application generation"
|
|
}
|
|
]}
|
|
gridVariant="one-large-right-three-stacked-left"
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
className="py-20 md:py-28"
|
|
/>
|
|
</div>
|
|
|
|
<div id="workflow-demo" data-section="workflow-demo">
|
|
<FeatureCardOne
|
|
title="Décrivez simplement comment vous travaillez"
|
|
description="Voici quelques exemples de workflows que vous pouvez décrire."
|
|
features={[
|
|
{
|
|
title: "Exemple 1: Gestion des demandes clients", description: "Demande client → création devis → envoi devis", imageSrc: "http://img.b2bpic.net/free-vector/hand-drawn-mobile-app-banner-template_52683-5840.jpg?_wi=1", imageAlt: "Client request workflow"
|
|
},
|
|
{
|
|
title: "Exemple 2: Planning production", description: "Planning production → organisation équipe → partage planning", imageSrc: "http://img.b2bpic.net/free-vector/hand-drawn-mobile-app-banner-template_52683-5840.jpg?_wi=2", imageAlt: "Production planning workflow"
|
|
},
|
|
{
|
|
title: "Video placeholder", description: "Démonstration du workflow builder", imageSrc: "http://img.b2bpic.net/free-vector/hand-drawn-mobile-app-banner-template_52683-5840.jpg?_wi=3", imageAlt: "Workflow builder demo"
|
|
}
|
|
]}
|
|
gridVariant="uniform-all-items-equal"
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
className="py-20 md:py-28"
|
|
/>
|
|
</div>
|
|
|
|
<div id="generated-features" data-section="generated-features">
|
|
<FeatureCardOne
|
|
title="Votre futur outil pourrait inclure"
|
|
description="Ces fonctions deviennent les modules de votre application, adaptés précisément à vos besoins."
|
|
features={[
|
|
{
|
|
title: "Gestion des demandes clients", description: "Centralisez et suivez toutes les demandes avec workflows automatisés.", imageSrc: "http://img.b2bpic.net/free-photo/financial-program-user-interface-pc-screen-home-office-desk_482257-118861.jpg?_wi=1", imageAlt: "Client request management"
|
|
},
|
|
{
|
|
title: "Génération de devis", description: "Créez des devis professionnels en quelques clics.", imageSrc: "http://img.b2bpic.net/free-photo/financial-program-user-interface-pc-screen-home-office-desk_482257-118861.jpg?_wi=2", imageAlt: "Quote generation"
|
|
},
|
|
{
|
|
title: "Planning équipe", description: "Organisez et partagez facilement les emplois du temps.", imageSrc: "http://img.b2bpic.net/free-photo/financial-program-user-interface-pc-screen-home-office-desk_482257-118861.jpg?_wi=3", imageAlt: "Team planning"
|
|
},
|
|
{
|
|
title: "Suivi client", description: "Suivez l'historique complet de chaque client.", imageSrc: "http://img.b2bpic.net/free-photo/financial-program-user-interface-pc-screen-home-office-desk_482257-118861.jpg?_wi=4", imageAlt: "Client tracking"
|
|
},
|
|
{
|
|
title: "Gestion documents", description: "Organisez et accédez facilement à tous vos documents.", imageSrc: "http://img.b2bpic.net/free-photo/financial-program-user-interface-pc-screen-home-office-desk_482257-118861.jpg?_wi=5", imageAlt: "Document management"
|
|
}
|
|
]}
|
|
gridVariant="two-columns-alternating-heights"
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
className="py-20 md:py-28"
|
|
/>
|
|
</div>
|
|
|
|
<div id="app-interface" data-section="app-interface">
|
|
<MediaAbout
|
|
title="Une application simple pour votre entreprise"
|
|
description="Interface épurée avec navigation intuitive et fonctionnalités utiles."
|
|
useInvertedBackground={true}
|
|
imageSrc="http://img.b2bpic.net/free-photo/financial-program-user-interface-pc-screen-home-office-desk_482257-118861.jpg?_wi=6"
|
|
imageAlt="App interface preview with sidebar navigation"
|
|
/>
|
|
</div>
|
|
|
|
<div id="possible-features" data-section="possible-features">
|
|
<FeatureCardOne
|
|
title="Les applications Synthèse peuvent inclure"
|
|
description="Certaines fonctions peuvent simplifier certaines tâches répétitives lorsque cela apporte un vrai gain de temps."
|
|
features={[
|
|
{
|
|
title: "Gestion des devis", description: "Automatisez la création et le suivi des devis.", imageSrc: "http://img.b2bpic.net/free-photo/financial-program-user-interface-pc-screen-home-office-desk_482257-118861.jpg?_wi=7", imageAlt: "Quote management"
|
|
},
|
|
{
|
|
title: "Planning d'équipe", description: "Coordonnez les horaires et les ressources.", imageSrc: "http://img.b2bpic.net/free-photo/financial-program-user-interface-pc-screen-home-office-desk_482257-118861.jpg?_wi=8", imageAlt: "Team planning tools"
|
|
},
|
|
{
|
|
title: "Suivi clients", description: "Maintenez une vue complète du parcours client.", imageSrc: "http://img.b2bpic.net/free-photo/financial-program-user-interface-pc-screen-home-office-desk_482257-118861.jpg?_wi=9", imageAlt: "Client tracking"
|
|
},
|
|
{
|
|
title: "Gestion documents", description: "Stockez et organisez tous vos documents importants.", imageSrc: "http://img.b2bpic.net/free-photo/financial-program-user-interface-pc-screen-home-office-desk_482257-118861.jpg?_wi=10", imageAlt: "Document management"
|
|
},
|
|
{
|
|
title: "Organisation des tâches", description: "Gérez les tâches et les projets efficacement.", imageSrc: "http://img.b2bpic.net/free-photo/financial-program-user-interface-pc-screen-home-office-desk_482257-118861.jpg?_wi=11", imageAlt: "Task organization"
|
|
},
|
|
{
|
|
title: "Tableau de bord d'activité", description: "Visualisez les métriques clés en temps réel.", imageSrc: "http://img.b2bpic.net/free-photo/financial-program-user-interface-pc-screen-home-office-desk_482257-118861.jpg?_wi=12", imageAlt: "Activity dashboard"
|
|
}
|
|
]}
|
|
gridVariant="three-columns-all-equal-width"
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
className="py-20 md:py-28"
|
|
/>
|
|
</div>
|
|
|
|
<div id="real-examples" data-section="real-examples">
|
|
<FeatureCardOne
|
|
title="Exemple concret"
|
|
description="Comment un workflow se transforme en module applicatif."
|
|
features={[
|
|
{
|
|
title: "Workflow: Emails commerciaux", description: "emails des commerciaux → création devis → envoi client", imageSrc: "http://img.b2bpic.net/free-vector/hand-drawn-mobile-app-banner-template_52683-5840.jpg?_wi=4", imageAlt: "Commercial email workflow"
|
|
},
|
|
{
|
|
title: "Module résultant: Devis", description: "demandes commerciales • création devis • suivi statut", imageSrc: "http://img.b2bpic.net/free-photo/financial-program-user-interface-pc-screen-home-office-desk_482257-118861.jpg?_wi=13", imageAlt: "Quote module"
|
|
},
|
|
{
|
|
title: "Workflow: Planning PDF", description: "planning production PDF → disponibilités employés → création planning", imageSrc: "http://img.b2bpic.net/free-vector/hand-drawn-mobile-app-banner-template_52683-5840.jpg?_wi=5", imageAlt: "Planning workflow"
|
|
},
|
|
{
|
|
title: "Module résultant: Planning", description: "disponibilités employés • planning production • partage planning", imageSrc: "http://img.b2bpic.net/free-photo/financial-program-user-interface-pc-screen-home-office-desk_482257-118861.jpg?_wi=14", imageAlt: "Planning module"
|
|
}
|
|
]}
|
|
gridVariant="two-columns-alternating-heights"
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
className="py-20 md:py-28"
|
|
/>
|
|
</div>
|
|
|
|
<div id="final-comparison" data-section="final-comparison">
|
|
<FeatureCardOne
|
|
title="Une autre façon de construire un logiciel"
|
|
description="Comparez l'approche traditionnelle avec celle de Synthèse."
|
|
features={[
|
|
{
|
|
title: "Logiciel classique", description: "logiciel standard • organisation imposée • fonctionnalités génériques • configuration longue", imageSrc: "http://img.b2bpic.net/free-photo/financial-program-user-interface-pc-screen-home-office-desk_482257-118861.jpg?_wi=15", imageAlt: "Traditional software"
|
|
},
|
|
{
|
|
title: "Synthèse", description: "application adaptée • organisation basée sur vos tâches • fonctionnalités utiles • outil simple", imageSrc: "http://img.b2bpic.net/free-photo/financial-program-user-interface-pc-screen-home-office-desk_482257-118861.jpg?_wi=16", imageAlt: "Synthese approach"
|
|
}
|
|
]}
|
|
gridVariant="two-columns-alternating-heights"
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
className="py-20 md:py-28"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactCTA
|
|
tag="Commencez maintenant"
|
|
title="Découvrez l'outil adapté à votre entreprise"
|
|
description="Décrivez simplement comment fonctionne votre entreprise et découvrez l'application qui pourrait simplifier votre travail."
|
|
buttons={[
|
|
{ text: "Créer mon diagnostic", href: "#" },
|
|
{ text: "En savoir plus", href: "#" }
|
|
]}
|
|
background={{ variant: "plain" }}
|
|
useInvertedBackground={true}
|
|
className="py-20 md:py-28"
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterBaseReveal
|
|
columns={[
|
|
{
|
|
title: "Produit", items: [
|
|
{ label: "Comment ça marche", href: "#how-it-works" },
|
|
{ label: "Fonctionnalités", href: "#features" },
|
|
{ label: "Exemples", href: "#examples" }
|
|
]
|
|
},
|
|
{
|
|
title: "Ressources", items: [
|
|
{ label: "Documentation", href: "#" },
|
|
{ label: "Blog", href: "#" },
|
|
{ label: "FAQ", href: "#" }
|
|
]
|
|
},
|
|
{
|
|
title: "Légal", items: [
|
|
{ label: "Conditions d'utilisation", href: "#" },
|
|
{ label: "Politique de confidentialité", href: "#" },
|
|
{ label: "Contact", href: "#contact" }
|
|
]
|
|
}
|
|
]}
|
|
copyrightText="© 2025 Synthèse. Tous droits réservés."
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
}
|