diff --git a/next.config.ts b/next.config.ts index 66e1566..c03be97 100644 --- a/next.config.ts +++ b/next.config.ts @@ -3,6 +3,20 @@ import type { NextConfig } from "next"; const nextConfig: NextConfig = { /* config options here */ reactCompiler: true, + images: { + remotePatterns: [ + { + protocol: 'https', + hostname: 'unov.be', + pathname: '/**', + }, + { + protocol: 'https', + hostname: 'images.unsplash.com', + pathname: '/**', + }, + ], + }, }; export default nextConfig; diff --git a/public/desk_01.png b/public/desk_01.png new file mode 100644 index 0000000..159ae5f Binary files /dev/null and b/public/desk_01.png differ diff --git a/public/desk_02.png b/public/desk_02.png new file mode 100644 index 0000000..581f538 Binary files /dev/null and b/public/desk_02.png differ diff --git a/public/desk_03.png b/public/desk_03.png new file mode 100644 index 0000000..2228f32 Binary files /dev/null and b/public/desk_03.png differ diff --git a/public/desk_04.png b/public/desk_04.png new file mode 100644 index 0000000..6f3eedd Binary files /dev/null and b/public/desk_04.png differ diff --git a/public/desk_05.png b/public/desk_05.png new file mode 100644 index 0000000..41403a6 Binary files /dev/null and b/public/desk_05.png differ diff --git a/public/images/myinfomate_logo.png b/public/images/myinfomate_logo.png new file mode 100644 index 0000000..21dbf98 Binary files /dev/null and b/public/images/myinfomate_logo.png differ diff --git a/public/images/portfolio_namur.png b/public/images/portfolio_namur.png new file mode 100644 index 0000000..9c4a207 Binary files /dev/null and b/public/images/portfolio_namur.png differ diff --git a/public/images/service_ai_v2.png b/public/images/service_ai_v2.png new file mode 100644 index 0000000..0c0c410 Binary files /dev/null and b/public/images/service_ai_v2.png differ diff --git a/src/app/favicon.ico b/src/app/favicon.ico deleted file mode 100644 index 718d6fe..0000000 Binary files a/src/app/favicon.ico and /dev/null differ diff --git a/src/app/globals.css b/src/app/globals.css index f2be60e..db9220b 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -1,12 +1,11 @@ @import "tailwindcss"; +@variant dark (&:is(.dark *)); + @theme { --color-primary: #309CB0; --color-primary-light: #72B9C4; --color-primary-lighter: #ABD3DC; - --color-background-light: #F9F6F9; - --color-background-dark: #221610; - --font-display: "Public Sans", sans-serif; @keyframes marquee { @@ -20,24 +19,28 @@ } } -:root { - --background: #F9F6F9; - --foreground: #0f172a; - --primary: #309CB0; -} - -@media (prefers-color-scheme: dark) { - :root { - --background: #221610; - --foreground: #f8fafc; +@layer base { + body { + background-color: #FFFFFF; + color: #0f172a; + font-family: var(--font-display); + @apply antialiased; } } -body { - background: var(--background); - color: var(--foreground); - font-family: var(--font-display); - transition: background-color 0.3s ease, color 0.3s ease; +.material-symbols-outlined { + font-variation-settings: + 'FILL' 0, + 'wght' 400, + 'GRAD' 0, + 'opsz' 24; + display: inline-block; + line-height: 1; + text-transform: none; + letter-spacing: normal; + word-wrap: normal; + white-space: nowrap; + direction: ltr; } .animate-marquee { diff --git a/src/app/icon.png b/src/app/icon.png new file mode 100644 index 0000000..1be89c3 Binary files /dev/null and b/src/app/icon.png differ diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 02a3249..9d7ba05 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -23,7 +23,7 @@ export default function RootLayout({ (null); + const [showAllProjects, setShowAllProjects] = useState(false); + const [currentImageIndex, setCurrentImageIndex] = useState(0); + useEffect(() => { const handleScroll = () => { setIsScrolled(window.scrollY > 20); @@ -15,7 +20,7 @@ export default function Home() { }, []); return ( -
+
{/* Navigation */}
{/* Subtle Scroll Indicator */} -
- - expand_more - -
+ {/* Services Section */} -
+
-
+
-

+

Expertise

Nos Services Experts

-

+

Des solutions sur-mesure conçues avec une rigueur mathématique et - une vision artistique. + une vision centrée utilisateur.

@@ -133,26 +143,26 @@ export default function Home() { {[ { title: "Software Development", - desc: "Architectures évolutives et robustes. Nous transformons des concepts complexes en applications fluides.", - icon: "code_blocks", - img: "https://images.unsplash.com/photo-1517694712202-14dd9538aa97?q=80&w=2070&auto=format&fit=crop", + desc: "Architectures évolutives et robustes. Nous transformons des concepts complexes en applications fluides et performantes.", + icon: "code", + img: resolveImage("SERVICE_SOFTWARE"), }, { title: "AI Integration", desc: "Automatisation intelligente et machine learning avancé pour propulser votre efficacité opérationnelle.", icon: "psychology", - img: "https://images.unsplash.com/photo-1677442136019-21780ecad995?q=80&w=2070&auto=format&fit=crop", + img: resolveImage("SERVICE_AI"), }, { title: "3D & Printing", - desc: "De la conception virtuelle à la réalité physique. Prototypage rapide et ingénierie de précision.", - icon: "precision_manufacturing", - img: "https://images.unsplash.com/photo-1581092160562-40aa08e78837?q=80&w=2070&auto=format&fit=crop", + desc: "De la conception virtuelle à la réalité physique. Prototypage rapide et ingénierie de précision pour vos projets.", + icon: "view_in_ar", + img: resolveImage("SERVICE_3D"), }, ].map((service, idx) => (
@@ -162,10 +172,10 @@ export default function Home() {

{service.title}

-

+

{service.desc}

-
+
{service.title}
- {/* Technologies Marquee */} + {/* Technologies Marquee - UPDATED LIST */}
{[...Array(2)].map((_, i) => (
{[ - { name: "React", icon: "data_object" }, - { name: "Python", icon: "terminal" }, - { name: "AWS", icon: "cloud" }, + { name: "Python", icon: "code" }, + { name: "TypeScript", icon: "terminal" }, { name: "OpenAI", icon: "smart_toy" }, - { name: "Three.js", icon: "view_in_ar" }, - { name: "TypeScript", icon: "layers" }, - { name: "Node.js", icon: "settings_input_component" }, + { name: "Flutter", icon: "mobile_friendly" }, + { name: "C#", icon: "integration_instructions" }, + { name: "ASP.NET", icon: "settings_ethernet" }, + { name: "Angular", icon: "change_history" }, + { name: "IoT", icon: "sensors" }, ].map((tech, j) => ( {tech.icon} @@ -223,214 +234,459 @@ export default function Home() {
-
- {[ + {(() => { + const allProjects = [ { - title: "Solaris Ecosystem", - category: "Software", - desc: "Une plateforme IoT complète pour la gestion d'énergie renouvelable.", - img: "https://images.unsplash.com/photo-1497435334941-8c899ee9e8e9?q=80&w=1974&auto=format&fit=crop", + title: "MyInfoMate", + categories: ["Web", "Mobile"], + desc: "Solution SaaS pour la digitalisation des musées et sites culturels.", + img: resolveImage("PORTFOLIO_MYINFOMATE"), + fullDesc: "MyInfoMate est une plateforme innovante permettant aux institutions culturelles de créer, gérer et diffuser du contenu interactif sans connaissances techniques. Cartes interactives, guides multimédias et jeux de piste sont gérés via un CMS intuitif centralisé.", + link: "https://myinfomate.be", + images: [ + resolveImage("PORTFOLIO_MYINFOMATE"), + "https://images.unsplash.com/photo-1542744173-8e7e53415bb0?q=80&w=2070", + "https://images.unsplash.com/photo-1551434678-e076c223a692?q=80&w=2070" + ], offset: false, }, { - title: "InsightCore AI", - category: "Artificial Intelligence", - desc: "Analyse prédictive en temps réel pour le secteur de la finance.", - img: "https://images.unsplash.com/photo-1551288049-bb6c9b468a79?q=80&w=2070&auto=format&fit=crop", + title: "Office du Tourisme de Namur", + categories: ["Web", "Mobile"], + desc: "Interface tactile interactive sur grande tablette pour l'accueil touristique.", + img: resolveImage("PORTFOLIO_NAMUR"), + 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: [ + resolveImage("PORTFOLIO_NAMUR"), + "https://images.unsplash.com/photo-1517048676732-d65bc937f952?q=80&w=2070", + "https://images.unsplash.com/photo-1531403001884-48a690c749ea?q=80&w=2070" + ], offset: true, }, { - title: "AeroPro Modules", - category: "3D Engineering", - desc: "Composants imprimés en 3D haute performance pour l'industrie aéronautique.", - img: "https://images.unsplash.com/photo-1581092580497-e0d23cbdf1dc?q=80&w=2070&auto=format&fit=crop", + title: "Carnaval de Marche", + categories: ["Impression 3D"], + desc: "Design et production de boucles d'oreilles personnalisées pour l'événement.", + img: resolveImage("PORTFOLIO_MARCHE"), + fullDesc: "Nous avons designé, imprimé et assemblé des boucles d'oreilles pour le Carnaval de Marche. Plus d'une centaine de paires ont été produites, démontrant notre capacité de prototypage et de production en petite série via l'impression 3D.", + images: [ + resolveImage("PORTFOLIO_MARCHE"), + "https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?q=80&w=1964", + "https://images.unsplash.com/photo-1562408590-e32931084e23?q=80&w=2070" + ], offset: false, }, { - title: "Vortex Dashboard", - category: "Cloud Services", - desc: "Interface de gestion cloud pour équipes distribuées.", - img: "https://images.unsplash.com/photo-1551434678-e076c223a692?q=80&w=2070&auto=format&fit=crop", + title: "Fort de Saint-Héribert", + categories: ["Mobile", "Embedded", "Web"], + desc: "Application mobile immersive pour la visite du fort via QR codes et localisation. Finalisée en mai 2023.", + 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.", + images: [ + resolveImage("PORTFOLIO_HERIBERT"), + "https://images.unsplash.com/photo-1533106418989-88406c7cc8ca?q=80&w=2070", + "https://images.unsplash.com/photo-1496307653780-42ee777d4833?q=80&w=2070" + ], offset: true, }, - ].map((project, idx) => ( -
- {project.title} -
- - {project.category} - -

- {project.title} -

-

- {project.desc} + { + title: "Musée de la fraise", + categories: ["Desktop", "Mobile"], + desc: "Tablettes interactives et gestionnaire de contenu pour enrichir l'expérience musée.", + 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.", + images: [ + resolveImage("PORTFOLIO_FRAISE"), + "https://images.unsplash.com/photo-1581291518062-c07a09ea0937?q=80&w=2070", + "https://images.unsplash.com/photo-1558655146-d09347e92766?q=80&w=1964" + ], + offset: false, + }, + { + title: "Houblionnière de la Chistrée", + categories: ["Web"], + desc: "Site vitrine et boutique en ligne pour investir dans une coopérative locale.", + 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.", + images: [ + resolveImage("PORTFOLIO_CHISTREE"), + "https://images.unsplash.com/photo-1517245386807-bb43f82c33c4?q=80&w=2070", + "https://images.unsplash.com/photo-1460925895917-afdab827c52f?q=80&w=2015" + ], + offset: true, + }, + ]; + + const initialProjects = allProjects.slice(0, 4); + const extraProjects = allProjects.slice(4); + + return ( +

+ {/* Initial 4 projects */} +
+ {initialProjects.map((project, idx) => ( +
+ {project.title} +
+
+ + {project.categories.join(" / ")} + +

+ {project.title} +

+
+

+ {project.desc} +

+ +
+
+ ))} +
+ + {(() => { + const extraProjects = allProjects.slice(4, 12); // Adjusted slice for extra projects + return ( +
+ {/* Liquid Reveal Projects Container */} +
+ {/* Branded Expansion Background */} +
+
+ +
+ {extraProjects.map((project, idx) => ( +
+ {project.title} +
+
+ + {project.categories.join(" / ")} + +

+ {project.title} +

+
+

+ {project.desc} +

+ +
+
+ ))} +
+
+ + {/* Surface & Button (Shown when not expanded) */} + {!showAllProjects && ( +
+ {/* The Liquid Base - High Visibility Curve */} +
+ {/* Deep Curved Glow */} +
+ + + +
+ + +
+ )} +
+ ); + })()} +
+ ); + })()} + {/* Contact Form Section - REVISED LAYOUT to match Image */} +
+
+
+ {/* Sidebar (Teal) */} +
+
+

+ Let's talk about the future +

+

+ Prêt à donner vie à votre vision ? Notre équipe est prête à + relever vos défis les plus complexes. +

+
+
+
+
+ mail +
+ contact@unov.be +
+
+
+ location_on +
+ Vedrin, Belgique +
+
+
+ {/* Form Area (White/Right) */} +
+
+
+
+ + +
+
+ + +
+
+
+ +
+ + + expand_more + +
+
+
+ + +
+ +
+
+
+
+
+ + {/* Footer - DARK for logo contrast */} +
+
+
+
+
+ UNOV Logo +
+

+ 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.

-
-
- ))} -
- -
- -
-
-
- - {/* Contact Form Section */} -
-
-
-
-
-

- Let's build the future together -

-

- Prêt à donner vie à votre vision ? Notre équipe est prête à - relever vos défis les plus complexes. -

-
-
-
-
- mail + -
-
- location_on +
+ © {new Date().getFullYear()} UNOV. Tous droits réservés.
- Paris, France
- {/* Decorative circle */} -
-
-
-
-
- - -
-
- - -
-
-
- - -
-
- - -
- -
-
-
-
-
+ - {/* Footer */} - - - ); + ); } diff --git a/src/app/portfolio/page.tsx b/src/app/portfolio/page.tsx new file mode 100644 index 0000000..82f0e06 --- /dev/null +++ b/src/app/portfolio/page.tsx @@ -0,0 +1,302 @@ +"use client"; + +import Image from "next/image"; +import Link from "next/link"; +import { resolveImage } from "@/data/stitch-images"; +import { useState, useMemo } from "react"; + +export default function PortfolioPage() { + const [activeCategory, setActiveCategory] = useState("All"); + const [selectedProject, setSelectedProject] = useState(null); + const [currentImageIndex, setCurrentImageIndex] = useState(0); + + const allProjects = [ + { + title: "MyInfoMate", + categories: ["Web", "Mobile"], + desc: "Solution SaaS pour la digitalisation des musées et sites culturels.", + img: resolveImage("PORTFOLIO_MYINFOMATE"), + fullDesc: "MyInfoMate est une plateforme innovante permettant aux institutions culturelles de créer, gérer et diffuser du contenu interactif sans connaissances techniques. Cartes interactives, guides multimédias et jeux de piste sont gérés via un CMS intuitif centralisé.", + link: "https://myinfomate.be", + images: [ + resolveImage("PORTFOLIO_MYINFOMATE"), + "https://images.unsplash.com/photo-1542744173-8e7e53415bb0?q=80&w=2070", + "https://images.unsplash.com/photo-1551434678-e076c223a692?q=80&w=2070" + ], + }, + { + title: "Office du Tourisme de Namur", + categories: ["Web", "Mobile"], + desc: "Interface tactile interactive sur grande tablette pour l'accueil touristique.", + img: resolveImage("PORTFOLIO_NAMUR"), + 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: [ + resolveImage("PORTFOLIO_NAMUR"), + "https://images.unsplash.com/photo-1517048676732-d65bc937f952?q=80&w=2070", + "https://images.unsplash.com/photo-1531403001884-48a690c749ea?q=80&w=2070" + ], + }, + { + title: "Carnaval de Marche", + categories: ["Impression 3D"], + desc: "Design et production de boucles d'oreilles personnalisées pour l'événement.", + img: resolveImage("PORTFOLIO_MARCHE"), + fullDesc: "Nous avons designé, imprimé et assemblé des boucles d'oreilles pour le Carnaval de Marche. Plus d'une centaine de paires ont été produites, démontrant notre capacité de prototypage et de production en petite série via l'impression 3D.", + images: [ + resolveImage("PORTFOLIO_MARCHE"), + "https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?q=80&w=1964", + "https://images.unsplash.com/photo-1562408590-e32931084e23?q=80&w=2070" + ], + }, + { + title: "Fort de Saint-Héribert", + categories: ["Mobile", "Embedded", "Web"], + desc: "Application mobile immersive pour la visite du fort via QR codes et localisation. Finalisée en mai 2023.", + 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.", + images: [ + resolveImage("PORTFOLIO_HERIBERT"), + "https://images.unsplash.com/photo-1533106418989-88406c7cc8ca?q=80&w=2070", + "https://images.unsplash.com/photo-1496307653780-42ee777d4833?q=80&w=2070" + ], + }, + { + title: "Musée de la fraise", + categories: ["Desktop", "Mobile"], + desc: "Tablettes interactives et gestionnaire de contenu pour enrichir l'expérience musée.", + 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.", + images: [ + resolveImage("PORTFOLIO_FRAISE"), + "https://images.unsplash.com/photo-1581291518062-c07a09ea0937?q=80&w=2070", + "https://images.unsplash.com/photo-1558655146-d09347e92766?q=80&w=1964" + ], + }, + { + title: "Houblionnière de la Chistrée", + categories: ["Web"], + desc: "Site vitrine et boutique en ligne pour investir dans une coopérative locale.", + 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.", + images: [ + resolveImage("PORTFOLIO_CHISTREE"), + "https://images.unsplash.com/photo-1517245386807-bb43f82c33c4?q=80&w=2070", + "https://images.unsplash.com/photo-1460925895917-afdab827c52f?q=80&w=2015" + ], + }, + ]; + + const filteredProjects = useMemo(() => { + if (activeCategory === "All") return allProjects; + return allProjects.filter(p => p.categories.includes(activeCategory)); + }, [activeCategory, allProjects]); + + const categories = ["All", "Desktop", "Embedded", "Impression 3D", "Mobile", "Web"]; + + return ( +
+ + +
+
+

+ Nos Réalisations +

+
+ {categories.map((cat) => ( + + ))} +
+
+ +
+ {filteredProjects.length > 0 ? ( + filteredProjects.map((p, i) => ( +
+
+ {p.title} +
+
+
+ + {p.categories.join(" / ")} + +

{p.title}

+

{p.desc}

+ +
+
+ )) + ) : ( +
+ inventory_2 +

Aucun projet trouvé dans cette catégorie pour le moment.

+ +
+ )} +
+
+ + {/* Project Modal */} + {selectedProject && ( +
+
setSelectedProject(null)} + /> +
+ + +
+ {selectedProject.title} +
+ + {/* Gallery Controls */} + {selectedProject.images && selectedProject.images.length > 1 && ( + <> +
+ {selectedProject.images.map((_: any, i: number) => ( +
+ + + + )} +
+ +
+ + {selectedProject.categories.join(" / ")} + +

+ {selectedProject.title} +

+
+

+ {selectedProject.fullDesc || selectedProject.desc} +

+ +
+ {selectedProject.link && ( + + language + Visiter le site + + )} +
+ +
+
+
+
+
+ )} + +
+
+
+
+ UNOV Logo +

+ 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. +

+
+
+ +
+ © {new Date().getFullYear()} UNOV. Tous droits réservés. +
+
+
+
+
+
+ ); +} diff --git a/src/data/stitch-images.ts b/src/data/stitch-images.ts new file mode 100644 index 0000000..df6c933 --- /dev/null +++ b/src/data/stitch-images.ts @@ -0,0 +1,25 @@ +/** + * Mapping object for Stitch image placeholders. + * Centralized management of landing page assets. + */ +export const STITCH_IMAGES: Record = { + "{{DATA:IMAGE:IMAGE_2}}": "/unov.png", + "{{DATA:IMAGE:IMAGE_6}}": "/desk_04.png", + "SERVICE_SOFTWARE": "https://images.unsplash.com/photo-1517694712202-14dd9538aa97?q=80&w=2070&auto=format&fit=crop", + "SERVICE_AI": "/images/service_ai_v2.png", + "SERVICE_3D": "https://images.unsplash.com/photo-1581092160562-40aa08e78837?q=80&w=2070&auto=format&fit=crop", + "PORTFOLIO_HERIBERT": "https://unov.be/wp-content/uploads/2023/06/Screenshot_8.jpg", + "PORTFOLIO_MARCHE": "https://unov.be/wp-content/uploads/2022/11/Screenshot_1-370x370.jpg", + "PORTFOLIO_CHISTREE": "https://unov.be/wp-content/uploads/2022/04/houblon_0-370x370.jpg", + "PORTFOLIO_FRAISE": "https://unov.be/wp-content/uploads/2022/04/mdlf_3-370x370.jpg", + "PORTFOLIO_MYINFOMATE": "/images/myinfomate_logo.png", + "PORTFOLIO_NAMUR": "/images/portfolio_namur.png", +}; + +/** + * Helper to resolve a Stitch placeholder. + * If the placeholder is not found, it returns the placeholder itself. + */ +export function resolveImage(key: string): string { + return STITCH_IMAGES[key] || key; +}