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

Launch

Browse Source
This commit is contained in:
Timo Knuth
2026-03-29 10:26:38 -05:00
parent 05d4f6e78b
commit b1c99893a6
1628 changed files with 67782 additions and 60143 deletions
Download Patch File Download Diff File Expand all files Collapse all files

572
landing/index.html
View File

@@ -1,286 +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>
<!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>