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,95 +1,42 @@
-import { FC, ReactNode } from 'react';
+import { FC } from 'react';
 import { Main } from '@/app/ui/Main';
-
-import { authConfig, myAuth } from "@/app/lib/auth";
-import { SignInButton } from '@/app/ui/SignInButton';
+import { myAuth } from "@/app/lib/auth";
 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 { MultiParagraphText } from '../ui/MultiParagrpahText';
+import { paragraphFormatFactory } from '../lib/paragraphFormatFactory';
+import { getAuthProviders } from '../lib/getProviders';
+import { EnterOrSignInButton } from '../ui/EnterOrSignInButton';
 
-type Provider = {
-  id: string;
-  name: string;
-  type: string;
-  style: {
-    logo: string;
-    bg: string;
-    text: string;
-  };
-};
+const h1ClassName = "text-3xl font-bold max-w-[38rem] mx-auto text-neutral-50";
+const h2ClassName = h1ClassName + " mt-8";
 
-function getProviders(): Provider[] {
-  const providerKeys: (keyof Provider)[] = ["id", "name", "type", "style"];
-  return authConfig.providers.map((provider) =>
-    getKeyValuesFromObject<Provider>(provider, providerKeys)
-  );
-}
+const Page: FC = async () => {
 
-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 t = await getTranslations("login-page");
-  // get userAgent from NextJS
+  const paragraphFormat = paragraphFormatFactory(locale);
 
+  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;
 
   const insideWebeview = isWebview(userAgent);
 
- return (
+  return (
     <Main>
-      <h1 className="text-3xl font-bold text-center">
-        <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-2">{t("main-card.title-3")}</span>
+      <h1 className={h1ClassName}>
+        {t.rich("main-card.title", paragraphFormat)}
       </h1>
-      {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>
-      })}
+      {t.rich("main-card.text", paragraphFormat)}
+      <Image src={t("main-card.image-url")} alt={t("main-card.image-alt")} className="m-auto mt-0" width={400} height={300} />
 
-      <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>
+      <EnterOrSignInButton session={session} locale={locale} providers={providers} />
 
       {
         // 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", {
-                  br: () => <br />,
-                  strong: (chunks:ReactNode) => <strong className='text-indigo-300' >{chunks}</strong>,
-                  hint: (chunks:ReactNode) => <span className='text-indigo-300 block'> {chunks}</span> 
-              })
-            }
+            {t.rich("main-card.in-app-browser-warning", paragraphFormat)}
           </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")}>
-        <source src={t("main-card.video-url")} type="video/webm" />
-      </video>
+      <EnterOrSignInButton session={session} locale={locale} providers={providers} />
 
-      <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="/terms/" className="link link-hover">{t('links.terms-of-service')}</Link>
+                    <Link href={`/${locale}/privacy-policy/`} className="link link-hover">{t('links.privacy-policy')}</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>