oliver/homepage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

new

Browse Source
This commit is contained in:
oliver
2026-07-01 19:37:57 -03:00
parent 65a7d4aaee
commit 714e316e77
3 changed files with 299 additions and 320 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+126 -98
View File
@@ -22,44 +22,17 @@
<nav class="topbar-nav" aria-label="Primary">
<a href="#brands" class="nav-hide">Our Brands</a>
<a href="#b2b" class="nav-hide">Partner Benefits</a>
<a href="mailto:b2b@finor.de" class="nav-hide">Contact</a>
<a href="mailto:b2b@finor.de" class="btn-topbar"
>Get In Touch</a
<a href="#signup" class="nav-hide">Contact</a>
<a href="https://b2b.finorbrands.com" class="btn-topbar"
>Anmelden</a
>
</nav>
</header>
<!-- ============================================================
HERO
============================================================ -->
<main>
<section class="hero" aria-labelledby="hero-heading">
<div class="hero-inner">
<p class="hero-eyebrow">Exclusive B2B Partner Portal</p>
<h1 id="hero-heading">
<span class="hero-title"><em>[fi-ne]</em></span>
<span class="hero-ampersand">&amp;</span>
<span class="hero-title">LACUEOR</span>
</h1>
<p class="hero-subtitle">
Two distinct expressions of uncompromising luxury. One
portal for the partners who share our vision.
</p>
<div class="hero-rule" aria-hidden="true">
<span></span>
<span class="hero-rule-diamond"></span>
<span></span>
</div>
</div>
<div class="scroll-cue" aria-hidden="true">
<span>Discover</span>
<div class="scroll-cue-line"></div>
</div>
</section>
<!-- ============================================================
BRAND CARDS — B2C BANNER
============================================================ -->
<main>
<section
class="section brands-section"
id="brands"
@@ -76,7 +49,6 @@
</p>
<div class="brands-grid" role="list">
<!-- FI-NE (left half) -->
<a
class="brand-card brand-card--fine"
@@ -86,10 +58,6 @@
role="listitem"
aria-label="Visit [fi-ne] consumer website — finecosmetic.de"
>
<div
class="brand-card-top-accent"
aria-hidden="true"
></div>
<div class="brand-card-header">
<span class="brand-card-eyebrow"
>Premium Natural Cosmetics</span
@@ -100,7 +68,6 @@
alt="[fi-ne] brand logo"
/>
</div>
<div class="brand-card-gap" aria-hidden="true"></div>
<div class="brand-card-footer">
<span class="brand-card-tagline">
Clean. Unisex. Uncompromisingly effective.<br />
@@ -126,10 +93,6 @@
role="listitem"
aria-label="Visit LACUEOR consumer website — lacueor.com"
>
<div
class="brand-card-top-accent"
aria-hidden="true"
></div>
<div class="brand-card-header">
<span class="brand-card-eyebrow"
>Premium Organic Skin Care</span
@@ -140,7 +103,6 @@
alt="LACUEOR brand logo"
/>
</div>
<div class="brand-card-gap" aria-hidden="true"></div>
<div class="brand-card-footer">
<span class="brand-card-tagline">
From the quantum realm to your skin.<br />
@@ -156,38 +118,29 @@
</span>
</div>
</a>
<img
class="brands-banner"
id="brands-banner"
src="asset/banner/5.png"
alt=""
/>
</div>
<!-- Banner image selector -->
<div class="banner-selector">
<label for="banner-picker">Banner:</label>
<select id="banner-picker">
<option value="1" selected>Banner 1</option>
<option value="1">Banner 1</option>
<option value="2">Banner 2</option>
<option value="3">Banner 3</option>
<option value="4">Banner 4</option>
<option value="5">Banner 5</option>
<option value="5" selected>Banner 5</option>
<option value="6">Banner 6</option>
<option value="7">Banner 7</option>
<option value="8">Banner 8</option>
<option value="9">Banner 9</option>
</select>
</div>
<p class="brands-notice">
Looking for consumer
products?&nbsp;&nbsp;&#8212;&nbsp;&nbsp; Visit&nbsp;<a
href="https://finecosmetic.de"
target="_blank"
rel="noopener"
>finecosmetic.de</a
>
&nbsp;or&nbsp;
<a href="https://lacueor.com" target="_blank" rel="noopener"
>lacueor.com</a
>
&nbsp;directly.
</p>
</section>
<!-- ============================================================
@@ -306,7 +259,9 @@
<p class="b2b-notice">
Already a partner?&#160;&#160;—&#160;&#160;
<a href="#portal">Sign in to your B2B account</a>
<a href="https://b2b.finorbrands.com"
>Sign in to your B2B account</a
>
</p>
</section>
@@ -339,50 +294,123 @@
</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>
<p class="b2b-notice" style="margin-bottom: 40px">
Already a partner?&#160;&#160;—&#160;&#160;
<a href="https://b2b.finorbrands.com"
>Sign in to your B2B account</a
>
</p>
<form class="signup-form" action="#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
/>
</div>
<div class="form-group">
<label for="signup-email" data-i18n="signup.email"
>Email *</label
>
<input
type="email"
id="signup-email"
name="email"
required
/>
</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">
<label for="signup-social" data-i18n="signup.social"
>Social Media</label
>
<input
type="text"
id="signup-social"
name="social"
placeholder="Instagram / LinkedIn / …"
/>
</div>
<div class="form-group form-group--full">
<label for="signup-message" data-i18n="signup.message"
>Describe your business case *</label
>
<textarea
id="signup-message"
name="message"
rows="5"
required
></textarea>
</div>
</div>
<button
type="submit"
class="btn-primary"
data-i18n="signup.submit"
>
Send Request
</button>
</form>
</section>
<!-- ============================================================
FOOTER
============================================================ -->
<footer role="contentinfo">
<div class="footer-inner">
<div class="footer-top">
<div class="footer-brands">
<a
class="footer-brand-link"
href="https://finecosmetic.de"
target="_blank"
rel="noopener"
>[fi-ne]</a
>
<span class="footer-brand-sep">&bull;</span>
<a
class="footer-brand-link"
href="https://lacueor.com"
target="_blank"
rel="noopener"
>LACUEOR</a
>
</div>
<div class="footer-logo-wrap">
<img
src="asset/Bildschirmfoto_2025-12-05_um_17.28.39-removebg-preview.png"
alt="[fi-ne] &amp; LACUEOR"
/>
</div>
<div class="footer-contact">
<a href="mailto:b2b@finor.de">b2b@finor.de</a>
<a href="mailto:info@lacueor.com">info@lacueor.com</a>
</div>
</div>
<div class="footer-bottom">
<p class="footer-legal">
<div
class="footer-bottom"
style="border-top: none; padding-top: 0"
>
<p class="footer-legal" data-i18n="footer.copyright">
&copy; 2025 FINOR GmbH. All rights reserved.
<a href="#">Legal Notice</a>
<a href="#">Privacy Policy</a>
<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>
<p class="footer-tagline">Made in Berlin, with love.</p>
</div>
</div>
</footer>
script.js
+70 -16
View File
@@ -1,11 +1,78 @@
/* ============================================================
FI-NE & LACUEOR — B2B Partner Portal
Scripts
Scripts — i18n, banner selector, smooth scroll, topbar shadow
============================================================ */
(function () {
"use strict";
/* ── Translations ─────────────────────────────────────── */
var translations = {
en: {
"signup.label": "Contact Us",
"signup.title": "Become a Partner",
"signup.body":
"Interested in carrying [fi-ne] or LACUEOR? Send us your details and we will get back to you within 48 hours.",
"signup.name": "Name *",
"signup.email": "Email *",
"signup.phone": "Phone",
"signup.website": "Website",
"signup.social": "Social Media",
"signup.message": "Describe your business case *",
"signup.submit": "Send Request",
"footer.copyright": "\u00a9 2025 FINOR GmbH. All rights reserved.",
"footer.legal": "Legal Notice",
"footer.privacy": "Privacy Policy",
"footer.tagline": "Made in Berlin, with love.",
},
de: {
"signup.label": "Kontakt",
"signup.title": "Partner werden",
"signup.body":
"Interesse an [fi-ne] oder LACUEOR? Senden Sie uns Ihre Daten und wir melden uns innerhalb von 48 Stunden zur\u00fcck.",
"signup.name": "Name *",
"signup.email": "E-Mail *",
"signup.phone": "Telefon",
"signup.website": "Webseite",
"signup.social": "Social Media",
"signup.message": "Beschreiben Sie Ihr Gesch\u00e4ftsfeld *",
"signup.submit": "Anfrage senden",
"footer.copyright": "\u00a9 2025 FINOR GmbH. Alle Rechte vorbehalten.",
"footer.legal": "Impressum",
"footer.privacy": "Datenschutz",
"footer.tagline": "Hergestellt in Berlin, mit Liebe.",
},
};
function applyLang(lang) {
var t = translations[lang] || translations.en;
document.querySelectorAll("[data-i18n]").forEach(function (el) {
var key = el.getAttribute("data-i18n");
if (t[key]) el.textContent = t[key];
});
document.getElementById("lang-select").value = lang;
}
/* Auto-detect from browser, default to English */
var detectedLang =
navigator.language && navigator.language.slice(0, 2) === "de" ? "de" : "en";
applyLang(detectedLang);
document
.getElementById("lang-select")
.addEventListener("change", function () {
applyLang(this.value);
});
/* ── Banner image selector ──────────────────────────────── */
var bannerPicker = document.getElementById("banner-picker");
var brandsBanner = document.getElementById("brands-banner");
if (bannerPicker && brandsBanner) {
bannerPicker.addEventListener("change", function () {
brandsBanner.src = "asset/banner/" + this.value + ".png";
});
}
/* ── Smooth anchor scroll offset for fixed topbar ────────── */
document.querySelectorAll('a[href^="#"]').forEach(function (anchor) {
anchor.addEventListener("click", function (e) {
@@ -14,9 +81,7 @@
e.preventDefault();
var offset = 80;
var top =
target.getBoundingClientRect().top +
window.pageYOffset -
offset;
target.getBoundingClientRect().top + window.pageYOffset - offset;
window.scrollTo({ top: top, behavior: "smooth" });
});
});
@@ -32,17 +97,6 @@
topbar.style.boxShadow = "none";
}
},
{ passive: true }
{ passive: true },
);
/* ── Banner image selector ──────────────────────────────── */
var bannerPicker = document.getElementById("banner-picker");
var brandsGrid = document.querySelector(".brands-grid");
if (bannerPicker && brandsGrid) {
bannerPicker.addEventListener("change", function () {
var val = this.value;
brandsGrid.style.backgroundImage =
"url(asset/banner/" + val + ".png)";
});
}
})();
style.css
+103 -206
View File
@@ -157,174 +157,6 @@ body::before {
color: var(--warm-white);
}
/* ============================================================
HERO
============================================================ */
.hero {
position: relative;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 120px 48px 80px;
z-index: 1;
overflow: hidden;
}
.hero::after {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(
ellipse 80% 60% at 50% 40%,
rgba(184, 150, 90, 0.07) 0%,
transparent 70%
),
radial-gradient(
ellipse 50% 40% at 20% 80%,
rgba(26, 24, 20, 0.04) 0%,
transparent 60%
);
pointer-events: none;
z-index: 0;
}
.hero-inner {
position: relative;
z-index: 1;
max-width: 820px;
}
.hero-eyebrow {
font-family: var(--font-sans);
font-size: 9px;
font-weight: 500;
letter-spacing: 0.35em;
text-transform: uppercase;
color: var(--gold);
margin-bottom: 28px;
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
}
.hero-eyebrow::before,
.hero-eyebrow::after {
content: "";
display: block;
width: 40px;
height: 1px;
background: var(--gold-light);
}
.hero-title {
font-family: var(--font-serif);
font-size: clamp(52px, 7vw, 96px);
font-weight: 300;
letter-spacing: 0.04em;
line-height: 1.05;
color: var(--charcoal);
margin-bottom: 10px;
display: block;
}
.hero-title em {
font-style: italic;
color: var(--gold);
}
.hero-ampersand {
font-family: var(--font-serif);
font-size: clamp(32px, 4vw, 56px);
font-weight: 300;
color: var(--light-grey);
display: block;
line-height: 1;
margin: 4px 0;
}
.hero-subtitle {
font-family: var(--font-serif);
font-size: clamp(14px, 2vw, 18px);
font-weight: 300;
font-style: italic;
color: var(--mid-grey);
letter-spacing: 0.06em;
margin: 28px auto 0;
max-width: 560px;
line-height: 1.8;
}
.hero-rule {
display: flex;
align-items: center;
justify-content: center;
gap: 14px;
margin: 40px auto 0;
}
.hero-rule span {
display: block;
width: 60px;
height: 1px;
background: linear-gradient(to right, transparent, var(--gold-light));
}
.hero-rule span:last-child {
background: linear-gradient(to left, transparent, var(--gold-light));
}
.hero-rule-diamond {
width: 6px;
height: 6px;
background: var(--gold);
transform: rotate(45deg);
flex-shrink: 0;
}
.scroll-cue {
position: absolute;
bottom: 36px;
left: 50%;
transform: translateX(-50%);
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
z-index: 1;
animation: scrollBob 2.4s ease-in-out infinite;
}
.scroll-cue span {
font-size: 8px;
letter-spacing: 0.25em;
text-transform: uppercase;
color: var(--light-grey);
font-family: var(--font-sans);
}
.scroll-cue-line {
width: 1px;
height: 36px;
background: linear-gradient(to bottom, var(--gold-light), transparent);
}
@keyframes scrollBob {
0%,
100% {
opacity: 0.5;
transform: translateX(-50%) translateY(0);
}
50% {
opacity: 1;
transform: translateX(-50%) translateY(6px);
}
}
/* ============================================================
SECTION WRAPPER
============================================================ */
@@ -381,64 +213,51 @@ body::before {
grid-template-columns: 1fr 1fr;
max-width: 1200px;
margin: 0 auto;
background-image: url("asset/banner/1.png");
background-size: 100% auto;
background-position: center;
background-repeat: no-repeat;
position: relative;
}
.brand-card {
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: space-between;
text-decoration: none;
cursor: pointer;
z-index: 1;
}
.brand-card--fine {
border-right: 1px solid var(--border);
}
.brand-card--lacueor {
}
.brand-card-header {
flex-shrink: 0;
padding: 32px 52px 20px;
padding: 10px 52px 7px;
text-align: center;
}
.brand-card--fine .brand-card-header {
background: var(--fine-beige);
}
.brand-card--lacueor .brand-card-header {
background: var(--lacueor-dark);
}
.brand-card-gap {
flex: 1;
min-height: 500px;
}
.brand-card-footer {
flex-shrink: 0;
padding: 20px 52px 40px;
padding: 7px 52px 14px;
text-align: center;
}
.brand-card--fine .brand-card-footer {
background: var(--fine-beige);
}
.brand-card--lacueor .brand-card-footer {
background: var(--lacueor-dark);
}
.brands-banner-img {
display: none;
.brands-banner {
grid-column: 1 / -1;
width: 100%;
display: block;
}
.brand-card-top-accent {
@@ -895,7 +714,7 @@ footer {
justify-content: space-between;
padding-top: 20px;
flex-wrap: wrap;
gap: 12px;
gap: 16px;
}
.footer-legal {
@@ -925,6 +744,91 @@ footer {
letter-spacing: 0.08em;
}
.footer-lang select {
font-family: var(--font-sans);
font-size: 10px;
letter-spacing: 0.08em;
padding: 6px 12px;
border: 1px solid rgba(255, 255, 255, 0.15);
background: transparent;
color: rgba(247, 244, 239, 0.5);
cursor: pointer;
outline: none;
transition:
border-color var(--transition),
color var(--transition);
}
.footer-lang select:hover,
.footer-lang select:focus {
border-color: var(--gold);
color: var(--gold);
}
.footer-lang select option {
background: var(--dark);
color: var(--cream);
}
/* ============================================================
SIGN-UP SECTION
============================================================ */
.signup-section {
background: var(--warm-white);
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
}
.signup-form {
max-width: 720px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 20px;
}
.signup-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px;
}
.form-group--full {
grid-column: 1 / -1;
}
.signup-form textarea {
font-family: var(--font-sans);
font-size: 13px;
font-weight: 300;
letter-spacing: 0.04em;
padding: 12px 16px;
border: 1px solid var(--light-grey);
background: var(--warm-white);
color: var(--charcoal);
outline: none;
transition:
border-color var(--transition),
box-shadow var(--transition);
border-radius: 0;
-webkit-appearance: none;
resize: vertical;
}
.signup-form textarea::placeholder {
color: var(--light-grey);
}
.signup-form textarea:focus {
border-color: var(--gold);
box-shadow: 0 0 0 3px rgba(184, 150, 90, 0.12);
}
.signup-form .btn-primary {
align-self: center;
max-width: 320px;
}
/* ============================================================
BANNER SELECTOR
============================================================ */
@@ -980,10 +884,6 @@ footer {
display: none;
}
.hero {
padding: 100px 24px 72px;
}
.section {
padding: 64px 24px;
}
@@ -1001,10 +901,6 @@ footer {
padding: 24px 28px 16px;
}
.brand-card-gap {
min-height: 400px;
}
.brand-card-footer {
padding: 16px 28px 32px;
}
@@ -1041,10 +937,6 @@ footer {
display: none;
}
.hero {
padding: 88px 20px 64px;
}
.section {
padding: 52px 20px;
}
@@ -1057,10 +949,6 @@ footer {
padding: 20px 24px 14px;
}
.brand-card-gap {
min-height: 240px;
}
.brand-card-footer {
padding: 14px 24px 28px;
}
@@ -1085,4 +973,13 @@ footer {
.brands-notice {
padding: 16px 24px;
}
.signup-grid {
grid-template-columns: 1fr;
}
.footer-bottom {
justify-content: center;
text-align: center;
}
}