tknuth/Greenlens
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Initial commit for Greenlens

Browse Source
This commit is contained in:
Timo Knuth
2026-03-16 21:31:46 +01:00
parent 307135671f
commit 05d4f6e78b
573 changed files with 54233 additions and 1891 deletions
Download Patch File Download Diff File Expand all files Collapse all files

286
landing/index.html Normal file
View File

@@ -0,0 +1,286 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>GreenLens – Dein Urban Jungle, perfekt gepflegt</title>
<meta name="description" content="GreenLens hilft dir, deine Pflanzen zu scannen, zu verstehen und optimal zu pflegen. Botanical Intelligence für deinen Urban Jungle." />
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<!-- ====== NAVBAR ====== -->
<nav class="navbar" id="navbar">
<div class="container">
<a href="#" class="nav-logo">GREENLENS</a>
<div class="nav-links">
<a href="#features">Features</a>
<a href="#intelligence">Technologie</a>
<a href="#cta">App laden</a>
<a href="#cta" class="nav-cta">Jetzt starten</a>
</div>
<button class="nav-hamburger" aria-label="Menü öffnen">
<span></span>
<span></span>
<span></span>
</button>
</div>
</nav>
<!-- ====== HERO ====== -->
<section class="hero" id="hero">
<div class="container">
<div class="hero-content">
<p class="section-label reveal">GreenLens App</p>
<h1 class="reveal reveal-delay-1">Dein Urban<br>Jungle,<br><em>perfekt gepflegt.</em></h1>
<p class="hero-description reveal reveal-delay-2">
Scanne deine Pflanzen, erfahre alles über sie und erhalte personalisierte Pflegetipps – powered by Botanical Intelligence.
</p>
<div class="hero-buttons reveal reveal-delay-3">
<a href="#cta" class="btn-primary">
<!-- Leaf icon -->
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.48 19 2c1 2 2 4.18 2 8 0 5.5-4.78 10-10 10z"/><path d="M2 21c0-3 1.85-5.36 5.08-6C9.5 14.52 12 13 13 12"/></svg>
App entdecken
</a>
<a href="#features" class="btn-secondary">
Mehr erfahren
</a>
</div>
</div>
<div class="hero-video-wrapper reveal reveal-delay-2">
<video autoplay loop muted playsinline>
<source src="../GreenLensHype.mp4" type="video/mp4" />
</video>
<div class="hero-video-overlay"></div>
</div>
</div>
</section>
<!-- ====== FEATURES GRID ====== -->
<section class="features" id="features">
<div class="container">
<div class="features-header reveal">
<p class="section-label">Features</p>
<h2>So funktioniert<br>GreenLens.</h2>
<p>Alles was du brauchst, um deine Pflanzen zu verstehen, zu pflegen und wachsen zu lassen.</p>
</div>
<div class="features-grid">
<!-- Scan it -->
<div class="feature-card reveal">
<div class="feature-card-bg" style="background: linear-gradient(145deg, #2d5a3d 0%, #1a2e1f 100%);"></div>
<div class="feature-card-overlay"></div>
<div class="feature-card-content">
<span class="feature-tag">Scan</span>
<h3>Scan it.</h3>
<p>Richte die Kamera auf eine Pflanze und erfahre sofort ihren Namen, ihre Art und alle wichtigen Infos.</p>
</div>
</div>
<!-- Track it -->
<div class="feature-card reveal reveal-delay-1">
<div class="feature-card-bg" style="background: linear-gradient(145deg, #4a8c5e 0%, #243828 100%);"></div>
<div class="feature-card-overlay"></div>
<div class="feature-card-content">
<span class="feature-tag">Track</span>
<h3>Track it.</h3>
<p>Behalte den Überblick: Gießplan, Lichtbedarf, Wachstum – alles in einer Timeline.</p>
</div>
</div>
</div>
<div class="features-small">
<!-- Care -->
<div class="feature-small-card reveal">
<div class="feature-icon">
<!-- Water drop icon -->
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#4a8c5e" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2.69l5.66 5.66a8 8 0 1 1-11.31 0z"/></svg>
</div>
<h3>Smarte Erinnerungen</h3>
<p>Vergiss nie mehr das Gießen. Personalisierte Erinnerungen für jede deiner Pflanzen.</p>
</div>
<!-- Diagnose -->
<div class="feature-small-card reveal reveal-delay-1">
<div class="feature-icon">
<!-- Microscope / health icon -->
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#4a8c5e" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 2v8"/><path d="m6 6 4 4"/><path d="M14 6l-4 4"/><rect x="4" y="14" width="16" height="6" rx="2"/><path d="M12 14v-4"/></svg>
</div>
<h3>Diagnose &amp; Hilfe</h3>
<p>Erkennt Krankheiten und Schädlinge und gibt dir sofort Pflegetipps.</p>
</div>
<!-- Plant Profile -->
<div class="feature-small-card reveal reveal-delay-2">
<div class="feature-icon">
<!-- Seedling icon -->
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#4a8c5e" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22V12"/><path d="M12 12C12 7 7 5 3 7c0 5 3 9 9 5z"/><path d="M12 12c0-5 5-7 9-5 0 5-3 9-9 5z"/></svg>
</div>
<h3>Pflanzen-Profil</h3>
<p>Speichere deine Sammlung mit Fotos, Notizen und Pflegehistorie.</p>
</div>
</div>
</div>
</section>
<!-- ====== BOTANICAL INTELLIGENCE ====== -->
<section class="intelligence" id="intelligence">
<div class="container">
<div class="intelligence-content reveal">
<p class="section-label">Technologie</p>
<h2>Botanical<br><em>Intelligence.</em></h2>
<p>
Unsere KI erkennt über 20.000 Pflanzenarten, analysiert Gesundheit und gibt dir personalisierte Tipps basierend auf Standort, Licht und Jahreszeit.
</p>
<div class="intelligence-features">
<div class="intelligence-feature">
<div class="intelligence-feature-icon">
<!-- Brain / AI icon -->
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#4a8c5e" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9.5 2a2.5 2.5 0 0 1 5 0v.5a2 2 0 0 0 1.5 1.94V6a2 2 0 0 0 2 2h.5a2.5 2.5 0 0 1 0 5H18a2 2 0 0 0-2 2v.56A2.5 2.5 0 0 1 14.5 22h-5A2.5 2.5 0 0 1 7 19.56V18a2 2 0 0 0-2-2h-.5a2.5 2.5 0 0 1 0-5H5a2 2 0 0 0 2-2V4.44A2 2 0 0 0 8.5 2.5z"/><circle cx="12" cy="12" r="2"/></svg>
</div>
<div>
<h4>KI-gestützte Erkennung</h4>
<p>Hochpräzise Identifikation in Sekundenbruchteilen.</p>
</div>
</div>
<div class="intelligence-feature">
<div class="intelligence-feature-icon">
<!-- Health / bar chart icon -->
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#4a8c5e" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36a.25.25 0 0 1-.48 0L9.24 2.18a.25.25 0 0 0-.48 0l-2.35 8.36A2 2 0 0 1 4.49 12H2"/></svg>
</div>
<div>
<h4>Gesundheits-Analyse</h4>
<p>Erkennt Mangelerscheinungen, Schädlinge und Krankheiten.</p>
</div>
</div>
<div class="intelligence-feature">
<div class="intelligence-feature-icon">
<!-- Location pin icon -->
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#4a8c5e" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z"/><circle cx="12" cy="10" r="3"/></svg>
</div>
<div>
<h4>Standort-basiert</h4>
<p>Tipps angepasst an dein Klima und deine Lichtverhältnisse.</p>
</div>
</div>
</div>
</div>
<div class="intelligence-visual reveal reveal-delay-2">
<div class="intelligence-mockup">
<div class="mockup-text">
Botanical<br><em>Intelligence.</em>
</div>
</div>
</div>
</div>
</section>
<!-- ====== CTA – Join the Jungle ====== -->
<section class="cta-section" id="cta">
<div class="container">
<div class="cta-card reveal">
<div class="cta-content">
<p class="section-label">Download</p>
<h2>Join the<br><em>Jungle.</em></h2>
<p>
Starte jetzt mit GreenLens und verwandle dein Zuhause in einen üppigen Urban Jungle. Kostenlos im App Store &amp; Google Play.
</p>
</div>
<div class="cta-actions">
<div class="store-buttons">
<a href="#" class="store-btn">
<!-- Apple icon -->
<svg class="store-btn-icon" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path d="M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.8-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z"/>
</svg>
<div class="store-btn-text">
<small>Laden im</small>
<strong>App Store</strong>
</div>
</a>
<a href="#" class="store-btn">
<!-- Google Play icon -->
<svg class="store-btn-icon" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path d="M3.18 23.76c.33.18.7.24 1.08.17L14.84 12 11.17 8.33 3.18 23.76zm17.16-12.38-3.32-1.89-3.78 3.78 3.78 3.78 3.34-1.9c.95-.54.95-1.92-.02-2.77zM2.01 1.11C1.7 1.44 1.5 1.97 1.5 2.67v18.66c0 .7.2 1.23.51 1.56l.08.08L12.16 12v-.22L2.09 1.03l-.08.08zm9.16 10.67 2.67 2.67-10.5 5.97 7.83-8.64z"/>
</svg>
<div class="store-btn-text">
<small>Jetzt bei</small>
<strong>Google Play</strong>
</div>
</a>
</div>
<a href="#hero" class="btn-primary" style="margin-top: 1rem;">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.48 19 2c1 2 2 4.18 2 8 0 5.5-4.78 10-10 10z"/><path d="M2 21c0-3 1.85-5.36 5.08-6C9.5 14.52 12 13 13 12"/></svg>
Jetzt starten – Kostenlos
</a>
</div>
</div>
</div>
</section>
<!-- ====== FOOTER ====== -->
<footer class="footer" id="footer">
<div class="container">
<div class="footer-top">
<div class="footer-brand">
<a href="#" class="nav-logo" style="font-size:1.6rem;">GREENLENS</a>
<p>Die intelligente App für alle Pflanzenliebhaber. Scanne, pflege und verstehe deine Pflanzen.</p>
</div>
<div class="footer-col">
<h4>Produkt</h4>
<a href="#features">Features</a>
<a href="#intelligence">Technologie</a>
<a href="#">Preise</a>
<a href="#">Roadmap</a>
</div>
<div class="footer-col">
<h4>Ressourcen</h4>
<a href="#">Blog</a>
<a href="#">Pflanzenlexikon</a>
<a href="#">FAQ</a>
<a href="#">Support</a>
</div>
<div class="footer-col">
<h4>Rechtliches</h4>
<a href="#">Impressum</a>
<a href="#">Datenschutz</a>
<a href="#">AGB</a>
</div>
</div>
<div class="footer-brand-large">GREENLENS</div>
<div class="footer-bottom">
<p>&copy; 2026 GreenLens. Alle Rechte vorbehalten.</p>
<div class="footer-socials">
<!-- Instagram -->
<a href="#" class="footer-social-link" aria-label="Instagram">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="20" height="20" x="2" y="2" rx="5" ry="5"/><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"/><line x1="17.5" x2="17.51" y1="6.5" y2="6.5"/></svg>
</a>
<!-- TikTok -->
<a href="#" class="footer-social-link" aria-label="TikTok">
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path d="M19.59 6.69a4.83 4.83 0 0 1-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 0 1-2.88 2.5 2.89 2.89 0 0 1-2.89-2.89 2.89 2.89 0 0 1 2.89-2.89c.28 0 .54.04.79.1V9.01a6.27 6.27 0 0 0-.79-.05 6.33 6.33 0 0 0-6.33 6.33 6.33 6.33 0 0 0 6.33 6.33 6.33 6.33 0 0 0 6.33-6.33V8.77a8.18 8.18 0 0 0 4.78 1.52V6.83a4.85 4.85 0 0 1-1.02-.14z"/>
</svg>
</a>
<!-- Twitter/X -->
<a href="#" class="footer-social-link" aria-label="Twitter">
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/>
</svg>
</a>
</div>
</div>
</div>
</footer>
<script src="script.js"></script>
</body>
</html>

