From 6265d3faf60efca08a15c23ef8b462359feb2861 Mon Sep 17 00:00:00 2001
From: Danitello123 <danielnnam411@gmail.com>
Date: Thu, 23 Apr 2026 13:30:59 +0100
Subject: [PATCH] feat: improve responsive typography and spacing for mobile

---
 src/app/page.test.tsx | 32 ++++++++++++++++++++++++++++++++
 src/app/page.tsx      | 24 ++++++++++++------------
 2 files changed, 44 insertions(+), 12 deletions(-)

diff --git a/src/app/page.test.tsx b/src/app/page.test.tsx
index 2348ac3..11ebe08 100644
--- a/src/app/page.test.tsx
+++ b/src/app/page.test.tsx
@@ -6,4 +6,36 @@ describe('Home', () => {
     render(<Home />);
     expect(screen.getByRole('heading', { name: /TalentTrust/i })).toBeInTheDocument();
   });
+
+  it('renders description paragraph', () => {
+    render(<Home />);
+    expect(screen.getByText(/Safe, secure payments/i)).toBeInTheDocument();
+  });
+
+  it('renders Key Terms section', () => {
+    render(<Home />);
+    expect(screen.getByRole('heading', { name: /Key Terms/i })).toBeInTheDocument();
+  });
+
+  it('renders all key terms', () => {
+    render(<Home />);
+    expect(screen.getByText('Escrow')).toBeInTheDocument();
+    expect(screen.getByText('Milestone')).toBeInTheDocument();
+    expect(screen.getByText('Release')).toBeInTheDocument();
+  });
+
+  it('renders term descriptions', () => {
+    render(<Home />);
+    expect(screen.getByText(/Money held safely/i)).toBeInTheDocument();
+    expect(screen.getByText(/project checkpoint/i)).toBeInTheDocument();
+    expect(screen.getByText(/payment goes to the freelancer/i)).toBeInTheDocument();
+  });
+
+  it('has proper semantic structure', () => {
+    const { container } = render(<Home />);
+    expect(container.querySelector('main')).toBeInTheDocument();
+    expect(container.querySelector('dl')).toBeInTheDocument();
+    expect(container.querySelectorAll('dt')).toHaveLength(3);
+    expect(container.querySelectorAll('dd')).toHaveLength(3);
+  });
 });
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 6a5f551..36392bc 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,21 +1,21 @@
 export default function Home() {
   return (
-    <main className="min-h-screen flex flex-col items-center justify-center p-8">
-      <h1 className="text-3xl font-bold text-center mb-4">
+    <main className="min-h-screen flex flex-col items-center justify-center p-4 sm:p-8">
+      <h1 className="text-2xl sm:text-3xl font-bold text-center mb-4 sm:mb-6">
         TalentTrust
       </h1>
-      <p className="text-center text-gray-600 max-w-md mb-8">
+      <p className="text-center text-gray-600 max-w-sm sm:max-w-md mb-6 sm:mb-8 text-sm sm:text-base">
         Safe, secure payments that protect both freelancers and clients throughout your project.
       </p>
-      <div className="max-w-md text-left">
-        <h2 className="text-xl font-semibold mb-4">Key Terms</h2>
-        <dl className="space-y-2">
-          <dt className="font-medium">Escrow</dt>
-          <dd className="text-gray-600">Money held safely until work is completed and approved.</dd>
-          <dt className="font-medium">Milestone</dt>
-          <dd className="text-gray-600">A project checkpoint where payment is held until you approve the work.</dd>
-          <dt className="font-medium">Release</dt>
-          <dd className="text-gray-600">When approved work is finished, the payment goes to the freelancer.</dd>
+      <div className="max-w-sm sm:max-w-md text-left">
+        <h2 className="text-lg sm:text-xl font-semibold mb-3 sm:mb-4">Key Terms</h2>
+        <dl className="space-y-3 sm:space-y-2">
+          <dt className="font-medium text-sm sm:text-base">Escrow</dt>
+          <dd className="text-gray-600 text-sm sm:text-base">Money held safely until work is completed and approved.</dd>
+          <dt className="font-medium text-sm sm:text-base">Milestone</dt>
+          <dd className="text-gray-600 text-sm sm:text-base">A project checkpoint where payment is held until you approve the work.</dd>
+          <dt className="font-medium text-sm sm:text-base">Release</dt>
+          <dd className="text-gray-600 text-sm sm:text-base">When approved work is finished, the payment goes to the freelancer.</dd>
         </dl>
       </div>
     </main>