Merge pull request #170 from BibliothecaDAO/polish

add footer links add banners, update images

Author: RedBeardEth

apps/nextjs/public/events/banners.png

@@ -0,0 +1,15 @@
+export const BaseCard = ({
+  children,
+  className,
+}: {
+  children: React.ReactNode;
+  className?: string;
+}) => {
+  return (
+    <div
+      className={`${className} border-4 bg-theme-gray-light shadow-sm shadow-black transition-all duration-200 hover:border-bright-yellow`}
+    >
+      {children}
+    </div>
+  );
+};

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

@@ -1,39 +1,158 @@
-import Link from "next/link";
+import RWLogo from "@/icons/rw-logo.svg";
 
 export const Footer = () => {
-  const footerLinks = [
-    {
-      name: "Bibliotheca DAO",
-      href: "https://bibliothecadao.xyz/",
-    },
-    {
-      name: "Discord",
-      href: "https://discord.gg/realmsworld",
-    },
-    {
-      name: "Brand Assets",
-      href: "https://drive.google.com/drive/folders/17vrwIjwqifxBVTkHmxoK1VhQ31hVSbDH",
-    },
-    {
-      name: "Shop",
-      href: "https://shop.realms.world",
-    },
-  ];
-
   return (
-    <div className="w-full px-4 py-24 sm:pl-36 sm:pt-24">
-      <div className="w-full">
-        <h1>Realms.World</h1>
-      </div>
-      <div className="mt-8">
-        <ul>
-          {footerLinks.map((item, index) => (
-            <li className="my-1 py-1 text-lg" key={index}>
-              <Link href={item.href}>{item.name}</Link>
-            </li>
-          ))}
-        </ul>
+    <footer className="w-full px-4 py-24 sm:pl-36 sm:pt-24 ">
+      <div className="mx-auto w-full max-w-screen-xl p-4 py-6 lg:py-8">
+        <div className="md:flex md:justify-between">
+          <div className="mb-6 md:mb-0">
+            <RWLogo className=" w-[152px]" />
+          </div>
+          <div className="grid grid-cols-2 gap-8 sm:grid-cols-3 sm:gap-8">
+            <div>
+              <h2 className="mb-6 text-sm font-semibold uppercase ">
+                Resources
+              </h2>
+              <ul className="font-medium ">
+                <li className="mb-4">
+                  <a
+                    href="https://bibliothecadao.xyz/"
+                    className="hover:underline"
+                  >
+                    Bibliotheca DAO
+                  </a>
+                </li>
+                <li className="mb-4">
+                  <a
+                    href="https://www.coingecko.com/en/coins/lords"
+                    className="hover:underline"
+                  >
+                    Coin Gecko
+                  </a>
+                </li>
+                <li className="mb-4">
+                  <a
+                    href="https://frontinus.house/"
+                    className="hover:underline"
+                  >
+                    Frontinus House
+                  </a>
+                </li>
+                <li className="mb-4">
+                  <a
+                    href="https://app.avnu.fi/en?amount=100&tokenFrom=0x124aeb495b947201f5fac96fd1138e326ad86195b98df6dec9009158a533b49&tokenTo=0x49d36570d4e46f48e99674bd3fcc84644ddd6b96f7c741b1562b82f9e004dc7"
+                    className="hover:underline"
+                  >
+                    Buy Lords
+                  </a>
+                </li>
+                <li className="mb-4">
+                  <a
+                    href="https://shop.realms.world"
+                    className="hover:underline"
+                  >
+                    Realms World Shop
+                  </a>
+                </li>
+                <li className="mb-4">
+                  <a
+                    href="https://dev.realms.world"
+                    className="hover:underline"
+                  >
+                    Developer Docs
+                  </a>
+                </li>
+                <li className="mb-4">
+                  <a
+                    href="https://drive.google.com/drive/folders/17vrwIjwqifxBVTkHmxoK1VhQ31hVSbDH"
+                    className="hover:underline"
+                  >
+                    Brand Assets
+                  </a>
+                </li>
+              </ul>
+            </div>
+            <div>
+              <h2 className="mb-6 text-sm font-semibold uppercase">
+                Follow us
+              </h2>
+              <ul className="font-medium ">
+                <li className="mb-4">
+                  <a
+                    href="https://github.com/bibliothecaDAO"
+                    className="hover:underline "
+                  >
+                    Github
+                  </a>
+                </li>
+                <li className="mb-4">
+                  <a
+                    href="https://discord.gg/realmsworld"
+                    className="hover:underline"
+                  >
+                    Discord
+                  </a>
+                </li>
+                <li>
+                  <a
+                    href="https://x.com/realmsworld"
+                    className="hover:underline"
+                  >
+                    Twitter
+                  </a>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+        <hr className="my-6 border sm:mx-auto lg:my-8 " />
+        <div className="sm:flex sm:items-center sm:justify-between">
+          <span className="text-sm sm:text-center">
+            © {new Date().getFullYear()}{" "}
+            <a href="https://flowbite.com/" className="hover:underline">
+              BibliothecaDAO
+            </a>
+          </span>
+          <div className="mt-4 flex sm:mt-0 sm:justify-center">
+            <a href="https://discord.gg/realmsworld" className="ms-5 ">
+              <svg
+                className="h-4 w-4"
+                aria-hidden="true"
+                xmlns="http://www.w3.org/2000/svg"
+                fill="currentColor"
+                viewBox="0 0 21 16"
+              >
+                <path d="M16.942 1.556a16.3 16.3 0 0 0-4.126-1.3 12.04 12.04 0 0 0-.529 1.1 15.175 15.175 0 0 0-4.573 0 11.585 11.585 0 0 0-.535-1.1 16.274 16.274 0 0 0-4.129 1.3A17.392 17.392 0 0 0 .182 13.218a15.785 15.785 0 0 0 4.963 2.521c.41-.564.773-1.16 1.084-1.785a10.63 10.63 0 0 1-1.706-.83c.143-.106.283-.217.418-.33a11.664 11.664 0 0 0 10.118 0c.137.113.277.224.418.33-.544.328-1.116.606-1.71.832a12.52 12.52 0 0 0 1.084 1.785 16.46 16.46 0 0 0 5.064-2.595 17.286 17.286 0 0 0-2.973-11.59ZM6.678 10.813a1.941 1.941 0 0 1-1.8-2.045 1.93 1.93 0 0 1 1.8-2.047 1.919 1.919 0 0 1 1.8 2.047 1.93 1.93 0 0 1-1.8 2.045Zm6.644 0a1.94 1.94 0 0 1-1.8-2.045 1.93 1.93 0 0 1 1.8-2.047 1.918 1.918 0 0 1 1.8 2.047 1.93 1.93 0 0 1-1.8 2.045Z" />
+              </svg>
+              <span className="sr-only">Discord community</span>
+            </a>
+            <a href="https://x.com/realmsworld" className="ms-5 ">
+              <svg
+                className="h-4 w-4"
+                aria-hidden="true"
+                xmlns="http://www.w3.org/2000/svg"
+                fill="currentColor"
+                viewBox="0 0 20 17"
+              >
+                <path d="M20 1.892a8.178 8.178 0 0 1-2.355.635 4.074 4.074 0 0 0 1.8-2.235 8.344 8.344 0 0 1-2.605.98A4.13 4.13 0 0 0 13.85 0a4.068 4.068 0 0 0-4.1 4.038 4 4 0 0 0 .105.919A11.705 11.705 0 0 1 1.4.734a4.006 4.006 0 0 0 1.268 5.392 4.165 4.165 0 0 1-1.859-.5v.05A4.057 4.057 0 0 0 4.1 9.635a4.19 4.19 0 0 1-1.856.07 4.108 4.108 0 0 0 3.831 2.807A8.36 8.36 0 0 1 0 14.184 11.732 11.732 0 0 0 6.291 16 11.502 11.502 0 0 0 17.964 4.5c0-.177 0-.35-.012-.523A8.143 8.143 0 0 0 20 1.892Z" />
+              </svg>
+              <span className="sr-only">Twitter page</span>
+            </a>
+            <a href="https://github.com/bibliothecaDAO" className="ms-5 ">
+              <svg
+                className="h-4 w-4"
+                aria-hidden="true"
+                xmlns="http://www.w3.org/2000/svg"
+                fill="currentColor"
+                viewBox="0 0 20 20"
+              >
+                <path d="M10 .333A9.911 9.911 0 0 0 6.866 19.65c.5.092.678-.215.678-.477 0-.237-.01-1.017-.014-1.845-2.757.6-3.338-1.169-3.338-1.169a2.627 2.627 0 0 0-1.1-1.451c-.9-.615.07-.6.07-.6a2.084 2.084 0 0 1 1.518 1.021 2.11 2.11 0 0 0 2.884.823c.044-.503.268-.973.63-1.325-2.2-.25-4.516-1.1-4.516-4.9A3.832 3.832 0 0 1 4.7 7.068a3.56 3.56 0 0 1 .095-2.623s.832-.266 2.726 1.016a9.409 9.409 0 0 1 4.962 0c1.89-1.282 2.717-1.016 2.717-1.016.366.83.402 1.768.1 2.623a3.827 3.827 0 0 1 1.02 2.659c0 3.807-2.319 4.644-4.525 4.889a2.366 2.366 0 0 1 .673 1.834c0 1.326-.012 2.394-.012 2.72 0 .263.18.572.681.475A9.911 9.911 0 0 0 10 .333Z" />
+              </svg>
+              <span className="sr-only">GitHub account</span>
+            </a>
+          </div>
+        </div>
       </div>
-    </div>
+    </footer>
   );
 };

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