88
landing/script.js Normal file
View File

@@ -0,0 +1,88 @@
/* ========================================
GreenLens Landing Page – Interactions
======================================== */
document.addEventListener('DOMContentLoaded', () => {
// --- Navbar scroll effect ---
const navbar = document.querySelector('.navbar');
const handleScroll = () => {
navbar.classList.toggle('scrolled', window.scrollY > 60);
};
window.addEventListener('scroll', handleScroll, { passive: true });
handleScroll();
// --- Mobile hamburger ---
const hamburger = document.querySelector('.nav-hamburger');
const navLinks = document.querySelector('.nav-links');
if (hamburger) {
hamburger.addEventListener('click', () => {
navLinks.classList.toggle('active');
});
// close on link click
navLinks.querySelectorAll('a').forEach(link => {
link.addEventListener('click', () => {
navLinks.classList.remove('active');
});
});
}
// --- Scroll reveal ---
const revealElements = document.querySelectorAll('.reveal');
const revealObserver = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('active');
revealObserver.unobserve(entry.target);
}
});
}, {
threshold: 0.15,
rootMargin: '0px 0px -50px 0px'
});
revealElements.forEach(el => revealObserver.observe(el));
// --- Counter animation ---
const counters = document.querySelectorAll('[data-count]');
const counterObserver = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const el = entry.target;
const target = parseFloat(el.dataset.count);
const suffix = el.dataset.suffix || '';
const isDecimal = target % 1 !== 0;
const duration = 1500;
const start = performance.now();
const step = (now) => {
const progress = Math.min((now - start) / duration, 1);
const eased = 1 - Math.pow(1 - progress, 3); // ease-out cubic
const current = eased * target;
el.textContent = (isDecimal ? current.toFixed(1) : Math.floor(current)) + suffix;
if (progress < 1) requestAnimationFrame(step);
};
requestAnimationFrame(step);
counterObserver.unobserve(el);
}
});
}, { threshold: 0.5 });
counters.forEach(el => counterObserver.observe(el));
// --- Smooth scroll for anchor links ---
document.querySelectorAll('a[href^="#"]').forEach(link => {
link.addEventListener('click', (e) => {
const target = document.querySelector(link.getAttribute('href'));
if (target) {
e.preventDefault();
target.scrollIntoView({ behavior: 'smooth', block: 'start' });
}
});
});
});

