From 3593acd3383f1311444ba4b2e5e5dd2b782fcbc6 Mon Sep 17 00:00:00 2001 From: Claude Date: Thu, 19 Feb 2026 05:24:27 +0100 Subject: [PATCH] Restyle site to match flowautomate.ai design system 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 --- public/css/style.css | 484 +++++++++++++++++++++++------------------ public/images/logo.svg | 6 +- public/index.html | 6 +- public/privacy.html | 4 +- public/terms.html | 4 +- server.js | 42 ++-- 6 files changed, 300 insertions(+), 246 deletions(-) diff --git a/public/css/style.css b/public/css/style.css index 4fee893..fdfbe22 100644 --- a/public/css/style.css +++ b/public/css/style.css @@ -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 === */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { - font-family: Arial, Helvetica, sans-serif; - color: #333; + font-family: 'Inter', sans-serif; + color: #262626; background: #fff; - line-height: 1.6; + line-height: 1.5; -webkit-font-smoothing: antialiased; + -webkit-tap-highlight-color: transparent; } -a { color: #C9A94E; text-decoration: none; } -a:hover { text-decoration: underline; } -img { max-width: 100%; height: auto; } +h1, h2, h3, h4, h5, h6 { + font-family: 'Poppins', sans-serif; + font-weight: 600; +} +a { color: inherit; text-decoration: none; } +a:hover { text-decoration: none; } +img { max-width: 100%; height: auto; display: block; } -/* === Layout === */ -.container { max-width: 1120px; margin: 0 auto; padding: 0 20px; } -.section { padding: 64px 0; } -.section--navy { background: #1B3A5C; color: #fff; } -.section--light { background: #F8F9FA; } +/* === Layout (matching flowautomate.ai: max-width 80rem = 1280px, px-4 = 1rem) === */ +.container { max-width: 80rem; margin: 0 auto; padding: 0 1rem; } +.section { padding: 4rem 0; } +.section--dark { + background: linear-gradient(to bottom right, #171717, #262626); + color: #fff; +} +.section--light { background: #f9fafb; } /* === Header === */ .header { position: sticky; top: 0; - z-index: 100; - background: #fff; - border-bottom: 1px solid #e8e8e8; - padding: 12px 0; + z-index: 50; + background: rgba(255,255,255,0.97); + backdrop-filter: blur(8px); + border-bottom: 1px solid #e5e7eb; + padding: 0; } .header .container { display: flex; align-items: center; justify-content: space-between; - gap: 16px; + height: 4rem; + gap: 1rem; } -.header__logo { height: 40px; width: auto; } -.header__right { display: flex; align-items: center; gap: 16px; } +.header__logo { height: 2rem; width: auto; } +.header__right { display: flex; align-items: center; gap: 1.5rem; } .header__phone { - color: #1B3A5C; - font-weight: 700; - font-size: 15px; + color: #262626; + font-weight: 500; + font-size: 0.875rem; 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 { - display: inline-block; - background: #C9A94E; + display: inline-flex; + align-items: center; + justify-content: center; + background: #FF1F1F; color: #fff; - font-weight: 700; - font-size: 15px; - padding: 12px 28px; + font-weight: 500; + font-size: 0.875rem; + padding: 0.75rem 1.5rem; border: none; - border-radius: 6px; + border-radius: 0.375rem; cursor: pointer; - transition: background 0.2s, transform 0.1s; + transition: all 0.2s cubic-bezier(.4,0,.2,1); text-align: center; 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--lg { padding: 16px 36px; font-size: 17px; } +.btn--lg { padding: 1rem 2rem; font-size: 1rem; } .btn--outline { background: transparent; - border: 2px solid #C9A94E; - color: #C9A94E; + border: 2px solid #FF1F1F; + 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%; } -/* === Hero === */ +/* === Hero (matching flowautomate.ai: dark gradient bg, py-20 md:py-32) === */ .hero { - background: linear-gradient(135deg, #1B3A5C 0%, #0f2540 100%); + background: linear-gradient(to bottom right, #0d0d0d, #171717); color: #fff; - padding: 72px 0 80px; + padding: 5rem 0; + position: relative; + overflow: hidden; } .hero .container { display: grid; grid-template-columns: 1fr 1fr; - gap: 48px; + gap: 3rem; align-items: center; } .hero__content h1 { - font-size: 42px; - font-weight: 800; - line-height: 1.15; - margin-bottom: 16px; + font-size: 3rem; + font-weight: 700; + line-height: 1; + 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 { - font-size: 18px; - color: #c8d6e5; - margin-bottom: 24px; - line-height: 1.7; + font-size: 1.125rem; + color: #9e9e9e; + margin-bottom: 1.5rem; + line-height: 1.75; } .hero__badges { display: flex; - gap: 24px; - margin-top: 8px; + gap: 1.5rem; + margin-top: 1.5rem; } .hero__badge { display: flex; align-items: center; - gap: 6px; - font-size: 13px; - color: #a0b4c8; + gap: 0.375rem; + font-size: 0.875rem; + 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 { background: #fff; - border-radius: 12px; - padding: 32px; - box-shadow: 0 8px 32px rgba(0,0,0,0.2); + border-radius: 0.5rem; + padding: 2rem; + box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25); } .lead-form h2 { - color: #1B3A5C; - font-size: 22px; - margin-bottom: 20px; + color: #262626; + font-size: 1.25rem; + margin-bottom: 1.25rem; text-align: center; } -.form-group { margin-bottom: 14px; } +.form-group { margin-bottom: 0.875rem; } .form-group label { display: block; - font-size: 13px; - font-weight: 600; - color: #1B3A5C; - margin-bottom: 4px; + font-size: 0.875rem; + font-weight: 500; + color: #262626; + margin-bottom: 0.25rem; } .form-group input, .form-group select { width: 100%; - padding: 11px 14px; - font-size: 15px; - border: 1px solid #d0d5dd; - border-radius: 6px; - font-family: inherit; + padding: 0.625rem 0.875rem; + font-size: 0.875rem; + border: 1px solid #d1d5db; + border-radius: 0.375rem; + font-family: 'Inter', sans-serif; background: #fff; - transition: border-color 0.2s; + color: #262626; + transition: all 0.2s; } .form-group input:focus, .form-group select:focus { outline: none; - border-color: #C9A94E; - box-shadow: 0 0 0 3px rgba(201,169,78,0.15); + border-color: #FF1F1F; + box-shadow: 0 0 0 2px rgba(255,31,31,0.15); } .form-group input.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 { display: flex; align-items: flex-start; - gap: 8px; - margin: 16px 0; - font-size: 12px; - color: #6C757D; + gap: 0.5rem; + margin: 1rem 0; + font-size: 0.75rem; + color: #7b7b7b; line-height: 1.5; } .form-consent input[type="checkbox"] { margin-top: 2px; - width: 16px; - height: 16px; + width: 1rem; + height: 1rem; flex-shrink: 0; - accent-color: #C9A94E; + accent-color: #FF1F1F; } .form-note { text-align: center; - font-size: 13px; - color: #6C757D; - margin-top: 12px; + font-size: 0.75rem; + color: #7b7b7b; + 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 { text-align: center; - padding: 24px 0; + padding: 1.5rem 0; display: none; } -.form-success svg { width: 48px; height: 48px; fill: #27ae60; } -.form-success h3 { color: #1B3A5C; margin: 12px 0 8px; font-size: 20px; } -.form-success p { color: #6C757D; font-size: 14px; } +.form-success svg { width: 3rem; height: 3rem; fill: #22c55e; margin: 0 auto; } +.form-success h3 { color: #262626; margin: 0.75rem 0 0.5rem; font-size: 1.25rem; } +.form-success p { color: #7b7b7b; font-size: 0.875rem; } .form-error { - background: #fdf0ef; - color: #e74c3c; - padding: 10px 14px; - border-radius: 6px; - font-size: 13px; - margin-bottom: 14px; + background: #fee2e2; + color: #dc2626; + padding: 0.625rem 0.875rem; + border-radius: 0.375rem; + font-size: 0.875rem; + margin-bottom: 0.875rem; display: none; } .hp-field { position: absolute; left: -9999px; } @@ -196,168 +232,181 @@ img { max-width: 100%; height: auto; } /* === Trust Bar === */ .trust-bar { background: #fff; - border-bottom: 1px solid #e8e8e8; - padding: 20px 0; + border-bottom: 1px solid #e5e7eb; + padding: 1.25rem 0; } .trust-bar .container { display: flex; justify-content: center; align-items: center; - gap: 40px; + gap: 2.5rem; flex-wrap: wrap; } .trust-item { display: flex; align-items: center; - gap: 8px; - font-size: 14px; - font-weight: 600; - color: #1B3A5C; + gap: 0.5rem; + font-size: 0.875rem; + font-weight: 500; + 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 { 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 { display: grid; grid-template-columns: repeat(3, 1fr); - gap: 36px; + gap: 2rem; } -.step { padding: 0 12px; } +.step { padding: 0 0.75rem; } .step__number { - width: 56px; - height: 56px; - border-radius: 50%; - background: #C9A94E; + width: 3.5rem; + height: 3.5rem; + border-radius: 9999px; + background: linear-gradient(135deg, #FF1F1F, #FF3E3E); color: #fff; - font-size: 24px; - font-weight: 800; + font-size: 1.25rem; + font-weight: 700; display: flex; align-items: 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 p { font-size: 14px; color: #6C757D; } +.step h3 { font-size: 1.125rem; color: #262626; margin-bottom: 0.5rem; } +.step p { font-size: 0.875rem; color: #7b7b7b; line-height: 1.6; } -/* === Benefits Cards === */ -.benefits h2 { font-size: 32px; color: #1B3A5C; text-align: center; margin-bottom: 48px; } +/* === Benefits Cards (matching flowautomate.ai: rounded-lg, shadow-md, p-6, hover:shadow-lg) === */ +.benefits h2 { font-size: 1.875rem; color: #262626; text-align: center; margin-bottom: 3rem; letter-spacing: -0.025em; } .benefits__grid { display: grid; grid-template-columns: repeat(3, 1fr); - gap: 24px; + gap: 1.5rem; } .benefit-card { background: #fff; - border-radius: 12px; - padding: 28px 24px; - box-shadow: 0 2px 12px rgba(0,0,0,0.06); - transition: transform 0.2s, box-shadow 0.2s; + border-radius: 0.5rem; + padding: 1.5rem; + border: 1px solid #e5e7eb; + 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 { - width: 44px; - height: 44px; - background: rgba(201,169,78,0.12); - border-radius: 10px; + width: 2.5rem; + height: 2.5rem; + background: #FFE1E1; + border-radius: 0.5rem; display: flex; align-items: center; justify-content: center; - margin-bottom: 14px; + margin-bottom: 1rem; } -.benefit-card__icon svg { width: 22px; height: 22px; fill: #C9A94E; } -.benefit-card h3 { font-size: 17px; color: #1B3A5C; margin-bottom: 6px; } -.benefit-card p { font-size: 14px; color: #6C757D; line-height: 1.6; } +.benefit-card__icon svg { width: 1.25rem; height: 1.25rem; fill: #FF1F1F; } +.benefit-card h3 { font-size: 1rem; color: #262626; margin-bottom: 0.5rem; } +.benefit-card p { font-size: 0.875rem; color: #7b7b7b; line-height: 1.6; } /* === Situations === */ -.situations h2 { font-size: 32px; margin-bottom: 12px; } -.situations > .container > p { color: #c8d6e5; font-size: 16px; margin-bottom: 36px; text-align: center; } -.situations h2 { text-align: center; } +.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 { display: grid; grid-template-columns: repeat(2, 1fr); - gap: 16px; - max-width: 700px; + gap: 1rem; + max-width: 44rem; margin: 0 auto; } .situation-item { display: flex; align-items: center; - gap: 10px; - font-size: 15px; - padding: 12px 16px; - background: rgba(255,255,255,0.08); - border-radius: 8px; - border-left: 3px solid #C9A94E; + gap: 0.625rem; + font-size: 0.9375rem; + padding: 0.875rem 1rem; + background: rgba(255,255,255,0.06); + border-radius: 0.5rem; + 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 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 { display: grid; grid-template-columns: repeat(3, 1fr); - gap: 24px; + gap: 1.5rem; } .testimonial-card { background: #fff; - border-radius: 12px; - padding: 28px 24px; - box-shadow: 0 2px 12px rgba(0,0,0,0.06); + border-radius: 0.5rem; + padding: 1.5rem; + border: 1px solid #e5e7eb; + transition: box-shadow 0.2s; } -.testimonial-card__stars { color: #C9A94E; font-size: 16px; margin-bottom: 12px; } -.testimonial-card p { font-size: 14px; color: #555; line-height: 1.7; margin-bottom: 16px; font-style: italic; } +.testimonial-card:hover { box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1); } +.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 { display: flex; align-items: center; - gap: 10px; + gap: 0.625rem; } .testimonial-card__initials { - width: 40px; - height: 40px; - background: #1B3A5C; - color: #C9A94E; - border-radius: 50%; + width: 2.5rem; + height: 2.5rem; + background: linear-gradient(135deg, #FF1F1F, #FF3E3E); + color: #fff; + border-radius: 9999px; display: flex; align-items: center; justify-content: center; - font-weight: 700; - font-size: 14px; + font-weight: 600; + font-size: 0.75rem; + font-family: 'Poppins', sans-serif; } -.testimonial-card__name { font-size: 14px; font-weight: 600; color: #1B3A5C; } -.testimonial-card__loc { font-size: 12px; color: #6C757D; } +.testimonial-card__name { font-size: 0.875rem; font-weight: 600; color: #262626; } +.testimonial-card__loc { font-size: 0.75rem; color: #9e9e9e; } /* === FAQ === */ -.faq h2 { font-size: 32px; color: #1B3A5C; text-align: center; margin-bottom: 48px; } -.faq__list { max-width: 760px; margin: 0 auto; } -.faq-item { - border-bottom: 1px solid #e8e8e8; -} -.faq-item:first-child { border-top: 1px solid #e8e8e8; } +.faq h2 { font-size: 1.875rem; color: #262626; text-align: center; margin-bottom: 3rem; letter-spacing: -0.025em; } +.faq__list { max-width: 48rem; margin: 0 auto; } +.faq-item { border-bottom: 1px solid #e5e7eb; } +.faq-item:first-child { border-top: 1px solid #e5e7eb; } .faq-item__q { width: 100%; background: none; border: none; - padding: 18px 0; - font-size: 16px; + padding: 1.125rem 0; + font-size: 1rem; font-weight: 600; - color: #1B3A5C; + color: #262626; cursor: pointer; display: flex; justify-content: space-between; align-items: center; 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 { - width: 20px; - height: 20px; - fill: #C9A94E; + width: 1.25rem; + height: 1.25rem; + fill: #FF1F1F; transition: transform 0.2s; flex-shrink: 0; - margin-left: 12px; + margin-left: 0.75rem; } .faq-item.active .faq-item__q svg { transform: rotate(180deg); } .faq-item__a { @@ -367,85 +416,90 @@ img { max-width: 100%; height: auto; } } .faq-item.active .faq-item__a { max-height: 300px; } .faq-item__a p { - padding: 0 0 18px; - font-size: 14px; - color: #6C757D; - line-height: 1.7; + padding: 0 0 1.125rem; + font-size: 0.875rem; + color: #7b7b7b; + line-height: 1.75; } /* === CTA Banner === */ .cta-banner { text-align: center; - padding: 72px 0; + padding: 5rem 0; } -.cta-banner h2 { font-size: 34px; margin-bottom: 16px; } -.cta-banner p { color: #c8d6e5; font-size: 17px; margin-bottom: 28px; } -.cta-banner .btn { margin: 0 8px; } +.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; } +.cta-banner .btn { margin: 0 0.5rem; } -/* === Footer === */ +/* === Footer (matching flowautomate.ai: secondary-900/800 bg, gray-400 text) === */ .footer { - background: #0f2540; - color: #a0b4c8; - padding: 48px 0 24px; - font-size: 14px; + background: linear-gradient(to bottom, #171717, #0d0d0d); + color: #9e9e9e; + padding: 3rem 0 1.5rem; + font-size: 0.875rem; } .footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; - gap: 36px; - margin-bottom: 36px; + gap: 2rem; + margin-bottom: 2rem; } -.footer h4 { color: #fff; font-size: 15px; margin-bottom: 14px; } -.footer__brand p { line-height: 1.7; margin-top: 8px; } +.footer h4 { color: #fff; font-size: 0.9375rem; margin-bottom: 1rem; } +.footer__brand p { line-height: 1.75; margin-top: 0.75rem; font-size: 0.875rem; } .footer ul { list-style: none; } -.footer ul li { margin-bottom: 8px; } -.footer ul a { color: #a0b4c8; font-size: 13px; } -.footer ul a:hover { color: #C9A94E; } +.footer ul li { margin-bottom: 0.5rem; } +.footer ul a { color: #9e9e9e; font-size: 0.875rem; transition: color 0.2s; } +.footer ul a:hover { color: #FF1F1F; } .footer__bottom { - border-top: 1px solid rgba(255,255,255,0.1); - padding-top: 20px; + border-top: 1px solid rgba(255,255,255,0.08); + padding-top: 1.25rem; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; - gap: 12px; + gap: 0.75rem; + font-size: 0.75rem; + color: #7b7b7b; } .footer__disclaimer { - font-size: 11px; - color: #6a7d91; - max-width: 600px; + font-size: 0.6875rem; + color: #555; + max-width: 38rem; line-height: 1.6; } /* === 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) { - .hero .container { grid-template-columns: 1fr; gap: 36px; } + .hero .container { grid-template-columns: 1fr; gap: 2.5rem; } .hero__content { text-align: center; } - .hero__content h1 { font-size: 34px; } .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; } } @media (max-width: 768px) { - .section { padding: 48px 0; } .header__phone { display: none; } - .hero { padding: 48px 0 56px; } - .hero__content h1 { font-size: 28px; } - .hero__content p { font-size: 16px; } - .hero__badges { flex-direction: column; gap: 8px; align-items: center; } + .hero__content h1 { font-size: 2.25rem; } + .hero__content p { font-size: 1rem; } + .hero__badges { flex-direction: column; gap: 0.5rem; align-items: center; } .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; } .situations__grid { grid-template-columns: 1fr; } .testimonials__grid { grid-template-columns: 1fr; } - .cta-banner h2 { font-size: 26px; } - .cta-banner .btn { display: block; margin: 8px 0; } + .cta-banner .btn { display: block; margin: 0.5rem 0; } .footer__grid { grid-template-columns: 1fr; } .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 { position: absolute; width: 1px; diff --git a/public/images/logo.svg b/public/images/logo.svg index f8b7421..bb6ea3b 100644 --- a/public/images/logo.svg +++ b/public/images/logo.svg @@ -1,5 +1,5 @@ - - - FlowAutomate + + + FlowAutomate diff --git a/public/index.html b/public/index.html index f352ce3..6e20d62 100644 --- a/public/index.html +++ b/public/index.html @@ -129,7 +129,7 @@
- + (425) 610-7779 Get My Cash Offer @@ -329,7 +329,7 @@ -
+

Situations We Help With

No matter what you're going through, we can offer a fast, fair solution.

@@ -495,7 +495,7 @@
-
+

Ready to Get Your Cash Offer?

Fill out the form or call us now. No obligation, no pressure.

diff --git a/public/privacy.html b/public/privacy.html index 5ba9081..6029fb2 100644 --- a/public/privacy.html +++ b/public/privacy.html @@ -8,7 +8,7 @@ - + @@ -89,7 +89,7 @@

© 2026 Flowautomate LLC. All rights reserved.

-

Back to Home

+

Back to Home

diff --git a/public/terms.html b/public/terms.html index 8035818..e7f23a3 100644 --- a/public/terms.html +++ b/public/terms.html @@ -8,7 +8,7 @@ - + @@ -72,7 +72,7 @@

© 2026 Flowautomate LLC. All rights reserved.

-

Back to Home

+

Back to Home

diff --git a/server.js b/server.js index dd5aa88..0fe682d 100644 --- a/server.js +++ b/server.js @@ -44,10 +44,10 @@ app.use(helmet({ contentSecurityPolicy: { directives: { defaultSrc: ["'self'"], - styleSrc: ["'self'", "'unsafe-inline'"], + styleSrc: ["'self'", "'unsafe-inline'", "https://fonts.googleapis.com"], scriptSrc: ["'self'"], imgSrc: ["'self'", "data:"], - fontSrc: ["'self'"], + fontSrc: ["'self'", "https://fonts.gstatic.com"], connectSrc: ["'self'"], }, }, @@ -111,27 +111,27 @@ app.post('/api/submit-lead', submitLimiter, async (req, res) => { // Send notification email to team const notifyHtml = ` -

New Lead from houses.flowautomate.ai

+

New Lead from houses.flowautomate.ai

- - - - - - - - + + + + + + + +
Name${escapeHtml(name)}
Phone${escapeHtml(phone)}
Email${escapeHtml(email)}
Property${escapeHtml(address)}
Condition${escapeHtml(condition || 'Not specified')}
Timeline${escapeHtml(timeline || 'Not specified')}
TCPA ConsentYes
Submitted${new Date().toLocaleString('en-US', { timeZone: 'America/Chicago' })}
Name${escapeHtml(name)}
Phone${escapeHtml(phone)}
Email${escapeHtml(email)}
Property${escapeHtml(address)}
Condition${escapeHtml(condition || 'Not specified')}
Timeline${escapeHtml(timeline || 'Not specified')}
TCPA ConsentYes
Submitted${new Date().toLocaleString('en-US', { timeZone: 'America/Chicago' })}
`; // Auto-response email to seller const autoResponseHtml = `
-
-

Flowautomate LLC

+
+

Flowautomate LLC

AI-Powered Real Estate Solutions

-
+

Hi ${escapeHtml(name.split(' ')[0])},

Thank you for reaching out about your property at ${escapeHtml(address)}. We received your information and our team is reviewing it now.

What happens next:

@@ -142,19 +142,19 @@ app.post('/api/submit-lead', submitLimiter, async (req, res) => {

If you have any questions in the meantime, feel free to call or text us:

- (425) 610-7779 + (425) 610-7779

-
+
-

Jociah

-

Founder & CEO

-

Flowautomate LLC

+

Jociah

+

Founder & CEO

+

Flowautomate LLC

- (425) 610-7779 • - offers@flowautomate.ai + (425) 610-7779 • + offers@flowautomate.ai