267 lines
18 KiB
TypeScript
267 lines
18 KiB
TypeScript
'use client';
|
|
|
|
import React, { useContext, useEffect, useRef, useState } 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 pricingButtonRef = useRef(null);
|
|
const buyRef = useRef(null);
|
|
const featuresButtonRef = 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>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default LandingPage;
|