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

Restyle site to match flowautomate.ai design system

Browse Source 
Replace Navy (#1B3A5C) / Gold (#C9A94E) with flowautomate.ai's
red (#FF1F1F) / dark neutral (#171717, #262626) theme. Add Inter +
Poppins Google Fonts, update logo, email templates, and CSP headers.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Claude
2026-02-19 05:24:27 +01:00
parent 85e7dc8e0c
commit 3593acd338
6 changed files with 300 additions and 246 deletions
Download Patch File Download Diff File Expand all files Collapse all files

484
public/css/style.css
View File

@@ -1,194 +1,230 @@
/* === Fonts (matching flowautomate.ai: Inter body + Poppins headings) === */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Poppins:wght@400;500;600;700;800&display=swap');
/* === Reset & Base === */ /* === Reset & Base === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; } html { scroll-behavior: smooth; }
body { body {
font-family: Arial, Helvetica, sans-serif; font-family: 'Inter', sans-serif;
color: #333; color: #262626;
background: #fff; background: #fff;
line-height: 1.6; line-height: 1.5;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-webkit-tap-highlight-color: transparent;
} }
a { color: #C9A94E; text-decoration: none; } h1, h2, h3, h4, h5, h6 {
a:hover { text-decoration: underline; } font-family: 'Poppins', sans-serif;
img { max-width: 100%; height: auto; } font-weight: 600;
}
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
/* === Layout === */ /* === Layout (matching flowautomate.ai: max-width 80rem = 1280px, px-4 = 1rem) === */
.container { max-width: 1120px; margin: 0 auto; padding: 0 20px; } .container { max-width: 80rem; margin: 0 auto; padding: 0 1rem; }
.section { padding: 64px 0; } .section { padding: 4rem 0; }
.section--navy { background: #1B3A5C; color: #fff; } .section--dark {
.section--light { background: #F8F9FA; } background: linear-gradient(to bottom right, #171717, #262626);
color: #fff;
}
.section--light { background: #f9fafb; }
/* === Header === */ /* === Header === */
.header { .header {
position: sticky; position: sticky;
top: 0; top: 0;
z-index: 100; z-index: 50;
background: #fff; background: rgba(255,255,255,0.97);
border-bottom: 1px solid #e8e8e8; backdrop-filter: blur(8px);
padding: 12px 0; border-bottom: 1px solid #e5e7eb;
padding: 0;
} }
.header .container { .header .container {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
gap: 16px; height: 4rem;
gap: 1rem;
} }
.header__logo { height: 40px; width: auto; } .header__logo { height: 2rem; width: auto; }
.header__right { display: flex; align-items: center; gap: 16px; } .header__right { display: flex; align-items: center; gap: 1.5rem; }
.header__phone { .header__phone {
color: #1B3A5C; color: #262626;
font-weight: 700; font-weight: 500;
font-size: 15px; font-size: 0.875rem;
white-space: nowrap; white-space: nowrap;
display: flex;
align-items: center;
gap: 0.375rem;
transition: color 0.2s;
} }
.header__phone:hover { text-decoration: none; color: #C9A94E; } .header__phone:hover { color: #FF1F1F; }
.header__phone svg { fill: #FF1F1F; }
/* === Buttons === */ /* === Buttons (matching flowautomate.ai: primary-600 bg, rounded-md, px-6 py-3, font-medium) === */
.btn { .btn {
display: inline-block; display: inline-flex;
background: #C9A94E; align-items: center;
justify-content: center;
background: #FF1F1F;
color: #fff; color: #fff;
font-weight: 700; font-weight: 500;
font-size: 15px; font-size: 0.875rem;
padding: 12px 28px; padding: 0.75rem 1.5rem;
border: none; border: none;
border-radius: 6px; border-radius: 0.375rem;
cursor: pointer; cursor: pointer;
transition: background 0.2s, transform 0.1s; transition: all 0.2s cubic-bezier(.4,0,.2,1);
text-align: center; text-align: center;
white-space: nowrap; white-space: nowrap;
font-family: 'Inter', sans-serif;
} }
.btn:hover { background: #b8982f; text-decoration: none; transform: translateY(-1px); } .btn:hover { background: #E60000; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(255,31,31,0.3); }
.btn:active { transform: translateY(0); } .btn:active { transform: translateY(0); }
.btn--lg { padding: 16px 36px; font-size: 17px; } .btn--lg { padding: 1rem 2rem; font-size: 1rem; }
.btn--outline { .btn--outline {
background: transparent; background: transparent;
border: 2px solid #C9A94E; border: 2px solid #FF1F1F;
color: #C9A94E; color: #FF1F1F;
} }
.btn--outline:hover { background: #C9A94E; color: #fff; } .btn--outline:hover { background: #FF1F1F; color: #fff; }
.btn--dark {
background: #262626;
color: #fff;
}
.btn--dark:hover { background: #434343; box-shadow: 0 4px 12px rgba(38,38,38,0.3); }
.btn--block { display: block; width: 100%; } .btn--block { display: block; width: 100%; }
/* === Hero === */ /* === Hero (matching flowautomate.ai: dark gradient bg, py-20 md:py-32) === */
.hero { .hero {
background: linear-gradient(135deg, #1B3A5C 0%, #0f2540 100%); background: linear-gradient(to bottom right, #0d0d0d, #171717);
color: #fff; color: #fff;
padding: 72px 0 80px; padding: 5rem 0;
position: relative;
overflow: hidden;
} }
.hero .container { .hero .container {
display: grid; display: grid;
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
gap: 48px; gap: 3rem;
align-items: center; align-items: center;
} }
.hero__content h1 { .hero__content h1 {
font-size: 42px; font-size: 3rem;
font-weight: 800; font-weight: 700;
line-height: 1.15; line-height: 1;
margin-bottom: 16px; margin-bottom: 1rem;
letter-spacing: -0.025em;
}
.hero__content h1 span {
background: linear-gradient(to right, #FF1F1F, #FF3E3E);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
} }
.hero__content h1 span { color: #C9A94E; }
.hero__content p { .hero__content p {
font-size: 18px; font-size: 1.125rem;
color: #c8d6e5; color: #9e9e9e;
margin-bottom: 24px; margin-bottom: 1.5rem;
line-height: 1.7; line-height: 1.75;
} }
.hero__badges { .hero__badges {
display: flex; display: flex;
gap: 24px; gap: 1.5rem;
margin-top: 8px; margin-top: 1.5rem;
} }
.hero__badge { .hero__badge {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 6px; gap: 0.375rem;
font-size: 13px; font-size: 0.875rem;
color: #a0b4c8; color: #9e9e9e;
} }
.hero__badge svg { width: 16px; height: 16px; fill: #C9A94E; flex-shrink: 0; } .hero__badge svg { width: 1rem; height: 1rem; fill: #FF1F1F; flex-shrink: 0; }
/* === Lead Form === */ /* === Lead Form === */
.lead-form { .lead-form {
background: #fff; background: #fff;
border-radius: 12px; border-radius: 0.5rem;
padding: 32px; padding: 2rem;
box-shadow: 0 8px 32px rgba(0,0,0,0.2); box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);
} }
.lead-form h2 { .lead-form h2 {
color: #1B3A5C; color: #262626;
font-size: 22px; font-size: 1.25rem;
margin-bottom: 20px; margin-bottom: 1.25rem;
text-align: center; text-align: center;
} }
.form-group { margin-bottom: 14px; } .form-group { margin-bottom: 0.875rem; }
.form-group label { .form-group label {
display: block; display: block;
font-size: 13px; font-size: 0.875rem;
font-weight: 600; font-weight: 500;
color: #1B3A5C; color: #262626;
margin-bottom: 4px; margin-bottom: 0.25rem;
} }
.form-group input, .form-group input,
.form-group select { .form-group select {
width: 100%; width: 100%;
padding: 11px 14px; padding: 0.625rem 0.875rem;
font-size: 15px; font-size: 0.875rem;
border: 1px solid #d0d5dd; border: 1px solid #d1d5db;
border-radius: 6px; border-radius: 0.375rem;
font-family: inherit; font-family: 'Inter', sans-serif;
background: #fff; background: #fff;
transition: border-color 0.2s; color: #262626;
transition: all 0.2s;
} }
.form-group input:focus, .form-group input:focus,
.form-group select:focus { .form-group select:focus {
outline: none; outline: none;
border-color: #C9A94E; border-color: #FF1F1F;
box-shadow: 0 0 0 3px rgba(201,169,78,0.15); box-shadow: 0 0 0 2px rgba(255,31,31,0.15);
} }
.form-group input.error, .form-group input.error,
.form-group select.error { .form-group select.error {
border-color: #e74c3c; border-color: #dc2626;
} }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .form-group input::placeholder { color: #9ca3af; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.form-consent { .form-consent {
display: flex; display: flex;
align-items: flex-start; align-items: flex-start;
gap: 8px; gap: 0.5rem;
margin: 16px 0; margin: 1rem 0;
font-size: 12px; font-size: 0.75rem;
color: #6C757D; color: #7b7b7b;
line-height: 1.5; line-height: 1.5;
} }
.form-consent input[type="checkbox"] { .form-consent input[type="checkbox"] {
margin-top: 2px; margin-top: 2px;
width: 16px; width: 1rem;
height: 16px; height: 1rem;
flex-shrink: 0; flex-shrink: 0;
accent-color: #C9A94E; accent-color: #FF1F1F;
} }
.form-note { .form-note {
text-align: center; text-align: center;
font-size: 13px; font-size: 0.75rem;
color: #6C757D; color: #7b7b7b;
margin-top: 12px; margin-top: 0.75rem;
} }
.form-note svg { width: 14px; height: 14px; fill: #C9A94E; vertical-align: -2px; margin-right: 4px; } .form-note svg { width: 0.875rem; height: 0.875rem; fill: #22c55e; vertical-align: -2px; margin-right: 0.25rem; }
.form-success { .form-success {
text-align: center; text-align: center;
padding: 24px 0; padding: 1.5rem 0;
display: none; display: none;
} }
.form-success svg { width: 48px; height: 48px; fill: #27ae60; } .form-success svg { width: 3rem; height: 3rem; fill: #22c55e; margin: 0 auto; }
.form-success h3 { color: #1B3A5C; margin: 12px 0 8px; font-size: 20px; } .form-success h3 { color: #262626; margin: 0.75rem 0 0.5rem; font-size: 1.25rem; }
.form-success p { color: #6C757D; font-size: 14px; } .form-success p { color: #7b7b7b; font-size: 0.875rem; }
.form-error { .form-error {
background: #fdf0ef; background: #fee2e2;
color: #e74c3c; color: #dc2626;
padding: 10px 14px; padding: 0.625rem 0.875rem;
border-radius: 6px; border-radius: 0.375rem;
font-size: 13px; font-size: 0.875rem;
margin-bottom: 14px; margin-bottom: 0.875rem;
display: none; display: none;
} }
.hp-field { position: absolute; left: -9999px; } .hp-field { position: absolute; left: -9999px; }
@@ -196,168 +232,181 @@ img { max-width: 100%; height: auto; }
/* === Trust Bar === */ /* === Trust Bar === */
.trust-bar { .trust-bar {
background: #fff; background: #fff;
border-bottom: 1px solid #e8e8e8; border-bottom: 1px solid #e5e7eb;
padding: 20px 0; padding: 1.25rem 0;
} }
.trust-bar .container { .trust-bar .container {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
gap: 40px; gap: 2.5rem;
flex-wrap: wrap; flex-wrap: wrap;
} }
.trust-item { .trust-item {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 8px; gap: 0.5rem;
font-size: 14px; font-size: 0.875rem;
font-weight: 600; font-weight: 500;
color: #1B3A5C; color: #555;
} }
.trust-item svg { width: 20px; height: 20px; fill: #C9A94E; flex-shrink: 0; } .trust-item svg { width: 1.25rem; height: 1.25rem; fill: #FF1F1F; flex-shrink: 0; }
/* === Steps === */ /* === Steps === */
.steps { text-align: center; } .steps { text-align: center; }
.steps h2 { font-size: 32px; color: #1B3A5C; margin-bottom: 48px; } .steps h2 {
font-size: 1.875rem;
color: #262626;
margin-bottom: 3rem;
letter-spacing: -0.025em;
}
.steps__grid { .steps__grid {
display: grid; display: grid;
grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(3, 1fr);
gap: 36px; gap: 2rem;
} }
.step { padding: 0 12px; } .step { padding: 0 0.75rem; }
.step__number { .step__number {
width: 56px; width: 3.5rem;
height: 56px; height: 3.5rem;
border-radius: 50%; border-radius: 9999px;
background: #C9A94E; background: linear-gradient(135deg, #FF1F1F, #FF3E3E);
color: #fff; color: #fff;
font-size: 24px; font-size: 1.25rem;
font-weight: 800; font-weight: 700;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
margin: 0 auto 16px; margin: 0 auto 1rem;
font-family: 'Poppins', sans-serif;
} }
.step h3 { font-size: 18px; color: #1B3A5C; margin-bottom: 8px; } .step h3 { font-size: 1.125rem; color: #262626; margin-bottom: 0.5rem; }
.step p { font-size: 14px; color: #6C757D; } .step p { font-size: 0.875rem; color: #7b7b7b; line-height: 1.6; }
/* === Benefits Cards === */ /* === Benefits Cards (matching flowautomate.ai: rounded-lg, shadow-md, p-6, hover:shadow-lg) === */
.benefits h2 { font-size: 32px; color: #1B3A5C; text-align: center; margin-bottom: 48px; } .benefits h2 { font-size: 1.875rem; color: #262626; text-align: center; margin-bottom: 3rem; letter-spacing: -0.025em; }
.benefits__grid { .benefits__grid {
display: grid; display: grid;
grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(3, 1fr);
gap: 24px; gap: 1.5rem;
} }
.benefit-card { .benefit-card {
background: #fff; background: #fff;
border-radius: 12px; border-radius: 0.5rem;
padding: 28px 24px; padding: 1.5rem;
box-shadow: 0 2px 12px rgba(0,0,0,0.06); border: 1px solid #e5e7eb;
transition: transform 0.2s, box-shadow 0.2s; transition: all 0.2s cubic-bezier(.4,0,.2,1);
}
.benefit-card:hover {
transform: translateY(-4px);
box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1);
border-color: transparent;
} }
.benefit-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,0.1); }
.benefit-card__icon { .benefit-card__icon {
width: 44px; width: 2.5rem;
height: 44px; height: 2.5rem;
background: rgba(201,169,78,0.12); background: #FFE1E1;
border-radius: 10px; border-radius: 0.5rem;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
margin-bottom: 14px; margin-bottom: 1rem;
} }
.benefit-card__icon svg { width: 22px; height: 22px; fill: #C9A94E; } .benefit-card__icon svg { width: 1.25rem; height: 1.25rem; fill: #FF1F1F; }
.benefit-card h3 { font-size: 17px; color: #1B3A5C; margin-bottom: 6px; } .benefit-card h3 { font-size: 1rem; color: #262626; margin-bottom: 0.5rem; }
.benefit-card p { font-size: 14px; color: #6C757D; line-height: 1.6; } .benefit-card p { font-size: 0.875rem; color: #7b7b7b; line-height: 1.6; }
/* === Situations === */ /* === Situations === */
.situations h2 { font-size: 32px; margin-bottom: 12px; } .situations h2 { font-size: 1.875rem; margin-bottom: 0.75rem; text-align: center; letter-spacing: -0.025em; }
.situations > .container > p { color: #c8d6e5; font-size: 16px; margin-bottom: 36px; text-align: center; } .situations > .container > p { color: #9e9e9e; font-size: 1rem; margin-bottom: 2rem; text-align: center; }
.situations h2 { text-align: center; }
.situations__grid { .situations__grid {
display: grid; display: grid;
grid-template-columns: repeat(2, 1fr); grid-template-columns: repeat(2, 1fr);
gap: 16px; gap: 1rem;
max-width: 700px; max-width: 44rem;
margin: 0 auto; margin: 0 auto;
} }
.situation-item { .situation-item {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 10px; gap: 0.625rem;
font-size: 15px; font-size: 0.9375rem;
padding: 12px 16px; padding: 0.875rem 1rem;
background: rgba(255,255,255,0.08); background: rgba(255,255,255,0.06);
border-radius: 8px; border-radius: 0.5rem;
border-left: 3px solid #C9A94E; border-left: 3px solid #FF1F1F;
transition: background 0.2s;
} }
.situation-item svg { width: 18px; height: 18px; fill: #C9A94E; flex-shrink: 0; } .situation-item:hover { background: rgba(255,255,255,0.1); }
.situation-item svg { width: 1.125rem; height: 1.125rem; fill: #FF1F1F; flex-shrink: 0; }
/* === Testimonials === */ /* === Testimonials === */
.testimonials h2 { font-size: 32px; color: #1B3A5C; text-align: center; margin-bottom: 48px; } .testimonials h2 { font-size: 1.875rem; color: #262626; text-align: center; margin-bottom: 3rem; letter-spacing: -0.025em; }
.testimonials__grid { .testimonials__grid {
display: grid; display: grid;
grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(3, 1fr);
gap: 24px; gap: 1.5rem;
} }
.testimonial-card { .testimonial-card {
background: #fff; background: #fff;
border-radius: 12px; border-radius: 0.5rem;
padding: 28px 24px; padding: 1.5rem;
box-shadow: 0 2px 12px rgba(0,0,0,0.06); border: 1px solid #e5e7eb;
transition: box-shadow 0.2s;
} }
.testimonial-card__stars { color: #C9A94E; font-size: 16px; margin-bottom: 12px; } .testimonial-card:hover { box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1); }
.testimonial-card p { font-size: 14px; color: #555; line-height: 1.7; margin-bottom: 16px; font-style: italic; } .testimonial-card__stars { color: #FF1F1F; font-size: 1rem; margin-bottom: 0.75rem; letter-spacing: 2px; }
.testimonial-card p { font-size: 0.875rem; color: #555; line-height: 1.75; margin-bottom: 1rem; font-style: italic; }
.testimonial-card__author { .testimonial-card__author {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 10px; gap: 0.625rem;
} }
.testimonial-card__initials { .testimonial-card__initials {
width: 40px; width: 2.5rem;
height: 40px; height: 2.5rem;
background: #1B3A5C; background: linear-gradient(135deg, #FF1F1F, #FF3E3E);
color: #C9A94E; color: #fff;
border-radius: 50%; border-radius: 9999px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
font-weight: 700; font-weight: 600;
font-size: 14px; font-size: 0.75rem;
font-family: 'Poppins', sans-serif;
} }
.testimonial-card__name { font-size: 14px; font-weight: 600; color: #1B3A5C; } .testimonial-card__name { font-size: 0.875rem; font-weight: 600; color: #262626; }
.testimonial-card__loc { font-size: 12px; color: #6C757D; } .testimonial-card__loc { font-size: 0.75rem; color: #9e9e9e; }
/* === FAQ === */ /* === FAQ === */
.faq h2 { font-size: 32px; color: #1B3A5C; text-align: center; margin-bottom: 48px; } .faq h2 { font-size: 1.875rem; color: #262626; text-align: center; margin-bottom: 3rem; letter-spacing: -0.025em; }
.faq__list { max-width: 760px; margin: 0 auto; } .faq__list { max-width: 48rem; margin: 0 auto; }
.faq-item { .faq-item { border-bottom: 1px solid #e5e7eb; }
border-bottom: 1px solid #e8e8e8; .faq-item:first-child { border-top: 1px solid #e5e7eb; }
}
.faq-item:first-child { border-top: 1px solid #e8e8e8; }
.faq-item__q { .faq-item__q {
width: 100%; width: 100%;
background: none; background: none;
border: none; border: none;
padding: 18px 0; padding: 1.125rem 0;
font-size: 16px; font-size: 1rem;
font-weight: 600; font-weight: 600;
color: #1B3A5C; color: #262626;
cursor: pointer; cursor: pointer;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
text-align: left; text-align: left;
font-family: inherit; font-family: 'Inter', sans-serif;
transition: color 0.2s;
} }
.faq-item__q:hover { color: #C9A94E; } .faq-item__q:hover { color: #FF1F1F; }
.faq-item__q svg { .faq-item__q svg {
width: 20px; width: 1.25rem;
height: 20px; height: 1.25rem;
fill: #C9A94E; fill: #FF1F1F;
transition: transform 0.2s; transition: transform 0.2s;
flex-shrink: 0; flex-shrink: 0;
margin-left: 12px; margin-left: 0.75rem;
} }
.faq-item.active .faq-item__q svg { transform: rotate(180deg); } .faq-item.active .faq-item__q svg { transform: rotate(180deg); }
.faq-item__a { .faq-item__a {
@@ -367,85 +416,90 @@ img { max-width: 100%; height: auto; }
} }
.faq-item.active .faq-item__a { max-height: 300px; } .faq-item.active .faq-item__a { max-height: 300px; }
.faq-item__a p { .faq-item__a p {
padding: 0 0 18px; padding: 0 0 1.125rem;
font-size: 14px; font-size: 0.875rem;
color: #6C757D; color: #7b7b7b;
line-height: 1.7; line-height: 1.75;
} }
/* === CTA Banner === */ /* === CTA Banner === */
.cta-banner { .cta-banner {
text-align: center; text-align: center;
padding: 72px 0; padding: 5rem 0;
} }
.cta-banner h2 { font-size: 34px; margin-bottom: 16px; } .cta-banner h2 { font-size: 2.25rem; margin-bottom: 1rem; letter-spacing: -0.025em; }
.cta-banner p { color: #c8d6e5; font-size: 17px; margin-bottom: 28px; } .cta-banner p { color: #9e9e9e; font-size: 1.125rem; margin-bottom: 2rem; }
.cta-banner .btn { margin: 0 8px; } .cta-banner .btn { margin: 0 0.5rem; }
/* === Footer === */ /* === Footer (matching flowautomate.ai: secondary-900/800 bg, gray-400 text) === */
.footer { .footer {
background: #0f2540; background: linear-gradient(to bottom, #171717, #0d0d0d);
color: #a0b4c8; color: #9e9e9e;
padding: 48px 0 24px; padding: 3rem 0 1.5rem;
font-size: 14px; font-size: 0.875rem;
} }
.footer__grid { .footer__grid {
display: grid; display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr; grid-template-columns: 2fr 1fr 1fr 1fr;
gap: 36px; gap: 2rem;
margin-bottom: 36px; margin-bottom: 2rem;
} }
.footer h4 { color: #fff; font-size: 15px; margin-bottom: 14px; } .footer h4 { color: #fff; font-size: 0.9375rem; margin-bottom: 1rem; }
.footer__brand p { line-height: 1.7; margin-top: 8px; } .footer__brand p { line-height: 1.75; margin-top: 0.75rem; font-size: 0.875rem; }
.footer ul { list-style: none; } .footer ul { list-style: none; }
.footer ul li { margin-bottom: 8px; } .footer ul li { margin-bottom: 0.5rem; }
.footer ul a { color: #a0b4c8; font-size: 13px; } .footer ul a { color: #9e9e9e; font-size: 0.875rem; transition: color 0.2s; }
.footer ul a:hover { color: #C9A94E; } .footer ul a:hover { color: #FF1F1F; }
.footer__bottom { .footer__bottom {
border-top: 1px solid rgba(255,255,255,0.1); border-top: 1px solid rgba(255,255,255,0.08);
padding-top: 20px; padding-top: 1.25rem;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
flex-wrap: wrap; flex-wrap: wrap;
gap: 12px; gap: 0.75rem;
font-size: 0.75rem;
color: #7b7b7b;
} }
.footer__disclaimer { .footer__disclaimer {
font-size: 11px; font-size: 0.6875rem;
color: #6a7d91; color: #555;
max-width: 600px; max-width: 38rem;
line-height: 1.6; line-height: 1.6;
} }
/* === Responsive === */ /* === Responsive === */
@media (min-width: 768px) {
.section { padding: 6rem 0; }
.hero { padding: 8rem 0; }
.hero__content h1 { font-size: 3.75rem; }
.steps h2, .benefits h2, .testimonials h2, .faq h2, .situations h2 { font-size: 2.25rem; }
.cta-banner h2 { font-size: 2.75rem; }
}
@media (max-width: 1024px) { @media (max-width: 1024px) {
.hero .container { grid-template-columns: 1fr; gap: 36px; } .hero .container { grid-template-columns: 1fr; gap: 2.5rem; }
.hero__content { text-align: center; } .hero__content { text-align: center; }
.hero__content h1 { font-size: 34px; }
.hero__badges { justify-content: center; } .hero__badges { justify-content: center; }
.lead-form { max-width: 500px; margin: 0 auto; } .lead-form { max-width: 32rem; margin: 0 auto; }
.footer__grid { grid-template-columns: 1fr 1fr; } .footer__grid { grid-template-columns: 1fr 1fr; }
} }
@media (max-width: 768px) { @media (max-width: 768px) {
.section { padding: 48px 0; }
.header__phone { display: none; } .header__phone { display: none; }
.hero { padding: 48px 0 56px; } .hero__content h1 { font-size: 2.25rem; }
.hero__content h1 { font-size: 28px; } .hero__content p { font-size: 1rem; }
.hero__content p { font-size: 16px; } .hero__badges { flex-direction: column; gap: 0.5rem; align-items: center; }
.hero__badges { flex-direction: column; gap: 8px; align-items: center; }
.form-row { grid-template-columns: 1fr; } .form-row { grid-template-columns: 1fr; }
.steps__grid { grid-template-columns: 1fr; gap: 28px; } .steps__grid { grid-template-columns: 1fr; gap: 1.75rem; }
.benefits__grid { grid-template-columns: 1fr; } .benefits__grid { grid-template-columns: 1fr; }
.situations__grid { grid-template-columns: 1fr; } .situations__grid { grid-template-columns: 1fr; }
.testimonials__grid { grid-template-columns: 1fr; } .testimonials__grid { grid-template-columns: 1fr; }
.cta-banner h2 { font-size: 26px; } .cta-banner .btn { display: block; margin: 0.5rem 0; }
.cta-banner .btn { display: block; margin: 8px 0; }
.footer__grid { grid-template-columns: 1fr; } .footer__grid { grid-template-columns: 1fr; }
.footer__bottom { flex-direction: column; text-align: center; } .footer__bottom { flex-direction: column; text-align: center; }
.trust-bar .container { gap: 20px; } .trust-bar .container { gap: 1.25rem; }
} }
/* === Schema/Structured Data (hidden) === */ /* === Utility === */
.sr-only { .sr-only {
position: absolute; position: absolute;
width: 1px; width: 1px;

6
public/images/logo.svg
View File

@@ -1,5 +1,5 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 44" fill="none"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 44" fill="none">
<rect x="0" y="4" width="36" height="36" rx="8" fill="#1B3A5C"/> <rect x="0" y="4" width="36" height="36" rx="8" fill="#FF1F1F"/>
<path d="M10 28l6-16h4l6 16h-4l-1.2-3.6h-5.6L14 28h-4zm6.4-7h3.2l-1.6-4.8L16.4 21z" fill="#C9A94E"/> <path d="M10 28l6-16h4l6 16h-4l-1.2-3.6h-5.6L14 28h-4zm6.4-7h3.2l-1.6-4.8L16.4 21z" fill="#fff"/>
<text x="44" y="30" font-family="Arial,Helvetica,sans-serif" font-size="22" font-weight="800" fill="#1B3A5C">Flow<tspan fill="#C9A94E">Automate</tspan></text> <text x="44" y="30" font-family="Poppins,Arial,Helvetica,sans-serif" font-size="22" font-weight="700" fill="#171717">Flow<tspan fill="#FF1F1F">Automate</tspan></text>
</svg> </svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 412 B

After

Width:  |  Height:  |  Size: 417 B

6
public/index.html
View File

@@ -129,7 +129,7 @@
</a> </a>
<div class="header__right"> <div class="header__right">
<a href="tel:+14256107779" class="header__phone"> <a href="tel:+14256107779" class="header__phone">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="#C9A94E" style="vertical-align:-3px;margin-right:4px;"><path d="M6.62 10.79a15.05 15.05 0 006.59 6.59l2.2-2.2a1 1 0 011.01-.24c1.12.37 2.33.57 3.58.57a1 1 0 011 1V20a1 1 0 01-1 1A17 17 0 013 4a1 1 0 011-1h3.5a1 1 0 011 1c0 1.25.2 2.46.57 3.58a1 1 0 01-.24 1.01l-2.21 2.2z"/></svg> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="#FF1F1F" style="vertical-align:-3px;margin-right:4px;"><path d="M6.62 10.79a15.05 15.05 0 006.59 6.59l2.2-2.2a1 1 0 011.01-.24c1.12.37 2.33.57 3.58.57a1 1 0 011 1V20a1 1 0 01-1 1A17 17 0 013 4a1 1 0 011-1h3.5a1 1 0 011 1c0 1.25.2 2.46.57 3.58a1 1 0 01-.24 1.01l-2.21 2.2z"/></svg>
(425) 610-7779 (425) 610-7779
</a> </a>
<a href="#lead-form-section" class="btn">Get My Cash Offer</a> <a href="#lead-form-section" class="btn">Get My Cash Offer</a>
@@ -329,7 +329,7 @@
</section> </section>
<!-- Situations --> <!-- Situations -->
<section class="section section--navy situations"> <section class="section section--dark situations">
<div class="container"> <div class="container">
<h2>Situations We Help With</h2> <h2>Situations We Help With</h2>
<p>No matter what you're going through, we can offer a fast, fair solution.</p> <p>No matter what you're going through, we can offer a fast, fair solution.</p>
@@ -495,7 +495,7 @@
</section> </section>
<!-- Final CTA --> <!-- Final CTA -->
<section class="section section--navy cta-banner"> <section class="section section--dark cta-banner">
<div class="container"> <div class="container">
<h2>Ready to Get Your Cash Offer?</h2> <h2>Ready to Get Your Cash Offer?</h2>
<p>Fill out the form or call us now. No obligation, no pressure.</p> <p>Fill out the form or call us now. No obligation, no pressure.</p>

4
public/privacy.html
View File

@@ -8,7 +8,7 @@
<meta name="robots" content="noindex, follow"> <meta name="robots" content="noindex, follow">
<link rel="canonical" href="https://houses.flowautomate.ai/privacy.html"> <link rel="canonical" href="https://houses.flowautomate.ai/privacy.html">
<link rel="stylesheet" href="/css/style.css"> <link rel="stylesheet" href="/css/style.css">
<style>.legal{max-width:760px;margin:0 auto;padding:48px 20px 64px;}.legal h1{color:#1B3A5C;font-size:32px;margin-bottom:8px;}.legal .date{color:#6C757D;font-size:14px;margin-bottom:32px;}.legal h2{color:#1B3A5C;font-size:20px;margin:28px 0 12px;}.legal p,.legal li{color:#555;font-size:15px;line-height:1.7;margin-bottom:12px;}.legal ul{padding-left:20px;}.legal a{color:#C9A94E;}</style> <style>.legal{max-width:760px;margin:0 auto;padding:48px 20px 64px;}.legal h1{color:#171717;font-size:32px;margin-bottom:8px;font-family:'Poppins',sans-serif;font-weight:600;}.legal .date{color:#7b7b7b;font-size:14px;margin-bottom:32px;}.legal h2{color:#171717;font-size:20px;margin:28px 0 12px;font-family:'Poppins',sans-serif;font-weight:600;}.legal p,.legal li{color:#555;font-size:15px;line-height:1.7;margin-bottom:12px;}.legal ul{padding-left:20px;}.legal a{color:#FF1F1F;}</style>
</head> </head>
<body> <body>
@@ -89,7 +89,7 @@
<div class="container"> <div class="container">
<div class="footer__bottom" style="border:none;padding-top:0;"> <div class="footer__bottom" style="border:none;padding-top:0;">
<p>&copy; 2026 Flowautomate LLC. All rights reserved.</p> <p>&copy; 2026 Flowautomate LLC. All rights reserved.</p>
<p><a href="/" style="color:#C9A94E;">Back to Home</a></p> <p><a href="/" style="color:#FF1F1F;">Back to Home</a></p>
</div> </div>
</div> </div>
</footer> </footer>

4
public/terms.html
View File

@@ -8,7 +8,7 @@
<meta name="robots" content="noindex, follow"> <meta name="robots" content="noindex, follow">
<link rel="canonical" href="https://houses.flowautomate.ai/terms.html"> <link rel="canonical" href="https://houses.flowautomate.ai/terms.html">
<link rel="stylesheet" href="/css/style.css"> <link rel="stylesheet" href="/css/style.css">
<style>.legal{max-width:760px;margin:0 auto;padding:48px 20px 64px;}.legal h1{color:#1B3A5C;font-size:32px;margin-bottom:8px;}.legal .date{color:#6C757D;font-size:14px;margin-bottom:32px;}.legal h2{color:#1B3A5C;font-size:20px;margin:28px 0 12px;}.legal p,.legal li{color:#555;font-size:15px;line-height:1.7;margin-bottom:12px;}.legal ul{padding-left:20px;}.legal a{color:#C9A94E;}</style> <style>.legal{max-width:760px;margin:0 auto;padding:48px 20px 64px;}.legal h1{color:#171717;font-size:32px;margin-bottom:8px;font-family:'Poppins',sans-serif;font-weight:600;}.legal .date{color:#7b7b7b;font-size:14px;margin-bottom:32px;}.legal h2{color:#171717;font-size:20px;margin:28px 0 12px;font-family:'Poppins',sans-serif;font-weight:600;}.legal p,.legal li{color:#555;font-size:15px;line-height:1.7;margin-bottom:12px;}.legal ul{padding-left:20px;}.legal a{color:#FF1F1F;}</style>
</head> </head>
<body> <body>
@@ -72,7 +72,7 @@
<div class="container"> <div class="container">
<div class="footer__bottom" style="border:none;padding-top:0;"> <div class="footer__bottom" style="border:none;padding-top:0;">
<p>&copy; 2026 Flowautomate LLC. All rights reserved.</p> <p>&copy; 2026 Flowautomate LLC. All rights reserved.</p>
<p><a href="/" style="color:#C9A94E;">Back to Home</a></p> <p><a href="/" style="color:#FF1F1F;">Back to Home</a></p>
</div> </div>
</div> </div>
</footer> </footer>

42
server.js
View File

@@ -44,10 +44,10 @@ app.use(helmet({
contentSecurityPolicy: { contentSecurityPolicy: {
directives: { directives: {
defaultSrc: ["'self'"], defaultSrc: ["'self'"],
styleSrc: ["'self'", "'unsafe-inline'"], styleSrc: ["'self'", "'unsafe-inline'", "https://fonts.googleapis.com"],
scriptSrc: ["'self'"], scriptSrc: ["'self'"],
imgSrc: ["'self'", "data:"], imgSrc: ["'self'", "data:"],
fontSrc: ["'self'"], fontSrc: ["'self'", "https://fonts.gstatic.com"],
connectSrc: ["'self'"], connectSrc: ["'self'"],
}, },
}, },
@@ -111,27 +111,27 @@ app.post('/api/submit-lead', submitLimiter, async (req, res) => {
// Send notification email to team // Send notification email to team
const notifyHtml = ` const notifyHtml = `
<h2 style="color:#1B3A5C;">New Lead from houses.flowautomate.ai</h2> <h2 style="color:#171717;font-family:Arial,sans-serif;">New Lead from houses.flowautomate.ai</h2>
<table style="font-family:Arial,sans-serif;border-collapse:collapse;"> <table style="font-family:Arial,sans-serif;border-collapse:collapse;">
<tr><td style="padding:6px 12px;font-weight:bold;color:#1B3A5C;">Name</td><td style="padding:6px 12px;">${escapeHtml(name)}</td></tr> <tr><td style="padding:6px 12px;font-weight:bold;color:#171717;">Name</td><td style="padding:6px 12px;">${escapeHtml(name)}</td></tr>
<tr style="background:#F8F9FA;"><td style="padding:6px 12px;font-weight:bold;color:#1B3A5C;">Phone</td><td style="padding:6px 12px;">${escapeHtml(phone)}</td></tr> <tr style="background:#f9fafb;"><td style="padding:6px 12px;font-weight:bold;color:#171717;">Phone</td><td style="padding:6px 12px;">${escapeHtml(phone)}</td></tr>
<tr><td style="padding:6px 12px;font-weight:bold;color:#1B3A5C;">Email</td><td style="padding:6px 12px;">${escapeHtml(email)}</td></tr> <tr><td style="padding:6px 12px;font-weight:bold;color:#171717;">Email</td><td style="padding:6px 12px;">${escapeHtml(email)}</td></tr>
<tr style="background:#F8F9FA;"><td style="padding:6px 12px;font-weight:bold;color:#1B3A5C;">Property</td><td style="padding:6px 12px;">${escapeHtml(address)}</td></tr> <tr style="background:#f9fafb;"><td style="padding:6px 12px;font-weight:bold;color:#171717;">Property</td><td style="padding:6px 12px;">${escapeHtml(address)}</td></tr>
<tr><td style="padding:6px 12px;font-weight:bold;color:#1B3A5C;">Condition</td><td style="padding:6px 12px;">${escapeHtml(condition || 'Not specified')}</td></tr> <tr><td style="padding:6px 12px;font-weight:bold;color:#171717;">Condition</td><td style="padding:6px 12px;">${escapeHtml(condition || 'Not specified')}</td></tr>
<tr style="background:#F8F9FA;"><td style="padding:6px 12px;font-weight:bold;color:#1B3A5C;">Timeline</td><td style="padding:6px 12px;">${escapeHtml(timeline || 'Not specified')}</td></tr> <tr style="background:#f9fafb;"><td style="padding:6px 12px;font-weight:bold;color:#171717;">Timeline</td><td style="padding:6px 12px;">${escapeHtml(timeline || 'Not specified')}</td></tr>
<tr><td style="padding:6px 12px;font-weight:bold;color:#1B3A5C;">TCPA Consent</td><td style="padding:6px 12px;">Yes</td></tr> <tr><td style="padding:6px 12px;font-weight:bold;color:#171717;">TCPA Consent</td><td style="padding:6px 12px;">Yes</td></tr>
<tr style="background:#F8F9FA;"><td style="padding:6px 12px;font-weight:bold;color:#1B3A5C;">Submitted</td><td style="padding:6px 12px;">${new Date().toLocaleString('en-US', { timeZone: 'America/Chicago' })}</td></tr> <tr style="background:#f9fafb;"><td style="padding:6px 12px;font-weight:bold;color:#171717;">Submitted</td><td style="padding:6px 12px;">${new Date().toLocaleString('en-US', { timeZone: 'America/Chicago' })}</td></tr>
</table> </table>
`; `;
// Auto-response email to seller // Auto-response email to seller
const autoResponseHtml = ` const autoResponseHtml = `
<div style="font-family:Arial,Helvetica,sans-serif;max-width:600px;margin:0 auto;"> <div style="font-family:Arial,Helvetica,sans-serif;max-width:600px;margin:0 auto;">
<div style="background:#1B3A5C;padding:24px;text-align:center;"> <div style="background:#171717;padding:24px;text-align:center;">
<h1 style="color:#C9A94E;margin:0;font-size:22px;">Flowautomate LLC</h1> <h1 style="color:#FF1F1F;margin:0;font-size:22px;">Flowautomate LLC</h1>
<p style="color:#ffffff;margin:6px 0 0;font-size:13px;">AI-Powered Real Estate Solutions</p> <p style="color:#ffffff;margin:6px 0 0;font-size:13px;">AI-Powered Real Estate Solutions</p>
</div> </div>
<div style="padding:28px 24px;color:#333;"> <div style="padding:28px 24px;color:#262626;">
<p>Hi ${escapeHtml(name.split(' ')[0])},</p> <p>Hi ${escapeHtml(name.split(' ')[0])},</p>
<p>Thank you for reaching out about your property at <strong>${escapeHtml(address)}</strong>. We received your information and our team is reviewing it now.</p> <p>Thank you for reaching out about your property at <strong>${escapeHtml(address)}</strong>. We received your information and our team is reviewing it now.</p>
<p><strong>What happens next:</strong></p> <p><strong>What happens next:</strong></p>
@@ -142,19 +142,19 @@ app.post('/api/submit-lead', submitLimiter, async (req, res) => {
</ul> </ul>
<p>If you have any questions in the meantime, feel free to call or text us:</p> <p>If you have any questions in the meantime, feel free to call or text us:</p>
<p style="text-align:center;margin:20px 0;"> <p style="text-align:center;margin:20px 0;">
<a href="tel:+14256107779" style="display:inline-block;background:#C9A94E;color:#fff;padding:12px 28px;text-decoration:none;border-radius:6px;font-weight:700;font-size:16px;">(425) 610-7779</a> <a href="tel:+14256107779" style="display:inline-block;background:#FF1F1F;color:#fff;padding:12px 28px;text-decoration:none;border-radius:6px;font-weight:700;font-size:16px;">(425) 610-7779</a>
</p> </p>
</div> </div>
<div style="border-top:2px solid #C9A94E;padding:20px 24px;background:#F8F9FA;"> <div style="border-top:2px solid #FF1F1F;padding:20px 24px;background:#f9fafb;">
<table cellpadding="0" cellspacing="0" border="0" style="font-family:Arial,Helvetica,sans-serif;"> <table cellpadding="0" cellspacing="0" border="0" style="font-family:Arial,Helvetica,sans-serif;">
<tr> <tr>
<td style="vertical-align:top;"> <td style="vertical-align:top;">
<p style="margin:0 0 2px;font-size:16px;font-weight:700;color:#1B3A5C;">Jociah</p> <p style="margin:0 0 2px;font-size:16px;font-weight:700;color:#171717;">Jociah</p>
<p style="margin:0 0 4px;font-size:10px;font-weight:600;color:#C9A94E;text-transform:uppercase;letter-spacing:2px;">Founder &amp; CEO</p> <p style="margin:0 0 4px;font-size:10px;font-weight:600;color:#FF1F1F;text-transform:uppercase;letter-spacing:2px;">Founder &amp; CEO</p>
<p style="margin:0 0 2px;font-size:13px;color:#1B3A5C;font-weight:600;">Flowautomate LLC</p> <p style="margin:0 0 2px;font-size:13px;color:#171717;font-weight:600;">Flowautomate LLC</p>
<p style="margin:0;font-size:11px;color:#888;"> <p style="margin:0;font-size:11px;color:#888;">
<a href="tel:+14256107779" style="color:#1B3A5C;text-decoration:none;">(425) 610-7779</a> &bull; <a href="tel:+14256107779" style="color:#171717;text-decoration:none;">(425) 610-7779</a> &bull;
<a href="mailto:offers@flowautomate.ai" style="color:#1B3A5C;text-decoration:none;">offers@flowautomate.ai</a> <a href="mailto:offers@flowautomate.ai" style="color:#171717;text-decoration:none;">offers@flowautomate.ai</a>
</p> </p>
</td> </td>
</tr> </tr>