550 lines
24 KiB
HTML
550 lines
24 KiB
HTML
<!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
|
|
>
|
|
</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>
|
|
|
|
<!-- ============================================================
|
|
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>
|
|
|
|
<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>
|
|
</html>
|