Spaces:

sameernotes
/

slimshadow-ocr

Running

App Files Files Community

sameernotes commited on Apr 24, 2025

Commit

bc865af

verified ·

1 Parent(s): 1a6c663

Upload index.html

Browse files

Files changed (1) hide show

index.html +247 -243

index.html CHANGED Viewed

@@ -59,7 +59,7 @@
         /* Video Styling */
         .video-container video {
             display: block; /* Remove extra space below video */
-            max-width: 100%; /* Ensure video scales down */
             height: auto; /* Maintain aspect ratio */
             border-radius: 8px; /* Match card rounding */
             border: 1px solid #e5e7eb; /* Subtle border */
@@ -70,277 +70,281 @@
         }
         /* Ensure nav link styling is consistent */
         .nav-link { transition: color 0.2s ease-in-out; }
     </style>
 </head>
 <body class="bg-gray-50 dark:bg-gray-900 min-h-screen flex flex-col text-gray-900 dark:text-gray-200">
-    <!-- Header -->
-    <header class="bg-white dark:bg-gray-800 shadow-sm sticky top-0 z-50">
-        <div class="container mx-auto px-4 py-3 flex items-center justify-between">
-            <div class="flex items-center">
-                <a href="index.html" class="text-2xl font-['Pacifico'] text-primary dark:text-blue-400 mr-8" data-lang-en="AI Text Tools" data-lang-hi="एआई टेक्स्ट उपकरण">AI Text Tools</a>
-                <!-- Navigation Bar -->
-                <nav id="mainNav" class="hidden md:flex space-x-6">
-                     <a href="index.html" class="nav-link text-primary dark:text-blue-400 font-medium" data-lang-en="Home" data-lang-hi="होम">Home</a>
-                     <a href="recognizer.html" class="nav-link hover:text-primary dark:hover:text-blue-400 text-gray-600 dark:text-gray-300" data-lang-en="Recognize" data-lang-hi="पहचानें">Recognize</a>
-                     <a href="examples.html" class="nav-link hover:text-primary dark:hover:text-blue-400 text-gray-600 dark:text-gray-300" data-lang-en="Examples" data-lang-hi="उदाहरण">Examples</a>
-                     <a href="technology.html" class="nav-link hover:text-primary dark:hover:text-blue-400 text-gray-600 dark:text-gray-300" data-lang-en="Technology" data-lang-hi="तकनीक">Technology</a>
-                     <a href="about.html" class="nav-link hover:text-primary dark:hover:text-blue-400 text-gray-600 dark:text-gray-300" data-lang-en="About" data-lang-hi="बारे में">About</a>
-                     <a href="contact.html" class="nav-link hover:text-primary dark:hover:text-blue-400 text-gray-600 dark:text-gray-300" data-lang-en="Contact" data-lang-hi="संपर्क">Contact</a>
-                     <a href="feedback.html" class="nav-link hover:text-primary dark:hover:text-blue-400 text-gray-600 dark:text-gray-300" data-lang-en="Feedback" data-lang-hi="प्रतिक्रिया">Feedback</a>
-                </nav>
-            </div>
-            <!-- Right side header items -->
-            <div class="flex items-center space-x-4">
-                <div class="items-center space-x-2 hidden md:flex"> <span class="text-sm text-gray-600 dark:text-gray-400">EN</span> <label class="custom-switch"><input type="checkbox" id="languageToggle" class="custom-switch-input"><span class="custom-switch-slider"></span></label> <span class="text-sm text-gray-600 dark:text-gray-400 hindi-font">हिंदी</span> </div>
-                <div class="items-center space-x-2 hidden md:flex"> <span class="text-sm text-gray-600 dark:text-gray-400"><i class="ri-sun-line"></i></span> <label class="custom-switch"><input type="checkbox" id="themeToggle" class="custom-switch-input"><span class="custom-switch-slider"></span></label> <span class="text-sm text-gray-600 dark:text-gray-400"><i class="ri-moon-line"></i></span> </div>
-                <button class="md:hidden w-10 h-10 flex items-center justify-center" aria-label="Toggle Menu"><i class="ri-menu-line text-gray-600 dark:text-gray-300 text-xl"></i></button>
-            </div>
         </div>
