refactor: restructure landing page with component extraction and fix Server Component hooks

- Extract reusable components: EnterOrSignInButton, paragraphFormatFactory, getProviders
- Fix React hooks usage: remove useMemo from async Server Components
- Update landing page content for Croatian and English translations
- Reorganize terms/policy pages into locale-aware directories
- Update PageFooter to use locale-aware links and make component async

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

app/[locale]/page.tsx

@@ -1,51 +1,28 @@
-import { FC, ReactNode } from 'react';
+import { FC } from 'react';
 import { Main } from '@/app/ui/Main';
-
+import { myAuth } from "@/app/lib/auth";
-import { authConfig, myAuth } from "@/app/lib/auth";
-import { SignInButton } from '@/app/ui/SignInButton';
 import Image from 'next/image';
 import { getTranslations, getLocale } from "next-intl/server";
 import isWebview from "is-ua-webview";
 import { headers } from 'next/headers';
 import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
-import Link from 'next/link';
+import { paragraphFormatFactory } from '../lib/paragraphFormatFactory';
-import { MultiParagraphText } from '../ui/MultiParagrpahText';
+import { getAuthProviders } from '../lib/getProviders';
+import { EnterOrSignInButton } from '../ui/EnterOrSignInButton';
 
-type Provider = {
+const h1ClassName = "text-3xl font-bold max-w-[38rem] mx-auto text-neutral-50";
-  id: string;
+const h2ClassName = h1ClassName + " mt-8";
-  name: string;
-  type: string;
-  style: {
-    logo: string;
-    bg: string;
-    text: string;
-  };
-};
 
