122 lines
4.2 KiB
TypeScript
122 lines
4.2 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 {
|
|
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}
|
|
/>
|
|
</>
|
|
);
|
|
}
|