feat: improve landing page and change font

alcercu · alcercu · commit 62d6ce4bc6ba · 2024-12-03T17:39:56.000+01:00
diff --git a/messages/ar.json b/messages/ar.json
@@ -1,6 +1,8 @@
 {
   "landing": {
-    "navigate": "انتقل إلى القضية"
+    "title": "البحث عن قضية",
+    "subtitle": "أدخل رقم القضية لعرض تفاصيلها.",
+    "button": "بحث"
   },
   "case": {
     "title": "القضية",
diff --git a/messages/en.json b/messages/en.json
@@ -1,6 +1,8 @@
 {
   "landing": {
-    "navigate": "navigate to case"
+    "title": "Search for a Case",
+    "subtitle": "Enter the case number to view its details.",
+    "button": "Search"
   },
   "case": {
     "title": "CASE",
diff --git a/messages/es.json b/messages/es.json
@@ -1,6 +1,8 @@
 {
   "landing": {
-    "navigate": "navigate to case"
+    "title": "Busca un Caso",
+    "subtitle": "Introduzca el número del caso para ver los detalles.",
+    "button": "Buscar"
   },
   "case": {
     "title": "CASO",
diff --git a/public/search.svg b/public/search.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+  <g clip-path="url(#clip0_7749_28)">
+    <path d="M15.7797 13.833L12.6644 10.7177C12.5238 10.5771 12.3332 10.499 12.1332 10.499H11.6239C12.4863 9.39596 12.9987 8.00859 12.9987 6.49937C12.9987 2.90909 10.0896 0 6.49937 0C2.90909 0 0 2.90909 0 6.49937C0 10.0896 2.90909 12.9987 6.49937 12.9987C8.00859 12.9987 9.39596 12.4863 10.499 11.6239V12.1332C10.499 12.3332 10.5771 12.5238 10.7177 12.6644L13.833 15.7797C14.1267 16.0734 14.6017 16.0734 14.8923 15.7797L15.7766 14.8954C16.0703 14.6017 16.0703 14.1267 15.7797 13.833ZM6.49937 10.499C4.29021 10.499 2.49976 8.71165 2.49976 6.49937C2.49976 4.29021 4.28708 2.49976 6.49937 2.49976C8.70852 2.49976 10.499 4.28708 10.499 6.49937C10.499 8.70852 8.71165 10.499 6.49937 10.499Z" fill="#FFFFFF"/>
+  </g>
+  <defs>
+    <clipPath id="clip0_7749_28">
+      <rect width="16" height="16" fill="white"/>
+    </clipPath>
+  </defs>
+</svg>
diff --git a/src/app/[locale]/components/Navbar.tsx b/src/app/[locale]/components/Navbar.tsx
@@ -41,13 +41,14 @@ const Navbar: React.FC<INavbar> = ({ locale }) => {
         className={clsx(
           "justify-self-end place-self-center",
           "border-stroke border-2 rounded",
+          "transition hover:scale-110 hover:drop-shadow",
         )}
       >
         <DropdownMenu>
           <DropdownMenuTrigger
             className={clsx(
-              "focus:outline-none hover:bg-light-background transition",
-              "rounded",
+              "focus:outline-none transition",
+              "rounded bg-light-background",
               "py-2 px-4",
             )}
           >
diff --git a/src/app/[locale]/layout.tsx b/src/app/[locale]/layout.tsx
@@ -2,27 +2,21 @@ import clsx from "clsx";
 import type { Metadata } from "next";
 import { NextIntlClientProvider } from "next-intl";
 import { getMessages } from "next-intl/server";
-import localFont from "next/font/local";
+import { Open_Sans } from "next/font/google";
 import { getLangDir } from "rtl-detect";
 
 import Navbar from "./components/Navbar";
 
 import "../globals.css";
 
-const geistSans = localFont({
-  src: "../fonts/GeistVF.woff",
-  variable: "--font-geist-sans",
-  weight: "100 900",
-});
-const geistMono = localFont({
-  src: "../fonts/GeistMonoVF.woff",
-  variable: "--font-geist-mono",
-  weight: "100 900",
+const openSans = Open_Sans({
+  subsets: ["latin"],
+  display: "swap",
 });
 
 export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
+  title: "Kleros: Library of Justice",
+  description: "Kleros archival UI",
 };
 
 export default async function RootLayout({
@@ -38,11 +32,7 @@ export default async function RootLayout({
   return (
     <html lang={locale}>
       <body
-        className={clsx(
-          geistSans.variable,
-          geistMono.variable,
-          "antialiased bg-white-background",
-        )}
+        className={clsx(openSans.className, "antialiased bg-white-background")}
         dir={langDir}
       >
         <NextIntlClientProvider {...{ messages }}>
diff --git a/src/app/[locale]/page.tsx b/src/app/[locale]/page.tsx
@@ -1,45 +1,80 @@
 "use client";
 
 import clsx from "clsx";
-import { useTranslations } from "next-intl";
+import { useLocale, useTranslations } from "next-intl";
+import Image from "next/image";
+import { getLangDir } from "rtl-detect";
 
 import { useRouter } from "@/i18n/routing";
 
 const Home: React.FC = () => {
   const t = useTranslations("landing");
+  const locale = useLocale();
+  const langDir = getLangDir(locale);
+
   const router = useRouter();
+
   return (
     <div className="mx-auto my-auto">
-      <h1 className="text-secondary-text text-2xl font-bold text-center">
-        {t("navigate").toUpperCase()}
+      <h1 className="text-secondary-text text-xl font-bold text-center">
+        {t("title")}
       </h1>
+      <h2 className="text-secondary-text text-md text-center">
+        {t("subtitle")}
+      </h2>
       <form
-        className="my-4 text-center"
+        className="my-4 flex justify-center items-center"
         action={(formData) => {
           const disputeId = formData.get("dispute")?.toString();
           if (!disputeId) return;
           router.push(`/case/${disputeId}`);
         }}
       >
-        <label
-          htmlFor="dispute"
-          className="text-2xl font-bold text-primary-blue"
-        >
-          #
+        <div className="relative">
           <input
             name="dispute"
             className={clsx(
-              "w-32 ml-2 border-b-4",
-              "text-2xl font-semibold border-slate-300 focus:outline-0 p-2",
+              "w-32 h-10 border-2 border-stroke",
+              "focus:outline-none",
+              {
+                "rounded-l pl-6": langDir === "ltr",
+                "rounded-r pr-6": langDir === "rtl",
+              },
+              "text-md font-semibold text-secondary-text p-2",
             )}
             type="number"
             step={1}
             min={0}
             max={1000000}
           />
-        </label>
-        <button type="submit" className="p-2 text-2xl text-primary-blue">
-          ➞
+          <span
+            className={clsx(
+              "absolute top-1/2 -translate-y-1/2 text-lg",
+              {
+                "left-2": langDir === "ltr",
+                "right-2": langDir === "rtl",
+              },
+              "font-semibold text-secondary-text",
+            )}
+          >
+            #
+          </span>
+        </div>
+        <button
+          type="submit"
+          className={clsx(
+            "bg-primary-blue h-10",
+            {
+              "rounded-r": langDir === "ltr",
+              "rounded-l": langDir === "rtl",
+            },
+            "text-base text-white-background font-semibold",
+            "px-4 flex gap-2 justify-center items-center",
+            "hover:bg-secondary-blue transition",
+          )}
+        >
+          <Image src="/search.svg" alt="Search" width="16" height="16" />
+          {t("button")}
         </button>
       </form>
     </div>
diff --git a/src/app/fonts/GeistMonoVF.woff b/src/app/fonts/GeistMonoVF.woff
diff --git a/src/app/fonts/GeistVF.woff b/src/app/fonts/GeistVF.woff
