Update src/app/visa-requirements/page.tsx

Merge version_3 into main

src/app/about-afghanistan/page.tsx

@@ -28,30 +28,32 @@ export default function AboutAfghanistanPage() {
                     ]}
                     brandName="Luxuria"
                 />
-                <MediaAbout
-                    tag="Overview"
-                    tagIcon={MapPin}
-                    title="A Country Overview"
-                    description="Strategically located at the crossroads of Central and South Asia, Afghanistan is a landlocked nation defined by its rugged Hindu Kush mountains."
-                    imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/luxury-travel-agency/hero/hero4.jpg"
-                    useInvertedBackground={false}
-                />
-                <MediaAbout
-                    tag="Culture"
-                    tagIcon={BookOpen}
-                    title="Rich Cultural Heritage"
-                    description="From traditional music and poetry to intricate carpet weaving and hospitality, the culture reflects centuries of tradition."
-                    imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/luxury-travel-agency/hero/hero3.jpg"
-                    useInvertedBackground={true}
-                />
-                <MediaAbout
-                    tag="History"
-                    tagIcon={History}
-                    title="Deep Historical Roots"
-                    description="Home to empires and historic Silk Road trade routes, Afghanistan's history is as complex as it is ancient."
-                    imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/luxury-travel-agency/services/service4.webp"
-                    useInvertedBackground={false}
-                />
+                <div id="about-afghanistan">
+                  <MediaAbout
+                      tag="Overview"
+                      tagIcon={MapPin}
+                      title="A Country Overview"
+                      description="Strategically located at the crossroads of Central and South Asia, Afghanistan is a landlocked nation defined by its rugged Hindu Kush mountains."
+                      imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/luxury-travel-agency/hero/hero4.jpg"
+                      useInvertedBackground={false}
+                  />
+                  <MediaAbout
+                      tag="Culture"
+                      tagIcon={BookOpen}
+                      title="Rich Cultural Heritage"
+                      description="From traditional music and poetry to intricate carpet weaving and hospitality, the culture reflects centuries of tradition."
+                      imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/luxury-travel-agency/hero/hero3.jpg"
+                      useInvertedBackground={true}
+                  />
+                  <MediaAbout
+                      tag="History"
+                      tagIcon={History}
+                      title="Deep Historical Roots"
+                      description="Home to empires and historic Silk Road trade routes, Afghanistan's history is as complex as it is ancient."
+                      imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/luxury-travel-agency/services/service4.webp"
+                      useInvertedBackground={false}
+                  />
+                </div>
             </ReactLenis>
         </ThemeProvider>
     );

src/app/accommodations/page.tsx

@@ -32,20 +32,22 @@ export default function AccommodationsPage() {
                     brandName="Luxuria"
                     button={{ text: "Plan Your Trip", href: "#contact" }}
                 />
-                <FeatureCardOne
-                    className="pt-40"
-                    tag="Stay"
-                    title="Luxury Accommodations"
-                    description="Find your perfect home away from home."
-                    textboxLayout="default"
-                    animationType="slide-up"
-                    gridVariant="uniform-all-items-equal"
-                    useInvertedBackground={false}
-                    features={[
-                        { title: "Grand Hotel", description: "Experience ultimate luxury and comfort.", imageSrc: "", imageAlt: "Hotel" },
-                        { title: "Mountain Retreat", description: "Secluded lodge for perfect relaxation.", imageSrc: "", imageAlt: "Lodge" }
-                    ]}
-                />
+                <div id="accommodations">
+                  <FeatureCardOne
+                      className="pt-40"
+                      tag="Stay"
+                      title="Luxury Accommodations"
+                      description="Find your perfect home away from home."
+                      textboxLayout="default"
+                      animationType="slide-up"
+                      gridVariant="uniform-all-items-equal"
+                      useInvertedBackground={false}
+                      features={[
+                          { title: "Grand Hotel", description: "Experience ultimate luxury and comfort.", imageSrc: "", imageAlt: "Hotel" },
+                          { title: "Mountain Retreat", description: "Secluded lodge for perfect relaxation.", imageSrc: "", imageAlt: "Lodge" }
+                      ]}
+                  />
+                </div>
             </ReactLenis>
         </ThemeProvider>
     );

src/app/attractions/page.tsx

