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