From 253c6da8b18216878ae33dc2ea893b628d301990 Mon Sep 17 00:00:00 2001
From: Ryderjj89 <raiden89@live.com>
Date: Sun, 28 Sep 2025 14:01:26 -0400
Subject: [PATCH] Add new VersionSelector component for homepage redesign

Beautiful card-based version selection:
- ESV and NKJV option cards with distinct colors and icons
- Responsive design (side-by-side on desktop, stacked on mobile)
- Hover effects and smooth transitions
- Proper TypeScript typing and clean component architecture
- Accessible design with proper contrast ratios
---
 frontend/src/components/VersionSelector.tsx | 94 +++++++++++++++++++++
 1 file changed, 94 insertions(+)
 create mode 100644 frontend/src/components/VersionSelector.tsx

diff --git a/frontend/src/components/VersionSelector.tsx b/frontend/src/components/VersionSelector.tsx
new file mode 100644
index 00000000..cef62594
--- /dev/null
+++ b/frontend/src/components/VersionSelector.tsx
@@ -0,0 +1,94 @@
+import React from 'react';
+import { Book, Users } from 'lucide-react';
+
+interface VersionSelectorProps {
+  onVersionSelect: (version: 'esv' | 'nkjv') => void;
+}
+
+const VersionSelector: React.FC<VersionSelectorProps> = ({ onVersionSelect }) => {
+  return (
+    <div>
+      {/* Header */}
+      <header className="bg-white dark:bg-gray-800 shadow-sm border-b border-gray-200 dark:border-gray-700">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="flex justify-center items-center h-16">
+            <div className="flex items-center space-x-4">
+              <Book className="h-8 w-8 text-blue-600" />
+              <h1 className="text-xl sm:text-2xl font-bold text-gray-900 dark:text-gray-100">
+                The Bible
+              </h1>
+            </div>
+          </div>
+        </div>
+      </header>
+
+      {/* Version Selection */}
+      <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
+        <div className="text-center mb-12">
+          <h2 className="text-3xl font-bold text-gray-900 dark:text-gray-100 mb-4">
+            Choose Your Translation
+          </h2>
+          <p className="text-lg text-gray-600 dark:text-gray-400">
+            Select a Bible translation to begin your study
+          </p>
+        </div>
+
+        <div className="grid md:grid-cols-2 gap-8 max-w-2xl mx-auto">
+          {/* ESV Card */}
+          <div
+            onClick={() => onVersionSelect('esv')}
+            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"
+          >
+            <div className="p-8">
+              <div className="flex flex-col items-center text-center">
+                <div className="w-16 h-16 bg-blue-100 dark:bg-blue-900 rounded-full flex items-center justify-center mb-4">
+                  <Book className="w-8 h-8 text-blue-600" />
+                </div>
+                <h3 className="text-xl font-bold text-gray-900 dark:text-gray-100 mb-2">
+                  ESV
+                </h3>
+                <p className="text-gray-600 dark:text-gray-400 mb-4">
+                  English Standard Version
+                </p>
+                <p className="text-sm text-gray-500 dark:text-gray-400">
+                  A literal translation that balances clarity and dignity
+                </p>
+              </div>
+            </div>
+          </div>
+
+          {/* NKJV Card */}
+          <div
+            onClick={() => onVersionSelect('nkjv')}
+            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"
+          >
+            <div className="p-8">
+              <div className="flex flex-col items-center text-center">
+                <div className="w-16 h-16 bg-purple-100 dark:bg-purple-900 rounded-full flex items-center justify-center mb-4">
+                  <Users className="w-8 h-8 text-purple-600" />
+                </div>
+                <h3 className="text-xl font-bold text-gray-900 dark:text-gray-100 mb-2">
+                  NKJV
+                </h3>
+                <p className="text-gray-600 dark:text-gray-400 mb-4">
+                  New King James Version
+                </p>
+                <p className="text-sm text-gray-500 dark:text-gray-400">
+                  Updated language while preserving the majesty of the original
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div className="text-center mt-12">
+          <p className="text-sm text-gray-500 dark:text-gray-400">
+            Both translations include the complete Old and New Testaments, with search and bookmarking features.
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default VersionSelector;