-    </header>
-    <!-- ===== Main Content Area ===== -->
-    <main class="flex-grow container mx-auto px-4 py-12">
-        <!-- Hero Section -->
-        <section class="text-center mb-16">
-            <h1 class="text-4xl md:text-5xl font-bold text-gray-800 dark:text-white mb-4 leading-tight" data-lang-en="Unlock Text Insights with AI" data-lang-hi="एआई के साथ टेक्स्ट अंतर्दृष्टि अनलॉक करें">
-                Unlock Text Insights with AI
-            </h1>
-            <p class="text-lg text-gray-600 dark:text-gray-400 max-w-3xl mx-auto mb-8" data-lang-en="Easily recognize Hindi text from images, translate languages, and predict gender from names using our powerful AI tools." data-lang-hi="हमारे शक्तिशाली एआई उपकरणों का उपयोग करके आसानी से छवियों से हिंदी पाठ पहचानें, भाषाओं का अनुवाद करें, और नामों से लिंग की भविष्यवाणी करें।">
-                Easily recognize Hindi text from images, translate languages, and predict gender from names using our powerful AI tools.
-            </p>
-            <a href="recognizer.html" class="inline-flex items-center justify-center gap-2 px-8 py-3 border border-transparent text-base font-medium rounded-button text-white bg-primary hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary dark:focus:ring-offset-gray-800 transition">
-                <i class="ri-camera-lens-line"></i>
-                <span data-lang-en="Get Started with OCR" data-lang-hi="ओसीआर के साथ आरंभ करें">Get Started with OCR</span>
-            </a>
-        </section>
-        <!-- How to Use Section -->
-        <section class="mb-16">
-            <div class="max-w-3xl mx-auto bg-white dark:bg-gray-800 p-8 rounded-xl shadow-lg border border-gray-100 dark:border-gray-700 card">
-                <h2 class="text-2xl font-semibold text-center text-gray-800 dark:text-white mb-6" data-lang-en="How to Recognize Hindi Text" data-lang-hi="हिंदी पाठ कैसे पहचानें">
-                    How to Recognize Hindi Text
-                </h2>
-                <ol class="space-y-4">
-                    <li class="step-item">
-                        <span class="step-icon">1</span>
-                        <div class="step-content">
-                            <strong data-lang-en="Login/Sign Up:" data-lang-hi="लॉग इन / साइन अप करें:">Login/Sign Up:</strong>
-                            <span data-lang-en=" Access the application by logging in or creating a new account." data-lang-hi=" लॉग इन करके या नया खाता बनाकर एप्लिकेशन तक पहुंचें।"> Access the application by logging in or creating a new account.</span>
-                        </div>
-                    </li>
-                    <li class="step-item">
-                        <span class="step-icon">2</span>
-                        <div class="step-content">
-                            <strong data-lang-en="Go to Recognize:" data-lang-hi="पहचानें पर जाएं:">Go to Recognize:</strong>
-                            <span data-lang-en=" Navigate to the 'Recognize' or 'Hindi OCR' tab/page." data-lang-hi=" 'पहचानें' या 'हिंदी ओसीआर' टैब/पेज पर नेविगेट करें।"> Navigate to the 'Recognize' or 'Hindi OCR' tab/page.</span>
-                        </div>
-                    </li>
-                    <li class="step-item">
-                        <span class="step-icon">3</span>
-                        <div class="step-content">
-                            <strong data-lang-en="Upload or Select:" data-lang-hi="अपलोड करें या चुनें:">Upload or Select:</strong>
-                            <span data-lang-en=" Choose 'Choose File' to upload your Hindi word image (PNG, JPG) or click on one of the provided examples." data-lang-hi=" अपनी हिंदी शब्द छवि (PNG, JPG) अपलोड करने के लिए 'फ़ाइल चुनें' चुनें या दिए गए उदाहरणों में से किसी एक पर क्लिक करें।"> Choose 'Choose File' to upload your Hindi word image (PNG, JPG) or click on one of the provided examples.</span>
-                        </div>
-                    </li>
-                    <li class="step-item">
-                        <span class="step-icon">4</span>
-                        <div class="step-content">
-                             <strong data-lang-en="Recognize Image:" data-lang-hi="छवि पहचानें:">Recognize Image:</strong>
-                             <span data-lang-en=" Click the 'Recognize' button to start the analysis." data-lang-hi=" विश्लेषण शुरू करने के लिए 'पहचानें' बटन पर क्लिक करें।"> Click the 'Recognize' button to start the analysis.</span>
-                        </div>
-                    </li>
-                     <li class="step-item">
-                        <span class="step-icon">5</span>
-                        <div class="step-content">
-                             <strong data-lang-en="View Results:" data-lang-hi="परिणाम देखें:">View Results:</strong>
-                             <span data-lang-en=" The recognized Hindi text and word detection preview will appear in the results area." data-lang-hi=" पहचाना गया हिंदी पाठ और शब्द पहचान पूर्वावलोकन परिणाम क्षेत्र में दिखाई देगा।"> The recognized Hindi text and word detection preview will appear in the results area.</span>
-                        </div>
-                    </li>
-                </ol>
-            </div>
-        </section>
-         <!-- Other Features Section -->
-        <section class="mb-16">
-            <h2 class="text-3xl font-bold text-center text-gray-800 dark:text-white mb-10" data-lang-en="Explore More Tools" data-lang-hi="और उपकरण एक्सप्लोर करें">
-                Explore More Tools
             </h2>
-            <div class="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-4xl mx-auto">
-                <!-- Translation Feature Card -->
-                <div class="bg-white dark:bg-gray-800 p-6 rounded-xl shadow-lg border border-gray-100 dark:border-gray-700 card text-center md:text-left">
-                    <div class="flex justify-center md:justify-start mb-4">
-                         <i class="ri-translate-2 text-4xl text-primary dark:text-blue-400"></i>
-                    </div>
-                    <h3 class="text-xl font-semibold mb-2" data-lang-en="Text Translation" data-lang-hi="पाठ अनुवाद">Text Translation</h3>
-                    <p class="text-gray-600 dark:text-gray-400 mb-4" data-lang-en="Translate text between various languages. Supports auto-detection of source language." data-lang-hi="विभिन्न भाषाओं के बीच पाठ का अनुवाद करें। स्रोत भाषा का स्वतः पता लगाने का समर्थन करता है।">
-                        Translate text between various languages. Supports auto-detection of source language.
                     </p>
