add rtk setup

src/Redux/Store.tsx

@@ -0,0 +1,18 @@
+import { configureStore } from "@reduxjs/toolkit";
+import { fakeApi } from "./services/fakeapi.service";
+
+export const store = configureStore({
+  reducer: {
+   [fakeApi.reducerPath]:fakeApi.reducer
+  },
+
+  
+  middleware: (getDefaultMiddleware) =>
+    getDefaultMiddleware().concat(
+   
+fakeApi.middleware,
+      
+    ),
+});
+export type RootState = ReturnType<typeof store.getState>;
+export type AppDispatch = typeof store.dispatch;

src/Redux/services/fakeApi.service.ts

@@ -0,0 +1,19 @@
+import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'
+
+export const fakeApi = createApi({
+    reducerPath: 'fakeApi',
+    baseQuery: fetchBaseQuery({
+        baseUrl: " https://fakestoreapi.com",
+
+    }),
+    endpoints: (builder) => ({
+        getProducts: builder.query<any, void>({
+            query: () => ({
+                url: 'products',
+                method: 'GET',
+            }),
+        }),
+    }),
+})
+
+export const {  useGetProductsQuery} = fakeApi

src/main.tsx

@@ -2,9 +2,13 @@ import { createRoot } from "react-dom/client";
 import { BrowserRouter } from "react-router-dom";
 import App from "./App";
 import "./index.css";
+import { Provider } from "react-redux";
+import { store } from "./Redux/Store";
 
 createRoot(document.getElementById("root")!).render(
-  <BrowserRouter>
-    <App />
-  </BrowserRouter>
+  <Provider store={store}>
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
+  </Provider>
 );

src/pages/landingPage.tsx

@@ -19,95 +19,100 @@ import { LandingNewsletterSection } from '../components/LandingNewsletterSection
 import { CustomPostcards } from '../components/CustomPostcards';
 import { Layout } from '../Layout';
 import { getAutoNavigationSource } from '../utils/getAutoNavigationSource';
+import { useGetProductsQuery } from '../Redux/services/fakeapi.service';
 
 
 
 const melbourneImage =
-    "https://images.unsplash.com/photo-1551836022-d5d88e9218df?auto=format&fit=crop&w=1920&q=80"; // Melbourne
+  "https://images.unsplash.com/photo-1551836022-d5d88e9218df?auto=format&fit=crop&w=1920&q=80"; // Melbourne
 
 const sydneyImage =
-    "https://images.unsplash.com/photo-1506976785307-8732e854ad03?auto=format&fit=crop&w=1920&q=80"; // Sydney Opera House
+  "https://images.unsplash.com/photo-1506976785307-8732e854ad03?auto=format&fit=crop&w=1920&q=80"; // Sydney Opera House
 
 const brisbaneImage =
-    "https://images.unsplash.com/photo-1604644363101-03f3d7cbecb6?auto=format&fit=crop&w=1920&q=80"; // Brisbane skyline
+  "https://images.unsplash.com/photo-1604644363101-03f3d7cbecb6?auto=format&fit=crop&w=1920&q=80"; // Brisbane skyline
 
 interface User {
-    email: string;
-    name: string;
+  email: string;
+  name: string;
 }
 
 interface LandingPageProps {
-    onSignInClick: () => void;
-    onSignOutClick?: () => void;
-    user?: User | null;
+  onSignInClick: () => void;
+  onSignOutClick?: () => void;
+  user?: User | null;
 }
 export function LandingPage({ onSignInClick,
-    onSignOutClick,
-    user }: LandingPageProps) {
-    const [currentCityIndex, setCurrentCityIndex] = useState(0);
-    const location = useLocation();
-    const activeCity = getAutoNavigationSource(location);
+  onSignOutClick,
+  user }: LandingPageProps) {
+  const [currentCityIndex, setCurrentCityIndex] = useState(0);
+  const [isCityDialogOpen, setIsCityDialogOpen] = useState(Boolean)
+  const location = useLocation();
+  const activeCity = getAutoNavigationSource(location);
 
-    const cities = [
-        {
-            id: 'melbourne',
-            name: 'Melbourne',
-            description: 'Cultural capital with world-class attractions',
-            image: melbourneImage,
-            attractions: 45,
-            savings: '30%',
-            path: '/melbourne'
-        },
-        {
-            id: 'sydney',
-            name: 'Sydney',
-            description: 'Iconic landmarks and harbor views',
-            image: sydneyImage,
-            attractions: 38,
-            savings: '25%',
-            path: '/sydney'
-        },
-        {
-            id: 'brisbane',
-            name: 'Brisbane',
-            description: 'Sunshine, riverside dining, and adventure',
-            image: brisbaneImage,
-            attractions: 32,
-            savings: '28%',
-            path: '/brisbane'
-        }
-    ];
+  const { data } = useGetProductsQuery()
+  console.log(data)
 
-    // Auto-rotate cities
-    useEffect(() => {
-        const interval = setInterval(() => {
-            setCurrentCityIndex((prev) => (prev + 1) % cities.length);
-        }, 4000);
-        return () => clearInterval(interval);
-    }, []);
+  const cities = [
+    {
+      id: 'melbourne',
+      name: 'Melbourne',
+      description: 'Cultural capital with world-class attractions',
+      image: melbourneImage,
+      attractions: 45,
+      savings: '30%',
+      path: '/melbourne'
+    },
+    {
+      id: 'sydney',
+      name: 'Sydney',
+      description: 'Iconic landmarks and harbor views',
+      image: sydneyImage,
+      attractions: 38,
+      savings: '25%',
+      path: '/sydney'
+    },
+    {
+      id: 'brisbane',
+      name: 'Brisbane',
+      description: 'Sunshine, riverside dining, and adventure',
+      image: brisbaneImage,
+      attractions: 32,
+      savings: '28%',
+      path: '/brisbane'
+    }
+  ];
 
-    const scrollToCities = () => {
-        document.getElementById('cities-section')?.scrollIntoView({
-            behavior: 'smooth'
-        });
-    };
+  // Auto-rotate cities
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setCurrentCityIndex((prev) => (prev + 1) % cities.length);
+    }, 4000);
+    return () => clearInterval(interval);
+  }, []);
 
