Merge pull request #302 from BibliothecaDAO/main

updates

Author: ponderingdemocritus

Diff for: apps/nextjs/content/games/force-prime-heroes.mdoc

@@ -20,18 +20,19 @@ collections:
 tokens:
   - Lords
 icon: icon.png
-coverImage: coverImage.webp
+coverImage: coverImage.png
 screenshots:
   - screenshots/0.png
   - screenshots/1.png
   - screenshots/2.png
   - screenshots/3.png
+  - screenshots/4.png
 links:
   homepage: https://alpha-eternum.realms.world/
   discord: https://discord.gg/uQnjZhZPfu
   twitter: https://twitter.com/LootRealms
   github: https://github.com/BibliothecaDAO/eternum
-  testnet: https://alpha-eternum.realms.world
+  testnet: https://eternum.realms.world
 playable: true
 ---
 Eternum represents the culmination of two years of dedicated effort, aimed at

Diff for: apps/nextjs/content/games/realms-eternum.mdoc

@@ -10,7 +10,7 @@ export const BlogGrid = async () => {
   });
 
   return (
-    <div className="sm:p4-4 grid grid-cols-1 gap-4 px-8 md:grid-cols-3 lg:grid-cols-4">
+    <div className="sm:p4-4 grid grid-cols-1 gap-8 px-8 md:grid-cols-3 lg:grid-cols-4">
       {blogsSortedByDate.map((blog, index) => (
         <BlogCard key={index} blog={blog.entry} slug={blog.slug} />
       ))}

Diff for: apps/nextjs/public/content/games/force-prime-heroes/coverImage.webp

@@ -23,7 +23,7 @@ export const EventGrid = async ({ isHomepage }: EventGridProps) => {
       {upcomingEvents.length ? (
         <div className="mb-4">
           <h2 className="mb-2 text-xl font-bold">Upcoming Events</h2>
-          <div className="grid grid-cols-1 gap-4 sm:grid-cols-4">
+          <div className="grid grid-cols-1 gap-8 sm:grid-cols-4">
             {upcomingEvents.map((event, index) => (
               <EventCard key={index} event={event.entry} slug={event.slug} />
             ))}

Diff for: apps/nextjs/public/content/games/force-prime-heroes/icon.svg

@@ -20,7 +20,8 @@ import { EventGrid } from "./events/EventGrid";
 export default async function Home() {
   const games = await reader().collections.games.all();
   const carouselItems = games
-    .filter((a) => a.entry.status === "beta" || a.entry.status === "mainnet")
+    .filter((a) => a.slug === "realms-eternum")
+    .concat(games.filter((a) => (a.slug !== "realms-eternum" && (a.entry.status === "beta" || a.entry.status === "mainnet"))))
     .map((game) => ({
       alt: game.entry.title,
       src: `/content/games/${game.slug}/${game.entry.coverImage}`,
@@ -36,50 +37,50 @@ export default async function Home() {
           {carouselItems.map((item, index) => (
             <CarouselItem key={index}>
               <Link href={item.href}>
-                <div className="relative h-[700px] border-b">
+                <div className="relative h-[300px] sm:h-[400px] md:h-[500px] lg:h-[700px] border-b">
                   <Image
                     src={item.src}
                     alt={item.alt}
                     width={1900}
                     height={1200}
                     className="h-full w-full rounded object-cover"
                   />
-                  <div className="absolute bottom-0 left-0 right-0 rounded bg-gradient-to-r from-black to-transparent p-8">
-                    <h2 className="text-4xl">{item.title}</h2>
-                    <p className="mb-4 text-xl">{item.description}</p>
-                    <Button variant="outline">View game</Button>
+                  <div className="absolute bottom-0 left-0 right-0 rounded bg-gradient-to-r from-black to-transparent p-4 sm:p-6 md:p-8">
+                    <h2 className="text-xl sm:text-2xl md:text-3xl lg:text-4xl">{item.title}</h2>
+                    <p className="mb-2 sm:mb-3 md:mb-4 text-sm sm:text-base md:text-lg lg:text-xl">{item.description}</p>
+                    <Button variant="outline" className="text-sm sm:text-base">View game</Button>
                   </div>
                 </div>
               </Link>
             </CarouselItem>
           ))}
         </CarouselContent>
-        <CarouselPrevious className="left-2 sm:left-8" />
-        <CarouselNext className="right-2 sm:right-8" />
+        <CarouselPrevious className="left-2 sm:left-4 md:left-6 lg:left-8" />
+        <CarouselNext className="right-2 sm:right-4 md:right-6 lg:right-8" />
       </Carousel>
-      <div className="px-4 sm:px-8">
+      <div className="px-4 sm:px-6 md:px-8">
         <Partners />
 
-        <h2 className="mb-4 font-sans text-2xl sm:text-3xl">All Games</h2>
-        <div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
+        <h2 className="mb-4 font-sans text-xl sm:text-2xl md:text-3xl">All Games</h2>
+        <div className="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
           {games.map((game, index) => (
             <GameCard key={index} game={game.entry} slug={game.slug} />
           ))}
         </div>
 
-        <div className="my-24">
-          <h2 className="mb-4 font-sans text-2xl sm:text-3xl">News</h2>
+        <div className="my-12 sm:my-16 md:my-20 lg:my-24">
+          <h2 className="mb-4 font-sans text-xl sm:text-2xl md:text-3xl">News</h2>
           <BlogGrid />
         </div>
 
-        <div className="my-24">
-          <h2 className="mb-4 font-sans text-2xl sm:text-3xl">Events</h2>
+        <div className="my-12 sm:my-16 md:my-20 lg:my-24">
+          <h2 className="mb-4 font-sans text-xl sm:text-2xl md:text-3xl">Events</h2>
           <EventGrid isHomepage={true} />
         </div>
 
-        <hr className="my-8 border" />
-        <div className="my-20">
-          <h2 className="mb-4 font-sans text-2xl sm:text-3xl">
+        <hr className="my-6 sm:my-8 border" />
+        <div className="my-12 sm:my-16 md:my-20">
+          <h2 className="mb-4 font-sans text-xl sm:text-2xl md:text-3xl">
             Featured Collections
           </h2>
           <CollectionsList />