-                    <a href="recognizer.html#translationContent" class="text-primary dark:text-blue-400 hover:underline font-medium inline-flex items-center gap-1" data-lang-en="Go to Translator" data-lang-hi="अनुवादक पर जाएँ">
-                        Go to Translator <i class="ri-arrow-right-line"></i>
-                    </a>
                 </div>
-                <!-- Gender Prediction Feature Card -->
-                <div class="bg-white dark:bg-gray-800 p-6 rounded-xl shadow-lg border border-gray-100 dark:border-gray-700 card text-center md:text-left">
-                     <div class="flex justify-center md:justify-start mb-4">
-                         <i class="ri-men-line text-4xl text-primary dark:text-blue-400"></i><i class="ri-women-line text-4xl text-primary dark:text-blue-400 -ml-2"></i>
-                     </div>
-                    <h3 class="text-xl font-semibold mb-2" data-lang-en="Gender Prediction" data-lang-hi="लिंग भविष्यवाणी">Gender Prediction</h3>
-                    <p class="text-gray-600 dark:text-gray-400 mb-4" data-lang-en="Predict the likely gender associated with one or more names." data-lang-hi="���क या अधिक नामों से जुड़े संभावित लिंग की भविष्यवाणी करें।">
-                        Predict the likely gender associated with one or more names.
-                    </p>
-                     <a href="recognizer.html#genderContent" class="text-primary dark:text-blue-400 hover:underline font-medium inline-flex items-center gap-1" data-lang-en="Go to Predictor" data-lang-hi="भविष्यवक्ता पर जाएँ">
-                        Go to Predictor <i class="ri-arrow-right-line"></i>
-                    </a>
                 </div>
             </div>
-        </section>
-        <!-- Tutorial Video Section -->
-        <section class="mb-12">
-             <div class="max-w-3xl mx-auto bg-white dark:bg-gray-800 p-8 rounded-xl shadow-lg border border-gray-100 dark:border-gray-700 card">
-                <h2 class="text-2xl font-semibold text-center text-gray-800 dark:text-white mb-4" data-lang-en="Watch the Tutorial" data-lang-hi="ट्यूटोरियल देखें">
-                    Watch the Tutorial
-                </h2>
-                <p class="text-center text-gray-600 dark:text-gray-400 mb-6" data-lang-en="See the AI Text Tools in action with this step-by-step video guide." data-lang-hi="इस चरण-दर-चरण वीडियो गाइड के साथ एआई टेक्स्ट टूल को क्रियान्वित देखें।">
-                    See the AI Text Tools in action with this step-by-step video guide.
-                </p>
-                <!-- Video Player Container -->
-                <div class="video-container">
-                    <video class="w-full" controls>
-                        <!-- Ensure the path '/sample/tutorial.mp4' is correct relative to your web server's root -->
-                        <!-- Or use a relative path like 'sample/tutorial.mp4' if the folder is next to home.html -->
-                        <source src="/samples/turotial.mp4" type="video/mp4">
-                        <!-- Optional: Add sources for other formats like WebM or Ogg for wider compatibility -->
-                        <!-- <source src="/sample/tutorial.webm" type="video/webm"> -->
-                        <!-- <source src="/sample/tutorial.ogg" type="video/ogg"> -->
-                        <!-- Fallback text for browsers that don't support the video tag -->
-                        <span data-lang-en="Your browser does not support the video tag. Please update your browser or use a different one to watch the tutorial." data-lang-hi="आपका ब्राउज़र वीडियो टैग का समर्थन नहीं करता है। कृपया ट्यूटोरियल देखने के लिए अपना ब्राउज़र अपडेट करें या किसी भिन्न ब्राउज़र का उपयोग करें।">
-                            Your browser does not support the video tag. Please update your browser or use a different one to watch the tutorial.
-                        </span>
-                    </video>
                 </div>
-                <!-- End Video Player Container -->
             </div>