@@ -1,31 +1,31 @@
 import Image from "next/image";
 import Link from "next/link";
 
-import { PostMetadata } from "./getArticles";
+import type { PostMetadata } from "./getArticles";
+import { BaseCard } from "../_components/BaseCard";
 
 const PostPreview = (props: PostMetadata) => {
   return (
-    <Link
-      href={`/blog/${props.slug}`}
-      className="flex  flex-col rounded border-4 bg-theme-gray-light transition-all duration-150 hover:border-white"
-    >
-      <Image
-        className="w-full rounded-l object-cover"
-        src={props.image}
-        width={500}
-        height={500}
-        alt={props.slug}
-      />
-      <div className="align-center p-4">
-        <div>
-          {" "}
-          <div className="px-2 py-1 font-sans text-sm">{props.date}</div>
-        </div>
+    <BaseCard>
+      <Link href={`/blog/${props.slug}`} className="flex  flex-col ">
+        <Image
+          className="w-full rounded-l object-cover"
+          src={props.image}
+          width={500}
+          height={500}
+          alt={props.slug}
+        />
+        <div className="align-center p-4">
+          <div>
+            {" "}
+            <div className="px-2 py-1 font-sans text-sm">{props.date}</div>
+          </div>
 
-        <h4>{props.title}</h4>
-        <p>{props.subtitle}</p>
-      </div>
-    </Link>
+          <h4>{props.title}</h4>
+          <p>{props.subtitle}</p>
+        </div>
+      </Link>
+    </BaseCard>
   );
 };
 

