lionsdev/btpxpress-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
dahoud
2025-10-01 01:39:07 +00:00
commit b430bf3b96
826 changed files with 255287 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

689
app/page.tsx Normal file
View File

@@ -0,0 +1,689 @@
'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&apos;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&apos;un architecte et l&apos;efficacité d&apos;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 &amp; 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&apos;é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 &amp; 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 &amp; VRD</span>
<span className="content">Terrassement, voirie, réseaux : planifiez vos chantiers, gérez votre matériel et optimisez vos déplacements d&apos;é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&apos;Œuvre &amp; 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&apos;efficacité.
Choisissez la formule qui correspond à votre ambition et commencez à transformer votre entreprise dès aujourd&apos;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&apos;à 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 &amp; 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 &amp; 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&apos;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&apos;à 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 &amp; 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&apos;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&apos;œ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;