···

       
1
       
1
       
+
       
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 595">

     

       
2
       
2
       
+
       
    <g fill="none" fill-rule="evenodd">

     

       
3
       
3
       
+
       
        <path fill="#80EAC7" d="M342.277 19.4l195.971 87.165C575.801 123.268 600 160.515 600 201.616v211.961c0 41.1-24.199 78.348-61.752 95.051l-195.971 87.165c-26.914 11.97-57.64 11.97-84.554 0L61.752 508.628C24.199 491.925 0 454.678 0 413.578V201.615c0-41.1 24.199-78.348 61.752-95.05L257.723 19.4c26.914-11.97 57.64-11.97 84.554 0z" transform="translate(0 -10)"></path>

     

       
4
       
4
       
+
       
        <path stroke="#202020" stroke-opacity=".3" stroke-width="24.247" d="M327.97 52.47c-17.86-7.951-38.259-7.938-56.109.037l-196.786 87.92c-11.832 5.286-21.557 13.803-28.324 24.238-6.767 10.435-10.576 22.788-10.576 35.747v213.356c0 13.37 3.935 26.113 10.923 36.873 6.988 10.76 17.03 19.538 29.244 24.975l195.557 87.055c17.825 7.935 38.179 7.938 56.006.008l195.732-87.07c12.219-5.436 22.265-14.214 29.256-24.975 6.991-10.762 10.928-23.508 10.928-36.881v-212.32c0-13.369-3.935-26.112-10.923-36.872-6.988-10.76-17.03-19.537-29.243-24.975L327.97 52.47z" transform="translate(0 -10)"></path>

     

       
5
       
5
       
+
       
        <path stroke="#202020" stroke-opacity=".6" stroke-width="24.007" d="M337.399 30.368c-23.808-10.59-50.99-10.59-74.798 0l-195.97 87.165c-16.611 7.387-30.268 19.319-39.772 33.948-9.504 14.63-14.856 31.956-14.856 50.135v211.961c0 18.18 5.352 35.506 14.856 50.135 9.504 14.63 23.161 26.561 39.771 33.949l195.971 87.164c23.808 10.59 50.99 10.59 74.798 0l195.97-87.164c16.611-7.388 30.268-19.32 39.772-33.949 9.504-14.629 14.856-31.956 14.856-50.135v-211.96c0-18.18-5.352-35.507-14.856-50.136-9.504-14.63-23.161-26.56-39.771-33.948L337.399 30.368z" transform="translate(0 -10)"></path>

     

       
6
       
6
       
+
       
        <text font-family="Helvetica" font-size="230" fill="#202020" class="abbr" x="50%" y="58%" text-anchor="middle" letter-spacing="-5.5">Rp</text>

     

       
7
       
7
       
+
       
        <text font-size="51" font-family="Helvetica-Bold, Helvetica" fill="#202020" class="desc" x="50%" y="76%" text-anchor="middle" letter-spacing="1">RUNPKG</text>

     

       
8
       
8
       
+
       
    </g>

     

       
9
       
9
       
+
       
</svg>

     

···

       
1
       
1
       
+
       


     

       
2
       
2
       
+
       
<svg xmlns="http://www.w3.org/2000/svg" width="600" height="595" viewBox="0 0 600 595">

     

       
3
       
3
       
+
       
    <g fill="none" fill-rule="evenodd">

     

       
4
       
4
       
+
       
        <path fill="#202020" d="M342.277 9.4l195.971 87.165C575.801 113.268 600 150.515 600 191.616v211.961c0 41.1-24.199 78.348-61.752 95.051l-195.971 87.165a104.029 104.029 0 0 1-84.554 0L61.752 498.628C24.199 481.925 0 444.678 0 403.578V191.615c0-41.1 24.199-78.348 61.752-95.05L257.723 9.4a104.029 104.029 0 0 1 84.554 0z"/>

     

       
5
       
5
       
+
       
        <path stroke="#FC6986" stroke-width="24.247" d="M553.161 442.006a68.635 68.635 0 0 1-29.745 25.342L332.27 552.082a79.877 79.877 0 0 1-64.741 0L76.38 467.348a68.635 68.635 0 0 1-29.745-25.342 68.635 68.635 0 0 1-11.113-37.463V190.841a68.635 68.635 0 0 1 11.113-37.463 68.635 68.635 0 0 1 29.745-25.342l191.148-84.733a79.877 79.877 0 0 1 64.74 0l191.148 84.733a68.635 68.635 0 0 1 29.745 25.342 68.635 68.635 0 0 1 11.114 37.463v213.702a68.635 68.635 0 0 1-11.114 37.463z" opacity=".499"/>

     

       
6
       
6
       
+
       
        <path stroke="#FC6986" stroke-width="24.007" d="M573.14 453.712a91.94 91.94 0 0 1-39.77 33.949l-195.971 87.164a92.026 92.026 0 0 1-74.798 0l-195.97-87.164a91.94 91.94 0 0 1-39.772-33.949 91.94 91.94 0 0 1-14.856-50.135v-211.96A91.94 91.94 0 0 1 26.86 141.48a91.94 91.94 0 0 1 39.771-33.948l195.971-87.165a92.026 92.026 0 0 1 74.798 0l195.97 87.165a91.94 91.94 0 0 1 39.772 33.948 91.94 91.94 0 0 1 14.856 50.135v211.961a91.94 91.94 0 0 1-14.856 50.135z"/>

     

       
7
       
7
       
+
       
        <text fill="#FC6986" font-family="Helvetica-Bold, Helvetica" font-size="51" font-weight="bold" letter-spacing="2" transform="translate(0 -10)">

     

       
8
       
8
       
+
       
            <tspan x="138.5" y="464">SPECTACLE</tspan>

     

       
9
       
9
       
+
       
        </text>

     

       
10
       
10
       
+
       
        <g fill="#FC6986">

     

       
11
       
11
       
+
       
            <path d="M283.282 206.925c1.17-10.61 7.611-17.46 16.421-17.46 8.81 0 15.251 6.85 16.42 17.46L319.855 237 329 192.884c.01-15.39-12.959-27.874-28.967-27.884h-.03c-16.008-.01-28.993 12.46-29.003 27.85v.006l8.75 42.333 3.532-28.264zM275 268.855l-13.252-67.153c-5.943-14.14-22.5-20.543-37.042-14.326-14.535 6.26-21.531 22.775-15.588 36.91L269.796 313 275 268.855zM270.406 325.218v-.553l.067-.548.097-.786-70.13-94.23c-10.909-9.439-28.484-7.738-39.338 3.802-10.836 11.541-10.8 28.532.09 37.988L271 331a28.45 28.45 0 0 1-.594-5.782M438.974 232.84c-10.722-11.467-28.149-13.156-38.925-3.778l-70.305 94.885v.643A28.233 28.233 0 0 1 329 331l109.884-60.414c10.776-9.35 10.836-26.279.09-37.746M375.442 187.366c-14.393-6.178-30.824.16-36.688 14.155L325 271.304 329.915 313l60.998-89.102c5.864-13.99-1.049-30.337-15.47-36.532"/>

     

       
12
       
12
       
+
       
            <path d="M291.703 208.715L277 326.065c0 11.562 9.85 20.935 22 20.935s22-9.373 22-20.935l-14.703-117.35c-.49-4.489-2.542-9.715-7.297-9.715s-6.808 5.226-7.297 9.715"/>

     

       
13
       
13
       
+
       
        </g>

     

       
14
       
14
       
+
       
    </g>

     

       
15
       
15
       
+
       
</svg>

     

···

       
1
       
1
       
+
       


     

       
2
       
2
       
+
       
<svg xmlns="http://www.w3.org/2000/svg" width="600" height="595" viewBox="0 0 600 595">

     

       
3
       
3
       
+
       
    <g fill="none" fill-rule="evenodd">

     

       
4
       
4
       
+
       
        <path fill="#202020" d="M342.277 9.4l195.971 87.165C575.801 113.268 600 150.515 600 191.616v211.961c0 41.1-24.199 78.348-61.752 95.051l-195.971 87.165a104.029 104.029 0 0 1-84.554 0L61.752 498.628C24.199 481.925 0 444.678 0 403.578V191.615c0-41.1 24.199-78.348 61.752-95.05L257.723 9.4a104.029 104.029 0 0 1 84.554 0z"/>

     

       
5
       
5
       
+
       
        <path stroke="#FF684F" stroke-width="24.247" d="M553.161 442.006a68.635 68.635 0 0 1-29.745 25.342L332.27 552.082a79.877 79.877 0 0 1-64.741 0L76.38 467.348a68.635 68.635 0 0 1-29.745-25.342 68.635 68.635 0 0 1-11.113-37.463V190.841a68.635 68.635 0 0 1 11.113-37.463 68.635 68.635 0 0 1 29.745-25.342l191.148-84.733a79.877 79.877 0 0 1 64.74 0l191.148 84.733a68.635 68.635 0 0 1 29.745 25.342 68.635 68.635 0 0 1 11.114 37.463v213.702a68.635 68.635 0 0 1-11.114 37.463z" opacity=".499"/>

     

       
6
       
6
       
+
       
        <path stroke="#FF684F" stroke-width="24.007" d="M573.14 453.712a91.94 91.94 0 0 1-39.77 33.949l-195.971 87.164a92.026 92.026 0 0 1-74.798 0l-195.97-87.164a91.94 91.94 0 0 1-39.772-33.949 91.94 91.94 0 0 1-14.856-50.135v-211.96A91.94 91.94 0 0 1 26.86 141.48a91.94 91.94 0 0 1 39.771-33.948l195.971-87.165a92.026 92.026 0 0 1 74.798 0l195.97 87.165a91.94 91.94 0 0 1 39.772 33.948 91.94 91.94 0 0 1 14.856 50.135v211.961a91.94 91.94 0 0 1-14.856 50.135z"/>

     

       
7
       
7
       
+
       
        <text fill="#FF684F" font-family="Helvetica-Bold, Helvetica" font-size="51" font-weight="bold" letter-spacing="2" transform="translate(0 -10)">

     

       
8
       
8
       
+
       
            <tspan x="181" y="459">VICTORY</tspan>

     

       
9
       
9
       
+
       
        </text>

     

       
10
       
10
       
+
       
        <path fill="#FF684F" d="M223.963 151h21.98l58.319 213H282.28z"/>

     

       
11
       
11
       
+
       
        <path fill="#E04126" d="M362.13 233.44H340L304.263 364h21.973z"/>

     

       
12
       
12
       
+
       
        <path fill="#FF684F" d="M401.607 169.473h-21.904l-26.201 95.357h21.814z"/>

     

       
13
       
13
       
+
       
        <path fill="#E04126" d="M201.981 151h21.982l58.317 213a28.809 28.809 0 0 1-27.786-21.201L201.981 151z"/>

     

       
14
       
14
       
+
       
        <path fill="#FF9877" d="M245.944 151a28.809 28.809 0 0 1 27.786 21.201L326.243 364h-21.981l-58.318-213z"/>

     

       
15
       
15
       