-        </section>
-    </main>
-    <!-- Footer -->
-    <footer class="bg-gray-900 text-gray-400 py-12 mt-16">
-         <div class="container mx-auto px-4">
-             <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
-                 <div>
-                     <a href="index.html" class="text-2xl font-['Pacifico'] text-white mb-4 inline-block" data-lang-en="AI Text Tools" data-lang-hi="एआई टेक्स्ट उपकरण">AI Text Tools</a>
-                     <p class="mb-4 text-sm" data-lang-en="AI-powered tools for text analysis and processing." data-lang-hi="पाठ विश्लेषण और प्रसंस्करण के लिए एआई-संचालित उपकरण।">AI-powered tools for text analysis.</p>
-                     <div class="flex space-x-4">
-                         <a href="#" class="hover:text-white" title="GitHub (Placeholder)"><i class="ri-github-fill"></i></a>
-                         <a href="#" class="hover:text-white" title="LinkedIn (Placeholder)"><i class="ri-linkedin-box-fill"></i></a>
-                     </div>
-                 </div>
-                 <div>
-                     <h3 class="text-lg font-medium text-white mb-4" data-lang-en="Quick Links" data-lang-hi="त्वरित लिंक्स">Quick Links</h3>
-                     <ul class="space-y-2 text-sm">
-                         <li><a href="home.html" class="hover:text-white" data-lang-en="Home" data-lang-hi="होम">Home</a></li>
-                         <li><a href="index.html" class="hover:text-white" data-lang-en="Tools" data-lang-hi="उपकरण">Tools</a></li>
-                         <li><a href="about.html" class="hover:text-white" data-lang-en="About" data-lang-hi="बारे में">About</a></li>
-                         <li><a href="contact.html" class="hover:text-white" data-lang-en="Contact" data-lang-hi="संपर्क">Contact</a></li>
-                         <li><a href="feedback.html" class="hover:text-white" data-lang-en="Feedback" data-lang-hi="प्रतिक्रिया">Feedback</a></li>
-                     </ul>
                  </div>
-                 <div>
-                     <h3 class="text-lg font-medium text-white mb-4" data-lang-en="Resources" data-lang-hi="संसाधन">Resources</h3>
-                     <ul class="space-y-2 text-sm">
-                         <li><a href="#" class="hover:text-white" data-lang-en="API Docs (TBD)" data-lang-hi="एपीआई डॉक्स (TBD)">API Docs (TBD)</a></li>
-                         <li><a href="#" class="hover:text-white" data-lang-en="GitHub Repo" data-lang-hi="गिटहब रेपो">GitHub Repo</a></li>
-                     </ul>
-                 </div>
-                 <div>
-                     <h3 class="text-lg font-medium text-white mb-4" data-lang-en="Contact" data-lang-hi="संपर्क">Contact</h3>
-                     <ul class="space-y-2 text-sm">
-                         <li class="flex items-start"><i class="ri-mail-line mt-1 mr-2"></i><span>your-email@example.com</span></li>
-                     </ul>
                  </div>
              </div>
-             <div class="border-t border-gray-700 mt-8 pt-8 text-center">
-                  <p class="text-sm">© 2024 Your Name/Org | AI Text Tools Project</p>
              </div>
          </div>
-    </footer>
-    <!-- Base Theme/Language Script -->
-    <script>
-        const themeToggle = document.getElementById('themeToggle');
-        const htmlElement = document.documentElement;
-        function applyTheme(isDark) { if (isDark) { htmlElement.classList.add('dark'); if(themeToggle) themeToggle.checked = true; } else { htmlElement.classList.remove('dark'); if(themeToggle) themeToggle.checked = false; } }
-        const languageToggle = document.getElementById('languageToggle');
-        const langElements = document.querySelectorAll('[data-lang-en]');
-        const placeholderElements = document.querySelectorAll('[data-lang-en-placeholder]');
-        function applyLanguage(lang) {
-            htmlElement.setAttribute('lang', lang);
-            langElements.forEach(el => {
-                const text = el.getAttribute(`data-lang-${lang}`);
-                if (text !== null) { // Check if attribute exists
-                    const icon = el.querySelector('i');
-                    if (icon && el.childNodes.length > 1) {
-                        let updated = false;
-                        el.childNodes.forEach(node => {
-                            if (node.nodeType === Node.TEXT_NODE && node.textContent.trim() !== '') {
-                                node.textContent = ` ${text} `;
-                                updated = true;
-                            }
-                        });
-                        if (!updated) {
-                           const currentText = el.getAttribute(`data-lang-${lang === 'en' ? 'hi' : 'en'}`);
-                           if (currentText) el.innerHTML = el.innerHTML.replace(currentText.trim(), text);
                         }
-                    } else {
-                         el.textContent = text;
                     }
-                 }
-             });
-            placeholderElements.forEach(el => {
-                const placeholderText = el.getAttribute(`data-lang-${lang}-placeholder`);
-                 if (placeholderText !== null) {
-                     el.placeholder = placeholderText;
-                 }
-             });
-             if (languageToggle) languageToggle.checked = (lang === 'hi');
-             localStorage.setItem('language', lang);
-         }
-         function initializeSettings() {
-             const savedLang = localStorage.getItem('language') || 'en';
-             const prefersDark = localStorage.getItem('theme') === 'dark' || (localStorage.getItem('theme') === null && window.matchMedia('(prefers-color-scheme: dark)').matches);
-             applyTheme(prefersDark);
-             applyLanguage(savedLang);
-             if (languageToggle) {
-                 languageToggle.addEventListener('change', (event) => {
-                     const newLang = event.target.checked ? 'hi' : 'en';
-                     applyLanguage(newLang);
-                 });
-             } else { console.warn("Language toggle button not found."); }
-             if (themeToggle) {
-                 themeToggle.addEventListener('change', (event) => {
-                     const isDark = event.target.checked;
-                     applyTheme(isDark);
-                     localStorage.setItem('theme', isDark ? 'dark' : 'light');
-                 });
-             } else { console.warn("Theme toggle button not found."); }
-         }
-         // Initialize theme and language settings when the DOM is fully loaded
-         document.addEventListener('DOMContentLoaded', () => {
-             initializeSettings();
-             console.log("Home page DOM Loaded and Initialized.");
-         });
-    </script>
 </body>
 </html>

         /* Video Styling */
         .video-container video {
             display: block; /* Remove extra space below video */
+            width: 100%; /* Ensure video scales down */
             height: auto; /* Maintain aspect ratio */
             border-radius: 8px; /* Match card rounding */
             border: 1px solid #e5e7eb; /* Subtle border */
         }
         /* Ensure nav link styling is consistent */
         .nav-link { transition: color 0.2s ease-in-out; }
