<!DOCTYPE html>
<html lang="fr" class="scroll-smooth">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Atelier 1nformax | Création Digitale</title>
<meta name="description" content="1nformax, atelier digital à Saint-Just-Saint-Rambert. Création de sites internet artisanaux, performants et sur-mesure.">
<meta name="keywords" content="création site internet, Saint-Just-Saint-Rambert, développement web, conseil digital, 1nformax, Nova Conseil, Loire 42">
<meta property="og:title" content="Atelier 1nformax | Création Digitale">
<meta property="og:description" content="Création de sites internet artisanaux et performants.">
<meta property="og:image" content="https://1nformax.fr/images/og-preview.jpg">
<meta property="og:url" content="https://1nformax.fr">
<meta property="og:type" content="website">
<meta name="robots" content="index, follow">
<link rel="canonical" href="https://1nformax.fr">
<link rel="preload" href="/fonts/plus-jakarta-sans-400.ttf" as="font" type="font/ttf" crossorigin>
<link rel="preload" href="/css/style.css" as="style" fetchpriority="high">
<link rel="icon" type="image/png" href="/images/logo-favicon-2.png">
<link rel="stylesheet" href="/css/style.css">
<style>
html, body {
background-color: #FAF7F2 !important;
color: #3A2A21 !important;
margin: 0;
padding: 0;
font-family: 'Plus Jakarta Sans', sans-serif;
}
.zoom-line {
display: inline-block;
transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
transform-origin: left;
vertical-align: top;
cursor: default;
}
.zoom-line:hover {
transform: scale(1.04) translateY(2px);
}
#mobile-menu {
display: none;
position: fixed;
inset: 0;
background-color: #FAF7F2;
z-index: 105;
}
#mobile-menu.active { display: flex; }
.gsap-hidden { opacity: 0; }
</style>
<script src="/js/gsap.min.js" defer></script>
<script src="/js/ScrollTrigger.min.js" defer></script>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "ProfessionalService",
"name": "1nformax",
"url": "https://1nformax.fr",
"logo": "https://1nformax.fr/images/logo-favicon.png",
"image": "https://1nformax.fr/images/og-preview.jpg",
"description": "Atelier digital spécialisé dans la création de sites internet sur-mesure.",
"address": {
"@type": "PostalAddress",
"addressLocality": "Saint-Just-Saint-Rambert",
"postalCode": "42170",
"addressRegion": "Loire",
"addressCountry": "FR"
},
"openingHoursSpecification": {
"@type": "OpeningHoursSpecification",
"dayOfWeek": ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday"],
"opens": "09:00",
"closes": "18:00"
},
"priceRange": "€€"
}
</script>
</head>
<body class="antialiased">
<nav class="w-full py-6 px-6 md:px-12 flex justify-between items-center bg-[#FAF7F2]/95 backdrop-blur-sm fixed top-0 z-[110] border-b border-[#4A3F35]/5">
<a href="/" class="text-xl font-bold tracking-tighter uppercase text-[#4A3F35]">1nformax</a>
<div class="hidden md:flex gap-10 text-[11px] uppercase tracking-[0.2em] font-bold text-[#4A3F35]/85">
<a href="/offres" class="hover:text-[#D48166] transition">Offres</a>
<a href="/#projets" class="hover:text-[#D48166] transition">Réalisations</a>
<a href="/contact" class="hover:text-[#D48166] transition">Contact</a>
</div>
<button id="menu-toggle" aria-label="Menu" class="md:hidden flex flex-col gap-1.5 p-2">
<span class="w-6 h-[1.5px] bg-[#4A3F35]"></span>
<span class="w-6 h-[1.5px] bg-[#4A3F35]"></span>
</button>
</nav>
<div id="mobile-menu" class="flex-col justify-center items-center gap-10 text-center">
<a href="/offres" class="text-3xl font-bold text-[#4A3F35]">Offres</a>
<a href="/#projets" class="text-3xl font-bold text-[#4A3F35]">Réalisations</a>
<a href="/contact" class="text-3xl font-bold text-[#4A3F35]">Contact</a>
</div>
<main class="pt-20">
<section class="min-h-[85vh] flex flex-col justify-center px-6 md:px-20 lg:px-32 max-w-7xl mx-auto">
<h1 class="lcp-hero text-4xl md:text-7xl font-light leading-[1.2] max-w-5xl text-umber italic flex flex-col items-start">
<span class="zoom-line gsap-hidden">Nous façonnons des</span>
<span class="zoom-line gsap-hidden text-terracotta not-italic font-bold">expériences numériques</span>
<span class="zoom-line gsap-hidden">fluides, pensées pour durer.</span>
</h1>
<p class="mt-10 text-lg md:text-xl text-umber max-w-2xl font-light leading-relaxed gsap-hidden" id="hero-sub">
Une approche minimaliste au service de votre image. <br>
De la conception à la mise en ligne, nous créons des sites web qui vont à l'essentiel.
</p>
<div class="mt-16 gsap-hidden" id="hero-cta">
<a href="/offres" class="inline-block bg-terracotta text-white px-10 py-5 rounded-full text-sm font-bold hover:bg-umber transition-all duration-500 shadow-xl shadow-terracotta/20 hover:-translate-y-1">
Découvrir nos solutions →
</a>
</div>
</section>
<section id="projets" class="py-32 px-6 md:px-20 lg:px-32 bg-sand/5 border-y border-umber/5">
<div class="max-w-7xl mx-auto gsap-hidden" id="project-container">
<h2 class="text-[10px] uppercase tracking-[0.4em] text-umber/80 mb-12 font-bold italic">Dernières réalisations</h2>
<a href="https://atelierdugrain.1nformax.fr" target="_blank" class="group block overflow-hidden rounded-[2rem] bg-white border border-umber/5 hover:border-terracotta/20 transition-all duration-700 shadow-sm mb-8">
<div class="grid grid-cols-1 md:grid-cols-2 items-center">
<div class="p-10 md:p-16">
<span class="text-terracotta text-[10px] font-bold uppercase tracking-widest">Offre "L'empreinte" — Artisanat</span>
<h3 class="text-3xl md:text-4xl font-bold mt-4 text-umber tracking-tighter">L'Atelier du Grain</h3>
<p class="mt-6 text-umber leading-relaxed font-light">Une vitrine chaleureuse pour une boulangerie artisanale. Focus sur l'esthétique pure et la simplicité de navigation.</p>
<div class="mt-10 flex items-center gap-2 text-terracotta font-bold text-sm">
Explorer le site <span class="group-hover:translate-x-2 transition-transform">→</span>
</div>
</div>
<div class="bg-beige-light aspect-square md:aspect-auto h-full flex items-center justify-center overflow-hidden">
<img
src="/images/atelierdugrain-small.webp"
alt="Aperçu L'Atelier du Grain — Création de site vitrine par 1nformax"
loading="lazy"
width="634"
height="634"
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-1000">
</div>
</div>
</a>
<a href="https://novaconseil.1nformax.fr" target="_blank" class="group block overflow-hidden rounded-[2rem] bg-white border border-umber/5 hover:border-terracotta/20 transition-all duration-700 shadow-sm">
<div class="grid grid-cols-1 md:grid-cols-2 items-center">
<div class="p-10 md:p-16">
<span class="text-terracotta text-[10px] font-bold uppercase tracking-widest">Offre "La croissance" — Conseil RH</span>
<h3 class="text-3xl md:text-4xl font-bold mt-4 text-umber tracking-tighter">Nova Conseil</h3>
<p class="mt-6 text-umber leading-relaxed font-light">Développement et déploiement d'une solution de prise de rendez-vous en ligne artisanal, performant et sur-mesure pour les consultants.</p>
<div class="mt-10 flex items-center gap-2 text-terracotta font-bold text-sm">
Explorer la démo interactive <span class="group-hover:translate-x-2 transition-transform">→</span>
</div>
</div>
<div class="bg-beige-light aspect-square md:aspect-auto h-full flex items-center justify-center overflow-hidden">
<img
src="/images/novaconseil-small.webp"
alt="Aperçu Nova Conseil — Développement site multi-pages par 1nformax"
loading="lazy"
width="634"
height="634"
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-1000">
</div>
</div>
</a>
</div>
</section>
</main>
<footer class="py-20 text-center opacity-60 text-[10px] uppercase tracking-[0.3em] text-[#4A3F35]">
© 2026 1nformax — Atelier de création
</footer>
<script defer src="https://analytics.1nformax.fr/script.js" data-website-id="72f6a5f3-9e62-454c-8a26-0dde02234b4f"></script>
<script>
// Menu Mobile
const btn = document.getElementById('menu-toggle');
const menu = document.getElementById('mobile-menu');
if(btn && menu) {
btn.addEventListener('click', () => menu.classList.toggle('active'));
menu.querySelectorAll('a').forEach(link => {
link.addEventListener('click', () => menu.classList.remove('active'));
});
}
// Fallback Opacity si GSAP échoue
const fallbackTimer = setTimeout(() => {
document.querySelectorAll('.gsap-hidden').forEach(el => el.style.opacity = '1');
}, 2000);
// Initialisation GSAP (uniquement si les éléments existent)
function initAnimations() {
clearTimeout(fallbackTimer);
if (typeof gsap !== 'undefined') {
gsap.registerPlugin(ScrollTrigger);
// Animation Hero
gsap.to(".zoom-line", { duration: 1, opacity: 1, stagger: 0.15, ease: "power3.out", delay: 0.2 });
gsap.to(["#hero-sub", "#hero-cta"], { duration: 0.8, opacity: 1, stagger: 0.1, ease: "power3.out", delay: 0.5 });
// Animation Projets
const projContainer = document.getElementById('project-container');
if (projContainer) {
gsap.to("#project-container", {
scrollTrigger: { trigger: "#projets", start: "top 85%", once: true },
duration: 1.2, opacity: 1, ease: "power3.out"
});
}
}
}
window.addEventListener('load', initAnimations);
</script>
</body>
</html>