+
       
        <path fill="#FF684F" d="M223.963 151l5.068 18.473h-24.595A25.079 25.079 0 0 1 180.243 151h43.72z"/>

     

       
16
       
16
       
+
       
        <path fill="#FF684F" fill-rule="nonzero" d="M409.967 203.367c8.993-6.29 11.19-18.675 4.911-27.675l-18.836-26.996-30.789 14.49c-9.982 4.698-14.266 16.599-9.568 26.581l.01.021 33.724-15.872 20.548 29.45z"/>

     

       
17
       
17
       
+
       
    </g>

     

       
18
       
18
       
+
       
</svg>

     

···

       
1
       
1
       
-
       
<svg width="1024" height="1024" viewBox="0 0 1024 1024" fill="none" xmlns="http://www.w3.org/2000/svg">

     

       
2
       
2
       
-
       
<path fill-rule="evenodd" clip-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z" transform="scale(64)" fill="#1B1F23"/>

     

       
3
       
3
       
-
       
</svg>

     

···

       
1
       
1
       
-
       
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="150" height="149"><image width="150" height="149" xlink:href="data:image/png;base64,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" fill="none" y="0"/></svg>
     

···

       
1
       
1
       
-
       
<svg width="492px" height="437px" viewBox="0 0 492 437" version="1.1" 

     

       
2
       
2
       
-
       
	xmlns="http://www.w3.org/2000/svg" 

     

       
1
       
1
       
+
       
<svg width="492px" height="437px" viewBox="0 0 492 437" version="1.1"

     

       
2
       
2
       
+
       
	xmlns="http://www.w3.org/2000/svg"

     

       
3
       
3
       
 
       
	xmlns:xlink="http://www.w3.org/1999/xlink">

     

       
4
       
4
       
 
       
	<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">

     

       
5
       
5
       
-
       
		<g id="React-icon" fill="#8196FF" fill-rule="nonzero">

     

       
5
       
5
       
+
       
		<g id="React-icon" fill="#fff" fill-rule="nonzero">

     

       
6
       
6
       
 
       
			<path d="M491.3,218.5 C491.3,186 450.6,155.2 388.2,136.1 C402.6,72.5 396.2,21.9 368,5.7 C361.5,1.9 353.9,0.1 345.6,0.1 L345.6,22.4 C350.2,22.4 353.9,23.3 357,25 C370.6,32.8 376.5,62.5 371.9,100.7 C370.8,110.1 369,120 366.8,130.1 C347.2,125.3 325.8,121.6 303.3,119.2 C289.8,100.7 275.8,83.9 261.7,69.2 C294.3,38.9 324.9,22.3 345.7,22.3 L345.7,0 C345.7,0 345.7,0 345.7,0 C318.2,0 282.2,19.6 245.8,53.6 C209.4,19.8 173.4,0.4 145.9,0.4 L145.9,22.7 C166.6,22.7 197.3,39.2 229.9,69.3 C215.9,84 201.9,100.7 188.6,119.2 C166,121.6 144.6,125.3 125,130.2 C122.7,120.2 121,110.5 119.8,101.2 C115.1,63 120.9,33.3 134.4,25.4 C137.4,23.6 141.3,22.8 145.9,22.8 L145.9,0.5 C145.9,0.5 145.9,0.5 145.9,0.5 C137.5,0.5 129.9,2.3 123.3,6.1 C95.2,22.3 88.9,72.8 103.4,136.2 C41.2,155.4 0.7,186.1 0.7,218.5 C0.7,251 41.4,281.8 103.8,300.9 C89.4,364.5 95.8,415.1 124,431.3 C130.5,435.1 138.1,436.9 146.5,436.9 C174,436.9 210,417.3 246.4,383.3 C282.8,417.1 318.8,436.5 346.3,436.5 C354.7,436.5 362.3,434.7 368.9,430.9 C397,414.7 403.3,364.2 388.8,300.8 C450.8,281.7 491.3,250.9 491.3,218.5 Z M361.1,151.8 C357.4,164.7 352.8,178 347.6,191.3 C343.5,183.3 339.2,175.3 334.5,167.3 C329.9,159.3 325,151.5 320.1,143.9 C334.3,146 348,148.6 361.1,151.8 Z M315.3,258.3 C307.5,271.8 299.5,284.6 291.2,296.5 C276.3,297.8 261.2,298.5 246,298.5 C230.9,298.5 215.8,297.8 201,296.6 C192.7,284.7 184.6,272 176.8,258.6 C169.2,245.5 162.3,232.2 156,218.8 C162.2,205.4 169.2,192 176.7,178.9 C184.5,165.4 192.5,152.6 200.8,140.7 C215.7,139.4 230.8,138.7 246,138.7 C261.1,138.7 276.2,139.4 291,140.6 C299.3,152.5 307.4,165.2 315.2,178.6 C322.8,191.7 329.7,205 336,218.4 C329.7,231.8 322.8,245.2 315.3,258.3 Z M347.6,245.3 C353,258.7 357.6,272.1 361.4,285.1 C348.3,288.3 334.5,291 320.2,293.1 C325.1,285.4 330,277.5 334.6,269.4 C339.2,261.4 343.5,253.3 347.6,245.3 Z M246.2,352 C236.9,342.4 227.6,331.7 218.4,320 C227.4,320.4 236.6,320.7 245.9,320.7 C255.3,320.7 264.6,320.5 273.7,320 C264.7,331.7 255.4,342.4 246.2,352 Z M171.8,293.1 C157.6,291 143.9,288.4 130.8,285.2 C134.5,272.3 139.1,259 144.3,245.7 C148.4,253.7 152.7,261.7 157.4,269.7 C162.1,277.7 166.9,285.5 171.8,293.1 Z M245.7,85 C255,94.6 264.3,105.3 273.5,117 C264.5,116.6 255.3,116.3 246,116.3 C236.6,116.3 227.3,116.5 218.2,117 C227.2,105.3 236.5,94.6 245.7,85 Z M171.7,143.9 C166.8,151.6 161.9,159.5 157.3,167.6 C152.7,175.6 148.4,183.6 144.3,191.6 C138.9,178.2 134.3,164.8 130.5,151.8 C143.6,148.7 157.4,146 171.7,143.9 Z M81.2,269.1 C45.8,254 22.9,234.2 22.9,218.5 C22.9,202.8 45.8,182.9 81.2,167.9 C89.8,164.2 99.2,160.9 108.9,157.8 C114.6,177.4 122.1,197.8 131.4,218.7 C122.2,239.5 114.8,259.8 109.2,279.3 C99.3,276.2 89.9,272.8 81.2,269.1 Z M135,412 C121.4,404.2 115.5,374.5 120.1,336.3 C121.2,326.9 123,317 125.2,306.9 C144.8,311.7 166.2,315.4 188.7,317.8 C202.2,336.3 216.2,353.1 230.3,367.8 C197.7,398.1 167.1,414.7 146.3,414.7 C141.8,414.6 138,413.7 135,412 Z M372.2,335.8 C376.9,374 371.1,403.7 357.6,411.6 C354.6,413.4 350.7,414.2 346.1,414.2 C325.4,414.2 294.7,397.7 262.1,367.6 C276.1,352.9 290.1,336.2 303.4,317.7 C326,315.3 347.4,311.6 367,306.7 C369.3,316.8 371.1,326.5 372.2,335.8 Z M410.7,269.1 C402.1,272.8 392.7,276.1 383,279.2 C377.3,259.6 369.8,239.2 360.5,218.3 C369.7,197.5 377.1,177.2 382.7,157.7 C392.6,160.8 402,164.2 410.8,167.9 C446.2,183 469.1,202.8 469.1,218.5 C469,234.2 446.1,254.1 410.7,269.1 Z" id="Shape"></path>

     

       
7
       
7
       
 
       
			<circle id="Oval" cx="245.9" cy="218.5" r="45.7"></circle>

     

       
8
       
8
       
 
       
		</g>

     

       
9
       
9
       
 
       
	</g>

     

       
10
       
10
       
-
       
</svg>
     

       
10
       
10
       
+
       
</svg>

     

···

       
3
       
3
       
 
       
export const BodyCopy = styled.p`

     

       
4
       
4
       
 
       
  font-size: 1.4rem;

     

       
5
       
5
       
 
       
  line-height: 2.2rem;

     

       
6
       
6
       
-
       
  margin: 0 auto;

     

       
7
       
6
       
 
       
  width: 100%;

     

       
8
       
7
       
 
       
  text-align: center;

     

       
8
       
8
       
+
       
  ${p => p.noMargin && 'margin: 0'};

     

       
9
       
9
       
 
       
  @media (min-width: 768px) {

     

       
10
       
10
       
 
       
    font-size: 1.5rem;

     

       
11
       
11
       
 
       
    line-height: 2.4rem;

     

···

       
1
       
1
       
-
       
import styled from 'styled-components';

     

       
2
       
2
       
-
       
import { Link } from 'react-router-dom';

     

       
1
       
1
       
+
       
import React from 'react';

     

       
2
       
2
       
+
       
import styled, { css } from 'styled-components';

     

       
3
       
3
       
 
       


     

       
4
       
4
       
-
       
export const Button = styled(Link)`

     

       
5
       
5
       
-
       
  background: ${props => (props.light ? 'white' : '#202020')};

     

       
6
       
6
       
-
       
  color: ${props => (props.light ? '#202020' : 'white')};

     

       
7
       
7
       
-
       
  display: block;

     

       
8
       
8
       
-
       
  font-size: 1.5rem;

     

       
4
       
4
       
+
       
export const buttonLinkStyling = css`

     

       
5
       
5
       
+
       
  background: white;

     

       
6
       
6
       
+
       
  color: #383838;

     

       
7
       
7
       
+
       
  font-weight: normal;

     

       
8
       
8
       
+
       
  font-size: 1.4rem;

     

       
9
       
9
       
+
       
  font-style: normal;

     

       
10
       
10
       
+
       
  font-stretch: normal;

     

       
9
       
11
       
 
       
  height: 4rem;

     

       
10
       
10
       
-
       
  letter-spacing: 0.05em;

     

       
11
       
12
       
 
       
  line-height: 4rem;

     

       
12
       
12
       
-
       
  margin: ${props => (props.noMargin ? '0' : '5rem auto 3rem')};

     

       
13
       
13
       
-
       
  max-width: 21rem;

     

       
14
       
14
       
-
       
  min-width: 10rem;

     

       
13
       
13
       
+
       
  padding: 0 2rem;

     

       
14
       
14
       
+
       
  letter-spacing: 0.01rem;

     

       
15
       
15
       
 
       
  text-align: center;

     

       
16
       
16
       
 
       
  text-transform: uppercase;

     

       
17
       
17
       
-
       
  transition: background 0.4s;

     

       
18
       
18
       
-
       
  width: 100%;

     

       
17
       
17
       
+
       
  transition: opacity 0.4s ease-out;

     

       
18
       
18
       
+
       


     

       
19
       
19
       
 
       
  &:hover {

     

       
20
       
20
       
-
       
    background: ${props => (props.light ? '#f6f6f6' : '#333')};

     

       
20
       
20
       
+
       
    opacity: 0.8;

     

       
21
       
21
       
 
       
  }

     

       
22
       
22
       
 
       
  &:active {

     

       
23
       
23
       
 
       
    opacity: 0.6;

     

       
24
       
24
       
 
       
  }

     

       
25
       
25
       
 
       
`;

     

       
26
       