+        /* Make the tutorial section responsive */
+        @media (max-width: 767px) {
+            .tutorial-container {
+                flex-direction: column;
+            }
+        }
     </style>
 </head>
 <body class="bg-gray-50 dark:bg-gray-900 min-h-screen flex flex-col text-gray-900 dark:text-gray-200">
+<!-- Header -->
+<header class="bg-white dark:bg-gray-800 shadow-sm sticky top-0 z-50">
+    <div class="container mx-auto px-4 py-3 flex items-center justify-between">
+        <div class="flex items-center">
+            <a href="index.html" class="text-2xl font-['Pacifico'] text-primary dark:text-blue-400 mr-8" data-lang-en="AI Text Tools" data-lang-hi="एआई टेक्स्ट उपकरण">AI Text Tools</a>
+            <!-- Navigation Bar -->
+            <nav id="mainNav" class="hidden md:flex space-x-6">
+                 <a href="index.html" class="nav-link text-primary dark:text-blue-400 font-medium" data-lang-en="Home" data-lang-hi="होम">Home</a>
+                 <a href="recognizer.html" class="nav-link hover:text-primary dark:hover:text-blue-400 text-gray-600 dark:text-gray-300" data-lang-en="Recognize" data-lang-hi="पहचानें">Recognize</a>
+                 <a href="examples.html" class="nav-link hover:text-primary dark:hover:text-blue-400 text-gray-600 dark:text-gray-300" data-lang-en="Examples" data-lang-hi="उदाहरण">Examples</a>
+                 <a href="technology.html" class="nav-link hover:text-primary dark:hover:text-blue-400 text-gray-600 dark:text-gray-300" data-lang-en="Technology" data-lang-hi="तकनीक">Technology</a>
+                 <a href="about.html" class="nav-link hover:text-primary dark:hover:text-blue-400 text-gray-600 dark:text-gray-300" data-lang-en="About" data-lang-hi="बारे में">About</a>
+                 <a href="contact.html" class="nav-link hover:text-primary dark:hover:text-blue-400 text-gray-600 dark:text-gray-300" data-lang-en="Contact" data-lang-hi="संपर्क">Contact</a>
+                 <a href="feedback.html" class="nav-link hover:text-primary dark:hover:text-blue-400 text-gray-600 dark:text-gray-300" data-lang-en="Feedback" data-lang-hi="प्रतिक्रिया">Feedback</a>
+            </nav>
         </div>
+        <!-- Right side header items -->
+        <div class="flex items-center space-x-4">
+            <div class="items-center space-x-2 hidden md:flex"> <span class="text-sm text-gray-600 dark:text-gray-400">EN</span> <label class="custom-switch"><input type="checkbox" id="languageToggle" class="custom-switch-input"><span class="custom-switch-slider"></span></label> <span class="text-sm text-gray-600 dark:text-gray-400 hindi-font">हिंदी</span> </div>
+            <div class="items-center space-x-2 hidden md:flex"> <span class="text-sm text-gray-600 dark:text-gray-400"><i class="ri-sun-line"></i></span> <label class="custom-switch"><input type="checkbox" id="themeToggle" class="custom-switch-input"><span class="custom-switch-slider"></span></label> <span class="text-sm text-gray-600 dark:text-gray-400"><i class="ri-moon-line"></i></span> </div>
+            <button class="md:hidden w-10 h-10 flex items-center justify-center" aria-label="Toggle Menu"><i class="ri-menu-line text-gray-600 dark:text-gray-300 text-xl"></i></button>
+        </div>
+    </div>
+</header>
+<!-- ===== Main Content Area ===== -->
+<main class="flex-grow container mx-auto px-4 py-12">
+    <!-- Hero Section -->
+    <section class="text-center mb-16">
+        <h1 class="text-4xl md:text-5xl font-bold text-gray-800 dark:text-white mb-4 leading-tight" data-lang-en="Unlock Text Insights with AI" data-lang-hi="एआई के साथ टेक्स्ट अंतर्दृष्टि अनलॉक करें">
+            Unlock Text Insights with AI
+        </h1>
+        <p class="text-lg text-gray-600 dark:text-gray-400 max-w-3xl mx-auto mb-8" data-lang-en="Easily recognize Hindi text from images, translate languages, and predict gender from names using our powerful AI tools." data-lang-hi="हमारे शक्तिशाली एआई उपकरणों का उपयोग करके आसानी से छवियों से हिंदी पाठ पहचानें, भाषाओं का अनुवाद करें, और नामों से लिंग की भविष्यवाणी करें।">
+            Easily recognize Hindi text from images, translate languages, and predict gender from names using our powerful AI tools.
+        </p>
+        <a href="recognizer.html" class="inline-flex items-center justify-center gap-2 px-8 py-3 border border-transparent text-base font-medium rounded-button text-white bg-primary hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary dark:focus:ring-offset-gray-800 transition">
+            <i class="ri-camera-lens-line"></i>
+            <span data-lang-en="Get Started with OCR" data-lang-hi="ओसीआर के साथ आरंभ करें">Get Started with OCR</span>
+        </a>
+    </section>
+    <!-- Video & Tutorial Section - Side by Side Layout -->
+    <section class="mb-16">
+        <div class="max-w-6xl mx-auto">
+            <h2 class="text-2xl font-semibold text-center text-gray-800 dark:text-white mb-6" data-lang-en="How to Recognize Hindi Text" data-lang-hi="हिंदी पाठ कैसे पहचानें">
+                How to Recognize Hindi Text
             </h2>
