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