update landing page
This commit is contained in:
Thomas Fransolet
parent
9dd74c4853
commit
75b8e6b7b8
656
src/app/page.tsx
656
src/app/page.tsx
@ -258,10 +258,10 @@ export default function Home() {
|
|||||||
fullDesc: "Déploiement de la technologie MyInfoMate sur les bornes interactives de l'Office du Tourisme de Namur. Cette installation permet aux visiteurs d'explorer la ville de manière tactile, avec des points d'intérêt géo-localisés et une planification d'itinéraire simplifiée.",
|
fullDesc: "Déploiement de la technologie MyInfoMate sur les bornes interactives de l'Office du Tourisme de Namur. Cette installation permet aux visiteurs d'explorer la ville de manière tactile, avec des points d'intérêt géo-localisés et une planification d'itinéraire simplifiée.",
|
||||||
images: [
|
images: [
|
||||||
resolveImage("PORTFOLIO_NAMUR"),
|
resolveImage("PORTFOLIO_NAMUR"),
|
||||||
"https://images.unsplash.com/photo-1517048676732-d65bc937f952?q=80&w=2070",
|
"https://images.unsplash.com/photo-1551434678-e076c223a692?q=80&w=2070",
|
||||||
"https://images.unsplash.com/photo-1531403001884-48a690c749ea?q=80&w=2070"
|
"https://images.unsplash.com/photo-1517245386807-bb43f82c33c4?q=80&w=2070"
|
||||||
],
|
],
|
||||||
offset: true,
|
offset: false,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "Carnaval de Marche",
|
title: "Carnaval de Marche",
|
||||||
@ -279,22 +279,22 @@ export default function Home() {
|
|||||||
{
|
{
|
||||||
title: "Fort de Saint-Héribert",
|
title: "Fort de Saint-Héribert",
|
||||||
categories: ["Mobile", "Embedded", "Web"],
|
categories: ["Mobile", "Embedded", "Web"],
|
||||||
desc: "Application mobile immersive pour la visite du fort via QR codes et localisation. Finalisée en mai 2023.",
|
desc: "Application mobile immersive pour la visite du fort via QR codes et localisation.",
|
||||||
img: resolveImage("PORTFOLIO_HERIBERT"),
|
img: resolveImage("PORTFOLIO_HERIBERT"),
|
||||||
fullDesc: "Notre réalisation pour le Fort de Saint-Héribert consiste en une application mobile dédiée à la visite du fort. Cette application offre une expérience immersive, où le contenu peut être consulté soit en scannant un QR code, soit en activant l'affichage de contenu basé sur la localisation du visiteur. La détection de proximité permet une interaction fluide avec le patrimoine.",
|
fullDesc: "Notre réalisation pour le Fort de Saint-Héribert consiste en une application mobile dédiée à la visite du fort. Cette application offre une expérience immersive, où le contenu peut être consulté soit en scannant un QR code, soit en activant l'affichage de contenu basé sur la localisation du visiteur.",
|
||||||
images: [
|
images: [
|
||||||
resolveImage("PORTFOLIO_HERIBERT"),
|
resolveImage("PORTFOLIO_HERIBERT"),
|
||||||
"https://images.unsplash.com/photo-1533106418989-88406c7cc8ca?q=80&w=2070",
|
"https://images.unsplash.com/photo-1533106418989-88406c7cc8ca?q=80&w=2070",
|
||||||
"https://images.unsplash.com/photo-1496307653780-42ee777d4833?q=80&w=2070"
|
"https://images.unsplash.com/photo-1496307653780-42ee777d4833?q=80&w=2070"
|
||||||
],
|
],
|
||||||
offset: true,
|
offset: false,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "Musée de la fraise",
|
title: "Musée de la fraise",
|
||||||
categories: ["Desktop", "Mobile"],
|
categories: ["Desktop", "Mobile"],
|
||||||
desc: "Tablettes interactives et gestionnaire de contenu pour enrichir l'expérience musée.",
|
desc: "Tablettes interactives et gestionnaire de contenu pour enrichir l'expérience musée.",
|
||||||
img: resolveImage("PORTFOLIO_FRAISE"),
|
img: resolveImage("PORTFOLIO_FRAISE"),
|
||||||
fullDesc: "Le projet pour le musée de la fraise de Wépion avait pour objectif d'intégrer des tablettes interactives. Nous avons créé un gestionnaire dédié (MyMuseum) permettant au personnel de personnaliser le contenu, ainsi que l'application mobile chargée sur les tablettes pour la consultation des visiteurs.",
|
fullDesc: "Le projet pour le musée de la fraise de Wépion avait pour objectif d'intégrer des tablettes interactives. Nous avons créé un gestionnaire dédié (MyMuseum) permettant au personnel de personnaliser le contenu.",
|
||||||
images: [
|
images: [
|
||||||
resolveImage("PORTFOLIO_FRAISE"),
|
resolveImage("PORTFOLIO_FRAISE"),
|
||||||
"https://images.unsplash.com/photo-1581291518062-c07a09ea0937?q=80&w=2070",
|
"https://images.unsplash.com/photo-1581291518062-c07a09ea0937?q=80&w=2070",
|
||||||
@ -307,54 +307,51 @@ export default function Home() {
|
|||||||
categories: ["Web"],
|
categories: ["Web"],
|
||||||
desc: "Site vitrine et boutique en ligne pour investir dans une coopérative locale.",
|
desc: "Site vitrine et boutique en ligne pour investir dans une coopérative locale.",
|
||||||
img: resolveImage("PORTFOLIO_CHISTREE"),
|
img: resolveImage("PORTFOLIO_CHISTREE"),
|
||||||
fullDesc: "La coopérative souhaitait un site internet vitrine permettant aux visiteurs d'investir dans ce beau projet via une petite boutique en ligne intégrée. Une solution Web complète alliant esthétique et fonctionnalité e-commerce.",
|
fullDesc: "La coopérative souhaitait un site internet vitrine permettant aux visiteurs d'investir dans ce beau projet via une petite boutique en ligne intégrée.",
|
||||||
images: [
|
images: [
|
||||||
resolveImage("PORTFOLIO_CHISTREE"),
|
resolveImage("PORTFOLIO_CHISTREE"),
|
||||||
"https://images.unsplash.com/photo-1517245386807-bb43f82c33c4?q=80&w=2070",
|
"https://images.unsplash.com/photo-1517245386807-bb43f82c33c4?q=80&w=2070",
|
||||||
"https://images.unsplash.com/photo-1460925895917-afdab827c52f?q=80&w=2015"
|
"https://images.unsplash.com/photo-1460925895917-afdab827c52f?q=80&w=2015"
|
||||||
],
|
],
|
||||||
offset: true,
|
offset: false,
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
const initialProjects = allProjects.slice(0, 4);
|
const firstProjects = allProjects.slice(0, 4);
|
||||||
const extraProjects = allProjects.slice(4);
|
const extraProjects = allProjects.slice(4);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="flex flex-col gap-16 relative">
|
<div className="relative">
|
||||||
{/* Initial 4 projects */}
|
{/* Projects Grid */}
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-16">
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-12 md:gap-16">
|
||||||
{initialProjects.map((project, idx) => (
|
{firstProjects.map((project, idx) => (
|
||||||
<div
|
<div
|
||||||
key={idx}
|
key={idx}
|
||||||
className={`group relative overflow-hidden rounded-[3rem] aspect-[4/3] cursor-pointer shadow-2xl ${project.offset ? "md:translate-y-20" : ""
|
className="group relative overflow-hidden rounded-[3rem] aspect-[4/3] cursor-pointer shadow-2xl"
|
||||||
}`}
|
onClick={() => {
|
||||||
|
setSelectedProject(project);
|
||||||
|
setCurrentImageIndex(0);
|
||||||
|
}}
|
||||||
>
|
>
|
||||||
<img
|
<img
|
||||||
src={project.img}
|
src={project.img}
|
||||||
alt={project.title}
|
alt={project.title}
|
||||||
className="w-full h-full object-cover transition-transform duration-1000 group-hover:scale-110"
|
className="w-full h-full object-cover transition-transform duration-1000 group-hover:scale-110"
|
||||||
/>
|
/>
|
||||||
<div className="absolute inset-0 bg-gradient-to-t from-black/90 via-black/40 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500 flex flex-col justify-end p-12">
|
<div className="absolute inset-0 bg-gradient-to-t from-black/90 via-black/40 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500 flex flex-col justify-end p-10 md:p-12">
|
||||||
<div className="flex flex-col">
|
<div className="flex flex-col">
|
||||||
<span className="text-primary font-bold text-xs uppercase tracking-widest mb-1">
|
<span className="text-primary font-bold text-xs uppercase tracking-widest mb-1">
|
||||||
{project.categories.join(" / ")}
|
{project.categories.join(" / ")}
|
||||||
</span>
|
</span>
|
||||||
<h3 className="text-white text-2xl font-black mb-4">
|
<h3 className="text-white text-2xl md:text-3xl font-black mb-4">
|
||||||
{project.title}
|
{project.title}
|
||||||
</h3>
|
</h3>
|
||||||
</div>
|
</div>
|
||||||
<p className="text-white/60 mb-8 text-sm leading-relaxed line-clamp-2">
|
<p className="text-white/60 mb-8 text-sm leading-relaxed line-clamp-2">
|
||||||
{project.desc}
|
{project.desc}
|
||||||
</p>
|
</p>
|
||||||
<button
|
<button className="group/btn flex items-center gap-2 text-white font-bold text-sm tracking-widest uppercase">
|
||||||
onClick={() => {
|
Voir le projet
|
||||||
setSelectedProject(project);
|
|
||||||
setCurrentImageIndex(0);
|
|
||||||
}}
|
|
||||||
className="group/btn flex items-center gap-2 text-white font-bold text-sm tracking-widest uppercase"
|
|
||||||
>
|
|
||||||
Voir plus
|
|
||||||
<span className="material-symbols-outlined text-sm group-hover/btn:translate-x-1 transition-transform">
|
<span className="material-symbols-outlined text-sm group-hover/btn:translate-x-1 transition-transform">
|
||||||
arrow_forward
|
arrow_forward
|
||||||
</span>
|
</span>
|
||||||
@ -364,329 +361,302 @@ export default function Home() {
|
|||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{(() => {
|
{/* Professional Reveal Zone */}
|
||||||
const extraProjects = allProjects.slice(4, 12); // Adjusted slice for extra projects
|
<div className="relative mt-12 md:mt-16">
|
||||||
return (
|
<div
|
||||||
<div className="relative mt-32 flex flex-col items-center">
|
className={`relative w-full transition-all duration-1000 ease-[cubic-bezier(0.23,1,0.32,1)] overflow-hidden
|
||||||
{/* Liquid Reveal Projects Container */}
|
${showAllProjects ? "max-h-[2000px] opacity-100" : "max-h-0 opacity-0"}`}
|
||||||
<div
|
>
|
||||||
className={`relative w-full transition-all duration-[2000ms] ease-[cubic-bezier(0.85,0,0.15,1)] origin-top overflow-hidden
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-12 md:gap-16 pb-32">
|
||||||
${showAllProjects ? "max-h-[5000px] opacity-100 pb-64" : "max-h-0 opacity-0"}`}
|
{extraProjects.map((project, idx) => (
|
||||||
>
|
<div
|
||||||
{/* Branded Expansion Background */}
|
key={idx + 4}
|
||||||
<div className="absolute inset-0 -mx-[50vw] left-1/2 w-[200vw] h-full bg-zinc-50 dark:bg-white/5 pointer-events-none" />
|
className="group relative overflow-hidden rounded-[3rem] aspect-[4/3] cursor-pointer shadow-2xl"
|
||||||
<div className="absolute inset-0 -mx-[50vw] left-1/2 w-[200vw] h-full pointer-events-none opacity-50"
|
onClick={() => {
|
||||||
style={{ background: 'radial-gradient(circle at 50% 0%, var(--primary), transparent 70%)' }} />
|
setSelectedProject(project);
|
||||||
|
setCurrentImageIndex(0);
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-16 relative z-10 container mx-auto px-6 pt-32">
|
}}
|
||||||
{extraProjects.map((project, idx) => (
|
>
|
||||||
<div
|
<img
|
||||||
key={idx + 4}
|
src={project.img}
|
||||||
className={`group relative overflow-hidden rounded-[3rem] aspect-[4/3] cursor-pointer shadow-2xl ${project.offset ? "md:translate-y-20" : ""
|
alt={project.title}
|
||||||
}`}
|
className="w-full h-full object-cover transition-transform duration-1000 group-hover:scale-110"
|
||||||
>
|
/>
|
||||||
<img
|
<div className="absolute inset-0 bg-gradient-to-t from-black/90 via-black/40 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500 flex flex-col justify-end p-10 md:p-12">
|
||||||
src={project.img}
|
<div className="flex flex-col">
|
||||||
alt={project.title}
|
<span className="text-primary font-bold text-xs uppercase tracking-widest mb-1">
|
||||||
className="w-full h-full object-cover transition-transform duration-1000 group-hover:scale-110"
|
{project.categories.join(" / ")}
|
||||||
/>
|
</span>
|
||||||
<div className="absolute inset-0 bg-gradient-to-t from-black/90 via-black/40 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500 flex flex-col justify-end p-12">
|
<h3 className="text-white text-2xl md:text-3xl font-black mb-4">
|
||||||
<div className="flex flex-col">
|
{project.title}
|
||||||
<span className="text-primary font-bold text-xs uppercase tracking-widest mb-1">
|
</h3>
|
||||||
{project.categories.join(" / ")}
|
|
||||||
</span>
|
|
||||||
<h3 className="text-white text-2xl font-black mb-4">
|
|
||||||
{project.title}
|
|
||||||
</h3>
|
|
||||||
</div>
|
|
||||||
<p className="text-white/60 mb-8 text-sm leading-relaxed line-clamp-2">
|
|
||||||
{project.desc}
|
|
||||||
</p>
|
|
||||||
<button
|
|
||||||
onClick={() => {
|
|
||||||
setSelectedProject(project);
|
|
||||||
setCurrentImageIndex(0);
|
|
||||||
}}
|
|
||||||
className="group/btn flex items-center gap-2 text-white font-bold text-sm tracking-widest uppercase"
|
|
||||||
>
|
|
||||||
Voir plus
|
|
||||||
<span className="material-symbols-outlined text-sm group-hover/btn:translate-x-1 transition-transform">
|
|
||||||
arrow_forward
|
|
||||||
</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
))}
|
<p className="text-white/60 mb-8 text-sm leading-relaxed line-clamp-2">
|
||||||
</div>
|
{project.desc}
|
||||||
</div>
|
</p>
|
||||||
|
<button className="group/btn flex items-center gap-2 text-white font-bold text-sm tracking-widest uppercase">
|
||||||
{/* Surface & Button (Shown when not expanded) */}
|
Voir le projet
|
||||||
{!showAllProjects && (
|
<span className="material-symbols-outlined text-sm group-hover/btn:translate-x-1 transition-transform">
|
||||||
<div className="w-full flex flex-col items-center">
|
arrow_forward
|
||||||
{/* The Liquid Base - High Visibility Curve */}
|
</span>
|
||||||
<div className="w-screen -mx-[50vw] left-1/2 relative h-80 overflow-visible pointer-events-none -mb-40">
|
</button>
|
||||||
{/* Deep Curved Glow */}
|
|
||||||
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-screen h-[400px] bg-primary/20 blur-[120px] rounded-full opacity-60" />
|
|
||||||
<svg viewBox="0 0 1440 200" preserveAspectRatio="none" className="w-full h-40 absolute top-0 fill-primary/10 stroke-primary/20 stroke-2">
|
|
||||||
<path d="M0,200 Q720,0 1440,200 Z" />
|
|
||||||
</svg>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<button
|
|
||||||
onClick={() => setShowAllProjects(true)}
|
|
||||||
className="group relative inline-flex items-center gap-8 px-14 py-7 bg-[#0A0F1C] text-white rounded-[4rem] font-black text-lg tracking-[0.2em] uppercase transition-all duration-500 hover:scale-105 hover:shadow-[0_20px_60px_-15px_rgba(30,174,188,0.5)] z-20"
|
|
||||||
>
|
|
||||||
<div className="flex flex-col items-start text-left">
|
|
||||||
<span className="text-[10px] text-primary mb-1 tracking-[0.4em]">Découverte</span>
|
|
||||||
<span className="relative z-10">Découvrir plus de projets</span>
|
|
||||||
</div>
|
|
||||||
<div className="relative z-10 w-14 h-14 rounded-2xl bg-gradient-to-br from-primary to-primary-hover flex items-center justify-center group-hover:translate-y-2 transition-all duration-500 shadow-lg shadow-primary/20">
|
|
||||||
<span className="material-symbols-outlined text-white text-3xl font-bold">expand_more</span>
|
|
||||||
</div>
|
|
||||||
<div className="absolute inset-x-0 -bottom-1 h-2 bg-gradient-to-r from-transparent via-primary to-transparent opacity-0 group-hover:opacity-100 transition-opacity blur-md" />
|
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
)}
|
))}
|
||||||
</div>
|
</div>
|
||||||
);
|
</div>
|
||||||
})()}
|
|
||||||
|
{!showAllProjects && (
|
||||||
|
<div className="flex flex-col items-center pt-8">
|
||||||
|
<div className="w-24 h-px bg-slate-200 dark:bg-white/10 mb-12" />
|
||||||
|
<button
|
||||||
|
onClick={() => setShowAllProjects(true)}
|
||||||
|
className="group relative inline-flex items-center gap-6 px-12 py-6 bg-slate-900 dark:bg-white text-white dark:text-slate-900 rounded-2xl font-black text-base tracking-widest uppercase transition-all duration-300 hover:scale-105 active:scale-95 shadow-xl"
|
||||||
|
>
|
||||||
|
<span>Découvrir plus de projets</span>
|
||||||
|
<span className="material-symbols-outlined transition-transform duration-300 group-hover:translate-y-1">expand_more</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
})()}
|
})()}
|
||||||
{/* Contact Form Section - REVISED LAYOUT to match Image */}
|
|
||||||
<section className="bg-white dark:bg-background-dark py-32" id="contact">
|
|
||||||
<div className="container mx-auto px-6">
|
|
||||||
<div className="max-w-6xl mx-auto bg-white dark:bg-zinc-900 rounded-[4rem] overflow-hidden shadow-[0_50px_100px_-20px_rgba(0,0,0,0.15)] flex flex-col md:flex-row border border-slate-100 dark:border-white/5">
|
|
||||||
{/* Sidebar (Teal) */}
|
|
||||||
<div className="md:w-[40%] bg-primary p-16 text-white flex flex-col relative overflow-hidden">
|
|
||||||
<div className="relative z-10 flex-grow">
|
|
||||||
<h4 className="text-5xl font-black mb-10 leading-tight">
|
|
||||||
Let's talk about the future
|
|
||||||
</h4>
|
|
||||||
<p className="opacity-90 text-xl leading-relaxed mb-12 font-light max-w-xs">
|
|
||||||
Prêt à donner vie à votre vision ? Notre équipe est prête à
|
|
||||||
relever vos défis les plus complexes.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div className="space-y-10 relative z-10 pt-12 border-t border-white/20">
|
|
||||||
<div className="flex items-center gap-6">
|
|
||||||
<div className="size-12 bg-white/10 rounded-xl flex items-center justify-center">
|
|
||||||
<span className="material-symbols-outlined text-white">mail</span>
|
|
||||||
</div>
|
|
||||||
<span className="text-lg font-medium">contact@unov.be</span>
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center gap-6">
|
|
||||||
<div className="size-12 bg-white/10 rounded-xl flex items-center justify-center">
|
|
||||||
<span className="material-symbols-outlined text-white">location_on</span>
|
|
||||||
</div>
|
|
||||||
<span className="text-lg font-medium">Vedrin, Belgique</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{/* Form Area (White/Right) */}
|
|
||||||
<div className="md:w-[60%] p-16 bg-[#F9FAFB] dark:bg-zinc-800/20">
|
|
||||||
<form className="space-y-12">
|
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-10">
|
|
||||||
<div className="space-y-4">
|
|
||||||
<label className="text-xs font-black uppercase tracking-widest text-[#2D3748] dark:text-white/60">
|
|
||||||
Nom
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
className="w-full bg-white dark:bg-white/5 border-none rounded-2xl p-5 shadow-sm focus:ring-4 focus:ring-primary/10 transition-all outline-none text-[#1A202C] dark:text-white"
|
|
||||||
placeholder="John Doe"
|
|
||||||
type="text"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="space-y-4">
|
|
||||||
<label className="text-xs font-black uppercase tracking-widest text-[#2D3748] dark:text-white/60">
|
|
||||||
Email
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
className="w-full bg-white dark:bg-white/5 border-none rounded-2xl p-5 shadow-sm focus:ring-4 focus:ring-primary/10 transition-all outline-none text-[#1A202C] dark:text-white"
|
|
||||||
placeholder="john@example.com"
|
|
||||||
type="email"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="space-y-4">
|
|
||||||
<label className="text-xs font-black uppercase tracking-widest text-[#2D3748] dark:text-white/60">
|
|
||||||
Service
|
|
||||||
</label>
|
|
||||||
<div className="relative">
|
|
||||||
<select className="w-full bg-white dark:bg-white/5 border-none rounded-2xl p-5 shadow-sm focus:ring-4 focus:ring-primary/10 transition-all outline-none appearance-none cursor-pointer text-[#1A202C] dark:text-white font-medium">
|
|
||||||
<option className="text-[#1A202C] bg-white">Software Development</option>
|
|
||||||
<option className="text-[#1A202C] bg-white">AI Integration</option>
|
|
||||||
<option className="text-[#1A202C] bg-white">3D Modeling & Printing</option>
|
|
||||||
<option className="text-[#1A202C] bg-white">Autre</option>
|
|
||||||
</select>
|
|
||||||
<span className="material-symbols-outlined absolute right-5 top-1/2 -translate-y-1/2 pointer-events-none text-slate-400">
|
|
||||||
expand_more
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="space-y-4">
|
|
||||||
<label className="text-xs font-black uppercase tracking-widest text-[#2D3748] dark:text-white/60">
|
|
||||||
Message
|
|
||||||
</label>
|
|
||||||
<textarea
|
|
||||||
className="w-full bg-white dark:bg-white/5 border-none rounded-2xl p-5 shadow-sm focus:ring-4 focus:ring-primary/10 transition-all outline-none resize-none text-[#1A202C] dark:text-white"
|
|
||||||
placeholder="Tell us about your project..."
|
|
||||||
rows={6}
|
|
||||||
></textarea>
|
|
||||||
</div>
|
|
||||||
<button className="w-full bg-primary text-white py-6 rounded-2xl font-black text-xl shadow-xl shadow-primary/20 hover:brightness-110 active:scale-[0.98] transition-all">
|
|
||||||
Envoyer la demande
|
|
||||||
</button>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
{/* Footer - DARK for logo contrast */}
|
|
||||||
<footer className="py-24 bg-[#0A0F1C] text-white/90">
|
|
||||||
<div className="container mx-auto px-6">
|
|
||||||
<div className="flex flex-col md:flex-row justify-between items-center gap-16">
|
|
||||||
<div className="flex flex-col items-center md:items-start gap-6">
|
|
||||||
<div className="flex items-center gap-3 underline-offset-4">
|
|
||||||
<Image
|
|
||||||
src={resolveImage("{{DATA:IMAGE:IMAGE_2}}")}
|
|
||||||
alt="UNOV Logo"
|
|
||||||
width={120}
|
|
||||||
height={35}
|
|
||||||
className="h-8 w-auto object-contain"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<p className="text-slate-400 text-sm max-w-xs text-center md:text-left leading-relaxed">
|
|
||||||
Agence technologique de précision spécialisée dans les logiciels haut de gamme et les solutions d'IA. La perfection dans chaque ligne de code.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div className="flex flex-col items-center md:items-end gap-8">
|
|
||||||
<div className="flex gap-10">
|
|
||||||
<a
|
|
||||||
href="#"
|
|
||||||
className="text-slate-400 hover:text-primary transition-all hover:-translate-y-1"
|
|
||||||
>
|
|
||||||
<span className="material-symbols-outlined text-3xl">
|
|
||||||
language
|
|
||||||
</span>
|
|
||||||
</a>
|
|
||||||
<a
|
|
||||||
href="#"
|
|
||||||
className="text-slate-400 hover:text-primary transition-all hover:-translate-y-1"
|
|
||||||
>
|
|
||||||
<span className="material-symbols-outlined text-3xl">
|
|
||||||
public
|
|
||||||
</span>
|
|
||||||
</a>
|
|
||||||
<a
|
|
||||||
href="#"
|
|
||||||
className="text-slate-400 hover:text-primary transition-all hover:-translate-y-1"
|
|
||||||
>
|
|
||||||
<span className="material-symbols-outlined text-3xl">
|
|
||||||
groups
|
|
||||||
</span>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<div className="text-slate-500 text-xs font-bold uppercase tracking-widest">
|
|
||||||
© {new Date().getFullYear()} UNOV. Tous droits réservés.
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</footer>
|
|
||||||
|
|
||||||
{/* Project Modal */}
|
|
||||||
{
|
|
||||||
selectedProject && (
|
|
||||||
<div className="fixed inset-0 z-[100] flex items-center justify-center p-4 md:p-8">
|
|
||||||
<div
|
|
||||||
className="absolute inset-0 bg-slate-900/60 backdrop-blur-sm"
|
|
||||||
onClick={() => setSelectedProject(null)}
|
|
||||||
/>
|
|
||||||
<div className="relative bg-white dark:bg-slate-900 w-full max-w-4xl max-h-[90vh] overflow-y-auto rounded-3xl shadow-2xl flex flex-col md:flex-row overflow-hidden border border-slate-200 dark:border-slate-800 animate-in fade-in zoom-in duration-300">
|
|
||||||
<button
|
|
||||||
onClick={() => setSelectedProject(null)}
|
|
||||||
className="absolute top-6 right-6 z-20 bg-white/10 backdrop-blur-md text-slate-900 dark:text-white w-10 h-10 rounded-full flex items-center justify-center hover:bg-white/20 transition-all"
|
|
||||||
>
|
|
||||||
<span className="material-symbols-outlined text-xl">close</span>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<div className="md:w-1/2 relative h-[400px] md:h-auto overflow-hidden group/modal">
|
|
||||||
<Image
|
|
||||||
src={selectedProject.images[currentImageIndex]}
|
|
||||||
alt={selectedProject.title}
|
|
||||||
fill
|
|
||||||
className="object-cover transition-all duration-700"
|
|
||||||
/>
|
|
||||||
<div className="absolute inset-0 bg-gradient-to-t from-slate-900/60 to-transparent pointer-events-none" />
|
|
||||||
|
|
||||||
{/* Gallery Controls */}
|
|
||||||
{selectedProject.images && selectedProject.images.length > 1 && (
|
|
||||||
<>
|
|
||||||
<div className="absolute inset-x-0 bottom-8 flex justify-center gap-3 z-10">
|
|
||||||
{selectedProject.images.map((_: any, i: number) => (
|
|
||||||
<button
|
|
||||||
key={i}
|
|
||||||
onClick={() => setCurrentImageIndex(i)}
|
|
||||||
className={`w-2.5 h-2.5 rounded-full transition-all ${i === currentImageIndex ? "bg-primary w-8" : "bg-white/40 hover:bg-white/60"}`}
|
|
||||||
/>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
<button
|
|
||||||
onClick={() => setCurrentImageIndex((prev) => (prev > 0 ? prev - 1 : selectedProject.images.length - 1))}
|
|
||||||
className="absolute left-4 top-1/2 -translate-y-1/2 w-10 h-10 rounded-full bg-white/10 backdrop-blur-md flex items-center justify-center text-white opacity-0 group-hover/modal:opacity-100 transition-all hover:bg-white/20"
|
|
||||||
>
|
|
||||||
<span className="material-symbols-outlined">chevron_left</span>
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
onClick={() => setCurrentImageIndex((prev) => (prev < selectedProject.images.length - 1 ? prev + 1 : 0))}
|
|
||||||
className="absolute right-4 top-1/2 -translate-y-1/2 w-10 h-10 rounded-full bg-white/10 backdrop-blur-md flex items-center justify-center text-white opacity-0 group-hover/modal:opacity-100 transition-all hover:bg-white/20"
|
|
||||||
>
|
|
||||||
<span className="material-symbols-outlined">chevron_right</span>
|
|
||||||
</button>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="md:w-1/2 p-8 md:p-12 flex flex-col justify-center">
|
|
||||||
<span className="text-primary font-bold uppercase tracking-[0.2em] text-xs mb-4 block">
|
|
||||||
{selectedProject.categories.join(" / ")}
|
|
||||||
</span>
|
|
||||||
<h2 className="text-3xl md:text-5xl font-black mb-8 leading-tight text-slate-900 dark:text-white">
|
|
||||||
{selectedProject.title}
|
|
||||||
</h2>
|
|
||||||
<div className="w-12 h-1 bg-primary mb-8" />
|
|
||||||
<p className="text-slate-600 dark:text-slate-400 text-lg leading-relaxed mb-10">
|
|
||||||
{selectedProject.fullDesc || selectedProject.desc}
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<div className="flex justify-between items-center mt-auto">
|
|
||||||
{selectedProject.link && (
|
|
||||||
<a
|
|
||||||
href={selectedProject.link}
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
className="text-primary font-bold flex items-center gap-2 group/link"
|
|
||||||
>
|
|
||||||
<span className="material-symbols-outlined">language</span>
|
|
||||||
<span className="border-b-2 border-transparent group-hover/link:border-primary transition-all pb-0.5">Visiter le site</span>
|
|
||||||
</a>
|
|
||||||
)}
|
|
||||||
<div className="flex justify-end flex-grow">
|
|
||||||
<button
|
|
||||||
onClick={() => setSelectedProject(null)}
|
|
||||||
className="bg-primary hover:bg-primary-hover text-white px-10 py-4 rounded-xl font-bold transition-all w-fit shadow-xl"
|
|
||||||
>
|
|
||||||
Fermer
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
</div>
|
</div>
|
||||||
);
|
</section>
|
||||||
|
{/* Contact Form Section - REVISED LAYOUT to match Image */}
|
||||||
|
<section className="bg-white dark:bg-background-dark py-32" id="contact">
|
||||||
|
<div className="container mx-auto px-6">
|
||||||
|
<div className="max-w-6xl mx-auto bg-white dark:bg-zinc-900 rounded-[4rem] overflow-hidden shadow-[0_50px_100px_-20px_rgba(0,0,0,0.15)] flex flex-col md:flex-row border border-slate-100 dark:border-white/5">
|
||||||
|
{/* Sidebar (Teal) */}
|
||||||
|
<div className="md:w-[40%] bg-primary p-16 text-white flex flex-col relative overflow-hidden">
|
||||||
|
<div className="relative z-10 flex-grow">
|
||||||
|
<h4 className="text-5xl font-black mb-10 leading-tight">
|
||||||
|
Let's talk about the future
|
||||||
|
</h4>
|
||||||
|
<p className="opacity-90 text-xl leading-relaxed mb-12 font-light max-w-xs">
|
||||||
|
Prêt à donner vie à votre vision ? Notre équipe est prête à
|
||||||
|
relever vos défis les plus complexes.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-10 relative z-10 pt-12 border-t border-white/20">
|
||||||
|
<div className="flex items-center gap-6">
|
||||||
|
<div className="size-12 bg-white/10 rounded-xl flex items-center justify-center">
|
||||||
|
<span className="material-symbols-outlined text-white">mail</span>
|
||||||
|
</div>
|
||||||
|
<span className="text-lg font-medium">contact@unov.be</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-6">
|
||||||
|
<div className="size-12 bg-white/10 rounded-xl flex items-center justify-center">
|
||||||
|
<span className="material-symbols-outlined text-white">location_on</span>
|
||||||
|
</div>
|
||||||
|
<span className="text-lg font-medium">Vedrin, Belgique</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/* Form Area (White/Right) */}
|
||||||
|
<div className="md:w-[60%] p-16 bg-[#F9FAFB] dark:bg-zinc-800/20">
|
||||||
|
<form className="space-y-12">
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-10">
|
||||||
|
<div className="space-y-4">
|
||||||
|
<label className="text-xs font-black uppercase tracking-widest text-[#2D3748] dark:text-white/60">
|
||||||
|
Nom
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
className="w-full bg-white dark:bg-white/5 border-none rounded-2xl p-5 shadow-sm focus:ring-4 focus:ring-primary/10 transition-all outline-none text-[#1A202C] dark:text-white"
|
||||||
|
placeholder="John Doe"
|
||||||
|
type="text"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-4">
|
||||||
|
<label className="text-xs font-black uppercase tracking-widest text-[#2D3748] dark:text-white/60">
|
||||||
|
Email
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
className="w-full bg-white dark:bg-white/5 border-none rounded-2xl p-5 shadow-sm focus:ring-4 focus:ring-primary/10 transition-all outline-none text-[#1A202C] dark:text-white"
|
||||||
|
placeholder="john@example.com"
|
||||||
|
type="email"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-4">
|
||||||
|
<label className="text-xs font-black uppercase tracking-widest text-[#2D3748] dark:text-white/60">
|
||||||
|
Service
|
||||||
|
</label>
|
||||||
|
<div className="relative">
|
||||||
|
<select className="w-full bg-white dark:bg-white/5 border-none rounded-2xl p-5 shadow-sm focus:ring-4 focus:ring-primary/10 transition-all outline-none appearance-none cursor-pointer text-[#1A202C] dark:text-white font-medium">
|
||||||
|
<option className="text-[#1A202C] bg-white">Software Development</option>
|
||||||
|
<option className="text-[#1A202C] bg-white">AI Integration</option>
|
||||||
|
<option className="text-[#1A202C] bg-white">3D Modeling & Printing</option>
|
||||||
|
<option className="text-[#1A202C] bg-white">Autre</option>
|
||||||
|
</select>
|
||||||
|
<span className="material-symbols-outlined absolute right-5 top-1/2 -translate-y-1/2 pointer-events-none text-slate-400">
|
||||||
|
expand_more
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-4">
|
||||||
|
<label className="text-xs font-black uppercase tracking-widest text-[#2D3748] dark:text-white/60">
|
||||||
|
Message
|
||||||
|
</label>
|
||||||
|
<textarea
|
||||||
|
className="w-full bg-white dark:bg-white/5 border-none rounded-2xl p-5 shadow-sm focus:ring-4 focus:ring-primary/10 transition-all outline-none resize-none text-[#1A202C] dark:text-white"
|
||||||
|
placeholder="Tell us about your project..."
|
||||||
|
rows={6}
|
||||||
|
></textarea>
|
||||||
|
</div>
|
||||||
|
<button className="w-full bg-primary text-white py-6 rounded-2xl font-black text-xl shadow-xl shadow-primary/20 hover:brightness-110 active:scale-[0.98] transition-all">
|
||||||
|
Envoyer la demande
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Footer - DARK for logo contrast */}
|
||||||
|
<footer className="py-24 bg-[#0A0F1C] text-white/90">
|
||||||
|
<div className="container mx-auto px-6">
|
||||||
|
<div className="flex flex-col md:flex-row justify-between items-center gap-16">
|
||||||
|
<div className="flex flex-col items-center md:items-start gap-6">
|
||||||
|
<div className="flex items-center gap-3 underline-offset-4">
|
||||||
|
<Image
|
||||||
|
src={resolveImage("{{DATA:IMAGE:IMAGE_2}}")}
|
||||||
|
alt="UNOV Logo"
|
||||||
|
width={120}
|
||||||
|
height={35}
|
||||||
|
className="h-8 w-auto object-contain"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<p className="text-slate-400 text-sm max-w-xs text-center md:text-left leading-relaxed">
|
||||||
|
Agence technologique de précision spécialisée dans les logiciels haut de gamme et les solutions d'IA. La perfection dans chaque ligne de code.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-col items-center md:items-end gap-8">
|
||||||
|
<div className="flex gap-10">
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
className="text-slate-400 hover:text-primary transition-all hover:-translate-y-1"
|
||||||
|
>
|
||||||
|
<span className="material-symbols-outlined text-3xl">
|
||||||
|
language
|
||||||
|
</span>
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
className="text-slate-400 hover:text-primary transition-all hover:-translate-y-1"
|
||||||
|
>
|
||||||
|
<span className="material-symbols-outlined text-3xl">
|
||||||
|
public
|
||||||
|
</span>
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
className="text-slate-400 hover:text-primary transition-all hover:-translate-y-1"
|
||||||
|
>
|
||||||
|
<span className="material-symbols-outlined text-3xl">
|
||||||
|
groups
|
||||||
|
</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div className="text-slate-500 text-xs font-bold uppercase tracking-widest">
|
||||||
|
© {new Date().getFullYear()} UNOV. Tous droits réservés.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
{/* Project Modal */}
|
||||||
|
{
|
||||||
|
selectedProject && (
|
||||||
|
<div className="fixed inset-0 z-[100] flex items-center justify-center p-4 md:p-8">
|
||||||
|
<div
|
||||||
|
className="absolute inset-0 bg-slate-900/60 backdrop-blur-sm"
|
||||||
|
onClick={() => setSelectedProject(null)}
|
||||||
|
/>
|
||||||
|
<div className="relative bg-white dark:bg-slate-900 w-full max-w-4xl max-h-[90vh] overflow-y-auto rounded-3xl shadow-2xl flex flex-col md:flex-row overflow-hidden border border-slate-200 dark:border-slate-800 animate-in fade-in zoom-in duration-300">
|
||||||
|
<button
|
||||||
|
onClick={() => setSelectedProject(null)}
|
||||||
|
className="absolute top-6 right-6 z-20 bg-white/10 backdrop-blur-md text-slate-900 dark:text-white w-10 h-10 rounded-full flex items-center justify-center hover:bg-white/20 hover:rotate-90 hover:scale-110 transition-all duration-300 group/close"
|
||||||
|
>
|
||||||
|
<span className="material-symbols-outlined text-xl transition-transform">close</span>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<div className="md:w-1/2 relative h-[400px] md:h-auto overflow-hidden group/modal">
|
||||||
|
<Image
|
||||||
|
src={selectedProject.images[currentImageIndex]}
|
||||||
|
alt={selectedProject.title}
|
||||||
|
fill
|
||||||
|
className="object-cover transition-all duration-700"
|
||||||
|
/>
|
||||||
|
<div className="absolute inset-0 bg-gradient-to-t from-slate-900/60 to-transparent pointer-events-none" />
|
||||||
|
|
||||||
|
{/* Gallery Controls */}
|
||||||
|
{selectedProject.images && selectedProject.images.length > 1 && (
|
||||||
|
<>
|
||||||
|
<div className="absolute inset-x-0 bottom-8 flex justify-center gap-3 z-10">
|
||||||
|
{selectedProject.images.map((_: any, i: number) => (
|
||||||
|
<button
|
||||||
|
key={i}
|
||||||
|
onClick={() => setCurrentImageIndex(i)}
|
||||||
|
className={`w-2.5 h-2.5 rounded-full transition-all ${i === currentImageIndex ? "bg-primary w-8" : "bg-white/40 hover:bg-white/60"}`}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
onClick={() => setCurrentImageIndex((prev) => (prev > 0 ? prev - 1 : selectedProject.images.length - 1))}
|
||||||
|
className="absolute left-4 top-1/2 -translate-y-1/2 w-10 h-10 rounded-full bg-white/10 backdrop-blur-md flex items-center justify-center text-white opacity-0 group-hover/modal:opacity-100 transition-all hover:bg-white/20"
|
||||||
|
>
|
||||||
|
<span className="material-symbols-outlined">chevron_left</span>
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => setCurrentImageIndex((prev) => (prev < selectedProject.images.length - 1 ? prev + 1 : 0))}
|
||||||
|
className="absolute right-4 top-1/2 -translate-y-1/2 w-10 h-10 rounded-full bg-white/10 backdrop-blur-md flex items-center justify-center text-white opacity-0 group-hover/modal:opacity-100 transition-all hover:bg-white/20"
|
||||||
|
>
|
||||||
|
<span className="material-symbols-outlined">chevron_right</span>
|
||||||
|
</button>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="md:w-1/2 p-8 md:p-12 flex flex-col justify-center">
|
||||||
|
<span className="text-primary font-bold uppercase tracking-[0.2em] text-xs mb-4 block">
|
||||||
|
{selectedProject.categories.join(" / ")}
|
||||||
|
</span>
|
||||||
|
<h2 className="text-3xl md:text-5xl font-black mb-8 leading-tight text-slate-900 dark:text-white">
|
||||||
|
{selectedProject.title}
|
||||||
|
</h2>
|
||||||
|
<div className="w-12 h-1 bg-primary mb-8" />
|
||||||
|
<p className="text-slate-600 dark:text-slate-400 text-lg leading-relaxed mb-10">
|
||||||
|
{selectedProject.fullDesc || selectedProject.desc}
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div className="flex justify-between items-center mt-auto">
|
||||||
|
{selectedProject.link && (
|
||||||
|
<a
|
||||||
|
href={selectedProject.link}
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="text-primary font-bold flex items-center gap-2 group/link"
|
||||||
|
>
|
||||||
|
<span className="material-symbols-outlined">language</span>
|
||||||
|
<span className="border-b-2 border-transparent group-hover/link:border-primary transition-all pb-0.5">Visiter le site</span>
|
||||||
|
</a>
|
||||||
|
)}
|
||||||
|
<div className="flex justify-end flex-grow">
|
||||||
|
<button
|
||||||
|
onClick={() => setSelectedProject(null)}
|
||||||
|
className="bg-primary hover:bg-primary-hover text-white px-10 py-4 rounded-xl font-bold transition-all duration-300 w-fit shadow-xl hover:scale-105 hover:shadow-primary/30 active:scale-95"
|
||||||
|
>
|
||||||
|
Fermer
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user