Fertig

app/masonry-supplies/page.tsx

@@ -0,0 +1,101 @@
+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}
+      />
+    </>
+  );
+}