@@ -33,21 +33,23 @@ export default function AttractionsPage() {
                     brandName="Luxuria"
                     button={{ text: "Plan Your Trip", href: "#contact" }}
                 />
-                <FeatureCardMedia
-                    className="pt-40"
-                    tag="Destinations"
-                    tagIcon={Plane}
-                    title="Major Tourist Attractions"
-                    description="Discover the most iconic sites across the region."
-                    textboxLayout="default"
-                    animationType="slide-up"
-                    useInvertedBackground={false}
-                    features={[
-                        { id: "1", title: "Bamiyan", description: "Ancient Buddhist heritage sites.", tag: "Culture", imageSrc: "", imageAlt: "Bamiyan" },
-                        { id: "2", title: "Kabul", description: "Vibrant capital city with historical landmarks.", tag: "City", imageSrc: "", imageAlt: "Kabul" },
-                        { id: "3", title: "Herat", description: "Known for its historic citadel and mosques.", tag: "History", imageSrc: "", imageAlt: "Herat" }
-                    ]}
-                />
+                <div id="attractions">
+                  <FeatureCardMedia
+                      className="pt-40"
+                      tag="Destinations"
+                      tagIcon={Plane}
+                      title="Major Tourist Attractions"
+                      description="Discover the most iconic sites across the region."
+                      textboxLayout="default"
+                      animationType="slide-up"
+                      useInvertedBackground={false}
+                      features={[
+                          { id: "1", title: "Bamiyan", description: "Ancient Buddhist heritage sites.", tag: "Culture", imageSrc: "", imageAlt: "Bamiyan" },
+                          { id: "2", title: "Kabul", description: "Vibrant capital city with historical landmarks.", tag: "City", imageSrc: "", imageAlt: "Kabul" },
+                          { id: "3", title: "Herat", description: "Known for its historic citadel and mosques.", tag: "History", imageSrc: "", imageAlt: "Herat" }
+                      ]}
+                  />
+                </div>
             </ReactLenis>
         </ThemeProvider>
     );

src/app/best-time-to-visit/page.tsx

@@ -4,35 +4,34 @@ import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
 import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
 import LegalSection from "@/components/legal/LegalSection";
+import FooterBaseReveal from "@/components/sections/footer/FooterBaseReveal";
 
 export default function BestTimeToVisitPage() {
   return (
     <ThemeProvider defaultButtonVariant="icon-arrow" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="none" cardStyle="solid" primaryButtonStyle="shadow" secondaryButtonStyle="solid" headingFontWeight="medium">
       <ReactLenis root>
-        <div id="nav" data-section="nav">
-          <NavbarStyleApple
+        <NavbarStyleApple
             navItems={[
                 { name: "Home", id: "/" },
                 { name: "Visa", id: "/visa-requirements" },
                 { name: "Transport", id: "/getting-around" },
                 { name: "Best Time", id: "/best-time-to-visit" },
             ]}
-            brandName="Luxuria"
+        />
+        <div id="best-time-to-visit" data-section="best-time-to-visit">
+          <LegalSection 
+              layout="page"
+              title="Best Time to Visit"
+              subtitle="Optimizing your journey based on seasonal travel insights"
+              sections={[
+                  { heading: "Seasonal Highlights", content: { type: "paragraph", text: "We analyze regional climate patterns to recommend the ideal travel window for your preferred activities." } },
+                  { heading: "Peak Seasons", content: { type: "list", items: ["Avoid tourist crowds with shoulder season planning", "Optimal weather for safari and expeditions", "Seasonal festivals and cultural events"] } }
+              ]}
+          />
+          <FooterBaseReveal
+              logoText="Luxuria"
+              columns={[]}
           />
-        </div>
-        <div id="legal" data-section="legal">
-            <LegalSection
-                layout="page"
-                title="Best Time to Visit"
-                sections={[
-                    {
-                        heading: "Seasonal Overview",                        content: [
-                            { text: "Our luxury destinations offer distinct experiences throughout the year." },
-                            { items: ["Peak season for perfect weather: November to April", "Off-peak for exclusive privacy: May to September"] }
-                        ] as any
-                    }
-                ]}
-            />
         </div>
       </ReactLenis>
     </ThemeProvider>

src/app/blog/page.tsx

@@ -19,20 +19,22 @@ export default function BlogPage() {
                     ]}
                     brandName="Luxuria"
                 />
-                <BlogCardOne 
-                    title="Travel Guides & Insights"
-                    description="Discover expert travel tips and inspiring articles from around the world."
-                    animationType="slide-up"
-                    textboxLayout="default"
-                    useInvertedBackground={false}
-                    blogs={[
-                        { id: "1", category: "Europe", title: "Luxury Guide to Amalfi Coast", excerpt: "Explore the hidden gems of Italy's most beautiful coastline.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/luxury-travel-agency/destination/destination4.webp", authorName: "Admin", authorAvatar: "", date: "May 2025" }
-                    ]}
-                />
-                <FooterBaseCard
-                    logoText="Luxuria"
-                    columns={[]}
-                />
+                <div id="blog">
+                  <BlogCardOne 
+                      title="Travel Guides & Insights"
+                      description="Discover expert travel tips and inspiring articles from around the world."
+                      animationType="slide-up"
+                      textboxLayout="default"
+                      useInvertedBackground={false}
+                      blogs={[
+                          { id: "1", category: "Europe", title: "Luxury Guide to Amalfi Coast", excerpt: "Explore the hidden gems of Italy's most beautiful coastline.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/luxury-travel-agency/destination/destination4.webp", authorName: "Admin", authorAvatar: "", date: "May 2025" }
+                      ]}
+                  />
+                  <FooterBaseCard
+                      logoText="Luxuria"
+                      columns={[]}
+                  />
+                </div>
             </ReactLenis>
         </ThemeProvider>
     );

