Bob AI: add a page for Rome Destination

Merge version_3 into main

src/app/page.tsx

@@ -11,13 +11,14 @@ import PricingCardThree from '@/components/sections/pricing/PricingCardThree';
 import ContactFaq from '@/components/sections/contact/ContactFaq';
 import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
 import { MapPin, Sparkles, Plane } from "lucide-react";
+import SplitAbout from '@/components/sections/about/SplitAbout';
 
 export default function LandingPage() {
   return (
     <ThemeProvider
       defaultButtonVariant="expand-hover"
       defaultTextAnimation="entrance-slide"
-      borderRadius="sharp"
+      borderRadius="pill"
       contentWidth="smallMedium"
       sizing="mediumLargeSizeMediumTitles"
       background="aurora"
@@ -204,6 +205,42 @@ export default function LandingPage() {
         />
       </div>
 
+      <div id="about" data-section="about">
+        <SplitAbout
+          title="Discover Paris"
+          description="Step into the heart of Paris, where history and modernity blend seamlessly. From the Eiffel Tower to the Louvre, every corner tells a story."
+          bulletPoints={[
+            { title: "Eiffel Tower", description: "Iconic landmark offering panoramic views of the city." },
+            { title: "Louvre Museum", description: "Home to thousands of works of art, including the Mona Lisa." },
+            { title: "Notre-Dame Cathedral", description: "Gothic masterpiece with stunning architecture and history." },
+            { title: "Montmartre", description: "Bohemian neighborhood with charming streets and vibrant nightlife." }
+          ]}
+          imageSrc="https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80"
+          imageAlt="Paris skyline with Eiffel Tower"
+          imagePosition="left"
+          textboxLayout="stacked"
+          useInvertedBackground="none"
+        />
+      </div>
+
+      <div id="about" data-section="about">
+        <SplitAbout
+                  title="Discover Rome"
+                  description="Step into the heart of Rome, where ancient history and vibrant culture converge. From the Colosseum to the Vatican City, every stone whispers tales of the past."
+                  bulletPoints={[
+                    { title: "Colosseum", description: "Ancient amphitheater known for its gladiatorial contests." },
+                    { title: "Vatican City", description: "Smallest independent state in the world, home to St. Peter's Basilica." },
+                    { title: "Roman Forum", description: "Archaeological site and former marketplace of ancient Rome." },
+                    { title: "Pantheon", description: "Remarkable temple known for its perfect dome and oculus." }
+                  ]}
+                  imageSrc="https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80"
+                  imageAlt="Rome skyline with Colosseum"
+                  imagePosition="left"
+                  textboxLayout="stacked"
+                  useInvertedBackground="none"
+                />
+      </div>
+
       <div id="footer" data-section="footer">
         <FooterBaseReveal
           columns={[

src/app/styles/variables.css

@@ -124,6 +124,8 @@
   --padding-hero-page-padding: calc(var(--height-10) + var(--vw-1_5) + var(--vw-1_5) + var(--height-10));
   --padding-hero-page-padding-1_5: calc(1.5 * (var(--height-10) + var(--vw-1_5) + var(--vw-1_5) + var(--height-10)));
   --padding-hero-page-padding-double: calc(2 * (var(--height-10) + var(--vw-1_5) + var(--vw-1_5) + var(--height-10)));
+
+  --border-radius: 25px;
 }
 
 @media (max-width: 767px) {
@@ -211,5 +213,7 @@
     --height-130: 117vw;
     --height-140: 126vw;
     --height-150: 135vw;
+
+    --border-radius: 25px;
   }
 }