Root Layout - Copy this React, Tailwind Component to your project
// app/layout.tsx import type { Metadata } from 'next' import { Inter } from 'next/font/google' import './globals.css' import AccessibilityControls from './components/AccessibilityControls' const inter = Inter({ subsets: ['latin'] }) export const metadata: Metadata = { title: 'Sign Language Identifier', description: 'Identify and learn sign language with ease', } export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( <html lang="en" className="bg gray 100"> <body className={`${inter.className} min h screen flex flex col`}> <div className="container mx auto px 4 py 8"> <header className="text center mb 8"> <h1 className="text 4xl font bold text blue 800 mb 4"> Sign Language Identifier </h1> <p className="text gray 600"> Bridging Communication Through Technology </p> </header> <main className="flex grow"> {children} </main> <AccessibilityControls /> </div> </body> </html> ) } // app/page.tsx 'use client' import { useState } from 'react' import VideoUploader from './components/VideoUploader' import SignLanguageIdentifier from './components/SignLanguageIdentifier' import ResultDisplay from './components/ResultDisplay' export default function Home() { const [videoFile, setVideoFile] = useState<File | null>(null) const [identificationResult, setIdentificationResult] = useState<string | null>(null) const handleVideoUpload = (file: File) => { setVideoFile(file) // Trigger sign language identification } return ( <div className="max w 4xl mx auto"> <VideoUploader onVideoUpload={handleVideoUpload} /> {videoFile && ( <SignLanguageIdentifier videoFile={videoFile} onIdentificationComplete={setIdentificationResult} /> )} {identificationResult && ( <ResultDisplay result={identificationResult} /> )} </div> ) } ```
