From a78726303a6003174eb208583d68c4edbe2d3234 Mon Sep 17 00:00:00 2001
From: AmirReza Jamali <amir7jamali.ar@yahoo.com>
Date: Sun, 26 Oct 2025 10:38:46 +0330
Subject: [PATCH] refactor(seo): Improve page metadata and HTML semantics

This commit updates the page metadata (title and description) from the default Next.js placeholders to be descriptive of the Opp lens application, improving SEO.

Additionally, it refactors the HTML structure for better semantics and accessibility:
- Replaced generic `div` and fragment tags with appropriate semantic elements like `main`, `article`, `li`, and `small`.
- Corrected the heading hierarchy for better document structure.
- Fixed image source paths by making them absolute to prevent broken images.
---
 app/(home)/layout.tsx       |  6 ++---
 app/(home)/page.tsx         | 18 +++++++-------
 app/marketing/[id]/page.tsx |  4 ++--
 app/marketing/layout.tsx    | 39 ++++++++++++++++--------------
 app/marketing/page.tsx      | 48 ++++++++++++++++++-------------------
 5 files changed, 59 insertions(+), 56 deletions(-)

diff --git a/app/(home)/layout.tsx b/app/(home)/layout.tsx
index d972452..18100a0 100644
--- a/app/(home)/layout.tsx
+++ b/app/(home)/layout.tsx
@@ -16,8 +16,8 @@ const geistMono = Geist_Mono({
 });
 
 export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
+  title: "Opp lens - AI-Powered Tender Management",
+  description: "Democratizing Tender Access for SMEs with AI-Powered Tender Management.",
   icons: {
     icon: "/fav-icon.svg",
   },
