Feat : first ad component added

Author: Sohan-Rout

app/components/ads/bottom.jsx

@@ -0,0 +1,101 @@
+"use client";
+import React, { useEffect, useState } from "react";
+import { FaChevronUp, FaChevronDown } from "react-icons/fa";
+
+const BottomAd = () => {
+  const [isClient, setIsClient] = useState(false);
+  const [minimized, setMinimized] = useState(false);
+
+  useEffect(() => {
+    setIsClient(true);
+
+    if (typeof window !== "undefined") {
+      // Load AdSense script once
+      const scriptId = "adsbygoogle-js";
+      if (!document.getElementById(scriptId)) {
+        const script = document.createElement("script");
+        script.id = scriptId;
+        script.async = true;
+        script.src =
+          "https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-4311738896428559";
+        script.crossOrigin = "anonymous";
+        document.head.appendChild(script);
+      }
+    }
+  }, []);
+
+  useEffect(() => {
+    if (isClient) {
+      try {
+        (window.adsbygoogle = window.adsbygoogle || []).push({});
+      } catch (e) {
+        console.warn("AdSense error:", e);
+      }
+    }
+  }, [isClient]);
+
+  if (!isClient) return null;
+
+  // Detect environment for test ads
+  const isDev =
+    window.location.hostname === "localhost" ||
+    window.location.hostname === "127.0.0.1";
+
+  return (
+    <div
+      style={{
+        position: "fixed",
+        bottom: 0,
+        left: 0,
+        width: "100%",
+        background: "#fff",
+        boxShadow: "0 -2px 8px rgba(0,0,0,0.1)",
+        zIndex: 9999,
+        transition: "height 0.3s ease",
+        height: minimized ? "36px" : "120px",
+        overflow: "hidden",
+        textAlign: "center",
+        padding: minimized ? "0" : "4px 0",
+      }}
+    >
+      <button
+        onClick={() => setMinimized(!minimized)}
+        style={{
+          position: "absolute",
+          right: "8px",
+          top: "4px",
+          background: "transparent",
+          border: "none",
+          fontSize: "16px",
+          cursor: "pointer",
+          color: "#444",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+        }}
+        aria-label={minimized ? "Expand Ad" : "Minimize Ad"}
+      >
+        {minimized ? <FaChevronUp /> : <FaChevronDown />}
+      </button>
+
+      {minimized ? (
+        <div style={{ fontSize: "13px", padding: "6px", color: "#555" }}>
+          Ad minimized — click ▲ to reopen
+        </div>
+      ) : (
+        <ins
+          className="adsbygoogle"
+          style={{ display: "block", height: "100px" }}
+          data-ad-client={
+            isDev ? "ca-pub-3940256099942544" : "ca-pub-4311738896428559"
+          }
+          data-ad-slot={isDev ? "6300978111" : "2048540881"}
+          data-ad-format="auto"
+          data-full-width-responsive="true"
+        ></ins>
+      )}
+    </div>
+  );
+};
+
+export default BottomAd;

app/page.jsx

@@ -6,6 +6,7 @@ import Review from "@/app/components/review";
 import Testimonial from "@/app/components/testimonial";
 import Faq from "@/app/components/faq";
 import Footer from "@/app/components/footer";
+import BottomAd from "./components/ads/bottom";
 
 export const metadata = {
   title: 'DSA Visualizer | Visualize & Learn DSA the Smart Way',
@@ -42,27 +43,32 @@ export const metadata = {
 
 export default function Home() {
   return (
-    <div className="min-h-screen bg-gray-100">
-      <Navbar />
-      <div id="hero">
-        <Hero />
+    <>
+      <div className="min-h-screen bg-gray-100">
+        <Navbar />
+        <div id="hero">
+          <Hero />
+        </div>
+        <div id="testimonial">
+          <Testimonial/>
+        </div>
+        <div id="features">
+          <Feature />
+        </div>
+        <div id="about">
+          <About />
+        </div>
+        <div id="faq">
+          <Faq />
+        </div>
+        <div id="review">
+          <Review/>
+        </div>
+        <Footer />
       </div>
-      <div id="testimonial">
-        <Testimonial/>
-      </div>
-      <div id="features">
-        <Feature />
-      </div>
-      <div id="about">
-        <About />
-      </div>
-      <div id="faq">
-        <Faq />
-      </div>
-      <div id="review">
-        <Review/>
-      </div>
-      <Footer />
-    </div>
+
+      {/* Floating Ad — always visible at bottom */}
+      <BottomAd />
+    </>
   );
 }