From 79584d1222bb004b7d4158d44825feddd937f7a6 Mon Sep 17 00:00:00 2001
From: RedBoardDev <thomas.ott@epitech.eu>
Date: Wed, 11 Feb 2026 23:12:46 +0200
Subject: [PATCH 1/2] refactor(middleware): improve code readability and
 consistency in import statements and formatting across various files

---
 apps/landing_page/app/[locale]/i18n.tsx       |   6 +-
 apps/landing_page/app/[locale]/layout.tsx     |  20 +-
 apps/landing_page/app/[locale]/loading.tsx    |   2 +-
 apps/landing_page/app/[locale]/page.tsx       |   8 +-
 apps/landing_page/app/globals.css             |  36 +-
 apps/landing_page/app/robots.ts               |   6 +-
 apps/landing_page/app/sitemap.ts              |   2 +-
 .../components/auth/auth-modal.tsx            |  57 ++-
 .../components/landing/header.tsx             |  21 +-
 .../landing/hooks/use-active-section.ts       |  11 +-
 .../components/landing/import/import-demo.tsx |  37 +-
 .../components/landing/import/import-form.tsx |  51 ++-
 .../landing/import/recipe-preview.tsx         |  40 +-
 .../components/landing/landing-page.tsx       |  72 ++--
 .../components/landing/layout/footer.tsx      |   8 +-
 .../components/landing/layout/header.tsx      |  12 +-
 .../landing/layout/section-container.tsx      |   8 +-
 .../components/landing/locale-switcher.tsx    |  11 +-
 .../components/landing/nav-button.tsx         |   4 +-
 .../landing/sections/cta-section.tsx          |  16 +-
 .../landing/sections/faq-section.tsx          |  20 +-
 .../landing/sections/features-section.tsx     | 354 +++++++++---------
 .../landing/sections/hero-section.tsx         |  30 +-
 .../landing/sections/import-section.tsx       |  30 +-
 .../landing/sections/pricing-section.tsx      |  18 +-
 .../components/landing/ui/feature-card.tsx    |  15 +-
 .../components/landing/ui/feature-item.tsx    |   2 +-
 .../components/landing/ui/nav-button.tsx      |   4 +-
 .../components/landing/ui/primary-button.tsx  |   7 +-
 .../components/landing/ui/recipe-meta.tsx     |   2 +-
 .../components/landing/ui/section-header.tsx  |   5 +-
 .../components/landing/ui/trust-signal.tsx    |   2 +-
 apps/landing_page/components/ui/button.tsx    |  26 +-
 .../components/ui/dropdown-menu.tsx           | 120 ++----
 apps/landing_page/lib/auth-context.tsx        |  78 ++--
 apps/landing_page/lib/utils.ts                |   2 +-
 apps/landing_page/middleware.ts               |  12 +-
 apps/landing_page/next.config.mjs             |  11 +-
 apps/landing_page/postcss.config.mjs          |   6 +-
 39 files changed, 565 insertions(+), 607 deletions(-)

diff --git a/apps/landing_page/app/[locale]/i18n.tsx b/apps/landing_page/app/[locale]/i18n.tsx
index d1bad5a..fa27eb2 100644
--- a/apps/landing_page/app/[locale]/i18n.tsx
+++ b/apps/landing_page/app/[locale]/i18n.tsx
@@ -1,9 +1,9 @@
 "use client";
 
-import { type Locale } from "@cookmate/i18n";
-import { setupI18n, type Messages } from "@lingui/core";
+import type { Locale } from "@cookmate/i18n";
+import { type Messages, setupI18n } from "@lingui/core";
 import { I18nProvider } from "@lingui/react";
