From 475956ae1ae17ecb9a1ae8aed5d40f6e287c6a22 Mon Sep 17 00:00:00 2001
From: priyanshuvish <vishpriyanshu172@gmail.com>
Date: Thu, 16 Oct 2025 20:17:49 +1100
Subject: [PATCH] solved esim and hotel discount nav

---
 src/components/EsimsPage.tsx          |  47 +++-
 src/components/HotelDiscountsPage.tsx | 380 ++++++++++++++------------
 2 files changed, 242 insertions(+), 185 deletions(-)

diff --git a/src/components/EsimsPage.tsx b/src/components/EsimsPage.tsx
index 556cc6a..ccfa1a6 100644
--- a/src/components/EsimsPage.tsx
+++ b/src/components/EsimsPage.tsx
@@ -5,7 +5,6 @@ import Navbar from './Navbar';
 import { SubNavbar } from './SubNavbar';
 import { Footer } from './Footer';
 import { ImageWithFallback } from './figma/ImageWithFallback';
-import { Layout } from '../Layout';
 
 interface EsimsPageProps {
   onBackClick: () => void;
@@ -89,14 +88,44 @@ export function EsimsPage({
   ];
 
   return (
-    <Layout
-    activeCity=""
-      onSignInClick={onSignInClick}
-      onSignOutClick={onSignOutClick}
-      user={user}
-      showCitySubmenu={true}
-    >
     <div className="min-h-screen bg-white">
+      {/* Navbar */}
+      <Navbar
+        activeCity="Paris"
+        onCityChange={() => {}}
+        onHomeClick={onHomeClick}
+        onMelbourneClick={onMelbourneClick}
+        onPassesClick={onPassesClick}
+        onCheckoutClick={onCheckoutClick}
+        onSignInClick={onSignInClick}
+        onSignOutClick={onSignOutClick}
+        onAttractionsClick={onAttractionsClick}
+        onBlogsClick={onBlogsClick}
+        onHowItWorksClick={onHowItWorksClick}
+        onFAQClick={onFAQClick}
+        onPrivacyPolicyClick={onPrivacyPolicyClick}
+        onAboutUsClick={onAboutUsClick}
+        onProfileClick={onProfileClick}
+        onCityCardsClick={onCityCardsClick}
+        onMagicItineraryClick={onMagicItineraryClick}
+        onPostCardsClick={onPostCardsClick}
+        onOffersClick={onOffersClick}
+        onEsimsClick={onEsimsClick}
+        currentPage={currentPage}
+        isUserSignedIn={!!user}
+        user={user}
+      />
+
+      {/* SubNavbar for Products */}
+      <SubNavbar
+        activeTab="esims"
+        onCityCardsClick={onCityCardsClick}
+        onMagicItineraryClick={onMagicItineraryClick}
+        onPostCardsClick={onPostCardsClick}
+        onOffersClick={onOffersClick}
+        onEsimsClick={onEsimsClick}
+        onHotelDiscountsClick={onHotelDiscountsClick}
+      />
 
       {/* Hero Section - eSIM Focus */}
       <section className="relative pt-52 pb-20 overflow-hidden" style={{ backgroundColor: '#FFF5F5' }}>
@@ -279,7 +308,7 @@ export function EsimsPage({
         </div>
       </section>
 
+      <Footer />
     </div>
-    </Layout>
   );
 }
diff --git a/src/components/HotelDiscountsPage.tsx b/src/components/HotelDiscountsPage.tsx
index b2e0247..d35bcc3 100644
--- a/src/components/HotelDiscountsPage.tsx
+++ b/src/components/HotelDiscountsPage.tsx
@@ -5,9 +5,8 @@ import Navbar from './Navbar';
 import { SubNavbar } from './SubNavbar';
 import { Footer } from './Footer';
 import { ImageWithFallback } from './figma/ImageWithFallback';
-import cityCardsLogo from '../assets/cit-logo.png';
+import cityCardsLogo from '../assets/cityLogo.png';
 import marriottHotelImage from '../assets/marriott-hotel.png';
-import { Layout } from '../Layout';
 
 interface HotelDiscountsPageProps {
   onBackClick: () => void;
@@ -80,192 +79,221 @@ export function HotelDiscountsPage({
   ];
 
   return (
-    <Layout
-      activeCity=""
-      onSignInClick={onSignInClick}
-      onSignOutClick={onSignOutClick}
-      user={user}
-      showCitySubmenu={true}
-    >
-      <div className="min-h-screen bg-white">
+    <div className="min-h-screen bg-white">
+      {/* Navbar */}
+      <Navbar
+        activeCity="Paris"
+        onCityChange={() => {}}
+        onHomeClick={onHomeClick}
+        onPassesClick={onPassesClick}
+        onCheckoutClick={onCheckoutClick}
+        onSignInClick={onSignInClick}
+        onSignOutClick={onSignOutClick}
+        onAttractionsClick={onAttractionsClick}
+        onBlogsClick={onBlogsClick}
+        onHowItWorksClick={onHowItWorksClick}
+        onFAQClick={onFAQClick}
+        onPrivacyPolicyClick={onPrivacyPolicyClick}
+        onAboutUsClick={onAboutUsClick}
+        onProfileClick={onProfileClick}
+        onCityCardsClick={onCityCardsClick}
+        onMagicItineraryClick={onMagicItineraryClick}
+        onPostCardsClick={onPostCardsClick}
+        onOffersClick={onOffersClick}
+        onEsimsClick={onEsimsClick}
+        onHotelDiscountsClick={onHotelDiscountsClick}
+        currentPage={currentPage}
+        isUserSignedIn={!!user}
+        user={user}
+      />
 
-        {/* Hero Section */}
-        <section className="relative pt-64 pb-20 overflow-hidden">
-          {/* Background Image with Overlay */}
-          <div className="absolute inset-0 z-0">
-            <ImageWithFallback
-              src={marriottHotelImage}
-              alt="Marriott Hotel"
-              className="w-full h-full object-cover"
-            />
-            <div className="absolute inset-0 bg-gradient-to-b from-black/40 via-black/40 to-background" />
-          </div>
+      {/* Sub Navbar */}
+      <SubNavbar
+        activePage="hotel-discounts"
+        onCityCardsClick={onCityCardsClick}
+        onMagicItineraryClick={onMagicItineraryClick}
+        onPostCardsClick={onPostCardsClick}
+        onOffersClick={onOffersClick}
+        onEsimsClick={onEsimsClick}
+        onHotelDiscountsClick={onHotelDiscountsClick}
+      />
 
-          <div className="container mx-auto px-4 relative z-10">
+      {/* Hero Section */}
+      <section className="relative pt-64 pb-20 overflow-hidden">
+        {/* Background Image with Overlay */}
+        <div className="absolute inset-0 z-0">
+          <ImageWithFallback
+            src={marriottHotelImage}
+            alt="Marriott Hotel"
+            className="w-full h-full object-cover"
+          />
+          <div className="absolute inset-0 bg-gradient-to-b from-black/40 via-black/40 to-background" />
+        </div>
+
+        <div className="container mx-auto px-4 relative z-10">
+          <motion.div
+            initial={{ opacity: 0, y: 30 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.6 }}
+            className="text-center"
+          >
+            {/* CityCard Logo */}
             <motion.div
-              initial={{ opacity: 0, y: 30 }}
-              animate={{ opacity: 1, y: 0 }}
-              transition={{ duration: 0.6 }}
-              className="text-center"
+              initial={{ opacity: 0, scale: 0.9 }}
+              animate={{ opacity: 1, scale: 1 }}
+              transition={{ duration: 0.6, delay: 0.2 }}
+              className="flex justify-center mb-8"
             >
-              {/* CityCard Logo */}
-              <motion.div
-                initial={{ opacity: 0, scale: 0.9 }}
-                animate={{ opacity: 1, scale: 1 }}
-                transition={{ duration: 0.6, delay: 0.2 }}
-                className="flex justify-center mb-8"
-              >
-              </motion.div>
-
-              {/* Heading */}
-              <h1 className="font-poppins text-4xl md:text-5xl lg:text-6xl leading-tight mb-6 font-semibold text-white max-w-4xl mx-auto">
-                Enjoy 20% Off Iconic Marriott Hotels — Exclusively with CityCard
-              </h1>
-
-              {/* Tagline */}
-              <p className="font-poppins text-xl md:text-2xl leading-relaxed font-normal text-white/90 max-w-2xl mx-auto">
-                Make every stay as unforgettable as the city you're exploring.
-              </p>
             </motion.div>
-          </div>
-        </section>
 
-        {/* Section 1: Partnership Introduction - White Background */}
-        <section className="py-20 md:py-28 bg-white">
-          <div className="container mx-auto px-6 sm:px-8 md:px-12 lg:px-16 xl:px-20">
-            <motion.div
-              initial={{ opacity: 0, y: 30 }}
-              whileInView={{ opacity: 1, y: 0 }}
-              viewport={{ once: true, margin: "-100px" }}
-              transition={{ duration: 0.8 }}
-              className="max-w-4xl mx-auto text-center"
-            >
-              <p className="font-poppins text-2xl md:text-3xl lg:text-4xl leading-relaxed font-normal mb-8" style={{ color: '#1F2937' }}>
-                Your CityCard unlocks more than just attractions — it also opens doors to exceptional stays.
-              </p>
-              <p className="font-poppins text-xl md:text-2xl leading-relaxed font-normal" style={{ color: '#4B5563' }}>
-                Thanks to our exclusive partnership with <span className="font-semibold" style={{ color: '#F95F62' }}>Marriott Hotels</span>, CityCard holders enjoy <span className="font-semibold" style={{ color: '#F95F62' }}>20% off best available rates</span> across a curated selection of properties in the city.
-              </p>
-            </motion.div>
-          </div>
-        </section>
-
-        {/* Section 2: Hotel Variety - Pink Background */}
-        <section className="py-20 md:py-28" style={{ backgroundColor: '#FFF5F5' }}>
-          <div className="container mx-auto px-6 sm:px-8 md:px-12 lg:px-16 xl:px-20">
-            <motion.div
-              initial={{ opacity: 0, y: 30 }}
-              whileInView={{ opacity: 1, y: 0 }}
-              viewport={{ once: true, margin: "-100px" }}
-              transition={{ duration: 0.8 }}
-              className="max-w-4xl mx-auto text-center"
-            >
-              <h2 className="font-poppins text-3xl md:text-4xl lg:text-5xl leading-tight mb-6">
-                <span className="font-light" style={{ color: '#1F2937' }}>Choose from a </span>
-                <span className="font-bold" style={{ color: '#F95F62' }}>Wide Variety</span>
-              </h2>
-              <p className="font-poppins text-xl md:text-2xl leading-relaxed font-normal" style={{ color: '#4B5563' }}>
-                Choose from a wide variety of Marriott hotels — from elegant urban hideaways and premium city-centre locations to luxurious five-star experiences — all designed to make your trip <span className="font-semibold" style={{ color: '#F95F62' }}>effortless</span>, <span className="font-semibold" style={{ color: '#F95F62' }}>comfortable</span>, and <span className="font-semibold" style={{ color: '#F95F62' }}>memorable</span>.
-              </p>
-            </motion.div>
-          </div>
-        </section>
-
-        {/* Section 3: Benefits - White Background with Pink Cards */}
-        <section className="py-20 md:py-28 bg-white">
-          <div className="container mx-auto px-6 sm:px-8 md:px-12 lg:px-16 xl:px-20">
             {/* Heading */}
-            <motion.div
-              initial={{ opacity: 0, y: 30 }}
-              whileInView={{ opacity: 1, y: 0 }}
-              viewport={{ once: true, margin: "-100px" }}
-              transition={{ duration: 0.8 }}
-              className="text-center mb-16"
-            >
-              <h2 className="font-poppins text-3xl md:text-4xl lg:text-5xl leading-tight mb-4">
-                <span className="font-light" style={{ color: '#1F2937' }}>Simply use your CityCard</span>
-                <br />
-                <span className="font-bold" style={{ color: '#F95F62' }}>booking link to:</span>
-              </h2>
-            </motion.div>
+            <h1 className="font-poppins text-4xl md:text-5xl lg:text-6xl leading-tight mb-6 font-semibold text-white max-w-4xl mx-auto">
+              Enjoy 20% Off Iconic Marriott Hotels — Exclusively with CityCard
+            </h1>
 
-            {/* Benefits Grid */}
-            <div className="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto mb-16">
-              {benefits.map((benefit, index) => {
-                const IconComponent = benefit.icon;
-                return (
-                  <motion.div
-                    key={index}
-                    initial={{ opacity: 0, y: 30 }}
-                    whileInView={{ opacity: 1, y: 0 }}
-                    viewport={{ once: true }}
-                    transition={{ duration: 0.6, delay: index * 0.1 }}
-                    className="flex flex-col items-center text-center p-6 rounded-2xl transition-all duration-300 hover:shadow-lg"
-                    style={{ backgroundColor: '#FFF5F5' }}
-                  >
-                    <div className="w-16 h-16 rounded-full flex items-center justify-center mb-6" style={{ backgroundColor: '#F95F62' }}>
-                      <IconComponent className="w-8 h-8 text-white" />
-                    </div>
-                    <h3 className="font-poppins text-lg font-semibold mb-3" style={{ color: '#1F2937' }}>
-                      {benefit.title}
-                    </h3>
-                    <p className="font-poppins text-base font-normal" style={{ color: '#4B5563' }}>
-                      {benefit.description}
-                    </p>
-                  </motion.div>
-                );
-              })}
+            {/* Tagline */}
+            <p className="font-poppins text-xl md:text-2xl leading-relaxed font-normal text-white/90 max-w-2xl mx-auto">
+              Make every stay as unforgettable as the city you're exploring.
+            </p>
+          </motion.div>
+        </div>
+      </section>
+
+      {/* Section 1: Partnership Introduction - White Background */}
+      <section className="py-20 md:py-28 bg-white">
+        <div className="container mx-auto px-6 sm:px-8 md:px-12 lg:px-16 xl:px-20">
+          <motion.div
+            initial={{ opacity: 0, y: 30 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true, margin: "-100px" }}
+            transition={{ duration: 0.8 }}
+            className="max-w-4xl mx-auto text-center"
+          >
+            <p className="font-poppins text-2xl md:text-3xl lg:text-4xl leading-relaxed font-normal mb-8" style={{ color: '#1F2937' }}>
+              Your CityCard unlocks more than just attractions — it also opens doors to exceptional stays.
+            </p>
+            <p className="font-poppins text-xl md:text-2xl leading-relaxed font-normal" style={{ color: '#4B5563' }}>
+              Thanks to our exclusive partnership with <span className="font-semibold" style={{ color: '#F95F62' }}>Marriott Hotels</span>, CityCard holders enjoy <span className="font-semibold" style={{ color: '#F95F62' }}>20% off best available rates</span> across a curated selection of properties in the city.
+            </p>
+          </motion.div>
+        </div>
+      </section>
+
+      {/* Section 2: Hotel Variety - Pink Background */}
+      <section className="py-20 md:py-28" style={{ backgroundColor: '#FFF5F5' }}>
+        <div className="container mx-auto px-6 sm:px-8 md:px-12 lg:px-16 xl:px-20">
+          <motion.div
+            initial={{ opacity: 0, y: 30 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true, margin: "-100px" }}
+            transition={{ duration: 0.8 }}
+            className="max-w-4xl mx-auto text-center"
+          >
+            <h2 className="font-poppins text-3xl md:text-4xl lg:text-5xl leading-tight mb-6">
+              <span className="font-light" style={{ color: '#1F2937' }}>Choose from a </span>
+              <span className="font-bold" style={{ color: '#F95F62' }}>Wide Variety</span>
+            </h2>
+            <p className="font-poppins text-xl md:text-2xl leading-relaxed font-normal" style={{ color: '#4B5563' }}>
+              Choose from a wide variety of Marriott hotels — from elegant urban hideaways and premium city-centre locations to luxurious five-star experiences — all designed to make your trip <span className="font-semibold" style={{ color: '#F95F62' }}>effortless</span>, <span className="font-semibold" style={{ color: '#F95F62' }}>comfortable</span>, and <span className="font-semibold" style={{ color: '#F95F62' }}>memorable</span>.
+            </p>
+          </motion.div>
+        </div>
+      </section>
+
+      {/* Section 3: Benefits - White Background with Pink Cards */}
+      <section className="py-20 md:py-28 bg-white">
+        <div className="container mx-auto px-6 sm:px-8 md:px-12 lg:px-16 xl:px-20">
+          {/* Heading */}
+          <motion.div
+            initial={{ opacity: 0, y: 30 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true, margin: "-100px" }}
+            transition={{ duration: 0.8 }}
+            className="text-center mb-16"
+          >
+            <h2 className="font-poppins text-3xl md:text-4xl lg:text-5xl leading-tight mb-4">
+              <span className="font-light" style={{ color: '#1F2937' }}>Simply use your CityCard</span>
+              <br />
+              <span className="font-bold" style={{ color: '#F95F62' }}>booking link to:</span>
+            </h2>
+          </motion.div>
+
+          {/* Benefits Grid */}
+          <div className="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto mb-16">
+            {benefits.map((benefit, index) => {
+              const IconComponent = benefit.icon;
+              return (
+                <motion.div
+                  key={index}
+                  initial={{ opacity: 0, y: 30 }}
+                  whileInView={{ opacity: 1, y: 0 }}
+                  viewport={{ once: true }}
+                  transition={{ duration: 0.6, delay: index * 0.1 }}
+                  className="flex flex-col items-center text-center p-6 rounded-2xl transition-all duration-300 hover:shadow-lg"
+                  style={{ backgroundColor: '#FFF5F5' }}
+                >
+                  <div className="w-16 h-16 rounded-full flex items-center justify-center mb-6" style={{ backgroundColor: '#F95F62' }}>
+                    <IconComponent className="w-8 h-8 text-white" />
+                  </div>
+                  <h3 className="font-poppins text-lg font-semibold mb-3" style={{ color: '#1F2937' }}>
+                    {benefit.title}
+                  </h3>
+                  <p className="font-poppins text-base font-normal" style={{ color: '#4B5563' }}>
+                    {benefit.description}
+                  </p>
+                </motion.div>
+              );
+            })}
+          </div>
+
+          {/* Closing Statement */}
+          <motion.div
+            initial={{ opacity: 0, y: 30 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true }}
+            transition={{ duration: 0.8, delay: 0.4 }}
+            className="text-center"
+          >
+            <div className="max-w-4xl mx-auto mb-8">
+              <p className="font-poppins text-2xl md:text-3xl leading-relaxed font-normal" style={{ color: '#1F2937' }}>
+                It's just one more way <span className="font-bold" style={{ color: '#F95F62' }}>CityCard</span> makes exploring <span className="font-semibold" style={{ color: '#F95F62' }}>smarter</span>, <span className="font-semibold" style={{ color: '#F95F62' }}>simpler</span>, and <span className="font-semibold" style={{ color: '#F95F62' }}>more rewarding</span>.
+              </p>
             </div>
 
-            {/* Closing Statement */}
-            <motion.div
-              initial={{ opacity: 0, y: 30 }}
-              whileInView={{ opacity: 1, y: 0 }}
-              viewport={{ once: true }}
-              transition={{ duration: 0.8, delay: 0.4 }}
-              className="text-center"
+            <button
+              onClick={onCheckoutClick}
+              className="group px-10 py-5 rounded-full flex items-center gap-3 mx-auto transition-all duration-300 hover:scale-105 shadow-lg hover:shadow-xl font-poppins font-semibold text-lg text-white"
+              style={{ backgroundColor: '#F95F62' }}
             >
-              <div className="max-w-4xl mx-auto mb-8">
-                <p className="font-poppins text-2xl md:text-3xl leading-relaxed font-normal" style={{ color: '#1F2937' }}>
-                  It's just one more way <span className="font-bold" style={{ color: '#F95F62' }}>CityCard</span> makes exploring <span className="font-semibold" style={{ color: '#F95F62' }}>smarter</span>, <span className="font-semibold" style={{ color: '#F95F62' }}>simpler</span>, and <span className="font-semibold" style={{ color: '#F95F62' }}>more rewarding</span>.
-                </p>
-              </div>
+              Get Your CityCard Today
+              <ArrowRight className="w-6 h-6 group-hover:translate-x-1 transition-transform duration-300" />
+            </button>
+          </motion.div>
+        </div>
+      </section>
 
-              <button
-                onClick={onCheckoutClick}
-                className="group px-10 py-5 rounded-full flex items-center gap-3 mx-auto transition-all duration-300 hover:scale-105 shadow-lg hover:shadow-xl font-poppins font-semibold text-lg text-white"
-                style={{ backgroundColor: '#F95F62' }}
-              >
-                Get Your CityCard Today
-                <ArrowRight className="w-6 h-6 group-hover:translate-x-1 transition-transform duration-300" />
-              </button>
-            </motion.div>
-          </div>
-        </section>
+      {/* Trust Anchor Section with Logo */}
+      <section className="py-16 bg-white border-t border-gray-100">
+        <div className="container mx-auto px-6 sm:px-8 md:px-12 lg:px-16 xl:px-20">
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true }}
+            transition={{ duration: 0.6 }}
+            className="flex flex-col items-center text-center"
+          >
+            <img 
+              src={cityCardsLogo} 
+              alt="CityCard" 
+              className="h-12 md:h-14 w-auto object-contain mb-6"
+            />
+            <p className="font-poppins text-lg md:text-xl font-normal max-w-2xl" style={{ color: '#4B5563' }}>
+              Your gateway to unforgettable city experiences and exceptional hotel stays
+            </p>
+          </motion.div>
+        </div>
+      </section>
 
-        {/* Trust Anchor Section with Logo */}
-        <section className="py-16 bg-white border-t border-gray-100">
-          <div className="container mx-auto px-6 sm:px-8 md:px-12 lg:px-16 xl:px-20">
-            <motion.div
-              initial={{ opacity: 0, y: 20 }}
-              whileInView={{ opacity: 1, y: 0 }}
-              viewport={{ once: true }}
-              transition={{ duration: 0.6 }}
-              className="flex flex-col items-center text-center"
-            >
-              <img
-                src={cityCardsLogo}
-                alt="CityCard"
-                className="h-12 md:h-14 w-auto object-contain mb-6"
-              />
-              <p className="font-poppins text-lg md:text-xl font-normal max-w-2xl" style={{ color: '#4B5563' }}>
-                Your gateway to unforgettable city experiences and exceptional hotel stays
-              </p>
-            </motion.div>
-          </div>
-        </section>
-
-      </div>
-    </Layout>
+    </div>
   );
 }