968
landing/styles.css Normal file
View File

@@ -0,0 +1,968 @@
/* ========================================
GreenLens Landing Page – Design System
======================================== */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;0,900;1,400;1,700;1,900&family=Inter:wght@300;400;500;600;700&display=swap');
/* --- CSS Variables --- */
:root {
--color-dark: #1a2e1f;
--color-dark-alt: #243828;
--color-green: #2d5a3d;
--color-green-light: #4a8c5e;
--color-accent: #e8734a;
--color-accent-hover: #d4623b;
--color-cream: #f5f2eb;
--color-white: #ffffff;
--color-text: #1a2e1f;
--color-text-light: rgba(245, 242, 235, 0.7);
--color-text-muted: #6b7c6f;
--font-display: 'Playfair Display', Georgia, serif;
--font-body: 'Inter', -apple-system, sans-serif;
--space-xs: 0.5rem;
--space-sm: 1rem;
--space-md: 2rem;
--space-lg: 4rem;
--space-xl: 6rem;
--space-2xl: 8rem;
--radius-sm: 8px;
--radius-md: 12px;
--radius-lg: 20px;
--radius-xl: 32px;
--transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
--transition-slow: 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
/* --- Reset & Base --- */
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
font-size: 16px;
}
body {
font-family: var(--font-body);
color: var(--color-text);
background: var(--color-cream);
line-height: 1.6;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
a {
text-decoration: none;
color: inherit;
transition: color var(--transition);
}
img,
video {
max-width: 100%;
display: block;
}
ul {
list-style: none;
}
/* --- Typography --- */
h1,
h2,
h3 {
font-family: var(--font-display);
font-weight: 900;
line-height: 1.05;
}
h1 {
font-size: clamp(3rem, 6vw, 5.5rem);
}
h2 {
font-size: clamp(2.2rem, 4vw, 4rem);
}
h3 {
font-size: clamp(1.5rem, 2.5vw, 2rem);
}
/* --- Utility --- */
.container {
width: 100%;
max-width: 1280px;
margin: 0 auto;
padding: 0 var(--space-md);
}
.section-label {
font-family: var(--font-body);
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--color-accent);
margin-bottom: var(--space-sm);
}
/* --- Animations --- */
.reveal {
opacity: 0;
transform: translateY(40px);
transition: opacity 0.8s ease, transform 0.8s ease;
}
.reveal.active {
opacity: 1;
transform: translateY(0);
}
.reveal-delay-1 {
transition-delay: 0.1s;
}
.reveal-delay-2 {
transition-delay: 0.2s;
}
.reveal-delay-3 {
transition-delay: 0.3s;
}
.reveal-delay-4 {
transition-delay: 0.4s;
}
/* ========================================
NAVBAR
======================================== */
.navbar {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 1000;
padding: var(--space-sm) 0;
transition: background var(--transition), box-shadow var(--transition), padding var(--transition);
}
.navbar.scrolled {
background: rgba(26, 46, 31, 0.95);
backdrop-filter: blur(20px);
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.15);
padding: 0.6rem 0;
}
.navbar .container {
display: flex;
justify-content: space-between;
align-items: center;
}
.nav-logo {
font-family: var(--font-display);
font-size: 1.4rem;
font-weight: 900;
color: var(--color-cream);
letter-spacing: 2px;
}
.nav-links {
display: flex;
gap: var(--space-md);
align-items: center;
}
.nav-links a {
font-size: 0.85rem;
font-weight: 500;
color: var(--color-text-light);
letter-spacing: 0.5px;
transition: color var(--transition);
}
.nav-links a:hover {
color: var(--color-cream);
}
.nav-cta {
background: var(--color-accent) !important;
color: var(--color-white) !important;
padding: 0.6rem 1.4rem;
border-radius: 100px;
font-weight: 600 !important;
transition: background var(--transition), transform var(--transition) !important;
}
.nav-cta:hover {
background: var(--color-accent-hover) !important;
transform: scale(1.05);
}
.nav-hamburger {
display: none;
flex-direction: column;
gap: 5px;
cursor: pointer;
background: none;
border: none;
padding: 4px;
}
.nav-hamburger span {
width: 24px;
height: 2px;
background: var(--color-cream);
transition: var(--transition);
}
/* ========================================
HERO SECTION
======================================== */
.hero {
min-height: 100vh;
background: var(--color-dark);
display: flex;
align-items: center;
position: relative;
overflow: hidden;
padding: var(--space-2xl) 0 var(--space-xl);
}
.hero .container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-lg);
align-items: center;
}
.hero-content {
z-index: 2;
}
.hero h1 {
color: var(--color-cream);
margin-bottom: var(--space-md);
}
.hero h1 em {
font-style: italic;
color: var(--color-green-light);
}
.hero-description {
font-size: 1.1rem;
color: var(--color-text-light);
max-width: 420px;
margin-bottom: var(--space-md);
line-height: 1.7;
}
.hero-buttons {
display: flex;
gap: var(--space-sm);
align-items: center;
}
.btn-primary {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: var(--color-accent);
color: var(--color-white);
padding: 1rem 2rem;
border-radius: 100px;
font-family: var(--font-body);
font-size: 0.95rem;
font-weight: 600;
border: none;
cursor: pointer;
transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
}
.btn-primary:hover {
background: var(--color-accent-hover);
transform: translateY(-2px);
box-shadow: 0 8px 30px rgba(232, 115, 74, 0.3);
}
.btn-secondary {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: transparent;
color: var(--color-cream);
padding: 1rem 2rem;
border-radius: 100px;
font-family: var(--font-body);
font-size: 0.95rem;
font-weight: 500;
border: 1px solid rgba(245, 242, 235, 0.3);
cursor: pointer;
transition: border-color var(--transition), background var(--transition);
}
.btn-secondary:hover {
border-color: var(--color-cream);
background: rgba(245, 242, 235, 0.08);
}
.hero-video-wrapper {
position: relative;
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4);
}
.hero-video-wrapper video {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: var(--radius-lg);
}
.hero-video-overlay {
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(26, 46, 31, 0.15), transparent);
border-radius: var(--radius-lg);
pointer-events: none;
}
.hero-stats {
display: flex;
gap: var(--space-lg);
margin-top: var(--space-lg);
}
.stat {
text-align: left;
}
.stat-number {
font-family: var(--font-display);
font-size: 2rem;
font-weight: 900;
color: var(--color-cream);
}
.stat-label {
font-size: 0.8rem;
color: var(--color-text-light);
margin-top: 2px;
}
/* ========================================
FEATURES GRID – "Scan it. / Track it."
======================================== */
.features {
padding: var(--space-2xl) 0;
background: var(--color-cream);
}
.features-header {
text-align: center;
max-width: 600px;
margin: 0 auto var(--space-xl);
}
.features-header h2 {
color: var(--color-dark);
}
.features-header p {
color: var(--color-text-muted);
font-size: 1.05rem;
margin-top: var(--space-sm);
}
.features-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-md);
}
.feature-card {
position: relative;
border-radius: var(--radius-lg);
overflow: hidden;
background: var(--color-dark);
min-height: 400px;
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: var(--space-md);
transition: transform var(--transition), box-shadow var(--transition);
}
.feature-card:hover {
transform: translateY(-8px);
box-shadow: 0 20px 60px rgba(26, 46, 31, 0.2);
}
.feature-card-bg {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
transition: transform var(--transition-slow);
}
.feature-card:hover .feature-card-bg {
transform: scale(1.05);
}
.feature-card-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(26, 46, 31, 0.9) 0%, rgba(26, 46, 31, 0.2) 60%);
}
.feature-card-content {
position: relative;
z-index: 2;
}
.feature-card h3 {
color: var(--color-cream);
margin-bottom: var(--space-xs);
}
.feature-card p {
color: var(--color-text-light);
font-size: 0.9rem;
line-height: 1.6;
}
.feature-tag {
display: inline-block;
background: var(--color-accent);
color: var(--color-white);
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
padding: 0.3rem 0.8rem;
border-radius: 100px;
margin-bottom: var(--space-sm);
}
/* Small feature cards row */
.features-small {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-md);
margin-top: var(--space-md);
}
.feature-small-card {
background: var(--color-white);
border-radius: var(--radius-md);
padding: var(--space-md);
transition: transform var(--transition), box-shadow var(--transition);
}
.feature-small-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 40px rgba(26, 46, 31, 0.1);
}
.feature-icon {
width: 48px;
height: 48px;
background: var(--color-dark);
border-radius: var(--radius-sm);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: var(--space-sm);
font-size: 1.3rem;
}
.feature-small-card h3 {
font-family: var(--font-body);
font-size: 1.1rem;
font-weight: 700;
margin-bottom: var(--space-xs);
color: var(--color-dark);
}
.feature-small-card p {
font-size: 0.85rem;
color: var(--color-text-muted);
line-height: 1.6;
}
/* ========================================
BOTANICAL INTELLIGENCE
======================================== */
.intelligence {
padding: var(--space-2xl) 0;
background: var(--color-white);
overflow: hidden;
}
.intelligence .container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-xl);
align-items: center;
}
.intelligence-content h2 em {
font-style: italic;
color: var(--color-green);
}
.intelligence-content h2 {
margin-bottom: var(--space-md);
}
.intelligence-content p {
font-size: 1.05rem;
color: var(--color-text-muted);
margin-bottom: var(--space-md);
line-height: 1.8;
}
.intelligence-features {
display: flex;
flex-direction: column;
gap: var(--space-sm);
}
.intelligence-feature {
display: flex;
align-items: flex-start;
gap: var(--space-sm);
padding: var(--space-sm);
border-radius: var(--radius-md);
transition: background var(--transition);
}
.intelligence-feature:hover {
background: var(--color-cream);
}
.intelligence-feature-icon {
width: 40px;
height: 40px;
min-width: 40px;
background: var(--color-dark);
border-radius: var(--radius-sm);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.1rem;
}
.intelligence-feature h4 {
font-family: var(--font-body);
font-weight: 700;
font-size: 0.95rem;
color: var(--color-dark);
}
.intelligence-feature p {
font-size: 0.85rem;
margin-bottom: 0;
margin-top: 2px;
}
.intelligence-visual {
position: relative;
}
.intelligence-mockup {
width: 100%;
max-width: 500px;
margin: 0 auto;
background: var(--color-dark);
border-radius: var(--radius-xl);
padding: var(--space-lg);
min-height: 500px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
}
.intelligence-mockup::before {
content: '';
position: absolute;
width: 300px;
height: 300px;
background: radial-gradient(circle, var(--color-green) 0%, transparent 70%);
opacity: 0.3;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
filter: blur(60px);
}
.mockup-text {
font-family: var(--font-display);
font-size: 2rem;
color: var(--color-cream);
text-align: center;
z-index: 1;
position: relative;
}
.mockup-text em {
color: var(--color-green-light);
font-style: italic;
}
/* ========================================
CTA – "Join the Jungle"
======================================== */
.cta-section {
padding: var(--space-2xl) 0;
background: var(--color-cream);
}
.cta-card {
background: var(--color-dark);
border-radius: var(--radius-xl);
padding: var(--space-xl);
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-lg);
align-items: center;
overflow: hidden;
position: relative;
}
.cta-card::before {
content: '';
position: absolute;
width: 400px;
height: 400px;
background: radial-gradient(circle, var(--color-green) 0%, transparent 70%);
opacity: 0.15;
top: -100px;
right: -100px;
filter: blur(80px);
}
.cta-content {
position: relative;
z-index: 2;
}
.cta-content h2 {
color: var(--color-cream);
margin-bottom: var(--space-sm);
}
.cta-content h2 em {
font-style: italic;
color: var(--color-green-light);
}
.cta-content p {
color: var(--color-text-light);
font-size: 1.05rem;
margin-bottom: var(--space-md);
line-height: 1.7;
max-width: 440px;
}
.cta-metrics {
display: flex;
gap: var(--space-md);
margin-top: var(--space-md);
}
.cta-metric {
text-align: left;
}
.cta-metric-number {
font-family: var(--font-display);
font-size: 1.6rem;
font-weight: 900;
color: var(--color-accent);
}
.cta-metric-label {
font-size: 0.75rem;
color: var(--color-text-light);
}
.cta-actions {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--space-md);
}
.store-buttons {
display: flex;
gap: var(--space-sm);
}
.store-btn {
display: inline-flex;
align-items: center;
gap: 0.6rem;
background: rgba(245, 242, 235, 0.1);
border: 1px solid rgba(245, 242, 235, 0.2);
color: var(--color-cream);
padding: 0.8rem 1.4rem;
border-radius: var(--radius-md);
font-size: 0.85rem;
font-weight: 500;
transition: background var(--transition), border-color var(--transition);
}
.store-btn:hover {
background: rgba(245, 242, 235, 0.15);
border-color: rgba(245, 242, 235, 0.4);
}
.store-btn-icon {
font-size: 1.4rem;
}
.store-btn-text small {
display: block;
font-size: 0.65rem;
opacity: 0.7;
}
.store-btn-text strong {
font-size: 0.9rem;
}
/* ========================================
FOOTER
======================================== */
.footer {
background: var(--color-dark);
padding: var(--space-xl) 0 var(--space-md);
color: var(--color-cream);
}
.footer-top {
display: grid;
grid-template-columns: 1fr repeat(3, auto);
gap: var(--space-xl);
padding-bottom: var(--space-lg);
border-bottom: 1px solid rgba(245, 242, 235, 0.1);
}
.footer-brand p {
color: var(--color-text-light);
font-size: 0.9rem;
margin-top: var(--space-sm);
max-width: 280px;
line-height: 1.7;
}
.footer-col h4 {
font-family: var(--font-body);
font-size: 0.8rem;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
color: var(--color-cream);
margin-bottom: var(--space-sm);
}
.footer-col a {
display: block;
color: var(--color-text-light);
font-size: 0.85rem;
padding: 0.25rem 0;
transition: color var(--transition);
}
.footer-col a:hover {
color: var(--color-cream);
}
.footer-brand-large {
font-family: var(--font-display);
font-size: clamp(4rem, 10vw, 10rem);
font-weight: 900;
color: rgba(245, 242, 235, 0.06);
text-align: center;
line-height: 1;
padding: var(--space-lg) 0 var(--space-md);
user-select: none;
letter-spacing: -2px;
}
.footer-bottom {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: var(--space-sm);
border-top: 1px solid rgba(245, 242, 235, 0.06);
}
.footer-bottom p {
font-size: 0.75rem;
color: var(--color-text-light);
}
.footer-socials {
display: flex;
gap: var(--space-sm);
}
.footer-social-link {
width: 36px;
height: 36px;
border-radius: 50%;
background: rgba(245, 242, 235, 0.08);
display: flex;
align-items: center;
justify-content: center;
font-size: 0.85rem;
color: var(--color-text-light);
transition: background var(--transition), color var(--transition);
}
.footer-social-link:hover {
background: var(--color-accent);
color: var(--color-white);
}
/* ========================================
RESPONSIVE
======================================== */
@media (max-width: 1024px) {
.hero .container {
grid-template-columns: 1fr;
text-align: center;
}
.hero-description {
margin: 0 auto var(--space-md);
}
.hero-buttons {
justify-content: center;
}
.hero-stats {
justify-content: center;
}
.hero-video-wrapper {
max-width: 500px;
margin: var(--space-md) auto 0;
}
.features-grid {
grid-template-columns: 1fr;
}
.features-small {
grid-template-columns: 1fr;
}
.intelligence .container {
grid-template-columns: 1fr;
}
.intelligence-visual {
order: -1;
}
.intelligence-mockup {
max-width: 350px;
min-height: 350px;
}
.cta-card {
grid-template-columns: 1fr;
text-align: center;
}
.cta-content p {
margin: 0 auto var(--space-md);
}
.cta-metrics {
justify-content: center;
}
.cta-actions {
align-items: center;
}
.footer-top {
grid-template-columns: 1fr 1fr;
gap: var(--space-md);
}
}
@media (max-width: 640px) {
.nav-links {
display: none;
}
.nav-hamburger {
display: flex;
}
.nav-links.active {
display: flex;
flex-direction: column;
position: absolute;
top: 100%;
left: 0;
right: 0;
background: rgba(26, 46, 31, 0.98);
backdrop-filter: blur(20px);
padding: var(--space-md);
gap: var(--space-sm);
}
h1 {
font-size: 2.5rem;
}
h2 {
font-size: 2rem;
}
.hero {
padding: var(--space-xl) 0 var(--space-lg);
}
.hero-stats {
flex-direction: column;
gap: var(--space-sm);
}
.store-buttons {
flex-direction: column;
}
.footer-top {
grid-template-columns: 1fr;
}
.feature-card {
min-height: 300px;
}
}