import Head from 'next/head'; import dynamic from 'next/dynamic'; import { Inter } from 'next/font/google'; // Import the HandDetector component with dynamic import to avoid SSR issues const HandDetector = dynamic(() => import('../components/HandDetector'), { ssr: false }); const inter = Inter({ subsets: ['latin'] }); const Header = () => { return ( <div className="sticky top-0 left-0 right-0 w-full bg-white p-4 z-50 shadow-sm"> <div className="w-full flex justify-between items-center text-base max-w-7xl mx-auto"> <div className="text-gray-500"> <span className="text-black font-bold text-lg mr-2">HandSpew</span> Built with <a href="https://ai.google.dev" target="_blank" rel="noopener noreferrer" className="underline hover:text-gray-800 transition-colors" > Gemini 2.0 </a> + <a href="https://ai.google.dev/edge/mediapipe/solutions/vision/hand_landmarker" target="_blank" rel="noopener noreferrer" className="underline hover:text-gray-800 transition-colors" > MediaPipe </a> </div> </div> </div> ); }; export default function Home() { return ( <> <Head> <title>HandSpew</title> <meta name="description" content="Generate thoughts based on hand gestures using MediaPipe and Gemini" /> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" /> <link rel="icon" href="/favicon.ico" /> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Google+Sans:wght@400;500;700&display=swap" /> </Head> <Header /> <main className="flex flex-col items-center p-4 bg-white font-['Google_Sans',sans-serif] pt-20 overflow-y-auto"> <HandDetector /> </main> </> ); }