Merge pull request 'arya-branch' (#2) from arya-branch into main

Reviewed-on: #2

src/components/LoginModal.tsx

@@ -179,7 +179,7 @@ export function LoginModal({ isOpen, onClose, }: LoginModalProps) {
                     <Button
                       onClick={handleSendOTP}
                       disabled={isLoading}
-                      className="w-full h-12 bg-gray-800 hover:bg-gray-900 text-white font-poppins font-semibold rounded-xl transition-colors"
+                      className="w-full h-12 bg-gray-800 hover:bg-gray-900 cursor-pointer text-white font-poppins font-semibold rounded-xl transition-colors"
                     >
                       {isLoading ? (
                         <div className="flex items-center gap-2">
@@ -230,7 +230,7 @@ export function LoginModal({ isOpen, onClose, }: LoginModalProps) {
                             onChange={(e) => handleOTPChange(index, e.target.value.replace(/\D/g, ''))}
                             onKeyDown={(e) => handleOTPKeyDown(index, e)}
                             data-otp-index={index}
-                            className="w-12 h-12 text-center font-poppins font-semibold text-lg bg-gray-50 border-0 rounded-xl focus:bg-white focus:ring-2 focus:ring-primary focus:outline-none transition-colors"
+                            className="w-12 h-12 text-center font-poppins font-semibold text-lg bg-gray-300 border-0 rounded-xl focus:bg-white focus:ring-2 focus:ring-primary focus:outline-none transition-colors"
                           />
                         ))}
                       </div>
@@ -247,7 +247,7 @@ export function LoginModal({ isOpen, onClose, }: LoginModalProps) {
                     <Button
                       onClick={handleVerifyLogin}
                       disabled={isLoading || otp.join('').length !== 6}
-                      className="w-full h-12 bg-gray-800 hover:bg-gray-900 text-white font-poppins font-semibold rounded-xl transition-colors disabled:opacity-50"
+                      className="w-full h-12 bg-gray-800 hover:bg-gray-900 cursor-pointer text-white font-poppins font-semibold rounded-xl transition-colors disabled:opacity-50"
                     >
                       {isLoading ? (
                         <div className="flex items-center gap-2">

src/components/PassesPage.tsx

@@ -4,21 +4,18 @@ import { Button } from './ui/button';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from './ui/card';
 import { RadioGroup, RadioGroupItem } from './ui/radio-group';
 import { Badge } from './ui/badge';
-import Navbar from './Navbar';
 import { EnhancedTestimonials } from './EnhancedTestimonials';
-import { Footer } from './Footer';
 import { ReviewsSection } from './ReviewsSection';
 import { Layout } from '../Layout';
 import { LoginModal } from './LoginModal';
 import { ImageWithFallback } from './figma/ImageWithFallback';
 import { useAuth } from '../context/AuthContext';
+import { useNavigate } from 'react-router-dom';
 
 interface PassesPageProps {
   onCheckoutClick?: () => void;
   onSignInClick: () => void;
   onSignOutClick?: () => void;
-  user?: { email: string; name: string; } | null;
-  onLoginSuccess?: (userData: { email: string; name: string }) => void;
 }
 
 interface PassType {
@@ -150,36 +147,23 @@ export function PassesPage({
   onCheckoutClick,
   onSignInClick,
   onSignOutClick,
-  // user,
-  onLoginSuccess
 }: PassesPageProps) {
   const [selectedPass, setSelectedPass] = useState<string>('unlimited');
   const [isLoginOpen, setIsLoginOpen] = useState(false);
-  // const [userData, setUserData] = useState<{ email: string; name: string } | null>(user || null);
   const { user } = useAuth(); // from AuthContext
 
+  const navigate= useNavigate()
 
-  // ✅ Handle purchase button click
-  const handlePurchaseClick = () => {
-    if (!user) {
-      // User not logged in - show login modal
-      setIsLoginOpen(true);
-    } else {
-      // User is logged in - proceed to checkout
-      onCheckoutClick?.();
-    }
+
+
+    const handleCheckoutClick = () => {
+    console.log('Proceeding to checkout for user:', user);
+    // Add your checkout logic here
+    navigate('/checkout');
   };
 
-  // ✅ Handle successful login
-  const handleLoginSuccess = (data: { email: string; name: string }) => {
-    // setUserData(data);
-    setIsLoginOpen(false);
-    console.log('Logged in user:', data);
-
-    // Call parent's onLoginSuccess if provided
-    if (onLoginSuccess) {
-      onLoginSuccess(data);
-    }
+    const handleSignInClick = () => {
+    setIsLoginOpen(true);
   };
 
   const renderFeatureValue = (value: boolean | string) => {
@@ -195,7 +179,7 @@ export function PassesPage({
 
   return (
     <Layout
-      activeCity={sessionStorage.getItem("lastKnownCity")||"shared"}
+      activeCity={sessionStorage.getItem("lastKnownCity") || "shared"}
       onSignInClick={onSignInClick}
       onSignOutClick={onSignOutClick}
       user={user} // ✅ Pass the updated user data
@@ -222,8 +206,7 @@ export function PassesPage({
           >
             {passTypes.map((pass) => (
               <div key={pass.id} className="relative h-full">
-                <Card className={`relative h-full flex flex-col transition-all duration-300 cursor-pointer ${
-                  pass.popular 
+                <Card className={`relative h-full flex flex-col transition-all duration-300 ${pass.popular
                     ? 'ring-2 ring-primary shadow-xl'
                     : selectedPass === pass.id
                       ? 'ring-2 ring-primary/50 shadow-lg'
@@ -321,12 +304,11 @@ export function PassesPage({
                     {/* CTA Button - Pushed to bottom */}
                     <div className="flex-shrink-0 space-y-3">
                       <Button
-                        className={`w-full h-12 rounded-lg font-semibold transition-all duration-300 font-poppins ${
-                          pass.popular 
+                        className={`w-full h-12 rounded-lg font-semibold transition-all cursor-pointer duration-300 font-poppins ${pass.popular
                             ? 'bg-primary hover:bg-primary/90 text-white shadow-md hover:shadow-lg'
                             : 'bg-gray-900 hover:bg-gray-800 text-white hover:shadow-md'
                           }`}
-                        onClick={user ? onCheckoutClick : onSignInClick}
+                        onClick={user ? handleCheckoutClick : handleSignInClick}
                       >
                         {user ? 'PURCHASE NOW' : 'LOGIN TO BUY PASS'}
                       </Button>
@@ -762,6 +744,13 @@ export function PassesPage({
         </div>
       </div>
 
+      <LoginModal
+        isOpen={isLoginOpen}
+        onClose={() => {
+          setIsLoginOpen(false);
+        }}
+      />
+
     </Layout>
   );
 }

src/pages/landingPage.tsx

@@ -5,7 +5,8 @@ import { ChevronDown, MapPin, Star, Shield, Clock, Smartphone } from 'lucide-rea
 import Navbar from '../components/Navbar';
 import { Footer } from '../components/Footer';
 // import { CitySubmenu } from '../components/CitySubmenu';
-import heroBannerImage from '../assets/landing-hero.png';
+// import heroBannerImage from '../assets/landing-hero.png';
+import heroBannerImage from '../assets/landing-hero.webp';
 import { Button } from '../components/ui/button';
 import { LandingWhyChooseCityCards } from '../components/LandingWhyChooseCityCards';
 import { LandingVarietyOfAdventures } from '../components/LandingVarietyOfAdventures';