Update layout + perf
This commit is contained in:
Thomas Fransolet
parent
4ab07d93e9
commit
bfe6bace80
@ -4,7 +4,7 @@
|
||||
--color-primary: #0df2df;
|
||||
--color-accent-violet: #8b5cf6;
|
||||
--color-accent-orange: #f97316;
|
||||
--font-display: "Plus Jakarta Sans", sans-serif;
|
||||
--font-display: var(--font-plus-jakarta), sans-serif;
|
||||
}
|
||||
|
||||
@layer base {
|
||||
|
||||
@ -1,6 +1,14 @@
|
||||
import type { Metadata } from "next";
|
||||
import { Plus_Jakarta_Sans } from "next/font/google";
|
||||
import "./globals.css";
|
||||
|
||||
const plusJakartaSans = Plus_Jakarta_Sans({
|
||||
subsets: ["latin"],
|
||||
weight: ["400", "500", "600", "700", "800"],
|
||||
variable: "--font-plus-jakarta",
|
||||
display: "swap",
|
||||
});
|
||||
|
||||
export const metadata: Metadata = {
|
||||
metadataBase: new URL("https://myinfomate.be"),
|
||||
title: "MyInfoMate | La technologie au service de l'expérience visiteur",
|
||||
@ -33,10 +41,11 @@ export default function RootLayout({
|
||||
children: React.ReactNode;
|
||||
}>) {
|
||||
return (
|
||||
<html lang="fr">
|
||||
<html lang="fr" className={plusJakartaSans.variable}>
|
||||
<head>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet" />
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet" />
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0&display=block" rel="stylesheet" />
|
||||
</head>
|
||||
<body>
|
||||
{children}
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
'use client';
|
||||
|
||||
import React, { useState, useEffect, useRef } from 'react';
|
||||
import Image from 'next/image';
|
||||
import { resolveImage } from '@/data/stitch-images';
|
||||
import translations, { Language } from '@/data/translations';
|
||||
|
||||
@ -156,9 +157,11 @@ export default function Home() {
|
||||
<header className={`fixed top-0 left-0 right-0 z-50 bg-white/80 backdrop-blur-md border-b border-slate-200 transition-transform duration-300 ${navVisible ? 'translate-y-0' : '-translate-y-full'}`}>
|
||||
<div className="max-w-7xl mx-auto px-6 h-20 flex items-center justify-between">
|
||||
<a className="flex items-center gap-3 shrink-0" href="#">
|
||||
<img
|
||||
<Image
|
||||
src={resolveImage("{{DATA:IMAGE:IMAGE_14}}")}
|
||||
alt="MyInfoMate Logo"
|
||||
height={40}
|
||||
width={42}
|
||||
className="h-10 w-auto object-contain"
|
||||
/>
|
||||
<span className="text-xl font-extrabold tracking-tight text-slate-900 hidden lg:block">MyInfoMate</span>
|
||||
@ -338,10 +341,13 @@ export default function Home() {
|
||||
<div className="relative w-full aspect-[4/3] sm:aspect-video lg:aspect-[4/3] max-w-xl mx-auto">
|
||||
{/* Interactive Map Tablet Preview */}
|
||||
<div className="absolute top-0 left-0 w-full h-full lg:h-[85%] bg-slate-900 rounded-2xl lg:rounded-3xl overflow-hidden shadow-2xl border-4 border-slate-800 z-10 transform lg:-rotate-2">
|
||||
<img
|
||||
<Image
|
||||
src={resolveImage("{{DATA:IMAGE:IMAGE_4}}")}
|
||||
alt="Modern Interactive Map Interface"
|
||||
className="w-full h-full object-cover object-top opacity-80"
|
||||
fill
|
||||
className="object-cover object-top opacity-80"
|
||||
priority
|
||||
sizes="(max-width: 1024px) 100vw, 50vw"
|
||||
/>
|
||||
<div className="absolute top-4 left-6 bg-white/90 backdrop-blur px-4 py-2 rounded-xl shadow-lg border border-primary/20">
|
||||
<p className="text-[10px] font-bold text-slate-400 uppercase">{t.mockup.mapTitle}</p>
|
||||
@ -351,13 +357,13 @@ export default function Home() {
|
||||
|
||||
{/* Agenda Mobile Preview - Hidden or repositioned on very small screens */}
|
||||
<div className="hidden sm:block absolute -bottom-6 -left-6 lg:-bottom-10 lg:-left-10 w-1/3 aspect-[9/19] bg-white rounded-[1.5rem] lg:rounded-[2rem] shadow-2xl border-2 lg:border-4 border-slate-900 z-30 transform rotate-3 overflow-hidden">
|
||||
<img src={resolveImage("{{DATA:IMAGE:IMAGE_5}}")} alt="App screenshot" className="w-full h-full object-cover object-top" />
|
||||
<Image src={resolveImage("{{DATA:IMAGE:IMAGE_5}}")} alt="App screenshot" fill className="object-cover object-top" sizes="20vw" />
|
||||
<div className="absolute top-1 left-1/2 -translate-x-1/2 w-6 lg:w-8 h-1 lg:h-2 bg-slate-900 rounded-full"></div>
|
||||
</div>
|
||||
|
||||
{/* Tours Mobile Preview */}
|
||||
<div className="absolute -bottom-4 -right-4 lg:-bottom-6 lg:-right-6 w-1/3 lg:w-[35%] aspect-[9/19] bg-white rounded-[1.5rem] lg:rounded-[2rem] shadow-2xl border-2 lg:border-4 border-slate-900 z-20 transform -rotate-6 overflow-hidden">
|
||||
<img src={resolveImage("{{DATA:IMAGE:IMAGE_7}}")} alt="App screenshot" className="w-full h-full object-cover object-top" />
|
||||
<Image src={resolveImage("{{DATA:IMAGE:IMAGE_7}}")} alt="App screenshot" fill className="object-cover object-top" sizes="20vw" />
|
||||
<div className="absolute top-1 left-1/2 -translate-x-1/2 w-6 lg:w-8 h-1 lg:h-2 bg-slate-900 rounded-full"></div>
|
||||
</div>
|
||||
</div>
|
||||
@ -367,44 +373,52 @@ export default function Home() {
|
||||
|
||||
{/* Strategic Points */}
|
||||
<section className="py-24 bg-white" id="points">
|
||||
<div className="max-w-7xl mx-auto px-6">
|
||||
<Reveal className="text-center mb-20">
|
||||
<div className="max-w-5xl mx-auto px-6">
|
||||
<Reveal className="text-center mb-16">
|
||||
<h2 className="text-accent-violet font-extrabold uppercase tracking-widest text-sm mb-4">{t.strategic.sectionLabel}</h2>
|
||||
<h3 className="text-3xl lg:text-5xl font-extrabold text-slate-900 tracking-tight">{t.strategic.sectionTitle}</h3>
|
||||
</Reveal>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-x-16 gap-y-10">
|
||||
{/* Feature 1 */}
|
||||
<Reveal delay={0}><div className="group p-8 rounded-3xl border border-slate-100 bg-slate-50 hover:bg-white hover:shadow-2xl hover:shadow-primary/10 transition-all duration-300">
|
||||
<div className="w-14 h-14 rounded-2xl bg-primary/20 text-primary flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
|
||||
<span className="material-symbols-outlined text-3xl">sync</span>
|
||||
<Reveal delay={0} className="flex items-start gap-5">
|
||||
<div className="shrink-0 w-12 h-12 rounded-2xl bg-primary/15 text-primary flex items-center justify-center">
|
||||
<span className="material-symbols-outlined text-2xl">sync</span>
|
||||
</div>
|
||||
<h4 className="text-xl font-extrabold text-slate-900 mb-4">{t.strategic.feature1Title}</h4>
|
||||
<p className="text-slate-600 leading-relaxed text-sm">{t.strategic.feature1Desc}</p>
|
||||
</div></Reveal>
|
||||
<div>
|
||||
<h4 className="text-lg font-extrabold text-slate-900 mb-1">{t.strategic.feature1Title}</h4>
|
||||
<p className="text-slate-500 leading-relaxed text-sm">{t.strategic.feature1Desc}</p>
|
||||
</div>
|
||||
</Reveal>
|
||||
{/* Feature 2 */}
|
||||
<Reveal delay={80}><div className="group p-8 rounded-3xl border border-slate-100 bg-slate-50 hover:bg-white hover:shadow-2xl hover:shadow-accent-violet/10 transition-all duration-300">
|
||||
<div className="w-14 h-14 rounded-2xl bg-accent-violet/20 text-accent-violet flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
|
||||
<span className="material-symbols-outlined text-3xl">code_off</span>
|
||||
<Reveal delay={80} className="flex items-start gap-5">
|
||||
<div className="shrink-0 w-12 h-12 rounded-2xl bg-accent-violet/15 text-accent-violet flex items-center justify-center">
|
||||
<span className="material-symbols-outlined text-2xl">code_off</span>
|
||||
</div>
|
||||
<h4 className="text-xl font-extrabold text-slate-900 mb-4">{t.strategic.feature2Title}</h4>
|
||||
<p className="text-slate-600 leading-relaxed text-sm">{t.strategic.feature2Desc}</p>
|
||||
</div></Reveal>
|
||||
<div>
|
||||
<h4 className="text-lg font-extrabold text-slate-900 mb-1">{t.strategic.feature2Title}</h4>
|
||||
<p className="text-slate-500 leading-relaxed text-sm">{t.strategic.feature2Desc}</p>
|
||||
</div>
|
||||
</Reveal>
|
||||
{/* Feature 3 */}
|
||||
<Reveal delay={160}><div className="group p-8 rounded-3xl border border-slate-100 bg-slate-50 hover:bg-white hover:shadow-2xl hover:shadow-accent-orange/10 transition-all duration-300">
|
||||
<div className="w-14 h-14 rounded-2xl bg-accent-orange/20 text-accent-orange flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
|
||||
<span className="material-symbols-outlined text-3xl">download_for_offline</span>
|
||||
<Reveal delay={160} className="flex items-start gap-5">
|
||||
<div className="shrink-0 w-12 h-12 rounded-2xl bg-accent-orange/15 text-accent-orange flex items-center justify-center">
|
||||
<span className="material-symbols-outlined text-2xl">download_for_offline</span>
|
||||
</div>
|
||||
<h4 className="text-xl font-extrabold text-slate-900 mb-4">{t.strategic.feature3Title}</h4>
|
||||
<p className="text-slate-600 leading-relaxed text-sm">{t.strategic.feature3Desc}</p>
|
||||
</div></Reveal>
|
||||
<div>
|
||||
<h4 className="text-lg font-extrabold text-slate-900 mb-1">{t.strategic.feature3Title}</h4>
|
||||
<p className="text-slate-500 leading-relaxed text-sm">{t.strategic.feature3Desc}</p>
|
||||
</div>
|
||||
</Reveal>
|
||||
{/* Feature 4 */}
|
||||
<Reveal delay={240}><div className="group p-8 rounded-3xl border border-slate-100 bg-slate-50 hover:bg-white hover:shadow-2xl hover:shadow-primary/10 transition-all duration-300">
|
||||
<div className="w-14 h-14 rounded-2xl bg-primary/20 text-primary flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
|
||||
<span className="material-symbols-outlined text-3xl">dashboard_customize</span>
|
||||
<Reveal delay={240} className="flex items-start gap-5">
|
||||
<div className="shrink-0 w-12 h-12 rounded-2xl bg-primary/15 text-primary flex items-center justify-center">
|
||||
<span className="material-symbols-outlined text-2xl">dashboard_customize</span>
|
||||
</div>
|
||||
<h4 className="text-xl font-extrabold text-slate-900 mb-4">{t.strategic.feature4Title}</h4>
|
||||
<p className="text-slate-600 leading-relaxed text-sm">{t.strategic.feature4Desc}</p>
|
||||
</div></Reveal>
|
||||
<div>
|
||||
<h4 className="text-lg font-extrabold text-slate-900 mb-1">{t.strategic.feature4Title}</h4>
|
||||
<p className="text-slate-500 leading-relaxed text-sm">{t.strategic.feature4Desc}</p>
|
||||
</div>
|
||||
</Reveal>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@ -1235,9 +1249,11 @@ export default function Home() {
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12 mb-16">
|
||||
<div className="col-span-1 lg:col-span-1">
|
||||
<div className="flex items-center gap-3 mb-6">
|
||||
<img
|
||||
<Image
|
||||
src={resolveImage("{{DATA:IMAGE:IMAGE_14}}")}
|
||||
alt="MyInfoMate Logo"
|
||||
height={32}
|
||||
width={33}
|
||||
className="h-8 w-auto object-contain"
|
||||
/>
|
||||
<span className="text-lg font-extrabold tracking-tight text-slate-900">MyInfoMate</span>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user