26
       
+
       


     

       
27
       
27
       
+
       
const ButtonNoBorder = styled.button`

     

       
28
       
28
       
+
       
  border: none;

     

       
29
       
29
       
+
       
`;

     

       
30
       
30
       
+
       


     

       
31
       
31
       
+
       
export const Button = styled(props => (

     

       
32
       
32
       
+
       
  <ButtonNoBorder {...props}>{props.children}</ButtonNoBorder>

     

       
33
       
33
       
+
       
))`

     

       
34
       
34
       
+
       
  ${buttonLinkStyling}

     

       
35
       
35
       
+
       
`;

     

···

       
1
       
1
       
 
       
import React from 'react';

     

       
2
       
2
       
-
       
import Hero from '../screens/home/hero';

     

       
3
       
2
       
 
       
import styled from 'styled-components';

     

       
3
       
3
       
+
       
import PropTypes from 'prop-types';

     

       
4
       
4
       
 
       


     

       
5
       
5
       
+
       
import Hero from '../screens/home/hero';

     

       
5
       
6
       
 
       
import logoFormidableWhite from '../assets/logo_formidable_white.svg';

     

       
6
       
7
       
 
       
import LeftTriangles from '../assets/left-triangles.svg';

     

       
7
       
8
       
 
       
import RightTriangles from '../assets/right-triangles.svg';

     
···

       
33
       
34
       
 
       
  flex-direction: column;

     

       
34
       
35
       
 
       
  color: #ffffff;

     

       
35
       
36
       
 
       
  text-decoration: none;

     

       
37
       
37
       
+
       
  z-index: 2;

     

       
36
       
38
       
 
       
`;

     

       
37
       
39
       
 
       


     

       
38
       
40
       
 
       
const HeaderText = styled.p`

     
···

       
68
       
70
       
 
       
  }

     

       
69
       
71
       
 
       
`;

     

       
70
       
72
       
 
       


     

       
71
       
71
       
-
       
export const Header = () => (

     

       
73
       
73
       
+
       
export const Header = ({ content }) => (

     

       
72
       
74
       
 
       
  <Container>

     

       
73
       
75
       
 
       
    <LeftTrianglesImg src={LeftTriangles} />

     

       
74
       
76
       
 
       
    <RightTrianglesImg src={RightTriangles} />

     
···

       
77
       
79
       
 
       
      <HeaderText>Another oss project by </HeaderText>

     

       
78
       
80
       
 
       
      <HeaderLogo src={logoFormidableWhite} alt="Formidable Logo" />

     

       
79
       
81
       
 
       
    </HeaderContainer>

     

       
80
       
80
       
-
       
    <Hero />

     

       
82
       
82
       
+
       
    <Hero content={content.hero} />

     

       
81
       
83
       
 
       
  </Container>

     

       
82
       
84
       
 
       
);

     

       
85
       
85
       
+
       


     

       
86
       
86
       
+
       
Header.propTypes = {

     

       
87
       
87
       
+
       
  content: PropTypes.shape({

     

       
88
       
88
       
+
       
    hero: PropTypes.shape({ copyText: PropTypes.string }),

     

       
89
       
89
       
+
       
  }).isRequired,

     

       
90
       
90
       
+
       
};

     

···

       
1
       
1
       
+
       
import React from 'react';

     

       
2
       
2
       
+
       
import styled from 'styled-components';

     

       
3
       
3
       
+
       
import { Link as ReactRouterLink } from 'react-router-dom';

     

       
4
       
4
       
+
       


     

       
5
       
5
       
+
       
import { buttonLinkStyling } from './button';

     

       
6
       
6
       
+
       


     

       
7
       
7
       
+
       
export const Link = styled(({ isExternal, ...rest }) =>

     

       
8
       
8
       
+
       
  isExternal ? (

     

       
9
       
9
       
+
       
    <a href={rest.to} {...rest}>

     

       
10
       
10
       
+
       
      {rest.children}

     

       
11
       
11
       
+
       
    </a>

     

       
12
       
12
       
+
       
  ) : (

     

       
13
       
13
       
+
       
    <ReactRouterLink {...rest} />

     

       
14
       
14
       
+
       
  )

     

       
15
       
15
       
+
       
)`

     

       
16
       
16
       
+
       
  ${buttonLinkStyling}

     

       
17
       
17
       
+
       
`;

     

···

       
1
       
1
       
+
       
import React from 'react';

     

       
2
       
2
       
+
       
import styled, { css } from 'styled-components';

     

       
3
       
3
       
+
       
import constants from '../constants';

     

       
4
       
4
       
+
       


     

       
5
       
5
       
+
       
const dark = css`

     

       
6
       
6
       
+
       
  background-color: #0d1129;

     

       
7
       
7
       
+
       
`;

     

       
8
       
8
       
+
       


     

       
9
       
9
       
+
       
const light = css`

     

       
10
       
10
       
+
       
  background: ${constants.color};

     

       
11
       
11
       
+
       
  border-bottom: 1rem solid rgba(0, 0, 0, 0.4);

     

       
12
       
12
       
+
       
  box-shadow: inset 0 -1rem 0 rgba(0, 0, 0, 0.2);

     

       
13
       
13
       
+
       
`;

     

       
14
       
14
       
+
       
export const FullWidthContainer = styled.div`

     

       
15
       
15
       
+
       
  color: #e3eef8;

     

       
16
       
16
       
+
       
  display: flex;

     

       
17
       
17
       
+
       
  justify-content: center;

     

       
18
       
18
       
+
       
  ${p => (!!p.isLight ? light : dark)};

     

       
19
       
19
       
+
       
  ${p => p.background && `background: ${p.background}`}

     

       
20
       
20
       
+
       
`;

     

       
21
       
21
       
+
       


     

       
22
       
22
       
+
       
export const SectionWrapper = styled.div`

     

       
23
       
23
       
+
       
  flex-direction: column;

     

       
24
       
24
       
+
       
  align-items: center;

     

       
25
       
25
       
+
       
  display: flex;

     

       
26
       
26
       
+
       
  padding: 8rem 4rem;

     

       
27
       
27
       
+
       
  width: 100%;

     

       
28
       
28
       
+
       
  @media (min-width: 768px) {

     

       
29
       
29
       
+
       
    flex-direction: column;

     

       
30
       
30
       
+
       
    margin: 0 8rem;

     

       
31
       
31
       
+
       
    padding: 8rem 8rem;

     

       
32
       
32
       
+
       
  }

     

       
33
       
33
       
+
       
`;

     

       
34
       
34
       
+
       


     

       
35
       
35
       
+
       
export const PanelSectionWrapper = ({

     

       
36
       
36
       
+
       
  children,

     

       
37
       
37
       
+
       
  isLight,

     

       
38
       
38
       
+
       
  background,

     

       
39
       
39
       
+
       
  ...rest

     

       
40
       
40
       
+
       
}) => (

     

       
41
       
41
       
+
       
  <FullWidthContainer isLight={!!isLight} background={background} {...rest}>

     

       
42
       
42
       
+
       
    <SectionWrapper>{children}</SectionWrapper>

     

       
43
       
43
       
+
       
  </FullWidthContainer>

     

       
44
       
44
       
+
       
);

     

···

       
1
       
1
       
 
       
import styled from 'styled-components';

     

       
2
       
2
       
 
       


     

       
3
       
3
       
 
       
export const SecondaryTitle = styled.h3`

     

       
4
       
4
       
+
       
  color: white;

     

       
4
       
5
       
 
       
  font-size: 2rem;

     

       
5
       
6
       
 
       
  line-height: 2.4rem;

     

       
6
       
7
       
 
       
  margin: 2rem auto 1rem;

     

       
7
       
7
       
-
       
  color: ${p => (p.pop ? 'white' : 'inherit')};

     

       
8
       
8
       
+
       
  text-align: center;

     

       
8
       
9
       
 
       
  @media (min-width: 768px) {

     

       
9
       
10
       
 
       
    font-size: 2.2rem;

     

       
10
       
11
       
 
       
    line-height: 2.6rem;

     

···

       
2
       
2
       
 
       


     

       
3
       
3
       
 
       
export const SectionTitle = styled.h2`

     

       
4
       
4
       
 
       
  color: #fff;

     

       
5
       
5
       
-
       
  font-size: 4.5rem;

     

       
5
       
5
       
+
       
  font-size: 3.5rem;

     

       
6
       
6
       
 
       
  flex: auto;

     

       
7
       
7
       
 
       
  line-height: 1.3;

     

       
8
       
8
       
-
       
  margin: 2rem 0 3rem;

     

       
8
       
8
       
+
       
  margin: 0 0 3rem;

     

       
9
       
9
       
 
       
  width: 100%;

     

       
10
       
10
       
 
       
  text-align: center;

     

       
11
       
11
       
-
       
  margin: 4rem 0;

     

       
12
       
11
       
 
       
  @media (min-width: 768px) {

     

       
13
       
13
       
-
       
    margin: 2rem 0 6rem;

     

       
12
       
12
       
+
       
    font-size: 4.5rem;

     

       
13
       
13
       
+
       
    margin: 0 0 6rem;

     

       
14
       
14
       
 
       
  }

     

       
15
       
15
       
 
       
`;

     

···

       
3
       
3
       
 
       
  githubIssues: 'https://www.github.com/FormidableLabs/urql/issues',

     

       
4
       
4
       
 
       
  github: 'https://www.github.com/FormidableLabs/urql',

     

       
5
       
5
       
 
       
  readme: 'https://github.com/FormidableLabs/urql/blob/master/README.md',

     

       
6
       
6
       
-
       
  color: '#8196FF',

     

       
6
       
6
       
+
       
  color: '#6B78B8',

     

       
7
       
7
       
 
       
  googleAnalyticsId: 'UA-43290258-1',

     

       
8
       
8
       
 
       
};

     

       
9
       
9
       
 
       


     

···

       
1
       
1
       
 
       