-import { useMemo, type ReactNode } from "react";
+import { type ReactNode, useMemo } from "react";
 
 interface ClientI18nProviderProps {
   children: ReactNode;
diff --git a/apps/landing_page/app/[locale]/layout.tsx b/apps/landing_page/app/[locale]/layout.tsx
index 2f42014..46a1eab 100644
--- a/apps/landing_page/app/[locale]/layout.tsx
+++ b/apps/landing_page/app/[locale]/layout.tsx
@@ -1,10 +1,10 @@
-import type React from "react";
+import { defaultLocale, isValidLocale, type Locale, locales } from "@cookmate/i18n";
+import { type Messages, setupI18n } from "@lingui/core";
+import { setI18n } from "@lingui/react/server";
+import { Analytics } from "@vercel/analytics/next";
 import type { Metadata, Viewport } from "next";
 import { Barlow, Barlow_Semi_Condensed } from "next/font/google";
-import { Analytics } from "@vercel/analytics/next";
-import { setI18n } from "@lingui/react/server";
-import { setupI18n, type Messages } from "@lingui/core";
-import { locales, defaultLocale, type Locale, isValidLocale } from "@cookmate/i18n";
+import type React from "react";
 import { ClientI18nProvider } from "./i18n";
 import "../globals.css";
 
@@ -32,11 +32,7 @@ export function generateStaticParams() {
 }
 
 // Localized metadata
-export async function generateMetadata({
-  params,
-}: {
-  params: Promise<{ locale: Locale }>;
-}): Promise<Metadata> {
+export async function generateMetadata({ params }: { params: Promise<{ locale: Locale }> }): Promise<Metadata> {
   const { locale } = await params;
 
   const titles: Record<Locale, string> = {
@@ -207,9 +203,7 @@ export default async function LocaleLayout({
 
   return (
     <html lang={validLocale}>
-      <body
-        className={`${barlow.variable} ${barlowSemiCondensed.variable} font-sans antialiased`}
-      >
+      <body className={`${barlow.variable} ${barlowSemiCondensed.variable} font-sans antialiased`}>
         <script
           type="application/ld+json"
           dangerouslySetInnerHTML={{
diff --git a/apps/landing_page/app/[locale]/loading.tsx b/apps/landing_page/app/[locale]/loading.tsx
index f15322a..4349ac3 100644
--- a/apps/landing_page/app/[locale]/loading.tsx
+++ b/apps/landing_page/app/[locale]/loading.tsx
@@ -1,3 +1,3 @@
 export default function Loading() {
-  return null
+  return null;
 }
diff --git a/apps/landing_page/app/[locale]/page.tsx b/apps/landing_page/app/[locale]/page.tsx
index ed7b50a..1d4ca48 100644
--- a/apps/landing_page/app/[locale]/page.tsx
+++ b/apps/landing_page/app/[locale]/page.tsx
@@ -1,12 +1,12 @@
-"use client"
+"use client";
 
-import { AuthProvider } from "@/lib/auth-context"
-import { LandingPage } from "@/components/landing/landing-page"
+import { LandingPage } from "@/components/landing/landing-page";
+import { AuthProvider } from "@/lib/auth-context";
 
 export default function Page() {
   return (
     <AuthProvider>
       <LandingPage />
     </AuthProvider>
-  )
+  );
 }
diff --git a/apps/landing_page/app/globals.css b/apps/landing_page/app/globals.css
index 2e3d295..3c97b4f 100644
--- a/apps/landing_page/app/globals.css
+++ b/apps/landing_page/app/globals.css
@@ -179,15 +179,21 @@
 
 /* Elevated card shadows */
 .shadow-card {
-  box-shadow: 0 1px 3px hsl(var(--shadow-color) / 0.04), 0 4px 12px hsl(var(--shadow-color) / 0.06);
+  box-shadow:
+    0 1px 3px hsl(var(--shadow-color) / 0.04),
+    0 4px 12px hsl(var(--shadow-color) / 0.06);
 }
 
 .shadow-card-hover {
-  box-shadow: 0 2px 8px hsl(var(--shadow-color) / 0.06), 0 8px 24px hsl(var(--shadow-color) / 0.1);
+  box-shadow:
+    0 2px 8px hsl(var(--shadow-color) / 0.06),
+    0 8px 24px hsl(var(--shadow-color) / 0.1);
 }
 
 .shadow-elevated {
-  box-shadow: 0 4px 12px hsl(var(--shadow-color) / 0.08), 0 16px 48px hsl(var(--shadow-color) / 0.12);
+  box-shadow:
+    0 4px 12px hsl(var(--shadow-color) / 0.08),
+    0 16px 48px hsl(var(--shadow-color) / 0.12);
 }
 
 /* Scrollbar utilities */
@@ -314,7 +320,9 @@
   background-color: var(--card);
   border-radius: 1rem;
   border: 1px solid var(--border);
-  box-shadow: 0 1px 3px hsl(var(--shadow-color) / 0.04), 0 4px 12px hsl(var(--shadow-color) / 0.06);
+  box-shadow:
+    0 1px 3px hsl(var(--shadow-color) / 0.04),
+    0 4px 12px hsl(var(--shadow-color) / 0.06);
   transition: all 200ms ease-out;
 }
 
@@ -322,12 +330,16 @@
   background-color: var(--card);
   border-radius: 1rem;
   border: 1px solid var(--border);
-  box-shadow: 0 1px 3px hsl(var(--shadow-color) / 0.04), 0 4px 12px hsl(var(--shadow-color) / 0.06);
+  box-shadow:
+    0 1px 3px hsl(var(--shadow-color) / 0.04),
+    0 4px 12px hsl(var(--shadow-color) / 0.06);
   transition: all 200ms ease-out;
   cursor: pointer;
 }
 .card-interactive:hover {
-  box-shadow: 0 2px 8px hsl(var(--shadow-color) / 0.06), 0 8px 24px hsl(var(--shadow-color) / 0.1);
+  box-shadow:
+    0 2px 8px hsl(var(--shadow-color) / 0.06),
+    0 8px 24px hsl(var(--shadow-color) / 0.1);
   border-color: var(--border-hover);
 }
 
@@ -337,7 +349,8 @@
 
 /* Floating orb animation */
 @keyframes float {
-  0%, 100% {
+  0%,
+  100% {
     transform: translate(0, 0) scale(1);
   }
   33% {
@@ -350,7 +363,8 @@
 
 /* Slow pulse animation */
 @keyframes slowPulse {
-  0%, 100% {
+  0%,
+  100% {
     opacity: 0.4;
     transform: scale(1);
   }
@@ -362,7 +376,8 @@
 
 /* Gentle drift animation */
 @keyframes gentleDrift {
-  0%, 100% {
+  0%,
+  100% {
     transform: translate(0, 0);
   }
   50% {
@@ -385,7 +400,8 @@
 
 /* Orb glow animation */
 @keyframes orbGlow {
-  0%, 100% {
+  0%,
+  100% {
     opacity: 0.3;
     filter: blur(60px);
   }
diff --git a/apps/landing_page/app/robots.ts b/apps/landing_page/app/robots.ts
index fd11b93..5374152 100644
--- a/apps/landing_page/app/robots.ts
+++ b/apps/landing_page/app/robots.ts
@@ -1,7 +1,7 @@
-import { MetadataRoute } from "next"
+import type { MetadataRoute } from "next";
 
 export default function robots(): MetadataRoute.Robots {
-  const baseUrl = process.env.NEXT_PUBLIC_SITE_URL || "https://cookmate.app"
+  const baseUrl = process.env.NEXT_PUBLIC_SITE_URL || "https://cookmate.app";
 
   return {
     rules: {
@@ -9,5 +9,5 @@ export default function robots(): MetadataRoute.Robots {
       allow: "/",
     },
     sitemap: `${baseUrl}/sitemap.xml`,
-  }
+  };
 }
diff --git a/apps/landing_page/app/sitemap.ts b/apps/landing_page/app/sitemap.ts
index ec35d77..1a9c418 100644
--- a/apps/landing_page/app/sitemap.ts
+++ b/apps/landing_page/app/sitemap.ts
@@ -1,5 +1,5 @@
-import { MetadataRoute } from "next";
 import { locales } from "@cookmate/i18n";
+import type { MetadataRoute } from "next";
 
 export default function sitemap(): MetadataRoute.Sitemap {
   const baseUrl = process.env.NEXT_PUBLIC_SITE_URL || "https://cookmate.app";
diff --git a/apps/landing_page/components/auth/auth-modal.tsx b/apps/landing_page/components/auth/auth-modal.tsx
index 808eb67..3feb654 100644
--- a/apps/landing_page/components/auth/auth-modal.tsx
+++ b/apps/landing_page/components/auth/auth-modal.tsx
@@ -1,49 +1,48 @@
-"use client"
+"use client";
 
-import type React from "react"
-
-import { useState } from "react"
-import { X, Eye, EyeOff, Loader2, Mail, Lock, User } from "lucide-react"
-import { useAuth } from "@/lib/auth-context"
+import { Eye, EyeOff, Loader2, Lock, Mail, User, X } from "lucide-react";
+import type React from "react";
+import { useState } from "react";
+import { useAuth } from "@/lib/auth-context";
 
 interface AuthModalProps {
-  isOpen: boolean
-  onClose: () => void
-  defaultTab?: "login" | "signup"
+  isOpen: boolean;
+  onClose: () => void;
+  defaultTab?: "login" | "signup";
 }
 
 export function AuthModal({ isOpen, onClose, defaultTab = "login" }: AuthModalProps) {
-  const [activeTab, setActiveTab] = useState<"login" | "signup">(defaultTab)
-  const [showPassword, setShowPassword] = useState(false)
-  const [isLoading, setIsLoading] = useState(false)
-  const [error, setError] = useState("")
+  const [activeTab, setActiveTab] = useState<"login" | "signup">(defaultTab);
+  const [showPassword, setShowPassword] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState("");
 
-  const [email, setEmail] = useState("")
-  const [password, setPassword] = useState("")
-  const [name, setName] = useState("")
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [name, setName] = useState("");
 
-  const { login, signup } = useAuth()
+  const { login, signup } = useAuth();
 
-  if (!isOpen) return null
+  if (!isOpen) return null;
 
   const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault()
-    setError("")
-    setIsLoading(true)
+    e.preventDefault();
+    setError("");
+    setIsLoading(true);
 
     try {
       if (activeTab === "login") {
-        await login(email, password)
+        await login(email, password);
       } else {
-        await signup(email, password, name)
+        await signup(email, password, name);
       }
-      onClose()
-    } catch (err) {
-      setError("Une erreur est survenue. Veuillez réessayer.")
+      onClose();
+    } catch (_err) {
+      setError("Une erreur est survenue. Veuillez réessayer.");
     } finally {
-      setIsLoading(false)
+      setIsLoading(false);
     }
-  }
+  };
 
   return (
     <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
@@ -220,5 +219,5 @@ export function AuthModal({ isOpen, onClose, defaultTab = "login" }: AuthModalPr
         </form>
       </div>
     </div>
-  )
+  );
 }
diff --git a/apps/landing_page/components/landing/header.tsx b/apps/landing_page/components/landing/header.tsx
index 471d80e..221bccf 100644
--- a/apps/landing_page/components/landing/header.tsx
+++ b/apps/landing_page/components/landing/header.tsx
@@ -1,11 +1,11 @@
 "use client";
 
+import { Trans } from "@lingui/react/macro";
 import Image from "next/image";
 import Link from "next/link";
+import iconImage from "@/app/icon.png";
 import { Button } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
-import iconImage from "@/app/icon.png";
-import { Trans } from "@lingui/react/macro";
 import { useActiveSection } from "./hooks/use-active-section";
 import { LocaleSwitcher } from "./locale-switcher";
 import { NavButton } from "./ui/nav-button";
@@ -23,7 +23,7 @@ export function Header({ onLogin, onSignup }: HeaderProps) {
         "fixed left-0 right-0 top-0 z-50 border-b border-border/60",
         "bg-background/90 backdrop-blur-xl",
         "shadow-[0_1px_0_rgba(0,0,0,0.04)]",
-        "supports-[backdrop-filter]:bg-background/80"
+        "supports-[backdrop-filter]:bg-background/80",
       )}
     >
       <div className="mx-auto flex h-16 max-w-7xl items-center justify-between px-4 sm:px-6">
@@ -31,19 +31,12 @@ export function Header({ onLogin, onSignup }: HeaderProps) {
           className={cn(
             "group flex items-center gap-2 rounded-full pr-2",
             "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/40",
-            "focus-visible:ring-offset-2 focus-visible:ring-offset-background"
+            "focus-visible:ring-offset-2 focus-visible:ring-offset-background",
           )}
           href="/"
         >
           <span className="flex h-10 w-10 items-center justify-center rounded-2xl bg-card/80 shadow-sm">
-            <Image
-              src={iconImage}
-              alt="Cookmate"
-              width={40}
-              height={40}
-              className="h-10 w-10"
-              priority
-            />
+            <Image src={iconImage} alt="Cookmate" width={40} height={40} className="h-10 w-10" priority />
           </span>
           <span className="text-lg font-display text-foreground transition-colors group-hover:text-primary">
             Cookmate
@@ -53,7 +46,7 @@ export function Header({ onLogin, onSignup }: HeaderProps) {
         <nav
           className={cn(
             "hidden items-center gap-1 rounded-full p-1.5 md:flex",
-            "border border-border/70 bg-card/85 shadow-sm backdrop-blur"
+            "border border-border/70 bg-card/85 shadow-sm backdrop-blur",
           )}
         >
           <NavButton href="#" active={activeSection === "home"}>
@@ -77,7 +70,7 @@ export function Header({ onLogin, onSignup }: HeaderProps) {
             onClick={onLogin}
             className={cn(
               "hidden rounded-full px-4 text-sm font-medium transition-all md:flex",
-              "text-muted-foreground hover:bg-accent/20 hover:text-foreground"
+              "text-muted-foreground hover:bg-accent/20 hover:text-foreground",
             )}
           >
             <Trans>Log in</Trans>
diff --git a/apps/landing_page/components/landing/hooks/use-active-section.ts b/apps/landing_page/components/landing/hooks/use-active-section.ts
index 836942c..461f22a 100644
--- a/apps/landing_page/components/landing/hooks/use-active-section.ts
+++ b/apps/landing_page/components/landing/hooks/use-active-section.ts
@@ -15,7 +15,10 @@ export function useActiveSection(): ActiveSection {
       const featuresElement = document.getElementById("features");
       const faqElement = document.getElementById("faq");
 
-      if (window.scrollY < 200 || (featuresElement && featuresElement.getBoundingClientRect().top > window.innerHeight * 0.3)) {
+      if (
+        window.scrollY < 200 ||
+        (featuresElement && featuresElement.getBoundingClientRect().top > window.innerHeight * 0.3)
+      ) {
         setActiveSection("home");
         return;
       }
@@ -48,11 +51,7 @@ export function useActiveSection(): ActiveSection {
         const elementTop = rect.top + window.scrollY;
         const distance = Math.abs(scrollPosition - elementTop);
 
-        if (
-          rect.top <= window.innerHeight * 0.5 &&
-          rect.bottom >= 0 &&
-          distance < closestDistance
-        ) {
+        if (rect.top <= window.innerHeight * 0.5 && rect.bottom >= 0 && distance < closestDistance) {
           closestDistance = distance;
           closestSection = sectionId;
         }
diff --git a/apps/landing_page/components/landing/import/import-demo.tsx b/apps/landing_page/components/landing/import/import-demo.tsx
index 27eb92e..0e3dd56 100644
--- a/apps/landing_page/components/landing/import/import-demo.tsx
+++ b/apps/landing_page/components/landing/import/import-demo.tsx
@@ -1,20 +1,18 @@
-"use client"
+"use client";
 
-import { Link2, Sparkles, Instagram, Video, Camera, FileText } from "lucide-react"
-import { useLingui, Trans } from "@lingui/react/macro"
-import { SectionContainer } from "../layout/section-container"
-import { SectionHeader } from "../ui/section-header"
-import { ImportForm } from "./import-form"
-import { RecipePreview } from "./recipe-preview"
+import { Trans, useLingui } from "@lingui/react/macro";
+import { Link2, Sparkles } from "lucide-react";
+import { ImportForm } from "./import-form";
+import { RecipePreview } from "./recipe-preview";
 
 interface ImportDemoProps {
-  urlInput: string
-  setUrlInput: (value: string) => void
-  isProcessing: boolean
-  recipeImported: boolean
-  onImport: () => void
-  onReset: () => void
-  onSignup: () => void
+  urlInput: string;
+  setUrlInput: (value: string) => void;
+  isProcessing: boolean;
+  recipeImported: boolean;
+  onImport: () => void;
+  onReset: () => void;
+  onSignup: () => void;
 }
 
 export function ImportDemo({
@@ -26,7 +24,7 @@ export function ImportDemo({
   onReset,
   onSignup,
 }: ImportDemoProps) {
-  const { t } = useLingui()
+  const { t } = useLingui();
 
   return (
     <div className="bg-white rounded-2xl md:rounded-3xl shadow-[0_4px_12px_-8px_rgba(0,0,0,0.22)] border border-[#E6D7C7]/80 overflow-hidden">
@@ -50,16 +48,11 @@ export function ImportDemo({
 
       <div className="p-6 md:p-10">
         {!recipeImported ? (
-          <ImportForm
-            urlInput={urlInput}
-            setUrlInput={setUrlInput}
-            isProcessing={isProcessing}
-            onImport={onImport}
-          />
+          <ImportForm urlInput={urlInput} setUrlInput={setUrlInput} isProcessing={isProcessing} onImport={onImport} />
         ) : (
           <RecipePreview onSignup={onSignup} onReset={onReset} />
         )}
       </div>
     </div>
-  )
+  );
 }
diff --git a/apps/landing_page/components/landing/import/import-form.tsx b/apps/landing_page/components/landing/import/import-form.tsx
index e9aca6c..8b46c92 100644
--- a/apps/landing_page/components/landing/import/import-form.tsx
+++ b/apps/landing_page/components/landing/import/import-form.tsx
@@ -1,18 +1,18 @@
-"use client"
+"use client";
 
-import { Link2, Sparkles, Check } from "lucide-react"
-import { useLingui, Trans } from "@lingui/react/macro"
-import { PrimaryButton } from "../ui/primary-button"
+import { Trans, useLingui } from "@lingui/react/macro";
+import { Check, Link2, Sparkles } from "lucide-react";
+import { PrimaryButton } from "../ui/primary-button";
 
 interface ImportFormProps {
-  urlInput: string
-  setUrlInput: (value: string) => void
-  isProcessing: boolean
-  onImport: () => void
+  urlInput: string;
+  setUrlInput: (value: string) => void;
+  isProcessing: boolean;
+  onImport: () => void;
 }
 
 export function ImportForm({ urlInput, setUrlInput, isProcessing, onImport }: ImportFormProps) {
-  const { t } = useLingui()
+  const { t } = useLingui();
 
   return (
     <div className="max-w-lg mx-auto">
@@ -38,12 +38,7 @@ export function ImportForm({ urlInput, setUrlInput, isProcessing, onImport }: Im
         />
       </div>
 
-      <PrimaryButton
-        onClick={onImport}
-        disabled={isProcessing}
-        size="md"
-        className="w-full rounded-xl shadow-none"
-      >
+      <PrimaryButton onClick={onImport} disabled={isProcessing} size="md" className="w-full rounded-xl shadow-none">
         {isProcessing ? (
           <>
             <div className="w-5 h-5 border-2 border-white/30 border-t-white rounded-full animate-spin" />
@@ -61,22 +56,20 @@ export function ImportForm({ urlInput, setUrlInput, isProcessing, onImport }: Im
 
       {isProcessing && (
         <div className="mt-8 space-y-3">
-          {[t`Reading the page...`, t`Extracting ingredients...`, t`Structuring the steps...`].map(
-            (step, i) => (
-              <div
-                key={i}
-                className="flex items-center gap-3 text-sm animate-pulse"
-                style={{ animationDelay: `${i * 0.3}s` }}
-              >
-                <div className="w-5 h-5 rounded-full bg-[#5F7A57]/20 flex items-center justify-center">
-                  <Check className="w-3 h-3 text-[#5F7A57]" />
-                </div>
-                <span className="text-[#6E6258]">{step}</span>
+          {[t`Reading the page...`, t`Extracting ingredients...`, t`Structuring the steps...`].map((step, i) => (
+            <div
+              key={i}
+              className="flex items-center gap-3 text-sm animate-pulse"
+              style={{ animationDelay: `${i * 0.3}s` }}
+            >
+              <div className="w-5 h-5 rounded-full bg-[#5F7A57]/20 flex items-center justify-center">
+                <Check className="w-3 h-3 text-[#5F7A57]" />
               </div>
-            ),
-          )}
+              <span className="text-[#6E6258]">{step}</span>
+            </div>
+          ))}
         </div>
       )}
     </div>
-  )
+  );
 }
diff --git a/apps/landing_page/components/landing/import/recipe-preview.tsx b/apps/landing_page/components/landing/import/recipe-preview.tsx
index bec7338..b6beb07 100644
--- a/apps/landing_page/components/landing/import/recipe-preview.tsx
+++ b/apps/landing_page/components/landing/import/recipe-preview.tsx
@@ -1,19 +1,31 @@
-"use client"
+"use client";
 
-import Image from "next/image"
-import { useLingui, Trans } from "@lingui/react/macro"
-import { Heart, Link2, Clock, Users, Flame, ChefHat, Calendar, ShoppingCart, ArrowRight, RotateCcw, CheckCircle2 } from "lucide-react"
-import { PrimaryButton } from "../ui/primary-button"
-import { RecipeMeta } from "../ui/recipe-meta"
-import { Tag } from "../ui/tag"
+import { Trans, useLingui } from "@lingui/react/macro";
+import {
+  ArrowRight,
+  Calendar,
+  CheckCircle2,
+  ChefHat,
+  Clock,
+  Flame,
+  Heart,
+  Link2,
+  RotateCcw,
+  ShoppingCart,
+  Users,
+} from "lucide-react";
+import Image from "next/image";
+import { PrimaryButton } from "../ui/primary-button";
+import { RecipeMeta } from "../ui/recipe-meta";
+import { Tag } from "../ui/tag";
 
 interface RecipePreviewProps {
-  onSignup: () => void
-  onReset: () => void
+  onSignup: () => void;
+  onReset: () => void;
 }
 
 export function RecipePreview({ onSignup, onReset }: RecipePreviewProps) {
-  const { t } = useLingui()
+  const { t } = useLingui();
 
   return (
     <div className="max-w-3xl mx-auto">
@@ -72,11 +84,7 @@ export function RecipePreview({ onSignup, onReset }: RecipePreviewProps) {
             </div>
 
             <div className="flex gap-2">
-              <PrimaryButton
-                onClick={onSignup}
-                size="md"
-                className="flex-1 rounded-xl shadow-md shadow-[#C6502B]/15"
-              >
+              <PrimaryButton onClick={onSignup} size="md" className="flex-1 rounded-xl shadow-md shadow-[#C6502B]/15">
                 <ChefHat className="w-4 h-4" />
                 <Trans>Cook</Trans>
               </PrimaryButton>
@@ -98,5 +106,5 @@ export function RecipePreview({ onSignup, onReset }: RecipePreviewProps) {
         </PrimaryButton>
       </div>
     </div>
-  )
+  );
 }
diff --git a/apps/landing_page/components/landing/landing-page.tsx b/apps/landing_page/components/landing/landing-page.tsx
index 9851b53..a7488fa 100644
--- a/apps/landing_page/components/landing/landing-page.tsx
+++ b/apps/landing_page/components/landing/landing-page.tsx
@@ -1,53 +1,53 @@
-"use client"
-
-import { useState } from "react"
-import dynamic from "next/dynamic"
-import { cn } from "@/lib/utils"
-import { Header } from "./layout/header"
-import { Footer } from "./layout/footer"
-import { HeroSection } from "./sections/hero-section"
-import { ImportSection } from "./sections/import-section"
-import { FeaturesSection } from "./sections/features-section"
-import { PricingSection } from "./sections/pricing-section"
-import { FaqSection } from "./sections/faq-section"
-import { CtaSection } from "./sections/cta-section"
+"use client";
+
+import dynamic from "next/dynamic";
+import { useState } from "react";
+import { cn } from "@/lib/utils";
+import { Footer } from "./layout/footer";
+import { Header } from "./layout/header";
+import { CtaSection } from "./sections/cta-section";
+import { FaqSection } from "./sections/faq-section";
+import { FeaturesSection } from "./sections/features-section";
+import { HeroSection } from "./sections/hero-section";
+import { ImportSection } from "./sections/import-section";
+import { PricingSection } from "./sections/pricing-section";
 
 const AuthModal = dynamic(() => import("@/components/auth/auth-modal").then((mod) => ({ default: mod.AuthModal })), {
   ssr: false,
-})
+});
 
 export function LandingPage() {
-  const [showAuth, setShowAuth] = useState(false)
-  const [authTab, setAuthTab] = useState<"login" | "signup">("signup")
-  const [urlInput, setUrlInput] = useState("")
-  const [isProcessing, setIsProcessing] = useState(false)
-  const [recipeImported, setRecipeImported] = useState(false)
+  const [showAuth, setShowAuth] = useState(false);
+  const [authTab, setAuthTab] = useState<"login" | "signup">("signup");
+  const [urlInput, setUrlInput] = useState("");
+  const [isProcessing, setIsProcessing] = useState(false);
+  const [recipeImported, setRecipeImported] = useState(false);
 
   const openAuth = (tab: "login" | "signup") => {
-    setAuthTab(tab)
-    setShowAuth(true)
-  }
+    setAuthTab(tab);
+    setShowAuth(true);
+  };
 
   const scrollToImport = () => {
-    const element = document.getElementById("import-section")
-    element?.scrollIntoView({ behavior: "smooth", block: "center" })
-  }
+    const element = document.getElementById("import-section");
+    element?.scrollIntoView({ behavior: "smooth", block: "center" });
+  };
 
   const handleImport = () => {
     if (!urlInput) {
-      setUrlInput("https://halfbakedharvest.com/creamy-tuscan-chicken")
+      setUrlInput("https://halfbakedharvest.com/creamy-tuscan-chicken");
     }
-    setIsProcessing(true)
+    setIsProcessing(true);
     setTimeout(() => {
-      setIsProcessing(false)
-      setRecipeImported(true)
-    }, 2500)
-  }
+      setIsProcessing(false);
+      setRecipeImported(true);
+    }, 2500);
+  };
 
   const handleReset = () => {
-    setRecipeImported(false)
-    setUrlInput("")
-  }
+    setRecipeImported(false);
+    setUrlInput("");
+  };
 
   return (
     <>
@@ -57,7 +57,7 @@ export function LandingPage() {
           "bg-[radial-gradient(120%_120%_at_top,_hsl(var(--accent)/0.2)_0%,_transparent_60%)]",
           "after:pointer-events-none after:absolute after:inset-0",
           "after:bg-[radial-gradient(70%_70%_at_15%_0%,_hsl(var(--primary)/0.12)_0%,_transparent_60%),radial-gradient(70%_70%_at_85%_10%,_hsl(var(--accent)/0.12)_0%,_transparent_65%)]",
-          "after:opacity-80"
+          "after:opacity-80",
         )}
       >
         <Header onLogin={() => openAuth("login")} onSignup={() => openAuth("signup")} />
@@ -89,5 +89,5 @@ export function LandingPage() {
 
       <AuthModal isOpen={showAuth} onClose={() => setShowAuth(false)} defaultTab={authTab} />
     </>
-  )
+  );
 }
diff --git a/apps/landing_page/components/landing/layout/footer.tsx b/apps/landing_page/components/landing/layout/footer.tsx
index 4e138aa..f9c7230 100644
--- a/apps/landing_page/components/landing/layout/footer.tsx
+++ b/apps/landing_page/components/landing/layout/footer.tsx
@@ -1,7 +1,7 @@
-"use client"
+"use client";
 
-import { Trans } from "@lingui/react/macro"
-import { Twitter, Instagram, Mail } from "lucide-react"
+import { Trans } from "@lingui/react/macro";
+import { Instagram, Mail, Twitter } from "lucide-react";
 
 export function Footer() {
   return (
@@ -124,5 +124,5 @@ export function Footer() {
         </div>
       </div>
     </footer>
-  )
+  );
 }
diff --git a/apps/landing_page/components/landing/layout/header.tsx b/apps/landing_page/components/landing/layout/header.tsx
index 1496b46..9692051 100644
--- a/apps/landing_page/components/landing/layout/header.tsx
+++ b/apps/landing_page/components/landing/layout/header.tsx
@@ -1,11 +1,11 @@
 "use client";
 
+import { Trans } from "@lingui/react/macro";
 import Image from "next/image";
 import Link from "next/link";
+import iconImage from "@/app/icon.png";
 import { Button } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
-import iconImage from "@/app/icon.png";
-import { Trans } from "@lingui/react/macro";
 import { useActiveSection } from "../hooks/use-active-section";
 import { LocaleSwitcher } from "../locale-switcher";
 import { NavButton } from "../ui/nav-button";
@@ -23,7 +23,7 @@ export function Header({ onLogin, onSignup }: HeaderProps) {
         "fixed left-0 right-0 top-0 z-50 border-b border-border/60",
         "bg-background/90 backdrop-blur-xl",
         "shadow-[0_1px_0_rgba(0,0,0,0.04)]",
-        "supports-[backdrop-filter]:bg-background/80"
+        "supports-[backdrop-filter]:bg-background/80",
       )}
     >
       <div className="mx-auto flex h-16 max-w-7xl items-center justify-between px-4 sm:px-6">
@@ -31,7 +31,7 @@ export function Header({ onLogin, onSignup }: HeaderProps) {
           className={cn(
             "group flex items-center gap-2 rounded-full pr-2",
             "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/40",
-            "focus-visible:ring-offset-2 focus-visible:ring-offset-background"
+            "focus-visible:ring-offset-2 focus-visible:ring-offset-background",
           )}
           href="/"
         >
@@ -53,7 +53,7 @@ export function Header({ onLogin, onSignup }: HeaderProps) {
         <nav
           className={cn(
             "hidden items-center gap-1 rounded-full p-1.5 md:flex",
-            "border border-border/70 bg-card/85 shadow-sm backdrop-blur"
+            "border border-border/70 bg-card/85 shadow-sm backdrop-blur",
           )}
         >
           <NavButton href="#" active={activeSection === "home"}>
@@ -77,7 +77,7 @@ export function Header({ onLogin, onSignup }: HeaderProps) {
             onClick={onLogin}
             className={cn(
               "hidden rounded-full px-4 text-sm font-medium transition-all md:flex",
-              "text-muted-foreground hover:bg-accent/20 hover:text-foreground"
+              "text-muted-foreground hover:bg-accent/20 hover:text-foreground",
             )}
           >
             <Trans>Log in</Trans>
diff --git a/apps/landing_page/components/landing/layout/section-container.tsx b/apps/landing_page/components/landing/layout/section-container.tsx
index 2a19c79..ec4ea65 100644
--- a/apps/landing_page/components/landing/layout/section-container.tsx
+++ b/apps/landing_page/components/landing/layout/section-container.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { type ReactNode } from "react";
+import type { ReactNode } from "react";
 import { cn } from "@/lib/utils";
 
 interface SectionContainerProps {
@@ -17,9 +17,5 @@ const maxWidths = {
 };
 
 export function SectionContainer({ children, maxWidth = "md", className }: SectionContainerProps) {
-  return (
-    <div className={cn(maxWidths[maxWidth], "mx-auto px-4 md:px-8", className)}>
-      {children}
-    </div>
-  );
+  return <div className={cn(maxWidths[maxWidth], "mx-auto px-4 md:px-8", className)}>{children}</div>;
 }
diff --git a/apps/landing_page/components/landing/locale-switcher.tsx b/apps/landing_page/components/landing/locale-switcher.tsx
index a7f4a7a..2e8acf7 100644
--- a/apps/landing_page/components/landing/locale-switcher.tsx
+++ b/apps/landing_page/components/landing/locale-switcher.tsx
@@ -1,5 +1,7 @@
 "use client";
 
+import { type Locale, localeNames, locales } from "@cookmate/i18n";
+import { Globe } from "lucide-react";
 import { useParams, usePathname, useRouter } from "next/navigation";
 import { Button } from "@/components/ui/button";
 import {
@@ -9,8 +11,6 @@ import {
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import { cn } from "@/lib/utils";
-import { Globe } from "lucide-react";
-import { locales, localeNames, type Locale } from "@cookmate/i18n";
 
 export function LocaleSwitcher() {
   const router = useRouter();
@@ -35,7 +35,7 @@ export function LocaleSwitcher() {
             "rounded-full px-3 text-sm font-medium transition-all",
             "text-muted-foreground hover:bg-accent/20 hover:text-foreground",
             "focus-visible:ring-2 focus-visible:ring-accent/40",
-            "focus-visible:ring-offset-2 focus-visible:ring-offset-background"
+            "focus-visible:ring-offset-2 focus-visible:ring-offset-background",
           )}
           aria-label="Change language"
         >
@@ -48,10 +48,7 @@ export function LocaleSwitcher() {
           <DropdownMenuItem
             key={locale}
             onClick={() => switchLocale(locale)}
-            className={cn(
-              "cursor-pointer",
-              currentLocale === locale && "bg-accent text-accent-foreground"
-            )}
+            className={cn("cursor-pointer", currentLocale === locale && "bg-accent text-accent-foreground")}
           >
             <span className="font-medium">{localeNames[locale]}</span>
             <span className="ml-auto text-xs text-muted-foreground">{locale.toUpperCase()}</span>
diff --git a/apps/landing_page/components/landing/nav-button.tsx b/apps/landing_page/components/landing/nav-button.tsx
index 48a0c38..4239a67 100644
--- a/apps/landing_page/components/landing/nav-button.tsx
+++ b/apps/landing_page/components/landing/nav-button.tsx
@@ -1,8 +1,8 @@
 "use client";
 
+import type { ReactNode } from "react";
 import { Button } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
-import { type ReactNode } from "react";
 
 interface NavButtonProps {
   href: string;
@@ -22,7 +22,7 @@ export function NavButton({ href, active, children }: NavButtonProps) {
         "focus-visible:ring-offset-2 focus-visible:ring-offset-background",
         active
           ? "bg-accent text-accent-foreground shadow-sm"
-          : "text-muted-foreground hover:bg-accent/20 hover:text-foreground"
+          : "text-muted-foreground hover:bg-accent/20 hover:text-foreground",
       )}
     >
       <a href={href}>{children}</a>
diff --git a/apps/landing_page/components/landing/sections/cta-section.tsx b/apps/landing_page/components/landing/sections/cta-section.tsx
index e2de2f4..476d23c 100644
--- a/apps/landing_page/components/landing/sections/cta-section.tsx
+++ b/apps/landing_page/components/landing/sections/cta-section.tsx
@@ -1,13 +1,13 @@
-"use client"
+"use client";
 
-import { ArrowRight, Users, CheckCircle2, Sparkles } from "lucide-react"
-import { Trans } from "@lingui/react/macro"
-import { SectionContainer } from "../layout/section-container"
-import { PrimaryButton } from "../ui/primary-button"
-import { TrustSignal } from "../ui/trust-signal"
+import { Trans } from "@lingui/react/macro";
+import { ArrowRight, CheckCircle2, Sparkles, Users } from "lucide-react";
+import { SectionContainer } from "../layout/section-container";
+import { PrimaryButton } from "../ui/primary-button";
+import { TrustSignal } from "../ui/trust-signal";
 
 interface CtaSectionProps {
-  onSignup: () => void
+  onSignup: () => void;
 }
 
 export function CtaSection({ onSignup }: CtaSectionProps) {
@@ -61,5 +61,5 @@ export function CtaSection({ onSignup }: CtaSectionProps) {
         <div className="absolute inset-0 bg-gradient-to-b from-transparent via-[#A43F20]/50 via-[#B54526]/30 to-[#1C1917]" />
       </div>
     </section>
-  )
+  );
 }
diff --git a/apps/landing_page/components/landing/sections/faq-section.tsx b/apps/landing_page/components/landing/sections/faq-section.tsx
index 5092eb4..e945433 100644
--- a/apps/landing_page/components/landing/sections/faq-section.tsx
+++ b/apps/landing_page/components/landing/sections/faq-section.tsx
@@ -1,14 +1,14 @@
-"use client"
+"use client";
 
-import { useState, useMemo } from "react"
-import { useLingui, Trans } from "@lingui/react/macro"
-import { ChevronDown } from "lucide-react"
-import { SectionContainer } from "../layout/section-container"
-import { SectionHeader } from "../ui/section-header"
+import { useLingui } from "@lingui/react/macro";
+import { ChevronDown } from "lucide-react";
+import { useMemo, useState } from "react";
+import { SectionContainer } from "../layout/section-container";
+import { SectionHeader } from "../ui/section-header";
 
 export function FaqSection() {
-  const { t } = useLingui()
-  const [openFaq, setOpenFaq] = useState<number | null>(null)
+  const { t } = useLingui();
+  const [openFaq, setOpenFaq] = useState<number | null>(null);
 
   const faqs = useMemo(
     () => [
@@ -34,7 +34,7 @@ export function FaqSection() {
       },
     ],
     [t],
-  )
+  );
 
   return (
     <section id="faq" className="py-20 md:py-28 relative overflow-hidden" aria-labelledby="faq-heading">
@@ -114,5 +114,5 @@ export function FaqSection() {
         <div className="absolute inset-0 bg-gradient-to-b from-transparent via-[#FDFBF8]/50 to-[#FDFBF8]" />
       </div>
     </section>
-  )
+  );
 }
diff --git a/apps/landing_page/components/landing/sections/features-section.tsx b/apps/landing_page/components/landing/sections/features-section.tsx
index a8ab0dc..5a51712 100644
--- a/apps/landing_page/components/landing/sections/features-section.tsx
+++ b/apps/landing_page/components/landing/sections/features-section.tsx
@@ -1,37 +1,37 @@
-"use client"
+"use client";
 
-import { useState, useMemo, useCallback } from "react"
-import Image from "next/image"
-import { useLingui, Trans } from "@lingui/react/macro"
-import { ChefHat, Calendar, ShoppingCart, Search, Play, Pause, Plus, Check } from "lucide-react"
-import { FeatureCard } from "../ui/feature-card"
-import { SectionContainer } from "../layout/section-container"
+import { Trans, useLingui } from "@lingui/react/macro";
+import { Calendar, Check, ChefHat, Pause, Play, Plus, Search, ShoppingCart } from "lucide-react";
+import Image from "next/image";
+import { useCallback, useMemo, useState } from "react";
+import { SectionContainer } from "../layout/section-container";
+import { FeatureCard } from "../ui/feature-card";
 
 interface FeaturesSectionProps {
-  onAuthClick: (tab: "login" | "signup") => void
+  onAuthClick: (tab: "login" | "signup") => void;
 }
 
 export function FeaturesSection({ onAuthClick }: FeaturesSectionProps) {
-  const { t } = useLingui()
-  const [cookStep, setCookStep] = useState(0)
-  const [timerRunning, setTimerRunning] = useState(false)
-  const [timerValue, setTimerValue] = useState(180)
-  const [searchQuery, setSearchQuery] = useState(() => t`quick chicken tonight`)
-  const [searchTags, setSearchTags] = useState<string[]>(() => [t`Quick`, t`Chicken`, t`Dinner`])
+  const { t } = useLingui();
+  const [cookStep, setCookStep] = useState(0);
+  const [timerRunning, setTimerRunning] = useState(false);
+  const [timerValue, _setTimerValue] = useState(180);
+  const [searchQuery, setSearchQuery] = useState(() => t`quick chicken tonight`);
+  const [searchTags, setSearchTags] = useState<string[]>(() => [t`Quick`, t`Chicken`, t`Dinner`]);
   const [shoppingItems, setShoppingItems] = useState(() => [
     { item: t`Cherry tomatoes`, qty: "500g", checked: true },
     { item: t`Fresh spinach`, qty: "200g", checked: true },
     { item: t`Grated Parmesan`, qty: "100g", checked: false },
     { item: t`Crème fraîche`, qty: "25cl", checked: false },
-  ])
+  ]);
   const [planningDays, setPlanningDays] = useState(() => [
     { day: t`Mon`, hasRecipe: true, recipe: "/beef-bourguignon-french-stew-with-vegetables.jpg" },
     { day: t`Tue`, hasRecipe: true, recipe: "/mediterranean-quinoa-bowl-with-feta-and-vegetables.jpg" },
     { day: t`Wed`, hasRecipe: false },
     { day: t`Thu`, hasRecipe: true, recipe: "/honey-glazed-salmon-with-asparagus.jpg" },
     { day: t`Fri`, hasRecipe: true, recipe: "/korean-fried-chicken-with-gochujang-sauce.jpg" },
-  ])
-  const [expandedCollection, setExpandedCollection] = useState<number | null>(null)
+  ]);
+  const [_expandedCollection, setExpandedCollection] = useState<number | null>(null);
 
   const cookSteps = useMemo(
     () => [
@@ -56,7 +56,7 @@ export function FeaturesSection({ onAuthClick }: FeaturesSectionProps) {
       },
     ],
     [t],
-  )
+  );
 
   const tagLabels = useMemo(
     () => ({
@@ -69,35 +69,33 @@ export function FeaturesSection({ onAuthClick }: FeaturesSectionProps) {
       easy: t`Easy`,
     }),
     [t],
-  )
+  );
 
   const handleSearchChange = useCallback(
     (value: string) => {
-      setSearchQuery(value)
+      setSearchQuery(value);
       if (value.length > 3) {
-        const words = value.toLowerCase().split(" ")
-        const extractedTags: string[] = []
-        if (words.some((w) => ["quick", "fast", "rapide", "vite"].includes(w))) extractedTags.push(tagLabels.quick)
-        if (words.some((w) => ["chicken", "poulet"].includes(w))) extractedTags.push(tagLabels.chicken)
-        if (words.some((w) => ["tonight", "dinner", "diner", "soir"].includes(w))) extractedTags.push(tagLabels.dinner)
+        const words = value.toLowerCase().split(" ");
+        const extractedTags: string[] = [];
+        if (words.some((w) => ["quick", "fast", "rapide", "vite"].includes(w))) extractedTags.push(tagLabels.quick);
+        if (words.some((w) => ["chicken", "poulet"].includes(w))) extractedTags.push(tagLabels.chicken);
+        if (words.some((w) => ["tonight", "dinner", "diner", "soir"].includes(w))) extractedTags.push(tagLabels.dinner);
         if (words.some((w) => ["vegetarian", "veggie", "vegetable", "vegetarien"].includes(w)))
-          extractedTags.push(tagLabels.vegetarian)
-        if (words.some((w) => ["dessert", "sweet"].includes(w))) extractedTags.push(tagLabels.dessert)
-        if (words.some((w) => ["italian", "italien"].includes(w))) extractedTags.push(tagLabels.italian)
-        if (words.some((w) => ["easy", "simple", "facile"].includes(w))) extractedTags.push(tagLabels.easy)
-        setSearchTags(extractedTags)
+          extractedTags.push(tagLabels.vegetarian);
+        if (words.some((w) => ["dessert", "sweet"].includes(w))) extractedTags.push(tagLabels.dessert);
+        if (words.some((w) => ["italian", "italien"].includes(w))) extractedTags.push(tagLabels.italian);
+        if (words.some((w) => ["easy", "simple", "facile"].includes(w))) extractedTags.push(tagLabels.easy);
+        setSearchTags(extractedTags);
       } else {
-        setSearchTags([])
+        setSearchTags([]);
       }
     },
     [tagLabels],
-  )
+  );
 
   const toggleShoppingItem = useCallback((index: number) => {
-    setShoppingItems((items) =>
-      items.map((item, i) => (i === index ? { ...item, checked: !item.checked } : item)),
-    )
-  }, [])
+    setShoppingItems((items) => items.map((item, i) => (i === index ? { ...item, checked: !item.checked } : item)));
+  }, []);
 
   const addRecipeToDay = useCallback(
     (dayIndex: number) => {
@@ -108,11 +106,11 @@ export function FeaturesSection({ onAuthClick }: FeaturesSectionProps) {
               ? { ...day, hasRecipe: true, recipe: "/mediterranean-quinoa-bowl-with-feta-and-vegetables.jpg" }
               : day,
           ),
-        )
+        );
       }
     },
     [planningDays],
-  )
+  );
 
   const collections = useMemo(
     () => [
@@ -154,7 +152,7 @@ export function FeaturesSection({ onAuthClick }: FeaturesSectionProps) {
       },
     ],
     [t],
-  )
+  );
 
   return (
     <section id="features" className="py-20 md:py-28 relative overflow-hidden">
@@ -196,59 +194,58 @@ export function FeaturesSection({ onAuthClick }: FeaturesSectionProps) {
             hoverBorder="hover:border-[#C6502B]/20"
             hoverShadow="hover:shadow-[#C6502B]/[0.04]"
           >
-
-              <div className="bg-gradient-to-br from-[#F8F1E9]/80 to-[#F5EDE3]/80 rounded-xl p-4 border border-[#E6D7C7]/30">
-                <div className="flex items-center justify-between mb-3">
-                  <span className="text-xs text-[#6E6258]">
-                    <Trans>
-                      Step {cookStep + 1} of {cookSteps.length}
-                    </Trans>
-                  </span>
-                  {cookSteps[cookStep].timer && (
-                    <button
-                      onClick={() => setTimerRunning(!timerRunning)}
-                      className="flex items-center gap-2 px-3 py-1.5 bg-white rounded-lg shadow-sm hover:shadow-md transition-all duration-200 border border-[#E6D7C7]/50 hover:border-[#C6502B]/30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#C6502B]/40 focus-visible:ring-offset-2 active:scale-95"
-                    >
-                      {timerRunning ? (
-                        <Pause className="w-3 h-3 text-[#C6502B]" />
-                      ) : (
-                        <Play className="w-3 h-3 text-[#C6502B]" />
-                      )}
-                      <span className="text-xs font-mono text-[#221B16]">
-                        {Math.floor(timerValue / 60)}:{(timerValue % 60).toString().padStart(2, "0")}
-                      </span>
-                    </button>
-                  )}
-                </div>
-
-                <div className="h-1.5 bg-[#E6D7C7]/50 rounded-full overflow-hidden mb-4">
-                  <div
-                    className="h-full bg-gradient-to-r from-[#C6502B] to-[#F0B04C] rounded-full transition-all duration-300"
-                    style={{ width: `${((cookStep + 1) / cookSteps.length) * 100}%` }}
-                  />
-                </div>
-
-                <p className="text-sm text-[#221B16] mb-4 leading-relaxed line-clamp-2">
-                  <span className="font-semibold">{cookSteps[cookStep].title}</span> — {cookSteps[cookStep].desc}
-                </p>
-
-                <div className="flex gap-2">
-                  <button
-                    onClick={() => setCookStep(Math.max(0, cookStep - 1))}
-                    disabled={cookStep === 0}
-                    className="flex-1 py-2 text-xs font-medium text-[#6E6258] bg-white rounded-lg border border-[#E6D7C7]/50 disabled:opacity-40 hover:bg-[#FDFBF8] hover:border-[#E6D7C7] hover:shadow-sm transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#C6502B]/40 focus-visible:ring-offset-2 active:scale-95 disabled:active:scale-100"
-                  >
-                    <Trans>Previous</Trans>
-                  </button>
+            <div className="bg-gradient-to-br from-[#F8F1E9]/80 to-[#F5EDE3]/80 rounded-xl p-4 border border-[#E6D7C7]/30">
+              <div className="flex items-center justify-between mb-3">
+                <span className="text-xs text-[#6E6258]">
+                  <Trans>
+                    Step {cookStep + 1} of {cookSteps.length}
+                  </Trans>
+                </span>
+                {cookSteps[cookStep].timer && (
                   <button
-                    onClick={() => setCookStep(Math.min(cookSteps.length - 1, cookStep + 1))}
-                    disabled={cookStep === cookSteps.length - 1}
-                    className="flex-1 py-2 text-xs font-medium text-white bg-gradient-to-b from-[#C6502B] to-[#B54526] rounded-lg disabled:opacity-40 hover:from-[#B54526] hover:to-[#A43F20] hover:shadow-md transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#C6502B]/40 focus-visible:ring-offset-2 active:scale-95 disabled:active:scale-100"
+                    onClick={() => setTimerRunning(!timerRunning)}
+                    className="flex items-center gap-2 px-3 py-1.5 bg-white rounded-lg shadow-sm hover:shadow-md transition-all duration-200 border border-[#E6D7C7]/50 hover:border-[#C6502B]/30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#C6502B]/40 focus-visible:ring-offset-2 active:scale-95"
                   >
-                    <Trans>Next</Trans>
+                    {timerRunning ? (
+                      <Pause className="w-3 h-3 text-[#C6502B]" />
+                    ) : (
+                      <Play className="w-3 h-3 text-[#C6502B]" />
+                    )}
+                    <span className="text-xs font-mono text-[#221B16]">
+                      {Math.floor(timerValue / 60)}:{(timerValue % 60).toString().padStart(2, "0")}
+                    </span>
                   </button>
-                </div>
+                )}
+              </div>
+
+              <div className="h-1.5 bg-[#E6D7C7]/50 rounded-full overflow-hidden mb-4">
+                <div
+                  className="h-full bg-gradient-to-r from-[#C6502B] to-[#F0B04C] rounded-full transition-all duration-300"
+                  style={{ width: `${((cookStep + 1) / cookSteps.length) * 100}%` }}
+                />
               </div>
+
+              <p className="text-sm text-[#221B16] mb-4 leading-relaxed line-clamp-2">
+                <span className="font-semibold">{cookSteps[cookStep].title}</span> — {cookSteps[cookStep].desc}
+              </p>
+
+              <div className="flex gap-2">
+                <button
+                  onClick={() => setCookStep(Math.max(0, cookStep - 1))}
+                  disabled={cookStep === 0}
+                  className="flex-1 py-2 text-xs font-medium text-[#6E6258] bg-white rounded-lg border border-[#E6D7C7]/50 disabled:opacity-40 hover:bg-[#FDFBF8] hover:border-[#E6D7C7] hover:shadow-sm transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#C6502B]/40 focus-visible:ring-offset-2 active:scale-95 disabled:active:scale-100"
+                >
+                  <Trans>Previous</Trans>
+                </button>
+                <button
+                  onClick={() => setCookStep(Math.min(cookSteps.length - 1, cookStep + 1))}
+                  disabled={cookStep === cookSteps.length - 1}
+                  className="flex-1 py-2 text-xs font-medium text-white bg-gradient-to-b from-[#C6502B] to-[#B54526] rounded-lg disabled:opacity-40 hover:from-[#B54526] hover:to-[#A43F20] hover:shadow-md transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#C6502B]/40 focus-visible:ring-offset-2 active:scale-95 disabled:active:scale-100"
+                >
+                  <Trans>Next</Trans>
+                </button>
+              </div>
+            </div>
           </FeatureCard>
 
           <FeatureCard
@@ -260,38 +257,37 @@ export function FeaturesSection({ onAuthClick }: FeaturesSectionProps) {
             hoverBorder="hover:border-[#5F7A57]/20"
             hoverShadow="hover:shadow-[#5F7A57]/[0.04]"
           >
-
-              <div className="bg-gradient-to-br from-[#F8F1E9]/80 to-[#F5EDE3]/80 rounded-xl p-4 border border-[#E6D7C7]/30">
-                <div className="grid grid-cols-5 gap-2">
-                  {planningDays.map((day, i) => (
-                    <div key={day.day} className="text-center">
-                      <span className="text-[10px] text-[#6E6258] block mb-1.5">{day.day}</span>
-                      <button
-                        onClick={() => addRecipeToDay(i)}
-                        className={`w-full aspect-square rounded-lg flex items-center justify-center transition-all ${
-                          day.hasRecipe
-                            ? "bg-white shadow-sm border border-[#E6D7C7]/50 hover:scale-105 hover:shadow-md"
-                            : "bg-[#5F7A57]/10 border-2 border-[#5F7A57] border-dashed hover:bg-[#5F7A57]/20 hover:border-[#5F7A57]"
-                        }`}
-                      >
-                        {day.hasRecipe && day.recipe ? (
-                          <Image
-                            src={day.recipe}
-                            alt={t`Recipe for ${day.day}`}
-                            width={80}
-                            height={80}
-                            className="w-full h-full rounded object-cover"
-                            loading="lazy"
-                            priority={false}
-                          />
-                        ) : (
-                          <Plus className="w-3 h-3 text-[#5F7A57]" />
-                        )}
-                      </button>
-                    </div>
-                  ))}
-                </div>
+            <div className="bg-gradient-to-br from-[#F8F1E9]/80 to-[#F5EDE3]/80 rounded-xl p-4 border border-[#E6D7C7]/30">
+              <div className="grid grid-cols-5 gap-2">
+                {planningDays.map((day, i) => (
+                  <div key={day.day} className="text-center">
+                    <span className="text-[10px] text-[#6E6258] block mb-1.5">{day.day}</span>
+                    <button
+                      onClick={() => addRecipeToDay(i)}
+                      className={`w-full aspect-square rounded-lg flex items-center justify-center transition-all ${
+                        day.hasRecipe
+                          ? "bg-white shadow-sm border border-[#E6D7C7]/50 hover:scale-105 hover:shadow-md"
+                          : "bg-[#5F7A57]/10 border-2 border-[#5F7A57] border-dashed hover:bg-[#5F7A57]/20 hover:border-[#5F7A57]"
+                      }`}
+                    >
+                      {day.hasRecipe && day.recipe ? (
+                        <Image
+                          src={day.recipe}
+                          alt={t`Recipe for ${day.day}`}
+                          width={80}
+                          height={80}
+                          className="w-full h-full rounded object-cover"
+                          loading="lazy"
+                          priority={false}
+                        />
+                      ) : (
+                        <Plus className="w-3 h-3 text-[#5F7A57]" />
+                      )}
+                    </button>
+                  </div>
+                ))}
               </div>
+            </div>
           </FeatureCard>
 
           <FeatureCard
@@ -303,34 +299,33 @@ export function FeaturesSection({ onAuthClick }: FeaturesSectionProps) {
             hoverBorder="hover:border-[#F0B04C]/20"
             hoverShadow="hover:shadow-[#F0B04C]/[0.04]"
           >
-
-              <div className="bg-gradient-to-br from-[#F8F1E9]/80 to-[#F5EDE3]/80 rounded-xl p-4 border border-[#E6D7C7]/30 space-y-2">
-                {shoppingItems.map((item, i) => (
-                  <button
-                    key={i}
-                    onClick={() => toggleShoppingItem(i)}
-                    className="w-full flex items-center gap-3 hover:bg-white/30 rounded-lg p-1.5 transition-all group/item"
+            <div className="bg-gradient-to-br from-[#F8F1E9]/80 to-[#F5EDE3]/80 rounded-xl p-4 border border-[#E6D7C7]/30 space-y-2">
+              {shoppingItems.map((item, i) => (
+                <button
+                  key={i}
+                  onClick={() => toggleShoppingItem(i)}
+                  className="w-full flex items-center gap-3 hover:bg-white/30 rounded-lg p-1.5 transition-all group/item"
+                >
+                  <div
+                    className={`w-4 h-4 rounded-full border-2 flex items-center justify-center transition-all ${
+                      item.checked
+                        ? "bg-[#5F7A57] border-[#5F7A57] scale-110"
+                        : "border-[#E6D7C7] bg-white group-hover/item:border-[#5F7A57]/50"
+                    }`}
                   >
-                    <div
-                      className={`w-4 h-4 rounded-full border-2 flex items-center justify-center transition-all ${
-                        item.checked
-                          ? "bg-[#5F7A57] border-[#5F7A57] scale-110"
-                          : "border-[#E6D7C7] bg-white group-hover/item:border-[#5F7A57]/50"
-                      }`}
-                    >
-                      {item.checked && <Check className="w-2.5 h-2.5 text-white animate-in fade-in duration-200" />}
-                    </div>
-                    <span
-                      className={`flex-1 text-sm text-left transition-all ${
-                        item.checked ? "text-[#6E6258] line-through" : "text-[#221B16]"
-                      }`}
-                    >
-                      {item.item}
-                    </span>
-                    <span className="text-xs text-[#6E6258]">{item.qty}</span>
-                  </button>
-                ))}
-              </div>
+                    {item.checked && <Check className="w-2.5 h-2.5 text-white animate-in fade-in duration-200" />}
+                  </div>
+                  <span
+                    className={`flex-1 text-sm text-left transition-all ${
+                      item.checked ? "text-[#6E6258] line-through" : "text-[#221B16]"
+                    }`}
+                  >
+                    {item.item}
+                  </span>
+                  <span className="text-xs text-[#6E6258]">{item.qty}</span>
+                </button>
+              ))}
+            </div>
           </FeatureCard>
 
           <FeatureCard
@@ -342,36 +337,35 @@ export function FeaturesSection({ onAuthClick }: FeaturesSectionProps) {
             hoverBorder="hover:border-[#C6502B]/20"
             hoverShadow="hover:shadow-[#C6502B]/[0.04]"
           >
-
-              <div className="bg-gradient-to-br from-[#F8F1E9]/80 to-[#F5EDE3]/80 rounded-xl p-4 border border-[#E6D7C7]/30">
-                <div className="flex items-center gap-3 px-3 py-2.5 bg-white rounded-lg mb-3 shadow-sm border border-[#E6D7C7]/50">
-                  <Search className="w-4 h-4 text-[#6E6258]/50" />
-                  <input
-                    type="text"
-                    value={searchQuery}
-                    onChange={(e) => handleSearchChange(e.target.value)}
-                    placeholder={t`Type your search...`}
-                    className="flex-1 text-sm text-[#221B16] bg-transparent border-none outline-none placeholder:text-[#6E6258]/50"
-                  />
-                </div>
-                {searchTags.length > 0 && (
-                  <div className="flex flex-wrap gap-2 animate-in fade-in slide-in-from-top-2 duration-300">
-                    {searchTags.map((tag) => (
-                      <span
-                        key={tag}
-                        className="px-2.5 py-1 bg-[#C6502B]/10 text-[#C6502B] rounded-full text-xs font-medium animate-in fade-in zoom-in duration-200"
-                      >
-                        {tag}
-                      </span>
-                    ))}
-                  </div>
-                )}
-                {!searchQuery && (
-                  <p className="text-xs text-[#6E6258]/60 text-center mt-2">
-                    <Trans>Examples: "quick chicken", "vegetarian", "easy dessert"</Trans>
-                  </p>
-                )}
+            <div className="bg-gradient-to-br from-[#F8F1E9]/80 to-[#F5EDE3]/80 rounded-xl p-4 border border-[#E6D7C7]/30">
+              <div className="flex items-center gap-3 px-3 py-2.5 bg-white rounded-lg mb-3 shadow-sm border border-[#E6D7C7]/50">
+                <Search className="w-4 h-4 text-[#6E6258]/50" />
+                <input
+                  type="text"
+                  value={searchQuery}
+                  onChange={(e) => handleSearchChange(e.target.value)}
+                  placeholder={t`Type your search...`}
+                  className="flex-1 text-sm text-[#221B16] bg-transparent border-none outline-none placeholder:text-[#6E6258]/50"
+                />
               </div>
+              {searchTags.length > 0 && (
+                <div className="flex flex-wrap gap-2 animate-in fade-in slide-in-from-top-2 duration-300">
+                  {searchTags.map((tag) => (
+                    <span
+                      key={tag}
+                      className="px-2.5 py-1 bg-[#C6502B]/10 text-[#C6502B] rounded-full text-xs font-medium animate-in fade-in zoom-in duration-200"
+                    >
+                      {tag}
+                    </span>
+                  ))}
+                </div>
+              )}
+              {!searchQuery && (
+                <p className="text-xs text-[#6E6258]/60 text-center mt-2">
+                  <Trans>Examples: "quick chicken", "vegetarian", "easy dessert"</Trans>
+                </p>
+              )}
+            </div>
           </FeatureCard>
 
           <div className="md:col-span-2 group">
@@ -386,8 +380,8 @@ export function FeaturesSection({ onAuthClick }: FeaturesSectionProps) {
                   </h3>
                   <p className="text-[#6E6258] text-sm leading-relaxed">
                     <Trans>
-                      Create your collections like on Spotify. "Quick", "Batch cooking", "Cravings"... Organize the
-                      way you think.
+                      Create your collections like on Spotify. "Quick", "Batch cooking", "Cravings"... Organize the way
+                      you think.
                     </Trans>
                   </p>
                 </div>
@@ -415,7 +409,9 @@ export function FeaturesSection({ onAuthClick }: FeaturesSectionProps) {
                                 loading="lazy"
                                 priority={false}
                               />
-                              <div className={`absolute inset-0 bg-gradient-to-br ${collection.gradient} opacity-[0.12] mix-blend-overlay`} />
+                              <div
+                                className={`absolute inset-0 bg-gradient-to-br ${collection.gradient} opacity-[0.12] mix-blend-overlay`}
+                              />
                             </div>
                           ))}
 
@@ -438,5 +434,5 @@ export function FeaturesSection({ onAuthClick }: FeaturesSectionProps) {
         </div>
       </SectionContainer>
     </section>
-  )
+  );
 }
diff --git a/apps/landing_page/components/landing/sections/hero-section.tsx b/apps/landing_page/components/landing/sections/hero-section.tsx
index 3a94808..e6f35d9 100644
--- a/apps/landing_page/components/landing/sections/hero-section.tsx
+++ b/apps/landing_page/components/landing/sections/hero-section.tsx
@@ -1,14 +1,14 @@
-"use client"
+"use client";
 
-import { ArrowRight, ChevronDown, Users, Sparkles, CheckCircle2 } from "lucide-react"
-import { Trans } from "@lingui/react/macro"
-import { SectionContainer } from "../layout/section-container"
-import { PrimaryButton } from "../ui/primary-button"
-import { TrustSignal } from "../ui/trust-signal"
+import { Trans } from "@lingui/react/macro";
+import { ArrowRight, CheckCircle2, ChevronDown, Sparkles, Users } from "lucide-react";
+import { SectionContainer } from "../layout/section-container";
+import { PrimaryButton } from "../ui/primary-button";
+import { TrustSignal } from "../ui/trust-signal";
 
 interface HeroSectionProps {
-  onSignup: () => void
-  onScrollToImport: () => void
+  onSignup: () => void;
+  onScrollToImport: () => void;
 }
 
 export function HeroSection({ onSignup, onScrollToImport }: HeroSectionProps) {
@@ -54,17 +54,25 @@ export function HeroSection({ onSignup, onScrollToImport }: HeroSectionProps) {
         </div>
 
         <div className="flex flex-wrap items-center justify-center gap-6 text-xs text-[#6E6258]/70">
-          <TrustSignal icon={CheckCircle2} iconColor="#5F7A57" className="transition-opacity duration-300 hover:opacity-100">
+          <TrustSignal
+            icon={CheckCircle2}
+            iconColor="#5F7A57"
+            className="transition-opacity duration-300 hover:opacity-100"
+          >
             Free up to 15 recipes
           </TrustSignal>
           <TrustSignal icon={Users} iconColor="#5F7A57" className="transition-opacity duration-300 hover:opacity-100">
             1,247 users
           </TrustSignal>
-          <TrustSignal icon={Sparkles} iconColor="#F0B04C" className="transition-opacity duration-300 hover:opacity-100">
+          <TrustSignal
+            icon={Sparkles}
+            iconColor="#F0B04C"
+            className="transition-opacity duration-300 hover:opacity-100"
+          >
             Rated 4.8/5
           </TrustSignal>
         </div>
       </SectionContainer>
     </section>
-  )
+  );
 }
diff --git a/apps/landing_page/components/landing/sections/import-section.tsx b/apps/landing_page/components/landing/sections/import-section.tsx
index ead5802..cc2588f 100644
--- a/apps/landing_page/components/landing/sections/import-section.tsx
+++ b/apps/landing_page/components/landing/sections/import-section.tsx
@@ -1,19 +1,19 @@
-"use client"
+"use client";
 
-import { useLingui } from "@lingui/react/macro"
-import { Instagram, Video, Link2, Camera, FileText } from "lucide-react"
-import { SectionContainer } from "../layout/section-container"
-import { SectionHeader } from "../ui/section-header"
-import { ImportDemo } from "../import/import-demo"
+import { useLingui } from "@lingui/react/macro";
+import { Camera, FileText, Instagram, Link2, Video } from "lucide-react";
+import { ImportDemo } from "../import/import-demo";
+import { SectionContainer } from "../layout/section-container";
+import { SectionHeader } from "../ui/section-header";
 
 interface ImportSectionProps {
-  urlInput: string
-  setUrlInput: (value: string) => void
-  isProcessing: boolean
-  recipeImported: boolean
-  onImport: () => void
-  onReset: () => void
-  onSignup: () => void
+  urlInput: string;
+  setUrlInput: (value: string) => void;
+  isProcessing: boolean;
+  recipeImported: boolean;
+  onImport: () => void;
+  onReset: () => void;
+  onSignup: () => void;
 }
 
 export function ImportSection({
@@ -25,7 +25,7 @@ export function ImportSection({
   onReset,
   onSignup,
 }: ImportSectionProps) {
-  const { t } = useLingui()
+  const { t } = useLingui();
 
   return (
     <section id="import-section" className="py-16 md:py-24 relative overflow-hidden">
@@ -89,5 +89,5 @@ export function ImportSection({
         />
       </SectionContainer>
     </section>
-  )
+  );
 }
diff --git a/apps/landing_page/components/landing/sections/pricing-section.tsx b/apps/landing_page/components/landing/sections/pricing-section.tsx
index 382cb7e..7f9819e 100644
--- a/apps/landing_page/components/landing/sections/pricing-section.tsx
+++ b/apps/landing_page/components/landing/sections/pricing-section.tsx
@@ -1,17 +1,17 @@
-"use client"
+"use client";
 
-import { useLingui, Trans } from "@lingui/react/macro"
-import { SectionContainer } from "../layout/section-container"
-import { SectionHeader } from "../ui/section-header"
-import { PrimaryButton } from "../ui/primary-button"
-import { FeatureItem } from "../ui/feature-item"
+import { Trans, useLingui } from "@lingui/react/macro";
+import { SectionContainer } from "../layout/section-container";
+import { FeatureItem } from "../ui/feature-item";
+import { PrimaryButton } from "../ui/primary-button";
+import { SectionHeader } from "../ui/section-header";
 
 interface PricingSectionProps {
-  onSignup: () => void
+  onSignup: () => void;
 }
 
 export function PricingSection({ onSignup }: PricingSectionProps) {
-  const { t } = useLingui()
+  const { t } = useLingui();
 
   return (
     <section id="pricing" className="py-20 md:py-28 relative overflow-hidden">
@@ -119,5 +119,5 @@ export function PricingSection({ onSignup }: PricingSectionProps) {
         <div className="absolute inset-0 bg-gradient-to-b from-[#F8F1E9]/0 via-[#F8F1E9]/10 via-[#F8F1E9]/20 to-[#F8F1E9]/30" />
       </div>
     </section>
-  )
+  );
 }
diff --git a/apps/landing_page/components/landing/ui/feature-card.tsx b/apps/landing_page/components/landing/ui/feature-card.tsx
index 77da4c9..0cf7eee 100644
--- a/apps/landing_page/components/landing/ui/feature-card.tsx
+++ b/apps/landing_page/components/landing/ui/feature-card.tsx
@@ -1,8 +1,8 @@
 "use client";
 
-import { type LucideIcon } from "lucide-react";
-import { type ReactNode } from "react";
 import { Trans } from "@lingui/react/macro";
+import type { LucideIcon } from "lucide-react";
+import type { ReactNode } from "react";
 import { cn } from "@/lib/utils";
 
 interface FeatureCardProps {
@@ -35,11 +35,18 @@ export function FeatureCard({
           "hover:shadow-[0_4px_12px_-8px_rgba(0,0,0,0.22)]",
           "focus-within:ring-2 focus-within:ring-accent/40 focus-within:ring-offset-2 focus-within:ring-offset-background",
           hoverBorder,
-          hoverShadow
+          hoverShadow,
         )}
       >
         <div className="flex items-start gap-4 mb-5">
-          <div className={cn("w-12 h-12 rounded-2xl bg-gradient-to-br", iconGradient, "flex items-center justify-center flex-shrink-0 shadow-lg", iconShadow)}>
+          <div
+            className={cn(
+              "w-12 h-12 rounded-2xl bg-gradient-to-br",
+              iconGradient,
+              "flex items-center justify-center flex-shrink-0 shadow-lg",
+              iconShadow,
+            )}
+          >
             <Icon className="w-6 h-6 text-white" />
           </div>
           <div>
diff --git a/apps/landing_page/components/landing/ui/feature-item.tsx b/apps/landing_page/components/landing/ui/feature-item.tsx
index 62df1d8..c4447b0 100644
--- a/apps/landing_page/components/landing/ui/feature-item.tsx
+++ b/apps/landing_page/components/landing/ui/feature-item.tsx
@@ -1,7 +1,7 @@
 "use client";
 
-import { Check } from "lucide-react";
 import { Trans } from "@lingui/react/macro";
+import { Check } from "lucide-react";
 
 interface FeatureItemProps {
   children: string;
diff --git a/apps/landing_page/components/landing/ui/nav-button.tsx b/apps/landing_page/components/landing/ui/nav-button.tsx
index 48a0c38..4239a67 100644
--- a/apps/landing_page/components/landing/ui/nav-button.tsx
+++ b/apps/landing_page/components/landing/ui/nav-button.tsx
@@ -1,8 +1,8 @@
 "use client";
 
+import type { ReactNode } from "react";
 import { Button } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
-import { type ReactNode } from "react";
 
 interface NavButtonProps {
   href: string;
@@ -22,7 +22,7 @@ export function NavButton({ href, active, children }: NavButtonProps) {
         "focus-visible:ring-offset-2 focus-visible:ring-offset-background",
         active
           ? "bg-accent text-accent-foreground shadow-sm"
-          : "text-muted-foreground hover:bg-accent/20 hover:text-foreground"
+          : "text-muted-foreground hover:bg-accent/20 hover:text-foreground",
       )}
     >
       <a href={href}>{children}</a>
diff --git a/apps/landing_page/components/landing/ui/primary-button.tsx b/apps/landing_page/components/landing/ui/primary-button.tsx
index 6b8bb15..89581e2 100644
--- a/apps/landing_page/components/landing/ui/primary-button.tsx
+++ b/apps/landing_page/components/landing/ui/primary-button.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { type ReactNode } from "react";
+import type { ReactNode } from "react";
 import { cn } from "@/lib/utils";
 
 interface PrimaryButtonProps {
@@ -14,7 +14,8 @@ interface PrimaryButtonProps {
 }
 
 const variants = {
-  primary: "bg-gradient-to-b from-[#C6502B] to-[#B54526] text-white hover:from-[#B54526] hover:to-[#A43F20] shadow-[0_1px_2px_rgba(0,0,0,0.05)]",
+  primary:
+    "bg-gradient-to-b from-[#C6502B] to-[#B54526] text-white hover:from-[#B54526] hover:to-[#A43F20] shadow-[0_1px_2px_rgba(0,0,0,0.05)]",
   dark: "bg-[#221B16] text-white hover:bg-[#2D2520] shadow-lg hover:shadow-xl",
   outline: "border-2 border-[#221B16] text-[#221B16] hover:bg-[#221B16] hover:text-white hover:shadow-md",
   white: "bg-white text-[#C6502B] hover:bg-[#F8F1E9] shadow-xl hover:shadow-2xl",
@@ -42,7 +43,7 @@ export function PrimaryButton({
     variants[variant],
     sizes[size],
     disabled && "opacity-70 cursor-not-allowed",
-    className
+    className,
   );
 
   if (asChild) {
diff --git a/apps/landing_page/components/landing/ui/recipe-meta.tsx b/apps/landing_page/components/landing/ui/recipe-meta.tsx
index 4ca6fb1..cb7779b 100644
--- a/apps/landing_page/components/landing/ui/recipe-meta.tsx
+++ b/apps/landing_page/components/landing/ui/recipe-meta.tsx
@@ -1,7 +1,7 @@
 "use client";
 
-import { type LucideIcon } from "lucide-react";
 import { Trans } from "@lingui/react/macro";
+import type { LucideIcon } from "lucide-react";
 
 interface RecipeMetaProps {
   icon: LucideIcon;
diff --git a/apps/landing_page/components/landing/ui/section-header.tsx b/apps/landing_page/components/landing/ui/section-header.tsx
index 239e253..e617ed4 100644
--- a/apps/landing_page/components/landing/ui/section-header.tsx
+++ b/apps/landing_page/components/landing/ui/section-header.tsx
@@ -15,7 +15,10 @@ export function SectionHeader({ label, title, description, id }: SectionHeaderPr
       <p className="text-sm font-medium text-[#C6502B] mb-3 tracking-wide uppercase animate-in fade-in slide-in-from-top-2 duration-500">
         <Trans>{label}</Trans>
       </p>
-      <h2 id={id} className="font-display text-3xl md:text-4xl lg:text-5xl text-[#221B16] mb-4 tracking-tight leading-tight">
+      <h2
+        id={id}
+        className="font-display text-3xl md:text-4xl lg:text-5xl text-[#221B16] mb-4 tracking-tight leading-tight"
+      >
         <Trans>{title}</Trans>
       </h2>
       {description && (
diff --git a/apps/landing_page/components/landing/ui/trust-signal.tsx b/apps/landing_page/components/landing/ui/trust-signal.tsx
index d52596a..27895a9 100644
--- a/apps/landing_page/components/landing/ui/trust-signal.tsx
+++ b/apps/landing_page/components/landing/ui/trust-signal.tsx
@@ -1,7 +1,7 @@
 "use client";
 
-import { type LucideIcon } from "lucide-react";
 import { Trans } from "@lingui/react/macro";
+import type { LucideIcon } from "lucide-react";
 
 interface TrustSignalProps {
   icon: LucideIcon;
diff --git a/apps/landing_page/components/ui/button.tsx b/apps/landing_page/components/ui/button.tsx
index 37a7d4b..12ed839 100644
--- a/apps/landing_page/components/ui/button.tsx
+++ b/apps/landing_page/components/ui/button.tsx
@@ -1,8 +1,8 @@
-import * as React from "react"
-import { Slot } from "@radix-ui/react-slot"
-import { cva, type VariantProps } from "class-variance-authority"
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+import type * as React from "react";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 const buttonVariants = cva(
   "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
@@ -14,10 +14,8 @@ const buttonVariants = cva(
           "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
         outline:
           "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
-        secondary:
-          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        ghost:
-          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
         link: "text-primary underline-offset-4 hover:underline",
       },
       size: {
@@ -33,8 +31,8 @@ const buttonVariants = cva(
       variant: "default",
       size: "default",
     },
-  }
-)
+  },
+);
 
 function Button({
   className,
@@ -44,9 +42,9 @@ function Button({
   ...props
 }: React.ComponentProps<"button"> &
   VariantProps<typeof buttonVariants> & {
-    asChild?: boolean
+    asChild?: boolean;
   }) {
-  const Comp = asChild ? Slot : "button"
+  const Comp = asChild ? Slot : "button";
 
   return (
     <Comp
@@ -56,7 +54,7 @@ function Button({
       className={cn(buttonVariants({ variant, size, className }))}
       {...props}
     />
-  )
+  );
 }
 
-export { Button, buttonVariants }
+export { Button, buttonVariants };
diff --git a/apps/landing_page/components/ui/dropdown-menu.tsx b/apps/landing_page/components/ui/dropdown-menu.tsx
index bbe6fb0..5960c54 100644
--- a/apps/landing_page/components/ui/dropdown-menu.tsx
+++ b/apps/landing_page/components/ui/dropdown-menu.tsx
@@ -1,34 +1,21 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
-import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react";
+import type * as React from "react";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
-function DropdownMenu({
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
-  return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />
+function DropdownMenu({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
+  return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />;
 }
 
-function DropdownMenuPortal({
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
-  return (
-    <DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
-  )
+function DropdownMenuPortal({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
+  return <DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />;
 }
 
-function DropdownMenuTrigger({
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
-  return (
-    <DropdownMenuPrimitive.Trigger
-      data-slot="dropdown-menu-trigger"
-      {...props}
-    />
-  )
+function DropdownMenuTrigger({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
+  return <DropdownMenuPrimitive.Trigger data-slot="dropdown-menu-trigger" {...props} />;
 }
 
 function DropdownMenuContent({
@@ -43,20 +30,16 @@ function DropdownMenuContent({
         sideOffset={sideOffset}
         className={cn(
           "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
-          className
+          className,
         )}
         {...props}
       />
     </DropdownMenuPrimitive.Portal>
-  )
+  );
 }
 
-function DropdownMenuGroup({
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
-  return (
-    <DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
-  )
+function DropdownMenuGroup({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
+  return <DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />;
 }
 
 function DropdownMenuItem({
@@ -65,8 +48,8 @@ function DropdownMenuItem({
   variant = "default",
   ...props
 }: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
-  inset?: boolean
-  variant?: "default" | "destructive"
+  inset?: boolean;
+  variant?: "default" | "destructive";
 }) {
   return (
     <DropdownMenuPrimitive.Item
@@ -75,11 +58,11 @@ function DropdownMenuItem({
       data-variant={variant}
       className={cn(
         "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function DropdownMenuCheckboxItem({
@@ -93,7 +76,7 @@ function DropdownMenuCheckboxItem({
       data-slot="dropdown-menu-checkbox-item"
       className={cn(
         "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className
+        className,
       )}
       checked={checked}
       {...props}
@@ -105,18 +88,11 @@ function DropdownMenuCheckboxItem({
       </span>
       {children}
     </DropdownMenuPrimitive.CheckboxItem>
-  )
+  );
 }
 
-function DropdownMenuRadioGroup({
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
-  return (
-    <DropdownMenuPrimitive.RadioGroup
-      data-slot="dropdown-menu-radio-group"
-      {...props}
-    />
-  )
+function DropdownMenuRadioGroup({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
+  return <DropdownMenuPrimitive.RadioGroup data-slot="dropdown-menu-radio-group" {...props} />;
 }
 
 function DropdownMenuRadioItem({
@@ -129,7 +105,7 @@ function DropdownMenuRadioItem({
       data-slot="dropdown-menu-radio-item"
       className={cn(
         "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className
+        className,
       )}
       {...props}
     >
@@ -140,7 +116,7 @@ function DropdownMenuRadioItem({
       </span>
       {children}
     </DropdownMenuPrimitive.RadioItem>
-  )
+  );
 }
 
 function DropdownMenuLabel({
@@ -148,54 +124,40 @@ function DropdownMenuLabel({
   inset,
   ...props
 }: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
-  inset?: boolean
+  inset?: boolean;
 }) {
   return (
     <DropdownMenuPrimitive.Label
       data-slot="dropdown-menu-label"
       data-inset={inset}
-      className={cn(
-        "px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
-        className
-      )}
+      className={cn("px-2 py-1.5 text-sm font-medium data-[inset]:pl-8", className)}
       {...props}
     />
-  )
+  );
 }
 
-function DropdownMenuSeparator({
-  className,
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
+function DropdownMenuSeparator({ className, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
   return (
     <DropdownMenuPrimitive.Separator
       data-slot="dropdown-menu-separator"
       className={cn("bg-border -mx-1 my-1 h-px", className)}
       {...props}
     />
-  )
+  );
 }
 
-function DropdownMenuShortcut({
-  className,
-  ...props
-}: React.ComponentProps<"span">) {
+function DropdownMenuShortcut({ className, ...props }: React.ComponentProps<"span">) {
   return (
     <span
       data-slot="dropdown-menu-shortcut"
-      className={cn(
-        "text-muted-foreground ml-auto text-xs tracking-widest",
-        className
-      )}
+      className={cn("text-muted-foreground ml-auto text-xs tracking-widest", className)}
       {...props}
     />
-  )
+  );
 }
 
-function DropdownMenuSub({
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
-  return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />
+function DropdownMenuSub({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
+  return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />;
 }
 
 function DropdownMenuSubTrigger({
@@ -204,7 +166,7 @@ function DropdownMenuSubTrigger({
   children,
   ...props
 }: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
-  inset?: boolean
+  inset?: boolean;
 }) {
   return (
     <DropdownMenuPrimitive.SubTrigger
@@ -212,14 +174,14 @@ function DropdownMenuSubTrigger({
       data-inset={inset}
       className={cn(
         "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className
+        className,
       )}
       {...props}
     >
       {children}
       <ChevronRightIcon className="ml-auto size-4" />
     </DropdownMenuPrimitive.SubTrigger>
-  )
+  );
 }
 
 function DropdownMenuSubContent({
@@ -231,11 +193,11 @@ function DropdownMenuSubContent({
       data-slot="dropdown-menu-sub-content"
       className={cn(
         "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
-        className
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 export {
@@ -254,4 +216,4 @@ export {
   DropdownMenuSub,
   DropdownMenuSubTrigger,
   DropdownMenuSubContent,
-}
+};
diff --git a/apps/landing_page/lib/auth-context.tsx b/apps/landing_page/lib/auth-context.tsx
index 1a52345..14fb963 100644
--- a/apps/landing_page/lib/auth-context.tsx
+++ b/apps/landing_page/lib/auth-context.tsx
@@ -1,68 +1,68 @@
-"use client"
+"use client";
 
-import { createContext, useContext, useState, useEffect, type ReactNode } from "react"
+import { createContext, type ReactNode, useContext, useEffect, useState } from "react";
 
 export interface User {
-  id: string
-  email: string
-  name: string
-  avatar?: string
-  createdAt: Date
+  id: string;
+  email: string;
+  name: string;
+  avatar?: string;
+  createdAt: Date;
 }
 
 interface AuthContextType {
-  user: User | null
-  isLoading: boolean
-  isAuthenticated: boolean
-  login: (email: string, password: string) => Promise<void>
-  signup: (email: string, password: string, name: string) => Promise<void>
-  logout: () => void
+  user: User | null;
+  isLoading: boolean;
+  isAuthenticated: boolean;
+  login: (email: string, password: string) => Promise<void>;
+  signup: (email: string, password: string, name: string) => Promise<void>;
+  logout: () => void;
 }
 
-const AuthContext = createContext<AuthContextType | undefined>(undefined)
+const AuthContext = createContext<AuthContextType | undefined>(undefined);
 
 export function AuthProvider({ children }: { children: ReactNode }) {
-  const [user, setUser] = useState<User | null>(null)
-  const [isLoading, setIsLoading] = useState(true)
+  const [user, setUser] = useState<User | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
 
   useEffect(() => {
-    const storedUser = localStorage.getItem("cookmate_user")
+    const storedUser = localStorage.getItem("cookmate_user");
     if (storedUser) {
-      setUser(JSON.parse(storedUser))
+      setUser(JSON.parse(storedUser));
     }
-    setIsLoading(false)
-  }, [])
+    setIsLoading(false);
+  }, []);
 
-  const login = async (email: string, password: string) => {
-    await new Promise((resolve) => setTimeout(resolve, 1000))
+  const login = async (email: string, _password: string) => {
+    await new Promise((resolve) => setTimeout(resolve, 1000));
 
     const newUser: User = {
       id: "1",
       email,
       name: email.split("@")[0],
       createdAt: new Date(),
-    }
-    setUser(newUser)
-    localStorage.setItem("cookmate_user", JSON.stringify(newUser))
-  }
+    };
+    setUser(newUser);
+    localStorage.setItem("cookmate_user", JSON.stringify(newUser));
+  };
 
-  const signup = async (email: string, password: string, name: string) => {
-    await new Promise((resolve) => setTimeout(resolve, 1000))
+  const signup = async (email: string, _password: string, name: string) => {
+    await new Promise((resolve) => setTimeout(resolve, 1000));
 
     const newUser: User = {
       id: "1",
       email,
       name,
       createdAt: new Date(),
-    }
-    setUser(newUser)
-    localStorage.setItem("cookmate_user", JSON.stringify(newUser))
-  }
+    };
+    setUser(newUser);
+    localStorage.setItem("cookmate_user", JSON.stringify(newUser));
+  };
 
   const logout = () => {
-    setUser(null)
-    localStorage.removeItem("cookmate_user")
-  }
+    setUser(null);
+    localStorage.removeItem("cookmate_user");
+  };
 
   return (
     <AuthContext.Provider
@@ -77,13 +77,13 @@ export function AuthProvider({ children }: { children: ReactNode }) {
     >
       {children}
     </AuthContext.Provider>
-  )
+  );
 }
 
 export function useAuth() {
-  const context = useContext(AuthContext)
+  const context = useContext(AuthContext);
   if (context === undefined) {
-    throw new Error("useAuth must be used within an AuthProvider")
+    throw new Error("useAuth must be used within an AuthProvider");
   }
-  return context
+  return context;
 }
diff --git a/apps/landing_page/lib/utils.ts b/apps/landing_page/lib/utils.ts
index a5ef193..365058c 100644
--- a/apps/landing_page/lib/utils.ts
+++ b/apps/landing_page/lib/utils.ts
@@ -1,4 +1,4 @@
-import { clsx, type ClassValue } from "clsx";
+import { type ClassValue, clsx } from "clsx";
 import { twMerge } from "tailwind-merge";
 
 export function cn(...inputs: ClassValue[]) {
diff --git a/apps/landing_page/middleware.ts b/apps/landing_page/middleware.ts
index b66c771..637ce1b 100644
--- a/apps/landing_page/middleware.ts
+++ b/apps/landing_page/middleware.ts
@@ -1,6 +1,6 @@
-import { NextResponse } from "next/server";
+import { defaultLocale, isValidLocale, locales } from "@cookmate/i18n";
 import type { NextRequest } from "next/server";
-import { locales, defaultLocale, isValidLocale } from "@cookmate/i18n";
+import { NextResponse } from "next/server";
 
 function getLocaleFromRequest(request: NextRequest): string {
   // 1. Check if locale is already in the path
@@ -13,9 +13,7 @@ function getLocaleFromRequest(request: NextRequest): string {
   // 2. Check Accept-Language header
   const acceptLanguage = request.headers.get("accept-language");
   if (acceptLanguage) {
-    const languages = acceptLanguage
-      .split(",")
-      .map((lang) => lang.split(";")[0].trim().split("-")[0].toLowerCase());
+    const languages = acceptLanguage.split(",").map((lang) => lang.split(";")[0].trim().split("-")[0].toLowerCase());
 
     for (const lang of languages) {
       if (isValidLocale(lang)) {
@@ -44,9 +42,7 @@ export function middleware(request: NextRequest) {
   }
 
   // Check if pathname already has a locale
-  const pathnameHasLocale = locales.some(
-    (locale) => pathname.startsWith(`/${locale}/`) || pathname === `/${locale}`
-  );
+  const pathnameHasLocale = locales.some((locale) => pathname.startsWith(`/${locale}/`) || pathname === `/${locale}`);
 
   if (pathnameHasLocale) {
     return NextResponse.next();
diff --git a/apps/landing_page/next.config.mjs b/apps/landing_page/next.config.mjs
index b0c2500..27a66e2 100644
--- a/apps/landing_page/next.config.mjs
+++ b/apps/landing_page/next.config.mjs
@@ -1,8 +1,8 @@
-import bundleAnalyzer from "@next/bundle-analyzer"
+import bundleAnalyzer from "@next/bundle-analyzer";
 
 const withBundleAnalyzer = bundleAnalyzer({
   enabled: process.env.ANALYZE === "true",
-})
+});
 
 /** @type {import('next').NextConfig} */
 const nextConfig = {
@@ -32,7 +32,6 @@ const nextConfig = {
     swcPlugins: [["@lingui/swc-plugin", {}]],
   },
 
-
   async headers() {
     return [
       {
@@ -74,8 +73,8 @@ const nextConfig = {
           },
         ],
       },
-    ]
+    ];
   },
-}
+};
 
-export default withBundleAnalyzer(nextConfig)
+export default withBundleAnalyzer(nextConfig);
diff --git a/apps/landing_page/postcss.config.mjs b/apps/landing_page/postcss.config.mjs
index a869506..79bcf13 100644
--- a/apps/landing_page/postcss.config.mjs
+++ b/apps/landing_page/postcss.config.mjs
@@ -1,8 +1,8 @@
 /** @type {import('postcss-load-config').Config} */
 const config = {
   plugins: {
-    '@tailwindcss/postcss': {},
+    "@tailwindcss/postcss": {},
   },
-}
+};
 
-export default config
+export default config;

From 9e8a0b8dd5311a8b80306296e7bda89c043124a1 Mon Sep 17 00:00:00 2001
From: RedBoardDev <thomas.ott@epitech.eu>
Date: Wed, 11 Feb 2026 23:32:55 +0200
Subject: [PATCH 2/2] refactor(landing-page): enhance layout and footer
 components with improved message loading and UI adjustments

---
 apps/landing_page/app/[locale]/layout.tsx     | 12 +---
 .../components/landing/layout/footer.tsx      |  8 ++-
 .../landing/sections/hero-section.tsx         | 57 ++++++++++---------
 3 files changed, 38 insertions(+), 39 deletions(-)

diff --git a/apps/landing_page/app/[locale]/layout.tsx b/apps/landing_page/app/[locale]/layout.tsx
index 46a1eab..27d564d 100644
--- a/apps/landing_page/app/[locale]/layout.tsx
+++ b/apps/landing_page/app/[locale]/layout.tsx
@@ -1,5 +1,5 @@
-import { defaultLocale, isValidLocale, type Locale, locales } from "@cookmate/i18n";
-import { type Messages, setupI18n } from "@lingui/core";
+import { defaultLocale, isValidLocale, loadCatalogMessages, type Locale, locales } from "@cookmate/i18n";
+import { setupI18n } from "@lingui/core";
 import { setI18n } from "@lingui/react/server";
 import { Analytics } from "@vercel/analytics/next";
 import type { Metadata, Viewport } from "next";
@@ -133,13 +133,7 @@ export default async function LocaleLayout({
 }>) {
   const { locale: localeParam } = await params;
   const validLocale = isValidLocale(localeParam) ? localeParam : defaultLocale;
-
-  const messageLoaders: Record<Locale, () => Promise<{ messages: Messages }>> = {
-    en: () => import("@cookmate/i18n/locales/en/messages"),
-    fr: () => import("@cookmate/i18n/locales/fr/messages"),
-  };
-  const loadMessages = messageLoaders[validLocale] ?? messageLoaders[defaultLocale];
-  const { messages } = await loadMessages();
+  const messages = await loadCatalogMessages(validLocale);
 
   // Setup i18n for server components
   const i18n = setupI18n({ locale: validLocale, messages: { [validLocale]: messages } });
diff --git a/apps/landing_page/components/landing/layout/footer.tsx b/apps/landing_page/components/landing/layout/footer.tsx
index f9c7230..4f103cd 100644
--- a/apps/landing_page/components/landing/layout/footer.tsx
+++ b/apps/landing_page/components/landing/layout/footer.tsx
@@ -1,7 +1,9 @@
 "use client";
 
 import { Trans } from "@lingui/react/macro";
+import Image from "next/image";
 import { Instagram, Mail, Twitter } from "lucide-react";
+import iconImage from "@/app/icon.png";
 
 export function Footer() {
   return (
@@ -17,9 +19,9 @@ export function Footer() {
         <div className="grid grid-cols-2 md:grid-cols-4 gap-8 mb-12">
           <div className="col-span-2 md:col-span-1">
             <div className="flex items-center gap-2.5 mb-4">
-              <div className="w-9 h-9 bg-gradient-to-br from-[#C6502B] to-[#A84423] rounded-xl flex items-center justify-center">
-                <span className="text-white font-display text-lg font-semibold">C</span>
-              </div>
+              <span className="flex h-9 w-9 items-center justify-center rounded-xl bg-white/10 shadow-sm">
+                <Image src={iconImage} alt="Cookmate" width={36} height={36} className="h-9 w-9" />
+              </span>
               <span className="font-display text-xl text-white">Cookmate</span>
             </div>
             <p className="text-sm text-white/50 leading-relaxed">
diff --git a/apps/landing_page/components/landing/sections/hero-section.tsx b/apps/landing_page/components/landing/sections/hero-section.tsx
index e6f35d9..c6f7e97 100644
--- a/apps/landing_page/components/landing/sections/hero-section.tsx
+++ b/apps/landing_page/components/landing/sections/hero-section.tsx
@@ -22,35 +22,38 @@ export function HeroSection({ onSignup, onScrollToImport }: HeroSectionProps) {
           </span>
         </div>
 
-        <h1
-          id="hero-heading"
-          className="font-display text-4xl sm:text-5xl md:text-6xl lg:text-7xl text-[#221B16] tracking-tight leading-[1.1] mb-4 sm:mb-6 text-balance"
-        >
-          <Trans>
-            Where did that <br className="hidden sm:block" />
-            <span className="text-[#C6502B]">recipe go?</span>
-          </Trans>
-        </h1>
+        <div className="mx-auto w-full max-w-[34rem] px-4 sm:px-0">
+          <h1
+            id="hero-heading"
+            className="font-display text-[2.7rem] sm:text-[3.6rem] md:text-[4.5rem] lg:text-[5.4rem] text-[#221B16] tracking-tight leading-[1.1] mb-4 sm:mb-6 text-balance"
+          >
+            <Trans>
+              Where did that <br className="hidden sm:block" />
+              <span className="text-[#C6502B]">recipe go?</span>
+            </Trans>
+          </h1>
 
-        <p className="text-base sm:text-lg md:text-xl text-[#6E6258] max-w-2xl mx-auto leading-relaxed mb-8 sm:mb-10 px-4 sm:px-0">
-          <Trans>
-            You know, the one you saw on Instagram three weeks ago. Or in that book. Or on that blog.
-            <span className="text-[#221B16] font-medium"> Centralize everything. Find everything.</span>
-          </Trans>
-        </p>
+          <p className="mx-auto max-w-[33rem] text-base sm:text-lg md:text-xl text-[#6E6258] leading-relaxed mb-8 sm:mb-10">
+            <Trans>
+              You know, the one you saw on Instagram three weeks ago. Or in that book. Or on that blog.
+              <br />
+              <span className="text-[#221B16] font-medium">Centralize everything. Find everything.</span>
+            </Trans>
+          </p>
 
-        <div className="flex flex-col sm:flex-row items-center justify-center gap-4 mb-8">
-          <PrimaryButton onClick={onSignup} className="w-full sm:w-auto shadow-xl shadow-[#C6502B]/25">
-            <Trans>Start for free</Trans>
-            <ArrowRight className="w-5 h-5 transition-transform duration-300 group-hover:translate-x-0.5" />
-          </PrimaryButton>
-          <button
-            onClick={onScrollToImport}
-            className="group w-full sm:w-auto px-8 py-4 bg-white/80 backdrop-blur-sm text-[#221B16] font-medium rounded-full border border-[#E6D7C7] hover:bg-white hover:border-[#C6502B]/20 transition-all duration-300 flex items-center justify-center gap-2 shadow-sm hover:shadow-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#C6502B]/40 focus-visible:ring-offset-2 focus-visible:ring-offset-background active:scale-[0.98]"
-          >
-            <Trans>See how it works</Trans>
-            <ChevronDown className="w-5 h-5 transition-transform duration-300 group-hover:translate-y-0.5" />
-          </button>
+          <div className="flex flex-col sm:flex-row items-center justify-center gap-4 mb-8">
+            <PrimaryButton onClick={onSignup} className="w-full sm:w-auto shadow-xl shadow-[#C6502B]/25">
+              <Trans>Start for free</Trans>
+              <ArrowRight className="w-5 h-5 transition-transform duration-300 group-hover:translate-x-0.5" />
+            </PrimaryButton>
+            <button
+              onClick={onScrollToImport}
+              className="group w-full sm:w-auto px-8 py-4 bg-white/80 backdrop-blur-sm text-[#221B16] font-medium rounded-full border border-[#E6D7C7] hover:bg-white hover:border-[#C6502B]/20 transition-all duration-300 flex items-center justify-center gap-2 shadow-sm hover:shadow-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#C6502B]/40 focus-visible:ring-offset-2 focus-visible:ring-offset-background active:scale-[0.98]"
+            >
+              <Trans>See how it works</Trans>
+              <ChevronDown className="w-5 h-5 transition-transform duration-300 group-hover:translate-y-0.5" />
+            </button>
+          </div>
         </div>
 
         <div className="flex flex-wrap items-center justify-center gap-6 text-xs text-[#6E6258]/70">