Copy environment

Contact Hero

<section class="section section--page-intro section--full contact-hero">
    <div class="section__inner">
        <div class="section__content">
            <div class="h-container">
                <div class="intro contact-hero__intro">

                    <h1 class="heading heading--secondary h2">
                        <span class="heading__small">take the first steps</span>
                        <span class="heading__main">
                    to play
            </span>
                    </h1>
                    <div class="intro__content ">
                        Do you have a project you’d like to discuss? Perhaps you want to talk about web development? Maybe you’re feeling lonely and want to have a chat? You can drop us a line or <a href='#location' class='js-scroll-to'>pay us a visit.</a>
                    </div>
                </div>
                <div class="grid">
                    <div class="grid__col grid__col--sm-4 text">
                        <h4>new business</h4>
                        <p>ardo@play.ee<br>Ardo Aednik</p>
                    </div>
                    <div class="grid__col grid__col--sm-4 text">
                        <h4>careers</h4>
                        <p>team@play.ee<br>Kristel-Maria Kadajane</p>
                    </div>
                    <div class="grid__col grid__col--sm-4 text">
                        <h4>support</h4>
                        <p>support@play.ee<br>Lauri Uue</p>
                    </div>
                </div>
            </div>
            <div class="pattern-game pattern-game--inverse contact-hero__line-game" data-type="LineGame" data-size="4" data-patternSize="24" data-dotColor="&#x23;e9e8e8" data-easing="easeInOutQuint" data-lineCap="round" data-lines="&#x5B;&#x7B;&quot;color&quot;&#x3A;&quot;&#x23;00bf9c&quot;,&quot;delay&quot;&#x3A;750,&quot;pause&quot;&#x3A;1000,&quot;points&quot;&#x3A;&#x5B;&#x5B;20,25&#x5D;,&#x5B;20,30&#x5D;,&#x5B;15,30&#x5D;&#x5D;&#x7D;,&#x7B;&quot;color&quot;&#x3A;&quot;&#x23;ff452d&quot;,&quot;easing&quot;&#x3A;&quot;easeOutQuart&quot;,&quot;speed&quot;&#x3A;0.02,&quot;delay&quot;&#x3A;1000,&quot;pause&quot;&#x3A;5000,&quot;wait&quot;&#x3A;1000,&quot;points&quot;&#x3A;&#x5B;&#x5B;75,75&#x5D;,&#x5B;75,85&#x5D;&#x5D;&#x7D;,&#x7B;&quot;points&quot;&#x3A;&#x5B;&#x5B;60,25&#x5D;,&#x5B;60,25&#x5D;,&#x5B;60,15&#x5D;&#x5D;&#x7D;,&#x7B;&quot;speed&quot;&#x3A;0.01,&quot;flip&quot;&#x3A;false,&quot;points&quot;&#x3A;&#x5B;&#x5B;0,&#x20;0&#x5D;,&#x20;&#x5B;0,&#x20;100&#x5D;,&#x20;&#x5B;100,&#x20;100&#x5D;,&#x20;&#x5B;100,&#x20;0&#x5D;,&#x20;&#x5B;0,&#x20;0&#x5D;&#x5D;&#x7D;,&#x7B;&quot;speed&quot;&#x3A;0.02,&quot;flip&quot;&#x3A;true,&quot;points&quot;&#x3A;&#x5B;&#x5B;10,&#x20;10&#x5D;,&#x20;&#x5B;10,&#x20;90&#x5D;,&#x20;&#x5B;90,&#x20;90&#x5D;,&#x20;&#x5B;90,&#x20;10&#x5D;,&#x20;&#x5B;10,&#x20;10&#x5D;&#x5D;&#x7D;,&#x7B;&quot;speed&quot;&#x3A;0.03,&quot;flip&quot;&#x3A;false,&quot;points&quot;&#x3A;&#x5B;&#x5B;45,&#x20;45&#x5D;,&#x20;&#x5B;45,&#x20;55&#x5D;,&#x20;&#x5B;55,&#x20;55&#x5D;,&#x20;&#x5B;55,&#x20;45&#x5D;,&#x20;&#x5B;45,&#x20;45&#x5D;&#x5D;&#x7D;&#x5D;">
                <svg class="pattern-game__pattern" xmlns="http://www.w3.org/2000/svg" fill="#000">    <defs>
        <pattern id="line-game" width="24" height="24" x="50%" y="50%" patternUnits="userSpaceOnUse">
                                            <circle cx="12" cy="12" r="2" fill="#e9e8e8" />
                    </pattern>
    </defs>
    <rect x="0" y="0" width="100%" height="100%" fill="url(#line-game)"></rect>
</svg>
                <canvas class="pattern-game__canvas"></canvas>

            </div>

        </div>
    </div>
</section>
{
  "language": "en-US",
  "data": {
    "intro": {
      "heading": {
        "prefix": "take the first steps",
        "text": "to play"
      },
      "content": "Do you have a project you’d like to discuss? Perhaps you want to talk about web development? Maybe you’re feeling lonely and want to have a chat? You can drop us a line or <a href='#location' class='js-scroll-to'>pay us a visit.</a>"
    },
    "contacts": [
      {
        "info": "<h4>new business</h4><p>ardo@play.ee<br>Ardo Aednik</p>"
      },
      {
        "info": "<h4>careers</h4><p>team@play.ee<br>Kristel-Maria Kadajane</p>"
      },
      {
        "info": "<h4>support</h4><p>support@play.ee<br>Lauri Uue</p>"
      }
    ],
    "lineGame": {
      "patternId": "line-game",
      "game": {
        "size": 4,
        "patternSize": 24,
        "dotColor": "#e9e8e8",
        "easing": "easeInOutQuint",
        "lineCap": "round",
        "lines": "[{\"color\":\"#00bf9c\",\"delay\":750,\"pause\":1000,\"points\":[[20,25],[20,30],[15,30]]},{\"color\":\"#ff452d\",\"easing\":\"easeOutQuart\",\"speed\":0.02,\"delay\":1000,\"pause\":5000,\"wait\":1000,\"points\":[[75,75],[75,85]]},{\"points\":[[60,25],[60,25],[60,15]]},{\"speed\":0.01,\"flip\":false,\"points\":[[0, 0], [0, 100], [100, 100], [100, 0], [0, 0]]},{\"speed\":0.02,\"flip\":true,\"points\":[[10, 10], [10, 90], [90, 90], [90, 10], [10, 10]]},{\"speed\":0.03,\"flip\":false,\"points\":[[45, 45], [45, 55], [55, 55], [55, 45], [45, 45]]}]"
      }
    }
  }
}