feat: design Explore 404 wrapper page

src/pages/explore-404-wrapper/FAQ.tsx

@@ -0,0 +1,26 @@
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
+
+export default function FAQ() {
+  return (
+    <section>
+      <h2 className="text-primary-foreground text-xl mb-5">FAQ</h2>
+
+      <Accordion type="single" collapsible>
+        <AccordionItem value="item-1">
+          <AccordionTrigger>What is 404 Wrapper?</AccordionTrigger>
+          <AccordionContent>
+            Inspired by ERC404, the SyncSwap 404 Wrapper introduces a new
+            technology to wrap existing ERC721 NFTs into fungible 404 tokens.
+            These transformed tokens can seamlessly integrate into DeFi apps,
+            functioning just like standard ERC20 tokens.
+          </AccordionContent>
+        </AccordionItem>
+      </Accordion>
+    </section>
+  );
+}

src/pages/explore-404-wrapper/FeaturedCollection.tsx

@@ -0,0 +1,122 @@
+import ConnectWalletDialog from "@/components/ConnectWalletDialog";
+import { Card, CardContent } from "@/components/ui/card";
+import { Dialog, DialogTrigger } from "@/components/ui/dialog";
+import { useEffect, useState } from "react";
+import { FaArrowRightLong } from "react-icons/fa6";
+import { IoMdWallet } from "react-icons/io";
+import { MdOutlineArrowOutward, MdOutlineRestartAlt } from "react-icons/md";
+import { PiPulse } from "react-icons/pi";
+import { Link } from "react-router-dom";
+
+export default function FeaturedCollection() {
+  const [isRefreshingBalance, setIsRefreshingBalance] = useState(false);
+
+  useEffect(() => {
+    let timeoutId: NodeJS.Timeout;
+    if (isRefreshingBalance) {
+      timeoutId = setTimeout(() => {
+        setIsRefreshingBalance(false);
+      }, 2000);
+    }
+    return () => clearTimeout(timeoutId);
+  }, [isRefreshingBalance]);
+  return (
+    <section className="px-7">
+      <h2 className="text-primary-foreground flex gap-x-5 text-2xl items-center">
+        LIBERTAS OMNIBUS ∎
+        <span className="text-card-foreground text-sm Featured Collection">
+          Featured Collection
+        </span>
+      </h2>
+
+      <div className="flex gap-10 mt-6 flex-wrap sm:flex-nowrap">
+        <div className="group cursor-pointer relative shadow-thin flex items-center rounded-3xl h-[200px] w-[200px] md:h-[300px] md:w-[300px] lg:h-[455px] lg:w-[445px] overflow-hidden border-4 border-primary/[0.7]">
+          <div className="opacity-[0.98] mt-1">
+            <img
+              src="/images/omnibus2_original.jpg"
+              className="h-[200px] w-[200px] md:h-[300px] md:w-[300px] lg:h-[455px] lg:w-[445px]"
+            />
+          </div>
+          <div className="absolute z-20">
+            <img
+              className="hidden group-hover:block h-[200px] w-[200px] md:h-[300px] md:w-[300px] lg:h-[455px] lg:w-[445px]"
+              src="https://inventory-assets.summon.xyz/zksync/zksync-capsule.gif"
+            />
+          </div>
+          <div className="absolute z-10">
+            <img
+              className="hidden group-hover:block h-[200px] w-[200px] md:h-[300px] md:w-[300px] lg:h-[455px] lg:w-[445px]"
+              src="/images/omnibus2.jpg"
+            />
+          </div>
+        </div>
+
+        <section>
+          <h3 className="text-3xl text-primary-foreground">
+            Join the ZK Revolution
+          </h3>
+          <p className="text-primary-foreground text-sm mt-3 tracking-wide font-medium mb-1">
+            Our collective mission is to advance personal freedom for all.
+          </p>
+          <p className="text-primary-foreground text-sm mb-3 tracking-wide font-medium">
+            LIBERTAS OMNIBUS is an experimental NFT project by zkSync.
+          </p>
+
+          <Link
+            className="flex gap-x-2 item-center text-card-foreground text-sm p-2 mb-10 hover:bg-primary/[0.04] w-max rounded-md"
+            to="https://twitter.com/zksync/status/1691808445224087555?lang=en"
+          >
+            Learn more about LIBERTAS OMNIBUS
+            <MdOutlineArrowOutward />
+          </Link>
+
+          <Card className="mb-5 shadow">
+            <CardContent className="space-y-5">
+              <article className="flex items-center justify-between">
+                <p className="text-primary flex gap-x-2 items-center">
+                  <IoMdWallet fontSize={25} />
+                  Your Balance
+                </p>
+
+                <div
+                  onClick={() => {
+                    setIsRefreshingBalance(true);
+                  }}
+                  className="text-card-foreground cursor-pointer transition-all p-1 hover:bg-primary/[0.04] active:scale-90"
+                >
+                  <MdOutlineRestartAlt
+                    fontSize={20}
+                    className={`${isRefreshingBalance === true ? "animate-spin" : null}`}
+                    style={{
+                      animationDuration: "800ms",
+                    }}
+                  />
+                </div>
+              </article>
+
+              <div className="space-y-3">
+                <p className="text-card-foreground">NFTS</p>
+                <p className="text-card-foreground">Tokens</p>
+              </div>
+            </CardContent>
+          </Card>
+
+          <Dialog>
+            <DialogTrigger asChild>
+              <Card className="cursor-pointer transition-all rounded-3xl shadow active:scale-90 active:bg-primary/[.50]">
+                <CardContent className="flex text-primary justify-between py-5 px-7">
+                  <div className="flex gap-x-3">
+                    <PiPulse fontSize={20} fontWeight={60} />
+                    Connect Wallet
+                  </div>
+                  <FaArrowRightLong />
+                </CardContent>
+              </Card>
+            </DialogTrigger>
+            <ConnectWalletDialog />
+          </Dialog>
+        </section>
+      </div>
+    </section>
+  );
+}

