Initial commit for Greenlens

greenlns-landing/components/CTA.tsx

@@ -0,0 +1,74 @@
+'use client'
+
+import Image from 'next/image'
+import Link from 'next/link'
+import { useLang } from '@/context/LangContext'
+import { hasAndroidStoreUrl, hasIosStoreUrl, siteConfig } from '@/lib/site'
+
+export default function CTA() {
+  const { t } = useLang()
+
+  return (
+    <section className="cta-section" id="cta" aria-labelledby="cta-heading">
+      <div className="container">
+        <div className="cta-card">
+          <div className="cta-card-glow" aria-hidden="true" />
+
+          <div className="cta-content">
+            <p className="tag" style={{ color: 'var(--green-light)' }}>{t.cta.tag}</p>
+            <h2 id="cta-heading">
+              {t.cta.h2a}<br />
+              <em>{t.cta.h2em}</em>
+            </h2>
+            <p>{t.cta.desc}</p>
+
+            <div className="store-row">
+              <a
+                href={hasIosStoreUrl ? siteConfig.iosAppStoreUrl : '/support'}
+                className="store-btn"
+                id="cta-appstore"
+                aria-label="App Store or support"
+              >
+                <svg className="store-btn-icon" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+                  <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>
+                  <span className="store-btn-small">{hasIosStoreUrl ? t.cta.apple : t.cta.support}</span>
+                  <span className="store-btn-big">{hasIosStoreUrl ? 'App Store' : t.cta.supportLabel}</span>
+                </div>
+              </a>
+              <a
+                href={hasAndroidStoreUrl ? siteConfig.androidPlayStoreUrl : `mailto:${siteConfig.supportEmail}`}
+                className="store-btn"
+                id="cta-googleplay"
+                aria-label="Google Play or contact"
+              >
+                <svg className="store-btn-icon" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+                  <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>
+                  <span className="store-btn-small">{hasAndroidStoreUrl ? t.cta.google : t.cta.contact}</span>
+                  <span className="store-btn-big">{hasAndroidStoreUrl ? 'Google Play' : t.cta.email}</span>
+                </div>
+              </a>
+            </div>
+            <p className="cta-footnote">
+              {hasIosStoreUrl || hasAndroidStoreUrl ? t.cta.liveNote : t.cta.comingSoon} <Link href="/support">Support</Link>
+            </p>
+          </div>
+
+          <div className="cta-visual" aria-hidden="true">
+            <Image
+              src="/plant-collection.png"
+              alt=""
+              fill
+              sizes="(max-width: 768px) 100vw, 50vw"
+              style={{ objectFit: 'cover' }}
+            />
+            <div className="cta-visual-overlay" />
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}