690 lines
47 KiB
TypeScript
Executable File
690 lines
47 KiB
TypeScript
Executable File
'use client';
|
||
|
||
import React, { useContext, useEffect, useRef } from 'react';
|
||
import { Ripple } from 'primereact/ripple';
|
||
import { InputText } from 'primereact/inputtext';
|
||
import { StyleClass } from 'primereact/styleclass';
|
||
import { useRouter } from 'next/navigation';
|
||
import { Button } from 'primereact/button';
|
||
import { LayoutContext } from '../layout/context/layoutcontext';
|
||
import { PrimeReactContext } from 'primereact/api';
|
||
import type { ColorScheme } from '@/types';
|
||
|
||
const LandingPage = () => {
|
||
const router = useRouter();
|
||
const { layoutConfig, setLayoutConfig } = useContext(LayoutContext);
|
||
const { changeTheme } = useContext(PrimeReactContext);
|
||
|
||
const homeRef = useRef(null);
|
||
const timesRef = useRef(null);
|
||
const menuRef = useRef(null);
|
||
const menuButtonRef = useRef(null);
|
||
const meetRef = useRef(null);
|
||
const featuresRef = useRef(null);
|
||
const pricingRef = useRef(null);
|
||
|
||
const goHome = () => {
|
||
router.push('/');
|
||
};
|
||
|
||
const scrollToElement = (el: React.RefObject<HTMLElement>) => {
|
||
if (el.current) {
|
||
el.current?.scrollIntoView({
|
||
behavior: 'smooth',
|
||
block: 'start',
|
||
inline: 'nearest'
|
||
});
|
||
}
|
||
};
|
||
|
||
const changeColorScheme = (colorScheme: ColorScheme) => {
|
||
changeTheme?.(layoutConfig.colorScheme, colorScheme, 'theme-link', () => {
|
||
setLayoutConfig((prevState) => ({
|
||
...prevState,
|
||
colorScheme,
|
||
menuTheme: layoutConfig.colorScheme === 'dark' ? 'dark' : 'light'
|
||
}));
|
||
});
|
||
};
|
||
|
||
useEffect(() => {
|
||
changeColorScheme('light');
|
||
setLayoutConfig((prevState) => ({
|
||
...prevState,
|
||
menuTheme: 'light'
|
||
}));
|
||
}, []);
|
||
|
||
return (
|
||
<div ref={homeRef} className="landing-container" style={{ background: '#100e23' }}>
|
||
<div id="header" className="landing-header flex flex-column w-full p-6" style={{ minHeight: '1000px', background: 'linear-gradient(135deg, #ffffff 0%, #f8fafc 50%, #f1f5f9 100%)' }}>
|
||
<div className="header-menu-container flex align-items-center justify-content-between">
|
||
<div className="header-left-elements flex align-items-center justify-content-between">
|
||
<div className="cursor-pointer layout-topbar-logo flex align-items-center" onClick={goHome}>
|
||
<i className="pi pi-building text-orange-600 text-3xl mr-3"></i>
|
||
<span className="text-2xl font-bold text-gray-800">BTP Xpress</span>
|
||
</div>
|
||
|
||
<StyleClass nodeRef={menuButtonRef} selector="@next" enterClassName="hidden" enterActiveClassName="px-scalein" leaveToClassName="hidden" leaveActiveClassName="px-fadeout">
|
||
<a ref={menuButtonRef} className="p-ripple cursor-pointer block lg:hidden text-gray-800 font-medium line-height-3 hover:text-gray-800" style={{ fontSize: '2rem' }}>
|
||
<i className="pi pi-bars"></i>
|
||
<Ripple />
|
||
</a>
|
||
</StyleClass>
|
||
<ul
|
||
ref={menuRef}
|
||
id="menu"
|
||
style={{ top: '0px', right: '0%' }}
|
||
className="list-none lg:flex lg:flex-row flex-column align-items-start bg-white absolute lg:relative h-screen lg:h-auto lg:surface-ground m-0 z-5 w-full sm:w-6 lg:w-full py-6 lg:py-0"
|
||
>
|
||
<StyleClass nodeRef={timesRef} selector="@parent" enterClassName="hidden" enterActiveClassName="px-scalein" leaveToClassName="hidden" leaveActiveClassName="px-fadeout">
|
||
<a ref={timesRef} className="p-ripple cursor-pointer block lg:hidden text-gray-800 font-medium line-height-3 hover:text-gray-800 absolute" style={{ top: '3rem', right: '2rem' }}>
|
||
<i className="pi pi-times text-4xl"></i>
|
||
<Ripple />
|
||
</a>
|
||
</StyleClass>
|
||
<li>
|
||
<a onClick={() => scrollToElement(homeRef)} className="p-ripple flex m-0 md:ml-5 md:px-0 px-3 py-3 text-gray-800 font-medium line-height-3 hover:text-gray-800 cursor-pointer">
|
||
<span>Accueil</span>
|
||
<Ripple />
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a onClick={() => scrollToElement(meetRef)} className="p-ripple flex m-0 md:ml-5 md:px-0 px-3 py-3 text-gray-800 font-medium line-height-3 hover:text-gray-800 cursor-pointer">
|
||
<span>Découvrir</span>
|
||
<Ripple />
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a onClick={() => scrollToElement(featuresRef)} className="p-ripple flex m-0 md:ml-5 md:px-0 px-3 py-3 text-gray-800 font-medium line-height-3 hover:text-gray-800 cursor-pointer">
|
||
<span>Fonctionnalités</span>
|
||
<Ripple />
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a onClick={() => scrollToElement(pricingRef)} className="p-ripple flex m-0 md:ml-5 md:px-0 px-3 py-3 text-gray-800 font-medium line-height-3 hover:text-gray-800 cursor-pointer">
|
||
<span>Tarifs</span>
|
||
<Ripple />
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a onClick={() => window.location.href = '/api/auth/login'} className="p-ripple flex m-0 md:ml-5 md:px-0 px-3 py-3 text-gray-800 font-medium line-height-3 hover:text-gray-800 cursor-pointer">
|
||
<span>Connexion</span>
|
||
<Ripple />
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<div className="header-right-elements flex align-items-center">
|
||
<a onClick={() => {
|
||
const keycloakUrl = process.env.NEXT_PUBLIC_KEYCLOAK_URL || 'https://security.lions.dev';
|
||
const realm = process.env.NEXT_PUBLIC_KEYCLOAK_REALM || 'btpxpress';
|
||
const clientId = process.env.NEXT_PUBLIC_KEYCLOAK_CLIENT_ID || 'btpxpress-frontend';
|
||
const redirectUri = encodeURIComponent(window.location.origin + '/dashboard');
|
||
window.location.href = `${keycloakUrl}/realms/${realm}/protocol/openid_connect/registrations?client_id=${clientId}&response_type=code&redirect_uri=${redirectUri}`;
|
||
}} className="p-button p-button-outlined p-button-secondary p-button-text p-button p-component font-medium border-round text-white bg-orange-500 border-orange-500 cursor-pointer mr-3" style={{ padding: '0.714rem 1.5rem' }}>
|
||
<span aria-hidden="true" className="p-button-label">
|
||
Démarrer maintenant
|
||
</span>
|
||
</a>
|
||
<a href="/pages/contact">
|
||
<Button className="contact-button mr-3 p-button-outlined p-button-secondary p-button-text p-button p-component font-medium border-round text-gray-700" style={{ background: 'rgba(68, 72, 109, 0.05)' }}>
|
||
<span aria-hidden="true" className="p-button-label">
|
||
Contact
|
||
</span>
|
||
</Button>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="header-text" style={{ padding: '100px 60px' }}>
|
||
<div className="flex align-items-center mb-4">
|
||
<i className="pi pi-building text-orange-600 text-4xl mr-3"></i>
|
||
<span className="text-3xl font-bold text-gray-800">BTP Xpress</span>
|
||
</div>
|
||
<h1 className="mb-0 text-gray-800" style={{ fontSize: '80px', lineHeight: '95px' }}>
|
||
Construisez l'avenir
|
||
</h1>
|
||
<h2 className="mt-0 font-medium text-4xl text-gray-700">avec BTP Xpress, la suite logicielle qui transforme le BTP</h2>
|
||
<p className="text-xl text-gray-600 mb-5 line-height-3" style={{ maxWidth: '650px' }}>
|
||
<strong>Fini les chantiers qui dérapent, les budgets qui explosent et les équipes désorganisées.</strong>
|
||
BTP Xpress centralise tout : de la première estimation au dernier m² livré,
|
||
pilotez vos projets avec la précision d'un architecte et l'efficacité d'un chef de chantier expérimenté.
|
||
</p>
|
||
|
||
<div className="flex flex-wrap gap-3 mb-6">
|
||
<div className="flex align-items-center bg-white px-4 py-2 border-round shadow-2">
|
||
<i className="pi pi-check-circle text-green-600 mr-2"></i>
|
||
<span className="font-semibold text-gray-800">Gestion complète de projets</span>
|
||
</div>
|
||
<div className="flex align-items-center bg-white px-4 py-2 border-round shadow-2">
|
||
<i className="pi pi-check-circle text-green-600 mr-2"></i>
|
||
<span className="font-semibold text-gray-800">Suivi temps réel</span>
|
||
</div>
|
||
<div className="flex align-items-center bg-white px-4 py-2 border-round shadow-2">
|
||
<i className="pi pi-check-circle text-green-600 mr-2"></i>
|
||
<span className="font-semibold text-gray-800">Facturation automatisée</span>
|
||
</div>
|
||
</div>
|
||
<a onClick={() => window.location.href = '/api/auth/login'} className="p-button text-white bg-orange-500 border-orange-500 font-bold border-round cursor-pointer mr-3 shadow-3" style={{ padding: '1.2rem 2.5rem', fontSize: '1.2rem' }}>
|
||
<i className="pi pi-play mr-2"></i>
|
||
Démarrer maintenant
|
||
</a>
|
||
<a href="#features" className="p-button p-button-outlined text-orange-600 border-orange-300 font-bold border-round cursor-pointer" style={{ padding: '1.2rem 2.5rem', fontSize: '1.2rem' }}>
|
||
<i className="pi pi-eye mr-2"></i>
|
||
Voir les fonctionnalités
|
||
</a>
|
||
</div>
|
||
|
||
<div ref={featuresRef} className="header-features" style={{ padding: '100px 60px' }}>
|
||
<div className="text-center mb-6">
|
||
<h2 className="text-4xl font-bold text-gray-800 mb-4">Spécialisé pour tous les métiers du BTP</h2>
|
||
<p className="text-xl text-gray-600">Une solution adaptée à chaque corps de métier</p>
|
||
</div>
|
||
<div className="grid">
|
||
<div className="col-12 md:col-6 lg:col-3 mb-4">
|
||
<div className="bg-white p-6 border-round shadow-2 text-center h-full">
|
||
<i className="pi pi-home text-4xl mb-3 block"></i>
|
||
<span className="title mb-3 block text-2xl font-semibold">Gros Œuvre & Structure</span>
|
||
<span className="content">Béton, maçonnerie, charpente : gérez vos approvisionnements, planifiez vos coulages, suivez vos cadences et optimisez vos rotations d'équipes.</span>
|
||
</div>
|
||
</div>
|
||
<div className="col-12 md:col-6 lg:col-3 mb-4">
|
||
<div className="bg-white p-6 border-round shadow-2 text-center h-full">
|
||
<i className="pi pi-wrench text-4xl mb-3 block"></i>
|
||
<span className="title mb-3 block text-2xl font-semibold">Second Œuvre & Finitions</span>
|
||
<span className="content">Électricité, plomberie, peinture, carrelage : coordonnez vos interventions, gérez vos stocks et respectez les délais de livraison.</span>
|
||
</div>
|
||
</div>
|
||
<div className="col-12 md:col-6 lg:col-3 mb-4">
|
||
<div className="bg-white p-6 border-round shadow-2 text-center h-full">
|
||
<i className="pi pi-car text-4xl mb-3 block"></i>
|
||
<span className="title mb-3 block text-2xl font-semibold">Travaux Publics & VRD</span>
|
||
<span className="content">Terrassement, voirie, réseaux : planifiez vos chantiers, gérez votre matériel et optimisez vos déplacements d'équipes.</span>
|
||
</div>
|
||
</div>
|
||
<div className="col-12 md:col-6 lg:col-3 mb-4">
|
||
<div className="bg-white p-6 border-round shadow-2 text-center h-full">
|
||
<i className="pi pi-briefcase text-4xl mb-3 block"></i>
|
||
<span className="title mb-3 block text-2xl font-semibold">Maîtrise d'Œuvre & AMO</span>
|
||
<span className="content">Pilotage de projets, coordination, suivi budgétaire : centralisez tous vos dossiers et collaborez efficacement avec tous les intervenants.</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div ref={meetRef} id="meet-btpxpress" className="flex justify-content-center w-full relative text-center py-8" style={{ minHeight: '400px', background: 'linear-gradient(135deg, #f97316 0%, #fb923c 30%, #fed7aa 100%)', boxShadow: '0 10px 25px rgba(249, 115, 22, 0.15)', zIndex: 100, position: 'relative' }}>
|
||
<div className="flex flex-column align-items-center justify-content-center px-6">
|
||
<h2 className="text-4xl font-bold text-gray-800 mb-4">
|
||
BTP Xpress en action
|
||
</h2>
|
||
<p className="text-xl text-gray-700 mb-6 line-height-3" style={{ maxWidth: '600px' }}>
|
||
Découvrez comment nos clients transforment leur activité BTP avec des outils pensés pour leur réussite
|
||
</p>
|
||
<div className="grid w-full" style={{ maxWidth: '900px' }}>
|
||
<div className="col-12 md:col-4 text-center mb-4">
|
||
<div className="bg-white border-round p-4 shadow-2" style={{ border: '1px solid #e5e7eb' }}>
|
||
<i className="pi pi-clock text-orange-600 text-4xl mb-3"></i>
|
||
<div className="text-3xl font-bold text-green-600 mb-2">-50%</div>
|
||
<div className="text-lg font-semibold text-gray-800">Temps administratif</div>
|
||
<div className="text-sm text-gray-600">Automatisation des tâches répétitives</div>
|
||
</div>
|
||
</div>
|
||
<div className="col-12 md:col-4 text-center mb-4">
|
||
<div className="bg-white border-round p-4 shadow-2" style={{ border: '1px solid #e5e7eb' }}>
|
||
<i className="pi pi-chart-bar text-green-600 text-4xl mb-3"></i>
|
||
<div className="text-3xl font-bold text-green-600 mb-2">+35%</div>
|
||
<div className="text-lg font-semibold text-gray-800">Rentabilité</div>
|
||
<div className="text-sm text-gray-600">Optimisation des coûts et marges</div>
|
||
</div>
|
||
</div>
|
||
<div className="col-12 md:col-4 text-center mb-4">
|
||
<div className="bg-white border-round p-4 shadow-2" style={{ border: '1px solid #e5e7eb' }}>
|
||
<i className="pi pi-users text-blue-600 text-4xl mb-3"></i>
|
||
<div className="text-3xl font-bold text-blue-600 mb-2">98%</div>
|
||
<div className="text-lg font-semibold text-gray-800">Satisfaction client</div>
|
||
<div className="text-sm text-gray-600">Respect des délais et qualité</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="w-full py-6" style={{ background: 'linear-gradient(180deg, #ffffff 0%, #f9fafb 50%, #f3f4f6 100%)' }}>
|
||
<div id="features" className="px-4 lg:px-8 features">
|
||
<h2 className="font-medium text-3xl text-center text-gray-800 mb-6">La différence BTP Xpress : des résultats concrets</h2>
|
||
|
||
<div className="grid feature-boxes feature-boxes-1" style={{ marginBottom: '80px' }}>
|
||
<div className="col-12 lg:col-5">
|
||
<h3 className="font-medium text-2xl mb-4 text-gray-800">🎯 Performance Opérationnelle</h3>
|
||
<p className="text-lg line-height-3 mb-4">
|
||
<strong>Réduisez vos délais de 25% en moyenne</strong> grâce à une planification intelligente,
|
||
une coordination automatisée des équipes et un suivi temps réel des avancements.
|
||
Vos chantiers respectent enfin les délais annoncés.
|
||
</p>
|
||
</div>
|
||
<div className="col-12 lg:col-7">
|
||
<div className="grid">
|
||
<div className="col-12 md:col-4">
|
||
<div className="bg-white border-round p-3 shadow-2 text-center" style={{ border: '1px solid #e5e7eb' }}>
|
||
<i className="pi pi-clock text-orange-600 text-3xl mb-2"></i>
|
||
<div className="text-2xl font-bold text-green-600 mb-1">-25%</div>
|
||
<div className="text-sm text-gray-600 font-medium">Délais</div>
|
||
</div>
|
||
</div>
|
||
<div className="col-12 md:col-4">
|
||
<div className="bg-white border-round p-3 shadow-2 text-center" style={{ border: '1px solid #e5e7eb' }}>
|
||
<i className="pi pi-euro text-green-600 text-3xl mb-2"></i>
|
||
<div className="text-2xl font-bold text-green-600 mb-1">+35%</div>
|
||
<div className="text-sm text-gray-600 font-medium">Rentabilité</div>
|
||
</div>
|
||
</div>
|
||
<div className="col-12 md:col-4">
|
||
<div className="bg-white border-round p-3 shadow-2 text-center" style={{ border: '1px solid #e5e7eb' }}>
|
||
<i className="pi pi-file text-blue-600 text-3xl mb-2"></i>
|
||
<div className="text-2xl font-bold text-orange-600 mb-1">-50%</div>
|
||
<div className="text-sm text-gray-600 font-medium">Admin</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="grid feature-boxes feature-boxes-2" style={{ marginBottom: '60px' }}>
|
||
<div className="col-12 lg:col-5">
|
||
<h3 className="text-2xl font-medium mb-4 text-gray-800">💰 Rentabilité Maximisée</h3>
|
||
<p className="text-lg line-height-3">
|
||
<strong>Augmentez vos marges de 15% en moyenne</strong> grâce à un contrôle précis des coûts,
|
||
une optimisation automatique des approvisionnements et une facturation sans erreur.
|
||
Chaque euro compte, BTP Xpress vous aide à les préserver et les multiplier.
|
||
</p>
|
||
</div>
|
||
<div className="col-12 lg:col-7">
|
||
<div className="grid">
|
||
<div className="col-6 lg:col-3">
|
||
<div className="bg-white text-center border-round p-3 shadow-2 mb-3" style={{ border: '1px solid #e5e7eb' }}>
|
||
<i className="pi pi-building text-orange-600 text-2xl mb-2"></i>
|
||
<h5 className="font-medium text-sm mb-1">Maçonnerie Dubois</h5>
|
||
<div className="text-xs text-green-600 font-semibold">+45% rentabilité</div>
|
||
</div>
|
||
</div>
|
||
<div className="col-6 lg:col-3">
|
||
<div className="bg-white text-center border-round p-3 shadow-2 mb-3" style={{ border: '1px solid #e5e7eb' }}>
|
||
<i className="pi pi-wrench text-blue-600 text-2xl mb-2"></i>
|
||
<h5 className="font-medium text-sm mb-1">Électricité Martin</h5>
|
||
<div className="text-xs text-orange-600 font-semibold">-60% admin</div>
|
||
</div>
|
||
</div>
|
||
<div className="col-6 lg:col-3">
|
||
<div className="bg-white text-center border-round p-3 shadow-2 mb-3" style={{ border: '1px solid #e5e7eb' }}>
|
||
<i className="pi pi-car text-green-600 text-2xl mb-2"></i>
|
||
<h5 className="font-medium text-sm mb-1">TP Rousseau</h5>
|
||
<div className="text-xs text-green-600 font-semibold">+30% projets</div>
|
||
</div>
|
||
</div>
|
||
<div className="col-6 lg:col-3">
|
||
<div className="bg-white text-center border-round p-3 shadow-2 mb-3" style={{ border: '1px solid #e5e7eb' }}>
|
||
<i className="pi pi-home text-purple-600 text-2xl mb-2"></i>
|
||
<h5 className="font-medium text-sm mb-1">Rénovation Pro</h5>
|
||
<div className="text-xs text-blue-600 font-semibold">+25% délais</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="grid feature-boxes feature-boxes-3" style={{ marginBottom: '60px' }}>
|
||
<div className="col-12 lg:col-6">
|
||
<h3 className="text-2xl font-medium mb-4 text-gray-800">🚀 Innovation Technologique</h3>
|
||
<div className="grid">
|
||
<div className="col-12 md:col-6 mb-3">
|
||
<div className="flex align-items-center">
|
||
<span className="text-2xl mr-2">🤖</span>
|
||
<div>
|
||
<strong className="text-base">IA prédictive</strong>
|
||
<div className="text-sm text-gray-600">Anticipez les risques</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="col-12 md:col-6 mb-3">
|
||
<div className="flex align-items-center">
|
||
<span className="text-2xl mr-2">📱</span>
|
||
<div>
|
||
<strong className="text-base">Mobilité totale</strong>
|
||
<div className="text-sm text-gray-600">Chantier ou bureau</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="col-12 md:col-6 mb-3">
|
||
<div className="flex align-items-center">
|
||
<span className="text-2xl mr-2">☁️</span>
|
||
<div>
|
||
<strong className="text-base">Cloud sécurisé</strong>
|
||
<div className="text-sm text-gray-600">Données protégées</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="col-12 md:col-6 mb-3">
|
||
<div className="flex align-items-center">
|
||
<span className="text-2xl mr-2">⚡</span>
|
||
<div>
|
||
<strong className="text-base">Automatisation</strong>
|
||
<div className="text-sm text-gray-600">Tâches répétitives</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="col-12 lg:col-6">
|
||
<div className="bg-white border-round p-4 shadow-2 mb-4" style={{ border: '1px solid #e5e7eb' }}>
|
||
<h4 className="text-base font-semibold mb-3 text-gray-800">
|
||
<i className="pi pi-chart-line text-blue-600 mr-2"></i>
|
||
Tableau de Bord Temps Réel
|
||
</h4>
|
||
<div className="grid">
|
||
<div className="col-6 text-center">
|
||
<div className="text-xl font-bold text-green-600">€127K</div>
|
||
<div className="text-xs text-gray-600">CA en cours</div>
|
||
</div>
|
||
<div className="col-6 text-center">
|
||
<div className="text-xl font-bold text-orange-600">15</div>
|
||
<div className="text-xs text-gray-600">Chantiers actifs</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="bg-white border-round p-4 shadow-2" style={{ border: '1px solid #e5e7eb' }}>
|
||
<h4 className="text-base font-semibold mb-3 text-gray-800">
|
||
<i className="pi pi-clock text-orange-600 mr-2"></i>
|
||
Avancement Projets
|
||
</h4>
|
||
<div className="mb-2">
|
||
<div className="flex justify-content-between mb-1">
|
||
<span className="text-xs">Villa Moderne</span>
|
||
<span className="text-xs font-semibold">85%</span>
|
||
</div>
|
||
<div className="bg-gray-200 border-round" style={{ height: '6px' }}>
|
||
<div className="bg-green-600 border-round" style={{ width: '85%', height: '100%' }}></div>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<div className="flex justify-content-between mb-1">
|
||
<span className="text-xs">Rénovation Bureau</span>
|
||
<span className="text-xs font-semibold">62%</span>
|
||
</div>
|
||
<div className="bg-gray-200 border-round" style={{ height: '6px' }}>
|
||
<div className="bg-orange-600 border-round" style={{ width: '62%', height: '100%' }}></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Section Pricing */}
|
||
<div ref={pricingRef} id="pricing" className="w-full py-8" style={{ background: 'linear-gradient(180deg, #f3f4f6 0%, #ffffff 50%, #f9fafb 100%)' }}>
|
||
<div className="px-4 lg:px-8">
|
||
<div className="text-center mb-8">
|
||
<h2 className="text-4xl font-bold text-gray-800 mb-4">Investissez dans votre avenir</h2>
|
||
<p className="text-xl text-gray-600 mb-6" style={{ maxWidth: '650px', margin: '0 auto' }}>
|
||
<strong>BTP Xpress se rembourse en moins de 6 mois</strong> grâce aux gains de productivité et d'efficacité.
|
||
Choisissez la formule qui correspond à votre ambition et commencez à transformer votre entreprise dès aujourd'hui.
|
||
</p>
|
||
</div>
|
||
|
||
<div className="grid">
|
||
{/* Plan Artisan Expert */}
|
||
<div className="col-12 lg:col-4 mb-4">
|
||
<div className="bg-white border-round p-6 shadow-3 h-full" style={{ border: '1px solid #e5e7eb' }}>
|
||
<div className="text-center mb-6">
|
||
<h3 className="text-2xl font-bold text-orange-600 mb-2">Artisan Expert</h3>
|
||
<div className="text-5xl font-bold text-gray-800 mb-2">129€</div>
|
||
<div className="text-gray-600 mb-1">par mois</div>
|
||
<div className="text-sm text-gray-500 mb-2">jusqu'à 5 utilisateurs</div>
|
||
<div className="text-xs text-green-600 font-semibold bg-green-50 px-3 py-1 border-round">ROI garanti en 4 mois</div>
|
||
</div>
|
||
<ul className="list-none p-0 mb-6">
|
||
<li className="flex align-items-center mb-3">
|
||
<i className="pi pi-check text-green-600 mr-2"></i>
|
||
<span>🏗️ Chantiers & phases illimités</span>
|
||
</li>
|
||
<li className="flex align-items-center mb-3">
|
||
<i className="pi pi-check text-green-600 mr-2"></i>
|
||
<span>💰 Devis intelligents & facturation auto</span>
|
||
</li>
|
||
<li className="flex align-items-center mb-3">
|
||
<i className="pi pi-check text-green-600 mr-2"></i>
|
||
<span>📊 Tableaux de bord temps réel</span>
|
||
</li>
|
||
<li className="flex align-items-center mb-3">
|
||
<i className="pi pi-check text-green-600 mr-2"></i>
|
||
<span>📱 Application mobile incluse</span>
|
||
</li>
|
||
<li className="flex align-items-center mb-3">
|
||
<i className="pi pi-check text-green-600 mr-2"></i>
|
||
<span>🔧 Support technique prioritaire</span>
|
||
</li>
|
||
</ul>
|
||
<Button
|
||
onClick={() => window.location.href = '/api/auth/login'}
|
||
className="w-full p-button-outlined border-orange-300 text-orange-600 font-semibold py-3"
|
||
>
|
||
Commencer l'essai gratuit
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Plan Entreprise Pro - POPULAIRE */}
|
||
<div className="col-12 lg:col-4 mb-4">
|
||
<div className="bg-white border-round p-6 shadow-3 h-full relative" style={{ border: '3px solid #06b6d4' }}>
|
||
<div className="absolute top-0 left-0 right-0 bg-cyan-500 text-white text-center py-2 font-semibold text-sm" style={{ borderRadius: '8px 8px 0 0' }}>
|
||
⭐ PLUS POPULAIRE
|
||
</div>
|
||
<div className="text-center mb-6 mt-4">
|
||
<h3 className="text-2xl font-bold text-cyan-600 mb-2">Entreprise Pro</h3>
|
||
<div className="text-5xl font-bold text-gray-800 mb-2">249€</div>
|
||
<div className="text-gray-600 mb-1">par mois</div>
|
||
<div className="text-sm text-gray-500 mb-2">jusqu'à 15 utilisateurs</div>
|
||
<div className="text-xs text-blue-600 font-semibold bg-blue-50 px-3 py-1 border-round">ROI garanti en 3 mois</div>
|
||
</div>
|
||
<ul className="list-none p-0 mb-6">
|
||
<li className="flex align-items-center mb-3">
|
||
<i className="pi pi-check text-green-600 mr-2"></i>
|
||
<span>✨ Tout du plan Artisan Expert</span>
|
||
</li>
|
||
<li className="flex align-items-center mb-3">
|
||
<i className="pi pi-check text-green-600 mr-2"></i>
|
||
<span>🤖 IA prédictive avancée</span>
|
||
</li>
|
||
<li className="flex align-items-center mb-3">
|
||
<i className="pi pi-check text-green-600 mr-2"></i>
|
||
<span>📈 Analytics & rapports avancés</span>
|
||
</li>
|
||
<li className="flex align-items-center mb-3">
|
||
<i className="pi pi-check text-green-600 mr-2"></i>
|
||
<span>🔗 Intégrations comptables</span>
|
||
</li>
|
||
<li className="flex align-items-center mb-3">
|
||
<i className="pi pi-check text-green-600 mr-2"></i>
|
||
<span>👥 Gestion multi-équipes</span>
|
||
</li>
|
||
</ul>
|
||
<Button
|
||
onClick={() => window.location.href = '/api/auth/login'}
|
||
className="w-full bg-cyan-500 border-cyan-500 text-white font-semibold py-3"
|
||
>
|
||
Démarrer maintenant
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Plan Groupe Enterprise */}
|
||
<div className="col-12 lg:col-4 mb-4">
|
||
<div className="bg-white border-round p-6 shadow-3 h-full" style={{ border: '1px solid #e5e7eb' }}>
|
||
<div className="text-center mb-6">
|
||
<h3 className="text-2xl font-bold text-purple-600 mb-2">Groupe Enterprise</h3>
|
||
<div className="text-3xl font-bold text-gray-800 mb-2">Sur mesure</div>
|
||
<div className="text-gray-600 mb-1">selon vos besoins</div>
|
||
<div className="text-sm text-gray-500 mb-2">utilisateurs illimités</div>
|
||
<div className="text-xs text-purple-600 font-semibold bg-purple-50 px-3 py-1 border-round">ROI garanti en 2 mois</div>
|
||
</div>
|
||
<ul className="list-none p-0 mb-6">
|
||
<li className="flex align-items-center mb-3">
|
||
<i className="pi pi-check text-green-600 mr-2"></i>
|
||
<span>🏢 Tout du plan Entreprise Pro</span>
|
||
</li>
|
||
<li className="flex align-items-center mb-3">
|
||
<i className="pi pi-check text-green-600 mr-2"></i>
|
||
<span>🎯 Développements sur mesure</span>
|
||
</li>
|
||
<li className="flex align-items-center mb-3">
|
||
<i className="pi pi-check text-green-600 mr-2"></i>
|
||
<span>🔐 Sécurité enterprise</span>
|
||
</li>
|
||
<li className="flex align-items-center mb-3">
|
||
<i className="pi pi-check text-green-600 mr-2"></i>
|
||
<span>📞 Support dédié 24/7</span>
|
||
</li>
|
||
<li className="flex align-items-center mb-3">
|
||
<i className="pi pi-check text-green-600 mr-2"></i>
|
||
<span>🎓 Formation équipes incluse</span>
|
||
</li>
|
||
</ul>
|
||
<Button
|
||
onClick={() => window.location.href = '/api/auth/login'}
|
||
className="w-full p-button-outlined border-purple-300 text-purple-600 font-semibold py-3"
|
||
>
|
||
Nous contacter
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Section Call-to-Action Final */}
|
||
<div className="text-center py-8 mt-8 border-round-lg" style={{
|
||
background: 'linear-gradient(135deg, #f97316 0%, #06b6d4 100%)',
|
||
color: 'white'
|
||
}}>
|
||
<div className="px-6">
|
||
<h3 className="text-3xl font-bold mb-4 text-white">Rejoignez la révolution digitale du BTP</h3>
|
||
<p className="text-xl mb-6 line-height-3 text-white" style={{ maxWidth: '700px', margin: '0 auto' }}>
|
||
<strong>Plus de 3 200 professionnels du BTP</strong> nous font déjà confiance pour piloter leurs projets.
|
||
Rejoignez la révolution digitale du secteur et prenez une longueur d'avance sur vos concurrents.
|
||
</p>
|
||
<div className="flex flex-wrap justify-content-center gap-3">
|
||
<Button
|
||
onClick={() => window.location.href = '/api/auth/login'}
|
||
style={{
|
||
backgroundColor: 'white',
|
||
color: '#f97316',
|
||
border: '2px solid white',
|
||
fontWeight: 'bold',
|
||
padding: '12px 24px',
|
||
borderRadius: '8px'
|
||
}}
|
||
className="hover:bg-gray-100"
|
||
>
|
||
<i className="pi pi-play mr-2" style={{ color: '#f97316' }}></i>
|
||
Essai gratuit 30 jours
|
||
</Button>
|
||
<Button
|
||
onClick={() => window.location.href = '/api/auth/login'}
|
||
style={{
|
||
backgroundColor: 'transparent',
|
||
color: 'white',
|
||
border: '2px solid white',
|
||
fontWeight: 'bold',
|
||
padding: '12px 24px',
|
||
borderRadius: '8px'
|
||
}}
|
||
className="hover:bg-white hover:text-orange-600"
|
||
>
|
||
<i className="pi pi-phone mr-2" style={{ color: 'white' }}></i>
|
||
Demander une démo
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Footer */}
|
||
<div className="w-full bg-gray-900 text-white py-8">
|
||
<div className="px-4 lg:px-8">
|
||
<div className="grid">
|
||
<div className="col-12 lg:col-4 mb-6">
|
||
<div className="flex align-items-center mb-4">
|
||
<i className="pi pi-building text-orange-500 text-3xl mr-3"></i>
|
||
<span className="text-2xl font-bold">BTP Xpress</span>
|
||
</div>
|
||
<p className="text-gray-300 mb-4 line-height-3">
|
||
La suite logicielle qui transforme le BTP. Gérez vos chantiers, optimisez vos ressources
|
||
et maximisez votre rentabilité avec les outils les plus avancés du marché.
|
||
</p>
|
||
<div className="text-sm text-gray-400">
|
||
© 2024 BTP Xpress - Tous droits réservés
|
||
</div>
|
||
</div>
|
||
|
||
<div className="col-12 lg:col-8">
|
||
<div className="grid">
|
||
<div className="col-6 md:col-3 mb-4">
|
||
<h4 className="text-lg font-semibold mb-3 text-orange-500">Produit</h4>
|
||
<ul className="list-none p-0">
|
||
<li className="mb-2"><a href="#features" className="text-gray-300 hover:text-white">Fonctionnalités</a></li>
|
||
<li className="mb-2"><a href="#pricing" className="text-gray-300 hover:text-white">Tarifs</a></li>
|
||
<li className="mb-2"><a href="/api/auth/login" className="text-gray-300 hover:text-white">Démo</a></li>
|
||
<li className="mb-2"><a href="/api/auth/login" className="text-gray-300 hover:text-white">Essai gratuit</a></li>
|
||
</ul>
|
||
</div>
|
||
<div className="col-6 md:col-3 mb-4">
|
||
<h4 className="text-lg font-semibold mb-3 text-orange-500">Solutions</h4>
|
||
<ul className="list-none p-0">
|
||
<li className="mb-2"><a href="#" className="text-gray-300 hover:text-white">Gros œuvre</a></li>
|
||
<li className="mb-2"><a href="#" className="text-gray-300 hover:text-white">Second œuvre</a></li>
|
||
<li className="mb-2"><a href="#" className="text-gray-300 hover:text-white">Travaux publics</a></li>
|
||
<li className="mb-2"><a href="#" className="text-gray-300 hover:text-white">Maîtrise d'œuvre</a></li>
|
||
</ul>
|
||
</div>
|
||
<div className="col-6 md:col-3 mb-4">
|
||
<h4 className="text-lg font-semibold mb-3 text-orange-500">Support</h4>
|
||
<ul className="list-none p-0">
|
||
<li className="mb-2"><a href="#" className="text-gray-300 hover:text-white">Documentation</a></li>
|
||
<li className="mb-2"><a href="#" className="text-gray-300 hover:text-white">Formation</a></li>
|
||
<li className="mb-2"><a href="#" className="text-gray-300 hover:text-white">Support technique</a></li>
|
||
<li className="mb-2"><a href="#" className="text-gray-300 hover:text-white">Contact</a></li>
|
||
</ul>
|
||
</div>
|
||
<div className="col-6 md:col-3 mb-4">
|
||
<h4 className="text-lg font-semibold mb-3 text-orange-500">Newsletter</h4>
|
||
<p className="text-gray-300 text-sm mb-3">
|
||
Recevez nos actualités et conseils BTP
|
||
</p>
|
||
<div className="flex">
|
||
<InputText
|
||
type="email"
|
||
placeholder="Votre email professionnel"
|
||
className="flex-1 mr-2 p-2 text-sm"
|
||
/>
|
||
<Button
|
||
className="bg-orange-500 border-orange-500 px-3"
|
||
>
|
||
<i className="pi pi-send"></i>
|
||
</Button>
|
||
</div>
|
||
<div className="text-xs text-gray-400 mt-2">
|
||
En vous abonnant, vous acceptez de recevoir nos communications.
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default LandingPage;
|