Update src/app/page.tsx

Merge version_1 into main

src/app/page.tsx

@@ -12,8 +12,67 @@ import FaqSplitText from '@/components/sections/faq/FaqSplitText';
 import ContactFaq from '@/components/sections/contact/ContactFaq';
 import FooterSimple from '@/components/sections/footer/FooterSimple';
 import { Lock, BarChart3, CreditCard, Zap, Shield, Eye, History, FileText, Send, CheckCircle, TrendingUp, Calendar, ArrowRight } from 'lucide-react';
+import { useState } from 'react';
 
 export default function LandingPage() {
+  const [loginEmail, setLoginEmail] = useState('');
+  const [loginPassword, setLoginPassword] = useState('');
+  const [loginError, setLoginError] = useState('');
+  const [loginSuccess, setLoginSuccess] = useState(false);
+
+  const handleLoginSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setLoginError('');
+    setLoginSuccess(false);
+
+    // Client-side validation
+    if (!loginEmail || !loginPassword) {
+      setLoginError('Please enter both email and password.');
+      return;
+    }
+
+    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(loginEmail)) {
+      setLoginError('Please enter a valid email address.');
+      return;
+    }
+
+    try {
+      // Send login request to secure backend endpoint
+      const response = await fetch('/api/auth/login', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          // CSRF token should be included for additional security
+        },
+        body: JSON.stringify({
+          email: loginEmail,
+          password: loginPassword,
+        }),
+        // Ensure credentials are sent securely over HTTPS only
+        credentials: 'include',
+      });
+
+      if (!response.ok) {
+        const errorData = await response.json();
+        setLoginError(errorData.message || 'Login failed. Please try again.');
+        return;
+      }
+
+      const data = await response.json();
+      setLoginSuccess(true);
+      setLoginEmail('');
+      setLoginPassword('');
+
+      // Redirect to dashboard after successful login
+      if (data.redirectUrl) {
+        window.location.href = data.redirectUrl;
+      }
+    } catch (error) {
+      setLoginError('An error occurred. Please try again.');
+      console.error('Login error:', error);
+    }
+  };
+
   return (
     <ThemeProvider
       defaultButtonVariant="text-stagger"
@@ -66,6 +125,80 @@ export default function LandingPage() {
             { text: "Access Dashboard", href: "#" }
           ]}
         />
+        
+        {/* Secure Login Form */}
+        <div className="flex justify-center items-center py-20 px-6">
+          <div className="w-full max-w-md bg-white border border-gray-200 rounded-lg p-8 shadow-sm">
+            <h2 className="text-2xl font-semibold text-gray-900 mb-6 text-center">Secure Login</h2>
+            
+            <form onSubmit={handleLoginSubmit} className="space-y-4">
+              {/* Email Input */}
+              <div>
+                <label htmlFor="email" className="block text-sm font-medium text-gray-700 mb-2">
+                  Email Address
+                </label>
+                <input
+                  type="email"
+                  id="email"
+                  value={loginEmail}
+                  onChange={(e) => setLoginEmail(e.target.value)}
+                  placeholder="you@example.com"
+                  className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                  required
+                  autoComplete="email"
+                />
+              </div>
+
+              {/* Password Input */}
+              <div>
+                <label htmlFor="password" className="block text-sm font-medium text-gray-700 mb-2">
+                  Password
+                </label>
+                <input
+                  type="password"
+                  id="password"
+                  value={loginPassword}
+                  onChange={(e) => setLoginPassword(e.target.value)}
+                  placeholder="••••••••"
+                  className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                  required
+                  autoComplete="current-password"
+                />
+              </div>
+
+              {/* Error Message */}
+              {loginError && (
+                <div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg text-sm">
+                  {loginError}
+                </div>
+              )}
+
+              {/* Success Message */}
+              {loginSuccess && (
+                <div className="bg-green-50 border border-green-200 text-green-700 px-4 py-3 rounded-lg text-sm">
+                  Login successful! Redirecting to your dashboard...
+                </div>
+              )}
+
+              {/* Submit Button */}
+              <button
+                type="submit"
+                disabled={loginSuccess}
+                className="w-full bg-blue-600 hover:bg-blue-700 disabled:bg-gray-400 text-white font-semibold py-2 px-4 rounded-lg transition duration-200"
+              >
+                {loginSuccess ? 'Redirecting...' : 'Sign In'}
+              </button>
+            </form>
+
+            {/* Security Notice */}
+            <div className="mt-6 p-4 bg-blue-50 border border-blue-200 rounded-lg">
+              <p className="text-xs text-blue-800">
+                <Lock className="inline w-3 h-3 mr-2" />
+                Your credentials are encrypted with 256-bit SSL and never stored in plain text. We never share your banking information.
+              </p>
+            </div>
+          </div>
+        </div>
       </div>
 
       <div id="services" data-section="services">