const content = {

     

       
2
       
2
       
+
       
  header: {

     

       
3
       
3
       
+
       
    hero: {

     

       
4
       
4
       
+
       
      copyText: 'npm install urql graphql',

     

       
5
       
5
       
+
       
    },

     

       
6
       
6
       
+
       
  },

     

       
2
       
7
       
 
       
  features: [

     

       
3
       
8
       
 
       
    {

     

       
4
       
4
       
-
       
      title: 'Fully functional GraphQL client with a single import',

     

       
9
       
9
       
+
       
      title: 'Performant and functional',

     

       
5
       
10
       
 
       
      description:

     

       
6
       
6
       
-
       
        'Urql is a lightweight, powerful, and easy to use alternative to bulky GraphQL clients.',

     

       
11
       
11
       
+
       
        'Lightweight, powerful, and easy to use; urql is a great alternative to bulky GraphQL clients.',

     

       
7
       
12
       
 
       
      icon: require('../../assets/gql-tile.svg'),

     

       
8
       
13
       
 
       
    },

     

       
9
       
14
       
 
       
    {

     

       
10
       
10
       
-
       
      title: 'Logical default behavior and caching',

     

       
15
       
15
       
+
       
      title: 'Extensible library that grows with you',

     

       
11
       
16
       
 
       
      description:

     

       
12
       
12
       
-
       
        'Urql helps you to rapidly use GraphQL in your apps without complex configuration or large API overhead.',

     

       
13
       
13
       
-
       
      icon: require('../../assets/clock-tile.svg'),

     

       
17
       
17
       
+
       
        'Want to change how you fetch, cache, or subscribe to data? The urql exchanges allow you to customize your data layer to suit your needs.',

     

       
18
       
18
       
+
       
      icon: require('../../assets/eagle-tile.svg'),

     

       
14
       
19
       
 
       
    },

     

       
15
       
20
       
 
       
    {

     

       
16
       
16
       
-
       
      title: 'Extensible library that grows with you',

     

       
21
       
21
       
+
       
      title: 'Logical default behavior and caching',

     

       
17
       
22
       
 
       
      description:

     

       
18
       
18
       
-
       
        'Want to change how you fetch, cache, or subscribe to data? Urql Exchanges allow you to customize your data layer to suit your needs.',

     

       
19
       
19
       
-
       
      icon: require('../../assets/eagle-tile.svg'),

     

       
23
       
23
       
+
       
        'Adding urql enables you to rapidly use GraphQL in your apps without complex configuration or large API overhead.',

     

       
24
       
24
       
+
       
      icon: require('../../assets/clock-tile.svg'),

     

       
20
       
25
       
 
       
    },

     

       
21
       
26
       
 
       
  ],

     

       
22
       
27
       
 
       
  components: {

     
···

       
30
       
35
       
 
       
    media: '',

     

       
31
       
36
       
 
       
  },

     

       
32
       
37
       
 
       
  getStarted: {

     

       
33
       
33
       
-
       
    description:

     

       
34
       
34
       
-
       
      'Dive into the documentation to see how you can get your urql client up and running.',

     

       
38
       
38
       
+
       
    description: `With it's intiuitive set of lightweight API's, getting started with urql is a breeze. Dive into the documentation to get up and running in minutes.`,

     

       
35
       
39
       
 
       
    link: '/docs',

     

       
36
       
40
       
 
       
  },

     

       
37
       
37
       
-
       
  // TODO: This needs to be shared content instead of hardcoded in each site

     

       
38
       
38
       
-
       
  /*

     

       
39
       
41
       
 
       
  oss: [

     

       
40
       
42
       
 
       
    {

     

       
41
       
43
       
 
       
      title: 'Victory',

     

       
42
       
44
       
 
       
      description:

     

       
43
       
45
       
 
       
        'An ecosystem of modular data visualization components for React. Friendly and flexible.',

     

       
44
       
44
       
-
       
      logo: require('../../assets/logo_victory.svg'),

     

       
46
       
46
       
+
       
      logo: require('../../assets/badge_victory.svg'),

     

       
45
       
47
       
 
       
      link: 'https://formidable.com/open-source/victory',

     

       
46
       
46
       
-
       
      hasOwnLogo: true,

     

       
47
       
48
       
 
       
    },

     

       
48
       
49
       
 
       
    {

     

       
49
       
49
       
-
       
      title: 'Development Dashboards',

     

       
50
       
50
       
+
       
      title: 'urql',

     

       
50
       
51
       
 
       
      description:

     

       
51
       
51
       
-
       
        'Dashboards to organize and intuitively display your dev server and tooling output.',

     

       
52
       
52
       
-
       
      abbreviation: 'Dd',

     

       
53
       
53
       
-
       
      color: '#8bd48b',

     

       
54
       
54
       
-
       
      number: '17',

     

       
55
       
55
       
-
       
      link: 'https://formidable.com/open-source/development-dashboards/',

     

       
52
       
52
       
+
       
        'Universal React Query Library is a blazing-fast GraphQL client, exposed as a set of ReactJS components.',

     

       
53
       
53
       
+
       
      logo: require('../../assets/sidebar-badge.svg'),

     

       
54
       
54
       
+
       
      link: 'https://formidable.com/open-source/urql/',

     

       
56
       
55
       
 
       
    },

     

       
57
       
56
       
 
       
    {

     

       
58
       
58
       
-
       
      title: 'React Animations',

     

       
57
       
57
       
+
       
      title: 'Spectacle',

     

       
59
       
58
       
 
       
      description:

     

       
60
       
60
       
-
       
        'A collection of animations that can be used with many inline style libraries, such as Radium or Aphrodite.',

     

       
61
       
61
       
-
       
      abbreviation: 'Ra',

     

       
62
       
62
       
-
       
      color: '#86b9e6',

     

       
63
       
63
       
-
       
      number: '03',

     

       
64
       
64
       
-
       
      link: 'https://formidable.com/open-source/react-animations',

     

       
59
       
59
       
+
       
        'A React.js based library for creating sleek presentations using JSX syntax that gives you the ability to live demo your code.',

     

       
60
       
60
       
+
       
      logo: require('../../assets/badge_spectacle.svg'),

     

       
61
       
61
       
+
       
      link: 'https://formidable.com/open-source/spectacle/',

     

       
65
       
62
       
 
       
    },

     

       
66
       
63
       
 
       
    {

     

       
67
       
67
       
-
       
      title: 'Enzyme Matchers',

     

       
64
       
64
       
+
       
      title: 'Runpkg',

     

       
68
       
65
       
 
       
      description:

     

       
69
       
69
       
-
       
        'Run common assertions on your React components using Enzyme in a Jest or Jasmine environment.',

     

       
70
       
70
       
-
       
      abbreviation: 'Em',

     

       
71
       
71
       
-
       
      color: '#e48055',

     

       
72
       
72
       
-
       
      number: '09',

     

       
73
       
73
       
-
       
      link: 'https://formidable.com/open-source/jest-enzyme/',

     

       
66
       
66
       
+
       
        'The online package explorer. Runpkg turns any npm package into an interactive and informative browsing experience',

     

       
67
       
67
       
+
       
      logo: require('../../assets/badge_runpkg.svg'),

     

       
68
       
68
       
+
       
      link: 'https://www.runpkg.com/',

     

       
74
       
69
       
 
       
    },

     

       
75
       
70
       
 
       
  ],

     

       
76
       
76
       
-
       
  */

     

       
77
       
71
       
 
       
};

     

       
78
       
72
       
 
       


     

       
79
       
73
       
 
       
export default content;

     

···

       
1
       
1
       
+
       
import React from 'react';

     

       
2
       
2
       
+
       
import PropTypes from 'prop-types';

     

       
3
       
3
       
+
       
import styled from 'styled-components';

     

       
4
       
4
       
+
       


     

       
5
       
5
       
+
       
import { SecondaryTitle } from '../../components/secondary-title';

     

       
6
       
6
       
+
       
import { BodyCopy } from '../../components/body-copy';

     

       
7
       
7
       
+
       
import { PanelSectionWrapper } from '../../components/panel';

     

       
8
       
8
       
+
       


     

       
9
       
9
       
+
       
const ComponentWrapper = styled.div`

     

       
10
       
10
       
+
       
  margin: 0 0 0;

     

       
11
       
11
       
+
       
  display: flex;

     

       
12
       
12
       
+
       
  flex-direction: column;

     

       
13
       
13
       
+
       
  align-items: center;

     

       
14
       
14
       
+
       
  text-align: center;

     

       
15
       
15
       
+
       
  > img {

     

       
16
       
16
       
+
       
    width: 100%;

     

       
17
       
17
       
+
       
    max-width: 10rem;

     

       
18
       
18
       
+
       
    margin-bottom: 20px;

     

       
19
       
19
       
+
       
  }

     

       
20
       
20
       
+
       
`;

     

       
21
       
21
       
+
       


     

       
22
       
22
       
+
       
const SecondaryTitleCentred = styled(SecondaryTitle)`

     

       
23
       
23
       
+
       
  @media (min-width: 768px) {

     

       
24
       
24
       
+
       
    text-align: center;

     

       
25
       
25
       
+
       
  }

     

       
26
       
26
       
+
       
`;

     

       
27
       
27
       
+
       


     

       
28
       
28
       
+
       
const BodyCopyCentred = styled(BodyCopy)`

     

       
29
       
29
       
+
       
  margin-top: 2rem;

     

       
30
       
30
       
+
       
  max-width: 28rem;

     

       
31
       
31
       
+
       


     

       
32
       
32
       
+
       
  @media (min-width: 768px) {

     

       
33
       
33
       
+
       
    text-align: center;

     

       
34
       
34
       
+
       
  }

     

       
35
       
35
       
+
       


     

       
36
       
36
       
+
       
  @media (min-width: 1024px) {

     

       
37
       
37
       
+
       
    max-width: 20vw;

     

       
38
       
38
       
+
       
  }

     

       
39
       
39
       
+
       
`;

     

       
40
       
40
       
+
       


     

       
41
       
41
       
+
       
const Components = props => {

     

       
42
       
42
       
+
       
  return (

     

       
43
       
43
       
+
       
    <PanelSectionWrapper isLight>

     

       
44
       
44
       
+
       
      <ComponentWrapper>

     

       
45
       
45
       
+
       
        <img src={props.components.icon} />

     

       
46
       
46
       
+
       
        <SecondaryTitleCentred>{props.components.title}</SecondaryTitleCentred>

     

       
47
       
47
       
+
       
        <BodyCopyCentred>{props.components.description}</BodyCopyCentred>

     

       
48
       
48
       
+
       
      </ComponentWrapper>

     

       
49
       
49
       
+
       
    </PanelSectionWrapper>

     

       
50
       
50
       
+
       
  );

     

       
51
       
51
       
+
       
};

     

       
52
       
52
       
+
       


     

       
53
       
53
       
+
       
Components.displayName = 'Components';

     

       
54
       
54
       
+
       


     

       
55
       
55
       
+
       
Components.propTypes = {

     

       
56
       
56
       
+
       
  components: PropTypes.object,

     

       
57
       
57
       
+
       
};

     

       
58
       
58
       
+
       


     

       
59
       
59
       
+
       
export default Components;

     

···

       
4
       
4
       
 
       
import { BodyCopy } from '../../components/body-copy';

     

       
5
       
5
       
 
       
import { SecondaryTitle } from '../../components/secondary-title';

     

       
6
       
6
       
 
       
import { SectionTitle } from '../../components/section-title';

     

       
7
       
7
       
-
       


     

       
8
       
8
       
-
       
const FullWidthContainer = styled.div`

     

       
9
       
9
       
-
       
  display: flex;

     

       
10
       
10
       
-
       
  justify-content: center;

     

       
11
       
11
       
-
       
  background-color: #0d1129;

     

       
12
       
12
       
-
       
`;

     

       
13
       
13
       
-
       


     

       
14
       
14
       
-
       
