|
1 | 1 | import React, { useState } from 'react'; |
| 2 | +import BrowserOnly from '@docusaurus/BrowserOnly'; |
2 | 3 | import styles from './styles.module.css'; |
3 | 4 |
|
4 | 5 | export default function Movement() { |
@@ -69,96 +70,101 @@ export default function Movement() { |
69 | 70 |
|
70 | 71 | return ( |
71 | 72 | <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 | + {() => ( |
89 | 75 |
|
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> |
116 | 93 |
|
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> |
119 | 120 |
|
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> |
135 | 123 |
|
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> |
151 | 139 |
|
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> |
156 | 155 |
|
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> |
162 | 168 | </section > |
163 | 169 | ); |
164 | 170 | } |
0 commit comments