src/pages/explore-404-wrapper/WelcomeCard.tsx

@@ -0,0 +1,32 @@
+import { Card, CardContent } from "@/components/ui/card";
+
+export default function WelcomeCard() {
+  return (
+    <Card>
+      <CardContent className="p-7 relative">
+        <h2 className="text-primary mb-2 text-lg">
+          Welcome to SyncSwap 404 Wrapper
+        </h2>
+        <p className="text-card-foreground max-w-[60%] text-sm">
+          The 404 Wrapper bridges the gap between the world of NFTs and fungible
+          tokens. Get started by wrapping your NFTs into 404 tokens today.
+        </p>
+        <div className="absolute opacity-50 right-[30px] bottom-[15px]">
+          <svg
+            width="100"
+            height="100"
+            viewBox="0 0 24 24"
+            stroke="none"
+            fill="#5155a6"
+          >
+            <path
+              fillRule="evenodd"
+              clipRule="evenodd"
+              d="M1 16.757a3.026 3.026 0 001.653 2.698l8 4a3 3 0 002.684 0l8-4A3 3 0 0023 16.77V7.23a3.026 3.026 0 00-1.665-2.686L13.337.546a3 3 0 00-2.684 0l-8 4A3.026 3.026 0 001 7.243v9.514zm20 .013a1 1 0 01-.555.895h-.002L13 21.388v-9.769l8-4v9.152zM19.77 5.998l-7.327-3.664a1 1 0 00-.896 0L9.226 3.495 17 7.382l2.77-1.384zM6.99 4.613L4.226 5.995 12 9.882 14.764 8.5 6.99 4.613zM3 7.618l8 4v9.774l-7.45-3.725h-.001a1 1 0 01-.549-.9V7.618z"
+            ></path>
+          </svg>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

src/pages/explore-404-wrapper/index.tsx

@@ -1,3 +1,18 @@
+import Footer from "@/components/Footer";
+import WelcomeCard from "./WelcomeCard";
+import FeaturedCollection from "./FeaturedCollection";
+import FAQ from "./FAQ";
+
 export default function Explore404Wrapper() {
-  return <div>Explore404Wrapper</div>;
+  return (
+    <>
+      <main className="relative overflow-auto pt-28 pb-20 min-h-screen max-w-screen-lg mx-auto space-y-14 p-4">
+        <WelcomeCard />
+        <FeaturedCollection />
+        <FAQ />
+      </main>
+
+      <Footer />
+    </>
+  );
 }