147 lines
9.0 KiB
TypeScript
147 lines
9.0 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 { useTranslation } from '@/lib/hooks/useTranslation';
|
|
import { useServiceModal } from '@/lib/hooks/useServiceModal';
|
|
import { useAccordion } from '@/lib/hooks/useAccordion';
|
|
import { useOceanDepthEffect } from '@/lib/hooks/useOceanDepthEffect';
|
|
|
|
export default function HomePage() {
|
|
const { t, currentLanguage, changeLanguage, availableLanguages } = useTranslation();
|
|
const { selectedService, openServiceModal, closeServiceModal } = useServiceModal();
|
|
const { openAccordion, toggleAccordion } = useAccordion();
|
|
const scrollDepth = useOceanDepthEffect();
|
|
|
|
return (
|
|
<div className="min-h-screen relative overflow-x-hidden">
|
|
{/* Arrière-plan océanique uniforme avec assombrissement progressif basé sur le scroll */}
|
|
<div className="fixed inset-0 pointer-events-none">
|
|
{/* Dégradé principal océanique - Surface (clair) vers abysses (très sombre) */}
|
|
<div className="absolute inset-0 bg-gradient-to-b from-banquise-blue-light via-banquise-blue via-banquise-blue-dark to-banquise-blue-dark"></div>
|
|
|
|
{/* Couche de profondeur progressive basée sur le scroll - Plus intense */}
|
|
<div
|
|
className="absolute inset-0 bg-gradient-to-b from-transparent via-banquise-blue-dark/60 to-banquise-blue-dark transition-opacity duration-500"
|
|
style={{ opacity: scrollDepth * 0.9 }}
|
|
></div>
|
|
|
|
{/* Effet de profondeur supplémentaire pour les moyennes profondeurs - Plus sombre */}
|
|
<div
|
|
className="absolute inset-0 bg-gradient-to-b from-transparent via-banquise-blue-dark/70 to-banquise-blue-dark transition-opacity duration-500"
|
|
style={{ opacity: Math.max(0, (scrollDepth - 0.2) * 1.5) }}
|
|
></div>
|
|
|
|
{/* Assombrissement pour les grandes profondeurs - Plus intense */}
|
|
<div
|
|
className="absolute inset-0 bg-gradient-to-b from-transparent via-banquise-blue-dark/80 to-slate-900 transition-opacity duration-500"
|
|
style={{ opacity: Math.max(0, (scrollDepth - 0.5) * 2) }}
|
|
></div>
|
|
|
|
{/* Assombrissement final pour les abysses - Très sombre */}
|
|
<div
|
|
className="absolute inset-0 bg-gradient-to-b from-banquise-blue-dark/50 to-slate-900 transition-opacity duration-500"
|
|
style={{ opacity: Math.max(0, (scrollDepth - 0.7) * 2.5) }}
|
|
></div>
|
|
|
|
{/* Rayons de lumière subtils qui percent l'eau depuis la surface */}
|
|
<div className="absolute inset-0 bg-gradient-to-br from-banquise-blue-lightest/4 via-transparent to-transparent"></div>
|
|
<div className="absolute inset-0 bg-gradient-to-bl from-transparent via-banquise-blue-lightest/2 to-transparent"></div>
|
|
|
|
{/* Effet de scintillement subtil avec animations océaniques */}
|
|
<div className="absolute inset-0">
|
|
<div className="absolute top-0 left-1/4 w-px h-full bg-gradient-to-b from-banquise-blue-lightest/20 via-banquise-blue-lightest/8 to-transparent animate-ocean-shimmer"></div>
|
|
<div className="absolute top-0 left-2/3 w-px h-full bg-gradient-to-b from-banquise-blue-lightest/15 via-banquise-blue-lightest/6 to-transparent animate-ocean-shimmer delay-1000"></div>
|
|
<div className="absolute top-0 left-3/4 w-px h-full bg-gradient-to-b from-banquise-blue-lightest/10 via-banquise-blue-lightest/4 to-transparent animate-ocean-shimmer delay-2000"></div>
|
|
</div>
|
|
|
|
{/* Particules flottantes (bulles) pour l'effet sous-marin avec animations variées */}
|
|
<div className="absolute inset-0">
|
|
{/* Bulles réparties sur toute la hauteur pour l'effet océanique continu */}
|
|
<div className="absolute top-1/6 left-1/5 w-2 h-2 bg-banquise-blue-lightest/20 rounded-full animate-bubble-float"></div>
|
|
<div className="absolute top-1/4 left-3/4 w-1 h-1 bg-banquise-blue-lightest/15 rounded-full animate-bubble-float-fast delay-500"></div>
|
|
<div className="absolute top-1/3 left-1/3 w-3 h-3 bg-banquise-blue-lightest/10 rounded-full animate-bubble-float-slow"></div>
|
|
<div className="absolute top-1/2 left-4/5 w-1.5 h-1.5 bg-banquise-blue-lightest/18 rounded-full animate-bubble-float delay-1000"></div>
|
|
<div className="absolute top-2/3 left-1/6 w-2.5 h-2.5 bg-banquise-blue-lightest/8 rounded-full animate-bubble-float-slow delay-1500"></div>
|
|
<div className="absolute top-3/4 left-2/3 w-1 h-1 bg-banquise-blue-lightest/22 rounded-full animate-bubble-float-fast delay-700"></div>
|
|
<div className="absolute top-5/6 left-1/2 w-1.5 h-1.5 bg-banquise-blue-lightest/12 rounded-full animate-bubble-float delay-300"></div>
|
|
<div className="absolute top-11/12 left-3/5 w-2 h-2 bg-banquise-blue-lightest/6 rounded-full animate-bubble-float-slow delay-2000"></div>
|
|
|
|
{/* Bulles supplémentaires pour un effet plus dense */}
|
|
<div className="absolute top-1/8 left-1/2 w-1.5 h-1.5 bg-banquise-blue-lightest/25 rounded-full animate-bubble-float-fast delay-800"></div>
|
|
<div className="absolute top-3/8 left-1/8 w-2 h-2 bg-banquise-blue-lightest/12 rounded-full animate-bubble-float delay-1200"></div>
|
|
<div className="absolute top-5/8 left-7/8 w-1 h-1 bg-banquise-blue-lightest/20 rounded-full animate-bubble-float-slow delay-600"></div>
|
|
<div className="absolute top-7/8 left-1/4 w-2.5 h-2.5 bg-banquise-blue-lightest/8 rounded-full animate-bubble-float-fast delay-1800"></div>
|
|
<div className="absolute top-1/7 left-5/6 w-1 h-1 bg-banquise-blue-lightest/28 rounded-full animate-bubble-float delay-400"></div>
|
|
<div className="absolute top-2/7 left-2/5 w-1.5 h-1.5 bg-banquise-blue-lightest/15 rounded-full animate-bubble-float-slow delay-900"></div>
|
|
<div className="absolute top-4/7 left-3/8 w-2 h-2 bg-banquise-blue-lightest/10 rounded-full animate-bubble-float-fast delay-1400"></div>
|
|
<div className="absolute top-6/7 left-4/5 w-1 h-1 bg-banquise-blue-lightest/18 rounded-full animate-bubble-float delay-200"></div>
|
|
|
|
{/* Bulles très petites pour densité */}
|
|
<div className="absolute top-1/10 left-3/10 w-0.5 h-0.5 bg-banquise-blue-lightest/30 rounded-full animate-bubble-float-fast delay-100"></div>
|
|
<div className="absolute top-3/10 left-7/10 w-0.5 h-0.5 bg-banquise-blue-lightest/25 rounded-full animate-bubble-float delay-1100"></div>
|
|
<div className="absolute top-7/10 left-1/10 w-0.5 h-0.5 bg-banquise-blue-lightest/20 rounded-full animate-bubble-float-slow delay-1700"></div>
|
|
<div className="absolute top-9/10 left-9/10 w-0.5 h-0.5 bg-banquise-blue-lightest/15 rounded-full animate-bubble-float-fast delay-2200"></div>
|
|
|
|
{/* Bulles moyennes pour variation */}
|
|
<div className="absolute top-1/5 left-4/7 w-3 h-3 bg-banquise-blue-lightest/5 rounded-full animate-bubble-float-slow delay-1600"></div>
|
|
<div className="absolute top-2/5 left-6/7 w-2.5 h-2.5 bg-banquise-blue-lightest/7 rounded-full animate-bubble-float delay-800"></div>
|
|
<div className="absolute top-4/5 left-2/7 w-3.5 h-3.5 bg-banquise-blue-lightest/4 rounded-full animate-bubble-float-slow delay-2400"></div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Contenu principal avec arrière-plan océanique uniforme */}
|
|
<div className="relative z-10 text-white">
|
|
{/* Navigation flottante */}
|
|
<ModernNavigation
|
|
translations={t.navigation}
|
|
languageSwitcher={
|
|
<ModernLanguageSwitcher
|
|
currentLanguage={currentLanguage}
|
|
onLanguageChange={changeLanguage}
|
|
availableLanguages={availableLanguages}
|
|
/>
|
|
}
|
|
/>
|
|
|
|
{/* Section Hero - Surface de l'océan */}
|
|
<HeroSection translations={t.hero} />
|
|
|
|
{/* Section Services */}
|
|
<ServicesSection
|
|
services={t.services}
|
|
onServiceClick={openServiceModal}
|
|
translations={t.common}
|
|
/>
|
|
|
|
{/* Section TechFeatures */}
|
|
<TechFeaturesSection />
|
|
|
|
{/* Section About */}
|
|
<AboutSection openAccordion={openAccordion} toggleAccordion={toggleAccordion} />
|
|
|
|
{/* Footer */}
|
|
<Footer />
|
|
</div>
|
|
|
|
{/* UI Components */}
|
|
<ScrollToTopButton />
|
|
|
|
{selectedService && (
|
|
<Popup
|
|
service={selectedService}
|
|
onClose={closeServiceModal}
|
|
translations={t.common}
|
|
/>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|