[ADD] twitter section

main/ui-main/public/index.html

@@ -71,14 +71,70 @@
 </nav>
 <header>
 </header>
-<main class="container container--default pt-8 lg:py-16">
-  <div>
+<main>
+  <div class="container--wide mx-auto pt-8 lg:py-16">
     <h2 class="clear-both head-alt-md md:head-alt-lg pb-4 lg:pb-8 text-center">
       Co právě děláme
     </h2>
-    <div>
-      <div></div>
+    <div class="mb-8 flex flex-wrap justify-center">
+      <div class="box border border-grey-100">
+        <div class="box-content flex flex-col items-center text-center">
+          <img class="rounded-full shadow-sm w-12 mb-2" src="https://randomuser.me/api/portraits/women/56.jpg"
+               alt="user image"/>
+          <h5 class="font-alt mb-2">Tomáš Marný</h5>
+          <small class="mb-4 text-turquoise-500">@pirat.tomas.marny</small>
+          <p class="text-base leading-6 mb-2">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
+            eirmod
+            tempor invidunt ut labore
+            et
+            dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p>
+          <i class="ico--twitter text-turquoise-500 text-xl"></i>
         </div>
+      </div>
+      <div class="box border border-grey-100">
+        <div class="box-content flex flex-col items-center text-center">
+          <img class="rounded-full shadow-sm w-12 mb-2" src="https://randomuser.me/api/portraits/women/56.jpg"
+               alt="user image"/>
+          <h5 class="font-alt mb-2">Tomáš Marný</h5>
+          <small class="mb-4 text-turquoise-500">@pirat.tomas.marny</small>
+          <p class="text-base leading-6 mb-2">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
+            eirmod
+            tempor invidunt ut labore
+            et
+            dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p>
+          <i class="ico--twitter text-turquoise-500 text-xl"></i>
+        </div>
+      </div>
+      <div class="box border border-grey-100">
+        <div class="box-content flex flex-col items-center text-center">
+          <img class="rounded-full shadow-sm w-12 mb-2" src="https://randomuser.me/api/portraits/women/56.jpg"
+               alt="user image"/>
+          <h5 class="font-alt mb-2">Tomáš Marný</h5>
+          <small class="mb-4 text-turquoise-500">@pirat.tomas.marny</small>
+          <p class="text-base leading-6 mb-2">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
+            eirmod
+            tempor invidunt ut labore
+            et
+            dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p>
+          <i class="ico--twitter text-turquoise-500 text-xl"></i>
+        </div>
+      </div>
+      <div class="box border border-grey-100">
+        <div class="box-content flex flex-col items-center text-center">
+          <img class="rounded-full shadow-sm w-12 mb-2" src="https://randomuser.me/api/portraits/women/56.jpg"
+               alt="user image"/>
+          <h5 class="font-alt mb-2">Tomáš Marný</h5>
+          <small class="mb-4 text-turquoise-500">@pirat.tomas.marny</small>
+          <p class="text-base leading-6 mb-2">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
+            eirmod
+            tempor invidunt ut labore
+            et
+            dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p>
+          <i class="ico--twitter text-turquoise-500 text-xl"></i>
+        </div>
+      </div>
+    </div>
+    <div class="flex justify-center">
       <a href="#"
          class="btn btn--hoveractive font-condensed uppercase">
         <div class="btn__body-wrap">
@@ -86,6 +142,7 @@
         </div>
       </a>
     </div>
+  </div>
 </main>
 <footer></footer>
 

main/ui-main/public/styles.css

@@ -1833,6 +1833,20 @@ video {
   }
 }
 
+.box{
+  width: 15rem;
+}
+
+.box .box-content{
+  padding: 1rem;
+}
+
+@media (min-width: 992px) {
+  .box{
+    width: 20rem;
+  }
+}
+
 .navbar-menu__link{
   cursor: pointer;
   font-family: Roboto Condensed, Helvetica, Arial, sans-serif;
@@ -1929,6 +1943,22 @@ video {
   margin-right: 4rem;
 }
 
+.mb-8{
+  margin-bottom: 2rem;
+}
+
+.mb-2{
+  margin-bottom: 0.5rem;
+}
+
+.mb-4{
+  margin-bottom: 1rem;
+}
+
+.box-content{
+  box-sizing: content-box;
+}
+
 .flex{
   display: flex;
 }
@@ -1937,12 +1967,37 @@ video {
   width: 9rem;
 }
 
+.w-12{
+  width: 3rem;
+}
+
+.flex-col{
+  flex-direction: column;
+}
+
+.flex-wrap{
+  flex-wrap: wrap;
+}
+
 .items-center{
   align-items: center;
 }
 
-.justify-items-center{
-  justify-items: center;
+.justify-center{
+  justify-content: center;
+}
+
+.rounded-full{
+  border-radius: 9999px;
+}
+
+.border{
+  border-width: 1px;
+}
+
+.border-grey-100{
+  --tw-border-opacity: 1;
+  border-color: rgb(243 243 243 / var(--tw-border-opacity));
 }
 
 .pt-8{
@@ -1961,15 +2016,42 @@ video {
   font-family: Roboto Condensed, Helvetica, Arial, sans-serif;
 }
 
+.font-alt{
+  font-family: Bebas Neue, Helvetica, Arial, sans-serif;
+}
+
+.text-base{
+  font-size: 1rem;
+}
+
+.text-xl{
+  font-size: 1.3rem;
+}
+
 .uppercase{
   text-transform: uppercase;
 }
 
+.leading-6{
+  line-height: 1.5rem;
+}
+
 .text-white{
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
+.text-turquoise-500{
+  --tw-text-opacity: 1;
+  color: rgb(27 192 227 / var(--tw-text-opacity));
+}
+
+.shadow-sm{
+  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
 .transition{
   transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;

main/ui-main/src/css/molecules/box.pcss

+.box {
+    @apply w-60;
+    .box-content {
+        @apply p-4;
+    }
+}
+
+@screen lg {
+    .box {
+        @apply w-80;
+    }
+}

main/ui-main/src/css/style.pcss

@@ -23,6 +23,9 @@
 @import "./atoms/icons.pcss";
 
 
+@import "./molecules/box.pcss";
+
+
 @import "./organisms/navbar.pcss";
 
 

main/ui-main/tailwind.config.js

@@ -108,6 +108,9 @@ module.exports = {
                 '200': '#76b4cf',
                 '300': '#027da8',
             },
+            'turquoise': {
+                '500': '#1BC0E3'
+            },
             'cyan': {
                 '100': '#a7d4d1',
                 '200': '#57b3bd',