Fertig

app/contact/page.tsx

@@ -0,0 +1,155 @@
+import Image from "next/image";
+import Link from "next/link";
+import { Suspense } from "react";
+import { Breadcrumbs } from "@/components/breadcrumbs";
+import { ContactForm } from "@/components/contact-form";
+import { JsonLd } from "@/components/json-ld";
+import { deliveryHighlights, siteConfig } from "@/data/site-content";
+import {
+  breadcrumbSchema,
+  buildPageMetadata,
+} from "@/lib/seo";
+import { FadeUp, FadeIn } from "@/components/page-hero-motion";
+import { MotionSection } from "@/components/motion-section";
+
+export const metadata = buildPageMetadata({
+  title: "Contact Southern Masonry Supply in Corpus Christi, TX",
+  description:
+    "Reach Southern Masonry Supply at 5205 Agnes St, Corpus Christi, TX 78405 or call (361) 289-1074 during business hours.",
+  path: "/contact",
+  image: "/images/delivery_truck_logistics_png_1773134721043.png",
+});
+
+export default function ContactPage() {
+  const breadcrumbs = [
+    { name: "Home", path: "/" },
+    { name: "Contact", path: "/contact" },
+  ];
+
+  return (
+    <>
+      <JsonLd id="contact-breadcrumbs" data={breadcrumbSchema(breadcrumbs)} />
+
+      <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">Contact and delivery</span>
+            </FadeUp>
+            <FadeUp delay={0.15}>
+              <h1 style={{ marginTop: "1.25rem", marginBottom: "1.75rem" }}>
+                Reach the yard, request a quote, or line up a delivery.
+              </h1>
+            </FadeUp>
+            <FadeUp delay={0.25}>
+              <p className="hero-copy" style={{ marginBottom: "2rem" }}>
+                Share the material, quantity, and timing you need. We will get
+                back with the right next step.
+              </p>
+            </FadeUp>
+            <FadeUp delay={0.35}>
+              <div className="page-hero-meta">
+                <span>Quotes during business hours</span>
+                <span>Delivery thresholds made clear upfront</span>
+                <span>Material-first project guidance</span>
+              </div>
+            </FadeUp>
+          </div>
+
+          <FadeIn delay={0.2} className="page-hero-visual">
+            <Image
+              src="/images/delivery_truck_logistics_png_1773134721043.webp"
+              alt="Southern Masonry Supply delivery service"
+              fill
+              priority
+              sizes="(max-width: 1100px) 100vw, 40vw"
+              quality={72}
+              className="cover-image"
+            />
+            <span className="hero-visual-note">
+              Call first for stock and routing
+            </span>
+          </FadeIn>
+        </div>
+      </section>
+
+      <section className="section">
+        <div className="container contact-layout">
+          <div className="contact-card">
+            <div className="card-heading">
+              <span className="eyebrow">Send us a message</span>
+              <h2>Tell us about your project.</h2>
+            </div>
+            <Suspense fallback={<p>Loading contact form...</p>}>
+              <ContactForm />
+            </Suspense>
+          </div>
+
+          <div className="contact-sidebar">
+            <div className="map-card" style={{ padding: 0, overflow: "hidden", background: "transparent", border: "none" }}>
+              <div className="contact-map-embed">
+                <iframe
+                  src="https://www.google.com/maps?q=5205+Agnes+St,+Corpus+Christi,+TX+78405&output=embed"
+                  title="Southern Masonry Supply location"
+                  loading="lazy"
+                  referrerPolicy="no-referrer-when-downgrade"
+                  aria-label="Map showing Southern Masonry Supply at 5205 Agnes St, Corpus Christi TX"
+                />
+              </div>
+              <Link
+                href={siteConfig.mapUrl}
+                target="_blank"
+                rel="noreferrer"
+                className="button button-primary"
+                style={{ width: "100%", marginTop: "0", borderRadius: "0 0 12px 12px" }}
+              >
+                Open in Google Maps
+              </Link>
+            </div>
+
+            <div className="details-grid">
+              <article className="detail-card">
+                <h3>Visit the yard</h3>
+                <p>{siteConfig.address.street}</p>
+                <p>{siteConfig.address.cityStateZip}</p>
+                <a href={siteConfig.phoneHref} className="text-link">
+                  {siteConfig.phoneDisplay}
+                </a>
+              </article>
+
+              <article className="detail-card">
+                <h3>Hours</h3>
+                <ul className="detail-list">
+                  {siteConfig.hours.map((item) => (
+                    <li key={item.label}>
+                      <span>{item.label}</span>
+                      <strong>{item.value}</strong>
+                    </li>
+                  ))}
+                </ul>
+              </article>
+
+              <article className="detail-card detail-card-wide">
+                <h3>Delivery notes</h3>
+                <ul className="detail-list stacked">
+                  {deliveryHighlights.map((item) => (
+                    <li key={item.title}>
+                      <strong>{item.title}</strong>
+                      <span>{item.description}</span>
+                    </li>
+                  ))}
+                </ul>
+              </article>
+            </div>
+          </div>
+        </div>
+      </section>
+    </>
+  );
+}