Show posts and categories using parallax image background

// pages/index

// import hooks
import useNumbers from "../hooks/useNumbers";
import usePost from "../hooks/usePost";
import useCategory from "../hooks/useCategory";

const { numbers } = useNumbers();
const { latestPosts } = usePost();
const { categories } = useCategory();

// render
<Row>
<Col span={24}>
    <ParallaxImage>
    <h2
        style={{
        textAlign: "center",
        fontSize: "86px",
        textShadow: "2px 2px 4px #000000",
        color: "#fff",
        }}
    >
        BLOG POSTS
    </h2>

    <Divider>
        <ThunderboltOutlined />
    </Divider>
    <div style={{ textAlign: "center" }}>
        {latestPosts.map((p) => (
        <Link href={`/post/${p.slug}`}>
            <a>
            <h3 style={{ color: "#fff" }} key={p._id}>
                {p.title}
            </h3>
            </a>
        </Link>
        ))}
    </div>
    </ParallaxImage>
</Col>
</Row>

<Row>
<Col
    span={24}
    style={{ textAlign: "center", marginTop: 80, marginBottom: 80 }}
>
    <Divider>CATEGORIES</Divider>

    {categories.map((c) => (
    <Link href={`/category/${c.slug}`}>
        <a>
        <Button style={{ margin: 2 }} key={c._id}>
            {c.name}
        </Button>
        </a>
    </Link>
    ))}
</Col>
</Row>