import React from "react";
import type { Metadata } from "next";
import Header1 from "@/components/layout/Header1";
import Footer1 from "@/components/layout/Footer1";
import BlogSection from "@/components/home/home-1/BlogSection";
import PageHeader from "@/components/common/PageHeader";

export const metadata: Metadata = {
    title: "Web Dev, SEO & Digital Marketing Blog | Metatroncube",
    description: "Expert insights on web development, SEO strategies, and digital marketing trends. Actionable tips from Metatroncube Software Solutions in Waterloo, Canada.",
    alternates: {
        canonical: "/blog",
    },
};

export default function BlogListingPage() {
    return (
        <>
            <Header1 />
            <main>
                <PageHeader
                    title="Our Blog"
                    bannerLeftImage="/assets/images/innerbanner/left/left-blog.webp"
                    bannerRightImage="/assets/images/innerbanner/right/right-blog.webp"
                />
                <section className="blog-page-section section-space">
                    <div className="container">
                        <BlogSection isPaginated={true} hideHeader={true} columns="col-lg-4 col-md-6" />
                    </div>
                </section>
            </main>
            <Footer1 />
        </>
    );
}