add cta

app/page.tsx

@@ -11,6 +11,7 @@ import { CustomPieChart } from "@/components/pie-chart"
 import { SimpleArea } from "@/components/simple-area"
 import { Button } from "@/components/ui/button"
 import { GenericTable } from "@/components/simple-table"
+import { CTABanner } from "@/components/cta"
 
 export default function IndexPage() {
   const [conn, setConn] = useState<duckdb.AsyncDuckDBConnection | null>(null)
@@ -215,7 +216,10 @@ export default function IndexPage() {
           />
         </div>
       )}
-
+      <div className="my-48">
+        <CTABanner />
+      </div>
     </section>
+
   )
 }

components/cta.tsx

@@ -0,0 +1,35 @@
+import Link from 'next/link'
+import { Button } from "@/components/ui/button"
+import { Card, CardContent } from "@/components/ui/card"
+
+export function CTABanner() {
+  return (
+    <div className="space-y-6">
+      <Card className="rounded-lg bg-primary text-primary-foreground">
+        <CardContent className="flex flex-col items-center justify-between p-6 sm:flex-row">
+          <div className="mb-4 sm:mb-0">
+            <h3 className="text-2xl font-bold">Explore Data Further</h3>
+            <p className="mt-2">Find more interesting insights with the Hugging Face Data Explorer Chrome Extension</p>
+          </div>
+          <Button asChild variant="secondary" size="lg">
+            <Link href="https://chromewebstore.google.com/detail/hugging-face-data-explore/algkmpgdgbindfpddilldlogcbhpkhhd" target="_blank" rel="noopener noreferrer">
+              Get Chrome Extension
+            </Link>
+          </Button>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardContent className="p-0">
+          <iframe
+            src="https://huggingface.co/datasets/cfahlgren1/hub-stats/embed/viewer/datasets/train"
+            frameBorder="0"
+            width="100%"
+            height="560px"
+            title="Hugging Face Dataset Viewer"
+          />
+        </CardContent>
+      </Card>
+    </div>
+  )
+}