-    return (
-        <div className="min-h-screen bg-white">
-            {/* Navbar */}
-           <Layout
-                 activeCity={activeCity}
-                 onSignInClick={onSignInClick}
-                 onSignOutClick={onSignOutClick}
-                 user={user} // ✅ Pass the updated user data
-               >
+  const scrollToCities = () => {
+    document.getElementById('cities-section')?.scrollIntoView({
+      behavior: 'smooth'
+    });
+  };
 
-            {/* City Submenu */}
-            {/* <CitySubmenu
+  return (
+    <div className="min-h-screen bg-white">
+      {/* Navbar */}
+      <Layout
+        activeCity={activeCity}
+        onSignInClick={onSignInClick}
+        onSignOutClick={onSignOutClick}
+        user={user} // ✅ Pass the updated user data
+      >
+
+        {/* City Submenu */}
+        {/* <CitySubmenu
                 onClose={() => { }}
             /> */}
-            {/* Hero Section */}
-            <div 
+        {/* Hero Section */}
+        <div
           className="relative z-10 min-h-[90vh] flex items-end justify-start pt-24 pb-16 bg-cover bg-[center_35%] bg-no-repeat"
           style={{ backgroundImage: `url(${heroBannerImage})` }}
         >
@@ -162,34 +167,34 @@ export function LandingPage({ onSignInClick,
           </div>
         </div>
 
-            {/* Features Section */}
-            <LandingWhyChooseCityCards />
+        {/* Features Section */}
+        <LandingWhyChooseCityCards />
 
-            {/* LandingVarietyOfAdventures Section */}
-            <LandingVarietyOfAdventures />
+        {/* LandingVarietyOfAdventures Section */}
+        <LandingVarietyOfAdventures />
 
-            {/* MagicItinerary Section */}
-            <LandingMagicItinerary />
+        {/* MagicItinerary Section */}
+        <LandingMagicItinerary />
 
-            {/* BookAttractionSection Section */}
-            <LandingBookAttractionSection />
+        {/* BookAttractionSection Section */}
+        <LandingBookAttractionSection />
 
-            {/* CustomPostcards Section */}
-            <CustomPostcards/>
+        {/* CustomPostcards Section */}
+        <CustomPostcards />
 
-            {/* UpcomingCities Section */}
-            <LandingUpcomingCities />
+        {/* UpcomingCities Section */}
+        <LandingUpcomingCities />
 
-            {/* TrustSection Section */}
-            <LandingTrustSection />
+        {/* TrustSection Section */}
+        <LandingTrustSection />
 
-            {/* MobileAppSection Section */}
-            <LandingMobileAppSection />
+        {/* MobileAppSection Section */}
+        <LandingMobileAppSection />
 
-            {/* Newsletter Section */}
-            <LandingNewsletterSection />
+        {/* Newsletter Section */}
+        <LandingNewsletterSection />
 
-</Layout>
-        </div>
-    );
+      </Layout>
+    </div>
+  );
 }