diff --git a/public/css/style.css b/public/css/style.css index fdfbe22..f80025d 100644 --- a/public/css/style.css +++ b/public/css/style.css @@ -97,7 +97,8 @@ img { max-width: 100%; height: auto; display: block; } /* === Hero (matching flowautomate.ai: dark gradient bg, py-20 md:py-32) === */ .hero { - background: linear-gradient(to bottom right, #0d0d0d, #171717); + background: linear-gradient(to bottom right, rgba(13,13,13,0.88), rgba(23,23,23,0.92)), + url('/images/hero-house.jpg') center/cover no-repeat; color: #fff; padding: 5rem 0; position: relative; @@ -317,6 +318,10 @@ img { max-width: 100%; height: auto; display: block; } .benefit-card p { font-size: 0.875rem; color: #7b7b7b; line-height: 1.6; } /* === Situations === */ +.situations { + background: linear-gradient(to bottom right, rgba(13,13,13,0.92), rgba(23,23,23,0.94)), + url('/images/house-yard.jpg') center/cover no-repeat; +} .situations h2 { font-size: 1.875rem; margin-bottom: 0.75rem; text-align: center; letter-spacing: -0.025em; } .situations > .container > p { color: #9e9e9e; font-size: 1rem; margin-bottom: 2rem; text-align: center; } .situations__grid { @@ -422,10 +427,50 @@ img { max-width: 100%; height: auto; display: block; } line-height: 1.75; } +/* === Image Break (full-width photo with text overlay) === */ +.image-break { + position: relative; + overflow: hidden; +} +.image-break__img { + width: 100%; + height: 22rem; + object-fit: cover; + display: block; +} +.image-break--split { + display: grid; + grid-template-columns: 1fr 1fr; + align-items: center; + background: #f9fafb; +} +.image-break--split .image-break__img { + height: 100%; + min-height: 20rem; +} +.image-break--split .image-break__text { + padding: 3rem; +} +.image-break--split .image-break__text h2 { + font-size: 1.875rem; + color: #262626; + margin-bottom: 1rem; + letter-spacing: -0.025em; +} +.image-break--split .image-break__text p { + font-size: 1rem; + color: #7b7b7b; + line-height: 1.75; + margin-bottom: 1.5rem; +} +.image-break--split .image-break__text .btn { margin-top: 0.5rem; } + /* === CTA Banner === */ .cta-banner { text-align: center; padding: 5rem 0; + background: linear-gradient(to bottom right, rgba(13,13,13,0.9), rgba(23,23,23,0.92)), + url('/images/handshake.jpg') center/cover no-repeat; } .cta-banner h2 { font-size: 2.25rem; margin-bottom: 1rem; letter-spacing: -0.025em; } .cta-banner p { color: #9e9e9e; font-size: 1.125rem; margin-bottom: 2rem; } @@ -497,6 +542,10 @@ img { max-width: 100%; height: auto; display: block; } .footer__grid { grid-template-columns: 1fr; } .footer__bottom { flex-direction: column; text-align: center; } .trust-bar .container { gap: 1.25rem; } + .image-break--split { grid-template-columns: 1fr; } + .image-break--split .image-break__img { min-height: 14rem; } + .image-break--split .image-break__text { padding: 2rem 1rem; } + .image-break__img { height: 14rem; } } /* === Utility === */ diff --git a/public/images/handshake.jpg b/public/images/handshake.jpg new file mode 100644 index 0000000..78e629f Binary files /dev/null and b/public/images/handshake.jpg differ diff --git a/public/images/happy-keys.jpg b/public/images/happy-keys.jpg new file mode 100644 index 0000000..08d5d7a Binary files /dev/null and b/public/images/happy-keys.jpg differ diff --git a/public/images/hero-house.jpg b/public/images/hero-house.jpg new file mode 100644 index 0000000..7a0b06e Binary files /dev/null and b/public/images/hero-house.jpg differ diff --git a/public/images/house-yard.jpg b/public/images/house-yard.jpg new file mode 100644 index 0000000..1e2e859 Binary files /dev/null and b/public/images/house-yard.jpg differ diff --git a/public/images/neighborhood.jpg b/public/images/neighborhood.jpg new file mode 100644 index 0000000..c640a98 Binary files /dev/null and b/public/images/neighborhood.jpg differ diff --git a/public/index.html b/public/index.html index 6e20d62..dc84dae 100644 --- a/public/index.html +++ b/public/index.html @@ -277,6 +277,16 @@ + +
+ House keys representing a successful home sale +
+

Your Keys to a Fresh Start

+

Selling your house shouldn't be stressful. We handle everything — from paperwork to closing — so you can move on with peace of mind. No showings, no strangers walking through your home, no waiting months for a buyer.

+ Get My Cash Offer +
+
+
@@ -412,6 +422,11 @@
+ +
+ Suburban home exterior in a family neighborhood +
+