https://trygrove.app/support

1<!DOCTYPE html>
2<html lang="en">
3<head>
4<meta charset="utf-8">
5<meta name="viewport" content="width=device-width, initial-scale=1">
6<title>Support | Grove</title>
7<meta name="description" content="Get help with Grove. Send us a message, or reach the team at [email protected].">
8<link rel="canonical" href="https://trygrove.app/support">
9<meta property="og:type" content="website">
10<meta property="og:site_name" content="Grove">
11<meta property="og:title" content="Support | Grove">
12<meta property="og:description" content="Get help with Grove. Send us a message, or reach the team at [email protected].">
13<meta property="og:url" content="https://trygrove.app/support">
14<meta property="og:image" content="https://trygrove.app/assets/forest-card.jpg">
15<meta name="twitter:card" content="summary_large_image">
16<meta name="theme-color" content="#F5F1E6">
17<link rel="icon" href="/assets/favicon.svg" type="image/svg+xml">
18<link rel="apple-touch-icon" href="/assets/apple-touch-icon.png">
19<link rel="preconnect" href="https://fonts.googleapis.com">
20<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
21<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,[email protected],700&family=IBM+Plex+Mono:wght@400;500&family=Inter:wght@400;500;600&family=Newsreader:ital,opsz,wght@0,6..72,300;0,6..72,400;0,6..72,500;1,6..72,400;1,6..72,500&display=swap">
22  <style>
23    body { margin: 0; background: #F5F1E6; font-family: Inter, sans-serif; }
24    a { color: inherit; text-decoration: none; }
25    a:hover { opacity: 0.75; }
26    html { scroll-behavior: smooth; }
27    a, [style-hover] { transition: color .22s cubic-bezier(.2,.7,.2,1), background-color .22s cubic-bezier(.2,.7,.2,1), border-color .22s cubic-bezier(.2,.7,.2,1), opacity .22s cubic-bezier(.2,.7,.2,1); }

28    @keyframes fadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
29    @keyframes slowZoom { from { transform: scale(1); } to { transform: scale(1.07); } }
30    [data-hero] { opacity: 0; animation: fadeUp .8s cubic-bezier(.2,.7,.2,1) forwards; }
31    .rv-enabled [data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); }
32    .rv-enabled [data-reveal].rv-in { opacity: 1; transform: none; }
33    @media (prefers-reduced-motion: reduce) { [data-hero], .rv-enabled [data-reveal] { animation: none; opacity: 1; transform: none; transition: none; } }
34    @media (max-width: 900px) {
35      .gv-cols { flex-direction: column !important; }
36      .gv-sidecol { width: auto !important; flex: none !important; border-right: none !important; }
37      .gv-grid3, .gv-grid2 { display: flex !important; flex-direction: column !important; }
38      .gv-grid3 > div { grid-row: auto !important; border-right: none !important; }
39      .gv-grid2 > div { border-right: none !important; }
40      .gv-heroimg { width: 100% !important; max-height: 420px; }
41      .gv-emailcard { width: auto !important; }
42      .gv-content { padding-left: 0 !important; }
43      .gv-h1 { font-size: clamp(44px, 9vw, 64px) !important; }
44    }
45    @media (max-width: 680px) {
46      .gv-nav-links { display: none !important; }
47      .gv-sec { padding-left: 20px !important; padding-right: 20px !important; }
48      .gv-h1 { font-size: clamp(38px, 11vw, 52px) !important; }
49      .gv-h2 { font-size: clamp(28px, 8vw, 36px) !important; }
50      .gv-stats { flex-wrap: wrap !important; gap: 24px !important; }
51      .gv-btns { flex-wrap: wrap !important; }
52      .gv-cols { gap: 32px !important; }
53    }
54    ::selection { background: #F6F1C1; }
55  </style>

55
56<script async src="https://www.googletagmanager.com/gtag/js?id=

56G-6CRDWV1FR7

56"></script>

57<script>

57window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments);}gtag('js',new Date());gtag('config','

57G-6CRDWV1FR7

57');

57</script>

57
58</head>
59<body>
60<div style="min-width:0; min-height:100vh; display:flex; flex-direction:column">
61  <!-- NAV -->
62  <div style="position:sticky; top:0; z-index:50; background:rgba(245,241,230,0.94); backdrop-filter:blur(12px); border-bottom:1px solid rgba(31,41,37,0.2)">
63    <div class="gv-sec" style="max-width:1280px; margin:0 auto; padding:20px 40px; display:flex; align-items:center; justify-content:space-between">
64      <a href="/" style="display:flex; align-items:center; gap:10px">
65        <img src="/assets/logo-mark.svg" style="width:28px; height:28px" alt="Grove mark">
66        <span style="font-family:'Bricolage Grotesque',sans-serif; font-weight:700; font-size:21px; color:#1F2925">grove</span>
67      </a>
68      <div class="gv-nav-links" style="display:flex; gap:28px; font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:0.08em; color:#31373D">
69        <a href="/#features" style-hover="color:#9E5A23; opacity:1">FEATURES</a><a href="/#story" style-hover="color:#9E5A23; opacity:1">STORY</a><a href="/#reviews" style-hover="color:#9E5A23; opacity:1">REVIEWS</a><a href="/#faq" style-hover="color:#9E5A23; opacity:1">FAQ</a>
70      </div>
71      <a href="/#download" style="border:1.5px solid #1F2925; border-radius:4px; padding:9px 22px; font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:0.08em; color:#1F2925" style-hover="background:#1F2925; color:#F5F1E6; opacity:1">DOWNLOAD</a>
72    </div>
73  </div>
74
75  <!-- BODY -->
76  <div class="gv-cols gv-sec" style="max-width:1280px; margin:0 auto; width:100%; box-sizing:border-box; display:flex; flex:1; padding:0 40px">
77    <div class="gv-sidecol" style="flex:none; width:300px; padding:72px 48px 72px 0; border-right:1px solid rgba(31,41,37,0.2)">
78      <div style="font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:0.1em; color:#9E5A23">HELP CENTER</div>
79      <div style="display:flex; flex-direction:column; gap:14px; margin-top:24px; font-family:Newsreader,serif; font-size:20px; color:#1F2925">
80        <a href="/support" style="border-bottom:1px solid #1F2925; display:inline-block; width:fit-content; padding-bottom:2px">Support</a>
81        <a href="/privacy" style="color:#727272" style-hover="color:#1F2925; opacity:1">Privacy</a>
82        <a href="/terms" style="color:#727272" style-hover="color:#1F2925; opacity:1">Terms</a>
83      </div>
84      <a href="/" style="display:inline-block; margin-top:40px; font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:0.08em; color:#31373D">← GET BACK</a>
85    </div>
86    <div class="gv-content" style="flex:1; padding:72px 0 88px 56px; max-width:620px">
87      <h1 data-hero class="gv-h1" style="font-family:Newsreader,serif; font-weight:400; font-size:56px; line-height:1.05; color:#1F2925; margin:0">Support</h1>
88      <p data-hero style="animation-delay:100ms; font-size:16px; line-height:1.7; color:#31373D; margin:20px 0 0">Reach out to our team for support or assistance.</p>
89      <form data-form="contact" action="https://grove-marketing.grove-web-working-folder.workers.dev/api/contact" method="post" novalidate style="margin:0">
90        <div data-form-success hidden style="border:1px solid rgba(31,41,37,0.3); background:#EFEADD; padding:28px; margin-top:36px">
91          <div style="font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:0.08em; color:#1F2925; line-height:1.8">THANK YOU! YOUR SUBMISSION HAS BEEN RECEIVED! 🌱<br>WE'LL GET BACK TO YOU SHORTLY.</div>
92        </div>
93        <div data-form-fields data-hero style="animation-delay:200ms; display:flex; flex-direction:column; gap:20px; margin-top:36px">
94          <div style="display:flex; flex-direction:column; gap:8px">
95            <label for="contact-name" style="font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:0.1em; color:#727272">NAME</label>
96            <input id="contact-name" type="text" name="name" required aria-label="Name" style="background:transparent; border:1px solid rgba(31,41,37,0.35); padding:13px 16px; font-family:Inter,sans-serif; font-size:14px; color:#1F2925; outline:none" style-focus="border:1px solid #1F2925">
97          </div>
98          <div style="display:flex; flex-direction:column; gap:8px">
99            <label for="contact-email" style="font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:0.1em; color:#727272">EMAIL ADDRESS</label>
100            <input id="contact-email" type="email" name="email" required aria-label="Email address" style="background:transparent; border:1px solid rgba(31,41,37,0.35); padding:13px 16px; font-family:Inter,sans-serif; font-size:14px; color:#1F2925; outline:none" style-focus="border:1px solid #1F2925">
101          </div>
102          <div style="display:flex; flex-direction:column; gap:8px">
103            <label for="contact-message" style="font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:0.1em; color:#727272">MESSAGE</label>
104            <textarea id="contact-message" name="message" required aria-label="Message" rows="6" style="background:transparent; border:1px solid rgba(31,41,37,0.35); padding:13px 16px; font-family:Inter,sans-serif; font-size:14px; color:#1F2925; outline:none; resize:vertical" style-focus="border:1px solid #1F2925"></textarea>
105          </div>
106          <button type="submit" style="background:#1F2925; padding:15px 0; text-align:center; font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:0.1em; color:#F5F1E6; cursor:pointer; border-radius:4px; border:none; width:100%; margin:0; appearance:none; -webkit-appearance:none" style-hover="background:#31432C">SEND MESSAGE ↗</button>
107        </div>
108        <div data-form-error hidden style="font-family:'IBM Plex Mono',monospace; font-size:11px; color:#9E5A23; margin-top:20px">Oops! Something went wrong while submitting the form.</div>
109      </form>
110      <div style="margin-top:48px; border-top:1px solid rgba(31,41,37,0.2); padding-top:20px; font-family:'IBM Plex Mono',monospace; font-size:11px; line-height:2; letter-spacing:0.06em; color:#727272">EMAIL: <a href="mailto:[email protected]" style="color:inherit; text-decoration:none">[email protected]</a><br>PHONE: <a href="tel:+14154842569" style="color:inherit; text-decoration:none">415-484-2569</a></div>
111    </div>
112  </div>
113
114  <!-- FOOTER -->
115  <div style="background:#171F1B; border-top:1px solid rgba(245,241,230,0.15)">
116    <div class="gv-sec" style="max-width:1280px; margin:0 auto; padding:56px 40px 40px">
117      <div class="gv-cols" style="display:flex; justify-content:space-between; align-items:flex-start; gap:48px">
118        <div>
119          <div style="display:flex; align-items:center; gap:10px">
120            <img src="/assets/logo-mark-white.png" style="width:26px; height:26px" alt="Grove mark" loading="lazy" decoding="async">

121            <span style="font-family:'Bricolage Grotesque',sans-serif; font-weight:700; font-size:20px; color:#F5F1E6">grove</span>
122          </div>
123          <div style="font-family:Newsreader,serif; font-size:20px; font-style:italic; color:rgba(245,241,230,0.75); margin-top:16px">Help us reforest the planet!</div>
124        </div>
125        <div style="display:flex; gap:72px">
126          <div style="display:flex; flex-direction:column; gap:12px">
127            <div style="font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:0.12em; color:rgba(245,241,230,0.45)">COMPANY</div>
128            <a href="/about" style="font-size:13px; color:rgba(245,241,230,0.85)" style-hover="color:#F6F1C1; opacity:1">About</a>
129            <a href="/privacy" style="font-size:13px; color:rgba(245,241,230,0.85)" style-hover="color:#F6F1C1; opacity:1">Privacy</a>
130            <a href="/terms" style="font-size:13px; color:rgba(245,241,230,0.85)" style-hover="color:#F6F1C1; opacity:1">Terms</a>
131            <a href="/support" style="font-size:13px; color:rgba(245,241,230,0.85)" style-hover="color:#F6F1C1; opacity:1">Support</a>
132          </div>
133          <div style="display:flex; flex-direction:column; gap:12px">
134            <div style="font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:0.12em; color:rgba(245,241,230,0.45)">SOCIAL MEDIA</div>
135            <a href="https://www.instagram.com/grove_regeneration/" style="font-size:13px; color:rgba(245,241,230,0.85)" style-hover="color:#F6F1C1; opacity:1">Instagram</a>
136            <a href="https://www.tiktok.com/@grove_trees" style="font-size:13px; color:rgba(245,241,230,0.85)" style-hover="color:#F6F1C1; opacity:1">TikTok</a>
137            <a href="https://www.linkedin.com/company/grove-trees/" style="font-size:13px; color:rgba(245,241,230,0.85)" style-hover="color:#F6F1C1; opacity:1">Linkedin</a>
138            <a href="https://x.com/grove_trees" style="font-size:13px; color:rgba(245,241,230,0.85)" style-hover="color:#F6F1C1; opacity:1">Twitter</a>
139          </div>
140        </div>
141      </div>
142      <div style="margin-top:48px; border-top:1px solid rgba(245,241,230,0.15); padding-top:20px; font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:0.08em; color:rgba(245,241,230,0.4)">GROVE REGENERATION · A DBA OF DREAMLABSCA, LLC · GUERNEVILLE, CA</div>
143    </div>
144  </div>
145</div>

146<script src="/polish.js" defer></script>

146

147<script src="/app.js" defer></script>

147

148<script type="module" src="https://static.cloudflareinsights.com/beacon.min.js/v31edd6df95cf4e85bb4c19e7a9bdbcba1788362987495" integrity="sha512-iIg7k2xntmwu6/uSb5tpc/hySgZc4eoL31yB29W6tJFo2akwjPWcEqnCEdJvGexCL0KEQwVYv5BlowfhVz26hg==" data-cf-beacon='{"version":"2024.11.0","token":"12afb85c84b7400aa795b1259f3ab988","r":1,"spa":2}' crossorigin="anonymous"></script>

148
149</body>
150</html>