+            <!-- Two-column layout for desktop, stacked for mobile -->
+            <div class="tutorial-container flex flex-col md:flex-row gap-8">
+                <!-- LEFT SIDE: Video Container -->
+                <div class="w-full md:w-1/2 bg-white dark:bg-gray-800 p-6 rounded-xl shadow-lg border border-gray-100 dark:border-gray-700 card">
+                    <h3 class="text-xl font-semibold text-center text-gray-800 dark:text-white mb-4" data-lang-en="Watch the Tutorial" data-lang-hi="ट्यूटोरियल देखें">
+                        Watch the Tutorial
+                    </h3>
+                    <p class="text-center text-gray-600 dark:text-gray-400 mb-6" data-lang-en="See the AI Text Tools in action with this step-by-step video guide." data-lang-hi="इस चरण-दर-चरण वीडियो गाइड के साथ एआई टेक्स्ट टूल को क्रियान्वित देखें।">
+                        See the AI Text Tools in action with this step-by-step video guide.
                     </p>
+                    <div class="video-container">
+                        <video class="w-full" controls>
+                            <source src="/samples/turotial.mp4" type="video/mp4">
+                            <span data-lang-en="Your browser does not support the video tag. Please update your browser or use a different one to watch the tutorial." data-lang-hi="आपका ब्राउज़र वीडियो टैग का समर्थन नहीं करता है। कृपया ट्यूटोरियल देखने के लिए अपना ब्राउज़र अपडेट करें या किसी भिन्न ब्राउज़र का उपयोग करें।">
+                                Your browser does not support the video tag. Please update your browser or use a different one to watch the tutorial.
+                            </span>
+                        </video>
+                    </div>
                 </div>
+                <!-- RIGHT SIDE: Tutorial Steps -->
+                <div class="w-full md:w-1/2 bg-white dark:bg-gray-800 p-6 rounded-xl shadow-lg border border-gray-100 dark:border-gray-700 card">
+                    <h3 class="text-xl font-semibold text-center text-gray-800 dark:text-white mb-4" data-lang-en="Step-by-Step Guide" data-lang-hi="चरण-दर-चरण मार्गदर्शिका">
+                        Step-by-Step Guide
+                    </h3>
+                    <ol class="space-y-4">
+                        <li class="step-item">
+                            <span class="step-icon">1</span>
+                            <div class="step-content">
+                                <strong data-lang-en="Login/Sign Up:" data-lang-hi="लॉग इन / साइन अप करें:">Login/Sign Up:</strong>
+                                <span data-lang-en=" Access the application by logging in or creating a new account." data-lang-hi=" लॉग इन करके या नया खाता बनाकर एप्लिकेशन तक पहुंचें।"> Access the application by logging in or creating a new account.</span>
+                            </div>
+                        </li>
+                        <li class="step-item">
+                            <span class="step-icon">2</span>
+                            <div class="step-content">
+                                <strong data-lang-en="Go to Recognize:" data-lang-hi="पहचानें पर जाएं:">Go to Recognize:</strong>
+                                <span data-lang-en=" Navigate to the 'Recognize' or 'Hindi OCR' tab/page." data-lang-hi=" 'पहचानें' या 'हिंदी ओसीआर' टैब/पेज पर नेविगेट करें।"> Navigate to the 'Recognize' or 'Hindi OCR' tab/page.</span>
+                            </div>
+                        </li>
+                        <li class="step-item">
+                            <span class="step-icon">3</span>
+                            <div class="step-content">
+                                <strong data-lang-en="Upload or Select:" data-lang-hi="अपलोड करें या चुनें:">Upload or Select:</strong>
+                                <span data-lang-en=" Choose 'Choose File' to upload your Hindi word image (PNG, JPG) or click on one of the provided examples." data-lang-hi=" अपनी हिंदी शब्द छवि (PNG, JPG) अपलोड करने के लिए 'फ़ाइल चुनें' चुनें या दिए गए उदाहरणों में से किसी एक पर क्लिक करें।"> Choose 'Choose File' to upload your Hindi word image (PNG, JPG) or click on one of the provided examples.</span>
+                            </div>
+                        </li>
+                        <li class="step-item">
+                            <span class="step-icon">4</span>
+                            <div class="step-content">
+                                <strong data-lang-en="Recognize Image:" data-lang-hi="छवि पहचानें:">Recognize Image:</strong>
+                                <span data-lang-en=" Click the 'Recognize' button to start the analysis." data-lang-hi=" विश्लेषण शुरू करने के लिए 'पहचानें' बटन पर क्लिक करें।"> Click the 'Recognize' button to start the analysis.</span>
+                            </div>
+                        </li>
+                        <li class="step-item">
+                            <span class="step-icon">5</span>
+                            <div class="step-content">
+                                <strong data-lang-en="View Results:" data-lang-hi="परिणाम देखें:">View Results:</strong>
+                                <span data-lang-en=" The recognized Hindi text and word detection preview will appear in the results area." data-lang-hi=" पहचाना गया हिंदी पाठ और शब्द पहचान पूर्वावलोकन परिणाम क्षेत्र में दिखाई देगा।"> The recognized Hindi text and word detection preview will appear in the results area.</span>
+                            </div>
+                        </li>
+                    </ol>
                 </div>
             </div>
