Create sticky box and add it to the landing page

packages/nextjs/app/page.tsx

@@ -1,8 +1,7 @@
 "use client";
 
 import type { NextPage } from "next";
-import { Faq, Hero, PrizeInfo } from "~~/components/extensions-hackathon/";
-import { Timeline } from "~~/components/extensions-hackathon/Timeline";
+import { Faq, Hero, PrizeInfo, StickySubmissionInfo, Timeline } from "~~/components/extensions-hackathon/";
 
 const Home: NextPage = () => {
   return (
@@ -11,6 +10,7 @@ const Home: NextPage = () => {
       <PrizeInfo />
       <Timeline />
       <Faq />
+      <StickySubmissionInfo />
     </div>
   );
 };

packages/nextjs/components/Footer.tsx

@@ -1,46 +1,13 @@
 import React from "react";
-import Link from "next/link";
-import { hardhat } from "viem/chains";
-import { CurrencyDollarIcon, MagnifyingGlassIcon } from "@heroicons/react/24/outline";
 import { HeartIcon } from "@heroicons/react/24/outline";
 import { BuidlGuidlLogo } from "~~/components/assets/BuidlGuidlLogo";
-import { Faucet } from "~~/components/scaffold-eth";
-import { useTargetNetwork } from "~~/hooks/scaffold-eth/useTargetNetwork";
-import { useGlobalState } from "~~/services/store/store";
 
 /**
  * Site footer
  */
 export const Footer = () => {
-  const nativeCurrencyPrice = useGlobalState(state => state.nativeCurrency.price);
-  const { targetNetwork } = useTargetNetwork();
-  const isLocalNetwork = targetNetwork.id === hardhat.id;
-
   return (
     <div className="min-h-0 py-5 px-1 mb-11 lg:mb-0">
-      <div>
-        <div className="fixed flex justify-between items-center w-full z-10 p-4 bottom-0 left-0 pointer-events-none">
-          <div className="flex flex-col md:flex-row gap-2 pointer-events-auto">
-            {nativeCurrencyPrice > 0 && (
-              <div>
-                <div className="btn btn-primary btn-sm font-normal gap-1 cursor-auto">
-                  <CurrencyDollarIcon className="h-4 w-4" />
-                  <span>{nativeCurrencyPrice.toFixed(2)}</span>
-                </div>
-              </div>
-            )}
-            {isLocalNetwork && (
-              <>
-                <Faucet />
-                <Link href="/blockexplorer" passHref className="btn btn-primary btn-sm font-normal gap-1">
-                  <MagnifyingGlassIcon className="h-4 w-4" />
-                  <span>Block Explorer</span>
-                </Link>
-              </>
-            )}
-          </div>
-        </div>
-      </div>
       <div className="w-full">
         <ul className="menu menu-horizontal w-full">
           <div className="flex justify-center items-center gap-2 text-sm w-full">

packages/nextjs/components/extensions-hackathon/StickySubmissionInfo.tsx

@@ -0,0 +1,50 @@
+import { useState } from "react";
+import Link from "next/link";
+
+export const StickySubmissionInfo = () => {
+  const [isVisible, setIsVisible] = useState(true);
+
+  if (!isVisible) {
+    return (
+      <button
+        onClick={() => setIsVisible(true)}
+        className="fixed bottom-4 right-6 bg-white p-2 shadow-lg border border-1 border-black 2xl:p-3 2xl:bottom-6 2xl:right-8"
+        aria-label="Open submission info"
+      >
+        <span className="text-base 2xl:text-xl">✨</span>
+      </button>
+    );
+  }
+
+  return (
+    <div className="fixed bottom-0 mx-6 left-0 right-0 md:bottom-4 md:right-6 md:left-auto bg-white p-4 md:p-6 shadow-lg border border-1 border-black md:max-w-[calc(100%-3rem)] 2xl:p-8 2xl:bottom-6 2xl:right-8">
+      <button
+        onClick={() => setIsVisible(false)}
+        className="absolute top-3 right-4 text-gray-500 hover:text-gray-700 2xl:top-4 2xl:right-6 2xl:text-xl"
+        aria-label="Close"
+      >
+        ✕
+      </button>
+      <h2 className="text-2xl underline mb-0 md:mb-4 2xl:text-3xl 2xl:mb-6">
+        Submissions <br className="hidden md:inline" /> open
+      </h2>
+      <p className="md:mb-10 mt-2 2xl:text-xl 2xl:mb-12 2xl:mt-4">AUG 20 - SEP 2</p>
+      <div className="flex md:block space-x-2 2xl:space-x-4">
+        <Link
+          href="/submit"
+          className="bg-[#B7EBEC] py-2 px-2 sm:px-4 border border-1 border-black text-center flex-1 2xl:py-3 2xl:px-6 text-sm sm:text-base 2xl:text-xl"
+        >
+          Apply
+        </Link>
+        <a
+          href="https://t.me/+jgKFHjb9B_cyNmMx"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="bg-accent py-2 px-2 sm:px-4 border border-1 border-black text-center flex-1 2xl:py-3 2xl:px-6 text-sm sm:text-base 2xl:text-xl"
+        >
+          Join Telegram
+        </a>
+      </div>
+    </div>
+  );
+};

packages/nextjs/components/extensions-hackathon/index.tsx

@@ -1,3 +1,5 @@
 export * from "./Faq";
 export * from "./Hero";
 export * from "./PrizeInfo";
+export * from "./StickySubmissionInfo";
+export * from "./Timeline";