benefits.js
1 import React, { Component } from "react"; 2 import styled from "styled-components"; 3 import { Container } from "./boxes"; 4 import KeyboardArrowRightIcon from "@material-ui/icons/KeyboardArrowRight"; 5 import ScrollableAnchor from "react-scrollable-anchor"; 6 import { Carousel } from "react-responsive-carousel"; 7 8 const Line = styled.div` 9 width: 35%; 10 border-bottom: 1px solid #a8a8a8; 11 12 @media (max-width: 1100px) { 13 width: 34%; 14 } 15 16 @media (max-width: 770px) { 17 position: absolute; 18 width: 30%; 19 left: ${(props) => { 20 if (props.left) { 21 return "0"; 22 } 23 }}; 24 right: ${(props) => { 25 if (props.right) { 26 return "0"; 27 } 28 }}; 29 } 30 `; 31 32 const Title = styled.div` 33 width: 15%; 34 font-size: 1.8rem; 35 color: #2c2c2c; 36 margin: 0 2.5rem 0 2.5rem; 37 text-align: center; 38 39 @media (max-width: 1024px) { 40 font-size: 1rem; 41 } 42 `; 43 44 const Box = styled.div` 45 background: white; 46 width: 250px; 47 height: 400px; 48 margin: 5% 1.5% 2% 1.5%; 49 border: 1px solid #a8a8a8; 50 box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); 51 box-sizing: border-box; 52 border-radius: 8px; 53 float: left; 54 font-size: 1.5rem; 55 56 @media (max-width: 1160px) { 57 width: 220px; 58 height: 360px; 59 } 60 61 @media (max-width: 1024px) { 62 background: black; 63 border: none; 64 float: none; 65 text-align: center; 66 width: auto; 67 height: auto; 68 padding-bottom: 2rem; 69 margin: auto; 70 } 71 72 hr { 73 width: 80px; 74 border: 1px solid #a8a8a8; 75 margin-top: 40px; 76 } 77 78 img { 79 display: block; 80 margin-top: 60px; 81 margin-left: auto; 82 margin-right: auto; 83 84 @media (max-width: 1160px) { 85 margin-top: 40px; 86 } 87 @media (max-width: 1024px) { 88 filter: brightness(0) invert(1); 89 width: auto !important; 90 } 91 } 92 `; 93 94 // Category in the boxes 95 const Category = styled.p` 96 font-size: 1.2rem; 97 text-align: center; 98 color: black; 99 margin-top: 20px; 100 font-weight: bold; 101 102 @media (max-width: 1160px) { 103 margin-top: 30px; 104 } 105 106 @media (max-width: 1024px) { 107 color: white; 108 } 109 `; 110 111 // details in the boxes 112 const Text = styled.section` 113 font-weight: normal; 114 font-size: 0.85rem; 115 line-height: 180%; 116 text-align: left; 117 color: black; 118 padding: 0.5rem 2rem 0 2rem; 119 margin: auto; 120 121 @media (max-width: 1160px) { 122 font-size: 0.8rem; 123 } 124 125 @media (max-width: 1024px) { 126 text-align: center; 127 font-size: 1rem; 128 color: white; 129 padding: 0.5rem 2rem 1rem 2rem; 130 } 131 `; 132 133 // CTA below the boxes 134 const BecomeAmbassador = styled.button` 135 136 font-family: 'DM Sans', sans-serif; 137 position: relative; 138 z-index: 1; 139 background-color: white; 140 border-radius: 5px; 141 display: inline-flex; 142 align-items: center; 143 padding: 1rem 1rem 1rem 1.2rem; 144 cursor: pointer; 145 border: 1px solid #000000; 146 box-sizing: border-box; 147 color: #000000; 148 font-size: 1rem; 149 150 :hover { 151 border: 1px solid grey; 152 background: grey; 153 a { 154 color: white; 155 } 156 color: white; 157 } 158 159 @media(max-width: 1024px) { 160 background: black; 161 color: white; 162 a { 163 color: white; 164 } 165 } 166 `; 167 168 var locale = 169 navigator.userLanguage || 170 (navigator.languages.slice(0, 2) && navigator.languages[0].slice(0, 2)) || 171 "en"; 172 173 function becomeAmbassador({ locale }) { 174 if (locale === "zh") { 175 return ( 176 <a 177 href="mailto:ambassador@status.im?subject=Status Ambassador Application&body=Please find the application form at https://github.com/status-im/ambassador.status.im/blob/master/application-form.md" 178 target="_blank" 179 rel="noopener noreferrer" 180 > 181 <BecomeAmbassador> 182 Become an ambassador <KeyboardArrowRightIcon /> 183 </BecomeAmbassador> 184 </a> 185 ); 186 } else { 187 return ( 188 <a 189 href="https://docs.google.com/forms/d/e/1FAIpQLSdhMBGfCRQ-CuFhB3sFFm9MBtsQd6kJybkGI2M-JqpXOrY2pA/viewform?usp=sf_link" 190 target="_blank" 191 rel="noopener noreferrer" 192 > 193 <BecomeAmbassador> 194 Become an ambassador <KeyboardArrowRightIcon /> 195 </BecomeAmbassador> 196 </a> 197 ); 198 } 199 } 200 201 // Box content 202 const funding = ( 203 <Box className="funding-bg"> 204 <img 205 src={require("../images/funding.svg")} 206 alt="Status Logo" 207 width="auto" 208 height="120px" 209 /> 210 <Category>Funding</Category> 211 <hr /> 212 <Text>Receive funding to host meetups, workshops, and projects</Text> 213 </Box> 214 ); 215 216 const support = ( 217 <Box className="support-bg"> 218 <img 219 src={require("../images/support.svg")} 220 alt="Status Logo" 221 width="auto" 222 height="120px" 223 /> 224 <Category>Access & Support</Category> 225 <hr /> 226 <Text> 227 Help from core contributors on technical, organizational, and other 228 projects 229 </Text> 230 </Box> 231 ); 232 233 const rewards = ( 234 <Box className="rewards-bg"> 235 <img 236 src={require("../images/rewards.svg")} 237 alt="Status Logo" 238 width="auto" 239 height="120px" 240 /> 241 <Category>Rewards</Category> 242 <hr /> 243 <Text>Get some cool Status swag and earn SNT</Text> 244 </Box> 245 ); 246 247 const future = ( 248 <Box className="future-bg"> 249 <img 250 src={require("../images/future.svg")} 251 alt="Status Logo" 252 width="auto" 253 height="120px" 254 /> 255 <Category>Build the future</Category> 256 <hr /> 257 <Text> 258 Active contribution in building the next generation of the internet 259 </Text> 260 </Box> 261 ); 262 263 export class Benefits extends Component { 264 render() { 265 return ( 266 <ScrollableAnchor id={"benefits"}> 267 <div style={{ marginTop: "3rem", paddingTop: "1rem" }}> 268 <Container style={{ marginBottom: "2rem" }}> 269 <Line left /> 270 <Title> Benefits </Title> 271 <Line right /> 272 </Container> 273 <Container className="box-display"> 274 {funding} 275 {support} 276 {rewards} 277 {future} 278 </Container> 279 <Carousel 280 className="carousel-display carousel-center" 281 showThumbs={false} 282 showArrows={false} 283 showStatus={false} 284 > 285 {funding} 286 {support} 287 {rewards} 288 {future} 289 </Carousel> 290 <Container style={{ marginTop: "1rem" }}> 291 <Container style={{ marginTop: "1rem" }}> 292 {" "} 293 {becomeAmbassador({ locale })}{" "} 294 </Container> 295 </Container> 296 </div> 297 </ScrollableAnchor> 298 ); 299 } 300 } 301 302 export default Benefits;