1<!-- @dsCard group="Storefront" viewport="1280x900" name="Service · Landscape Design" subtitle="Visual service landing â full-bleed hero, rotating gallery, top CTA" --> 2<!-- @startingPoint section="Storefront" subtitle="Landscape Design service page" viewport="1280x900" --> 3<!DOCTYPE html> 4<html lang="en"> 5<head> 6<!-- Google tag (gtag.js) -->
vendor: 64 bytes, lines 6-7
6 7<script async src="https://www.googletagmanager.com/gtag/js?id=
7G-6RP8WF8PNL
vendor: 12 bytes, line 7
7"></script>
8<script> 9
vendor: 134 bytes, lines 9-13
9window.dataLayer = window.dataLayer || []; 10 function gtag(){dataLayer.push(arguments);} 11 gtag('js', new Date()); 12 13 gtag('config', '
13AW-18306596515
vendor: 6 bytes, lines 13-14
13'); 14
14gtag('config', 'G-6RP8WF8PNL'); 15</script>
15 16<meta charset="UTF-8"> 17<meta name="viewport" content="width=device-width, initial-scale=1.0"> 18<title>Landscape Design â SmartyPlants</title> 19<link rel="icon" type="image/png" sizes="32x32" href="/assets/favicon-32x32.png"> 20<link rel="icon" type="image/png" sizes="16x16" href="/assets/favicon-16x16.png"> 21<link rel="apple-touch-icon" sizes="180x180" href="/assets/apple-touch-icon.png"> 22<link rel="manifest" href="/site.webmanifest"> 23<!-- @seo --> 24<meta name="description" content="Custom landscape design for Lake Worth Beach yards â a real plan, the right plants, and an outdoor space you will love. From SmartyPlants."> 25<meta name="robots" content="index, follow"> 26<meta name="theme-color" content="#4A5240"> 27<link rel="canonical" href="https://smartyplantsfl.com/landscape-design"> 28<meta property="og:type" content="website"> 29<meta property="og:site_name" content="SmartyPlants"> 30<meta property="og:title" content="Landscape Design â SmartyPlants"> 31<meta property="og:description" content="Custom landscape design for Lake Worth Beach yards â a real plan, the right plants, and an outdoor space you will love. From SmartyPlants."> 32<meta property="og:url" content="https://smartyplantsfl.com/landscape-design"> 33<meta property="og:image" content="https://smartyplantsfl.com/assets/og-image.png"> 34<meta property="og:image:width" content="1200"> 35<meta property="og:image:height" content="630"> 36<meta name="twitter:card" content="summary_large_image"> 37<meta name="twitter:title" content="Landscape Design â SmartyPlants"> 38<meta name="twitter:description" content="Custom landscape design for Lake Worth Beach yards â a real plan, the right plants, and an outdoor space you will love. From SmartyPlants."> 39<meta name="twitter:image" content="https://smartyplantsfl.com/assets/og-image.png"> 40 41<!-- /@seo --> 42<link rel="stylesheet" href="../../styles.css"> 43<style> 44 body { margin: 0; background: var(--surface-page); } 45 @keyframes sp-gal-rise { from { transform: translateY(14px); } to { transform: none; } } 46 /* Page header â heavy brand gradient over the botanical photo */ 47 .page-header { position: relative; } 48 .page-header::after { 49 content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1; 50 background: 51 linear-gradient(180deg, rgba(46,52,40,0.55) 0%, rgba(46,52,40,0.30) 38%, rgba(46,52,40,0.78) 100%), 52 linear-gradient(105deg, var(--sp-deep-soil) 4%, rgba(46,52,40,0.45) 46%, rgba(74,82,64,0.30) 100%); 53 } 54 .page-header > section > div:last-child { position: relative; z-index: 2; } 55</style>
56<script>
vendor: 327 bytes, lines 56-60
56(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': 57new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], 58j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 59'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); 60})(window,document,'script','dataLayer','
60GTM-NT7H99MK
vendor: 3 bytes, line 60
60');
60</script>
60</head> 61<body> 62<style>#sp-seo{display:none}</style><noscript><style>#sp-seo{display:block!important}</style></noscript> 63<div id="root"> 64 <!-- SEO fallback: crawlable content + link graph, shown until React mounts (it then replaces this). --> 65 <div id="sp-seo" style="max-width:880px;margin:0 auto;padding:48px 24px;font-family:'Inter',system-ui,sans-serif;color:#2E3428;"> 66 <img src="../../assets/logo-wordmark-sage.png" alt="SmartyPlants â Nursery + Cafe" style="height:40px;margin-bottom:28px;"> 67 <nav aria-label="Primary" style="display:flex;flex-wrap:wrap;gap:16px;font-size:14px;font-weight:600;margin-bottom:36px;"> 68 <a href="/" style="color:#4A5240;text-decoration:none;">Home</a> 69 <a href="/plants" style="color:#4A5240;text-decoration:none;">Plants & More</a> 70 <a href="/services" style="color:#4A5240;text-decoration:none;">Services</a> 71 <a href="/landscape-design" style="color:#4A5240;text-decoration:none;">Landscape Design</a> 72 <a href="/landscape-installation" style="color:#4A5240;text-decoration:none;">Landscape Installation</a> 73 <a href="/plant-sourcing" style="color:#4A5240;text-decoration:none;">Plant Sourcing</a> 74 <a href="/trade-partner-program" style="color:#4A5240;text-decoration:none;">Trade Partner Program</a> 75 <a href="/events" style="color:#4A5240;text-decoration:none;">Events</a> 76 <a href="/our-story" style="color:#4A5240;text-decoration:none;">Our Story</a> 77 <a href="/our-team" style="color:#4A5240;text-decoration:none;">Our Team</a> 78 <a href="/employment" style="color:#4A5240;text-decoration:none;">Employment</a> 79 <a href="/the-dirt" style="color:#4A5240;text-decoration:none;">The Dirt</a> 80 <a href="/contact" style="color:#4A5240;text-decoration:none;">Contact Us</a> 81 </nav> 82 <p style="font-size:12px;letter-spacing:0.12em;text-transform:uppercase;color:#7A8C6E;font-weight:700;margin:0 0 14px;">Lake Worth Beach, FL · Nursery + Cafe</p> 83 <h1 style="font-family:'Playfair Display',Georgia,serif;font-weight:800;font-size:clamp(34px,6vw,60px);line-height:1.05;letter-spacing:-0.015em;color:#2E3428;margin:0 0 18px;">Landscape design for Lake Worth Beach yards.</h1> 84 <p style="font-size:18px;line-height:1.6;color:#4A5240;max-width:62ch;margin:0 0 28px;">A real plan for your yard â the right plants, smart layout, and an outdoor space you will love. Custom landscape design from SmartyPlants.</p> 85 <p style="font-size:16px;line-height:1.7;color:#4A5240;margin:0 0 28px;"><a href="/landscape-installation" style="color:#C96A3A;">Landscape installation</a> · <a href="/plant-sourcing" style="color:#C96A3A;">Plant sourcing</a> · <a href="/contact?topic=design" style="color:#C96A3A;">Book a design consult</a> · <a href="/services" style="color:#C96A3A;">All services</a></p> 86 <p style="font-size:15px;line-height:1.7;color:#7A8C6E;margin:0;">SmartyPlants Nursery + Cafe · 1515 N. Dixie Hwy, Lake Worth Beach, FL 33460 · (561) 540-6296 · <a href="/contact" style="color:#C96A3A;">Contact us</a></p> 87 </div> 88</div>
89<script src="https://unpkg.com/[email protected]/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
vendor: 1 bytes, line 89
89
90<script src="https://unpkg.com/[email protected]/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
vendor: 1 bytes, line 90
90
91<script src="https://unpkg.com/@babel/[email protected]/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
vendor: 1 bytes, line 91
91
92<script src="../../_ds_bundle.js"></script>
92 93<style> 94 /* Closing CTA â grayscale photo, barely showing through the brand gradient */ 95 .come-see-us img { filter: grayscale(1) contrast(0.95); opacity: 0.16; } 96 /* Standard media treatment: warm color grade under a brand gradient */ 97 .approach-media img { filter: saturate(0.9) contrast(1.03) sepia(0.12) brightness(0.99); } 98 /* Plant-idea marquee */ 99 @keyframes sp-marqL { to { transform: translateX(-50%); } } 100 @keyframes sp-marqR { from { transform: translateX(-50%); } } 101 .sp-mrow { display: flex; width: max-content; animation: sp-marqL 44s linear infinite; } 102 .sp-mrow.rev { animation: sp-marqR 39s linear infinite; } 103 .sp-marq:hover .sp-mrow { animation-play-state: paused; } 104 @media (prefers-reduced-motion: reduce) { .sp-mrow { animation: none; flex-wrap: wrap; justify-content: center; } } 105</style>
106<script type="text/babel" src="../../ui_kits/storefront/Header.jsx"></script>
vendor: 1 bytes, line 106
106
107<script type="text/babel" src="../../ui_kits/storefront/Footer.jsx"></script>
vendor: 1 bytes, line 107
107
108<script type="text/babel" src="../../ui_kits/storefront/Gallery.jsx"></script>
vendor: 1 bytes, line 108
108
109<script type="text/babel"> 110 const { MediaHero, MediaSplit, Button } = window.SmartyPlantsDesignSystem_55dd3b; 111 const P = '../../assets/placeholders/'; 112 113 function PlantMarquee({ eyebrow, rowA, rowB }) { 114 const Sep = () => ( 115 <span style={{ display: 'inline-block', width: 8, height: 8, background: 'var(--accent)', transform: 'rotate(45deg)', margin: '0 clamp(22px, 3.2vw, 46px)', flex: 'none' }} /> 116 ); 117 const Row = ({ items, rev }) => ( 118 <div className="sp-marq" style={{ overflow: 'hidden', padding: '12px 0', WebkitMaskImage: 'linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent)', maskImage: 'linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent)' }}> 119 <div className={'sp-mrow' + (rev ? ' rev' : '')}> 120 {[...items, ...items].map((it, i) => ( 121 <span key={i} style={{ display: 'inline-flex', alignItems: 'center', whiteSpace: 'nowrap' }}> 122 <span style={{ fontFamily: 'var(--font-display)', fontWeight: 'var(--fw-display)', fontSize: 'clamp(30px, 4.4vw, 56px)', color: 'var(--text-strong)', lineHeight: 1.05, letterSpacing: '-0.012em' }}>{it}</span> 123 <Sep /> 124 </span> 125 ))} 126 </div> 127 </div> 128 ); 129 return ( 130 <section style={{ background: 'var(--surface-cream)', padding: 'clamp(48px, 7vw, 88px) 0', overflow: 'hidden' }}> 131 <div style={{ textAlign: 'center', padding: '0 clamp(20px, 5vw, 56px)', marginBottom: 'clamp(20px, 3vw, 34px)' }}> 132 <div className="sp-eyebrow" style={{ color: 'var(--accent)', justifyContent: 'center', display: 'inline-flex' }}>{eyebrow}</div> 133 </div> 134 <Row items={rowA} /> 135 <Row items={rowB} rev /> 136 </section> 137 ); 138 } 139 140 // Process steps â text only. 141 const STEPS = [ 142 { n: '01', t: 'Walk the site', d: 'We read your light, drainage, and how the space gets used before a single plant is chosen.' }, 143 { n: '02', t: 'Draw the plan', d: 'A scaled layout with a plant palette that thrives in your exact conditions â and grows in well together.' }, 144 { n: '03', t: 'Review together', d: 'We walk you through it, swap anything that does not feel right, and lock quantities.' }, 145 { n: '04', t: 'Plant it', d: 'Pick everything up in one trip, or have our crew install and mulch it for you.' }, 146 ]; 147 148 // Rotating gallery â 6 project shots. 149 const WORK = [ 150 { src: P + 'scene-shade.png', label: 'Courtyard · Parrot Cove', title: 'A shaded courtyard, layered.', body: 'Ferns and calatheas under an oak, lit for the evening.' }, 151 { src: P + 'scene-bed-sun.png', label: 'Front yard · Bryant Park', title: 'Full-sun beds that bloom all year.', body: 'Salvia, firebush, and muhly massed for movement and color.' }, 152 { src: P + 'scene-pots.png', label: 'Entry · College Park', title: 'A welcome that feels finished.', body: 'Glazed statement pots framing the door, planted to scale.' }, 153 { src: P + 'scene-fountains.png', label: 'Patio · Lake Osborne', title: 'Water, where you sit.', body: 'A self-contained fountain anchors the gathering corner.' }, 154 { src: P + 'scene-cafe.png', label: 'Cafe terrace · Lake Worth Beach', title: 'An outdoor room people linger in.', body: 'Soft greenery and shade built around the way the space is used.' }, 155 { src: P + 'scene-accessories.png', label: 'Side garden · Mango Groves', title: 'The details that pull it together.', body: 'Trellis, edging, and warm landscape lighting to finish.' }, 156 ]; 157 158 function App() { 159 const [toast, setToast] = React.useState(null); 160 const tRef = React.useRef(null); 161 const show = () => {}; 162 const scrollTo = (id) => { 163 const el = document.getElementById(id); 164 if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 64, behavior: 'smooth' }); 165 }; 166 167 return ( 168 <> 169 <Header active="Services" onLogo={() => { window.location.href = '/'; }} /> 170 171 {/* HERO â landing CTA up top */} 172 <div className="page-header"> 173 <MediaHero 174 src="../../assets/header-design-bromeliad.jpg" 175 height="tall" 176 align="bottom-left" 177 scrim="none" 178 eyebrow="Services · Landscape Design" 179 title="Design that fits the way you live outside." 180 support="Tell us about your space and how you want to use it. We hand back a plan you'll actually love â and the plants to build it." 181 actions={ 182 <Button variant="primary" size="lg" iconRight="â" onClick={() => { window.location.href = '/contact?topic=design'; }}> 183 Book a design consult 184 </Button> 185 } 186 /> 187 </div> 188 189 {/* INTRO statement */} 190 <section style={{ background: 'var(--surface-cream)', padding: 'clamp(56px, 8vw, 112px) clamp(20px, 5vw, 56px)' }}> 191 <div style={{ maxWidth: 880, margin: '0 auto', textAlign: 'center' }}> 192 <div className="sp-eyebrow" style={{ color: 'var(--accent)', justifyContent: 'center', display: 'inline-flex' }}>The idea</div> 193 <h2 style={{ 194 fontFamily: 'var(--font-display)', fontWeight: 'var(--fw-display)', 195 color: 'var(--text-strong)', margin: '16px 0 0', 196 fontSize: 'clamp(30px, 4.4vw, 56px)', lineHeight: 1.08, letterSpacing: '-0.014em', textWrap: 'balance', 197 }}> 198 A garden should look inevitable â like it was always meant to be there. 199 </h2> 200 <p style={{ 201 fontFamily: 'var(--font-sans)', color: 'var(--text-muted)', 202 fontSize: 'var(--text-lg)', lineHeight: 1.6, margin: '22px auto 0', maxWidth: 620, 203 }}> 204 Our designers work with Florida light, sandy soil, and real budgets â not a mood board. The result is a planting plan that thrives where it's planted and feels like it grew up with the house. 205 </p> 206 </div> 207 208 <div style={{ 209 maxWidth: 880, margin: '44px auto 0', display: 'flex', flexWrap: 'wrap', 210 alignItems: 'center', justifyContent: 'center', gap: 'clamp(18px, 3vw, 32px)', 211 }}> 212 <div style={{ 213 fontFamily: 'var(--font-sans)', fontWeight: 'var(--fw-bold)', 214 fontSize: 'var(--text-xs)', letterSpacing: 'var(--tracking-caps)', 215 textTransform: 'uppercase', color: 'var(--text-muted)', 216 }}>Proud member of the</div> 217 <div style={{ 218 background: '#fff', borderRadius: 'var(--radius-lg)', boxShadow: 'var(--shadow-md)', 219 padding: '16px 24px', display: 'inline-flex', 220 }}> 221 <img src="../../assets/partners/yardzen-pro-network.png" alt="Yardzen Pro Network" style={{ height: 40, width: 'auto', display: 'block' }} /> 222 </div> 223 </div> 224 </section> 225 {/* APPROACH split */} 226 <div className="approach-media"> 227 <MediaSplit 228 tone="light" 229 mediaSide="right" 230 ratio="4 / 3" 231 src={P + 'design-deck-lounge.jpg'} 232 overlay 233 eyebrow="The approach" 234 title="One designer, start to finish." 235 body="You work with the same person from the first site visit to the day it's planted. They know your space, your taste, and what you said you'd never water again â so nothing gets lost in a handoff." 236 actions={ 237 <Button variant="primary" size="lg" iconRight="â" onClick={() => { window.location.href = '/contact?topic=design'; }}> 238 Start your design 239 </Button> 240 } 241 /> 242 </div> 243 244 {/* PROCESS band */} 245 <section style={{ background: 'var(--grad-soil)', color: 'var(--text-on-dark)', padding: 'clamp(56px, 8vw, 104px) clamp(20px, 5vw, 56px)' }}> 246 <div style={{ maxWidth: 'var(--container)', margin: '0 auto' }}> 247 <div style={{ maxWidth: 560 }}> 248 <div className="sp-eyebrow" style={{ color: 'var(--accent)' }}>How it comes together</div> 249 <h2 style={{ 250 fontFamily: 'var(--font-display)', fontWeight: 'var(--fw-display)', 251 color: 'var(--text-on-dark)', margin: '14px 0 0', 252 fontSize: 'clamp(28px, 3.8vw, 48px)', lineHeight: 1.08, letterSpacing: '-0.012em', 253 }}>Four steps, no guesswork.</h2> 254 </div> 255 <div style={{ 256 marginTop: 'clamp(32px, 5vw, 56px)', 257 display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))', gap: '1px', 258 background: 'var(--border-on-dark)', border: '0.5px solid var(--border-on-dark)', borderRadius: 'var(--radius-lg)', overflow: 'hidden', 259 }}> 260 {STEPS.map((s) => ( 261 <div key={s.n} style={{ background: 'var(--surface-darkest)', padding: 'clamp(24px, 3vw, 36px)' }}> 262 <div style={{ fontFamily: 'var(--font-display)', fontSize: 'var(--text-3xl)', color: 'var(--accent)', lineHeight: 1 }}>{s.n}</div> 263 <div style={{ fontFamily: 'var(--font-sans)', fontWeight: 'var(--fw-semibold)', fontSize: 'var(--text-lg)', color: 'var(--text-on-dark)', marginTop: 16 }}>{s.t}</div> 264 <p style={{ fontFamily: 'var(--font-sans)', fontSize: 'var(--text-sm)', color: 'var(--text-on-dark-muted)', lineHeight: 1.55, margin: '8px 0 0' }}>{s.d}</p> 265 </div> 266 ))} 267 </div> 268 </div> 269 </section> 270 271 {/* FULL-BLEED statement */} 272 <MediaHero 273 src={P + 'scene-wide.png'} 274 height="short" 275 align="center" 276 scrim="full" 277 eyebrow="Built to grow in" 278 title="We design for year three, not just opening day." 279 /> 280 281 {/* ROTATING GALLERY */} 282 <div id="gallery"> 283 <PlantMarquee 284 eyebrow="Plants we're designing with" 285 rowA={["Firebush", "Coontie", "Muhly grass", "Crinum lily", "Simpson's stopper", "Blue plumbago"]} 286 rowB={["Beautyberry", "Coral honeysuckle", "Sabal palm", "Walter's viburnum", "Society garlic", "Firespike"]} 287 /> 288 </div> 289 290 {/* CLOSING CTA band */}
291 <div className="come-see-us"> 292 <MediaHero 293 src="../../assets/come-see-us.jpg" 294 height="tall" 295 align="center" 296 scrim="none" 297 style={{ background: 'var(--grad-soil)' }} 298 eyebrow="Ready when you are" 299 title="Let's design your space." 300 support="Bring a few photos. Leave with a plan and every plant in your cart." 301 actions={ 302 <Button variant="primary" size="lg" iconRight="â" onClick={() => { window.location.href = '/contact?topic=design'; }}> 303 Book a design consult 304 </Button> 305 } 306 /> 307 </div> 308 309 <Footer /> 310 </> 311 ); 312 } 313 { const _root = document.getElementById('root'); _root.textContent = ''; ReactDOM.createRoot(_root).render(<App />); } 314</script>
vendor: 68 bytes, lines 314-315
314 315<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=
315GTM-NT7H99MK
vendor: 82 bytes, lines 315-316
315" 316height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
316</body> 317</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.