75 lines
3.4 KiB
TypeScript
75 lines
3.4 KiB
TypeScript
'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>
|
|
)
|
|
}
|