Same content, same code, one line different. Have a look on your phone too, it reflows on its own.
Type follows your mockup, serif headline included. Your current homepage runs on Roboto, so this reads as a deliberate layer on top rather than blending in, which is what the mockup does too. I just want you to see it coming.
About the button: the mockup shows white text on your brand pink, which measures 3.4 to 1 and misses the WCAG AA minimum of 4.5. I kept the white mockup look and deepened the pink one step, which passes at 5.4. The other clean route is your exact brand pink with black text, the pairing your own site already uses. Flipping between the two is one line, your call. The small READY TO BEGIN line follows the same rule, a deeper pink on white, a lighter one over the photo, so every piece passes the scan.
The white frame around each block below is not decoration. It's a copy of the content card your homepage wraps around anything pasted into the editor, so this is where the block actually lands and how wide it actually gets.
Ready to Begin
Let's create a personalized plan for your real estate goals in Knoxville and beyond.
Book a Complimentary Strategy CallReady to Begin
Let's create a personalized plan for your real estate goals in Knoxville and beyond.
Book a Complimentary Strategy CallThe photo behind version A is the Knoxville sunset from your own homepage, not a stock placeholder, so this is the real effect. Swap the URL in the code for any image you like. One honest detail: the small READY TO BEGIN line uses the lighter pink from your palette, because the saturated pink can't stay readable over a bright sky no matter how dark I make the overlay. Over a darker photo, say a dusk shot from your videographer, it can go back to the hot pink, and either way I'll re-check the numbers against the real image.
On the sub-line I used the mockup wording. The brief says "Thoughtful guidance. Local expertise. Extraordinary results." instead, say the word and I'll swap it.
Before you paste: the button link is a placeholder. Find #REPLACE-WITH-YOUR-BOOKING-LINK and put your real booking or contact address there, otherwise the button will look right and do nothing.
Then paste it into your homepage content editor and save. If it comes out looking like the version above, we're in good shape. If it comes out as plain unstyled text, your editor is stripping the style block, which is useful for me to know now rather than later. Either way you can delete it straight after, nothing here touches the rest of your page.
To see the white version instead, change cs-cta--dark to cs-cta--light on the first line. That's the only difference between the two.
The photo URL sits in the background-image line, swap it for any image whenever you like. Remove that line entirely and the section falls back to flat charcoal.