PageSourceSearch

https://smartyplantsfl.com/landscape-design

html smartyplantsfl.com collected 2026-10-10 00:50:37 UTC 19,490 bytes, 317 lines download raw bytes

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.