+        </div>
+    </section>
+    <!-- Other Features Section -->
+    <section class="mb-16">
+        <h2 class="text-3xl font-bold text-center text-gray-800 dark:text-white mb-10" data-lang-en="Explore More Tools" data-lang-hi="और उपकरण एक्सप्लोर करें">
+            Explore More Tools
+        </h2>
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-4xl mx-auto">
+            <!-- Translation Feature Card -->
+            <div class="bg-white dark:bg-gray-800 p-6 rounded-xl shadow-lg border border-gray-100 dark:border-gray-700 card text-center md:text-left">
+                <div class="flex justify-center md:justify-start mb-4">
+                     <i class="ri-translate-2 text-4xl text-primary dark:text-blue-400"></i>
                 </div>
+                <h3 class="text-xl font-semibold mb-2" data-lang-en="Text Translation" data-lang-hi="पाठ अनुवाद">Text Translation</h3>
+                <p class="text-gray-600 dark:text-gray-400 mb-4" data-lang-en="Translate text between various languages. Supports auto-detection of source language." data-lang-hi="विभिन्न भाषाओं के बीच पाठ का अनुवाद करें। स्रोत भाषा का स्वतः पता लगाने का समर्थन करता है।">
+                    Translate text between various languages. Supports auto-detection of source language.
+                </p>
+                <a href="recognizer.html#translationContent" class="text-primary dark:text-blue-400 hover:underline font-medium inline-flex items-center gap-1" data-lang-en="Go to Translator" data-lang-hi="अनुवादक पर जाएँ">
+                    Go to Translator <i class="ri-arrow-right-line"></i>
+                </a>
             </div>
+            <!-- Gender Prediction Feature Card -->
+            <div class="bg-white dark:bg-gray-800 p-6 rounded-xl shadow-lg border border-gray-100 dark:border-gray-700 card text-center md:text-left">
+                 <div class="flex justify-center md:justify-start mb-4">
+                     <i class="ri-men-line text-4xl text-primary dark:text-blue-400"></i><i class="ri-women-line text-4xl text-primary dark:text-blue-400 -ml-2"></i>
                  </div>
+                <h3 class="text-xl font-semibold mb-2" data-lang-en="Gender Prediction" data-lang-hi="लिंग भविष्यवाणी">Gender Prediction</h3>
+                <p class="text-gray-600 dark:text-gray-400 mb-4" data-lang-en="Predict the likely gender associated with one or more names." data-lang-hi="एक या अधिक नामों से जुड़े संभावित लिंग की भविष्यवाणी करें।">
+                    Predict the likely gender associated with one or more names.
+                </p>
+                 <a href="recognizer.html#genderContent" class="text-primary dark:text-blue-400 hover:underline font-medium inline-flex items-center gap-1" data-lang-en="Go to Predictor" data-lang-hi="भविष्यवक्ता पर जाएँ">
+                    Go to Predictor <i class="ri-arrow-right-line"></i>
+                </a>
+            </div>
+        </div>
+    </section>
+</main>
+<!-- Footer -->
+<footer class="bg-gray-900 text-gray-400 py-12 mt-16">
+     <div class="container mx-auto px-4">
+         <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
+             <div>
+                 <a href="index.html" class="text-2xl font-['Pacifico'] text-white mb-4 inline-block" data-lang-en="AI Text Tools" data-lang-hi="एआई टेक्स्ट उपकरण">AI Text Tools</a>
+                 <p class="mb-4 text-sm" data-lang-en="AI-powered tools for text analysis and processing." data-lang-hi="पाठ विश्लेषण और प्रसंस्करण के लिए एआई-संचालित उपकरण।">AI-powered tools for text analysis.</p>
+                 <div class="flex space-x-4">
+                     <a href="#" class="hover:text-white" title="GitHub (Placeholder)"><i class="ri-github-fill"></i></a>
+                     <a href="#" class="hover:text-white" title="LinkedIn (Placeholder)"><i class="ri-linkedin-box-fill"></i></a>
                  </div>
              </div>
