admin/houses-flowautomate
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add stock photos throughout the site

Browse Source 
- Hero: suburban house background with dark overlay
- Split section: house keys + CTA between Steps and Benefits
- Situations: house with yard as dark-overlay background
- Full-width break: neighborhood home between Testimonials and FAQ
- CTA banner: handshake background with dark overlay

All images from Unsplash (free, no attribution required).

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Claude
2026-02-19 05:48:19 +01:00
parent 206f2e2a08
commit 057e40fc11
7 changed files with 65 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
public/css/style.css
View File

@@ -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 === */