-function getProviders(): Provider[] {
+const Page: FC = async () => {
-  const providerKeys: (keyof Provider)[] = ["id", "name", "type", "style"];
-  return authConfig.providers.map((provider) =>
-    getKeyValuesFromObject<Provider>(provider, providerKeys)
-  );
-}
 
-function getKeyValuesFromObject<T>(obj: any, keys: (keyof T)[]): T {
-  return keys.reduce((acc, key) => {
-    if (obj[key]) {
-      acc[key] = obj[key];
-    }
-    return acc;
-  }, {} as T);
-}
-
-const Page:FC = async () => {
-
-  const session = await myAuth();
   const locale = await getLocale();
-  const providers = await getProviders();
+  const paragraphFormat = paragraphFormatFactory(locale);
-  const t = await getTranslations("login-page");
-  // get userAgent from NextJS
 
+  const t = await getTranslations("login-page");
+  const session = await myAuth();
+  const providers = getAuthProviders();
+
+  // get userAgent from NextJS
   const headersList = headers();
   const userAgent = headersList.get("user-agent") as string;
 
@@ -53,43 +30,13 @@ const Page:FC = async () => {
 
   return (
     <Main>
-      <h1 className="text-3xl font-bold text-center">
+      <h1 className={h1ClassName}>
-        <span className="text-neutral-50">{t("main-card.title-1")}</span>
+        {t.rich("main-card.title", paragraphFormat)}
-        <span className="text-indigo-400">{t("main-card.title-2")}</span>
-        <span className="text-neutral-50 ml-2">{t("main-card.title-3")}</span>
       </h1>
-      {t.rich("main-card.text-1", {
+      {t.rich("main-card.text", paragraphFormat)}
-        strong: (chunks) => <strong>{chunks}</strong>,
+      <Image src={t("main-card.image-url")} alt={t("main-card.image-alt")} className="m-auto mt-0" width={400} height={300} />
-        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} />
+      <EnterOrSignInButton session={session} locale={locale} providers={providers} />
-      <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)
@@ -99,38 +46,21 @@ const Page:FC = async () => {
             <ExclamationTriangleIcon className="text-red-600 self-start" />
           </figure>
           <div className="card-body pl-2">
-            {
+            {t.rich("main-card.in-app-browser-warning", paragraphFormat)}
-              t.rich("main-card.in-app-browser-warning", {
-                  br: () => <br />,
-                  strong: (chunks:ReactNode) => <strong className='text-indigo-300' >{chunks}</strong>,
-                  hint: (chunks:ReactNode) => <span className='text-indigo-300 block'> {chunks}</span> 
-              })
-            }
           </div>
         </div>
       }
+      <h2 className={`${h2ClassName} text-xl`}>{t.rich("card-1.title", paragraphFormat)}</h2>
+      {t.rich("card-1.text", paragraphFormat)}
+      <Image src={t("card-1.image-url")} alt={t("card-1.image-alt")} className="m-auto mt-4" width={400} height={300} />
 
-      man-burried-under-paper.png
+      <h2 className={`${h2ClassName} text-xl`}>{t.rich("card-2.title", paragraphFormat)}</h2>
+      {t.rich("card-2.text", paragraphFormat)}
+      {t.rich("card-2.text", paragraphFormat, {})}
 
-      <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")}>
+      <EnterOrSignInButton session={session} locale={locale} providers={providers} />
-        <source src={t("main-card.video-url")} type="video/webm" />
-      </video>
 
-      <h1 className="text-2xl font-bold text-neutral-50 my-5">{t("card-1.title")}</h1>
-      <p className="p mt-[1em]">{t("card-1.text")}</p>
-      <video className="m-auto mt-4" title={t("card-1.video-title")} role="img" data-js-id="hero" loop muted playsInline autoPlay poster={t("card-1.image-url")}>
-        <source src={t("card-1.video-url")} type="video/webm" />
-      </video>
 
-      <h1 className="text-2xl font-bold text-neutral-50 my-5">{t("card-2.title")}</h1>
-      <p className="p mt-[1em]">{t("card-2.text")}</p>
-      <Image src="/status-color-demo.png" alt="Boje označavaju status računa" className="m-auto mt-4" width={423} height={145} />
-
-      <h1 className="text-2xl font-bold text-neutral-50 my-5">{t("card-3.title")}</h1>
-      <p className="p mt-[1em]">{t("card-3.text")}</p>
-      <video className="m-auto mt-4" title={t("card-3.video-title")} role="img" data-js-id="hero" loop muted playsInline autoPlay poster={t("card-3.image-url")}>
-        <source src={t("card-3.video-url")} type="video/webm" />
-      </video>
     </Main>
   );
 }

app/lib/getProviders.ts

@@ -0,0 +1,28 @@
+import { authConfig } from "./auth";
+
+export type AuthProvider = {
+  id: string;
+  name: string;
+  type: string;
+  style: {
+    logo: string;
+    bg: string;
+    text: string;
+  };
+};
+
+export function getAuthProviders(): AuthProvider[] {
+  const providerKeys: (keyof AuthProvider)[] = ["id", "name", "type", "style"];
+  return authConfig.providers.map((provider) =>
+    getKeyValuesFromObject<AuthProvider>(provider, providerKeys)
+  );
+}
+
+export function getKeyValuesFromObject<T>(obj: any, keys: (keyof T)[]): T {
+  return keys.reduce((acc, key) => {
+    if (obj[key]) {
+      acc[key] = obj[key];
+    }
+    return acc;
+  }, {} as T);
+}

app/lib/paragraphFormatFactory.tsx

@@ -0,0 +1,13 @@
+import Link from "next/link";
+import { ReactNode } from "react"
+
+export const paragraphFormatFactory = (locale: string) => ({
+  strong: (chunks: ReactNode) => <strong className='text-indigo-400 font-semibold' >{chunks}</strong>,
+  bold: (chunks: ReactNode) => <strong className='text-bold' >{chunks}</strong>,
+  indigo: (chunks: ReactNode) => <span className="text-indigo-400"> {chunks} </span>,
+  p: (chunks: ReactNode) => <p className="p mt-[1em] max-w-[38rem] mx-auto text-justify">{chunks}</p>,
+  disclaimer: (chunks: ReactNode) => <p className="p mt-[1em] max-w-[20rem] mx-auto text-center text-sm text-neutral-500">{chunks}</p>,
+  hint: (chunks: ReactNode) => <span className='text-indigo-400 block'> {chunks}</span>,
+  linkTermsOfService: (chunks: ReactNode) => <Link href={`/${locale}/terms-of-service`} className="hover:underline italic">{chunks}</Link>,
+  linkPrivacyPolicy: (chunks: ReactNode) => <Link href={`/${locale}/privacy-policy`} className="hover:underline italic">{chunks}</Link>
+});

app/ui/EnterOrSignInButton.tsx

@@ -0,0 +1,38 @@
+import { FC } from 'react';
+
+import { SignInButton } from '@/app/ui/SignInButton';
+import Image from 'next/image';
+import { getTranslations } from "next-intl/server";
+import Link from 'next/link';
+import { paragraphFormatFactory } from '../lib/paragraphFormatFactory';
+import { AuthProvider } from '../lib/getProviders';
+
+export const EnterOrSignInButton: FC<{ session: any, locale: string, providers: AuthProvider[] }> = async ({ session, locale, providers }) => {
+  const paragraphFormat = paragraphFormatFactory(locale);
+
+  const t = await getTranslations("login-page");
+
+  return (
+    <>
+      <span className="flex justify-center mt-4">
+        {
+          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>
+      {t.rich("disclaimer", paragraphFormat)}
+    </>);
+};

app/ui/PageFooter.tsx

@@ -2,10 +2,12 @@ import Image from "next/image";
 import Link from "next/link";
 import React from "react";
 import { useTranslations } from "next-intl";
+import { getLocale } from "next-intl/server";
 
-export const PageFooter: React.FC = () => {
+export const PageFooter: React.FC = async () => {
 
     const t = useTranslations("PageFooter");
+    const locale = await getLocale();
 
     return(
         <div className="bg-base-100 text-base-content mt-10">
@@ -17,8 +19,8 @@ export const PageFooter: React.FC = () => {
                     </div>
                     <p className="text-base-content/70 mb-5">{t('app-description')}</p>
                     <Link href="/home" className="link link-hover">{t('links.home')}</Link>
-                    <Link href="/policy/" className="link link-hover">{t('links.privacy-policy')}</Link>
+                    <Link href={`/${locale}/privacy-policy/`} className="link link-hover">{t('links.privacy-policy')}</Link>
-                    <Link href="/terms/" className="link link-hover">{t('links.terms-of-service')}</Link>
+                    <Link href={`/${locale}/terms-of-service/`} className="link link-hover">{t('links.terms-of-service')}</Link>
                 </div>
                 <div>
                     <span className="footer-title opacity-70">documents</span>

messages/en.json

@@ -18,9 +18,7 @@
   },
   "login-page": {
     "main-card": {
-      "title-1": "Which bills are due?",
+      "title": "Bill management made easy<indigo> for landlords</indigo>",
-      "title-2": "Which are payed?",
-      "title-3": "How much are my expenses?",
       "text-1": "These are the questions this simple and free app will help you with ...",
       "text-2": "... try it & use it completly free!",
       "go-to-app": "Go to the App",

messages/hr.json

@@ -18,40 +18,29 @@
   },
   "login-page": {
     "main-card": {
-      "title-1": "Jednostavno ",
+      "title": "Upravljanje režijama<indigo> za najmodavce</indigo>",
-      "title-2": "upravljanje režijama",
+      "text": "<p>Svima koji imaju rentaju stan ili kuću, <strong>najdraži trenutak</strong> je kada podstanar plati najam. Vođenje režija međutim je <strong>mrzak posao</strong>.</p><p>Računi kapaju jedan po jedan, <strong>papiri se gomilaju</strong>, treba ih razvrstati, pratiti što je stiglo, što je plaćeno, a što nije...</p><p>Slijedi prikupljanje i <strong>slanje računa podstanaru</strong>, vođenje evidencije o tome je li platio ... dosadan posao koji <strong>traži preciznost</strong>.</p><p></p>",
-      "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>",
+      "in-app-browser-warning": "<strong>UPOZORENJE!</strong> 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>",
+      "image-url": "/man-burried-under-paper.png",
+      "image-alt": "Čovjek zatrpan papirima",
       "video-url": "/welcome-demo-vp9-25fps-1500bps.webm",
-      "image-url": "/hero.png",
       "video-title": "Demo osnovnih koraka u aplikaciji"
     },
     "card-1": {
-      "title": "Prijenos režija u idući mjesec",
+      "title": "Može li bolje?",
-      "text": "Sve tvoje nekretnine i pripadajuće režije se automatski prenose u idući mjesec, tako da ne moraš svaki mjesec ponovno unositi iste podatke.",
+      "text": "<p>Imate sreće - <strong>režije.app</strong> je besplatni alat je izrađen da <strong>rješava upravo navedene probleme</strong>!</p><p>Ovaj alat će vam omogućiti laku i <strong>preglednu evidenciju dospjelih i plaćenih računa</strong>. Sve digitalno, efikasno i pedantno!</p><p>Uz to ovaj alat nudi moogućnost <strong>automatskog slanja</strong> mjesečnog obračuna podstanarima, koji uključuje bar koda za brzo <strong>plaćanje najamnine i režija na vaš IBAN ili Revolute.</strong></p>",
       "video-url": "/kopiranje-mjeseca-demo.webm",
-      "image-url": "/status-color-demo.png",
+      "image-url": "/robot-sorting-papers.png",
+      "image-alt": "Robot sortira papire",
       "video-title": "Demo kopiranja mjeseca"
     },
     "card-2": {
-      "title": "Boja signalizira status",
+      "title": "Što mi treba za početak?",
-      "text": "Jednim pogledom možete vidjeti koji računi su plaćeni, a koji nisu. U tome vam pomaže boja koja označava status računa.",
+      "text": "<p>Ne morate popunjavati formulate za registraciju, ni potvrđivati svoju email adresu.</p><p>Dovoljan je samo <strong>Gmail račun za prijavu</strong> i možete odmah početi koristi alat - <strong>sjedi i vozi, ključ u ruke!</strong></p>"
-      "image-url": "/bar-code-demo.png",
-      "image-alt": "Boje označavaju status računa"
     },
-    "card-3": {
+    "sign-in-button": "Prijavi se pomoću",
-      "title": "Prikaz bar koda za plaćanje",
+    "disclaimer": "<disclaimer><bold>Napomena:</bold> činom prijave u ovu web aplikaciju prihvaćate <linkTermsOfService>Uvjete korištenja</linkTermsOfService> i <linkPrivacyPolicy>Pravila privatnosti</linkPrivacyPolicy>.</disclaimer>"
-      "text": "Ako priloženi dokument sadrži 2D barkod, on se automatski izvlači i prikazuje na stranici, tako da ga možete skenirati bez otvaranja PDF dokumenta.",
-      "video-url": "/bar-code-demo.webm",
-      "image-url": "/bar-code-demo.png",
-      "video-title": "Demo osnovnih koraka u aplikaciji"
-    },
-    "sign-in-button": "Prijavi se pomoću"
   },
   "home-page": {
     "add-location-button": {