77 lines
3.3 KiB
TypeScript
77 lines
3.3 KiB
TypeScript
import { Container } from '../components/Container'
|
|
import { Crosshair } from '../components/Crosshair'
|
|
import { WaveBars } from '../components/WaveBars'
|
|
import { GlowButton } from '../components/GlowButton'
|
|
import { useI18n } from '../i18n'
|
|
import { useClientOS } from '../hooks/useClientOS'
|
|
|
|
export function CTA() {
|
|
const { t, locale } = useI18n()
|
|
const clientOS = useClientOS()
|
|
|
|
return (
|
|
<section className="relative py-28 md:py-36 overflow-hidden">
|
|
{/* Background radial glow */}
|
|
<div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-[600px] h-[500px] bg-brand-amber/[0.045] rounded-full blur-[140px] pointer-events-none" />
|
|
|
|
<Container className="relative text-center">
|
|
<Crosshair className="inline-block mb-8">
|
|
<WaveBars className="h-9 px-3" />
|
|
</Crosshair>
|
|
|
|
<h2
|
|
className="font-display text-display font-extrabold text-neutral-50 mb-6 max-w-3xl mx-auto tracking-tight break-keep"
|
|
style={{ wordBreak: 'keep-all', overflowWrap: 'break-word' }}
|
|
>
|
|
{t.cta.title1} <span className="text-brand-amber">{t.cta.title2}</span>
|
|
</h2>
|
|
|
|
<p
|
|
className="text-base md:text-lg text-neutral-400 max-w-xl mx-auto mb-8 leading-relaxed break-keep"
|
|
style={{ wordBreak: 'keep-all', overflowWrap: 'break-word' }}
|
|
>
|
|
{t.cta.subtitle1}
|
|
<br />
|
|
{t.cta.subtitle2}
|
|
</p>
|
|
|
|
{/* Hotkey Hint Box */}
|
|
<div className="inline-flex items-center gap-2 mb-10 px-4 py-2 rounded-xl bg-surface-800/80 border border-white/[0.08] shadow-inner">
|
|
<span className="font-mono text-nano text-neutral-400 uppercase tracking-widest">
|
|
Push-to-Talk:
|
|
</span>
|
|
<div className="flex items-center gap-1 font-mono text-xs font-semibold text-neutral-200">
|
|
<span className="px-2 py-0.5 rounded bg-surface-600 border border-white/[0.1]">Ctrl</span>
|
|
<span className="text-neutral-500">+</span>
|
|
<span className="px-2 py-0.5 rounded bg-surface-600 border border-white/[0.1]">Shift</span>
|
|
<span className="text-neutral-500">+</span>
|
|
<span className="px-2.5 py-0.5 rounded bg-brand-amber/20 border border-brand-amber/40 text-brand-amber">Space</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex flex-col items-center gap-3">
|
|
<GlowButton
|
|
href={clientOS.downloadUrl}
|
|
download={clientOS.downloadFilename || undefined}
|
|
variant="primary"
|
|
size="lg"
|
|
className="shadow-glow-md hover:shadow-glow-lg"
|
|
>
|
|
{locale === 'ko' ? clientOS.buttonLabelKo : clientOS.buttonLabelEn}
|
|
</GlowButton>
|
|
<div className="flex items-center gap-2 font-mono text-xs text-neutral-400">
|
|
<span>{locale === 'ko' ? clientOS.subtextKo : clientOS.subtextEn}</span>
|
|
<span>·</span>
|
|
<a href="#download" className="underline hover:text-brand-amber transition-colors">
|
|
{locale === 'ko' ? '다른 OS 다운로드' : 'Other Platforms'}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<p className="font-mono text-nano text-neutral-500 mt-8 uppercase tracking-widest">
|
|
{t.cta.systemReq} · 100% OPEN ARCHITECTURE
|
|
</p>
|
|
</Container>
|
|
</section>
|
|
)
|
|
}
|