(Feat) About us page and fixed typo

src/app/about/About.module.scss

@@ -0,0 +1,72 @@
+.container {
+  padding: 2rem;
+  max-width: 800px;
+  margin: 0 auto;
+  font-family: 'Segoe UI', sans-serif;
+  color: #111827;
+
+  h1 {
+    color: #03658c;
+    font-size: 2rem;
+    margin-bottom: 1rem;
+  }
+
+  h2 {
+    color: #03658c;
+    margin-top: 2rem;
+    font-size: 1.3rem;
+  }
+
+  ul {
+    padding-left: 1.5rem;
+    line-height: 1.7;
+
+    li {
+      margin-bottom: 0.5rem;
+
+      strong {
+        font-weight: bold;
+      }
+
+      code {
+        background-color: #e5e7eb;
+        padding: 0.2rem 0.4rem;
+        border-radius: 4px;
+        font-size: 0.95rem;
+        font-family: monospace;
+      }
+    }
+  }
+}
+
+.buttonContainer {
+  margin-top: 3rem;
+  text-align: center;
+}
+
+.backButton {
+  background-color: #03658c;
+  color: #fff;
+  border: none;
+  padding: 0.7rem 1.5rem;
+  font-size: 1rem;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: background-color 0.3s ease;
+
+  &:hover {
+    background-color: #52b3d9;
+  }
+}
+
+.active {
+  outline: 2px solid #2563eb;
+  outline-offset: 2px;
+  font-weight: bold;
+}
+
+.activeTitle {
+  border-left: 5px solid #1d4ed8;
+  padding-left: 10px;
+  color: #1d4ed8;
+}

src/app/about/page.jsx

@@ -1,3 +1,92 @@
+import styles from './About.module.scss'
+import Link from 'next/link'
+
+const stackSections = [
+  {
+    title: 'Frontend',
+    items: [
+      ['Next.js', 'React framework for server-rendered apps and API routes.'],
+      ['React', 'UI library used for building interactive components.'],
+      ['SCSS', 'Used for component-based styling.'],
+      ['fetch API', 'To communicate with the backend and OMDb API.'],
+    ],
+  },
+  {
+    title: 'Backend',
+    items: [
+      ['Next.js API Routes', 'Server logic handled inside ', <code key="code">app/api/</code>, ' directory.'],
+      ['MongoDB Atlas', 'Cloud-hosted NoSQL database service.'],
+      [
+        'Mongoose',
+        'ODM used for defining models like ',
+        <code key="code">Movie</code>,
+        ' and ',
+        <code key="code2">Screening</code>,
+        '.',
+      ],
+      ['OMDb API', 'External API for retrieving movie metadata.'],
+      [
+        'Environment Variables',
+        <code key="code">.env</code>,
+        ' used for keys like ',
+        <code key="code2">MONGODB_URI</code>,
+        ' and ',
+        <code key="code3">OMDB_API_KEY</code>,
+        '.',
+      ],
+    ],
+  },
+  {
+    title: 'Testing',
+    items: [
+      ['Jest', 'JavaScript testing framework for running unit tests.'],
+      ['jest.unstable_mockModule', 'For mocking ES module imports during tests.'],
+      ['formdata-node', 'Simulates ', <code key="code">formData()</code>, ' in a Node.js environment.'],
+    ],
+  },
+  {
+    title: 'Tooling & Configuration',
+    items: [
+      [
+        'ECMAScript Modules (ESM)',
+        'Modern syntax using ',
+        <code key="code">import/export</code>,
+        " and Node's ",
+        <code key="code2">--experimental-vm-modules</code>,
+        '.',
+      ],
+      ['cross-env', 'Sets environment variables cross-platform in scripts.'],
+      [
+        'Alias (@)',
+        'Path shortcuts like ',
+        <code key="code">@/lib/...</code>,
+        ' mapped in ',
+        <code key="code2">jest.config.js</code>,
+        ' using ',
+        <code key="code3">moduleNameMapper</code>,
+        '.',
+      ],
+    ],
+  },
+]
+
 export default function About() {
-  return <h1>About</h1>
+  return (
+    <main className={styles.container}>
+      <h1>KINO-NextJS – Technical Stack</h1>
+
+      {stackSections.map((section) => (
+        <section key={section.title}>
+          <h2>{section.title}</h2>
+          <ul>
+            {section.items.map(([title, ...desc], i) => (
+              <li key={i}>
+                <strong>{title}</strong> – {desc}
+              </li>
+            ))}
+          </ul>
+        </section>
+      ))}
+    </main>
+  )
 }

src/app/layout.jsx

@@ -58,7 +58,7 @@ export default function RootLayout({ children }) {
               <h6 className="footer__find-Us-country">Sverige</h6>
             </div>
             <div className="footer__partners">
-              <h3 className="footer__partners-title">Våra sammarbetspartners</h3>
+              <h3 className="footer__partners-title">Våra samarbetspartners</h3>
             </div>
           </footer>
         </div>