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>));

messages/hr.json

@@ -18,11 +18,13 @@
   },
   "login-page": {
     "main-card": {
-      "title-1": "Koji računi su stigli?",
-      "title-2": "Koji su plaćeni?",
-      "title-3": "Koliki su mi troškovi?",
-      "text-1": "To su pitanja na koja će ti ova jednostavna aplikacija odgovoriti ...",
-      "text-2": "... isprobaj je i koristi potpuno besplatno!",
+      "title-1": "Jednostavno ",
+      "title-2": "upravljanje režijama",
+      "title-3": "za iznajmljivače",
+      "text-1": "<strong>Iznajmljujete stan ili kuću?</strong> Teško vam je pratiti koji računi su stigli, koje ste poslali podstanarima, koji su plaćeni? Ne znate kako organizirati sve te papire i datoteke na računalu? Niste jedini!",
+      "text-2": "<strong>Režije.app</strong> je tu da vam pomogne! Pustite da vam ovaj besplatni alat pomogne u upravljanju režijama za sve vaše nekretnine na jednom mjestu. Zaboravite na papirnate račune i zbrku u papirima - sada sve možete pratiti digitalno, brzo i efikasno.",
+      "text-3": "Pratite i naplatite troškove režija bez muke. Ova web aplikacija pomaže najmodavcima organizirati mjesečne račune za stanove i kuće koje iznajmljuju.\nPošaljite podstanaru sve režije digitalno, pratite u stvarnom vremenu koje su plaćene, a koje čekaju uplatu, te pojednostavite si financijsko upravljanje nekretninama.\nUštedite vrijeme uz automatske podsjetnike i arhivu računa - i to potpuno besplatno.",
+      "cta-try-it-for-free": "Isprobaj besplatno",
       "go-to-app": "Uđi u Aplikaciju",
       "in-app-browser-warning": "<strong>UPOZORENJE!</strong><br></br>Detektirali smo da je web stranica otvorena u in-app pregledniku. To može dovesti do probleme u radu ove web aplikacije. <hint>Molimo otvori web aplikaciju u normalnom web pregledniku (rezije.app) 😉</hint>",
       "video-url": "/welcome-demo-vp9-25fps-1500bps.webm",