109 lines
3.8 KiB
TypeScript
109 lines
3.8 KiB
TypeScript
"use client"
|
|
import React from 'react';
|
|
import { ModernNavigation } from '@/components/layout/ModernNavigation';
|
|
import { HeroSection } from '@/components/sections/HeroSection';
|
|
import { ServicesSection } from '@/components/sections/ServicesSection';
|
|
import { TechFeaturesSection } from '@/components/sections/TechFeaturesSection';
|
|
import { AboutSection } from '@/components/sections/AboutSection';
|
|
import { Footer } from '@/components/layout/Footer';
|
|
import { Popup } from '@/components/ui/Popup';
|
|
import { ScrollToTopButton } from '@/components/ui/ScrollToTopButton';
|
|
import { ModernLanguageSwitcher } from '@/components/ui/ModernLanguageSwitcher';
|
|
import { OceanBackground } from '@/components/ui/OceanBackground';
|
|
import { useTranslation } from '@/lib/hooks/useTranslation';
|
|
import { useServiceModal } from '@/lib/hooks/useServiceModal';
|
|
import { useAccordion } from '@/lib/hooks/useAccordion';
|
|
|
|
export default function HomePage() {
|
|
const { t, currentLanguage, changeLanguage, availableLanguages } = useTranslation();
|
|
const { selectedService, openServiceModal, closeServiceModal } = useServiceModal();
|
|
const { openAccordion, toggleAccordion } = useAccordion();
|
|
|
|
return (
|
|
<div className="min-h-screen relative overflow-x-hidden">
|
|
{/* Navigation */}
|
|
<ModernNavigation
|
|
translations={t.navigation}
|
|
languageSwitcher={
|
|
<ModernLanguageSwitcher
|
|
currentLanguage={currentLanguage}
|
|
onLanguageChange={changeLanguage}
|
|
availableLanguages={availableLanguages}
|
|
/>
|
|
}
|
|
/>
|
|
|
|
{/* Hero Section avec motif de grille */}
|
|
<section
|
|
className="relative bg-grid-pattern"
|
|
style={{
|
|
background: 'linear-gradient(to bottom, var(--banquise-slate-50), var(--banquise-blue-50))',
|
|
backgroundImage: 'linear-gradient(rgba(31, 80, 120, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(31, 80, 120, 0.03) 1px, transparent 1px)',
|
|
backgroundSize: '30px 30px'
|
|
}}
|
|
>
|
|
<HeroSection translations={t.hero} />
|
|
</section>
|
|
|
|
{/* Services Section avec transition subtile */}
|
|
<section
|
|
className="section-transition"
|
|
style={{ backgroundColor: 'var(--banquise-white)' }}
|
|
>
|
|
<div
|
|
className="py-4"
|
|
style={{
|
|
background: 'linear-gradient(to right, transparent, rgba(52, 166, 252, 0.1), transparent)'
|
|
}}
|
|
></div>
|
|
<ServicesSection
|
|
services={t.services}
|
|
onServiceClick={openServiceModal}
|
|
translations={t.common}
|
|
/>
|
|
</section>
|
|
|
|
{/* Tech Features Section avec motif de grille */}
|
|
<section
|
|
className="section-transition"
|
|
style={{
|
|
backgroundColor: 'var(--banquise-slate-50)',
|
|
backgroundImage: 'linear-gradient(rgba(31, 80, 120, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(31, 80, 120, 0.03) 1px, transparent 1px)',
|
|
backgroundSize: '30px 30px'
|
|
}}
|
|
>
|
|
<TechFeaturesSection />
|
|
</section>
|
|
|
|
{/* About Section avec transition moderne */}
|
|
<section
|
|
className="section-transition"
|
|
style={{ backgroundColor: 'var(--banquise-white)' }}
|
|
>
|
|
<div
|
|
className="py-4"
|
|
style={{
|
|
background: 'linear-gradient(to right, transparent, rgba(52, 166, 252, 0.08), transparent)'
|
|
}}
|
|
></div>
|
|
<AboutSection
|
|
openAccordion={openAccordion}
|
|
toggleAccordion={toggleAccordion}
|
|
/>
|
|
</section> {/* Footer - Même couleur que navbar */}
|
|
<Footer />
|
|
|
|
{/* UI Components */}
|
|
<ScrollToTopButton />
|
|
|
|
{selectedService && (
|
|
<Popup
|
|
service={selectedService}
|
|
onClose={closeServiceModal}
|
|
translations={t.common}
|
|
/>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|