Add cards about ABI and signatures, remove the notice banner

src/components/Header/index.tsx

@@ -83,6 +83,12 @@ const Header = ({ className }: { className?: string }) => {
             >
               Contract Repo
             </a>
+            <a
+              className="link-underline mx-2 my-2 lg:mx-6 hover:text-ceruleanBlue-500"
+              href="https://4byte.sourcify.dev"
+            >
+              4byte
+            </a>
             <a className="link-underline mx-2 my-2 lg:mx-6 hover:text-ceruleanBlue-500" href={DOCS_URL}>
               Docs
             </a>

src/pages/LandingPage/AboutSection.tsx

@@ -1,5 +1,5 @@
 import { motion } from "framer-motion";
-import { FaDownload } from "react-icons/fa";
+import { FaDownload, FaCheckCircle } from "react-icons/fa";
 
 const AboutSection = () => {
   const variants = {
@@ -11,6 +11,72 @@ const AboutSection = () => {
     <section className=" bg-gray-100 py-16" id="about">
       <div className="max-w-7xl mx-auto px-4 md:text-left text-center">
         <div className="space-y-12">
+          {/* What You Can Do Section */}
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true }}
+            transition={{ duration: 0.5, delay: 0.2 }}
+            className="mb-16"
+          >
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+              {/* Verify Contracts */}
+              <div className="group bg-white p-8 rounded-xl shadow-md hover:shadow-xl transition-all duration-300 border-2 border-transparent hover:border-ceruleanBlue-500">
+                <div className="text-center">
+                  <FaCheckCircle className="text-5xl mb-4 text-green-500 mx-auto" />
+                  <h3 className="text-2xl font-bold text-gray-800 mb-3 group-hover:text-ceruleanBlue-500 transition-colors">
+                    Verify Contracts
+                  </h3>
+                  <p className="text-gray-600">Verify Solidity and Vyper contracts with full metadata support</p>
+                </div>
+              </div>
+
+              {/* Get ABIs */}
+              <div className="group bg-white p-8 rounded-xl shadow-md hover:shadow-xl transition-all duration-300 border-2 border-transparent hover:border-ceruleanBlue-500">
+                <div className="text-center">
+                  <div className="text-5xl mb-4">📋</div>
+                  <h3 className="text-2xl font-bold text-gray-800 mb-3 group-hover:text-ceruleanBlue-500 transition-colors">
+                    ABIs
+                  </h3>
+                  <p className="text-gray-600">Fetch verified contract ABIs</p>
+                  <p className="text-gray-600 text-sm">
+                    {" "}
+                    <a
+                      href="https://sourcify.dev/server/v2/contract/1/0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48?fields=abi"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="text-ceruleanBlue-500 font-medium link-underline"
+                    >
+                      (Example) →
+                    </a>
+                  </p>
+                </div>
+              </div>
+
+              {/* 4byte Selectors */}
+              <div className="group bg-white p-8 rounded-xl shadow-md hover:shadow-xl transition-all duration-300 border-2 border-transparent hover:border-ceruleanBlue-500">
+                <div className="text-center">
+                  <div className="text-5xl mb-4">🔍</div>
+                  <h3 className="text-2xl font-bold text-gray-800 mb-3 group-hover:text-ceruleanBlue-500 transition-colors">
+                    4byte Selectors
+                  </h3>
+                  <p className="text-gray-600">
+                    Extensive signature database including signatures from verified contracts
+                  </p>
+                  <p className="text-gray-600 text-sm"></p>
+                  <a
+                    href="https://4byte.sourcify.dev/"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="text-ceruleanBlue-500 font-medium link-underline"
+                  >
+                    4byte.sourcify.dev →
+                  </a>
+                </div>
+              </div>
+            </div>
+          </motion.div>
+
           {/* Feature 1 */}
           <motion.div
             initial="hidden"

src/pages/LandingPage/index.tsx

@@ -15,7 +15,6 @@ import SupportedChains from "./SupportedChains";
 import Tooling from "./Tooling";
 import FAQ from "./FAQ";
 import Contact from "./Contact";
-import { IoMdClose } from "react-icons/io";
 import BigQueryExplorer from "../../components/BigQueryExplorer";
 
 SyntaxHighlighter.registerLanguage("solidity", solidityLang);
@@ -32,8 +31,7 @@ const LandingPage = () => {
   const MIN_VELOCITY = 0.1;
   const velocityRef = useRef({ x: MAX_VELOCITY, y: MAX_VELOCITY }); // Store velocity
   const positionRef = useRef({ x: 50, y: 50 }); // Store position
-  const [isVisible, setIsVisible] = useState(true);
-  const { pathname, hash, key } = useLocation()
+  const { pathname, hash, key } = useLocation();
 
   useEffect(() => {
     const element = document.querySelector(".spotlight-effect") as HTMLElement;
@@ -82,56 +80,32 @@ const LandingPage = () => {
 
   useEffect(() => {
     // Handle direct route to dataset-playground
-    if (pathname === '/dataset-playground') {
-      const element = document.getElementById('dataset-playground');
+    if (pathname === "/dataset-playground") {
+      const element = document.getElementById("dataset-playground");
       if (element) {
         setTimeout(() => {
-          element.scrollIntoView({ behavior: 'smooth', });
+          element.scrollIntoView({ behavior: "smooth" });
         }, 100);
       }
     }
   }, [pathname]);
 
   useEffect(() => {
-    if (hash !== '') {
+    if (hash !== "") {
       setTimeout(() => {
-        const id = hash.replace('#', '')
-        const element = document.getElementById(id)
+        const id = hash.replace("#", "");
+        const element = document.getElementById(id);
         if (element) {
           element.scrollIntoView({
-            behavior: 'smooth',
-          })
+            behavior: "smooth",
+          });
         }
-      }, 100)
+      }, 100);
     }
-  }, [pathname, hash, key])
+  }, [pathname, hash, key]);
 
   return (
     <div className="flex flex-col min-h-screen bg-gray-100 w-full">
-      {isVisible && (
-        <div className="bg-ceruleanBlue-500 text-white py-3 px-4 relative">
-          <div className="max-w-7xl mx-auto flex items-center justify-center gap-3">
-            <p className="text-sm sm:text-base text-center">
-              🚀 APIv2 is now available! Make the most of the information-rich responses{" "}
-              <a
-                href="https://docs.sourcify.dev/blog/apiv2-lookup-endpoints/"
-                className="underline font-semibold hover:text-ceruleanBlue-100"
-                target="_blank"
-                rel="noopener noreferrer"
-              >
-                Learn more →
-              </a>
-            </p>
-            <button
-              onClick={() => setIsVisible(false)}
-              className="absolute right-2 top-1/2 -translate-y-1/2 p-1 hover:bg-ceruleanBlue-400 rounded-full transition-colors"
-              aria-label="Close banner"
-            >
-              <IoMdClose className="h-5 w-5" />
-            </button>
-          </div>
-        </div>
-      )}
       <Header />
       <section className="min-h-screen flex flex-col justify-center px-8 md:px-12 -mt-20 pt-20 max-w-7xl mx-auto">
         <div className="flex flex-col justify-center items-center">
@@ -211,7 +185,10 @@ const LandingPage = () => {
       <AboutSection />
       <SupportedChains />
       {/* Verified contract stats */}
-      <section className="flex flex-col items-center px-8 md:px-12 lg:px-24 bg-gray-100 pt-24 pb-16" id="contract-stats">
+      <section
+        className="flex flex-col items-center px-8 md:px-12 lg:px-24 bg-gray-100 pt-24 pb-16"
+        id="contract-stats"
+      >
         <VerifiedContracts />
       </section>