Fertig

app/landscaping-supplies/page.tsx

@@ -0,0 +1,121 @@
+import NextImage from "next/image";
+import { Breadcrumbs } from "@/components/breadcrumbs";
+import { JsonLd } from "@/components/json-ld";
+import { MaterialCatalog } from "@/components/material-catalog";
+import {
+  landscapingCategory,
+  siteConfig,
+} from "@/data/site-content";
+import { breadcrumbSchema, buildPageMetadata, itemListSchema } from "@/lib/seo";
+import { landscapingMaterials } from "@/data/site-content";
+import { FadeUp, FadeIn } from "@/components/page-hero-motion";
+
+export const metadata = buildPageMetadata({
+  title: "Landscaping Supplies in Corpus Christi, TX",
+  description:
+    "Browse flagstone, sand & gravel, boulders & stone, and Mexico Beach Pebbles from Southern Masonry Supply in Corpus Christi, TX.",
+  path: "/landscaping-supplies",
+  image: "/images/hero_landscaping.png",
+});
+
+export default function LandscapingSuppliesPage() {
+  const breadcrumbs = [
+    { name: "Home", path: "/" },
+    { name: "Landscaping Supplies", path: "/landscaping-supplies" },
+  ];
+
+  return (
+    <>
+      <JsonLd
+        id="landscaping-breadcrumbs"
+        data={breadcrumbSchema(breadcrumbs)}
+      />
+      <JsonLd
+        id="landscaping-item-list"
+        data={itemListSchema({
+          name: "Landscaping Supplies",
+          path: "/landscaping-supplies",
+          items: [
+            { name: "Mexico Beach Pebbles" },
+            { name: '1" - 2" Mexico Beach Pebbles Multicolor' },
+            { name: "Mexico Beach Pebbles 40 lb. Bags" },
+            { name: "Mexico Beach Pebbles 2 Ton Basket" },
+            { name: "Sand & Gravel" },
+            { name: "Flagstone" },
+            { name: '1" Oklahoma' },
+            { name: '1" Oklahoma Silver Mist' },
+            { name: '1" Arkansas Chestnut' },
+            { name: '1/2" Arkansas Blue' },
+            { name: '1" Arkansas Blue' },
+            { name: '2" Arkansas Blue' },
+            { name: '1/2" Arkansas Brown' },
+            { name: '1" Arkansas Brown' },
+            { name: '2" Arkansas Brown' },
+            { name: '1-1/2" Mexico White' },
+            { name: '1-1/2" Mexico Creama' },
+            { name: '1" Mexico Rosa Flagstone' },
+            { name: '1-1/2" Mexico Rosa Flagstone' },
+            { name: '1-1/2" Mexico Gray Flagstone' },
+            { name: '1-1/2" Mexico Cafe Flagstone' },
+            { name: "Boulders & Stone" },
+          ],
+        })}
+      />
+
+      <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">Landscaping supplies</span>
+            </FadeUp>
+            <FadeUp delay={0.15}>
+              <h1 style={{ marginTop: "1.25rem", marginBottom: "1.75rem" }}>
+                {landscapingCategory.title}
+              </h1>
+            </FadeUp>
+            <FadeUp delay={0.25}>
+              <p className="hero-copy" style={{ marginBottom: "2rem" }}>
+                {landscapingCategory.description}
+              </p>
+            </FadeUp>
+            <FadeUp delay={0.35}>
+              <div className="page-hero-meta">
+                <span>{siteConfig.cityRegion}</span>
+                <span>Bulk bags and by-the-yard options</span>
+                <span>Delivery available</span>
+              </div>
+            </FadeUp>
+          </div>
+
+          <FadeIn delay={0.2} className="page-hero-visual">
+            <NextImage
+              src="/images/hero_landscaping.webp"
+              alt="Southern Masonry Supply landscaping gravel and rocks"
+              fill
+              priority
+              sizes="(max-width: 1100px) 100vw, 40vw"
+              quality={72}
+              className="cover-image"
+            />
+            <span className="hero-visual-note">
+              Flagstone, pebbles, aggregates, and boulders
+            </span>
+          </FadeIn>
+        </div>
+      </section>
+
+      <MaterialCatalog
+        heroImage={landscapingCategory.heroImage}
+        materials={landscapingMaterials}
+        intro={landscapingCategory.intro}
+        deliveryNote={landscapingCategory.deliveryNote}
+      />
+    </>
+  );
+}