src/app/contact/page.tsx

@@ -19,16 +19,18 @@ export default function ContactPage() {
                     ]}
                     brandName="Luxuria"
                 />
-                <ContactSplitForm 
-                    title="Let's Connect"
-                    description="Reach out to us for any questions regarding our luxury travel services."
-                    inputs={[
-                        { name: "name", type: "text", placeholder: "Full Name", required: true },
-                        { name: "email", type: "email", placeholder: "Email Address", required: true },
-                        { name: "message", type: "textarea", placeholder: "Tell us about your travel needs...", required: false }
-                    ]}
-                    useInvertedBackground={false}
-                />
+                <div id="contact">
+                  <ContactSplitForm 
+                      title="Let's Connect"
+                      description="Reach out to us for any questions regarding our luxury travel services."
+                      inputs={[
+                          { name: "name", type: "text", placeholder: "Full Name", required: true },
+                          { name: "email", type: "email", placeholder: "Email Address", required: true },
+                          { name: "message", type: "textarea", placeholder: "Tell us about your travel needs", required: false }
+                      ]}
+                      useInvertedBackground={false}
+                  />
+                </div>
                 <FooterBaseCard
                     logoText="Luxuria"
                     columns={[]}

src/app/gallery/page.tsx

@@ -19,22 +19,24 @@ export default function GalleryPage() {
                     ]}
                     brandName="Luxuria"
                 />
