src/components/AboutUsPage.tsx

@@ -168,7 +168,7 @@ export function AboutUsPage({
               transition={{ duration: 3, repeat: Infinity }}
             >
               <span className="font-merchant font-light" style={{ fontStretch: 'normal', fontVariant: 'normal' }}>Meet the</span>{' '}
-              <span className="bg-gradient-to-r from-primary via-secondary to-primary bg-[length:200%_100%] bg-clip-text text-transparent font-bold italic animate-shimmer">
+              <span className="bg-gradient-to-r from-primary via-secondary to-primary bg-[length:200%_100%] bg-clip-text text-transparent font-bold italic animate-shimmer pr-1">
                 Dream Team
               </span>{' '}
               ✈️

src/components/AttractionsPage.tsx

@@ -301,7 +301,7 @@ export function AttractionsPage({
         <div className="text-center mb-12">
           <h1 className="font-merchant text-2xl md:text-3xl lg:text-4xl leading-tight text-gray-900 mb-4">
             <span className="font-light">Discover</span>{' '}
-            <span className="font-bold italic text-gradient-primary">Melbourne's</span>{' '}
+            <span className="font-bold italic text-gradient-primary pr-1">Melbourne's</span>{' '}
             <span className="font-normal">Best</span>{' '}
             <span className="font-semibold text-emphasis">Attractions</span>
           </h1>

src/components/LandingMagicItinerary.tsx

@@ -131,7 +131,7 @@ export function LandingMagicItinerary() {
             viewport={{ once: true }}
           >
             <span className="font-light">Plan Your</span>{' '}
-            <span className="font-bold italic bg-gradient-to-r from-warm-coral via-orange-500 to-rose-500 bg-clip-text text-transparent drop-shadow-lg">
+            <span className="font-bold italic bg-gradient-to-r from-warm-coral via-orange-500 to-rose-500 bg-clip-text pr-2 text-transparent drop-shadow-lg">
               Dream Journey
             </span>
             <br />

src/components/MagicItineraryPage.tsx

@@ -107,8 +107,8 @@ export function MagicItineraryPage({
               transition={{ duration: 0.6 }}
             >
               <h1 className="font-merchant text-4xl md:text-5xl lg:text-6xl leading-tight mb-6">
-                <span className="font-light">Plan Your Perfect</span>{' '}
-                <span className="font-bold italic bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">
+                <span className="font-light ">Plan Your Perfect</span>{' '}
+                <span className="font-bold inline-block italic bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">
                   Melbourne Adventure
                 </span>
               </h1>

src/components/MobileAppSection.tsx

@@ -68,7 +68,7 @@ export function MobileAppSection() {
             >
               <h1 className="font-merchant text-4xl lg:text-5xl xl:text-6xl leading-tight text-foreground">
                 <span className="font-normal">Access all your</span>{' '}
-                <span className="bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent font-bold italic">
+                <span className="bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent font-bold italic inline-block">
                   city cards
                 </span>
                 <br />

src/components/PassesPage.tsx

@@ -604,7 +604,7 @@ export function PassesPage({
                 <div className="p-8 lg:p-16">
                   <h2 className="heading-dynamic text-4xl text-gray-900 mb-6">
                     <span className="font-light">Access all your</span>{' '}
-                    <span className="font-bold italic text-gradient-primary">city cards</span>{' '}
+                    <span className="font-bold italic text-gradient-primary pr-2">city cards</span>{' '}
                     <span className="font-normal">on your</span>{' '}
                     <span className="font-semibold text-emphasis">phone</span>
                   </h2>
@@ -663,7 +663,7 @@ export function PassesPage({
           <div className="text-center mb-12">
             <h2 className="heading-dynamic text-4xl text-gray-900 mb-4">
               <span className="font-light">Why Choose</span>{' '}
-              <span className="font-bold italic text-gradient-primary">CityCards</span><span className="font-normal">?</span>
+              <span className="font-bold italic text-gradient-primary pr-2">CityCards</span><span className="font-normal">?</span>
             </h2>
             <p className="text-xl text-gray-600 max-w-3xl mx-auto font-light">
               We're committed to providing the best city exploration experience with unmatched value and service

src/components/PersonalizedTourHero.tsx

@@ -121,7 +121,8 @@ export function PersonalizedTourHero({ onCreateItineraryClick }: PersonalizedTou
               {/* Main Heading */}
               <h1 className="font-poppins text-4xl sm:text-5xl md:text-6xl leading-tight mb-6">
                 <span className="font-light">Create Your</span>{' '}
-                <span className="font-bold italic bg-gradient-to-r from-primary via-orange-500 to-rose-500 bg-clip-text text-transparent">
+                <span className="font-bold italic bg-gradient-to-r from-primary via-orange-500 to-rose-500 
+             bg-clip-text text-transparent inline-block overflow-visible whitespace-nowrap">
                   Magic Itinerary
                 </span>
               </h1>

src/components/PostCardsPage.tsx

@@ -105,7 +105,7 @@ export function PostCardsPage({
           >
             <h1 className="font-merchant text-4xl md:text-5xl lg:text-6xl leading-tight mb-6">
               <span className="font-light">Create Beautiful</span>{' '}
-              <span className="font-bold italic bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">
+              <span className="font-bold inline-block italic bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">
                 Custom Postcards
               </span>
             </h1>

src/components/WhatsIncluded.tsx

@@ -41,7 +41,7 @@ interface WhatsIncludedProps {
   user: User | null;
 }
 
-export function WhatsIncluded({
+export function   WhatsIncluded({
   onBackClick,
   onHomeClick,
   onMelbourneClick,

src/components/WhatsIncludedHero.tsx

@@ -99,10 +99,13 @@ export function WhatsIncludedHero({ onCreateItineraryClick }: WhatsIncludedHeroP
               className="text-center max-w-4xl"
             >
               {/* Main Heading */}
-              <h1 className="font-poppins text-4xl sm:text-5xl md:text-6xl leading-tight mb-6">
+              <h1 className="font-poppins text-4xl sm:text-5xl md:text-6xl w-full leading-tight mb-6">
                 <span className="font-light">One pass.</span>{' '}
                 <span className="font-bold italic bg-gradient-to-r from-primary via-orange-500 to-rose-500 bg-clip-text text-transparent">
-                  Everything you need
+                  Everything you
+                </span>{' '}
+                <span className="font-bold italic bg-gradient-to-r from-primary via-orange-500 to-rose-500 bg-clip-text text-transparent">
+                  need
                 </span>{' '}
                 <span className="font-light">to explore.</span>
               </h1>

src/index.css

@@ -3661,6 +3661,7 @@
   .bg-gradient-to-r {
     --tw-gradient-position: to right in oklab;
     background-image: linear-gradient(var(--tw-gradient-stops));
+    padding-right: 8px;
   }
 
   .bg-gradient-to-t {