apps/nextjs/src/app/blog/PostPreview.tsx

@@ -1,9 +1,12 @@
+import type { Event } from "@/types";
 import { useEffect, useState } from "react";
 import Image from "next/image";
-import { Event } from "@/types";
+import Link from "next/link";
 
 import { Button } from "@realms-world/ui";
 
+import { BaseCard } from "../_components/BaseCard";
+
 export const EventCard = ({ event }: { event: Event }) => {
   const [isToday, setIsToday] = useState(false);
 
@@ -16,9 +19,17 @@ export const EventCard = ({ event }: { event: Event }) => {
   }, [event.startDate, event.endDate]);
 
   return (
-    <div className="border-4">
-      <Image width={600} height={400} src={event.image} alt="" />
-      <div className="bg-theme-gray-light p-4">
+    <BaseCard>
+      <Link href={"/events/" + event.slug}>
+        <Image
+          width={600}
+          height={400}
+          className="min-h-[400px] object-cover"
+          src={event.image}
+          alt=""
+        />
+      </Link>
+      <div className="flex h-56  flex-col bg-theme-gray-light p-4">
         <span className={`flex flex-shrink  px-2 py-1`}>
           <div
             className={`h-4 w-4 self-center rounded-full bg-green-600 ${isToday ? "animate-pulse" : ""}`}
@@ -29,15 +40,15 @@ export const EventCard = ({ event }: { event: Event }) => {
         </span>
         <h5>{event.name}</h5>
         <p>{event.description}</p>
-        <div className="mt-6 flex justify-between">
+        <div className="mt-auto flex w-full justify-between self-end">
           <Button href={event.website} size={"xs"} variant="default">
-            Play Game
+            {event.type == "play" ? "Play Game" : "Mint"}
           </Button>
           <Button href={"/events/" + event.slug} size={"xs"} variant="outline">
             More info
           </Button>
         </div>
       </div>
-    </div>
+    </BaseCard>
   );
 };

