feat: update font configurations and improve UI elements

app/(routes)/movieForm/MovieFormClient.integration.test.tsx

@@ -104,7 +104,7 @@ describe("MovieFormClient integration", () => {
       }
     );
 
-    fireEvent.click(screen.getByRole("button", { name: "Get Movie" }));
+    fireEvent.click(screen.getByRole("button", { name: "Get Movies" }));
 
     await waitFor(() => {
       expect(mockPush).toHaveBeenCalledWith("/recommendations");

app/(routes)/movieForm/MovieFormClient.tsx

@@ -58,7 +58,7 @@ const MovieFormClient = () => {
 
   return (
     <>
-      <h2 className="text-2xl mb-4 text-center">Person #{currentParticipant}</h2>
+      <h1 className="text-2xl mb-4 text-center">Person #{currentParticipant}</h1>
       <form onSubmit={handleFormSubmission} className="space-y-6">
         <MovieFormFields
           formData={formData}
@@ -67,8 +67,8 @@ const MovieFormClient = () => {
           handleTypeChange={handleTypeChange}
         />
 
-        <button type="submit" className="btn btn-primary block w-full text-3xl">
-          {currentParticipant === totalParticipants ? "Get Movie" : "Next"}
+        <button type="submit" className="btn btn-primary block w-full text-3xl font-display">
+          {currentParticipant === totalParticipants ? "Get Movies" : "Next"}
         </button>
 
         {error && <p className="text-red-500 text-center">{error}</p>}

app/(routes)/movieForm/page.test.tsx

@@ -39,13 +39,13 @@ describe("MovieForm", () => {
   it("renders the form with initial state", () => {
     renderMovieForm();
     expect(screen.getByText("Person #1")).toBeInTheDocument();
-    expect(screen.getByRole("button", { name: /get movie/i })).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: /get movies/i })).toBeInTheDocument();
   });
 
   it("returns a validation error message when required fields are empty", async () => {
     renderMovieForm();
 
-    const submitBtn = screen.getByRole("button", { name: /get movie/i });
+    const submitBtn = screen.getByRole("button", { name: /get movies/i });
     fireEvent.click(submitBtn);
 
     expect(await screen.findByText("Please fill out all required fields")).toBeInTheDocument();
@@ -60,7 +60,7 @@ describe("MovieForm", () => {
     fireEvent.change(movieInput, { target: { value: "The Matrix" } });
     fireEvent.change(personInput, { target: { value: "Keanu Reeves" } });
 
-    const submitBtn = screen.getByRole("button", { name: /get movie/i });
+    const submitBtn = screen.getByRole("button", { name: /get movies/i });
     fireEvent.click(submitBtn);
 
     await waitFor(() => {

app/fonts.ts

@@ -1,22 +1,23 @@
-import { Carter_One, Roboto_Slab } from "next/font/google";
+import { Syne, Inter } from "next/font/google";
 
-const carterOneInit = Carter_One({
-  weight: "400",
+const syneInit = Syne({
+  weight: ["800"],
   subsets: ["latin"],
-  variable: "--ff-serif",
-  fallback: ["serif"],
+  variable: "--ff-display",
+  display: "swap",
+  fallback: ["system-ui", "sans-serif"],
   preload: true,
   adjustFontFallback: false,
 });
-const robotoSlabInit = Roboto_Slab({
-  weight: ["300", "400", "700"],
-  display: "swap",
+
+const interInit = Inter({
+  weight: ["500"],
   subsets: ["latin"],
   variable: "--ff-sans-serif",
-  fallback: ["sans-serif"],
+  display: "swap",
   preload: true,
   adjustFontFallback: false,
 });
 
-export const carterOne = carterOneInit.variable;
-export const robotoSlab = robotoSlabInit.variable;
+export const syne = syneInit.variable;
+export const inter = interInit.variable;

app/globals.css

@@ -10,8 +10,10 @@
 body {
   color: var(--foreground, #ffffff);
   font-family: var(--ff-sans-serif, Arial, Helvetica, sans-serif);
+  line-height: 1.6;
 }
 
 h1 {
-  font-family: var(--ff-serif, Arial, Helvetica, sans-serif);
+  font-family: var(--ff-display, Arial, Helvetica, sans-serif);
+  letter-spacing: -0.02em;
 }

app/layout.tsx

@@ -1,6 +1,6 @@
 import type { Metadata } from "next";
 import "./globals.css";
-import { carterOne, robotoSlab } from "./fonts";
+import { syne, inter } from "./fonts";
 import { MovieProvider } from "@/contexts/MovieContext";
 import Header from "@/components/features/Header";
 import { Globe, Mail } from "lucide-react";
@@ -68,7 +68,7 @@ export default function RootLayout({
   return (
     <html lang={SITE_LANGUAGE}>
       <body
-        className={`${carterOne} ${robotoSlab} antialiased bg-base-100 min-h-screen flex flex-col justify-center items-center py-4`}
+        className={`${syne} ${inter} antialiased bg-base-100 min-h-screen flex flex-col justify-center items-center py-4`}
       >
         <MovieProvider>
           <Header />

components/features/Logo.test.tsx

@@ -13,8 +13,8 @@ jest.mock("next/image", () => ({
 }));
 
 // Mock the image import
-jest.mock("@/public/popcorn.png", () => ({
-  src: "/mocked-popcorn.png",
+jest.mock("@/public/film.png", () => ({
+  src: "/mocked-film.png",
   height: 100,
   width: 100,
 }));
@@ -46,7 +46,7 @@ describe("Logo Component", () => {
     const { container } = render(<Logo />);
     const image = container.querySelector("img");
 
-    expect(image).toHaveAttribute("alt", "Popcorn");
+    expect(image).toHaveAttribute("alt", "App logo representing a film");
   });
 
   // Test cleanup after each test

components/features/Logo.tsx

@@ -1,13 +1,21 @@
 "use client";
 
 import Image from "next/image";
-import popcorn from "@/public/popcorn.png";
+import film from "@/public/film.png";
 import { usePathname } from "next/navigation";
 
 const Logo = () => {
   const pathname = usePathname();
   if (pathname === "/recommendations") return null;
-  return <Image src={popcorn} alt="Popcorn" className="mx-auto" />;
+  return (
+    <Image
+      src={film}
+      width={99}
+      alt="App logo representing a film"
+      className="mx-auto h-auto"
+      loading="eager"
+    />
+  );
 };
 
 export default Logo;

components/features/ParticipantsSetup.tsx

@@ -66,7 +66,10 @@ const ParticipantsSetup = () => {
         />
       </div>
 
-      <button onClick={handleStart} className="btn btn-primary block mx-auto w-full text-3xl">
+      <button
+        onClick={handleStart}
+        className="btn btn-primary block mx-auto w-full text-3xl font-display"
+      >
         Start
       </button>
     </div>

tailwind.config.ts

@@ -28,6 +28,9 @@ export default {
         background: "var(--background)",
         foreground: "var(--foreground)",
       },
+      fontFamily: {
+        display: ["var(--ff-display)", "system-ui", "sans-serif"],
+      },
     },
   },
   plugins: [daisyui],

tests/e2e/guard-and-validation.spec.ts

@@ -7,7 +7,7 @@ test.describe("Recommendation guardrails", () => {
 
     await expect(page).toHaveURL(/\/movieForm$/);
 
-    await page.getByRole("button", { name: "Get Movie" }).click();
+    await page.getByRole("button", { name: "Get Movies" }).click();
 
     await expect(page.getByText("Please fill out all required fields")).toBeVisible();
     await expect(page.getByText("This field is required")).toHaveCount(2);

tests/e2e/happy-path.spec.ts

@@ -39,7 +39,7 @@ test.describe("Core recommendation journey", () => {
 
     const recommendationsRequest = page.waitForRequest("**/api/recommendations");
     const recommendationsResponse = page.waitForResponse("**/api/recommendations");
-    await page.getByRole("button", { name: "Get Movie" }).click();
+    await page.getByRole("button", { name: "Get Movies" }).click();
 
     await expect(page).toHaveURL(/\/recommendations$/);
     await recommendationsRequest;