-                <ProductCardTwo 
-                    title="Tourism Gallery"
-                    description="A collection of moments from the world's most beautiful destinations."
-                    gridVariant="four-items-2x2-equal-grid"
-                    animationType="slide-up"
-                    textboxLayout="default"
-                    useInvertedBackground={false}
-                    products={[
-                        { id: "1", brand: "Maldives", name: "Private Island View", price: "", rating: 5, reviewCount: "", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/luxury-travel-agency/destination/destination6.webp" },
-                        { id: "2", brand: "Switzerland", name: "Alpine Retreat", price: "", rating: 5, reviewCount: "", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/luxury-travel-agency/destination/destination5.webp" }
-                    ]}
-                />
-                <FooterBaseCard
-                    logoText="Luxuria"
-                    columns={[]}
-                />
+                <div id="gallery">
+                  <ProductCardTwo 
+                      title="Tourism Gallery"
+                      description="A collection of moments from the world's most beautiful destinations."
+                      gridVariant="four-items-2x2-equal-grid"
+                      animationType="slide-up"
+                      textboxLayout="default"
+                      useInvertedBackground={false}
+                      products={[
+                          { id: "1", brand: "Maldives", name: "Private Island View", price: "", rating: 5, reviewCount: "", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/luxury-travel-agency/destination/destination6.webp" },
+                          { id: "2", brand: "Switzerland", name: "Alpine Retreat", price: "", rating: 5, reviewCount: "", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/luxury-travel-agency/destination/destination5.webp" }
+                      ]}
+                  />
+                  <FooterBaseCard
+                      logoText="Luxuria"
+                      columns={[]}
+                  />
+                </div>
             </ReactLenis>
         </ThemeProvider>
     );

src/app/getting-around/page.tsx

@@ -4,35 +4,34 @@ import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
 import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
 import LegalSection from "@/components/legal/LegalSection";
+import FooterBaseReveal from "@/components/sections/footer/FooterBaseReveal";
 
 export default function GettingAroundPage() {
   return (
     <ThemeProvider defaultButtonVariant="icon-arrow" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="none" cardStyle="solid" primaryButtonStyle="shadow" secondaryButtonStyle="solid" headingFontWeight="medium">
       <ReactLenis root>
-        <div id="nav" data-section="nav">
-          <NavbarStyleApple
+        <NavbarStyleApple
             navItems={[
                 { name: "Home", id: "/" },
                 { name: "Visa", id: "/visa-requirements" },
                 { name: "Transport", id: "/getting-around" },
                 { name: "Best Time", id: "/best-time-to-visit" },
             ]}
-            brandName="Luxuria"
+        />
+        <div id="getting-around" data-section="getting-around">
+          <LegalSection 
+              layout="page"
+              title="Getting Around"
+              subtitle="Transportation guide for our luxury destinations"
+              sections={[
+                  { heading: "Private Transfers", content: { type: "paragraph", text: "We coordinate private chauffeur services and airport transfers to ensure a seamless arrival experience." } },
+                  { heading: "Local Travel", content: { type: "numbered-list", items: ["Domestic flight connections", "Private yacht charters", "Luxury rental car options"] } }
+              ]}
+          />
+          <FooterBaseReveal
+              logoText="Luxuria"
+              columns={[]}
           />
-        </div>
-        <div id="legal" data-section="legal">
-            <LegalSection
-                layout="page"
-                title="Getting Around"
-                sections={[
-                    {
-                        heading: "Transportation Options",                        content: [
-                            { text: "We provide seamless private transfers for all our guests." },
-                            { items: ["Private chauffeur service", "Luxury car rentals available on request"] }
-                        ] as any
-                    }
-                ]}
-            />
         </div>
       </ReactLenis>
     </ThemeProvider>

src/app/page.tsx

@@ -19,17 +19,19 @@ export default function Home() {
             ]}
             brandName="Luxuria"
         />
-        <ContactSplitForm
-            title="Get in Touch"
-            description="Ready to plan your next luxury escape? Contact us today."
-            inputs={[
-                { name: "email", type: "email", placeholder: "Email Address", required: true }, 
-                { name: "name", type: "text", placeholder: "Full Name", required: true },
-                { name: "message", type: "textarea", placeholder: "Tell us about your travel needs...", required: false }
-            ]}
-            useInvertedBackground={false}
-            onSubmit={(data) => console.log(data)}
-        />
+        <div id="contact">
+          <ContactSplitForm
+              title="Get in Touch"
+              description="Ready to plan your next luxury escape? Contact us today."
+              inputs={[
+                  { name: "name", type: "text", placeholder: "Full Name", required: true },
+                  { name: "email", type: "email", placeholder: "Email Address", required: true },
+                  { name: "message", type: "textarea", placeholder: "Tell us about your travel needs", required: false }
+              ]}
+              useInvertedBackground={false}
+              onSubmit={(data) => console.log(data)}
+          />
+        </div>
         <FooterBaseCard
             logoText="Luxuria"
             columns={[]}

src/app/visa-requirements/page.tsx

@@ -4,35 +4,34 @@ import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
 import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
 import LegalSection from "@/components/legal/LegalSection";
+import FooterBaseReveal from "@/components/sections/footer/FooterBaseReveal";
 
 export default function VisaRequirementsPage() {
   return (
     <ThemeProvider defaultButtonVariant="icon-arrow" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="none" cardStyle="solid" primaryButtonStyle="shadow" secondaryButtonStyle="solid" headingFontWeight="medium">
       <ReactLenis root>
-        <div id="nav" data-section="nav">
-          <NavbarStyleApple
+        <NavbarStyleApple
             navItems={[
                 { name: "Home", id: "/" },
                 { name: "Visa", id: "/visa-requirements" },
                 { name: "Transport", id: "/getting-around" },
                 { name: "Best Time", id: "/best-time-to-visit" },
             ]}
-            brandName="Luxuria"
+        />
+        <div id="visa-requirements" data-section="visa-requirements">
+          <LegalSection 
+              layout="page"
+              title="Visa Requirements"
+              subtitle="Essential information for your international travel"
+              sections={[
+                  { heading: "Passport Validity", content: { type: "paragraph", text: "Most countries require your passport to be valid for at least six months beyond your planned departure date." } },
+                  { heading: "Entry Permits", content: { type: "list", items: ["Visa on arrival eligibility", "E-visa application processes", "Consulate visa requirements for long-stay visits"] } }
+              ]}
+          />
+          <FooterBaseReveal
+              logoText="Luxuria"
+              columns={[]}
           />
-        </div>
-        <div id="legal" data-section="legal">
-            <LegalSection
-                layout="page"
-                title="Visa Requirements"
-                sections={[
-                    {
-                        heading: "Entry Guidelines",                        content: [
-                            { text: "Ensure your documentation is in order before your trip." },
-                            { items: ["Passport must be valid for 6 months", "Check local embassy for specific visa exemptions"] }
-                        ] as any
-                    }
-                ]}
-            />
         </div>
       </ReactLenis>
     </ThemeProvider>