feat: Implement initial home and contact pages with global styling.
This commit is contained in:
parent
0fbfae29d9
commit
3ef4f6b2ad
|
|
@ -4,7 +4,7 @@ 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 { deliveryHighlights, processSteps, siteConfig } from "@/data/site-content";
|
||||
import {
|
||||
breadcrumbSchema,
|
||||
buildPageMetadata,
|
||||
|
|
@ -81,14 +81,31 @@ export default function ContactPage() {
|
|||
|
||||
<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 style={{ display: "flex", flexDirection: "column", gap: "7rem" }}>
|
||||
<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-next-steps">
|
||||
<span className="eyebrow">What happens next</span>
|
||||
<div className="contact-steps-list">
|
||||
{processSteps.slice(0, 3).map((s) => (
|
||||
<div key={s.step} className="contact-step-item">
|
||||
<span className="contact-step-num">{s.step}</span>
|
||||
<div>
|
||||
<strong>{s.title}</strong>
|
||||
<p>{s.description}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<Suspense fallback={<p>Loading contact form...</p>}>
|
||||
<ContactForm />
|
||||
</Suspense>
|
||||
</div>
|
||||
|
||||
<div className="contact-sidebar">
|
||||
|
|
|
|||
190
app/globals.css
190
app/globals.css
|
|
@ -121,11 +121,11 @@ img {
|
|||
}
|
||||
|
||||
.section {
|
||||
padding: 5rem 0;
|
||||
padding: 3rem 0;
|
||||
}
|
||||
|
||||
.section-tight {
|
||||
padding: 3rem 0;
|
||||
padding: 2rem 0;
|
||||
}
|
||||
|
||||
.section-soft {
|
||||
|
|
@ -149,15 +149,15 @@ img {
|
|||
|
||||
/* Typography Scale */
|
||||
h1 {
|
||||
font-size: clamp(2.5rem, 5vw, 4rem);
|
||||
font-size: clamp(2rem, 4vw, 3.25rem);
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: clamp(2rem, 4vw, 2.75rem);
|
||||
font-size: clamp(1.75rem, 3.5vw, 2.5rem);
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: clamp(1.5rem, 3vw, 1.75rem);
|
||||
font-size: clamp(1.25rem, 2.5vw, 1.5rem);
|
||||
}
|
||||
|
||||
p {
|
||||
|
|
@ -170,14 +170,14 @@ p {
|
|||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0.875rem 2.25rem;
|
||||
padding: 0.55rem 1.25rem;
|
||||
font-weight: 700;
|
||||
border-radius: var(--radius);
|
||||
transition: var(--transition);
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
gap: 0.5rem;
|
||||
font-size: 1rem;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.button-primary {
|
||||
|
|
@ -227,8 +227,8 @@ main {
|
|||
.site-utility-bar {
|
||||
background: var(--secondary-dark);
|
||||
color: var(--white);
|
||||
padding: 0.625rem 0;
|
||||
font-size: 0.8125rem;
|
||||
padding: 0.2rem 0;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
|
|
@ -255,7 +255,7 @@ main {
|
|||
/* Header */
|
||||
.site-header {
|
||||
background: var(--white);
|
||||
padding: 1.25rem 0;
|
||||
padding: 0.4rem 0;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
|
|
@ -305,7 +305,7 @@ main {
|
|||
clip-path: none;
|
||||
border-radius: 0;
|
||||
overflow: visible;
|
||||
width: clamp(220px, 24vw, 360px);
|
||||
width: clamp(140px, 15vw, 220px);
|
||||
}
|
||||
|
||||
.brand-logo {
|
||||
|
|
@ -336,7 +336,7 @@ main {
|
|||
font-family: 'Comfortaa', 'Nunito', sans-serif;
|
||||
font-weight: 700;
|
||||
color: #1a8c8c;
|
||||
font-size: clamp(1.05rem, 2.3vw, 1.65rem);
|
||||
font-size: clamp(0.95rem, 2vw, 1.4rem);
|
||||
line-height: 1;
|
||||
white-space: nowrap;
|
||||
letter-spacing: 0px;
|
||||
|
|
@ -378,7 +378,7 @@ main {
|
|||
|
||||
.main-nav {
|
||||
display: flex;
|
||||
gap: 2.25rem;
|
||||
gap: 1.75rem;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
|
|
@ -712,19 +712,20 @@ main {
|
|||
.contact-layout {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 400px;
|
||||
gap: 4rem;
|
||||
gap: 2.5rem;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.contact-card {
|
||||
background: white;
|
||||
padding: 3rem;
|
||||
padding: 2rem;
|
||||
border-radius: 12px;
|
||||
border: 1px solid var(--border);
|
||||
box-shadow: var(--shadow-xl);
|
||||
}
|
||||
|
||||
.card-heading {
|
||||
margin-bottom: 3rem;
|
||||
margin-bottom: 1.25rem;
|
||||
}
|
||||
|
||||
.contact-sidebar {
|
||||
|
|
@ -773,6 +774,59 @@ main {
|
|||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.contact-next-steps {
|
||||
background: var(--bg-soft);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 12px;
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.contact-next-steps .eyebrow {
|
||||
display: block;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.contact-steps-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.875rem;
|
||||
}
|
||||
|
||||
.contact-step-item {
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.contact-step-num {
|
||||
flex-shrink: 0;
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
border-radius: 50%;
|
||||
background: rgba(244, 127, 32, 0.12);
|
||||
color: var(--primary);
|
||||
font-size: 0.7rem;
|
||||
font-weight: 800;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: 0.15rem;
|
||||
}
|
||||
|
||||
.contact-step-item strong {
|
||||
display: block;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 0.2rem;
|
||||
}
|
||||
|
||||
.contact-step-item p {
|
||||
font-size: 0.8125rem;
|
||||
color: var(--text-muted);
|
||||
line-height: 1.5;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.detail-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
|
|
@ -796,19 +850,19 @@ main {
|
|||
/* --- Forms --- */
|
||||
.form-grid {
|
||||
display: grid;
|
||||
gap: 2rem;
|
||||
gap: 1.25rem;
|
||||
}
|
||||
|
||||
.form-row {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 2rem;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.field {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.field label {
|
||||
|
|
@ -822,7 +876,7 @@ main {
|
|||
.field input,
|
||||
.field select,
|
||||
.field textarea {
|
||||
padding: 1rem;
|
||||
padding: 0.75rem;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
font-family: inherit;
|
||||
|
|
@ -839,7 +893,7 @@ main {
|
|||
}
|
||||
|
||||
.field textarea {
|
||||
min-height: 150px;
|
||||
min-height: 100px;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
|
|
@ -884,7 +938,7 @@ main {
|
|||
|
||||
/* --- Page Heroes --- */
|
||||
.page-hero {
|
||||
padding: 6rem 0 5rem;
|
||||
padding: 3rem 0 2.5rem;
|
||||
background-color: var(--bg-contrast);
|
||||
color: white;
|
||||
position: relative;
|
||||
|
|
@ -957,16 +1011,16 @@ main {
|
|||
}
|
||||
|
||||
.page-hero-copy h1 {
|
||||
font-size: clamp(2.5rem, 4vw, 3.5rem);
|
||||
font-size: clamp(2rem, 4vw, 3rem);
|
||||
line-height: 1.1;
|
||||
margin-bottom: 1.5rem;
|
||||
margin-bottom: 1.25rem;
|
||||
}
|
||||
|
||||
.hero-copy {
|
||||
font-size: 1.25rem;
|
||||
font-size: 1.125rem;
|
||||
opacity: 0.9;
|
||||
max-width: 600px;
|
||||
margin-bottom: 2rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.page-hero-meta {
|
||||
|
|
@ -990,7 +1044,7 @@ main {
|
|||
|
||||
.page-hero-visual {
|
||||
position: relative;
|
||||
height: 450px;
|
||||
height: 380px;
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
box-shadow: var(--shadow-2xl);
|
||||
|
|
@ -1026,14 +1080,14 @@ main {
|
|||
|
||||
/* --- Material Catalog --- */
|
||||
.catalog-intro {
|
||||
margin-bottom: 4rem;
|
||||
margin-bottom: 2rem;
|
||||
max-width: 800px;
|
||||
}
|
||||
|
||||
.material-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
||||
gap: 2.5rem;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.material-card {
|
||||
|
|
@ -1046,7 +1100,7 @@ main {
|
|||
|
||||
.material-card-media {
|
||||
position: relative;
|
||||
height: 240px;
|
||||
height: 180px;
|
||||
background: #f8f9fa;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
|
@ -1060,7 +1114,12 @@ main {
|
|||
}
|
||||
|
||||
.material-card-content {
|
||||
padding: 2rem;
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.material-card-content p {
|
||||
font-size: 0.8125rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.material-card-tag {
|
||||
|
|
@ -1074,8 +1133,8 @@ main {
|
|||
}
|
||||
|
||||
.material-card h3 {
|
||||
font-size: 1.25rem;
|
||||
margin-bottom: 1rem;
|
||||
font-size: 1rem;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.material-card-meta {
|
||||
|
|
@ -1273,7 +1332,7 @@ main {
|
|||
|
||||
.home-hero {
|
||||
position: relative;
|
||||
padding: 8rem 0;
|
||||
padding: 6rem 0;
|
||||
background: var(--secondary);
|
||||
color: var(--white);
|
||||
overflow: hidden;
|
||||
|
|
@ -1298,8 +1357,8 @@ main {
|
|||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
margin-top: 1.5rem;
|
||||
margin-bottom: 2.5rem;
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 1.25rem;
|
||||
padding: 0.5rem 0.25rem;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
|
@ -1338,12 +1397,12 @@ main {
|
|||
/* Service Band */
|
||||
.quick-service-band {
|
||||
background: var(--primary);
|
||||
padding: 2.5rem 0;
|
||||
padding: 1.25rem 0;
|
||||
color: white;
|
||||
box-shadow: 0 10px 30px rgba(244, 127, 32, 0.2);
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
margin-top: -3rem;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.quick-service-grid {
|
||||
|
|
@ -1491,7 +1550,7 @@ main {
|
|||
.home-hero {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 60%) minmax(0, 40%);
|
||||
min-height: 90vh;
|
||||
min-height: 48vh;
|
||||
overflow: hidden;
|
||||
background: var(--secondary);
|
||||
padding: 0 !important;
|
||||
|
|
@ -1502,8 +1561,8 @@ main {
|
|||
.home-hero-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 6rem max(2rem, calc((100vw - 1280px) / 2 + 1.5rem));
|
||||
padding-right: 6rem;
|
||||
padding: 2.5rem max(2rem, calc((100vw - 1280px) / 2 + 1.5rem));
|
||||
padding-right: 3.5rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
|
|
@ -1618,10 +1677,10 @@ main {
|
|||
/* ── Floating video card ── */
|
||||
.hc-video-card {
|
||||
position: absolute;
|
||||
bottom: 3rem;
|
||||
right: 3rem;
|
||||
bottom: 2rem;
|
||||
right: 2rem;
|
||||
z-index: 20;
|
||||
width: clamp(280px, 24vw, 390px);
|
||||
width: clamp(240px, 20vw, 320px);
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35), 0 0 0 1.5px rgba(255, 255, 255, 0.15);
|
||||
|
|
@ -1697,16 +1756,17 @@ main {
|
|||
|
||||
.home-hero-copy h1 {
|
||||
color: var(--white);
|
||||
font-size: clamp(2.5rem, 3.5vw, 4rem);
|
||||
line-height: 1.1;
|
||||
margin-bottom: 1.5rem;
|
||||
font-size: clamp(2rem, 4vw, 3.5rem);
|
||||
line-height: 1.05;
|
||||
font-weight: 800;
|
||||
margin-bottom: 1.25rem;
|
||||
}
|
||||
|
||||
.home-hero-copy p {
|
||||
color: rgba(224, 225, 221, 0.85);
|
||||
font-size: 1.2rem;
|
||||
line-height: 1.6;
|
||||
font-size: clamp(1rem, 2vw, 1.15rem);
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
margin-bottom: 2.5rem;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.hero-actions {
|
||||
|
|
@ -1985,14 +2045,14 @@ main {
|
|||
.about-story {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 6rem;
|
||||
gap: 4rem;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.about-story-copy {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 3rem;
|
||||
gap: 1.75rem;
|
||||
}
|
||||
|
||||
.story-block h2 {
|
||||
|
|
@ -2316,7 +2376,7 @@ main {
|
|||
|
||||
.stats-band {
|
||||
background: var(--secondary);
|
||||
padding: 3.5rem 0;
|
||||
padding: 2.5rem 0;
|
||||
border-top: 3px solid var(--primary);
|
||||
}
|
||||
|
||||
|
|
@ -2534,28 +2594,28 @@ main {
|
|||
|
||||
.home-cta-section {
|
||||
background: var(--secondary);
|
||||
padding: 6rem 0;
|
||||
padding: 3.5rem 0;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.home-cta-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 5rem;
|
||||
gap: 3rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.home-cta-copy h2 {
|
||||
color: white;
|
||||
font-size: clamp(1.75rem, 3vw, 2.75rem);
|
||||
margin-bottom: 1.25rem;
|
||||
font-size: clamp(1.5rem, 3vw, 2.25rem);
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.home-cta-copy>p {
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
font-size: 1.0625rem;
|
||||
line-height: 1.7;
|
||||
margin-bottom: 2rem;
|
||||
font-size: 1rem;
|
||||
line-height: 1.6;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.home-cta-contact-items {
|
||||
|
|
@ -2598,7 +2658,7 @@ a.home-cta-contact-item:hover {
|
|||
.home-cta-form-card {
|
||||
background: white;
|
||||
border-radius: 16px;
|
||||
padding: 2.5rem;
|
||||
padding: 2rem;
|
||||
box-shadow: 0 24px 48px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
|
|
@ -2712,15 +2772,15 @@ a.home-cta-contact-item:hover {
|
|||
|
||||
.inventory-overview-media {
|
||||
position: relative;
|
||||
min-height: 280px;
|
||||
min-height: 200px;
|
||||
}
|
||||
|
||||
.inventory-overview-copy {
|
||||
padding: 2rem;
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.inventory-overview-copy h2 {
|
||||
margin-bottom: 1rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.inventory-chip-list {
|
||||
|
|
@ -2860,7 +2920,7 @@ a.home-cta-contact-item:hover {
|
|||
}
|
||||
|
||||
.inventory-overview-media {
|
||||
min-height: 220px;
|
||||
min-height: 160px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
18
app/page.tsx
18
app/page.tsx
|
|
@ -147,7 +147,7 @@ export default function Home() {
|
|||
<div
|
||||
style={{
|
||||
position: "relative",
|
||||
height: "240px",
|
||||
height: "180px",
|
||||
background: "#f1f3f5",
|
||||
}}
|
||||
>
|
||||
|
|
@ -160,8 +160,8 @@ export default function Home() {
|
|||
className="cover-image"
|
||||
/>
|
||||
</div>
|
||||
<div style={{ padding: "2rem" }}>
|
||||
<h3 style={{ marginBottom: "1rem" }}>Masonry Supplies</h3>
|
||||
<div style={{ padding: "1.25rem" }}>
|
||||
<h3 style={{ marginBottom: "0.5rem" }}>Masonry Supplies</h3>
|
||||
<p>
|
||||
Brick, concrete blocks, mortar, and lintels for structural and
|
||||
aesthetic projects.
|
||||
|
|
@ -186,7 +186,7 @@ export default function Home() {
|
|||
<div
|
||||
style={{
|
||||
position: "relative",
|
||||
height: "240px",
|
||||
height: "180px",
|
||||
background: "#f1f3f5",
|
||||
}}
|
||||
>
|
||||
|
|
@ -199,8 +199,8 @@ export default function Home() {
|
|||
className="cover-image"
|
||||
/>
|
||||
</div>
|
||||
<div style={{ padding: "2rem" }}>
|
||||
<h3 style={{ marginBottom: "1rem" }}>Natural Stone</h3>
|
||||
<div style={{ padding: "1.25rem" }}>
|
||||
<h3 style={{ marginBottom: "0.5rem" }}>Natural Stone</h3>
|
||||
<p>
|
||||
Flagstone, limestone, and decorative rock to elevate your
|
||||
landscape and architecture.
|
||||
|
|
@ -225,7 +225,7 @@ export default function Home() {
|
|||
<div
|
||||
style={{
|
||||
position: "relative",
|
||||
height: "240px",
|
||||
height: "180px",
|
||||
background: "#f1f3f5",
|
||||
}}
|
||||
>
|
||||
|
|
@ -238,8 +238,8 @@ export default function Home() {
|
|||
className="cover-image"
|
||||
/>
|
||||
</div>
|
||||
<div style={{ padding: "2rem" }}>
|
||||
<h3 style={{ marginBottom: "1rem" }}>Tools & Materials</h3>
|
||||
<div style={{ padding: "1.25rem" }}>
|
||||
<h3 style={{ marginBottom: "0.5rem" }}>Tools & Materials</h3>
|
||||
<p>
|
||||
High-quality masonry tools, expansion joints, and sealers to
|
||||
get the job done right.
|
||||
|
|
|
|||
Loading…
Reference in New Issue