102 lines
3.3 KiB
TypeScript
102 lines
3.3 KiB
TypeScript
import NextImage from "next/image";
|
|
import { Breadcrumbs } from "@/components/breadcrumbs";
|
|
import { JsonLd } from "@/components/json-ld";
|
|
import { MaterialCatalog } from "@/components/material-catalog";
|
|
import {
|
|
masonryCategory,
|
|
siteConfig,
|
|
} from "@/data/site-content";
|
|
import { breadcrumbSchema, buildPageMetadata, itemListSchema } from "@/lib/seo";
|
|
import { masonryMaterials } from "@/data/site-content";
|
|
import { FadeUp, FadeIn } from "@/components/page-hero-motion";
|
|
|
|
export const metadata = buildPageMetadata({
|
|
title: "Masonry Supplies in Corpus Christi, TX",
|
|
description:
|
|
"Browse masonry tools and bagged cement from Southern Masonry Supply in Corpus Christi, TX.",
|
|
path: "/masonry-supplies",
|
|
image: "/images/hero_masonry.png",
|
|
});
|
|
|
|
export default function MasonrySuppliesPage() {
|
|
const breadcrumbs = [
|
|
{ name: "Home", path: "/" },
|
|
{ name: "Masonry Supplies", path: "/masonry-supplies" },
|
|
];
|
|
|
|
return (
|
|
<>
|
|
<JsonLd id="masonry-breadcrumbs" data={breadcrumbSchema(breadcrumbs)} />
|
|
<JsonLd
|
|
id="masonry-item-list"
|
|
data={itemListSchema({
|
|
name: "Masonry Supplies",
|
|
path: "/masonry-supplies",
|
|
items: [
|
|
{ name: "Masonry Tools" },
|
|
{ name: "Bagged Cement" },
|
|
{ name: "Alamo Type N Masonry Cement" },
|
|
{ name: "Alamo White Portland Cement" },
|
|
{ name: "Alamo White Masonry Cement" },
|
|
{ name: "Alamo Portland Cement Type IL" },
|
|
{ name: "Alamo Masonry Cement Type N" },
|
|
],
|
|
})}
|
|
/>
|
|
|
|
<div className="breadcrumb-strip">
|
|
<div className="container">
|
|
<Breadcrumbs items={breadcrumbs} />
|
|
</div>
|
|
</div>
|
|
|
|
<section className="page-hero">
|
|
<div className="container page-hero-shell">
|
|
<div className="page-hero-copy">
|
|
<FadeUp delay={0.05}>
|
|
<span className="eyebrow">Masonry supplies</span>
|
|
</FadeUp>
|
|
<FadeUp delay={0.15}>
|
|
<h1 style={{ marginTop: "1.25rem", marginBottom: "1.75rem" }}>{masonryCategory.title}</h1>
|
|
</FadeUp>
|
|
<FadeUp delay={0.25}>
|
|
<p className="hero-copy" style={{ marginBottom: "2rem" }}>
|
|
{masonryCategory.description}
|
|
</p>
|
|
</FadeUp>
|
|
<FadeUp delay={0.35}>
|
|
<div className="page-hero-meta">
|
|
<span>{siteConfig.cityRegion}</span>
|
|
<span>Quote-first service</span>
|
|
<span>Delivery available</span>
|
|
</div>
|
|
</FadeUp>
|
|
</div>
|
|
|
|
<FadeIn delay={0.2} className="page-hero-visual">
|
|
<NextImage
|
|
src="/images/hero_masonry.webp"
|
|
alt="Southern Masonry Supply tools and cement"
|
|
fill
|
|
priority
|
|
sizes="(max-width: 1100px) 100vw, 40vw"
|
|
quality={72}
|
|
className="cover-image"
|
|
/>
|
|
<span className="hero-visual-note">
|
|
Tools, cement, and fast follow-up quoting
|
|
</span>
|
|
</FadeIn>
|
|
</div>
|
|
</section>
|
|
|
|
<MaterialCatalog
|
|
heroImage={masonryCategory.heroImage}
|
|
materials={masonryMaterials}
|
|
intro={masonryCategory.intro}
|
|
deliveryNote={masonryCategory.deliveryNote}
|
|
/>
|
|
</>
|
|
);
|
|
}
|