feat(auth): implement multi-step authentication flow with UI

This commit replaces the placeholder login page with a comprehensive, multi-step authentication system. It introduces a new `AuthPage` that orchestrates the user flow between login, signup, and OTP verification.

- **Login Form**: Supports both email and WhatsApp credentials, with input validation and API integration.
- **Signup Form**: Includes fields for full name, email, and WhatsApp, with real-time password strength validation.
- **OTP Form**: Provides a view for users to verify their account after signup.
- **UI/UX**: The entire authentication experience is restyled with a new background, Poppins font, custom brand colors, and improved form components for a polished look and feel.
- **Dependencies**: Adds `axios` for handling API requests to the backend.

BREAKING CHANGE: The `LoginPage` component has been deleted and is replaced by the new `AuthPage` component. All references to `LoginPage` must be updated.

adventure-rental-app/src/OtpForm.jsx

@@ -0,0 +1,70 @@
+import React, { useState } from 'react';
+import axios from 'axios';
+
+const OtpForm = () => {
+  const [emailOtp, setEmailOtp] = useState('');
+  const [whatsappOtp, setWhatsappOtp] = useState('');
+  const [error, setError] = useState('');
+  const [loading, setLoading] = useState(false);
+
+  const handleVerify = async (e) => {
+    e.preventDefault();
+    setLoading(true);
+    setError('');
+
+    try {
+      // Assuming you have a webhook for OTP verification
+      await axios.post('https://api.karyamanswasta.my.id/webhook/verify-otp/adventure', {
+        emailOtp,
+        whatsappOtp,
+      });
+      // On success, you would typically redirect to the main app
+      console.log('OTP verification successful');
+    } catch (err) {
+      setError(err.response?.data?.message || 'OTP verification failed.');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <>
+      <div className="text-center">
+        <h2 className="text-3xl font-bold text-white">Verify Your Account</h2>
+        <p className="mt-2 text-sm text-gray-300">Enter the OTP sent to your email and WhatsApp</p>
+      </div>
+      <form className="mt-8 space-y-6" onSubmit={handleVerify}>
+        <input
+          name="emailOtp"
+          type="text"
+          required
+          className="appearance-none relative block w-full px-4 py-3 border border-gray-500 bg-white/20 text-white placeholder-gray-300 focus:outline-none focus:ring-brand-orange focus:border-brand-orange sm:text-sm rounded-md"
+          placeholder="Email OTP"
+          value={emailOtp}
+          onChange={(e) => setEmailOtp(e.target.value)}
+        />
+        <input
+          name="whatsappOtp"
+          type="text"
+          required
+          className="appearance-none relative block w-full px-4 py-3 border border-gray-500 bg-white/20 text-white placeholder-gray-300 focus:outline-none focus:ring-brand-orange focus:border-brand-orange sm:text-sm rounded-md"
+          placeholder="WhatsApp OTP"
+          value={whatsappOtp}
+          onChange={(e) => setWhatsappOtp(e.target.value)}
+        />
+        {error && <p className="text-sm text-red-300 text-center">{error}</p>}
+        <div>
+          <button
+            type="submit"
+            disabled={loading}
+            className="group relative w-full flex justify-center py-3 px-4 border border-transparent text-sm font-bold rounded-md text-white bg-brand-orange hover:bg-opacity-90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-brand-orange focus:ring-offset-gray-800 disabled:opacity-60"
+          >
+            {loading ? 'Verifying...' : 'Verify Account'}
+          </button>
+        </div>
+      </form>
+    </>
+  );
+};
+
+export default OtpForm;