diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx
index 046a3b7..3f24c4d 100644
--- a/src/pages/HomePage.tsx
+++ b/src/pages/HomePage.tsx
@@ -1,143 +1,25 @@
-import HeroBillboardBrand from '@/components/sections/hero/HeroBillboardBrand';
-import MetricsMediaCards from '@/components/sections/metrics/MetricsMediaCards';
-import PricingSplitCards from '@/components/sections/pricing/PricingSplitCards';
-import SocialProofMarquee from '@/components/sections/social-proof/SocialProofMarquee';
-import TeamOverlayCardsGrid from '@/components/sections/team/TeamOverlayCardsGrid';
-import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+// AUTO-GENERATED shell by per-section-migrate.
+// Section bodies live in ./<PageBase>/sections/<X>.tsx. Edit the section
+// files directly; this shell only fixes render order.
 
-export default function HomePage() {
+import React from 'react';
+import HeroSection from './HomePage/sections/Hero';
+import MetricsSection from './HomePage/sections/Metrics';
+import SocialProofSection from './HomePage/sections/SocialProof';
+import TeamSection from './HomePage/sections/Team';
+import PricingSection from './HomePage/sections/Pricing';
+
+
+{/* webild-stub @2026-06-13T11:10:03.042Z: Update the website design to incorporate high-quality, full-width, cinematic background photography of Algerian landscapes and architecture for all major sections, ensuring no generic stock images or people are used. Implement a luxury trav */}
+
+export default function HomePage(): React.JSX.Element {
   return (
     <>
-  <div id="hero" data-section="hero">
-    <SectionErrorBoundary name="hero">
-          <HeroBillboardBrand
-      brand="Gili Travel"
-      description="Discover Algeria Through Unforgettable Journeys. Explore breathtaking landscapes, rich culture, and authentic experiences across Algeria."
-      primaryButton={{
-        text: "Explore Destinations",
-        href: "/destinations",
-      }}
-      secondaryButton={{
-        text: "Request Information",
-        href: "/contact",
-      }}
-      imageSrc="https://images.pexels.com/photos/4011190/pexels-photo-4011190.jpeg?auto=compress&cs=tinysrgb&h=650&w=940"
-    />
-    </SectionErrorBoundary>
-  </div>
-
-  <div id="metrics" data-section="metrics">
-    <SectionErrorBoundary name="metrics">
-          <MetricsMediaCards
-      tag="Our Impact"
-      title="Why Choose Us"
-      description="Trusted by travelers worldwide for premium Algerian experiences."
-      metrics={[
-        {
-          value: "4.9/5",
-          title: "Rating",
-          description: "Based on 160+ guest reviews",
-          imageSrc: "https://images.pexels.com/photos/8826278/pexels-photo-8826278.jpeg?auto=compress&cs=tinysrgb&h=650&w=940",
-        },
-        {
-          value: "100%",
-          title: "Organization",
-          description: "Professional planning for every journey",
-          imageSrc: "https://images.pexels.com/photos/36885277/pexels-photo-36885277.png?auto=compress&cs=tinysrgb&h=650&w=940",
-        },
-      ]}
-    />
-    </SectionErrorBoundary>
-  </div>
-
-  <div id="social-proof" data-section="social-proof">
-    <SectionErrorBoundary name="social-proof">
-          <SocialProofMarquee
-      tag="Trusted By"
-      title="World-Class Travelers"
-      description="Our journeys are designed for discerning adventurers."
-      names={[
-        "Explorer Magazine",
-        "Travel Weekly",
-        "Wanderlust Guide",
-        "Culture Trip",
-        "Global Nomads",
-      ]}
-    />
-    </SectionErrorBoundary>
-  </div>
-
-  <div id="team" data-section="team">
-    <SectionErrorBoundary name="team">
-          <TeamOverlayCardsGrid
-      tag="Our Experts"
-      title="Meet The Team"
-      description="Our dedicated specialists in Algerian tourism."
-      members={[
-        {
-          name: "Sarah Ahmed",
-          role: "Lead Guide",
-          imageSrc: "https://images.pexels.com/photos/8111887/pexels-photo-8111887.jpeg?auto=compress&cs=tinysrgb&h=650&w=940",
-        },
-        {
-          name: "Karim Bellal",
-          role: "Heritage Expert",
-          imageSrc: "https://images.pexels.com/photos/5699475/pexels-photo-5699475.jpeg?auto=compress&cs=tinysrgb&h=650&w=940",
-        },
-        {
-          name: "Amira Ziani",
-          role: "Logistics Manager",
-          imageSrc: "https://images.pexels.com/photos/8871934/pexels-photo-8871934.jpeg?auto=compress&cs=tinysrgb&h=650&w=940",
-        },
-      ]}
-    />
-    </SectionErrorBoundary>
-  </div>
-
-  <div id="pricing" data-section="pricing">
-    <SectionErrorBoundary name="pricing">
-          <PricingSplitCards
-      tag="Pricing"
-      title="Premium Experience Options"
-      description="Choose the level of service that fits your requirements."
-      plans={[
-        {
-          tag: "Standard",
-          price: "Starting from $1,200",
-          period: "/ person",
-          description: "Classic itinerary covering major sites.",
-          primaryButton: {
-            text: "Book",
-            href: "/contact",
-          },
-          featuresTitle: "Includes:",
-          features: [
-            "Transport",
-            "Accommodation",
-            "Breakfast",
-          ],
-        },
-        {
-          tag: "Premium",
-          price: "Starting from $2,500",
-          period: "/ person",
-          description: "Handcrafted experience with luxury touches.",
-          primaryButton: {
-            text: "Book",
-            href: "/contact",
-          },
-          featuresTitle: "Includes:",
-          features: [
-            "Private transport",
-            "Luxury Riads",
-            "Expert historians",
-            "Full board",
-          ],
-        },
-      ]}
-    />
-    </SectionErrorBoundary>
-  </div>
+      <HeroSection />
+      <MetricsSection />
+      <SocialProofSection />
+      <TeamSection />
+      <PricingSection />
     </>
   );
 }
diff --git a/src/pages/HomePage/sections/Hero.tsx b/src/pages/HomePage/sections/Hero.tsx
new file mode 100644
index 0000000..fd6b618
--- /dev/null
+++ b/src/pages/HomePage/sections/Hero.tsx
@@ -0,0 +1,28 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "hero" section.
+
+import React from 'react';
+import HeroBillboardBrand from '@/components/sections/hero/HeroBillboardBrand';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function HeroSection(): React.JSX.Element {
+  return (
+    <div id="hero" data-section="hero">
+        <SectionErrorBoundary name="hero">
+              <HeroBillboardBrand
+          brand="Gili Travel"
+          description="Discover Algeria Through Unforgettable Journeys. Explore breathtaking landscapes, rich culture, and authentic experiences across Algeria."
+          primaryButton={{
+            text: "Explore Destinations",
+            href: "/destinations",
+          }}
+          secondaryButton={{
+            text: "Request Information",
+            href: "/contact",
+          }}
+          imageSrc="https://images.pexels.com/photos/4011190/pexels-photo-4011190.jpeg?auto=compress&cs=tinysrgb&h=650&w=940"
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}
diff --git a/src/pages/HomePage/sections/Metrics.tsx b/src/pages/HomePage/sections/Metrics.tsx
new file mode 100644
index 0000000..066034f
--- /dev/null
+++ b/src/pages/HomePage/sections/Metrics.tsx
@@ -0,0 +1,34 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "metrics" section.
+
+import React from 'react';
+import MetricsMediaCards from '@/components/sections/metrics/MetricsMediaCards';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function MetricsSection(): React.JSX.Element {
+  return (
+    <div id="metrics" data-section="metrics">
+        <SectionErrorBoundary name="metrics">
+              <MetricsMediaCards
+          tag="Our Impact"
+          title="Why Choose Us"
+          description="Trusted by travelers worldwide for premium Algerian experiences."
+          metrics={[
+            {
+              value: "4.9/5",
+              title: "Rating",
+              description: "Based on 160+ guest reviews",
+              imageSrc: "https://images.pexels.com/photos/8826278/pexels-photo-8826278.jpeg?auto=compress&cs=tinysrgb&h=650&w=940",
+            },
+            {
+              value: "100%",
+              title: "Organization",
+              description: "Professional planning for every journey",
+              imageSrc: "https://images.pexels.com/photos/36885277/pexels-photo-36885277.png?auto=compress&cs=tinysrgb&h=650&w=940",
+            },
+          ]}
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}
diff --git a/src/pages/HomePage/sections/Pricing.tsx b/src/pages/HomePage/sections/Pricing.tsx
new file mode 100644
index 0000000..11903f1
--- /dev/null
+++ b/src/pages/HomePage/sections/Pricing.tsx
@@ -0,0 +1,55 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "pricing" section.
+
+import React from 'react';
+import PricingSplitCards from '@/components/sections/pricing/PricingSplitCards';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function PricingSection(): React.JSX.Element {
+  return (
+    <div id="pricing" data-section="pricing">
+        <SectionErrorBoundary name="pricing">
+              <PricingSplitCards
+          tag="Pricing"
+          title="Premium Experience Options"
+          description="Choose the level of service that fits your requirements."
+          plans={[
+            {
+              tag: "Standard",
+              price: "Starting from $1,200",
+              period: "/ person",
+              description: "Classic itinerary covering major sites.",
+              primaryButton: {
+                text: "Book",
+                href: "/contact",
+              },
+              featuresTitle: "Includes:",
+              features: [
+                "Transport",
+                "Accommodation",
+                "Breakfast",
+              ],
+            },
+            {
+              tag: "Premium",
+              price: "Starting from $2,500",
+              period: "/ person",
+              description: "Handcrafted experience with luxury touches.",
+              primaryButton: {
+                text: "Book",
+                href: "/contact",
+              },
+              featuresTitle: "Includes:",
+              features: [
+                "Private transport",
+                "Luxury Riads",
+                "Expert historians",
+                "Full board",
+              ],
+            },
+          ]}
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}
diff --git a/src/pages/HomePage/sections/SocialProof.tsx b/src/pages/HomePage/sections/SocialProof.tsx
new file mode 100644
index 0000000..002c9ed
--- /dev/null
+++ b/src/pages/HomePage/sections/SocialProof.tsx
@@ -0,0 +1,27 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "social-proof" section.
+
+import React from 'react';
+import SocialProofMarquee from '@/components/sections/social-proof/SocialProofMarquee';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function SocialProofSection(): React.JSX.Element {
+  return (
+    <div id="social-proof" data-section="social-proof">
+        <SectionErrorBoundary name="social-proof">
+              <SocialProofMarquee
+          tag="Trusted By"
+          title="World-Class Travelers"
+          description="Our journeys are designed for discerning adventurers."
+          names={[
+            "Explorer Magazine",
+            "Travel Weekly",
+            "Wanderlust Guide",
+            "Culture Trip",
+            "Global Nomads",
+          ]}
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}
diff --git a/src/pages/HomePage/sections/Team.tsx b/src/pages/HomePage/sections/Team.tsx
new file mode 100644
index 0000000..900f252
--- /dev/null
+++ b/src/pages/HomePage/sections/Team.tsx
@@ -0,0 +1,37 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "team" section.
+
+import React from 'react';
+import TeamOverlayCardsGrid from '@/components/sections/team/TeamOverlayCardsGrid';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function TeamSection(): React.JSX.Element {
+  return (
+    <div id="team" data-section="team">
+        <SectionErrorBoundary name="team">
+              <TeamOverlayCardsGrid
+          tag="Our Experts"
+          title="Meet The Team"
+          description="Our dedicated specialists in Algerian tourism."
+          members={[
+            {
+              name: "Sarah Ahmed",
+              role: "Lead Guide",
+              imageSrc: "https://images.pexels.com/photos/8111887/pexels-photo-8111887.jpeg?auto=compress&cs=tinysrgb&h=650&w=940",
+            },
+            {
+              name: "Karim Bellal",
+              role: "Heritage Expert",
+              imageSrc: "https://images.pexels.com/photos/5699475/pexels-photo-5699475.jpeg?auto=compress&cs=tinysrgb&h=650&w=940",
+            },
+            {
+              name: "Amira Ziani",
+              role: "Logistics Manager",
+              imageSrc: "https://images.pexels.com/photos/8871934/pexels-photo-8871934.jpeg?auto=compress&cs=tinysrgb&h=650&w=940",
+            },
+          ]}
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}