apps/nextjs/src/app/events/EventCard.tsx

@@ -1,4 +1,5 @@
 import type { Metadata } from "next";
+import Image from "next/image";
 import { PageLayout } from "@/app/_components/PageLayout";
 import { events } from "@/constants/events";
 
@@ -23,14 +24,65 @@ export default async function Page({ params }: { params: { id: string } }) {
 
   return (
     <PageLayout title={event?.name ?? ""}>
-      <img className="w-96" src={event?.image} alt="" />
+      {event?.image && <Image
+        className="w-96"
+        width={350}
+        height={350}
+        src={event?.image}
+        alt=""
+      />}
       <div className="py-4">
         <span className={`rounded border px-2 py-1 `}>
           {event?.startDate} to {event?.endDate}
         </span>
       </div>
 
-      <div className="text-lg">{event?.description}</div>
+      {event?.slug == "paved" ? (
+        <div className="prose prose-lg mt-6 max-w-5xl pb-6 text-xl leading-loose md:mt-12">
+          <p>
+            In Realms World&apos;s Paved game, players compete for high scores by
+            laying tiles to form an expanding medieval landscape.
+          </p>
+          <p>
+            Built on Starknet and powered by Dojo - pave your way to victory in
+            an onchain strategy game like no other.
+          </p>
+          <h3>There is a 2,500 $Lords tournament</h3>
+          <p>
+            The player with the best score will be the tournament&apos;s Lord of the
+            Board. There are nine prizes to be won by players.
+          </p>
+          <ul>
+            <li>⚒️ First place: 1000 $Lords - aka Lord of the Board</li>
+            <li>⚒️ Second place: 500 $Lords</li>
+            <li>⚒️ Third place: 300 $Lords</li>
+            <li>⚒️ Fastest game in the top 10: 200 $Lords</li>
+            <li>⚒️ 5 randomly selected players: 100 $Lords</li>
+          </ul>
+          <br />
+          <h3>Gameplay</h3>
+          <p>
+            In the single player mode, the player has 72 tiles to lay and score
+            as many points as possible in the process.
+          </p>
+          <p>
+            As tiles are laid, Cities, Roads, Wonders & Forests are formed and
+            developed. Placing your Characters on these tiles gives you the
+            opportunity to accumulate points - scored when structures are
+            completed.
+          </p>
+          <p>
+            Link to play: <a href="https://paved.gg/">https://paved.gg/</a>
+          </p>
+          <p>
+            Game guide - for detail and tips:{" "}
+            <a href="https://docs.paved.gg/">https://docs.paved.gg/</a>{" "}
+          </p>
+          Will you be Lord of the Board? Pave now.
+        </div>
+      ) : (
+        <div className="text-lg">{event?.description}</div>
+      )}
 
       <hr className="my-8" />
       <Button href="/events">Back to events</Button>