const FeaturesWrapper = styled.div`

     

       
15
       
15
       
-
       
  flex-direction: column;

     

       
16
       
16
       
-
       
  align-items: center;

     

       
17
       
17
       
-
       
  display: flex;

     

       
18
       
18
       
-
       
  background-color: #0d1129;

     

       
19
       
19
       
-
       
  color: #a3abd4;

     

       
20
       
20
       
-
       
  padding: 8rem 8rem;

     

       
21
       
21
       
-
       
  width: 100%;

     

       
22
       
22
       
-
       
  @media (min-width: 768px) {

     

       
23
       
23
       
-
       
    flex-direction: column;

     

       
24
       
24
       
-
       
    margin: 0 8rem;

     

       
25
       
25
       
-
       
  }

     

       
26
       
26
       
-
       
`;

     

       
7
       
7
       
+
       
import { PanelSectionWrapper } from '../../components/panel';

     

       
27
       
8
       
 
       


     

       
28
       
9
       
 
       
const FeatureWrapper = styled.div`

     

       
29
       
10
       
 
       
  display: flex;

     
···

       
37
       
18
       
 
       
  display: flex;

     

       
38
       
19
       
 
       
  flex-direction: column;

     

       
39
       
20
       
 
       
  align-items: center;

     

       
40
       
40
       
-
       
  margin: 0 0 4rem;

     

       
41
       
21
       
 
       
  width: 100%;

     

       
42
       
22
       
 
       
  max-width: 28rem;

     

       
43
       
23
       
 
       
  text-align: center;

     
···

       
45
       
25
       
 
       
    width: 100%;

     

       
46
       
26
       
 
       
    max-width: 28rem;

     

       
47
       
27
       
 
       
    box-shadow: -20px 20px 0 0 rgba(0, 0, 0, 0.5);

     

       
48
       
48
       
-
       
    margin-bottom: 20px;

     

       
28
       
28
       
+
       
  }

     

       
29
       
29
       
+
       
  &:not(:last-child) {

     

       
30
       
30
       
+
       
    margin: 0 0 4rem;

     

       
49
       
31
       
 
       
  }

     

       
50
       
32
       
 
       
  @media (min-width: 768px) {

     

       
51
       
51
       
-
       
    margin: 0 0 6rem;

     

       
33
       
33
       
+
       
    margin: 0;

     

       
52
       
34
       
 
       
    width: calc(1 / 3 * 100% - (1 - 1 / 3) * 40px);

     

       
53
       
35
       
 
       
    align-items: flex-start;

     

       
54
       
36
       
 
       
    text-align: left;

     
···

       
58
       
40
       
 
       
  }

     

       
59
       
41
       
 
       
`;

     

       
60
       
42
       
 
       


     

       
61
       
61
       
-
       
const ComponentWrapper = styled.div`

     

       
62
       
62
       
-
       
  margin: 0 0 0;

     

       
63
       
63
       
-
       
  display: flex;

     

       
64
       
64
       
-
       
  flex-direction: column;

     

       
65
       
65
       
-
       
  align-items: center;

     

       
66
       
66
       
-
       
  max-width: 28rem;

     

       
67
       
67
       
-
       
  text-align: center;

     

       
68
       
68
       
-
       
  > img {

     

       
69
       
69
       
-
       
    width: 100%;

     

       
70
       
70
       
-
       
    max-width: 10rem;

     

       
71
       
71
       
-
       
    margin-bottom: 20px;

     

       
72
       
72
       
-
       
  }

     

       
73
       
73
       
-
       
  @media (min-width: 768px) {

     

       
74
       
74
       
-
       
    max-width: 116rem;

     

       
75
       
75
       
-
       
    padding: 6rem 8rem 0 8rem;

     

       
76
       
76
       
-
       
  }

     

       
77
       
77
       
-
       
`;

     

       
78
       
78
       
-
       


     

       
79
       
79
       
-
       
const BodyCopyCentred = styled(BodyCopy)`

     

       
80
       
80
       
-
       
  max-width: 28rem;

     

       
81
       
81
       
-
       


     

       
82
       
82
       
-
       
  @media (min-width: 768px) {

     

       
83
       
83
       
-
       
    text-align: center;

     

       
84
       
84
       
-
       
  }

     

       
85
       
85
       
-
       


     

       
86
       
86
       
-
       
  @media (min-width: 1024px) {

     

       
87
       
87
       
-
       
    max-width: 20vw;

     

       
88
       
88
       
-
       
  }

     

       
89
       
89
       
-
       
`;

     

       
90
       
90
       
-
       


     

       
91
       
91
       
-
       
const SecondaryTitleCentred = styled(SecondaryTitle)`

     

       
92
       
92
       
-
       
  @media (min-width: 768px) {

     

       
93
       
93
       
-
       
    text-align: center;

     

       
94
       
94
       
-
       
  }

     

       
95
       
95
       
-
       
`;

     

       
96
       
96
       
-
       


     

       
97
       
43
       
 
       
const SectionTitleStyled = styled(SectionTitle)`

     

       
98
       
44
       
 
       
  margin-top: 0;

     

       
99
       
45
       
 
       
  margin-bottom: 4rem;

     
···

       
113
       
59
       
 
       
class Features extends React.Component {

     

       
114
       
60
       
 
       
  render() {

     

       
115
       
61
       
 
       
    return (

     

       
116
       
116
       
-
       
      <FullWidthContainer>

     

       
117
       
117
       
-
       
        <FeaturesWrapper>

     

       
118
       
118
       
-
       
          <SectionTitleStyled>Features</SectionTitleStyled>

     

       
119
       
119
       
-
       
          <FeatureWrapper>

     

       
120
       
120
       
-
       
            {this.props.featureArray.map(feature => (

     

       
121
       
121
       
-
       
              <FeatureCard key={feature.title}>

     

       
122
       
122
       
-
       
                <img src={feature.icon} />

     

       
123
       
123
       
-
       
                <SecondaryTitleStyled pop>{feature.title}</SecondaryTitleStyled>

     

       
124
       
124
       
-
       
                <BodyCopy>{feature.description}</BodyCopy>

     

       
125
       
125
       
-
       
              </FeatureCard>

     

       
126
       
126
       
-
       
            ))}

     

       
127
       
127
       
-
       
          </FeatureWrapper>

     

       
128
       
128
       
-
       
          <ComponentWrapper>

     

       
129
       
129
       
-
       
            <img src={this.props.components.icon} />

     

       
130
       
130
       
-
       
            <SecondaryTitleCentred pop>

     

       
131
       
131
       
-
       
              {this.props.components.title}

     

       
132
       
132
       
-
       
            </SecondaryTitleCentred>

     

       
133
       
133
       
-
       
            <BodyCopyCentred>

     

       
134
       
134
       
-
       
              {this.props.components.description}

     

       
135
       
135
       
-
       
            </BodyCopyCentred>

     

       
136
       
136
       
-
       
          </ComponentWrapper>

     

       
137
       
137
       
-
       
        </FeaturesWrapper>

     

       
138
       
138
       
-
       
      </FullWidthContainer>

     

       
62
       
62
       
+
       
      <PanelSectionWrapper>

     

       
63
       
63
       
+
       
        <SectionTitleStyled>Features</SectionTitleStyled>

     

       
64
       
64
       
+
       
        <FeatureWrapper>

     

       
65
       
65
       
+
       
          {this.props.featureArray.map(feature => (

     

       
66
       
66
       
+
       
            <FeatureCard key={feature.title}>

     

       
67
       
67
       
+
       
              <img src={feature.icon} />

     

       
68
       
68
       
+
       
              <SecondaryTitleStyled>{feature.title}</SecondaryTitleStyled>

     

       
69
       
69
       
+
       
              <BodyCopy>{feature.description}</BodyCopy>

     

       
70
       
70
       
+
       
            </FeatureCard>

     

       
71
       
71
       
+
       
          ))}

     

       
72
       
72
       
+
       
        </FeatureWrapper>

     

       
73
       
73
       
+
       
      </PanelSectionWrapper>

     

       
139
       
74
       
 
       
    );

     

       
140
       
75
       
 
       
  }

     

       
141
       
76
       
 
       
}

     

       
142
       
77
       
 
       


     

       
143
       
78
       
 
       
Features.propTypes = {

     

       
144
       
144
       
-
       
  components: PropTypes.object,

     

       
145
       
79
       
 
       
  featureArray: PropTypes.array,

     

       
146
       
80
       
 
       
};

     

       
147
       
81
       
 
       


     

···

       
1
       
1
       
 
       
import React from 'react';

     

       
2
       
2
       
 
       
import PropTypes from 'prop-types';

     

       
3
       
3
       
 
       
import styled from 'styled-components';

     

       
4
       
4
       
-
       
import { Link } from 'react-router-dom';

     

       
5
       
4
       
 
       
import { BodyCopy } from '../../components/body-copy';

     

       
5
       
5
       
+
       
import { Link } from '../../components/link';

     

       
6
       
6
       
 
       
import { SectionTitle } from '../../components/section-title';

     

       
7
       
7
       
-
       
import constants from '../../constants';

     

       
8
       
8
       
-
       


     

       
9
       
9
       
-
       
import octoCat from '../../assets/github.svg';

     

       
10
       
10
       
-
       


     

       
11
       
11
       
-
       
const OuterWrapper = styled.div`

     

       
12
       
12
       
-
       
  background: ${constants.color};

     

       
13
       
13
       
-
       
  border-bottom: 1rem solid rgba(0, 0, 0, 0.4);

     

       
14
       
14
       
-
       
  box-shadow: inset 0 -1rem 0 rgba(0, 0, 0, 0.2);

     

       
15
       
15
       
-
       
  display: flex;

     

       
16
       
16
       
-
       
  justify-content: center;

     

       
17
       
17
       
-
       
`;

     

       
7
       
7
       
+
       
import { PanelSectionWrapper } from '../../components/panel';

     

       
18
       
8
       
 
       


     

       
19
       
9
       
 
       
const GetStartedWrapper = styled.div`

     

       
10
       
10
       
+
       
  align-items: center;

     

       
11
       
11
       
+
       
  display: flex;

     

       
12
       
12
       
+
       
  flex-direction: column;

     

       
13
       
13
       
+
       
  max-width: 55rem;

     

       
20
       
14
       
 
       
  p {

     

       
21
       
15
       
 
       
    text-align: center;

     

       
22
       
16
       
 
       
  }

     

       
23
       
17
       
 
       
  h2 {

     

       
24
       
18
       
 
       
    margin-top: 0;

     

       
25
       
19
       
 
       
  }

     

       
26
       
26
       
-
       
  display: flex;

     

       
27
       
27
       
-
       
  flex-direction: column;

     

       
28
       
28
       
-
       
  align-items: center;

     

       
29
       
29
       
-
       
  margin: 8rem;

     

       
30
       
20
       
 
       
`;

     

       
31
       
21
       
 
       


     

       
32
       
22
       
 
       
const GithubButton = styled.a`

     
···

       
73
       
63
       
 
       