+             <div>
+                 <h3 class="text-lg font-medium text-white mb-4" data-lang-en="Quick Links" data-lang-hi="त्वरित लिंक्स">Quick Links</h3>
+                 <ul class="space-y-2 text-sm">
+                     <li><a href="home.html" class="hover:text-white" data-lang-en="Home" data-lang-hi="होम">Home</a></li>
+                     <li><a href="index.html" class="hover:text-white" data-lang-en="Tools" data-lang-hi="उपकरण">Tools</a></li>
+                     <li><a href="about.html" class="hover:text-white" data-lang-en="About" data-lang-hi="बारे में">About</a></li>
+                     <li><a href="contact.html" class="hover:text-white" data-lang-en="Contact" data-lang-hi="संपर्क">Contact</a></li>
+                     <li><a href="feedback.html" class="hover:text-white" data-lang-en="Feedback" data-lang-hi="प्रतिक्रिया">Feedback</a></li>
+                 </ul>
+             </div>
+             <div>
+                 <h3 class="text-lg font-medium text-white mb-4" data-lang-en="Resources" data-lang-hi="संसाधन">Resources</h3>
+                 <ul class="space-y-2 text-sm">
+                     <li><a href="#" class="hover:text-white" data-lang-en="API Docs (TBD)" data-lang-hi="एपीआई डॉक्स (TBD)">API Docs (TBD)</a></li>
+                     <li><a href="#" class="hover:text-white" data-lang-en="GitHub Repo" data-lang-hi="गिटहब रेपो">GitHub Repo</a></li>
+                 </ul>
+             </div>
+             <div>
+                 <h3 class="text-lg font-medium text-white mb-4" data-lang-en="Contact" data-lang-hi="संपर्क">Contact</h3>
+                 <ul class="space-y-2 text-sm">
+                     <li class="flex items-start"><i class="ri-mail-line mt-1 mr-2"></i><span>your-email@example.com</span></li>
+                 </ul>
              </div>
          </div>
+         <div class="border-t border-gray-700 mt-8 pt-8 text-center">
+              <p class="text-sm">© 2024 Your Name/Org | AI Text Tools Project</p>
+         </div>
+     </div>
+</footer>
+<!-- Base Theme/Language Script -->
+<script>
+    const themeToggle = document.getElementById('themeToggle');
+    const htmlElement = document.documentElement;
+    function applyTheme(isDark) { if (isDark) { htmlElement.classList.add('dark'); if(themeToggle) themeToggle.checked = true; } else { htmlElement.classList.remove('dark'); if(themeToggle) themeToggle.checked = false; } }
+    const languageToggle = document.getElementById('languageToggle');
+    const langElements = document.querySelectorAll('[data-lang-en]');
+    const placeholderElements = document.querySelectorAll('[data-lang-en-placeholder]');
+    function applyLanguage(lang) {
+        htmlElement.setAttribute('lang', lang);
+        langElements.forEach(el => {
+            const text = el.getAttribute(`data-lang-${lang}`);
+            if (text !== null) { // Check if attribute exists
+                const icon = el.querySelector('i');
+                if (icon && el.childNodes.length > 1) {
+                    let updated = false;
+                    el.childNodes.forEach(node => {
+                        if (node.nodeType === Node.TEXT_NODE && node.textContent.trim() !== '') {
+                            node.textContent = ` ${text} `;
+                            updated = true;
                         }
+                    });
+                    if (!updated) {
+                       const currentText = el.getAttribute(`data-lang-${lang === 'en' ? 'hi' : 'en'}`);
+                       if (currentText) el.innerHTML = el.innerHTML.replace(currentText.trim(), text);
                     }
+                } else {
+                     el.textContent = text;
+                }
+             }
+         });
+        placeholderElements.forEach(el => {
+            const placeholderText = el.getAttribute(`data-lang-${lang}-placeholder`);
+             if (placeholderText !== null) {
+                 el.placeholder = placeholderText;
+             }
+         });
+         if (languageToggle) languageToggle.checked = (lang === 'hi');
+         localStorage.setItem('language', lang);
+     }
+     function initializeSettings() {
+         const savedLang = localStorage.getItem('language') || 'en';
+         const prefersDark = localStorage.getItem('theme') === 'dark' || (localStorage.getItem('theme') === null && window.matchMedia('(prefers-color-scheme: dark)').matches);
+         applyTheme(prefersDark);
+         applyLanguage(savedLang);
+         if (languageToggle) {
+             languageToggle.addEventListener('change', (event) => {
+                 const newLang = event.target.checked ? 'hi' : 'en';
+                 applyLanguage(newLang);
+             });
+         } else { console.warn("Language toggle button not found."); }
+         if (themeToggle) {
+             themeToggle.addEventListener('change', (event) => {
+                 const isDark = event.target.checked;
+                 applyTheme(isDark);
+                 localStorage.setItem('theme', isDark ? 'dark' : 'light');
+             });
+         } else { console.warn("Theme toggle button not found."); }
+     }
+     // Initialize theme and language settings when the DOM is fully loaded
+     document.addEventListener('DOMContentLoaded', () => {
+         initializeSettings();
+         console.log("Home page DOM Loaded and Initialized.");
+     });
+</script>
 </body>
 </html>