| |
| <?php
|
| <div id="sh-premium-root"></div>
|
|
|
| <style>
|
| @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Playfair+Display:wght@600;700&display=swap");
|
|
|
| body.sh-premium-active > *:not(
|
| display: none !important;
|
| }
|
|
|
|
|
| --blue:
|
| --blue-dark:
|
| --gold:
|
| --gold-hover:
|
| --cream:
|
| --white:
|
| --soft:
|
| font-family: "Inter", sans-serif;
|
| background: var(--cream);
|
| color: var(--blue-dark);
|
| min-height: 100vh;
|
| }
|
|
|
|
|
| box-sizing: border-box;
|
| }
|
|
|
|
|
| text-decoration: none;
|
| }
|
|
|
| .sh-header {
|
| position: fixed;
|
| top: 0;
|
| left: 0;
|
| z-index: 9999;
|
| width: 100%;
|
| height: 82px;
|
| padding: 0 7vw;
|
| display: flex;
|
| align-items: center;
|
| justify-content: space-between;
|
| background: rgba(3, 24, 39, 0.78);
|
| backdrop-filter: blur(16px);
|
| border-bottom: 1px solid rgba(255,255,255,0.08);
|
| }
|
|
|
| .sh-logo {
|
| display: flex;
|
| align-items: center;
|
| gap: 14px;
|
| color: white;
|
| }
|
|
|
| .sh-logo-mark {
|
| width: 48px;
|
| height: 48px;
|
| border: 1px solid rgba(217,173,38,0.85);
|
| border-radius: 50%;
|
| display: grid;
|
| place-items: center;
|
| font-family: "Playfair Display", serif;
|
| color: var(--gold);
|
| font-size: 22px;
|
| letter-spacing: 1px;
|
| }
|
|
|
| .sh-logo-text {
|
| font-size: 12px;
|
| text-transform: uppercase;
|
| letter-spacing: 2px;
|
| color: white;
|
| }
|
|
|
| .sh-nav {
|
| display: flex;
|
| gap: 34px;
|
| align-items: center;
|
| }
|
|
|
| .sh-nav a {
|
| color: white;
|
| font-size: 14px;
|
| font-weight: 600;
|
| opacity: 0.9;
|
| transition: 0.25s ease;
|
| }
|
|
|
| .sh-nav a:hover {
|
| color: var(--gold);
|
| }
|
|
|
| .sh-btn {
|
| display: inline-flex;
|
| align-items: center;
|
| justify-content: center;
|
| border-radius: 999px;
|
| padding: 15px 28px;
|
| font-weight: 700;
|
| font-size: 15px;
|
| transition: 0.25s ease;
|
| border: 1px solid transparent;
|
| }
|
|
|
| .sh-btn:hover {
|
| transform: translateY(-2px);
|
| }
|
|
|
| .sh-btn-gold {
|
| background: var(--gold);
|
| color: var(--blue-dark);
|
| }
|
|
|
| .sh-btn-gold:hover {
|
| background: var(--gold-hover);
|
| color: var(--blue-dark);
|
| }
|
|
|
| .sh-btn-outline {
|
| color: white;
|
| border-color: rgba(255,255,255,0.58);
|
| background: transparent;
|
| }
|
|
|
| .sh-btn-outline:hover {
|
| color: var(--gold);
|
| border-color: var(--gold);
|
| }
|
|
|
| .sh-hero {
|
| position: relative;
|
| min-height: 100vh;
|
| padding: 150px 7vw 90px;
|
| display: grid;
|
| place-items: center;
|
| text-align: center;
|
| color: white;
|
| background-image: linear-gradient(rgba(3,24,39,0.82), rgba(6,35,63,0.9)), url("https://images.unsplash.com/photo-1551882547-ff40c63fe5fa?auto=format&fit=crop&w=1800&q=80");
|
| background-size: cover;
|
| background-position: center;
|
| }
|
|
|
| .sh-hero-content {
|
| max-width: 980px;
|
| }
|
|
|
| .sh-eyebrow {
|
| margin: 0 0 18px;
|
| color: var(--gold);
|
| text-transform: uppercase;
|
| letter-spacing: 3px;
|
| font-size: 13px;
|
| font-weight: 800;
|
| }
|
|
|
| .sh-hero h1,
|
| .sh-banner h1,
|
| .sh-section h2,
|
| .sh-card h3 {
|
| font-family: "Playfair Display", serif;
|
| }
|
|
|
| .sh-hero h1 {
|
| margin: 0;
|
| font-size: clamp(44px, 7vw, 86px);
|
| line-height: 1.02;
|
| letter-spacing: -1.4px;
|
| }
|
|
|
| .sh-hero h2 {
|
| margin: 28px auto 0;
|
| font-size: clamp(20px, 2vw, 28px);
|
| font-weight: 500;
|
| color: var(--cream);
|
| }
|
|
|
| .sh-hero p {
|
| max-width: 760px;
|
| margin: 22px auto 0;
|
| color: var(--soft);
|
| font-size: 18px;
|
| line-height: 1.7;
|
| }
|
|
|
| .sh-actions {
|
| margin-top: 38px;
|
| display: flex;
|
| justify-content: center;
|
| gap: 18px;
|
| flex-wrap: wrap;
|
| }
|
|
|
| .sh-section {
|
| padding: 100px 7vw;
|
| }
|
|
|
| .sh-section-dark {
|
| background: var(--blue-dark);
|
| color: white;
|
| text-align: center;
|
| }
|
|
|
| .sh-section h2 {
|
| max-width: 800px;
|
| margin: 0 auto 24px;
|
| font-size: clamp(36px, 4vw, 58px);
|
| line-height: 1.1;
|
| }
|
|
|
| .sh-section p {
|
| max-width: 760px;
|
| margin: 0 auto;
|
| color: var(--soft);
|
| line-height: 1.8;
|
| font-size: 17px;
|
| }
|
|
|
| .sh-banner {
|
| position: relative;
|
| min-height: 520px;
|
| padding: 150px 7vw 90px;
|
| display: grid;
|
| place-items: center;
|
| text-align: center;
|
| color: white;
|
| background:
|
| radial-gradient(circle at 18% 22%, rgba(217,173,38,0.16), transparent 28%),
|
| linear-gradient(135deg,
|
| overflow: hidden;
|
| }
|
|
|
| .sh-banner::before {
|
| content: "";
|
| position: absolute;
|
| inset: 0;
|
| opacity: 0.08;
|
| background-image:
|
| linear-gradient(45deg, rgba(255,255,255,.5) 1px, transparent 1px),
|
| linear-gradient(-45deg, rgba(255,255,255,.5) 1px, transparent 1px);
|
| background-size: 44px 44px;
|
| }
|
|
|
| .sh-banner-content {
|
| position: relative;
|
| z-index: 2;
|
| max-width: 900px;
|
| }
|
|
|
| .sh-banner h1 {
|
| margin: 0;
|
| font-size: clamp(44px, 6vw, 76px);
|
| line-height: 1.05;
|
| }
|
|
|
| .sh-banner p {
|
| max-width: 760px;
|
| margin: 24px auto 0;
|
| color: var(--soft);
|
| font-size: 18px;
|
| line-height: 1.7;
|
| }
|
|
|
| .sh-benefits {
|
| position: relative;
|
| z-index: 5;
|
| width: min(1040px, 86vw);
|
| margin: -42px auto 0;
|
| display: grid;
|
| grid-template-columns: repeat(3, 1fr);
|
| background: white;
|
| border-radius: 22px;
|
| box-shadow: 0 24px 80px rgba(0,0,0,0.18);
|
| overflow: hidden;
|
| }
|
|
|
| .sh-benefits div {
|
| padding: 28px 22px;
|
| text-align: center;
|
| color: var(--blue);
|
| font-weight: 800;
|
| border-right: 1px solid rgba(6,35,63,0.1);
|
| }
|
|
|
| .sh-benefits div:last-child {
|
| border-right: 0;
|
| }
|
|
|
| .sh-grid {
|
| margin-top: 52px;
|
| display: grid;
|
| grid-template-columns: repeat(3, 1fr);
|
| gap: 28px;
|
| }
|
|
|
| .sh-card {
|
| background: white;
|
| border-radius: 26px;
|
| overflow: hidden;
|
| box-shadow: 0 18px 50px rgba(6,35,63,0.12);
|
| }
|
|
|
| .sh-card-img {
|
| height: 260px;
|
| position: relative;
|
| overflow: hidden;
|
| }
|
|
|
| .sh-card-img::after {
|
| content: "";
|
| position: absolute;
|
| inset: 0;
|
| background: linear-gradient(rgba(6,35,63,0.08), rgba(6,35,63,0.35));
|
| }
|
|
|
| .sh-card-img img {
|
| width: 100%;
|
| height: 100%;
|
| object-fit: cover;
|
| transition: 0.45s ease;
|
| }
|
|
|
| .sh-card:hover img {
|
| transform: scale(1.06);
|
| }
|
|
|
| .sh-card-body {
|
| padding: 30px;
|
| }
|
|
|
| .sh-card h3 {
|
| margin: 0 0 12px;
|
| font-size: 28px;
|
| color: var(--blue);
|
| }
|
|
|
| .sh-card p {
|
| margin: 0 0 24px;
|
| color:
|
| line-height: 1.7;
|
| }
|
|
|
| .sh-pro {
|
| padding: 110px 7vw;
|
| display: grid;
|
| grid-template-columns: 1fr 0.9fr;
|
| gap: 70px;
|
| align-items: center;
|
| }
|
|
|
| .sh-pro h2 {
|
| margin-left: 0;
|
| margin-right: 0;
|
| }
|
|
|
| .sh-pro p {
|
| margin-left: 0;
|
| color:
|
| }
|
|
|
| .sh-list {
|
| list-style: none;
|
| margin: 32px 0;
|
| padding: 0;
|
| }
|
|
|
| .sh-list li {
|
| position: relative;
|
| padding-left: 30px;
|
| margin-bottom: 16px;
|
| color: var(--blue-dark);
|
| font-weight: 700;
|
| }
|
|
|
| .sh-list li::before {
|
| content: "";
|
| position: absolute;
|
| top: 8px;
|
| left: 0;
|
| width: 10px;
|
| height: 10px;
|
| background: var(--gold);
|
| border-radius: 50%;
|
| }
|
|
|
| .sh-pro-img {
|
| height: 560px;
|
| border-radius: 34px;
|
| overflow: hidden;
|
| box-shadow: 0 24px 80px rgba(0,0,0,0.2);
|
| position: relative;
|
| }
|
|
|
| .sh-pro-img::after {
|
| content: "";
|
| position: absolute;
|
| inset: 0;
|
| background: rgba(6,35,63,0.18);
|
| }
|
|
|
| .sh-pro-img img {
|
| width: 100%;
|
| height: 100%;
|
| object-fit: cover;
|
| }
|
|
|
| @media(max-width: 900px) {
|
| .sh-header {
|
| height: auto;
|
| padding: 18px 6vw;
|
| flex-direction: column;
|
| align-items: flex-start;
|
| gap: 16px;
|
| }
|
|
|
| .sh-logo-text {
|
| display: none;
|
| }
|
|
|
| .sh-nav {
|
| width: 100%;
|
| justify-content: space-between;
|
| gap: 12px;
|
| }
|
|
|
| .sh-nav a {
|
| font-size: 13px;
|
| }
|
|
|
| .sh-hero {
|
| padding-top: 170px;
|
| }
|
|
|
| .sh-benefits,
|
| .sh-grid,
|
| .sh-pro {
|
| grid-template-columns: 1fr;
|
| }
|
|
|
| .sh-benefits div {
|
| border-right: 0;
|
| border-bottom: 1px solid rgba(6,35,63,0.1);
|
| }
|
|
|
| .sh-benefits div:last-child {
|
| border-bottom: 0;
|
| }
|
|
|
| .sh-pro-img {
|
| height: 360px;
|
| }
|
| }
|
|
|
| @media(max-width: 560px) {
|
| .sh-hero h1 {
|
| font-size: 42px;
|
| }
|
|
|
| .sh-actions {
|
| flex-direction: column;
|
| }
|
|
|
| .sh-btn {
|
| width: 100%;
|
| }
|
|
|
| .sh-section,
|
| .sh-pro {
|
| padding: 76px 6vw;
|
| }
|
|
|
| .sh-banner {
|
| min-height: 460px;
|
| }
|
| }
|
| </style>
|
|
|
| <script>
|
| (function() {
|
| document.body.classList.add("sh-premium-active");
|
|
|
| var root = document.getElementById("sh-premium-root");
|
| if (!root) {
|
| root = document.createElement("div");
|
| root.id = "sh-premium-root";
|
| document.body.appendChild(root);
|
| }
|
|
|
| var path = window.location.pathname.replace(/\/$/, "");
|
|
|
| function header() {
|
| return `
|
| <header class="sh-header">
|
| <a href="/" class="sh-logo">
|
| <span class="sh-logo-mark">SH</span>
|
| <span class="sh-logo-text">Signature Hôtelière</span>
|
| </a>
|
| <nav class="sh-nav">
|
| <a href="/">Accueil</a>
|
| <a href="/particuliers/">Particuliers</a>
|
| <a href="/professionnels/">Professionnels</a>
|
| </nav>
|
| </header>
|
| `;
|
| }
|
|
|
| function homePage() {
|
| return `
|
| ${header()}
|
| <main>
|
| <section class="sh-hero">
|
| <div class="sh-hero-content">
|
| <p class="sh-eyebrow">Literie hôtelière haut de gamme</p>
|
| <h1>Signature Hôtelière vous accompagne dans vos nuits</h1>
|
| <h2>Rien n'est plus terrible qu'une mauvaise nuit en vacances</h2>
|
| <p>Découvrez notre sélection de literie d'exception et nos solutions professionnelles pour garantir le confort de vos clients.</p>
|
| <div class="sh-actions">
|
| <a href="/particuliers/" class="sh-btn sh-btn-gold">Découvrir nos collections</a>
|
| <a href="/professionnels/" class="sh-btn sh-btn-outline">Partenariat professionnel</a>
|
| </div>
|
| </div>
|
| </section>
|
|
|
| <section class="sh-section sh-section-dark">
|
| <p class="sh-eyebrow">Exigence & confort</p>
|
| <h2>Une expérience de sommeil digne des plus beaux hôtels</h2>
|
| <p>Nous sélectionnons des produits durables, élégants et confortables, pensés pour les particuliers exigeants comme pour les professionnels de l’hébergement.</p>
|
| </section>
|
| </main>
|
| `;
|
| }
|
|
|
| function particuliersPage() {
|
| return `
|
| ${header()}
|
| <main>
|
| <section class="sh-banner">
|
| <div class="sh-banner-content">
|
| <p class="sh-eyebrow">Signature Hôtelière</p>
|
| <h1>Votre literie d'exception</h1>
|
| <p>Découvrez notre sélection de produits premium pour transformer votre chambre en sanctuaire de confort.</p>
|
| </div>
|
| </section>
|
|
|
| <section class="sh-benefits">
|
| <div>Garantie Confort</div>
|
| <div>Livraison Incluse</div>
|
| <div>Paiement 3x/4x</div>
|
| </section>
|
|
|
| <section class="sh-section">
|
| <p class="sh-eyebrow" style="text-align:center;">Nos collections</p>
|
| <h2 style="text-align:center;">Le confort hôtelier chez vous</h2>
|
| <div class="sh-grid">
|
| <article class="sh-card">
|
| <div class="sh-card-img">
|
| <img src="https://images.unsplash.com/photo-1615874959474-d609969a20ed?auto=format&fit=crop&w=1200&q=80" alt="Matelas Signature">
|
| </div>
|
| <div class="sh-card-body">
|
| <h3>Matelas Signature</h3>
|
| <p>Un soutien équilibré et un confort enveloppant inspiré des chambres d’hôtel.</p>
|
| <a href="#" class="sh-btn sh-btn-gold">Découvrir</a>
|
| </div>
|
| </article>
|
|
|
| <article class="sh-card">
|
| <div class="sh-card-img">
|
| <img src="https://images.unsplash.com/photo-1616594039964-ae9021a400a0?auto=format&fit=crop&w=1200&q=80" alt="Surmatelas Hôtelier">
|
| </div>
|
| <div class="sh-card-body">
|
| <h3>Surmatelas Hôtelier</h3>
|
| <p>Ajoutez une couche de confort premium à votre literie existante.</p>
|
| <a href="#" class="sh-btn sh-btn-gold">Découvrir</a>
|
| </div>
|
| </article>
|
|
|
| <article class="sh-card">
|
| <div class="sh-card-img">
|
| <img src="https://images.unsplash.com/photo-1631049307264-da0ec9d70304?auto=format&fit=crop&w=1200&q=80" alt="Oreillers Premium">
|
| </div>
|
| <div class="sh-card-body">
|
| <h3>Oreillers Premium</h3>
|
| <p>Une sensation douce et respirante pour des nuits plus réparatrices.</p>
|
| <a href="#" class="sh-btn sh-btn-gold">Découvrir</a>
|
| </div>
|
| </article>
|
| </div>
|
| </section>
|
| </main>
|
| `;
|
| }
|
|
|
| function professionnelsPage() {
|
| return `
|
| ${header()}
|
| <main>
|
| <section class="sh-banner">
|
| <div class="sh-banner-content">
|
| <p class="sh-eyebrow">Partenariat professionnel</p>
|
| <h1>Solutions literie pour professionnels</h1>
|
| <p>Hôtels, gîtes, maisons d’hôtes et hébergements haut de gamme : offrez à vos clients une expérience de sommeil mémorable.</p>
|
| </div>
|
| </section>
|
|
|
| <section class="sh-pro">
|
| <div>
|
| <p class="sh-eyebrow">Hôtellerie & hébergement</p>
|
| <h2>Une literie pensée pour l’exigence de vos clients</h2>
|
| <p>Signature Hôtelière accompagne les établissements qui souhaitent proposer une literie confortable, durable et élégante.</p>
|
|
|
| <ul class="sh-list">
|
| <li>Matelas adaptés à un usage intensif</li>
|
| <li>Surmatelas et accessoires premium</li>
|
| <li>Accompagnement personnalisé</li>
|
| <li>Devis sur mesure pour votre établissement</li>
|
| </ul>
|
|
|
| <a href="mailto:contact@signature-hoteliere.fr" class="sh-btn sh-btn-gold">Demander un devis professionnel</a>
|
| </div>
|
|
|
| <div class="sh-pro-img">
|
| <img src="https://images.unsplash.com/photo-1566073771259-6a8506099945?auto=format&fit=crop&w=1200&q=80" alt="Chambre d'hôtel premium">
|
| </div>
|
| </section>
|
| </main>
|
| `;
|
| }
|
|
|
| if (path === "/particuliers") {
|
| root.innerHTML = particuliersPage();
|
| } else if (path === "/professionnels") {
|
| root.innerHTML = professionnelsPage();
|
| } else {
|
| root.innerHTML = homePage();
|
| }
|
| })();
|
| </script>
|
| |
| |
Comments