Skip to content

Commit 56f46d0

Browse files
committed
Added use of browser only tag
1 parent 54b05dd commit 56f46d0

File tree

1 file changed

+90
-84
lines changed

1 file changed

+90
-84
lines changed

src/components/Movement/index.js

Lines changed: 90 additions & 84 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import React, { useState } from 'react';
2+
import BrowserOnly from '@docusaurus/BrowserOnly';
23
import styles from './styles.module.css';
34

45
export default function Movement() {
@@ -69,96 +70,101 @@ export default function Movement() {
6970

7071
return (
7172
<section className={styles.movementSection}>
72-
<div className={styles.container}>
73-
<div className={styles.content}>
74-
<h2 className={styles.title}>Let's Create a Movement 🚀</h2>
75-
<div className={styles.text}>
76-
<p>
77-
Risk-First is more than just a book — it's a different way to think about how software really gets built.
78-
And movements only grow when people share them.
79-
</p>
80-
<p>
81-
Here's how you can get in on the ground floor of a new movement and help spread the word and get rewarded:
82-
</p>
83-
<ol className={styles.steps}>
84-
<li>Share this page on LinkedIn, X (Twitter), or your favorite platform.</li>
85-
<li>Fill out this quick form with your email address and a link to your post.</li>
86-
<li>Get rewarded — I'll send you a special discount code to grab a <strong>free</strong> digital copy of Risk-First Software Development, Second Edition (Beta).</li>
87-
</ol>
88-
</div>
73+
<BrowserOnly>
74+
{() => (
8975

90-
<div className={styles.shareButtons}>
91-
<a
92-
href={shareLinks.linkedin}
93-
target="_blank"
94-
rel="noopener noreferrer"
95-
className={styles.shareButton}
96-
>
97-
Share on LinkedIn
98-
</a>
99-
<a
100-
href={shareLinks.twitter}
101-
target="_blank"
102-
rel="noopener noreferrer"
103-
className={styles.shareButton}
104-
>
105-
Share on X (Twitter)
106-
</a>
107-
<a
108-
href={shareLinks.facebook}
109-
target="_blank"
110-
rel="noopener noreferrer"
111-
className={styles.shareButton}
112-
>
113-
Share on Facebook
114-
</a>
115-
</div>
76+
<div className={styles.container}>
77+
<div className={styles.content}>
78+
<h2 className={styles.title}>Let's Create a Movement 🚀</h2>
79+
<div className={styles.text}>
80+
<p>
81+
Risk-First is more than just a book — it's a different way to think about how software really gets built.
82+
And movements only grow when people share them.
83+
</p>
84+
<p>
85+
Here's how you can get in on the ground floor of a new movement and help spread the word and get rewarded:
86+
</p>
87+
<ol className={styles.steps}>
88+
<li>Share this page on LinkedIn, X (Twitter), or your favorite platform.</li>
89+
<li>Fill out this quick form with your email address and a link to your post.</li>
90+
<li>Get rewarded — I'll send you a special discount code to grab a <strong>free</strong> digital copy of Risk-First Software Development, Second Edition (Beta).</li>
91+
</ol>
92+
</div>
11693

117-
<form className={styles.form} onSubmit={handleSubmit}>
118-
<h3 className={styles.formTitle}>👉 Share the Page & Claim Your Free Copy</h3>
94+
<div className={styles.shareButtons}>
95+
<a
96+
href={shareLinks.linkedin}
97+
target="_blank"
98+
rel="noopener noreferrer"
99+
className={styles.shareButton}
100+
>
101+
Share on LinkedIn
102+
</a>
103+
<a
104+
href={shareLinks.twitter}
105+
target="_blank"
106+
rel="noopener noreferrer"
107+
className={styles.shareButton}
108+
>
109+
Share on X (Twitter)
110+
</a>
111+
<a
112+
href={shareLinks.facebook}
113+
target="_blank"
114+
rel="noopener noreferrer"
115+
className={styles.shareButton}
116+
>
117+
Share on Facebook
118+
</a>
119+
</div>
119120

120-
<div className={styles.formGroup}>
121-
<label htmlFor="email" className={styles.label}>
122-
Email Address *
123-
</label>
124-
<input
125-
type="email"
126-
id="email"
127-
name="email"
128-
value={formData.email}
129-
onChange={handleInputChange}
130-
className={styles.input}
131-
required
132-
placeholder="your@email.com"
133-
/>
134-
</div>
121+
<form className={styles.form} onSubmit={handleSubmit}>
122+
<h3 className={styles.formTitle}>👉 Share the Page & Claim Your Free Copy</h3>
135123

136-
<div className={styles.formGroup}>
137-
<label htmlFor="socialLink" className={styles.label}>
138-
Link to Your Post *
139-
</label>
140-
<input
141-
type="url"
142-
id="socialLink"
143-
name="socialLink"
144-
value={formData.socialLink}
145-
onChange={handleInputChange}
146-
className={styles.input}
147-
required
148-
placeholder="https://linkedin.com/posts/..."
149-
/>
150-
</div>
124+
<div className={styles.formGroup}>
125+
<label htmlFor="email" className={styles.label}>
126+
Email Address *
127+
</label>
128+
<input
129+
type="email"
130+
id="email"
131+
name="email"
132+
value={formData.email}
133+
onChange={handleInputChange}
134+
className={styles.input}
135+
required
136+
placeholder="your@email.com"
137+
/>
138+
</div>
151139

152-
<button type="submit" className={styles.submitButton}>
153-
Claim My Discount Code
154-
</button>
155-
</form>
140+
<div className={styles.formGroup}>
141+
<label htmlFor="socialLink" className={styles.label}>
142+
Link to Your Post *
143+
</label>
144+
<input
145+
type="url"
146+
id="socialLink"
147+
name="socialLink"
148+
value={formData.socialLink}
149+
onChange={handleInputChange}
150+
className={styles.input}
151+
required
152+
placeholder="https://linkedin.com/posts/..."
153+
/>
154+
</div>
156155

157-
<p className={styles.footerText}>
158-
Together, we can build a community that puts risk where it belongs: at the center of how we understand software.
159-
</p>
160-
</div>
161-
</div>
156+
<button type="submit" className={styles.submitButton}>
157+
Claim My Discount Code
158+
</button>
159+
</form>
160+
161+
<p className={styles.footerText}>
162+
Together, we can build a community that puts risk where it belongs: at the center of how we understand software.
163+
</p>
164+
</div>
165+
</div>
166+
)}
167+
</BrowserOnly>
162168
</section >
163169
);
164170
}

0 commit comments

Comments
 (0)