started working on new title page: added pictures and some text

app/[locale]/page.tsx

@@ -9,6 +9,7 @@ import isWebview from "is-ua-webview";
 import { headers } from 'next/headers';
 import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
 import Link from 'next/link';
+import { MultiParagraphText } from '../ui/MultiParagrpahText';
 
 type Provider = {
   id: string;
@@ -53,12 +54,43 @@ const Page:FC = async () => {
  return (
     <Main>
       <h1 className="text-3xl font-bold text-center">
-        <span className="text-neutral-50 mr-3">{t("main-card.title-1")}</span>
+        <span className="text-neutral-50">{t("main-card.title-1")}</span>
         <span className="text-indigo-400">{t("main-card.title-2")}</span>
-        <span className="text-neutral-50 ml-3">{t("main-card.title-3")}</span>
+        <span className="text-neutral-50 ml-2">{t("main-card.title-3")}</span>
       </h1>
-      <p className="p mt-[1em] text-center">{t("main-card.text-1")}</p>
-      <p className="p mb-[1em] text-center">{t("main-card.text-2")}</p>
+      {t.rich("main-card.text-1", {
+        strong: (chunks) => <strong>{chunks}</strong>,
+        p: (chunks) => <p className="p mt-[1em] max-w-[38em] mx-auto text-justify">{chunks}</p>
+      })}
+
+      <Image src="/man-burried-under-paper.png" alt="Man burried under bills" className="m-auto" width={400} height={300} />
+      <MultiParagraphText text={t("main-card.text-2")} />
+      <Image src="/robot-sorting-papers.png" alt="Robot sortira papire" className="m-auto" width={400} height={300} />
+      {
+        t("main-card.text-2").split("\n").map((line, index) => (
+          <p key={index} className="p mt-[1em] max-w-[38em] mx-auto text-justify">{line}</p>
+        ))
+      }
+
+      <span className="flex justify-center">
+        {
+          session ? (
+            <Link
+              href={`/${locale}/home`}
+              className="btn btn-neutral btn-lg"
+            >
+              {t("main-card.cta-try-it-for-free")}
+            </Link>
+          ) : (
+            Object.values(providers).map((provider) => (
+              <div key={provider.name}>
+                <SignInButton provider={provider} />
+              </div>
+            ))
+          )
+        }
+      </span>
+
       {
         // Google will refuse OAuth signin if it's inside a webview (i.e. Facebook)
         insideWebeview &&
@@ -77,25 +109,9 @@ const Page:FC = async () => {
           </div>
         </div>
       }
-      <span className="flex justify-center">
-        {
-          session ? (
-            <Link
-              href={`/${locale}/home`}
-              className="btn btn-neutral btn-lg"
-            >
-              <Image src="/icon2.png" alt="logo" width={32} height={32} />
-              {t("main-card.go-to-app")}
-            </Link>
-          ) : (
-            Object.values(providers).map((provider) => (
-              <div key={provider.name}>
-                <SignInButton provider={provider} />
-              </div>
-            ))
-          )
-        }
-      </span>
+
+      man-burried-under-paper.png
+
       <video className="m-auto mt-4" title={t("main-card.video-title")} role="img" data-js-id="hero" loop muted playsInline autoPlay poster={t("main-card.image-url")}>
         <source src={t("main-card.video-url")} type="video/webm" />
       </video>

app/ui/MultiParagrpahText.tsx

@@ -0,0 +1,6 @@
+import React from "react";
+
+
+export const MultiParagraphText: React.FC<{ text: string }> = ({ text }) =>
+    text.split("\n").map((line, index) => (
+        <p key={index} className="p mt-[1em] max-w-[38em] mx-auto text-justify">{line}</p>));