Fertig
This commit is contained in:
491
app/page.tsx
Normal file
491
app/page.tsx
Normal file
@@ -0,0 +1,491 @@
|
||||
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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user