Move CrawlProof ad out of layout body into page content (#492)

ralyodio · claude · web-flow · commit 59462313a1f1 · 2026-07-07T17:24:44.000-07:00
The "Add CrawlProof ad unit" bot (#491) injected a bare <div data-cp-ad> at the tail of <body> in app/layout.tsx, so the 300x250 ad rendered below the footer on every page. Replace it with an <AdUnit /> component placed inside real page content on the home, gigs, for-hire, and blog list + detail views. The ad.js loader stays global in the layout. Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com>
diff --git a/src/app/blog/[slug]/page.tsx b/src/app/blog/[slug]/page.tsx
@@ -1,6 +1,7 @@
 import { notFound } from "next/navigation";
 import Link from "next/link";
 import { Header } from "@/components/layout/Header";
+import { AdUnit } from "@/components/AdUnit";
 import { createServiceClient } from "@/lib/supabase/service";
 
 export const dynamic = "force-dynamic";
@@ -80,6 +81,8 @@ export default async function BlogPost({ params }: { params: Promise<{ slug: str
         ) : (
           <p className="mt-6 text-muted-foreground">This post has no body content.</p>
         )}
+
+        <AdUnit />
       </main>
     </>
   );
diff --git a/src/app/blog/page.tsx b/src/app/blog/page.tsx
@@ -1,6 +1,7 @@
 import Image from "next/image";
 import Link from "next/link";
 import { Header } from "@/components/layout/Header";
+import { AdUnit } from "@/components/AdUnit";
 import { createServiceClient } from "@/lib/supabase/service";
 
 export const metadata = {
@@ -142,6 +143,8 @@ export default async function BlogIndex() {
             ))}
           </ul>
         )}
+
+        <AdUnit />
       </main>
     </>
   );
diff --git a/src/app/for-hire/[[...tags]]/page.tsx b/src/app/for-hire/[[...tags]]/page.tsx
@@ -7,6 +7,7 @@ import { GigFiltersWithTags } from "@/components/gigs/GigFiltersWithTags";
 import { Button } from "@/components/ui/button";
 import { Skeleton } from "@/components/ui/skeleton";
 import { Header } from "@/components/layout/Header";
+import { AdUnit } from "@/components/AdUnit";
 import { parsePageParam } from "@/lib/pagination";
 import { fetchGigs } from "@/lib/gigs/fetch-gigs";
 import type { GigCardData } from "@/components/gigs/GigCard";
@@ -214,6 +215,8 @@ export default async function ForHirePage({ params, searchParams }: GigsPageProp
               <GigsList params={params} searchParams={searchParams} />
             </Suspense>
           </div>
+
+          <AdUnit />
         </div>
       </main>
     </div>
diff --git a/src/app/gigs/[[...tags]]/page.tsx b/src/app/gigs/[[...tags]]/page.tsx
@@ -7,6 +7,7 @@ import { GigFiltersWithTags } from "@/components/gigs/GigFiltersWithTags";
 import { Button } from "@/components/ui/button";
 import { Skeleton } from "@/components/ui/skeleton";
 import { Header } from "@/components/layout/Header";
+import { AdUnit } from "@/components/AdUnit";
 import { hasActiveGigFilters } from "@/lib/gigs/filter-state";
 import { parsePageParam } from "@/lib/pagination";
 import { fetchGigs } from "@/lib/gigs/fetch-gigs";
@@ -220,6 +221,8 @@ export default async function GigsPage({ params, searchParams }: GigsPageProps)
               <GigsList params={params} searchParams={searchParams} />
             </Suspense>
           </div>
+
+          <AdUnit />
         </div>
       </main>
     </div>
diff --git a/src/app/gigs/[id]/page.tsx b/src/app/gigs/[id]/page.tsx
@@ -30,6 +30,7 @@ import { PriceBox, PriceBoxRow } from "@/components/ui/PriceBox";
 import { ZapButton } from "@/components/zaps/ZapButton";
 import { GigTestimonialSection } from "@/components/testimonials/GigTestimonialSection";
 import { HiredWorkerReview } from "@/components/gigs/HiredWorkerReview";
+import { AdUnit } from "@/components/AdUnit";
 import { createServiceClient } from "@/lib/supabase/service";
 
 interface GigPageProps {
@@ -550,6 +551,8 @@ export default async function GigPage({ params }: GigPageProps) {
 
             {/* Escrow Services */}
             <EscrowBadge variant="compact" />
+
+            <AdUnit className="my-0" />
           </div>
         </div>
       </main>
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -101,7 +101,6 @@ export default function RootLayout({
         />
               <Script data-site="3b787b18-f8e1-473f-8285-b90d657f5642" src="https://crawlproof.com/stats.js" strategy="afterInteractive" />
       <script async src="https://feedback.profullstack.com/embed/profullstack-feedback.js" data-property="ugig.net"></script>
-              <div data-cp-ad="" data-slot="9384bcb3-7375-4f33-b671-c73a63bd2b12" data-format="banner_300x250" />
       <Script src="https://crawlproof.com/ad.js" strategy="afterInteractive" />
       </body>
     </html>
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -1,6 +1,7 @@
 import Link from "next/link";
 import { Search, Users, Video, Zap, Check, ArrowRight, Sparkles, Bot, Terminal, Key, Download } from "lucide-react";
 import { Header } from "@/components/layout/Header";
+import { AdUnit } from "@/components/AdUnit";
 import { createClient } from "@/lib/supabase/server";
 
 async function getAuthStatus() {
@@ -344,6 +345,10 @@ ugig config set api_key ugig_live_... # store your API key`}</code></pre>
             </div>
           </div>
         </section>
+
+        <div className="container mx-auto px-4">
+          <AdUnit />
+        </div>
       </main>
 
     </div>
diff --git a/src/components/AdUnit.tsx b/src/components/AdUnit.tsx
@@ -0,0 +1,21 @@
+/**
+ * CrawlProof ad slot, rendered inside page content (never at the tail of
+ * <body>, which puts it below the footer). The global ad.js loader in the
+ * root layout fills every [data-cp-ad] slot in place with a 300x250 iframe.
+ */
+const CP_AD_SLOT = "9384bcb3-7375-4f33-b671-c73a63bd2b12";
+
+export function AdUnit({ className = "" }: { className?: string }) {
+  return (
+    <div className={`my-8 flex flex-col items-center ${className}`}>
+      <span className="mb-1 text-[10px] uppercase tracking-wide text-muted-foreground">
+        Advertisement
+      </span>
+      <div
+        data-cp-ad=""
+        data-slot={CP_AD_SLOT}
+        data-format="banner_300x250"
+      />
+    </div>
+  );
+}
