Add NLT (New Living Translation) to frontend

- Added NLT as third option in VersionSelector component
- Added NLT logo and card with proper styling
- Updated TypeScript interface to include 'nlt' option
- Positioned NLT card below ESV/NKJV grid for clean layout
- Includes proper logo image and descriptive text for NLT

NLT is now fully integrated into the version selection UI!

backend/src/index.js

@@ -216,7 +216,14 @@ app.get('/api/search', async (req, res) => {
     }
 
     // Get the appropriate search engine for the version
-    const searchEngine = version === 'esv' && esvSearchEngine ? esvSearchEngine : nkjvSearchEngine;
+    let searchEngine;
+    if (version === 'esv' && esvSearchEngine) {
+      searchEngine = esvSearchEngine;
+    } else if (version === 'nlt' && nltSearchEngine) {
+      searchEngine = nltSearchEngine;
+    } else {
+      searchEngine = nkjvSearchEngine; // default fallback
+    }
 
     const options = {
       bookFilter: book || null,
@@ -249,7 +256,14 @@ app.get('/api/search/suggestions', async (req, res) => {
     }
 
     // Get the appropriate search engine for the version
-    const searchEngine = version === 'esv' && esvSearchEngine ? esvSearchEngine : nkjvSearchEngine;
+    let searchEngine;
+    if (version === 'esv' && esvSearchEngine) {
+      searchEngine = esvSearchEngine;
+    } else if (version === 'nlt' && nltSearchEngine) {
+      searchEngine = nltSearchEngine;
+    } else {
+      searchEngine = nkjvSearchEngine; // default fallback
+    }
 
     const suggestions = await searchEngine.getSearchSuggestions(query, parseInt(limit) || 10);
 

frontend/src/App.tsx

@@ -37,7 +37,7 @@ function App() {
   // Extract version from URL path on mount and when location changes
   useEffect(() => {
     const pathParts = location.pathname.split('/').filter(Boolean);
-    if (pathParts[0] === 'version' && (pathParts[1] === 'esv' || pathParts[1] === 'nkjv')) {
+    if (pathParts[0] === 'version' && (pathParts[1] === 'esv' || pathParts[1] === 'nkjv' || pathParts[1] === 'nlt')) {
       setSelectedVersion(pathParts[1]);
     } else if (location.pathname === '/') {
       // At root path, no version is selected

frontend/src/components/VersionSelector.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { Search } from 'lucide-react';
 
 interface VersionSelectorProps {
-  onVersionSelect: (version: 'esv' | 'nkjv') => void;
+  onVersionSelect: (version: 'esv' | 'nkjv' | 'nlt') => void;
   onSearchClick?: () => void;
 }
 
@@ -80,6 +80,31 @@ const VersionSelector: React.FC<VersionSelectorProps> = ({ onVersionSelect, onSe
           </div>
         </div>
       </div>
+
+      {/* NLT Row (below the grid) */}
+      <div className="flex justify-center mt-6">
+        <div
+          onClick={() => onVersionSelect('nlt')}
+          className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-md hover:shadow-lg transition-all duration-200 cursor-pointer transform hover:-translate-y-1 w-full max-w-md"
+        >
+          <div className="p-6">
+            <div className="flex flex-col items-center text-center">
+              <div className="w-16 h-16 mb-3 flex items-center justify-center">
+                <img src="/logos/nlt-logo.png" alt="NLT Logo" className="max-w-full max-h-full" />
+              </div>
+              <h3 className="text-xl font-bold text-gray-900 dark:text-gray-100 mb-2">
+                NLT
+              </h3>
+              <p className="text-gray-600 dark:text-gray-400 mb-3">
+                New Living Translation
+              </p>
+              <p className="text-sm text-gray-500 dark:text-gray-400">
+                Clear and accurate translation for modern readers
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
     </div>
   );
 };