opentierboy-89 [FEATURE] Implement automated testing

- Add About test
- Fix About layout for small screen

app/(static)/about/page.tsx

@@ -60,7 +60,7 @@ const AboutPage = () => {
       <section className="py-20">
         <div className="container mx-auto px-4">
           <h2 className="text-4xl md:text-5xl font-bold mb-12 text-center">Our Approach</h2>
-          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+          <div className="flex flex-col md:grid md:grid-cols-3 gap-8">
             <Card className="col-span-3">
               <CardHeader>
                 <h3 className="text-2xl font-semibold">Community Driven & Open-Source</h3>

tests/about.spec.ts

@@ -0,0 +1,17 @@
+import {test, expect} from '@playwright/test';
+
+test('it should be able to visit about page', async ({page}) => {
+  await page.goto('/');
+  await page.getByRole('navigation').getByRole("link", {name: "About"}).click();
+  await expect(page.locator("main")).toBeVisible();
+
+  const h3CommunityDrivenOpenSource = page.getByRole("heading", {name: "Community Driven & Open-Source"})
+  const h3AdFreeExperience = page.getByRole("heading", {name: "Ad-Free Experience"})
+  const h3EasySharing = page.getByRole("heading", {name: "Easy Sharing"})
+  const h3Customizable = page.getByRole("heading", {name: "Customizable"})
+
+  await expect(h3CommunityDrivenOpenSource).toBeVisible();
+  await expect(h3AdFreeExperience).toBeVisible();
+  await expect(h3EasySharing).toBeVisible();
+  await expect(h3Customizable).toBeVisible();
+});