neues Design David
This commit is contained in:
1 parent
af1e219c12
commit
92563c4dde
69 files changed
+419
-7262
No files matched your search
+207
-544
@@ -1,549 +1,212 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>FI-NE & LACUEOR — B2B Partner Portal</title>
|
||||
<link rel="icon" href="asset/favicon.ico" type="image/x-icon" />
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
</head>
|
||||
<body>
|
||||
<!-- ============================================================
|
||||
TOP BAR
|
||||
============================================================ -->
|
||||
<header class="topbar" role="banner">
|
||||
<div class="topbar-logo">
|
||||
<img src="asset/logo.webp" alt="[fi-ne] & LACUEOR" />
|
||||
<span class="topbar-label" data-i18n="topbar.label"
|
||||
>B2B<br />Partner Portal</span
|
||||
>
|
||||
<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>
|
||||
<nav class="topbar-nav" aria-label="Primary">
|
||||
<a href="#brands" class="nav-hide" data-i18n="nav.brands"
|
||||
>Our Brands</a
|
||||
>
|
||||
<a href="#b2b" class="nav-hide" data-i18n="nav.benefits"
|
||||
>Partner Benefits</a
|
||||
>
|
||||
<a href="#signup" class="nav-hide" data-i18n="nav.contact"
|
||||
>Contact</a
|
||||
>
|
||||
<a
|
||||
href="https://b2b.finorbrands.com"
|
||||
class="btn-topbar"
|
||||
data-i18n="nav.signin"
|
||||
>Anmelden</a
|
||||
>
|
||||
</nav>
|
||||
</header>
|
||||
</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>
|
||||
|
||||
<!-- ============================================================
|
||||
BRAND CARDS — B2C BANNER
|
||||
============================================================ -->
|
||||
<main>
|
||||
<section
|
||||
class="section brands-section"
|
||||
id="brands"
|
||||
aria-labelledby="brands-heading"
|
||||
>
|
||||
<p class="section-label" data-i18n="brands.label">
|
||||
Our Brand Universe
|
||||
</p>
|
||||
<h2
|
||||
class="section-title"
|
||||
id="brands-heading"
|
||||
data-i18n="brands.title"
|
||||
>
|
||||
Consumer & Retail Destinations
|
||||
</h2>
|
||||
<p class="section-body" data-i18n="brands.body">
|
||||
Direct our clients and consumers to our flagship brand
|
||||
destinations.
|
||||
</p>
|
||||
<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>
|
||||
|
||||
<div class="brands-grid" role="list">
|
||||
<!-- FI-NE (left half) -->
|
||||
<a
|
||||
class="brand-card brand-card--fine"
|
||||
href="https://finecosmetic.de"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
role="listitem"
|
||||
aria-label="Visit [fi-ne] consumer website — finecosmetic.de"
|
||||
>
|
||||
<div class="brand-card-header">
|
||||
<span
|
||||
class="brand-card-eyebrow"
|
||||
data-i18n="fine.eyebrow"
|
||||
>Premium Natural Cosmetics</span
|
||||
>
|
||||
<img
|
||||
class="brand-card-logo"
|
||||
src="asset/Fine.svg"
|
||||
alt="[fi-ne] brand logo"
|
||||
/>
|
||||
</div>
|
||||
<div class="brand-card-footer">
|
||||
<span
|
||||
class="brand-card-tagline"
|
||||
data-i18n="fine.tagline"
|
||||
>
|
||||
Clean. Unisex. Uncompromisingly effective Body
|
||||
Care. <br />
|
||||
Born in Berlin.
|
||||
</span>
|
||||
<span class="brand-card-cta">
|
||||
finecosmetic.de
|
||||
<span
|
||||
class="brand-card-cta-arrow"
|
||||
aria-hidden="true"
|
||||
>→</span
|
||||
>
|
||||
</span>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- LACUEOR (right half) -->
|
||||
<a
|
||||
class="brand-card brand-card--lacueor"
|
||||
href="https://lacueor.com"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
role="listitem"
|
||||
aria-label="Visit LACUEOR consumer website — lacueor.com"
|
||||
>
|
||||
<div class="brand-card-header">
|
||||
<span
|
||||
class="brand-card-eyebrow"
|
||||
data-i18n="lacueor.eyebrow"
|
||||
>Premium Organic Skin Care</span
|
||||
>
|
||||
<img
|
||||
class="brand-card-logo"
|
||||
src="asset/Lacueor.svg"
|
||||
alt="LACUEOR brand logo"
|
||||
/>
|
||||
</div>
|
||||
<div class="brand-card-footer">
|
||||
<span
|
||||
class="brand-card-tagline"
|
||||
data-i18n="lacueor.tagline"
|
||||
>
|
||||
Premium organic skin care.<br />
|
||||
Born in Switzerland.
|
||||
</span>
|
||||
<span class="brand-card-cta">
|
||||
lacueor.com
|
||||
<span
|
||||
class="brand-card-cta-arrow"
|
||||
aria-hidden="true"
|
||||
>→</span
|
||||
>
|
||||
</span>
|
||||
</div>
|
||||
</a>
|
||||
<img class="brands-banner" src="asset/banner.webp" alt="" />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ============================================================
|
||||
B2B BENEFITS SECTION
|
||||
============================================================ -->
|
||||
<section
|
||||
class="section b2b-section"
|
||||
id="b2b"
|
||||
aria-labelledby="b2b-heading"
|
||||
>
|
||||
<p class="section-label" data-i18n="b2b.label">
|
||||
Exclusive Partnership
|
||||
</p>
|
||||
<h2
|
||||
class="section-title"
|
||||
id="b2b-heading"
|
||||
data-i18n="b2b.title"
|
||||
>
|
||||
Apply for B2B Partnership
|
||||
</h2>
|
||||
<p class="section-body" data-i18n="b2b.body">
|
||||
We love to partner and collaborate with like-minded people
|
||||
and companies! If you are interested in a retail partnership
|
||||
or colaboration, please fill out
|
||||
<a href="#signup">the form</a> below and we will reach out
|
||||
to you.
|
||||
</p>
|
||||
|
||||
<div class="b2b-benefits" role="list">
|
||||
<!-- Bulk Pricing -->
|
||||
<div class="b2b-benefit" role="listitem">
|
||||
<div class="b2b-benefit-icon-wrap" aria-hidden="true">
|
||||
<svg
|
||||
width="28"
|
||||
height="28"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.25"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path
|
||||
d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"
|
||||
/>
|
||||
<polyline
|
||||
points="3.27 6.96 12 12.01 20.73 6.96"
|
||||
/>
|
||||
<line x1="12" y1="22.08" x2="12" y2="12" />
|
||||
</svg>
|
||||
</div>
|
||||
<span
|
||||
class="b2b-benefit-title"
|
||||
data-i18n="b2b.benefit1.title"
|
||||
>Bulk Pricing</span
|
||||
>
|
||||
<div class="b2b-benefit-rule" aria-hidden="true"></div>
|
||||
<span
|
||||
class="b2b-benefit-text"
|
||||
data-i18n="b2b.benefit1.text"
|
||||
>
|
||||
Tiered wholesale rates on every SKU across our
|
||||
entire brand portfolio — the more you order, the
|
||||
more you save.
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- Exclusive Promotions -->
|
||||
<div class="b2b-benefit" role="listitem">
|
||||
<div class="b2b-benefit-icon-wrap" aria-hidden="true">
|
||||
<svg
|
||||
width="28"
|
||||
height="28"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.25"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<circle cx="12" cy="8" r="6" />
|
||||
<path
|
||||
d="M15.477 12.89 17 22l-5-3-5 3 1.523-9.11"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<span
|
||||
class="b2b-benefit-title"
|
||||
data-i18n="b2b.benefit2.title"
|
||||
>Exclusive Promotions</span
|
||||
>
|
||||
<div class="b2b-benefit-rule" aria-hidden="true"></div>
|
||||
<span
|
||||
class="b2b-benefit-text"
|
||||
data-i18n="b2b.benefit2.text"
|
||||
>
|
||||
Partner-only seasonal campaigns, early-access
|
||||
product launches, and co-marketing opportunities
|
||||
reserved for B2B members.
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- Dedicated Support -->
|
||||
<div class="b2b-benefit" role="listitem">
|
||||
<div class="b2b-benefit-icon-wrap" aria-hidden="true">
|
||||
<svg
|
||||
width="28"
|
||||
height="28"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.25"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path d="M3 18v-6a9 9 0 0 1 18 0v6" />
|
||||
<path
|
||||
d="M21 19a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3z"
|
||||
/>
|
||||
<path
|
||||
d="M3 19a2 2 0 0 0 2 2h1a2 2 0 0 0 2-2v-3a2 2 0 0 0-2-2H3z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<span
|
||||
class="b2b-benefit-title"
|
||||
data-i18n="b2b.benefit3.title"
|
||||
>Dedicated Support</span
|
||||
>
|
||||
<div class="b2b-benefit-rule" aria-hidden="true"></div>
|
||||
<span
|
||||
class="b2b-benefit-text"
|
||||
data-i18n="b2b.benefit3.text"
|
||||
>
|
||||
A personal account manager and priority fulfilment
|
||||
to keep your business moving without friction.
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ============================================================
|
||||
VALUES / BRAND PILLARS STRIP
|
||||
============================================================ -->
|
||||
<div class="values-strip" aria-label="Our partner promise">
|
||||
<div class="values-grid" role="list">
|
||||
<div class="value-item" role="listitem">
|
||||
<p class="value-number">01</p>
|
||||
<p class="value-title" data-i18n="value1.title">
|
||||
Curated
|
||||
</p>
|
||||
<p class="value-desc" data-i18n="value1.desc">
|
||||
Selectively distributed
|
||||
</p>
|
||||
</div>
|
||||
<div class="value-item" role="listitem">
|
||||
<p class="value-number">02</p>
|
||||
<p class="value-title" data-i18n="value2.title">
|
||||
Certified
|
||||
</p>
|
||||
<p class="value-desc" data-i18n="value2.desc">
|
||||
Vegan & natural formulas
|
||||
</p>
|
||||
</div>
|
||||
<div class="value-item" role="listitem">
|
||||
<p class="value-number">03</p>
|
||||
<p class="value-title" data-i18n="value3.title">
|
||||
Crafted
|
||||
</p>
|
||||
<p class="value-desc" data-i18n="value3.desc">
|
||||
Handmade in Germany,<br />
|
||||
Austria and Switzerland
|
||||
</p>
|
||||
</div>
|
||||
<div class="value-item" role="listitem">
|
||||
<p class="value-number">04</p>
|
||||
<p class="value-title" data-i18n="value4.title">
|
||||
Committed
|
||||
</p>
|
||||
<p class="value-desc" data-i18n="value4.desc">
|
||||
Personal B2B support
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- ============================================================
|
||||
SIGN-UP SECTION
|
||||
============================================================ -->
|
||||
<section class="section signup-section" id="signup">
|
||||
<div class="section-label" data-i18n="signup.label">Contact Us</div>
|
||||
<h2 class="section-title" data-i18n="signup.title">
|
||||
Become a Partner
|
||||
</h2>
|
||||
<p class="section-body" data-i18n="signup.body">
|
||||
Interested in carrying [fi-ne] or LACUEOR? Send us your details
|
||||
and we will get back to you within 48 hours.
|
||||
</p>
|
||||
<form
|
||||
class="signup-form"
|
||||
action="https://n8n.finorbrands.com/webhook/b2b-signup"
|
||||
method="post"
|
||||
novalidate
|
||||
>
|
||||
<div class="signup-grid">
|
||||
<div class="form-group">
|
||||
<label for="signup-name" data-i18n="signup.name"
|
||||
>Name *</label
|
||||
>
|
||||
<input
|
||||
type="text"
|
||||
id="signup-name"
|
||||
name="name"
|
||||
required
|
||||
/>
|
||||
<span class="field-error" data-i18n="signup.err.name"
|
||||
>Please enter your name.</span
|
||||
>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="signup-email" data-i18n="signup.email"
|
||||
>Email *</label
|
||||
>
|
||||
<input
|
||||
type="email"
|
||||
id="signup-email"
|
||||
name="email"
|
||||
required
|
||||
/>
|
||||
<span class="field-error" data-i18n="signup.err.email"
|
||||
>Please enter a valid email address.</span
|
||||
>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="signup-phone" data-i18n="signup.phone"
|
||||
>Phone</label
|
||||
>
|
||||
<input type="tel" id="signup-phone" name="phone" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="signup-website" data-i18n="signup.website"
|
||||
>Website</label
|
||||
>
|
||||
<input
|
||||
type="url"
|
||||
id="signup-website"
|
||||
name="website"
|
||||
placeholder="https://"
|
||||
/>
|
||||
</div>
|
||||
<div class="form-group form-group--full">
|
||||
<label data-i18n="signup.channels"
|
||||
>Sales Channels</label
|
||||
>
|
||||
<div class="checkbox-group">
|
||||
<label class="checkbox-label">
|
||||
<input
|
||||
type="checkbox"
|
||||
name="channel_online"
|
||||
value="online_shop"
|
||||
/>
|
||||
<span data-i18n="signup.channel.online"
|
||||
>Online Shop</span
|
||||
>
|
||||
</label>
|
||||
<label class="checkbox-label">
|
||||
<input
|
||||
type="checkbox"
|
||||
name="channel_showroom"
|
||||
value="showroom"
|
||||
/>
|
||||
<span data-i18n="signup.channel.showroom"
|
||||
>Showroom</span
|
||||
>
|
||||
</label>
|
||||
<label class="checkbox-label">
|
||||
<input
|
||||
type="checkbox"
|
||||
name="channel_store"
|
||||
value="physical_store"
|
||||
/>
|
||||
<span data-i18n="signup.channel.store"
|
||||
>Physical Store</span
|
||||
>
|
||||
</label>
|
||||
<label class="checkbox-label">
|
||||
<input
|
||||
type="checkbox"
|
||||
name="channel_amazon"
|
||||
value="amazon"
|
||||
/>
|
||||
<span data-i18n="signup.channel.amazon"
|
||||
>Amazon</span
|
||||
>
|
||||
</label>
|
||||
<label class="checkbox-label">
|
||||
<input
|
||||
type="checkbox"
|
||||
name="channel_other"
|
||||
value="other"
|
||||
/>
|
||||
<span data-i18n="signup.channel.other"
|
||||
>Other</span
|
||||
>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group form-group--full">
|
||||
<label for="signup-message" data-i18n="signup.message"
|
||||
>Your backfround / your philosophy / your favorite
|
||||
brands *</label
|
||||
>
|
||||
<textarea
|
||||
id="signup-message"
|
||||
name="message"
|
||||
rows="5"
|
||||
required
|
||||
></textarea>
|
||||
<span class="field-error" data-i18n="signup.err.message"
|
||||
>Please describe your business case.</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
type="submit"
|
||||
class="btn-primary"
|
||||
data-i18n="signup.submit"
|
||||
>
|
||||
Send Request
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div
|
||||
id="signup-confirm"
|
||||
class="signup-confirm"
|
||||
style="display: none"
|
||||
>
|
||||
<div class="signup-confirm-inner">
|
||||
<span class="signup-confirm-icon" aria-hidden="true"></span>
|
||||
<h3
|
||||
class="signup-confirm-title"
|
||||
data-i18n="signup.confirm.title"
|
||||
>
|
||||
Thank You!
|
||||
</h3>
|
||||
<p
|
||||
class="signup-confirm-body"
|
||||
data-i18n="signup.confirm.body"
|
||||
>
|
||||
We have received your request and will get back to you
|
||||
within 48 hours.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="signup-notice-rule" aria-hidden="true"></div>
|
||||
|
||||
<p
|
||||
class="b2b-notice"
|
||||
style="margin-top: 0; border-top: none; background: transparent"
|
||||
>
|
||||
Already a partner?  —  
|
||||
<a
|
||||
href="https://b2b.finorbrands.com"
|
||||
data-i18n="signup.notice_link"
|
||||
>Sign in to your B2B account</a
|
||||
>
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<!-- ============================================================
|
||||
FOOTER
|
||||
============================================================ -->
|
||||
<footer role="contentinfo">
|
||||
<div class="footer-inner">
|
||||
<div
|
||||
class="footer-bottom"
|
||||
style="border-top: none; padding-top: 0"
|
||||
>
|
||||
<p class="footer-legal" data-i18n="footer.copyright">
|
||||
© 2025 FINOR GmbH. All rights reserved.
|
||||
<a href="#" data-i18n="footer.legal">Legal Notice</a>
|
||||
<a href="#" data-i18n="footer.privacy"
|
||||
>Privacy Policy</a
|
||||
>
|
||||
</p>
|
||||
<div class="footer-lang">
|
||||
<select id="lang-select">
|
||||
<option value="en">English</option>
|
||||
<option value="de">Deutsch</option>
|
||||
</select>
|
||||
</div>
|
||||
<p class="footer-tagline" data-i18n="footer.tagline">
|
||||
Made in Berlin, with love.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
</body>
|
||||
</html>
|
||||
Reference in new issue
Block a user