From 62fb7c7ba424661fa41fe25bc268d2b4c7468654 Mon Sep 17 00:00:00 2001
From: Anthony Ettinger <anthony@chovy.com>
Date: Sun, 12 Jul 2026 15:15:47 +0000
Subject: [PATCH] Move CrawlProof ad into page content (was below footer)

The installer PR (#39) injected a bare <div data-cp-ad> before </body>,
so the 300x250 ad rendered below the footer on every page. Relocate it
into an AdUnit component placed on the home page between Trending Coupons
and Popular Stores; the ad.js loader stays global.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 apps/web/app/layout.tsx        |  4 ++--
 apps/web/app/page.tsx          |  4 ++++
 apps/web/components/AdUnit.tsx | 22 ++++++++++++++++++++++
 3 files changed, 28 insertions(+), 2 deletions(-)
 create mode 100644 apps/web/components/AdUnit.tsx

diff --git a/apps/web/app/layout.tsx b/apps/web/app/layout.tsx
index f4b10fa..c3a3ff8 100644
--- a/apps/web/app/layout.tsx
+++ b/apps/web/app/layout.tsx
@@ -82,8 +82,8 @@ export default function RootLayout({
         <main className="max-w-7xl mx-auto px-4 py-10">{children}</main>
         <Footer />
         <Script data-site="e615d01b-b475-4df6-8d72-c6f60acfcf04" src="https://crawlproof.com/stats.js" strategy="afterInteractive" />
-      <script async src="https://feedback.profullstack.com/embed/profullstack-feedback.js" data-property="c0upons.com"></script>        <div data-cp-ad="" data-slot="3cdc1ebf-cdad-4079-926a-5096837cf2b2" data-format="banner_300x250" />
-      <Script src="https://crawlproof.com/ad.js" strategy="afterInteractive" />
+      <script async src="https://feedback.profullstack.com/embed/profullstack-feedback.js" data-property="c0upons.com"></script>
+        <Script src="https://crawlproof.com/ad.js" strategy="afterInteractive" />
       </body>
     </html>
   );
diff --git a/apps/web/app/page.tsx b/apps/web/app/page.tsx
index 895f2d1..808b207 100644
--- a/apps/web/app/page.tsx
+++ b/apps/web/app/page.tsx
@@ -5,6 +5,7 @@ import Link from 'next/link';
 import CouponCard from '@/components/CouponCard';
 import StoreCard from '@/components/StoreCard';
 import SearchBar from '@/components/SearchBar';
+import AdUnit from '@/components/AdUnit';
 import { getDb } from '@/lib/db';
 import { Coupon, Store } from '@/lib/types';
 
@@ -187,6 +188,9 @@ export default async function HomePage() {
         )}
       </section>
 
+      {/* Advertisement */}
+      <AdUnit />
+
       {/* Top Stores */}
       <section>
         <div className="flex items-center justify-between mb-5">
diff --git a/apps/web/components/AdUnit.tsx b/apps/web/components/AdUnit.tsx
new file mode 100644
index 0000000..d99cb58
--- /dev/null
+++ b/apps/web/components/AdUnit.tsx
@@ -0,0 +1,22 @@
+const AD_SLOT = '3cdc1ebf-cdad-4079-926a-5096837cf2b2';
+
+/**
+ * Renders a CrawlProof ad slot inline within page content.
+ * The global crawlproof.com/ad.js loader (in app/layout.tsx) finds the
+ * `data-cp-ad` element and fills it in place with a 300x250 iframe.
+ */
+export default function AdUnit({ className = '' }: { className?: string }) {
+  return (
+    <div className={`flex flex-col items-center ${className}`}>
+      <span className="mb-2 text-[11px] font-medium uppercase tracking-widest text-gray-400">
+        Advertisement
+      </span>
+      <div
+        data-cp-ad=""
+        data-slot={AD_SLOT}
+        data-format="banner_300x250"
+        style={{ minWidth: 300, minHeight: 250 }}
+      />
+    </div>
+  );
+}