feat: styles

apps/nextjs/src/app/_components/Footer.tsx

@@ -23,10 +23,14 @@ export const Footer = () => {
       name: "Brand Assets",
       href: "https://drive.google.com/drive/folders/17vrwIjwqifxBVTkHmxoK1VhQ31hVSbDH",
     },
+    {
+      name: "Shop",
+      href: "https://shop.realms.world",
+    },
   ];
 
   return (
-    <div className="my-24 w-full ">
+    <div className="p my-24 w-full px-4">
       <div className="pt-10 sm:pl-56">
         <div className="w-full">
           <h1>Realms.World</h1>

apps/nextjs/src/app/_components/PageLayout.tsx

@@ -0,0 +1,16 @@
+interface PageLayoutProps {
+  children: React.ReactNode;
+  title: string;
+}
+
+export const PageLayout = ({ title, children }: PageLayoutProps) => {
+  return (
+    <div className=" w-full pt-12 sm:pl-32 sm:pt-0">
+      <div className="container mx-auto px-4">
+        <h1 className="mb-8">{title}</h1>
+        <hr className="my-8 border" />
+        {children}
+      </div>
+    </div>
+  );
+};

apps/nextjs/src/app/collection/CollectionsList.tsx

@@ -41,7 +41,7 @@ export default async function CollectionsList() {
   ];
 
   return (
-    <div className="grid w-full grid-cols-1 gap-6 ">
+    <div className="grid w-full grid-cols-1 gap-6 px-4 sm:px-0">
       {collections?.map((collection: Collection, index) => {
         return <CollectionCard collection={collection} key={index} />;
       })}

apps/nextjs/src/app/collection/[id]/(list)/AttributesDropdown.tsx

@@ -42,19 +42,19 @@ export const AttributesDropdown = ({
 
   return (
     <div
-      className={` ${"hidden"} w-screen overscroll-y-none p-3 sm:block sm:w-24 sm:flex-none sm:overscroll-auto lg:w-72`}
+      className={` ${"hidden"} w-screen overscroll-y-none pr-6 sm:block sm:w-24 sm:flex-none sm:overscroll-auto lg:w-72`}
     >
-      <div className="sticky  top-0 z-[100] overflow-y-auto pt-12">
-        <ScrollArea className="border bg-dark-green px-2">
+      <div className="sticky top-10 z-[100]">
+        <ScrollArea className="h-[600px] border-2 bg-dark-green px-3">
           <Button className="sm:hidden" variant={"default"}>
             Close
           </Button>
           {finalAttributes?.map((attribute: any, index: number) => {
             return (
               <Accordion key={index} type="single" collapsible>
                 <AccordionItem value="item-1">
-                  <AccordionTrigger className="text-lg">
-                    {attribute.key}
+                  <AccordionTrigger className="bg-primary px-2 text-sm">
+                    {attribute.key} ({attribute.values.length})
                   </AccordionTrigger>
                   <AccordionContent>
                     <div className="pt-1">
@@ -77,7 +77,7 @@ export const AttributesDropdown = ({
                                     attribute.key == "Resource",
                                   )
                                 }
-                                className="my-1 mr-1"
+                                className="font-body my-1 mr-1"
                               >
                                 {a.value} ({a.tokenCount})
                               </Button>

apps/nextjs/src/app/collection/[id]/(list)/L2CollectionSummary.tsx

@@ -60,7 +60,7 @@ export default async function L2CollectionSummary({
   //const comptatible_games = getGamesByContract(games, collection.id);
 
   return (
-    <div className="sm:mt-10 sm:flex">
+    <div className="px-4 sm:mt-10 sm:flex">
       <div className="flex-none self-center sm:pr-10">
         <Image
           src={`/collections/${collectionId}.svg`}

apps/nextjs/src/app/collection/[id]/(list)/L2ERC721Card.tsx

@@ -44,22 +44,10 @@ export const L2ERC721Card = ({
               />
             )}
             {isGrid && (
-              <span className="absolute bottom-3 right-3 border bg-black px-3 py-1 font-sans text-xs">
+              <span className="absolute bottom-1 right-1 bg-black px-1 py-1 text-xs">
                 #{token.token_id}
               </span>
             )}
-
-            {isGrid && (
-              <div className="absolute left-3 top-3 border bg-black  text-xs">
-                <Button
-                  size={"xs"}
-                  variant={"ghost"}
-                  href={`/user/${token.owner ?? token.minter ?? ""}`}
-                >
-                  {useStarkDisplayName(token.owner ?? token.minter ?? "")}
-                </Button>
-              </div>
-            )}
           </div>
         </Link>
       </div>

apps/nextjs/src/app/collection/page.tsx

@@ -1,3 +1,4 @@
+import { PageLayout } from "../_components/PageLayout";
 import CollectionsList from "./CollectionsList";
 
 export const metadata = {
@@ -9,15 +10,9 @@ export const metadata = {
 export default async function Page() {
   return (
     <>
-      <div className=" w-full sm:pl-32 ">
-        <div className="container mx-auto ">
-          <h1 className="mb-8">Collections</h1>
-
-          <hr className="my-8 border" />
-
-          <CollectionsList />
-        </div>
-      </div>
+      <PageLayout title="Collections">
+        <CollectionsList />
+      </PageLayout>
     </>
   );
 }

apps/nextjs/src/app/games/page.tsx

@@ -3,6 +3,8 @@ import { GameCard } from "@/app/games/GameCard";
 import type { Game } from "@realms-world/constants";
 import { games } from "@realms-world/constants";
 
+import { PageLayout } from "../_components/PageLayout";
+
 export const metadata = {
   title: "Games of the Realms",
   description:
@@ -11,18 +13,12 @@ export const metadata = {
 
 export default async function Page() {
   return (
-    <div className="sm:pl-32 ">
-      <div className="container mx-auto px-8">
-        <h1>Realms Autonomous World</h1>
-
-        <hr className="my-8 border" />
-
-        <div className="mt-8 grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
-          {games.map((game: Game, index) => (
-            <GameCard key={index} game={game} />
-          ))}
-        </div>
+    <PageLayout title="Games">
+      <div className="mt-8 grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
+        {games.map((game: Game, index) => (
+          <GameCard key={index} game={game} />
+        ))}
       </div>
-    </div>
+    </PageLayout>
   );
 }