213 lines
12 KiB
HTML
213 lines
12 KiB
HTML
<!doctype html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>FINOR · FINE und LACUEOR</title>
|
|
<meta name="description" content="Natural Beauty. Echt bis ins Detail. FINE und LACUEOR: Naturkosmetik nach eigenen Rezepturen, von Hand gemacht.">
|
|
<link rel="canonical" href="https://finorbrands.com/">
|
|
<link rel="alternate" hreflang="de" href="https://finorbrands.com/">
|
|
<link rel="alternate" hreflang="en" href="https://finorbrands.com/en/">
|
|
<link rel="alternate" hreflang="x-default" href="https://finorbrands.com/">
|
|
<meta property="og:type" content="website">
|
|
<meta property="og:title" content="FINOR · FINE und LACUEOR">
|
|
<meta property="og:description" content="FINE und LACUEOR: Naturkosmetik nach eigenen Rezepturen, von Hand gemacht.">
|
|
<meta property="og:url" content="https://finorbrands.com/">
|
|
<meta property="og:image" content="https://finorbrands.com/assets/img/fine-1400.webp">
|
|
<link rel="icon" type="image/png" href="/assets/img/favicon.png">
|
|
<link rel="preload" href="/assets/fonts/ebgaramond.woff2" as="font" type="font/woff2" crossorigin>
|
|
<link rel="preload" href="/assets/fonts/figtree.woff2" as="font" type="font/woff2" crossorigin>
|
|
<style>
|
|
@font-face{font-family:"EB Garamond";src:url(/assets/fonts/ebgaramond.woff2) format("woff2");font-weight:400 800;font-display:swap}
|
|
@font-face{font-family:"Figtree";src:url(/assets/fonts/figtree.woff2) format("woff2");font-weight:300 900;font-display:swap}
|
|
*,*::before,*::after{box-sizing:border-box}
|
|
html{-webkit-text-size-adjust:100%}
|
|
body{margin:0;background:#fff;color:#141414;font-family:Figtree,"Helvetica Neue",Arial,sans-serif;font-size:16px;line-height:1.55}
|
|
img{display:block;max-width:100%;height:auto}
|
|
a{color:inherit;text-decoration:none}
|
|
.wrap{max-width:1200px;margin:0 auto;padding:0 clamp(20px,4vw,40px)}
|
|
.serif{font-family:"EB Garamond",Garamond,"Times New Roman",serif}
|
|
.btn{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 26px;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;border:1px solid transparent;cursor:pointer;transition:opacity .2s}
|
|
.btn:hover{opacity:.82}
|
|
.btn svg{width:16px;height:16px}
|
|
.btn-dark{background:#141414;color:#fff}
|
|
.btn-outline{border-color:#141414;min-height:44px;padding:0 22px}
|
|
|
|
/* Header */
|
|
.header{border-bottom:1px solid #e8e4dd}
|
|
.lang{display:flex;gap:4px;font-size:12px;font-weight:600;letter-spacing:.14em}
|
|
.lang a{padding:12px 6px;color:#8a847c}
|
|
.lang a[aria-current]{color:#141414}
|
|
.header-right{display:flex;align-items:center;gap:16px}
|
|
.header .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;padding-top:18px;padding-bottom:18px}
|
|
.logo{height:22px;width:auto}
|
|
|
|
/* Intro */
|
|
.intro{text-align:center;padding-top:clamp(48px,7vw,96px);padding-bottom:clamp(32px,4vw,56px)}
|
|
.intro h1{margin:0 0 18px;font-weight:400;font-size:clamp(36px,4.6vw,60px);line-height:1.08}
|
|
.intro .nb{display:inline-block}
|
|
.intro p{margin:0 auto;max-width:700px;font-size:18px;color:#4a4642}
|
|
|
|
/* Marken */
|
|
.brands{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));gap:24px}
|
|
.brand{display:flex;flex-direction:column}
|
|
.brand-img{aspect-ratio:16/9;overflow:hidden}
|
|
@media (max-width:767px){.brand-img{aspect-ratio:3/2}}
|
|
.fine .brand-img img{object-position:50% 18%}
|
|
.lacueor .brand-img img{object-position:50% 50%}
|
|
.brand-img img{width:100%;height:100%;object-fit:cover}
|
|
.brand-body{padding:32px;display:flex;flex-direction:column;gap:18px;flex-grow:1}
|
|
.brand-body p{margin:0}
|
|
.brand-body .btn{align-self:flex-start;margin-top:auto}
|
|
.fine{background:#f6efe3;color:#2b1d10}
|
|
.fine p{color:#4a3a2b}
|
|
.fine .btn{background:#2b1d10;color:#f6efe3}
|
|
.brand-logo{align-self:flex-start}
|
|
.fine .brand-logo{height:44px;width:auto}
|
|
.lacueor{background:#1c1813;color:#f6f2ec}
|
|
.lacueor p{color:#d8d0c4}
|
|
.lacueor .btn{background:#f6f2ec;color:#1c1813}
|
|
.lacueor .brand-logo{height:30px;width:auto;margin:3px 0}
|
|
|
|
/* B2B */
|
|
.b2b{padding-top:clamp(64px,8vw,112px);padding-bottom:clamp(64px,8vw,112px)}
|
|
.eyebrow{margin:0 0 10px;font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:#5f5a54}
|
|
.b2b-lead{margin:0 0 36px;max-width:640px;font-size:17px;color:#4a4642}
|
|
.b2b h2{margin:0 0 14px;font-weight:400;font-size:clamp(30px,3.4vw,44px);line-height:1.1}
|
|
.b2b-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));gap:24px;align-items:start}
|
|
.card{padding:32px;display:flex;flex-direction:column;gap:14px}
|
|
.card h3{margin:0;font-weight:500;font-size:26px}
|
|
.card p{margin:0;color:#4a4642}
|
|
.card-login{border:1px solid #141414}
|
|
.card-login .btn{align-self:flex-start;margin-top:6px}
|
|
.card-form{background:#f5f3ef}
|
|
form{display:flex;flex-direction:column;gap:14px;margin-top:6px}
|
|
.fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:14px}
|
|
label{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:500}
|
|
input[type=text],input[type=email],input[type=tel],input[type=url],textarea{font:inherit;font-size:15px;min-height:44px;padding:0 12px;border:1px solid #b9b3aa;background:#fff;color:#141414;border-radius:0}
|
|
textarea{padding:10px 12px;resize:vertical}
|
|
input:focus,textarea:focus{outline:2px solid #141414;outline-offset:1px}
|
|
fieldset{border:0;margin:0;padding:0}
|
|
legend{font-size:13px;font-weight:500;padding:0;margin-bottom:8px}
|
|
.checks{display:flex;flex-wrap:wrap;gap:4px 20px}
|
|
.checks label{flex-direction:row;align-items:center;gap:8px;min-height:36px;font-size:14px;font-weight:400}
|
|
.hint{font-size:12px;color:#5f5a54;margin:0}
|
|
.hint a{text-decoration:underline}
|
|
form .btn{align-self:flex-start}
|
|
|
|
/* Footer */
|
|
.footer{background:#141414;color:#fff}
|
|
.footer .wrap{padding-top:48px;padding-bottom:48px;display:flex;flex-direction:column;gap:28px}
|
|
.footer-top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:24px}
|
|
.footer nav{display:flex;flex-wrap:wrap;gap:4px 24px;font-size:14px}
|
|
.footer nav a{padding:12px 0}
|
|
.footer nav a:hover{color:#bdbdbd}
|
|
.legal{margin:0;border-top:1px solid #3a3a3a;padding-top:24px;font-size:13px;line-height:1.7;color:#bdbdbd}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<header class="header">
|
|
<div class="wrap">
|
|
<a href="/" aria-label="FINOR Startseite"><img class="logo" src="/assets/img/finor-logo.png" alt="FINOR" width="134" height="22"></a>
|
|
<div class="header-right">
|
|
<nav class="lang" aria-label="Sprache"><a href="/" hreflang="de" lang="de" aria-current="true">DE</a><a href="/en/" hreflang="en" lang="en">EN</a></nav>
|
|
<a class="btn btn-outline" href="https://b2b.finorbrands.com/de/web/login?redirect=%2Fshop">Partner-Login</a>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<main>
|
|
<section class="intro wrap">
|
|
<h1 class="serif"><span class="nb">Natural Beauty.</span> <span class="nb">Echt bis ins Detail.</span></h1>
|
|
<p>FINE und LACUEOR: Naturkosmetik nach eigenen Rezepturen, von Hand gemacht.<br>Jede Zutat, jedes Glas und jede Verpackung wählen wir mit Sorgfalt.</p>
|
|
</section>
|
|
|
|
<section class="brands wrap" aria-label="Unsere Marken">
|
|
<article class="brand fine">
|
|
<div class="brand-img">
|
|
<img src="/assets/img/fine-1400.webp" srcset="/assets/img/fine-800.webp 800w, /assets/img/fine-1400.webp 1400w" sizes="(min-width: 860px) 576px, 100vw" alt="FINE Deocreme Cedar Bergamot mit Lilie, Quitte und Stein" width="1400" height="1050" fetchpriority="high">
|
|
</div>
|
|
<div class="brand-body">
|
|
<img class="brand-logo" src="/assets/img/fine-logo.png" alt="FINE" width="96" height="36">
|
|
<p>Pflege, die man versteht: wenige Zutaten, jede mit Grund. FINE macht Deocremes, Hyaluron-Seren und Parfümöle, vegan und unisex.</p>
|
|
<a class="btn" href="https://finecosmetic.com">finecosmetic.com
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
|
|
</a>
|
|
</div>
|
|
</article>
|
|
<article class="brand lacueor">
|
|
<div class="brand-img">
|
|
<img src="/assets/img/lacueor-loeffel-1360.webp" srcset="/assets/img/lacueor-loeffel-800.webp 800w, /assets/img/lacueor-loeffel-1360.webp 1360w" sizes="(min-width: 860px) 576px, 100vw" alt="LACUEOR Balsame und Öle auf Messinglöffeln, Travertin" width="1360" height="907" fetchpriority="high">
|
|
</div>
|
|
<div class="brand-body">
|
|
<img class="brand-logo" src="/assets/img/lacueor-logo-white.png" alt="LACUEOR" width="173" height="30">
|
|
<p>Quantenkosmetik, wie es sie kein zweites Mal gibt. Öle, Blüten und Gewürze, über Wochen nach den Rhythmen der Natur angesetzt.</p>
|
|
<a class="btn" href="https://lacueor.com">lacueor.com
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
|
|
</a>
|
|
</div>
|
|
</article>
|
|
</section>
|
|
|
|
<section class="b2b wrap" id="b2b">
|
|
<p class="eyebrow">Für Partner</p>
|
|
<h2 class="serif">FINE und LACUEOR für deine Kunden und Gäste.</h2>
|
|
<p class="b2b-lead">Für Concept Stores, Hotels, Spas und Airlines, die echte Naturkosmetik anbieten möchten.</p>
|
|
<div class="b2b-grid">
|
|
<div class="card card-login">
|
|
<h3 class="serif">Bereits Partner?</h3>
|
|
<p>Log dich im Partnerportal ein und bestell beide Marken zu Partnerkonditionen.</p>
|
|
<a class="btn btn-dark" href="https://b2b.finorbrands.com/de/web/login?redirect=%2Fshop">Zum Partnerportal
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
|
|
</a>
|
|
</div>
|
|
<div class="card card-form">
|
|
<h3 class="serif">Noch kein Partner?</h3>
|
|
<p>Frag deinen Zugang an. Nach kurzer Prüfung bekommst du deine Zugangsdaten für das Partnerportal.</p>
|
|
<form action="https://n8n.finorbrands.com/webhook/b2b-signup" method="post">
|
|
<div class="fields">
|
|
<label>Firma / Name *<input type="text" name="name" required autocomplete="organization"></label>
|
|
<label>E-Mail *<input type="email" name="email" required autocomplete="email"></label>
|
|
<label>Telefon<input type="tel" name="phone" autocomplete="tel"></label>
|
|
<label>Website<input type="url" name="website" autocomplete="url" placeholder="https://"></label>
|
|
</div>
|
|
<fieldset>
|
|
<legend>Dein Geschäft</legend>
|
|
<div class="checks">
|
|
<label><input type="checkbox" name="channel_store" value="physical_store"> Concept Store</label>
|
|
<label><input type="checkbox" name="channel_online" value="online_shop"> Online-Shop</label>
|
|
<label><input type="checkbox" name="channel_hotel" value="hotel"> Hotel</label>
|
|
<label><input type="checkbox" name="channel_spa" value="spa"> Spa</label>
|
|
<label><input type="checkbox" name="channel_airline" value="airline"> Airline</label>
|
|
<label><input type="checkbox" name="channel_other" value="other"> Sonstiges</label>
|
|
</div>
|
|
</fieldset>
|
|
<label>Kurz zu deinem Haus *<textarea name="message" rows="4" required></textarea></label>
|
|
<p class="hint">Deine Angaben nutzen wir nur zur Bearbeitung deiner Anfrage. Mehr dazu in der <a href="/datenschutz">Datenschutzerklärung</a>.</p>
|
|
<button class="btn btn-dark" type="submit">Zugang anfragen</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<footer class="footer">
|
|
<div class="wrap">
|
|
<div class="footer-top">
|
|
<img src="/assets/img/finor-logo-white.png" alt="FINOR" width="134" height="22" loading="lazy">
|
|
<nav aria-label="Footer">
|
|
<a href="https://finecosmetic.com">finecosmetic.com</a>
|
|
<a href="https://lacueor.com">lacueor.com</a>
|
|
<a href="https://b2b.finorbrands.com/de/web/login?redirect=%2Fshop">Partnerportal</a>
|
|
<a href="/impressum">Impressum</a>
|
|
<a href="/datenschutz">Datenschutz</a>
|
|
</nav>
|
|
</div>
|
|
<p class="legal">Finor GmbH · Kurfürstendamm 194 · 10707 Berlin · office@finorbrands.com<br>Geschäftsführer: David Ligas · Amtsgericht Berlin-Charlottenburg, HRB 275672 B · USt-IdNr.: DE457510179 · © 2026 Finor GmbH</p>
|
|
</div>
|
|
</footer>
|
|
|
|
</body>
|
|
</html>
|