const ButtonsWrapper = styled.div`

     

       
74
       
64
       
 
       
  display: flex;

     

       
75
       
65
       
 
       
  align-items: center;

     

       
76
       
76
       
-
       
  margin-top: 4rem;

     

       
66
       
66
       
+
       
  margin-top: 6rem;

     

       
77
       
67
       
 
       
  flex-direction: column;

     

       
78
       
68
       
 
       
  @media (min-width: 768px) {

     

       
79
       
69
       
 
       
    flex-direction: row;

     

       
80
       
80
       
-
       
    margin-top: 6rem;

     

       
81
       
81
       
-
       
  }

     

       
82
       
82
       
-
       
`;

     

       
83
       
83
       
-
       


     

       
84
       
84
       
-
       
const DocButton = styled(Link)`

     

       
85
       
85
       
-
       
  width: 18rem;

     

       
86
       
86
       
-
       
  margin-left: 0rem;

     

       
87
       
87
       
-
       
  height: 4rem;

     

       
88
       
88
       
-
       
  font-size: 14px;

     

       
89
       
89
       
-
       
  background-color: #ffffff;

     

       
90
       
90
       
-
       
  line-height: 4rem;

     

       
91
       
91
       
-
       
  text-align: center;

     

       
92
       
92
       
-
       
  text-transform: uppercase;

     

       
93
       
93
       
-
       
  letter-spacing: 1px;

     

       
94
       
94
       
-
       
  color: #383838;

     

       
95
       
95
       
-
       
  border: 0;

     

       
96
       
96
       
-
       
  margin-top: 2rem;

     

       
97
       
97
       
-
       
  @media (min-width: 768px) {

     

       
98
       
98
       
-
       
    margin-left: 2rem;

     

       
99
       
99
       
-
       
    width: 18rem;

     

       
100
       
100
       
-
       
    margin-top: 0;

     

       
101
       
101
       
-
       
  }

     

       
102
       
102
       
-
       
  &:hover {

     

       
103
       
103
       
-
       
    background-color: #f6f6f6;

     

       
104
       
70
       
 
       
  }

     

       
105
       
71
       
 
       
`;

     

       
106
       
72
       
 
       


     

       
107
       
73
       
 
       
class GetStarted extends React.Component {

     

       
108
       
74
       
 
       
  render() {

     

       
109
       
109
       
-
       
    const { getStartedObj } = this.props;

     

       
75
       
75
       
+
       
    const { content } = this.props;

     

       
110
       
76
       
 
       


     

       
111
       
77
       
 
       
    return (

     

       
112
       
112
       
-
       
      <OuterWrapper>

     

       
78
       
78
       
+
       
      <PanelSectionWrapper>

     

       
113
       
79
       
 
       
        <GetStartedWrapper>

     

       
114
       
80
       
 
       
          <GetStartedTitle>Get Started</GetStartedTitle>

     

       
115
       
115
       
-
       
          <BodyCopy>{getStartedObj.description}</BodyCopy>

     

       
81
       
81
       
+
       
          <BodyCopy noMargin>{content.description}</BodyCopy>

     

       
116
       
82
       
 
       
          <ButtonsWrapper>

     

       
117
       
117
       
-
       
            <GithubButton href="https://github.com/FormidableLabs/urql">

     

       
118
       
118
       
-
       
              <img src={octoCat} />

     

       
119
       
119
       
-
       
              <p>GitHub</p>

     

       
120
       
120
       
-
       
            </GithubButton>

     

       
121
       
121
       
-
       
            <DocButton to="docs/">Documentation</DocButton>

     

       
83
       
83
       
+
       
            <Link to="docs/">Quick Start Guide</Link>

     

       
122
       
84
       
 
       
          </ButtonsWrapper>

     

       
123
       
85
       
 
       
        </GetStartedWrapper>

     

       
124
       
124
       
-
       
      </OuterWrapper>

     

       
86
       
86
       
+
       
      </PanelSectionWrapper>

     

       
125
       
87
       
 
       
    );

     

       
126
       
88
       
 
       
  }

     

       
127
       
89
       
 
       
}

     

       
128
       
90
       
 
       


     

       
129
       
91
       
 
       
GetStarted.propTypes = {

     

       
130
       
130
       
-
       
  getStartedObj: PropTypes.object,

     

       
92
       
92
       
+
       
  content: PropTypes.object,

     

       
131
       
93
       
 
       
};

     

       
132
       
94
       
 
       


     

       
133
       
95
       
 
       
export default GetStarted;

     

···

       
1
       
1
       
-
       
import React from 'react';

     

       
2
       
2
       
-
       
import { Link } from 'react-router-dom';

     

       
1
       
1
       
+
       
import React, { useState, useCallback } from 'react';

     

       
2
       
2
       
+
       
import { Link as ReactRouterLink } from 'react-router-dom';

     

       
3
       
3
       
+
       


     

       
3
       
4
       
 
       
import { Wrapper } from '../../components/wrapper';

     

       
5
       
5
       
+
       
import { Button } from '../../components/button';

     

       
6
       
6
       
+
       
import { Link } from '../../components/link';

     

       
4
       
7
       
 
       
import styled from 'styled-components';

     

       
5
       
8
       
 
       


     

       
6
       
9
       
 
       
import badge from '../../assets/sidebar-badge.svg';

     
···

       
116
       
119
       
 
       
  font-size: 14px;

     

       
117
       
120
       
 
       
  margin: 0;

     

       
118
       
121
       
 
       
`;

     

       
119
       
119
       
-
       
const HeroNPMButton = styled.button`

     

       
122
       
122
       
+
       
const HeroNPMButton = styled(Button)`

     

       
120
       
123
       
 
       
  width: 8rem;

     

       
121
       
121
       
-
       
  height: 4rem;

     

       
122
       
122
       
-
       
  background-color: #ffffff;

     

       
123
       
123
       
-
       
  font-size: 14px;

     

       
124
       
124
       
-
       
  font-weight: normal;

     

       
125
       
125
       
-
       
  font-style: normal;

     

       
126
       
126
       
-
       
  font-stretch: normal;

     

       
127
       
127
       
-
       
  line-height: normal;

     

       
128
       
128
       
-
       
  color: #383838;

     

       
129
       
129
       
-
       
  border: 0;

     

       
130
       
130
       
-
       
  text-transform: uppercase;

     

       
131
       
124
       
 
       
  cursor: copy;

     

       
132
       
132
       
-
       
  &:hover {

     

       
133
       
133
       
-
       
    background-color: #f6f6f6;

     

       
134
       
134
       
-
       
  }

     

       
125
       
125
       
+
       
  text-decoration: none;

     

       
135
       
126
       
 
       
`;

     

       
136
       
127
       
 
       


     

       
137
       
128
       
 
       
export const HeroDocsButton = styled(Link)`

     

       
138
       
129
       
 
       
  width: 30rem;

     

       
139
       
139
       
-
       
  margin-left: 0rem;

     

       
140
       
140
       
-
       
  height: 4rem;

     

       
141
       
141
       
-
       
  font-size: 14px;

     

       
142
       
142
       
-
       
  background-color: #ffffff;

     

       
143
       
143
       
-
       
  line-height: 4rem;

     

       
144
       
144
       
-
       
  text-align: center;

     

       
145
       
145
       
-
       
  text-transform: uppercase;

     

       
146
       
146
       
-
       
  color: #383838;

     

       
147
       
147
       
-
       
  border: 0;

     

       
148
       
148
       
-
       
  margin-top: 5rem;

     

       
130
       
130
       
+
       
  margin-top: 4rem;

     

       
149
       
131
       
 
       
  @media (min-width: 768px) {

     

       
150
       
132
       
 
       
    margin-top: 2rem;

     

       
151
       
133
       
 
       
    width: 30rem;

     
···

       
154
       
136
       
 
       
    margin-top: 0;

     

       
155
       
137
       
 
       
    margin-left: 2rem;

     

       
156
       
138
       
 
       
    width: 18rem;

     

       
157
       
157
       
-
       
  }

     

       
158
       
158
       
-
       
  &:hover {

     

       
159
       
159
       
-
       
    background-color: #f6f6f6;

     

       
160
       
139
       
 
       
  }

     

       
161
       
140
       
 
       
`;

     

       
162
       
141
       
 
       


     
···

       
204
       
183
       
 
       
  }

     

       
205
       
184
       
 
       