@@ -130,7 +130,7 @@ export default async function RootLayout({
           pauseOnHover
         />
 
-        <main className="container px-4 py-4 m-auto flex-grow">{children}</main>
+        <div className="container px-4 py-4 m-auto flex-grow">{children}</div>
         <footer className="relative h-full bg-[url('/footer-bg.svg')] bg-cover bg-no-repeat mt-40">
           <div className="relative z-10 container px-4 py-4 m-auto flex flex-col justify-center items-center mt-24 ">
             <div className="flex justify-between flex-col md:flex-row gap-14 w-full md:w-1/2">
diff --git a/app/(home)/page.tsx b/app/(home)/page.tsx
index 3e29252..b94de45 100644
--- a/app/(home)/page.tsx
+++ b/app/(home)/page.tsx
@@ -42,7 +42,7 @@ export default function Home() {
     },
   ];
   return (
-    <>
+    <main>
       <section className="md:flex md:flex-row justify-around items-center">
         <div className=" md:ml-28 w-full md:w-1/2 flex flex-col gap-10">
           <h1 className="font-black text-8xl text-[#013280]">AI-Powered</h1>
@@ -81,20 +81,20 @@ export default function Home() {
         </div>
       </section>
       <section className="text-left flex flex-col gap-6 bg-gradient-to-b from-[#011132] to-[#012B80] text-white rounded-[56px] relative p-6 md:p-14 -mt-16 z-20 md:ml-28">
-        <hgroup className="md:flex gap-5 text-center">
+        <div className="md:flex gap-5 text-center">
           {advItems.map((item) => (
-            <div
+            <article
               key={item.title}
               className="flex flex-col gap-4">
-              <h3 className="font-black text-[90px]">{item.amount}</h3>
-              <h4 className="font-semibold text-3xl capitalize text-[#99dde5]">
+              <p className="font-black text-[90px]">{item.amount}</p>
+              <h3 className="font-semibold text-3xl capitalize text-[#99dde5]">
                 {item.title}
-              </h4>
+              </h3>
               <p className="font-normal text-[16px]">{item.description}</p>
-            </div>
+            </article>
           ))}
-        </hgroup>
+        </div>
       </section>
-    </>
+    </main>
   );
 }
diff --git a/app/marketing/[id]/page.tsx b/app/marketing/[id]/page.tsx
index 5862330..cdad9bf 100644
--- a/app/marketing/[id]/page.tsx
+++ b/app/marketing/[id]/page.tsx
@@ -191,7 +191,7 @@ export default function Home() {
         <section className="flex flex-col gap-10 md:flex-row">
           <div className="flex flex-col gap-7 bg-[#FFF7EB] p-10 rounded-3xl md:pb-20">
             <Image
-              src={"people.svg"}
+              src={"/people.svg"}
               width={48}
               height={48}
               alt="people icon"
@@ -207,7 +207,7 @@ export default function Home() {
           </div>
           <div className="flex flex-col gap-7  bg-[#E5EFFF] p-10 rounded-3xl md:pb-20">
             <Image
-              src={"shield-tick.svg"}
+              src={"/shield-tick.svg"}
               width={48}
               height={48}
               alt="shield icon"
diff --git a/app/marketing/layout.tsx b/app/marketing/layout.tsx
index 314e464..e46ca32 100644
--- a/app/marketing/layout.tsx
+++ b/app/marketing/layout.tsx
@@ -16,8 +16,9 @@ const geistMono = Geist_Mono({
 });
 
 export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
+  title: "Opp lens - AI-Powered Tender Management",
+  description:
+    "Democratizing Tender Access for SMEs with AI-powered tender discovery and preparation.",
   icons: {
     icon: "/fav-icon.svg",
   },
@@ -37,7 +38,7 @@ function ContactInfo({
   contactIconSrc?: string;
 }) {
   return (
-    <div className="flex gap-3 my-3 text-white">
+    <li className="flex gap-3 my-3 text-white">
       <Image
         src={icon}
         width={24}
@@ -65,7 +66,7 @@ function ContactInfo({
           {contact}
         </p>
       )}
-    </div>
+    </li>
   );
 }
 
@@ -149,23 +150,25 @@ export default async function RootLayout({
                   <p className="text-white my-2">
                     Democratizing Tender Access for SMEs.
                   </p>
-                  <p className="text-white my-2">
+                  <small className="text-white my-2">
                     © 2025 Opplens.com by PBL Partners AB. All Rights Reserved.
-                  </p>
+                  </small>
                 </div>
               </div>
-              <div>
-                {contactInfo.map((contact, index) => (
-                  <ContactInfo
-                    key={index}
-                    icon={contact.icon}
-                    contact={contact.contact}
-                    href={contact.href}
-                    ariaLabel={contact.ariaLabel}
-                    contactIconSrc={contact.contactIconSrc}
-                  />
-                ))}
-              </div>
+              <address className="not-italic">
+                <ul>
+                  {contactInfo.map((contact, index) => (
+                    <ContactInfo
+                      key={index}
+                      icon={contact.icon}
+                      contact={contact.contact}
+                      href={contact.href}
+                      ariaLabel={contact.ariaLabel}
+                      contactIconSrc={contact.contactIconSrc}
+                    />
+                  ))}
+                </ul>
+              </address>
             </div>
           </div>
         </footer>
diff --git a/app/marketing/page.tsx b/app/marketing/page.tsx
index a4de9f3..0f4af8f 100644
--- a/app/marketing/page.tsx
+++ b/app/marketing/page.tsx
@@ -59,7 +59,9 @@ export default function Home() {
             </p>
           </hgroup>
           <div className="flex justify-start text-white">
-            <button className="w-2/3 md:w-fit capitalize bg-(--primary) rounded-4xl py-4 px-6">
+            <button
+              type="button"
+              className="w-2/3 md:w-fit capitalize bg-(--primary) rounded-4xl py-4 px-6">
               Get early access
             </button>
           </div>
@@ -83,18 +85,18 @@ export default function Home() {
         </div>
       </section>
 
-      <article className="mt-10">
+      <section className="mt-10 text-center">
         <hgroup>
-          <h4 className="capitalize font-bold text-2xl md:text-4xl">
+          <h2 className="capitalize font-bold text-2xl md:text-4xl">
             your in-house tender department, powered by
             <span className="uppercase">ai</span>
-          </h4>
-          <small className="text-gray-600 mt-3">
+          </h2>
+          <p className="text-gray-600 mt-3">
             Opplens is the end-to-end solution that gives you the power to
             compete and win.
-          </small>
+          </p>
         </hgroup>
-      </article>
+      </section>
       <section className="flex flex-col gap-4 md:flex-row">
         {centerFrames.map((frame, index) => (
           <article
@@ -131,7 +133,7 @@ export default function Home() {
                 height={36}
               />
             </div>
-            <h2 className="font-bold">Resource Drain</h2>
+            <h3 className="font-bold">Resource Drain</h3>
             <p>
               Lacking the time, dedicated staff, and expertise to constantly
               monitor the market and prepare high-quality bids.
@@ -146,7 +148,7 @@ export default function Home() {
                 height={36}
               />
             </div>
-            <h2 className="font-bold">Overwhelming Complexity</h2>
+            <h3 className="font-bold">Overwhelming Complexity</h3>
             <p>
               Navigating complex requirements and processes designed for large
               corporations with dedicated tender departments.
@@ -161,7 +163,7 @@ export default function Home() {
                 height={36}
               />
             </div>
-            <h2 className="font-bold">Low Win Rates</h2>
+            <h3 className="font-bold">Low Win Rates</h3>
             <p>
               Did you know 68% of SMEs in Sweden rarely or never win public
               tenders? It's time to change that.
@@ -169,14 +171,12 @@ export default function Home() {
           </li>
         </ul>
       </section>
-      <section className="flex flex-col mt-36 gap-10 px-2 md:w-3/4 m-auto">
-        <div>
-          <h2 className="font-bold text-2xl md:text-4xl">
-            The Opplens Advantage
-          </h2>
-        </div>
-        <section className="flex flex-col gap-10 md:flex-row">
-          <div className="flex flex-col gap-7 bg-[#FFF7EB] p-10 rounded-3xl md:pb-20">
+      <section className="flex flex-col mt-36 gap-10 px-2 md:w-3/4 m-auto text-center">
+        <h2 className="font-bold text-2xl md:text-4xl">
+          The Opplens Advantage
+        </h2>
+        <div className="flex flex-col gap-10 md:flex-row">
+          <article className="flex flex-col gap-7 bg-[#FFF7EB] p-10 rounded-3xl md:pb-20">
             <Image
               src={"people.svg"}
               width={48}
@@ -184,15 +184,15 @@ export default function Home() {
               alt="people icon"
             />
             <div className="flex flex-col gap-4">
-              <h2 className="font-bold text-xl">A True Partnership Model</h2>
+              <h3 className="font-bold text-xl">A True Partnership Model</h3>
               <p>
                 Lower your risk with our performance-based options. Our success
                 is directly tied to yours, making us a dedicated partner
                 invested in your growth, not just a software provider.
               </p>
             </div>
-          </div>
-          <div className="flex flex-col gap-7  bg-[#E5EFFF] p-10 rounded-3xl md:pb-20">
+          </article>
+          <article className="flex flex-col gap-7  bg-[#E5EFFF] p-10 rounded-3xl md:pb-20">
             <Image
               src={"shield-tick.svg"}
               width={48}
@@ -200,15 +200,15 @@ export default function Home() {
               alt="shield icon"
             />
             <div className="flex flex-col gap-4">
-              <h2 className="font-bold text-xl">Unmatched Data Security</h2>
+              <h3 className="font-bold text-xl">Unmatched Data Security</h3>
               <p>
                 Your business data is critical. Our unique on premise AI engine
                 ensures your information remains 100% private and secure, unlike
                 cloud based services. Fully GDPR compliant by design.
               </p>
             </div>
-          </div>
-        </section>
+          </article>
+        </div>
       </section>
     </>
   );