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.
This commit is contained in:
+9
-9
@@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user