63 lines
3.3 KiB
TypeScript
63 lines
3.3 KiB
TypeScript
import React, { useState } from 'react';
|
|
import { Smartphone, Apple } from 'lucide-react';
|
|
import WaitlistModal from './WaitlistModal';
|
|
|
|
const InstallSection: React.FC = () => {
|
|
const [isWaitlistOpen, setIsWaitlistOpen] = useState(false);
|
|
|
|
return (
|
|
<section id="install" className="py-20 bg-background-dark">
|
|
<div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div className="relative rounded-3xl overflow-hidden bg-surface-dark border border-gray-800 p-12 text-center shadow-2xl">
|
|
{/* Background Glow */}
|
|
<div className="absolute top-0 left-1/2 -translate-x-1/2 w-full h-full max-w-2xl bg-primary/5 blur-3xl rounded-full pointer-events-none"></div>
|
|
|
|
<div className="relative z-10">
|
|
<h2 className="text-3xl md:text-5xl font-display font-bold text-white mb-6">
|
|
Start Your Focus Journey
|
|
</h2>
|
|
<p className="text-lg md:text-xl text-gray-400 mb-10 max-w-2xl mx-auto">
|
|
Download Nemia on Android today or join the waitlist for iOS.
|
|
</p>
|
|
|
|
<div className="flex flex-col sm:flex-row justify-center gap-4">
|
|
<a
|
|
href="https://play.google.com/store/apps/details?id=app.nemia.android&pcampaignid=web_share"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="bg-primary text-gray-900 px-8 py-4 rounded-xl font-bold text-lg hover:brightness-110 transition-all shadow-glow flex items-center justify-center gap-3"
|
|
onClick={() => {
|
|
(window as { umami?: { track?: (eventName: string, data?: Record<string, unknown>) => void } })
|
|
.umami?.track?.('play_store_clicked', { location: 'install_section' });
|
|
}}
|
|
>
|
|
<Smartphone size={24} />
|
|
<span>Get on Google Play</span>
|
|
</a>
|
|
|
|
<button
|
|
onClick={() => {
|
|
(window as { umami?: { track?: (eventName: string, data?: Record<string, unknown>) => void } })
|
|
.umami?.track?.('waitlist_open_clicked', { location: 'install_section' });
|
|
setIsWaitlistOpen(true);
|
|
}}
|
|
className="bg-surface-accent border border-gray-700 text-white px-8 py-4 rounded-xl font-bold text-lg hover:bg-gray-800 transition-all flex items-center justify-center gap-3"
|
|
>
|
|
<Apple size={24} />
|
|
<span>Join iOS Waitlist</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<WaitlistModal
|
|
isOpen={isWaitlistOpen}
|
|
onClose={() => setIsWaitlistOpen(false)}
|
|
/>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export default InstallSection;
|