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

product Hunt

Browse Source
This commit is contained in:
Timo Knuth
2026-06-01 20:18:48 +02:00
parent 9d80dc8875
commit d70a50f47a
7 changed files with 6785 additions and 662 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
greenlns-landing/components/Hero.tsx
View File

@@ -68,23 +68,38 @@ export default function Hero() {
{t.hero.desc}
</p>
<div className="hero-actions reveal delay-3">
<a href="#cta" className="btn-primary" id="hero-cta-primary">
<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
<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" />
<div className="hero-actions reveal delay-3">
<a href="#cta" className="btn-primary" id="hero-cta-primary">
<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
<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>
&nbsp;{t.hero.primary}
</a>
<a href="#features" className="btn-outline" id="hero-cta-secondary">
{t.hero.secondary}
</a>
</div>
{/* Segmentation widget */}
<div className="hero-seg reveal delay-4" role="group" aria-label={t.hero.segTitle}>
<p className="hero-seg-title">{t.hero.segTitle}</p>
<div className="hero-seg-options">
<a href="#features" className="btn-outline" id="hero-cta-secondary">
{t.hero.secondary}
</a>
</div>
<a
className="product-hunt-badge reveal delay-4"
href="https://www.producthunt.com/products/greenlens?embed=true&utm_source=badge-featured&utm_medium=badge&utm_campaign=badge-greenlens"
target="_blank"
rel="noopener noreferrer"
aria-label="GreenLens on Product Hunt"
>
<img
alt="GreenLens - Scan plants, understand care, and grow smarter | Product Hunt"
width="250"
height="54"
src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=1160891&theme=light&t=1780336122877"
/>
</a>
{/* Segmentation widget */}
<div className="hero-seg reveal delay-4" role="group" aria-label={t.hero.segTitle}>
<p className="hero-seg-title">{t.hero.segTitle}</p>
<div className="hero-seg-options">
<button
className={`hero-seg-btn${segChoice === 0 ? ' hero-seg-btn--active' : ''}`}
onClick={() => handleSeg(0)}
@@ -120,11 +135,20 @@ export default function Hero() {
</div>
</div>
<style jsx>{`
.hero-seg {
margin-top: 2rem;
background: rgba(244,241,232,0.06);
border: 1px solid rgba(244,241,232,0.12);
<style jsx>{`
.product-hunt-badge {
display: block;
width: fit-content;
margin-top: 1rem;
}
.product-hunt-badge img {
width: 250px;
height: 54px;
}
.hero-seg {
margin-top: 2rem;
background: rgba(244,241,232,0.06);
border: 1px solid rgba(244,241,232,0.12);
border-radius: 16px;
padding: 1.2rem 1.5rem;
max-width: 460px;
@@ -178,12 +202,18 @@ export default function Hero() {
display: inline-block;
transition: border-color 0.2s, background 0.2s;
}
.hero-seg-btn--active .hero-seg-radio {
border-color: var(--green-light);
background: var(--green-light);
box-shadow: 0 0 0 3px rgba(86,160,116,0.2);
}
`}</style>
.hero-seg-btn--active .hero-seg-radio {
border-color: var(--green-light);
background: var(--green-light);
box-shadow: 0 0 0 3px rgba(86,160,116,0.2);
}
@media (max-width: 1024px) {
.product-hunt-badge {
margin-left: auto;
margin-right: auto;
}
}
`}</style>
</section>
)
}