feat: Introduce InstallSection component and refine existing UI for the marketing page, layout, and various components.

2026-02-08 16:50:30 +00:00
parent 80aaf16bba
commit 4ec9355510
10 changed files with 231 additions and 56 deletions
--- a/components/InstallSection.tsx
+++ b/components/InstallSection.tsx
@@ -0,0 +1,62 @@
+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;