492 lines
16 KiB
TypeScript
492 lines
16 KiB
TypeScript
import Image from "next/image";
|
|
import Link from "next/link";
|
|
import { siteConfig, processSteps, faqs, featuredMaterials, googleReviews, homeStats } from "@/data/site-content";
|
|
import { JsonLd } from "@/components/json-ld";
|
|
import { ProcessTimeline } from "@/components/process-timeline";
|
|
import { Breadcrumbs } from "@/components/breadcrumbs";
|
|
import { buildPageMetadata, breadcrumbSchema, faqPageSchema } from "@/lib/seo";
|
|
import { TestimonialsCarousel } from "@/components/testimonials-carousel";
|
|
import { HomeCTASection } from "@/components/home-cta-section";
|
|
import { MotionSection } from "@/components/motion-section";
|
|
import { HeroCinema } from "@/components/hero-cinema";
|
|
import { CountUpStat } from "@/components/count-up-stat";
|
|
|
|
export const metadata = buildPageMetadata({
|
|
title: "South Texas's Most Trusted Masonry Supply",
|
|
description:
|
|
"Providing premium brick, stone, and landscaping materials to Corpus Christi's contractors and homeowners since 1990.",
|
|
path: "/",
|
|
});
|
|
|
|
export default function Home() {
|
|
return (
|
|
<main>
|
|
<JsonLd
|
|
id="home-breadcrumbs"
|
|
data={breadcrumbSchema([{ name: "Home", path: "/" }])}
|
|
/>
|
|
<JsonLd id="home-faq-schema" data={faqPageSchema(faqs)} />
|
|
|
|
{/* Hero Section */}
|
|
<section className="home-hero">
|
|
<div className="home-hero-left">
|
|
<div className="home-hero-copy reveal">
|
|
<span className="eyebrow" style={{ color: "var(--primary)" }}>
|
|
SINCE 1990
|
|
</span>
|
|
<h1>South Texas's Most Trusted Masonry Supply</h1>
|
|
<p>
|
|
Providing premium brick, stone, and landscaping materials to
|
|
Corpus Christi's contractors and homeowners with dependable
|
|
on-site delivery.
|
|
</p>
|
|
|
|
<div className="hero-reviews">
|
|
<div className="stars">
|
|
{[...Array(5)].map((_, i) => (
|
|
<svg
|
|
key={i}
|
|
viewBox="0 0 24 24"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z" />
|
|
</svg>
|
|
))}
|
|
</div>
|
|
<span>4.9 Stars (14 Google Reviews)</span>
|
|
</div>
|
|
|
|
<div className="hero-actions">
|
|
<Link href="/contact" className="button button-primary">
|
|
GET A FREE QUOTE
|
|
</Link>
|
|
<Link
|
|
href="/products"
|
|
className="button button-outline"
|
|
style={{
|
|
borderColor: "white",
|
|
color: "white",
|
|
marginLeft: "1rem",
|
|
}}
|
|
>
|
|
VIEW INVENTORY
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="home-hero-visual" aria-hidden="true">
|
|
<HeroCinema />
|
|
</div>
|
|
</section>
|
|
|
|
{/* Quick Service Band */}
|
|
<div className="quick-service-band">
|
|
<div className="container">
|
|
<div className="quick-service-grid">
|
|
<div className="service-item">
|
|
<h4>Phone</h4>
|
|
<span>{siteConfig.phoneDisplay}</span>
|
|
</div>
|
|
<div className="service-item">
|
|
<h4>Address</h4>
|
|
<span>{siteConfig.address.street}</span>
|
|
</div>
|
|
<div className="service-item">
|
|
<h4>Hours</h4>
|
|
<span>Mon - Fri 8 AM - 5 PM</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Stats Band */}
|
|
<section className="stats-band">
|
|
<div className="container">
|
|
<div className="stats-grid">
|
|
{homeStats.map((stat, i) => (
|
|
<MotionSection key={stat.label} delay={i * 0.08} direction="up">
|
|
<CountUpStat value={stat.value} label={stat.label} />
|
|
</MotionSection>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Product Categories */}
|
|
<section className="section bg-soft">
|
|
<div className="container">
|
|
<div
|
|
className="section-header reveal"
|
|
style={{ textAlign: "center", marginBottom: "4rem" }}
|
|
>
|
|
<span className="eyebrow">OUR PRODUCTS</span>
|
|
<h2>Premium Materials for Any Project</h2>
|
|
<p style={{ maxWidth: "600px", margin: "1rem auto" }}>
|
|
From foundation to finish, we carry the materials you need for
|
|
professional masonry and landscaping results.
|
|
</p>
|
|
</div>
|
|
|
|
<div
|
|
className="category-grid"
|
|
style={{
|
|
display: "grid",
|
|
gridTemplateColumns: "repeat(3, 1fr)",
|
|
gap: "2rem",
|
|
}}
|
|
>
|
|
<div
|
|
className="category-card reveal reveal-delay-1"
|
|
style={{
|
|
background: "white",
|
|
borderRadius: "12px",
|
|
overflow: "hidden",
|
|
boxShadow: "var(--shadow)",
|
|
}}
|
|
>
|
|
<div
|
|
style={{
|
|
position: "relative",
|
|
height: "240px",
|
|
background: "#f1f3f5",
|
|
}}
|
|
>
|
|
<Image
|
|
src="/images/hero_masonry_landscaping_png_1773134515262.webp"
|
|
alt="Masonry Supplies"
|
|
fill
|
|
sizes="(max-width: 900px) 100vw, (max-width: 1200px) 50vw, 33vw"
|
|
quality={70}
|
|
className="cover-image"
|
|
/>
|
|
</div>
|
|
<div style={{ padding: "2rem" }}>
|
|
<h3 style={{ marginBottom: "1rem" }}>Masonry Supplies</h3>
|
|
<p>
|
|
Brick, concrete blocks, mortar, and lintels for structural and
|
|
aesthetic projects.
|
|
</p>
|
|
<Link
|
|
href="/masonry-supplies#catalog"
|
|
style={{ color: "var(--primary)", fontWeight: "700" }}
|
|
>
|
|
LEARN MORE →
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
<div
|
|
className="category-card reveal reveal-delay-2"
|
|
style={{
|
|
background: "white",
|
|
borderRadius: "12px",
|
|
overflow: "hidden",
|
|
boxShadow: "var(--shadow)",
|
|
}}
|
|
>
|
|
<div
|
|
style={{
|
|
position: "relative",
|
|
height: "240px",
|
|
background: "#f1f3f5",
|
|
}}
|
|
>
|
|
<Image
|
|
src="/images/flagstone_stack_premium_png_1773134568102.webp"
|
|
alt="Natural Stone"
|
|
fill
|
|
sizes="(max-width: 900px) 100vw, (max-width: 1200px) 50vw, 33vw"
|
|
quality={70}
|
|
className="cover-image"
|
|
/>
|
|
</div>
|
|
<div style={{ padding: "2rem" }}>
|
|
<h3 style={{ marginBottom: "1rem" }}>Natural Stone</h3>
|
|
<p>
|
|
Flagstone, limestone, and decorative rock to elevate your
|
|
landscape and architecture.
|
|
</p>
|
|
<Link
|
|
href="/landscaping-supplies#catalog"
|
|
style={{ color: "var(--primary)", fontWeight: "700" }}
|
|
>
|
|
LEARN MORE →
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
<div
|
|
className="category-card reveal reveal-delay-3"
|
|
style={{
|
|
background: "white",
|
|
borderRadius: "12px",
|
|
overflow: "hidden",
|
|
boxShadow: "var(--shadow)",
|
|
}}
|
|
>
|
|
<div
|
|
style={{
|
|
position: "relative",
|
|
height: "240px",
|
|
background: "#f1f3f5",
|
|
}}
|
|
>
|
|
<Image
|
|
src="/images/masonry_tools_display_png_1773134531475.webp"
|
|
alt="Tools & Materials"
|
|
fill
|
|
sizes="(max-width: 900px) 100vw, (max-width: 1200px) 50vw, 33vw"
|
|
quality={70}
|
|
className="cover-image"
|
|
/>
|
|
</div>
|
|
<div style={{ padding: "2rem" }}>
|
|
<h3 style={{ marginBottom: "1rem" }}>Tools & Materials</h3>
|
|
<p>
|
|
High-quality masonry tools, expansion joints, and sealers to
|
|
get the job done right.
|
|
</p>
|
|
<Link
|
|
href="/masonry-supplies#catalog"
|
|
style={{ color: "var(--primary)", fontWeight: "700" }}
|
|
>
|
|
LEARN MORE →
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Featured Products */}
|
|
<section className="section reveal">
|
|
<div className="container">
|
|
<div className="featured-header">
|
|
<div>
|
|
<span className="eyebrow">IN STOCK NOW</span>
|
|
<h2>Featured Masonry Products</h2>
|
|
</div>
|
|
<Link href="/products" className="button button-outline">
|
|
VIEW FULL INVENTORY
|
|
</Link>
|
|
</div>
|
|
|
|
<div className="featured-grid">
|
|
{featuredMaterials.slice(0, 4).map((product, i) => (
|
|
<div
|
|
key={product.slug}
|
|
className={`reveal reveal-delay-${(i % 3) + 1}`}
|
|
style={{
|
|
background: "white",
|
|
borderRadius: "8px",
|
|
overflow: "hidden",
|
|
border: "1px solid var(--border)",
|
|
}}
|
|
>
|
|
<div
|
|
style={{
|
|
position: "relative",
|
|
height: "200px",
|
|
overflow: "hidden",
|
|
background: "#f1f3f5",
|
|
}}
|
|
>
|
|
<Image
|
|
src={product.image}
|
|
alt={product.name}
|
|
fill
|
|
sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 25vw"
|
|
quality={68}
|
|
className="cover-image"
|
|
/>
|
|
</div>
|
|
<div style={{ padding: "1.5rem" }}>
|
|
<h4 style={{ fontSize: "1.125rem", marginBottom: "0.5rem" }}>
|
|
{product.name}
|
|
</h4>
|
|
<p style={{ fontSize: "0.875rem", marginBottom: "0" }}>
|
|
Available for delivery
|
|
</p>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Why Choose Us */}
|
|
<section className="section bg-soft">
|
|
<div className="container">
|
|
<div
|
|
style={{
|
|
display: "grid",
|
|
gridTemplateColumns: "1fr 1fr",
|
|
gap: "5rem",
|
|
alignItems: "center",
|
|
}}
|
|
>
|
|
<div>
|
|
<span className="eyebrow">THE SMS DIFFERENCE</span>
|
|
<h2>Professional Supply, Personal Service</h2>
|
|
<p style={{ fontSize: "1.125rem", marginTop: "1.5rem" }}>
|
|
We aren't just a yard; we're your project partner. With over
|
|
34 years of experience serving South Texas, we know our
|
|
materials and we know our customers.
|
|
</p>
|
|
<ul
|
|
style={{
|
|
marginTop: "2rem",
|
|
display: "grid",
|
|
gridTemplateColumns: "1fr 1fr",
|
|
gap: "2rem",
|
|
}}
|
|
>
|
|
<li>
|
|
<strong
|
|
style={{
|
|
display: "block",
|
|
fontSize: "1.25rem",
|
|
color: "var(--primary)",
|
|
}}
|
|
>
|
|
34+ YEARS
|
|
</strong>
|
|
Experience in the Corpus Christi area.
|
|
</li>
|
|
<li>
|
|
<strong
|
|
style={{
|
|
display: "block",
|
|
fontSize: "1.25rem",
|
|
color: "var(--primary)",
|
|
}}
|
|
>
|
|
RELIABLE DELIVERY
|
|
</strong>
|
|
Dependable site drops when you need them.
|
|
</li>
|
|
<li>
|
|
<strong
|
|
style={{
|
|
display: "block",
|
|
fontSize: "1.25rem",
|
|
color: "var(--primary)",
|
|
}}
|
|
>
|
|
OPEN TO PUBLIC
|
|
</strong>
|
|
Serving both contractors and homeowners.
|
|
</li>
|
|
<li>
|
|
<strong
|
|
style={{
|
|
display: "block",
|
|
fontSize: "1.25rem",
|
|
color: "var(--primary)",
|
|
}}
|
|
>
|
|
LOCAL EXPERTISE
|
|
</strong>
|
|
Knowledgeable staff for all project types.
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div style={{ position: "relative" }}>
|
|
<Image
|
|
src="/images/delivery_truck_logistics_png_1773134721043.webp"
|
|
alt="Southern Masonry Supply Delivery Truck"
|
|
width={640}
|
|
height={640}
|
|
sizes="(max-width: 1024px) 100vw, 50vw"
|
|
quality={72}
|
|
style={{
|
|
borderRadius: "12px",
|
|
boxShadow: "var(--shadow-lg)",
|
|
width: "100%",
|
|
height: "auto",
|
|
}}
|
|
/>
|
|
<div className="hero-visual-note">RELIABLE ON-SITE DELIVERY</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Process Section */}
|
|
<section className="section reveal">
|
|
<div className="container">
|
|
<div
|
|
className="section-header"
|
|
style={{ textAlign: "center", marginBottom: "4rem" }}
|
|
>
|
|
<span className="eyebrow">OUR PROCESS</span>
|
|
<h2>How to Get Your Materials</h2>
|
|
</div>
|
|
<ProcessTimeline steps={processSteps} />
|
|
</div>
|
|
</section>
|
|
|
|
{/* Testimonials */}
|
|
<section className="section bg-soft">
|
|
<div className="container">
|
|
<MotionSection>
|
|
<div className="section-header" style={{ textAlign: "center", marginBottom: "3rem" }}>
|
|
<span className="eyebrow">WHAT CUSTOMERS SAY</span>
|
|
<h2>Trusted by Corpus Christi</h2>
|
|
</div>
|
|
</MotionSection>
|
|
</div>
|
|
<TestimonialsCarousel reviews={googleReviews} />
|
|
</section>
|
|
|
|
{/* FAQ Section */}
|
|
<section className="section reveal">
|
|
<div className="container">
|
|
<div
|
|
className="section-header"
|
|
style={{ textAlign: "center", marginBottom: "4rem" }}
|
|
>
|
|
<span className="eyebrow">COMMON QUESTIONS</span>
|
|
<h2>Frequently Asked Questions</h2>
|
|
</div>
|
|
<div
|
|
style={{
|
|
maxWidth: "800px",
|
|
margin: "0 auto",
|
|
display: "grid",
|
|
gap: "1rem",
|
|
}}
|
|
>
|
|
{faqs.map((faq) => (
|
|
<details
|
|
key={faq.question}
|
|
className="faq-item"
|
|
style={{
|
|
background: "white",
|
|
padding: "1.5rem",
|
|
borderRadius: "8px",
|
|
border: "1px solid var(--border)",
|
|
}}
|
|
>
|
|
<summary
|
|
style={{
|
|
fontWeight: "700",
|
|
cursor: "pointer",
|
|
listStyle: "none",
|
|
}}
|
|
>
|
|
{faq.question}
|
|
</summary>
|
|
<p style={{ marginTop: "1rem", color: "var(--text-muted)" }}>
|
|
{faq.answer}
|
|
</p>
|
|
</details>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Call to Action with inline form */}
|
|
<HomeCTASection />
|
|
</main>
|
|
);
|
|
}
|