`;

     

       
206
       
185
       
 
       


     

       
207
       
207
       
-
       
const copyFallBack = () => {

     

       
186
       
186
       
+
       
const copyFallBack = copyText => {

     

       
208
       
187
       
 
       
  const copyTextArea = document.createElement('textArea');

     

       
209
       
209
       
-
       
  copyTextArea.value = 'npm install urql';

     

       
188
       
188
       
+
       
  copyTextArea.value = copyText;

     

       
210
       
189
       
 
       


     

       
211
       
190
       
 
       
  document.body.appendChild(copyTextArea);

     

       
212
       
191
       
 
       


     
···

       
216
       
195
       
 
       
  copyTextArea.remove();

     

       
217
       
196
       
 
       
};

     

       
218
       
197
       
 
       


     

       
219
       
219
       
-
       
class Hero extends React.Component {

     

       
220
       
220
       
-
       
  constructor() {

     

       
221
       
221
       
-
       
    super(...arguments);

     

       
198
       
198
       
+
       
const Hero = props => {

     

       
199
       
199
       
+
       
  const [animating, setAnimating] = useState(false);

     

       
200
       
200
       
+
       
  const [copied, setCopied] = useState(false);

     

       
222
       
201
       
 
       


     

       
223
       
223
       
-
       
    this.state = {

     

       
224
       
224
       
-
       
      animating: false,

     

       
225
       
225
       
-
       
      copied: false,

     

       
226
       
226
       
-
       
    };

     

       
227
       
227
       
-
       
  }

     

       
228
       
228
       
-
       


     

       
229
       
229
       
-
       
  handleCopy(e) {

     

       
230
       
230
       
-
       
    if (!navigator.clipboard) {

     

       
231
       
231
       
-
       
      copyFallBack();

     

       
232
       
232
       
-
       
      e.preventDefault();

     

       
233
       
233
       
-
       
      return;

     

       
234
       
234
       
-
       
    }

     

       
235
       
235
       
-
       
    navigator.clipboard.writeText('npm install urql');

     

       
236
       
236
       
-
       
  }

     

       
202
       
202
       
+
       
  const handleCopy = useCallback(

     

       
203
       
203
       
+
       
    e => {

     

       
204
       
204
       
+
       
      if (!navigator.clipboard) {

     

       
205
       
205
       
+
       
        copyFallBack(props.content.copyText);

     

       
206
       
206
       
+
       
        e.preventDefault();

     

       
207
       
207
       
+
       
        return;

     

       
208
       
208
       
+
       
      }

     

       
209
       
209
       
+
       
      navigator.clipboard.writeText(props.content.copyText);

     

       
210
       
210
       
+
       
    },

     

       
211
       
211
       
+
       
    [props.content.copyText]

     

       
212
       
212
       
+
       
  );

     

       
237
       
213
       
 
       


     

       
238
       
238
       
-
       
  render() {

     

       
239
       
239
       
-
       
    return (

     

       
240
       
240
       
-
       
      <WrapperStyled noPadding>

     

       
241
       
241
       
-
       
        <HeroContent>

     

       
242
       
242
       
-
       
          <HeroLogoContainer>

     

       
243
       
243
       
-
       
            <HeroLogo src={badge} />

     

       
244
       
244
       
-
       
          </HeroLogoContainer>

     

       
245
       
245
       
-
       
          <HeroTitle>urql</HeroTitle>

     

       
246
       
246
       
-
       
          <HeroBody>

     

       
247
       
247
       
-
       
            Universal React Query Library is a blazing-fast GraphQL client,

     

       
248
       
248
       
-
       
            exposed as a set of ReactJS components.

     

       
249
       
249
       
-
       
          </HeroBody>

     

       
250
       
250
       
-
       
          <HeroButtonsWrapper>

     

       
251
       
251
       
-
       
            <HeroNPMWrapper>

     

       
252
       
252
       
-
       
              <HeroNPMCopy>npm install urql</HeroNPMCopy>

     

       
253
       
253
       
-
       
              <HeroNPMButton onClick={this.handleCopy}>copy</HeroNPMButton>

     

       
254
       
254
       
-
       
            </HeroNPMWrapper>

     

       
255
       
255
       
-
       
            <HeroDocsButton to="docs/">Documentation</HeroDocsButton>

     

       
256
       
256
       
-
       
          </HeroButtonsWrapper>

     

       
257
       
257
       
-
       
        </HeroContent>

     

       
258
       
258
       
-
       
        <HeroNavList>

     

       
259
       
259
       
-
       
          <li>

     

       
260
       
260
       
-
       
            <Link to="docs/">Docs</Link>

     

       
261
       
261
       
-
       
          </li>

     

       
262
       
262
       
-
       
          <li>

     

       
263
       
263
       
-
       
            <a

     

       
264
       
264
       
-
       
              title="Issues"

     

       
265
       
265
       
-
       
              href="https://www.github.com/FormidableLabs/urql/issues"

     

       
266
       
266
       
-
       
            >

     

       
267
       
267
       
-
       
              Issues

     

       
268
       
268
       
-
       
            </a>

     

       
269
       
269
       
-
       
          </li>

     

       
270
       
270
       
-
       
          <li>

     

       
271
       
271
       
-
       
            <a title="GitHub" href="https://github.com/FormidableLabs/urql">

     

       
272
       
272
       
-
       
              GitHub

     

       
273
       
273
       
-
       
            </a>

     

       
274
       
274
       
-
       
          </li>

     

       
275
       
275
       
-
       
        </HeroNavList>

     

       
276
       
276
       
-
       
      </WrapperStyled>

     

       
277
       
277
       
-
       
    );

     

       
278
       
278
       
-
       
  }

     

       
279
       
279
       
-
       
}

     

       
214
       
214
       
+
       
  return (

     

       
215
       
215
       
+
       
    <WrapperStyled noPadding>

     

       
216
       
216
       
+
       
      <HeroContent>

     

       
217
       
217
       
+
       
        <HeroLogoContainer>

     

       
218
       
218
       
+
       
          <HeroLogo src={badge} />

     

       
219
       
219
       
+
       
        </HeroLogoContainer>

     

       
220
       
220
       
+
       
        <HeroTitle>urql</HeroTitle>

     

       
221
       
221
       
+
       
        <HeroBody>

     

       
222
       
222
       
+
       
          urql is a blazing-fast GraphQL client that supports React, Preact, and

     

       
223
       
223
       
+
       
          Svelte (alpha).

     

       
224
       
224
       
+
       
        </HeroBody>

     

       
225
       
225
       
+
       
        <HeroButtonsWrapper>

     

       
226
       
226
       
+
       
          <HeroNPMWrapper>

     

       
227
       
227
       
+
       
            <HeroNPMCopy>{props.content.copyText}</HeroNPMCopy>

     

       
228
       
228
       
+
       
            <HeroNPMButton onClick={handleCopy}>copy</HeroNPMButton>

     

       
229
       
229
       
+
       
          </HeroNPMWrapper>

     

       
230
       
230
       
+
       
          <HeroDocsButton to="docs/">Documentation</HeroDocsButton>

     

       
231
       
231
       
+
       
        </HeroButtonsWrapper>

     

       
232
       
232
       
+
       
      </HeroContent>

     

       
233
       
233
       
+
       
      <HeroNavList>

     

       
234
       
234
       
+
       
        <li>

     

       
235
       
235
       
+
       
          <ReactRouterLink to="docs/">Docs</ReactRouterLink>

     

       
236
       
236
       
+
       
        </li>

     

       
237
       
237
       
+
       
        <li>

     

       
238
       
238
       
+
       
          <a

     

       
239
       
239
       
+
       
            title="Issues"

     

       
240
       
240
       
+
       
            href="https://www.github.com/FormidableLabs/urql/issues"

     

       
241
       
241
       
+
       
          >

     

       
242
       
242
       
+
       
            Issues

     

       
243
       
243
       
+
       
          </a>

     

       
244
       
244
       
+
       
        </li>

     

       
245
       
245
       
+
       
        <li>

     

       
246
       
246
       
+
       
          <a title="GitHub" href="https://github.com/FormidableLabs/urql">

     

       
247
       
247
       
+
       
            GitHub

     

       
248
       
248
       
+
       
          </a>

     

       
249
       
249
       
+
       
        </li>

     

       
250
       
250
       
+
       
      </HeroNavList>

     

       
251
       
251
       
+
       
    </WrapperStyled>

     

       
252
       
252
       
+
       
  );

     

       
253
       
253
       
+
       
};

     

       
280
       
254
       
 
       


     

       
281
       
255
       
 
       
export default Hero;

     

···

       
4
       
4
       
 
       
import { useMarkdownTree } from 'react-static-plugin-md-pages';

     

       
5
       
5
       
 
       


     

       
6
       
6
       
 
       
import Features from './features';

     

       
7
       
7
       
+
       
import Components from './components';

     

       
7
       
8
       
 
       
import GetStarted from './get-started';

     

       
8
       
9
       
 
       
import MoreOSS from './more-oss';

     

       
9
       
10
       
 
       
import content from './_content';

     
···

       
20
       
21
       
 
       


     

       
21
       
22
       
 
       
  return (

     

       
22
       
23
       
 
       
    <Container ref={ref}>

     

       
23
       
23
       
-
       
      <Header />

     

       
24
       
24
       
-
       
      <Features

     

       
25
       
25
       
-
       
        featureArray={content.features}

     

       
26
       
26
       
-
       
        components={content.components}

     

       
27
       
27
       
-
       
      />

     

       
28
       
28
       
-
       
      <GetStarted getStartedObj={content.getStarted} />

     

       
29
       
29
       
-
       
      <MoreOSS ossArray={content.oss} />

     

       
24
       
24
       
+
       
      <Header content={content.header} />

     

       
25
       
25
       
+
       
      <Features featureArray={content.features} />

     

       
26
       
26
       
+
       
      <Components components={content.components} />

     

       
27
       
27
       
+
       
      <GetStarted content={content.getStarted} />

     

       
28
       
28
       
+
       
      <MoreOSS oss={content.oss} />

     

       
30
       
29
       
 
       
      <Footer />

     

       
31
       
30
       
 
       
    </Container>

     

       
32
       
31
       
 
       
  );

     

···

       
1
       
1
       
 
       
import React from 'react';

     

       
2
       
2
       
 
       
import PropTypes from 'prop-types';

     

       
3
       
3
       
-
       
// import { ProjectBadge } from "formidable-oss-badges";

     

       
4
       
3
       
 
       
import styled from 'styled-components';

     

       
4
       
4
       
+
       


     

       
5
       
5
       
 
       
import { BodyCopy } from '../../components/body-copy';

     

       
6
       
6
       
-
       
import { Button } from '../../components/button';

     

       
7
       
7
       
-
       
import { SecondaryTitle } from '../../components/secondary-title';

     

       
6
       
6
       
+
       
import { Link } from '../../components/link';

     

       
7
       
7
       
+
       
import { PanelSectionWrapper } from '../../components/panel';

     

       
8
       
8
       
 
       
import { SectionTitle } from '../../components/section-title';

     

       
9
       
9
       
+
       
import { SecondaryTitle } from '../../components/secondary-title';

     

       
9
       
10
       
 
       
import { Wrapper } from '../../components/wrapper';

     

       
10
       
11
       
 
       


     

       
11
       
11
       
-
       
const OuterWrapper = styled.div`

     

       
12
       
12
       
-
       
  background-color: #000000;

     

       
13
       
13
       
-
       
  background-size: 100% 100%;

     

       
14
       
14
       
-
       
  color: white;

     

       
15
       
15
       
-
       
  width: 100%;

     

       
16
       
16
       
-
       
  display: flex;

     

       
17
       
17
       
-
       
  justify-content: center;

     

       
12
       
12
       
+
       
const OSSCardContainer = styled.div`

     

       
13
       
13
       
+
       
  display: grid;

     

       
14
       
14
       
+
       
  grid-template-columns: 1fr;

     

       
15
       
15
       
+
       
  grid-template-rows: repeat(4, 1fr);

     

       
16
       
16
       
+
       
  grid-gap: 4rem;

     

       
17
       
17
       
+
       
  width: calc(100% - 4rem);

     

       
18
       
18
       
+
       
  max-width: 75%;

     

       
19
       
19
       
+
       
  margin: auto auto 4rem auto;

     

       
20
       
20
       
+
       


     

       
21
       
21
       
+
       
  @media (min-width: 768px) {

     

       
22
       
22
       
+
       
    grid-template-columns: repeat(2, 1fr);

     

       
23
       
23
       
+
       
    grid-template-rows: repeat(2, 1fr);

     

       
24
       
24
       
+
       
    max-width: 116rem;

     

       
25
       
25
       
+
       
  }

     

       
18
       
26
       
 
       
`;

     

       
19
       
27
       
 
       


     

       
20
       
28
       
 
       
const OSSCard = styled.div`

     

       
21
       
21
       
-
       
  margin: 0 auto 4rem;

     

       
22
       
22
       
-
       
  max-width: 43rem;

     

       
23
       
23
       
-
       
  position: relative;

     

       
24
       
29
       
 
       
  text-align: left;

     

       
25
       
25
       
-
       
  width: 100%;

     

       
26
       
30
       
 
       
  display: flex;

     

       
27
       
31
       
 
       
  flex-direction: column;

     

       
28
       
32
       
 
       
  align-items: center;

     

       
33
       
33
       
+
       


     

       
34
       
34
       
+
       
  > * {

     

       
35
       
35
       
+
       
    margin-top: 0;

     

       
36
       
36
       
+
       
    margin-bottom: 0;

     

       
37
       
37
       
+
       
  }

     

       
38
       
38
       
+
       


     

       
39
       
39
       
+
       
  > * + * {

     

       
40
       
40
       
+
       
    margin-top: 1rem;

     

       
41
       
41
       
+
       
  }

     

       
42
       
42
       
+
       


     

       
29
       
43
       
 
       
  @media (min-width: 768px) {

     

       
30
       
30
       
-
       
    width: calc(1 / 2 * 100% - (1 - 1 / 2) * 80px);

     

       
31
       
44
       
 
       
    flex-direction: row;

     

       
32
       
45
       
 
       
    justify-content: space-between;

     

       
33
       
33
       
-
       
    margin-bottom: 6rem;

     

       
34
       
34
       
-
       
  }

     

       
35
       
35
       
-
       
`;

     

       
36
       
