styles

BibliothecaDAO · Sep 1, 2024 · 09e195a · 09e195a
1 parent b9f9c11
commit 09e195a
Show file tree

Hide file tree

Showing 12 changed files with 2,336 additions and 2,401 deletions.
diff --git a/apps/nextjs/src/app/_components/PageLayout.tsx b/apps/nextjs/src/app/_components/PageLayout.tsx
@@ -23,10 +23,10 @@ const baseLayerWrapperVariants = cva([], {
 
 export const PageLayout = ({ title, children, size }: PageLayoutProps) => {
   return (
-    <div className="relative flex w-full flex-col space-y-6 pt-24 sm:pl-32">
+    <div className="relative flex w-full flex-col space-y-6 pt-24 sm:pl-32 ">
       <div
         className={cn(
-          "container mx-auto px-4",
+          "container mx-auto px-8",
           baseLayerWrapperVariants({ size }),
         )}
       >

diff --git a/apps/nextjs/src/app/collection/[id]/(list)/L2CollectionSummary.tsx b/apps/nextjs/src/app/collection/[id]/(list)/L2CollectionSummary.tsx
@@ -66,7 +66,7 @@ export default async function L2CollectionSummary({
     : [];
 
   return (
-    <div className="px-4 sm:mt-10 sm:flex">
+    <div className="px-4 sm:flex">
       <div className="flex-none self-center sm:pr-10">
         <Image
           src={`/collections/${collectionId}.svg`}
@@ -78,7 +78,7 @@ export default async function L2CollectionSummary({
       </div>
 
       <div>
-        <h1>{CollectionDetails[collectionId as Collections].displayName}</h1>
+        <h1 className="text-3xl sm:text-4xl">{CollectionDetails[collectionId as Collections].displayName}</h1>
         <ContractDetailsList contract_details={contract_details} />
 
         {compatibleGames.length > 0 && (

diff --git a/apps/nextjs/src/app/collection/[id]/(list)/layout.tsx b/apps/nextjs/src/app/collection/[id]/(list)/layout.tsx
@@ -44,7 +44,7 @@ export default function RootLayout({
             <NavLink
               key={tab.name}
               variant={"link"}
-              className="hover:text-flamingo/70"
+
               size={"sm"}
               exact
               href={`/collection/${params.id}${tab.link && "/" + tab.link}`}

diff --git a/apps/nextjs/src/app/games/[id]/layout.tsx b/apps/nextjs/src/app/games/[id]/layout.tsx
@@ -18,7 +18,7 @@ export default function RootLayout({
     ")";
   return (
     <div
-      className="mt-32 h-full w-full"
+      className="mt-24 h-full w-full"
       style={
         {
           "--image-url": imageUrl,

diff --git a/apps/nextjs/src/app/games/[id]/page.tsx b/apps/nextjs/src/app/games/[id]/page.tsx
@@ -203,7 +203,7 @@ export default async function Page({ params }: { params: { id: string } }) {
   ];
 
   return (
-    <main className="container mx-auto px-4">
+    <main className="container mx-auto px-8">
       <Breadcrumb>
         <BreadcrumbList>
           <BreadcrumbItem>
@@ -218,7 +218,7 @@ export default async function Page({ params }: { params: { id: string } }) {
 
       <div className="flex flex-wrap">
         <div className="my-4 w-full">
-          <h1 className="text-4xl font-bold">{game?.name}</h1>
+          <h1 className="text-3xl sm:text-5xl">{game?.name}</h1>
         </div>
 
         <div className="mb-8 flex w-full space-x-2 font-sans uppercase">

diff --git a/apps/nextjs/src/app/layout.tsx b/apps/nextjs/src/app/layout.tsx
@@ -1,5 +1,5 @@
 import type { Metadata } from "next";
-import { Inconsolata, Jost } from "next/font/google";
+import { Bebas_Neue, Inconsolata, Jost, Space_Mono } from "next/font/google";
 import Sidebar from "@/app/_components/SideMenu";
 import { Analytics } from "@vercel/analytics/react";
 
@@ -21,14 +21,14 @@ import { TRPCReactProvider } from "@/trpc/react";
 import { Toaster, TooltipProvider } from "@realms-world/ui";
 import { ArkClientProvider } from "@/lib/ark/useArkClient";
 
-const silkscreen = Jost({
+const silkscreen = Bebas_Neue({
   subsets: ["latin"],
   variable: "--font-silkscreen",
   weight: ["400"],
   display: "swap",
 });
 
-const inconsolata = Inconsolata({
+const inconsolata = Space_Mono({
   subsets: ["latin"],
   variable: "--font-inconsolata",
   weight: "400",

diff --git a/apps/nextjs/src/app/loading.tsx b/apps/nextjs/src/app/loading.tsx
@@ -5,7 +5,7 @@ export default function Loading() {
   return (
     <div className="mx-auto flex h-screen w-full flex-wrap justify-center px-4 sm:px-10">
       <Image
-        src="/pink_crown.svg"
+        src="/pink_crown.gif"
         className="self-center"
         alt="logo"
         width={100}

diff --git a/apps/nextjs/src/app/page.tsx b/apps/nextjs/src/app/page.tsx
@@ -5,7 +5,7 @@ import Starknet from "@/icons/starknet.svg";
 
 import type { Game } from "@realms-world/constants";
 import { games } from "@realms-world/constants";
-import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from "@realms-world/ui";
+import { Button, Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from "@realms-world/ui";
 
 import { PageLayout } from "./_components/PageLayout";
 import { Partners } from "./_components/Partners";
@@ -26,18 +26,6 @@ export default function Home() {
 
   return (
     <PageLayout>
-      <div className="my-4 flex w-fit flex-wrap p-1 text-xl">
-        <span className="align-center">Powered by </span>
-        <Link href={"https://dojoengine.org/"}>
-          <DojoDark className="mx-2 w-12" />
-        </Link>
-        <span>on</span>
-        <Link href={"https://www.starknet.io/en"}>
-          <Starknet className="mx-2 w-8" />
-        </Link>
-        Realms.World is a fantasy multiverse filled with fully onchain games
-      </div>
-
       <Carousel className="w-full">
         <CarouselContent>
           {carouselItems.map((item, index) => (
@@ -51,9 +39,10 @@ export default function Home() {
                     height={1200}
                     className="h-full w-full object-cover"
                   />
-                  <div className="absolute bottom-0 left-0 right-0 bg-black bg-opacity-50 p-4 text-white">
-                    <h2 className="text-2xl font-bold">{item.title}</h2>
-                    <p>{item.description}</p>
+                  <div className="absolute bottom-0 left-0 right-0 bg-black bg-opacity-50 p-8 ">
+                    <h2 className="text-4xl">{item.title}</h2>
+                    <p className="text-xl mb-4">{item.description}</p>
+                    <Button variant="default">View game</Button>
                   </div>
                 </div>
               </Link>
@@ -66,29 +55,31 @@ export default function Home() {
 
       <Partners />
 
-      <div className="my-24">
-        <hr />
-        <h3 className="mb-4 text-xl">Events</h3>
-        <EventGrid isHomepage={true} />
-      </div>
-      <hr />
 
-      <h3 className="mb-4 text-xl">All Games</h3>
+
+
+      <h2 className="mb-4 text-2xl sm:text-3xl font-sans">All Games</h2>
       <div className="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>
 
-      <hr />
+
       <div className="my-24">
-        <h3 className="mb-4 text-xl">News</h3>
+        <h2 className="mb-4 text-2xl sm:text-3xl font-sans">News</h2>
         <PostGrid />
       </div>
 
+      <div className="my-24">
+
+        <h2 className="mb-4 text-2xl sm:text-3xl font-sans">Events</h2>
+        <EventGrid isHomepage={true} />
+      </div>
+
       <hr className="my-8 border" />
       <div className="my-20">
-        <h3 className="mb-4 text-xl">Featured Collections</h3>
+        <h2 className="mb-4 text-2xl sm:text-3xl font-sans">Featured Collections</h2>
         <CollectionsList />
       </div>
     </PageLayout>

diff --git a/apps/nextjs/src/lib/ark/useArkClient.tsx b/apps/nextjs/src/lib/ark/useArkClient.tsx
@@ -39,11 +39,11 @@ export function ArkClientProvider({ children }: { children: React.ReactNode }) {
   }
 
   return (
-    <ArkProvider config={config}>
-      <ArkClientContext.Provider value={{ marketplace, orderbook }}>
-        {children}
-      </ArkClientContext.Provider>
-    </ArkProvider>
+    // <ArkProvider config={config}>
+    <ArkClientContext.Provider value={{ marketplace, orderbook }}>
+      {children}
+    </ArkClientContext.Provider>
+    // </ArkProvider>
   );
 }
 

diff --git a/package.json b/package.json
@@ -29,7 +29,7 @@
     "nuqs": "^1.17.8",
     "prettier": "catalog:",
     "tsup": "^8.2.4",
-    "turbo": "2.1.0",
+    "turbo": "2.0.12",
     "typescript": "catalog:"
   },
   "pnpm": {

diff --git a/packages/constants/src/Games.ts b/packages/constants/src/Games.ts
@@ -40,7 +40,7 @@ export const games: Game[] = [
     developer: Studios.BIBLIO_DAO,
     genres: ["Economic Strategy", "PvP", "Raiding", "Economy"],
     color: "#f5f5f5",
-    status: "development",
+    status: "beta",
     description: "The Economic Seed of the Realms World",
     longform:
       "Eternum represents the culmination of two years of dedicated effort, aimed at crafting a world that transcends the bounds of its creators. It's not just a game; it's a sophisticated fusion of economic and social frameworks, forming the backbone of a burgeoning digital society. Eternum is designed to evolve and grow, offering a dynamic experience far removed from the conventional notion of a 'finished game' like Civilization 6. Think of it as a living, breathing digital ecosystem, constantly evolving and inviting endless exploration.",