46
       
 
       


     

       
37
       
37
       
-
       
const OSSImage = styled.img`

     

       
38
       
38
       
-
       
  left: 0;

     

       
39
       
39
       
-
       
  position: relative;

     

       
40
       
40
       
-
       
  top: 2rem;

     

       
41
       
41
       
-
       
  width: 18rem;

     

       
42
       
42
       
-
       
  max-width: none;

     

       
43
       
43
       
-
       
  padding: 13% 12%;

     

       
44
       
44
       
-
       
  @media (min-width: 1024px) {

     

       
45
       
45
       
-
       
    padding: 14px;

     

       
46
       
46
       
-
       
    width: 14rem;

     

       
47
       
47
       
-
       
  }

     

       
48
       
48
       
-
       
`;

     

       
47
       
47
       
+
       
    > * {

     

       
48
       
48
       
+
       
      margin-left: 0;

     

       
49
       
49
       
+
       
      margin-right: 0;

     

       
50
       
50
       
+
       
    }

     

       
49
       
51
       
 
       


     

       
50
       
50
       
-
       
const OSSLink = styled.a`

     

       
51
       
51
       
-
       
  & h3 {

     

       
52
       
52
       
-
       
    color: white;

     

       
53
       
53
       
-
       
  }

     

       
54
       
54
       
-
       
  & h3:hover {

     

       
55
       
55
       
-
       
    opacity: 0.7;

     

       
52
       
52
       
+
       
    > * + * {

     

       
53
       
53
       
+
       
      margin-top: 0;

     

       
54
       
54
       
+
       
      margin-left: 3rem;

     

       
55
       
55
       
+
       
    }

     

       
56
       
56
       
 
       
  }

     

       
57
       
57
       
 
       
`;

     

       
58
       
58
       
 
       


     

       
59
       
59
       
-
       
/*

     

       
60
       
60
       
-
       
const StyledProjectBadge = styled(ProjectBadge)`

     

       
61
       
61
       
-
       
  left: 0;

     

       
62
       
62
       
-
       
  position: relative;

     

       
63
       
63
       
-
       
  top: 2rem;

     

       
64
       
64
       
-
       
  width: 18rem;

     

       
65
       
65
       
-
       
  @media (min-width: 1024px) {

     

       
66
       
66
       
-
       
    width: 14rem;

     

       
67
       
67
       
-
       
  }

     

       
59
       
59
       
+
       
const OSSImage = styled.img`

     

       
60
       
60
       
+
       
  flex: 0 0 15rem;

     

       
61
       
61
       
+
       
  height: 15rem;

     

       
68
       
62
       
 
       
`;

     

       
69
       
69
       
-
       
*/

     

       
70
       
63
       
 
       


     

       
71
       
64
       
 
       
const OSSCopyContainer = styled.div`

     

       
72
       
65
       
 
       
  display: flex;

     

       
73
       
66
       
 
       
  flex-direction: column;

     

       
74
       
74
       
-
       
  @media (min-width: 768px) {

     

       
75
       
75
       
-
       
    padding-left: 1rem;

     

       
67
       
67
       
+
       


     

       
68
       
68
       
+
       
  > * {

     

       
69
       
69
       
+
       
    margin-top: 0;

     

       
70
       
70
       
+
       
    margin-bottom: 0;

     

       
76
       
71
       
 
       
  }

     

       
77
       
72
       
 
       


     

       
78
       
78
       
-
       
  @media (min-width: 1024px) {

     

       
79
       
79
       
-
       
    padding-left: 2rem;

     

       
73
       
73
       
+
       
  > * + * {

     

       
74
       
74
       
+
       
    margin-top: 2rem;

     

       
80
       
75
       
 
       
  }

     

       
81
       
76
       
 
       
`;

     

       
82
       
77
       
 
       


     

       
83
       
83
       
-
       
const SecondaryTitleStyled = styled(SecondaryTitle)`

     

       
84
       
84
       
-
       
  text-align: center;

     

       
78
       
78
       
+
       
const OSSTitle = styled(SecondaryTitle)`

     

       
79
       
79
       
+
       
  transition: opacity 0.3s ease-out;

     

       
80
       
80
       
+
       
  margin: 0;

     

       
81
       
81
       
+
       


     

       
82
       
82
       
+
       
  &:hover {

     

       
83
       
83
       
+
       
    opacity: 0.7;

     

       
84
       
84
       
+
       
  }

     

       
85
       
85
       
+
       


     

       
85
       
86
       
 
       
  @media (min-width: 768px) {

     

       
86
       
87
       
 
       
    text-align: left;

     

       
87
       
88
       
 
       
  }

     

       
88
       
89
       
 
       
`;

     

       
89
       
90
       
 
       


     

       
90
       
90
       
-
       
const SectionWrapper = styled(Wrapper)`

     

       
91
       
91
       
-
       
  padding: 8rem 8rem;

     

       
92
       
92
       
-
       
  h2 {

     

       
93
       
93
       
-
       
    margin-top: 0rem;

     

       
94
       
94
       
-
       
  }

     

       
95
       
95
       
-
       
  @media (max-width: 768px) {

     

       
96
       
96
       
-
       
    padding: 8rem 8rem;

     

       
97
       
97
       
-
       
    p {

     

       
98
       
98
       
-
       
      text-align: center;

     

       
99
       
99
       
-
       
    }

     

       
91
       
91
       
+
       
const OSSDescription = styled(BodyCopy)`

     

       
92
       
92
       
+
       
  @media (min-width: 768px) {

     

       
93
       
93
       
+
       
    text-align: left;

     

       
100
       
94
       
 
       
  }

     

       
101
       
95
       
 
       
`;

     

       
102
       
96
       
 
       


     

       
103
       
103
       
-
       
const ButtonStyled = styled(Button)`

     

       
104
       
104
       
-
       
  margin-bottom: 0;

     

       
105
       
105
       
-
       
  margin-top: 0;

     

       
106
       
106
       
-
       
`;

     

       
107
       
107
       
-
       


     

       
108
       
108
       
-
       
class MoreOSS extends React.Component {

     

       
109
       
109
       
-
       
  render() {

     

       
110
       
110
       
-
       
    return null; // TODO: formidable-oss-badges incorrectly bundles styled-components due to a broken rollup config

     

       
111
       
111
       
-
       


     

       
112
       
112
       
-
       
    /*

     

       
113
       
113
       
-
       
    return (

     

       
114
       
114
       
-
       
      <OuterWrapper>

     

       
115
       
115
       
-
       
        <SectionWrapper>

     

       
116
       
116
       
-
       
          <SectionTitle>More Open Source from Formidable</SectionTitle>

     

       
117
       
117
       
-
       
          {this.props.ossArray.map(card => (

     

       
118
       
118
       
-
       
            <OSSCard key={card.title}>

     

       
119
       
119
       
-
       
              <OSSLink href={card.link}>

     

       
120
       
120
       
-
       
                {card.hasOwnLogo ? (

     

       
121
       
121
       
-
       
                  <OSSImage src={card.logo} />

     

       
122
       
122
       
-
       
                ) : null}

     

       
123
       
123
       
-
       
              </OSSLink>

     

       
124
       
124
       
-
       
              <OSSCopyContainer>

     

       
125
       
125
       
-
       
                <OSSLink href={card.link}>

     

       
126
       
126
       
-
       
                  <SecondaryTitleStyled>{card.title}</SecondaryTitleStyled>

     

       
127
       
127
       
-
       
                </OSSLink>

     

       
128
       
128
       
-
       
                <BodyCopy>{card.description}</BodyCopy>

     

       
129
       
129
       
-
       
              </OSSCopyContainer>

     

       
130
       
130
       
-
       
            </OSSCard>

     

       
131
       
131
       
-
       
          ))}

     

       
132
       
132
       
-
       
          <ButtonStyled light="true" to="https://formidable.com/open-source/">

     

       
133
       
133
       
-
       
            View All

     

       
134
       
134
       
-
       
          </ButtonStyled>

     

       
135
       
135
       
-
       
        </SectionWrapper>

     

       
136
       
136
       
-
       
      </OuterWrapper>

     

       
137
       
137
       
-
       
    );

     

       
138
       
138
       
-
       
    */

     

       
139
       
139
       
-
       
  }

     

       
140
       
140
       
-
       
}

     

       
97
       
97
       
+
       
const MoreOSS = ({ oss }) => (

     

       
98
       
98
       
+
       
  <PanelSectionWrapper background="#000000">

     

       
99
       
99
       
+
       
    <SectionTitle>More Open Source from Formidable</SectionTitle>

     

       
100
       
100
       
+
       
    <OSSCardContainer>

     

       
101
       
101
       
+
       
      {oss.map(card => {

     

       
102
       
102
       
+
       
        return (

     

       
103
       
103
       
+
       
          <OSSCard key={card.title}>

     

       
104
       
104
       
+
       
            <OSSImage src={card.logo} />

     

       
105
       
105
       
+
       
            <OSSCopyContainer>

     

       
106
       
106
       
+
       
              <a href={card.link} target="_blank" rel="noopener noreferrer">

     

       
107
       
107
       
+
       
                <OSSTitle>{card.title}</OSSTitle>

     

       
108
       
108
       
+
       
              </a>

     

       
109
       
109
       
+
       
              <OSSDescription>{card.description}</OSSDescription>

     

       
110
       
110
       
+
       
            </OSSCopyContainer>

     

       
111
       
111
       
+
       
          </OSSCard>

     

       
112
       
112
       
+
       
        );

     

       
113
       
113
       
+
       
      })}

     

       
114
       
114
       
+
       
    </OSSCardContainer>

     

       
115
       
115
       
+
       
    <Link isExternal to="https://formidable.com/open-source/">

     

       
116
       
116
       
+
       
      View All

     

       
117
       
117
       
+
       
    </Link>

     

       
118
       
118
       
+
       
  </PanelSectionWrapper>

     

       
119
       
119
       
+
       
);

     

       
141
       
120
       
 
       


     

       
142
       
121
       
 
       
MoreOSS.propTypes = {

     

       
143
       
143
       
-
       
  ossArray: PropTypes.array,

     

       
122
       
122
       
+
       
  oss: PropTypes.arrayOf(

     

       
123
       
123
       
+
       
    PropTypes.shape({

     

       
124
       
124
       
+
       
      title: PropTypes.string.isRequired,

     

       
125
       
125
       
+
       
      link: PropTypes.string.isRequired,

     

       
126
       
126
       
+
       
      description: PropTypes.string.isRequired,

     

       
127
       
127
       
+
       
      logo: PropTypes.string.isRequired,

     

       
128
       
128
       
+
       
    }).isRequired

     

       
129
       
129
       
+
       
  ).isRequired,

     

       
144
       
130
       
 
       
};

     

       
145
       
131
       
 
       


     

       
146
       
132
       
 
       
export default MoreOSS;