From 5b959fba7511a9cfc8176033fc4d6d657784ffcd Mon Sep 17 00:00:00 2001
From: Moris Zen <moris.pasic@gmail.com>
Date: Mon, 9 Jul 2018 20:53:11 +0200
Subject: [PATCH] Add technologies, component restructure, config changes and
 style fixes

---
 src/components/Footer.js          |   10 +-
 src/components/Technologies.js    |  156 +-
 src/images/amazon-webservices.svg |   41 +
 src/images/angular-js.svg         |   20 +
 src/images/docker.svg             |   28 +
 src/images/elastic.svg            |   25 +
 src/images/es6.svg                |   21 +
 src/images/html-5.svg             |   22 +
 src/images/jenkins.svg            |   34 +
 src/images/mongodb.svg            |   19 +
 src/images/mysql.svg              |   18 +
 src/images/nodejs.svg             |   23 +
 src/images/postgresql.svg         |   25 +
 src/images/python.svg             |   18 +
 src/images/rails.svg              |   29 +
 src/images/react.svg              |   20 +
 src/images/redis.svg              |   31 +
 src/images/ruby.svg               |   23 +
 src/pages/index.js                |    8 +-
 src/pages/services.js             |  116 +-
 src/styles/index.css              | 2920 +++++++++++++++++++++++++++++
 tailwind.config.js                |    4 +-
 22 files changed, 3453 insertions(+), 158 deletions(-)
 create mode 100644 src/images/amazon-webservices.svg
 create mode 100644 src/images/angular-js.svg
 create mode 100644 src/images/docker.svg
 create mode 100644 src/images/elastic.svg
 create mode 100644 src/images/es6.svg
 create mode 100644 src/images/html-5.svg
 create mode 100644 src/images/jenkins.svg
 create mode 100644 src/images/mongodb.svg
 create mode 100644 src/images/mysql.svg
 create mode 100644 src/images/nodejs.svg
 create mode 100644 src/images/postgresql.svg
 create mode 100644 src/images/python.svg
 create mode 100644 src/images/rails.svg
 create mode 100644 src/images/react.svg
 create mode 100644 src/images/redis.svg
 create mode 100644 src/images/ruby.svg

diff --git a/src/components/Footer.js b/src/components/Footer.js
index 98b8029..5dbb1c3 100644
--- a/src/components/Footer.js
+++ b/src/components/Footer.js
@@ -14,7 +14,7 @@ let menuClasses =
 
 const Footer = () => (
   <footer className="bg-indigo-darker">
-    <div className="container mx-auto pt-10 lg:flex">
+    <div className="container mx-auto py-10 lg:flex">
       <div className="lg:w-1/4 p-4">
         <img src={LogoSaburly} alt="Saburly Logo" className="w-full" />
         <div className="flex justify-between social-icons py-2">
@@ -106,14 +106,6 @@ const Footer = () => (
         </div>
       </div>
     </div>
-    <div className="sm:flex items-center text-center justify-center pb-8">
-      <Button
-        text="Say Hello"
-        standard
-        classes="rounded-full text-white hover:shadow mx-2"
-        url="/contact"
-      />
-    </div>
   </footer>
 )
 
diff --git a/src/components/Technologies.js b/src/components/Technologies.js
index d3b95a1..7f0a332 100644
--- a/src/components/Technologies.js
+++ b/src/components/Technologies.js
@@ -1,158 +1,126 @@
 import React from 'react'
 import Link from 'gatsby-link'
 
+import iconReact from '../images/react.svg'
+import iconHtml from '../images/html-5.svg'
+import iconAmazon from '../images/amazon-webservices.svg'
+import iconAngular from '../images/angular-js.svg'
+import iconDocker from '../images/docker.svg'
+import iconElastic from '../images/elastic.svg'
+import iconEs6 from '../images/es6.svg'
+import iconJenkins from '../images/jenkins.svg'
+import iconMongo from '../images/mongodb.svg'
+import iconMysql from '../images/mysql.svg'
+import iconNode from '../images/nodejs.svg'
+import iconPostgres from '../images/postgresql.svg'
+import iconPython from '../images/python.svg'
+import iconRuby from '../images/ruby.svg'
+import iconRails from '../images/rails.svg'
+import iconRedis from '../images/redis.svg'
+
 import Carousel from 'react-leaf-carousel'
 
 const Technologies = ({ ...props }) => (
   <Carousel
     breakpoints={[
       {
-        breakpoint: 500,
+        breakpoint: 576,
         settings: {
-          slidesToShow: 2,
+          slidesToShow: 3,
           slidesToScroll: 2,
         },
       },
       {
         breakpoint: 768,
         settings: {
-          slidesToShow: 3,
+          slidesToShow: 4,
           slidesToScroll: 3,
         },
       },
+      {
+        breakpoint: 992,
+        settings: {
+          slidesToShow: 5,
+          slidesToScroll: 4,
+        },
+      },
     ]}
     dots={false}
     autoCycle={true}
     arrows={false}
     showSides={true}
     pauseOnHover={false}
-    cycleInterval={2500}
+    cycleInterval={2000}
     showSides={false}
     sidesOpacity={0.5}
     sideSize={0.1}
-    slidesToScroll={4}
-    slidesToShow={4}
+    slidesToScroll={2}
+    slidesToShow={6}
     scrollOnDevice={true}
   >
     <div>
-      <img
-        alt=""
-        src="https://placeholdit.imgix.net/~text?txtsize=20&bg=55b64e&txtclr=ffffff&txt=215%C3%97215&w=215&h=215"
-      />
+      <img src={iconHtml} alt="HTML5 Web Agency" />
+      <h3 className="text-center">HTML5</h3>
     </div>
     <div>
-      <img
-        alt=""
-        src="https://placeholdit.imgix.net/~text?txtsize=20&bg=904098&txtclr=ffffff&txt=215%C3%97215&w=215&h=215"
-      />
+      <img src={iconReact} alt="Reactjs Agency" />
+      <h3 className="text-center">React</h3>
     </div>
     <div>
-      <img
-        alt=""
-        src="https://placeholdit.imgix.net/~text?txtsize=20&bg=ef4d9c&txtclr=ffffff&txt=215%C3%97215&w=215&h=215"
-      />
+      <img src={iconAmazon} alt="Amazon Web Services Agency" />
+      <h3 className="text-center">Amazon AWS</h3>
     </div>
     <div>
-      <img
-        alt=""
-        src="https://placeholdit.imgix.net/~text?txtsize=20&bg=00f3d1&txtclr=ffffff&txt=215%C3%97215&w=215&h=215"
-      />
+      <img src={iconAngular} alt="Angular Agency" />
+      <h3 className="text-center">Angular</h3>
     </div>
     <div>
-      <img
-        alt=""
-        src="https://placeholdit.imgix.net/~text?txtsize=20&bg=00ffff&txtclr=ffffff&txt=215%C3%97215&w=215&h=215"
-      />
+      <img src={iconDocker} alt="Docker Agency" />
+      <h3 className="text-center">Docker</h3>
     </div>
     <div>
-      <img
-        alt=""
-        src="https://placeholdit.imgix.net/~text?txtsize=20&bg=ee1f34&txtclr=ffffff&txt=215%C3%97215&w=215&h=215"
-      />
+      <img src={iconElastic} alt="Elastic Agency" />
+      <h3 className="text-center">Elastic</h3>
     </div>
     <div>
-      <img
-        alt=""
-        src="https://placeholdit.imgix.net/~text?txtsize=20&bg=91b4c0&txtclr=ffffff&txt=215%C3%97215&w=215&h=215"
-      />
+      <img src={iconEs6} alt="ES6 JavaScript Agency" />
+      <h3 className="text-center">JS/ES6+</h3>
     </div>
     <div>
-      <img
-        alt=""
-        src="https://placeholdit.imgix.net/~text?txtsize=20&bg=ff6347&txtclr=ffffff&txt=215%C3%97215&w=215&h=215"
-      />
+      <img src={iconJenkins} alt="Jenkins Web Consultancy" />
+      <h3 className="text-center">Jenkins</h3>
     </div>
     <div>
-      <img
-        alt=""
-        src="https://placeholdit.imgix.net/~text?txtsize=20&bg=ebbfbf&txtclr=ffffff&txt=215%C3%97215&w=215&h=215"
-      />
+      <img src={iconMongo} alt="Mongodb Agency" />
+      <h3 className="text-center">Mongo DB</h3>
     </div>
     <div>
-      <img
-        alt=""
-        src="https://placeholdit.imgix.net/~text?txtsize=20&bg=def1f9&txtclr=ffffff&txt=215%C3%97215&w=215&h=215"
-      />
+      <img src={iconMysql} alt="MySQL Web Agency" />
+      <h3 className="text-center">MySQL</h3>
     </div>
     <div>
-      <img
-        alt=""
-        src="https://placeholdit.imgix.net/~text?txtsize=20&bg=cdf2c6&txtclr=ffffff&txt=215%C3%97215&w=215&h=215"
-      />
+      <img src={iconNode} alt="NodeJS Web Agency" />
+      <h3 className="text-center">Node.js</h3>
     </div>
     <div>
-      <img
-        alt=""
-        src="https://placeholdit.imgix.net/~text?txtsize=20&bg=9fa616&txtclr=ffffff&txt=215%C3%97215&w=215&h=215"
-      />
+      <img src={iconPostgres} alt="PostgreSQL Web Agency" />
+      <h3 className="text-center">PostgreSQL</h3>
     </div>
     <div>
-      <img
-        alt=""
-        src="https://placeholdit.imgix.net/~text?txtsize=20&bg=2c4caa&txtclr=ffffff&txt=215%C3%97215&w=215&h=215"
-      />
+      <img src={iconPython} alt="Python Web Consultancy" />
+      <h3 className="text-center">Python</h3>
     </div>
     <div>
-      <img
-        alt=""
-        src="https://placeholdit.imgix.net/~text?txtsize=20&bg=44e3e1&txtclr=ffffff&txt=215%C3%97215&w=215&h=215"
-      />
+      <img src={iconRuby} alt="Ruby Web Agency" />
+      <h3 className="text-center">Ruby</h3>
     </div>
     <div>
-      <img
-        alt=""
-        src="https://placeholdit.imgix.net/~text?txtsize=20&bg=ff6666&txtclr=ffffff&txt=215%C3%97215&w=215&h=215"
-      />
+      <img src={iconRails} alt="Ruby on Rails Web Agency" />
+      <h3 className="text-center">Ruby on Rails</h3>
     </div>
     <div>
-      <img
-        alt=""
-        src="https://placeholdit.imgix.net/~text?txtsize=20&bg=94e1e3&txtclr=ffffff&txt=215%C3%97215&w=215&h=215"
-      />
-    </div>
-    <div>
-      <img
-        alt=""
-        src="https://placeholdit.imgix.net/~text?txtsize=20&bg=29083c&txtclr=ffffff&txt=215%C3%97215&w=215&h=215"
-      />
-    </div>
-    <div>
-      <img
-        alt=""
-        src="https://placeholdit.imgix.net/~text?txtsize=20&bg=ffff99&txtclr=ffffff&txt=215%C3%97215&w=215&h=215"
-      />
-    </div>
-    <div>
-      <img
-        alt=""
-        src="https://placeholdit.imgix.net/~text?txtsize=20&bg=616161&txtclr=ffffff&txt=215%C3%97215&w=215&h=215"
-      />
-    </div>
-    <div>
-      <img
-        alt=""
-        src="https://placeholdit.imgix.net/~text?txtsize=20&bg=ed7ebe&txtclr=ffffff&txt=215%C3%97215&w=215&h=215"
-      />
+      <img src={iconRedis} alt="Redis Services Consultancy" />
+      <h3 className="text-center">Redis</h3>
     </div>
   </Carousel>
 )
diff --git a/src/images/amazon-webservices.svg b/src/images/amazon-webservices.svg
new file mode 100644
index 0000000..98e3f7f
--- /dev/null
+++ b/src/images/amazon-webservices.svg
@@ -0,0 +1,41 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="110px" height="110px" viewBox="0 0 110 110" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 46.2 (44496) - http://www.bohemiancoding.com/sketch -->
+    <title>Amazon_Webservice</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="assets" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Amazon_Webservice">
+            <g id="Group-69">
+                <g id="Group-68" transform="translate(5.789474, 16.644737)" fill="#646EF2">
+                    <g id="Group-67" transform="translate(0.192982, 23.447368)">
+                        <polygon id="Path-61" points="0.449359277 5.60428028 0.449359277 22.2749454 12.715136 28.8629598 12.715136 11.477464"></polygon>
+                        <polygon id="Path-62" points="14.2026149 11.525443 14.2026149 28.8525352 27.2097128 22.9514143 27.2097128 5.61622669"></polygon>
+                        <polygon id="Path-63" points="13.5101079 9.46304749 23.5891439 5.08745559 13.5101079 0 3.22809898 5.08745559"></polygon>
+                    </g>
+                    <g id="Group-67" transform="translate(13.942982, 48.052632)">
+                        <polygon id="Path-61" points="0.449359277 5.60428028 0.449359277 22.2749454 12.715136 28.8629598 12.715136 11.477464"></polygon>
+                        <polygon id="Path-62" points="14.2026149 11.525443 14.2026149 28.8525352 27.2097128 22.9514143 27.2097128 5.61622669"></polygon>
+                        <polygon id="Path-63" points="13.5101079 9.46304749 23.5891439 5.08745559 13.5101079 0 3.22809898 5.08745559"></polygon>
+                    </g>
+                    <g id="Group-67" transform="translate(28.416667, 24.171053)">
+                        <polygon id="Path-61" points="0.449359277 5.60428028 0.449359277 22.2749454 12.715136 28.8629598 12.715136 11.477464"></polygon>
+                        <polygon id="Path-62" points="14.2026149 11.525443 14.2026149 28.8525352 27.2097128 22.9514143 27.2097128 5.61622669"></polygon>
+                        <polygon id="Path-63" points="13.5101079 9.46304749 23.5891439 5.08745559 13.5101079 0 3.22809898 5.08745559"></polygon>
+                    </g>
+                    <g id="Group-67" transform="translate(42.890351, 0.289474)">
+                        <polygon id="Path-61" points="0.449359277 5.60428028 0.449359277 22.2749454 12.715136 28.8629598 12.715136 11.477464"></polygon>
+                        <polygon id="Path-62" points="14.2026149 11.525443 14.2026149 28.8525352 27.2097128 22.9514143 27.2097128 5.61622669"></polygon>
+                        <polygon id="Path-63" points="13.5101079 9.46304749 23.5891439 5.08745559 13.5101079 0 3.22809898 5.08745559"></polygon>
+                    </g>
+                    <g id="Group-67" transform="translate(71.114035, 0.289474)">
+                        <polygon id="Path-61" points="0.449359277 5.60428028 0.449359277 22.2749454 12.715136 28.8629598 12.715136 11.477464"></polygon>
+                        <polygon id="Path-62" points="14.2026149 11.525443 14.2026149 28.8525352 27.2097128 22.9514143 27.2097128 5.61622669"></polygon>
+                        <polygon id="Path-63" points="13.5101079 9.46304749 23.5891439 5.08745559 13.5101079 0 3.22809898 5.08745559"></polygon>
+                    </g>
+                </g>
+                <rect id="Rectangle-11" x="0" y="0" width="110" height="110"></rect>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/images/angular-js.svg b/src/images/angular-js.svg
new file mode 100644
index 0000000..dbab5cf
--- /dev/null
+++ b/src/images/angular-js.svg
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="110px" height="110px" viewBox="0 0 110 110" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 46.2 (44496) - http://www.bohemiancoding.com/sketch -->
+    <title>Angular_js</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="assets" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Angular_js">
+            <g id="Group-2">
+                <g id="Group-66" transform="translate(17.023282, 17.274243)">
+                    <polygon id="Path-57" fill="#818AFF" points="0 13.4340186 37.4078717 0 37.4078717 77.4569953 5.52067654 61.1930425"></polygon>
+                    <polygon id="Path-58" fill="#E0FFC1" points="16.4889961 53.2516843 37.183222 7.52828245 37.183222 22.1426098 31.4683849 36.241745 37.530924 36.241745 37.530924 42.6473403 28.7942211 42.6473403 24.5439149 53.2516843"></polygon>
+                    <polygon id="Path-57" fill="#646EF2" transform="translate(55.619599, 38.728498) scale(-1, 1) translate(-55.619599, -38.728498) " points="36.9156629 13.4340186 74.3235346 0 74.3235346 77.4569953 42.4363394 61.1930425"></polygon>
+                    <polygon id="Path-58" fill="#B8E986" transform="translate(47.436627, 30.154492) scale(-1, 1) translate(-47.436627, -30.154492) " points="36.9156629 53.2516843 57.9575908 7.05730056 57.9575908 22.2214231 51.8950517 36.241745 57.9575908 36.241745 57.9575908 42.6473403 49.2208879 42.6473403 44.9705817 53.2516843"></polygon>
+                </g>
+                <rect id="Rectangle-9" x="0" y="0" width="110" height="110"></rect>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/images/docker.svg b/src/images/docker.svg
new file mode 100644
index 0000000..6955cc6
--- /dev/null
+++ b/src/images/docker.svg
@@ -0,0 +1,28 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="110px" height="110px" viewBox="0 0 110 110" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 46.2 (44496) - http://www.bohemiancoding.com/sketch -->
+    <title>Docker</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="assets" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Docker">
+            <g id="Group">
+                <g id="Group-79" transform="translate(5.289062, 24.070880)">
+                    <path d="M0.141863206,27.2607361 L77.2082569,27.2607361 C74.0061913,20.310661 74.3476935,13.8384348 78.2327632,7.84405739 C81.7916004,10.1557741 84.6314988,14.0633928 86.7524584,19.5669135 C93.4207947,19.125124 97.6453,19.790262 99.4259742,21.5623276 C98.0024749,26.1205452 90.2078409,29.2086083 84.4906467,29.759893 C81.6539615,33.4732015 67.9446311,64.8797673 32.8922462,62.6380732 C9.52398954,61.1436105 -1.39280477,49.3511648 0.141863206,27.2607361 Z" id="Path-121" fill="#646EF2"></path>
+                    <polygon id="Path-122" fill="#818AFF" points="7.84941902 28.7615438 7.84941902 18.3028006 20.931784 18.3028006 20.931784 28.7615438"></polygon>
+                    <polygon id="Path-122" fill="#818AFF" points="18.315311 28.7615438 18.315311 18.3028006 31.3976761 18.3028006 31.3976761 28.7615438"></polygon>
+                    <polygon id="Path-122" fill="#818AFF" points="31.3976761 28.7615438 31.3976761 18.3028006 44.4800411 18.3028006 44.4800411 28.7615438"></polygon>
+                    <polygon id="Path-122" fill="#818AFF" points="44.4800411 28.7615438 44.4800411 18.3028006 57.5624061 18.3028006 57.5624061 28.7615438"></polygon>
+                    <polygon id="Path-122" fill="#818AFF" points="54.9459331 28.7615438 54.9459331 18.3028006 68.0282981 18.3028006 68.0282981 28.7615438"></polygon>
+                    <polygon id="Path-122" fill="#818AFF" points="44.4800411 18.3028006 44.4800411 7.84405739 57.5624061 7.84405739 57.5624061 18.3028006"></polygon>
+                    <polygon id="Path-122" fill="#818AFF" points="44.4800411 10.4587432 44.4800411 0 57.5624061 0 57.5624061 10.4587432"></polygon>
+                    <polygon id="Path-122" fill="#818AFF" points="31.3976761 18.3028006 31.3976761 7.84405739 44.4800411 7.84405739 44.4800411 18.3028006"></polygon>
+                    <polygon id="Path-122" fill="#818AFF" points="18.315311 18.3028006 18.315311 7.84405739 31.3976761 7.84405739 31.3976761 18.3028006"></polygon>
+                    <path d="M9.65058571,52.7811747 C19.3549164,51.8360094 24.2661277,50.1268839 24.3842196,47.6537983 C24.5613573,43.9441697 30.856644,58.2861498 36.7294357,60.5143792 C36.7887201,61.0972322 38.104638,62.1962078 29.060375,61.0972322 C23.0308663,60.3645818 16.5609365,57.5925627 9.65058571,52.7811747 Z" id="Path-123" fill="#FFFFFF"></path>
+                    <ellipse id="Oval-18" fill="#B8E986" cx="34.0141491" cy="39.220287" rx="2.61647301" ry="2.6146858"></ellipse>
+                </g>
+                <rect id="Rectangle-9" x="0" y="0" width="110" height="110"></rect>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/images/elastic.svg b/src/images/elastic.svg
new file mode 100644
index 0000000..73df5bd
--- /dev/null
+++ b/src/images/elastic.svg
@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="110px" height="110px" viewBox="0 0 110 110" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 46.2 (44496) - http://www.bohemiancoding.com/sketch -->
+    <title>Elastic</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="assets" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Elastic">
+            <g id="Group">
+                <g id="Group-71" transform="translate(15.000000, 15.000000)">
+                    <path d="M52.1204502,70.8472102 C57.6539095,73.7416529 62.5833501,73.7416529 66.9087722,70.8472102 C73.3969054,66.5055462 68.4421769,56.0271076 69.8287589,56.0749578 C71.2153409,56.122808 77.0920059,48.8101457 78.113529,45.3926008 C79.135052,41.9750559 81.6350819,36.1705545 71.4438079,28.1365356 C70.5275559,27.4142328 68.78561,27.2341307 68.9073677,26.2693159 C69.3892871,22.4505577 69.0714635,15.8665703 67.5251893,12.2573409 C65.978915,8.64811156 58.5824193,0.884841915 48.3556051,0.0612795024 C41.537729,-0.487762106 35.224813,2.65260313 29.4168571,9.48237522 C23.3950829,6.94360753 18.6241278,6.78720321 15.1039919,9.01316224 C11.583856,11.2391213 10.1980942,15.806055 10.9467065,22.7139635 C3.79767907,26.6924933 0.153641839,30.5256754 0.0145948551,34.2135097 C-0.19397562,39.7452611 2.12043835,46.5095567 4.8599841,47.5090191 C6.68634793,48.1753274 8.71525542,49.9936691 10.9467065,52.9640444 C10.6506641,59.8542842 12.0364259,65.8153395 15.1039919,70.8472102 C19.7053409,78.3950164 33.1813778,83.2365971 40.6959206,78.3950164 C45.7056158,75.167296 49.5137923,72.6513606 52.1204502,70.8472102 Z" id="Path-90" fill="#B8E986"></path>
+                    <g id="Group-70" transform="translate(2.171053, 2.171053)" fill="#646EF2">
+                        <path d="M47.0926089,41.7089888 L64.8224301,25.329896 C65.0322121,18.9015262 64.5884099,14.4597964 63.4910234,12.0047065 C60.1252457,4.47473706 52.819226,0.285472854 47.0926089,0.285472854 C38.5653111,0.285472854 32.1540372,3.31226476 27.8587871,9.36584857 L24.4181034,26.1816555 L26.9384032,33.1857875 L47.0926089,41.7089888 Z" id="Path-84"></path>
+                        <path d="M48.8362069,42.10238 L65.5496378,26.2938596 C71.2586988,30.3886331 74.0920867,34.4265611 74.0498015,38.4076434 C73.9863737,44.3792669 69.7903272,50.0605082 66.2019859,51.3185867 C62.6136445,52.5766651 53.1196589,48.7548874 52.2951261,48.244171 C51.7454375,47.9036934 50.5924645,45.8564297 48.8362069,42.10238 Z" id="Path-85"></path>
+                        <path d="M53.7340376,52.8924284 L50.8450544,66.3616884 C52.6604827,68.8731467 54.4256723,70.0638919 56.1406234,69.9339241 C57.4748929,69.8328063 61.7349593,69.9963823 63.9713678,68.6684227 C66.0466798,67.4361207 67.2010255,64.8727173 67.5574096,63.7736961 C68.2978421,61.4903421 68.3787356,56.889063 67.5574096,55.8120378 C67.0098589,55.0940211 62.4020683,54.1208179 53.7340376,52.8924284 Z" id="Path-86"></path>
+                        <path d="M10.1348418,48.921331 C10.0127499,49.10579 15.6453025,44.614623 27.0324997,35.4478301 L46.2559358,43.3880785 L50.5455444,51.7287037 L48.4558217,67.0820644 C41.8886394,73.0418246 35.1238789,75.8782366 28.1615402,75.5913005 C17.7180322,75.1608963 9.51431115,61.7350795 10.1348418,48.921331 Z" id="Path-87"></path>
+                        <path d="M9.15170932,46.6966394 L25.4749127,33.5699839 L22.9236513,25.1354813 L10.5616809,22.3707295 C4.10954269,25.9133365 0.609906003,29.9676548 0.0627708625,34.5336844 C-0.484364278,39.099714 2.54528187,43.1540324 9.15170932,46.6966394 Z" id="Path-88"></path>
+                        <path d="M22.6090878,22.8048686 L25.4815473,8.51859743 C20.6116582,6.31524768 16.6466186,6.0903183 13.5864285,7.84380929 C10.5262384,9.59730027 8.99614338,13.6053674 8.99614338,19.8680107 L22.6090878,22.8048686 Z" id="Path-89"></path>
+                    </g>
+                </g>
+                <rect id="Rectangle-11" x="0" y="0" width="110" height="110"></rect>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/images/es6.svg b/src/images/es6.svg
new file mode 100644
index 0000000..eecc1ed
--- /dev/null
+++ b/src/images/es6.svg
@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="110px" height="110px" viewBox="0 0 110 110" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 46.2 (44496) - http://www.bohemiancoding.com/sketch -->
+    <title>ES6</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="assets" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="ES6">
+            <g id="Group-2">
+                <g id="Group-66" transform="translate(17.769231, 16.923077)">
+                    <polygon id="Path-57" fill="#818AFF" points="0 7.40299391 36.3025844 0.505807184 36.3025844 76.6596533 5.48841401 61.129011"></polygon>
+                    <polygon id="Path-57" fill="#646EF2" points="73.889192 7.39290079 36.2730683 0.494456144 36.2730683 76.6483023 68.4007779 61.0809708"></polygon>
+                    <polygon id="Path-124" fill="#E0FFC1" points="36.912651 21.1018438 36.912651 12.6383058 21.6890464 16.9200348 20.0223991 35.4713065 21.642976 54.9645523 36.8801589 59.1938813 36.8801589 52.4203796 27.5639575 50.7015299 27.5639575 39.7320698 36.8801589 38.0341765 36.912651 31.2817637 27.5639575 33.8478924 27.5639575 23.6815904"></polygon>
+                    <polygon id="Path-127" fill="#B8E986" points="36.912651 21.1018438 50.417166 23.6815904 50.417166 16.0756206 36.912651 12.6383058"></polygon>
+                    <polygon id="Path-126" fill="#B8E986" points="36.8801589 38.0341765 44.4980231 39.7320698 44.4980231 50.7015299 36.8801589 52.4203796 36.8801589 59.1938813 51.2673583 54.9645523 52.9545837 35.5068058 36.912651 31.2817637"></polygon>
+                </g>
+                <rect id="Rectangle-9" x="0" y="0" width="110" height="110"></rect>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/images/html-5.svg b/src/images/html-5.svg
new file mode 100644
index 0000000..80d4c8d
--- /dev/null
+++ b/src/images/html-5.svg
@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="110px" height="110px" viewBox="0 0 110 110" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 46.2 (44496) - http://www.bohemiancoding.com/sketch -->
+    <title>HTML_5</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="assets" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="HTML_5">
+            <g id="Group-2">
+                <g id="Group-66" transform="translate(17.000000, 16.000000)">
+                    <polygon id="Path-57" fill="#818AFF" points="0 7.15496037 38 0 38 79 5.74503814 62.8889196"></polygon>
+                    <polygon id="Path-57" fill="#646EF2" points="77 7.1562653 38 0 38 79 71.3096703 62.8508591"></polygon>
+                    <polygon id="Path-98" fill="#E0FFC1" points="39 22.9744409 39 16 20 16 22.2651642 39 39 39 39 31.0051597 28.0583508 31.0051597 28.0583508 22.9744409"></polygon>
+                    <polygon id="Path-99" fill="#E0FFC1" points="22 45 29.7151654 45 30.4442988 50.7188031 39 52.8607514 39 60 23.488233 56.3873811"></polygon>
+                    <polygon id="Path-100" fill="#B8E986" points="58 16 39 16 39 23 58 23"></polygon>
+                    <polygon id="Path-101" fill="#B8E986" points="39 31 57 31 54.7460304 56.2242058 39 60 39 52.5396773 48.7030058 50.2667423 48.9919488 39.0706804 39 39.0706804"></polygon>
+                </g>
+                <rect id="Rectangle-9" x="0" y="0" width="110" height="110"></rect>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/images/jenkins.svg b/src/images/jenkins.svg
new file mode 100644
index 0000000..2ae3d6f
--- /dev/null
+++ b/src/images/jenkins.svg
@@ -0,0 +1,34 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="110px" height="110px" viewBox="0 0 110 110" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 46.2 (44496) - http://www.bohemiancoding.com/sketch -->
+    <title>Jenkins</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="assets" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Jenkins">
+            <g id="Group">
+                <g id="Group-83" transform="translate(19.674797, 8.048780)">
+                    <ellipse id="Oval-20" fill="#B8E986" cx="37.1138211" cy="48.2926829" rx="37.1138211" ry="40.0139373"></ellipse>
+                    <path d="M55.4906827,82.6498816 L56.6214667,89.7844279 C53.817761,91.3581713 52.2055781,91.9421932 51.7849181,91.5364935 C51.3642581,91.1307939 51.3642581,92.2527655 51.7849181,94.9024084 C42.3367281,97.1463517 36.4839316,97.1463517 34.2265285,94.9024084 C31.9691254,92.6584652 31.0386991,89.3223218 31.4352496,84.8939784 C21.7064335,83.2509121 16.5515202,81.5341218 15.9705097,79.7436075 C15.0989938,77.0578361 15.9705097,64.742419 11.1389112,53.5485269 C9.72981516,51.4176328 19.0838101,48.2926829 26.2523868,45.4761675 C25.3927998,42.1758522 24.4333203,38.7532812 23.3739483,35.2084545 C19.1921786,36.786664 16.7243657,35.2694674 15.9705097,30.6568648 C15.2166536,26.0442622 15.5935816,23.4572054 17.1012937,22.8956946 C15.9448258,16.1439776 16.6056646,12.5281465 19.0838101,12.0482011 C20.3811532,9.98079978 24.1117742,0.701819375 41.3619575,0.023664589 C58.6121408,-0.654490197 62.5023767,13.449257 62.5023767,15.7979397 C62.5023767,18.1466224 63.7424907,37.7037314 55.4906827,43.8902496 C59.6663901,46.4054149 63.1437766,48.4884053 65.9228422,50.1392207 L60.0544271,66.7659453 C64.7219482,64.0679102 67.6721214,63.3934014 68.9049467,64.742419 C70.7541847,66.7659453 75.3783208,72.3005634 73.9622377,75.5073804 C72.5461546,78.7141974 71.8870512,80.5458119 68.9049467,80.5458119 C66.916877,80.5458119 65.1960584,79.9680877 63.7424907,78.8126392 L56.6214667,78.8126392 L55.4906827,82.6498816 Z" id="Path-134" stroke="#646EF2" fill="#646EF2"></path>
+                    <path d="M23.8684873,27.5958188 L26.4348551,27.5958188 C24.7239432,18.9791215 24.2962153,13.7871251 25.1516712,12.0198296 C26.4348551,9.36888628 17.3301994,12.7153816 16.3841834,14.6707729 C15.753506,15.9743671 15.4381674,18.8626933 15.4381674,23.3357514 C18.56012,21.7847157 20.3929013,21.3969568 20.9365112,22.1724747 C21.4801212,22.9479925 22.4574465,24.7557739 23.8684873,27.5958188 Z" id="Path-135" fill="#9098FE"></path>
+                    <path d="M25.7691121,10.2452787 C31.1820786,3.60848981 34.5892919,0.196384979 35.9907522,0.00896424489 C38.0929426,-0.272166857 19.9994525,6.13043967 19.6807281,9.18977453 C19.4682452,11.2293311 21.4977065,11.5811658 25.7691121,10.2452787 Z" id="Path-136" fill="#9098FE"></path>
+                    <path d="M40.4196472,8.27874564 C37.2993725,10.9408311 35.7392352,12.7805524 35.7392352,13.7979094 C37.3057801,12.204937 39.1385614,11.0857307 41.237579,10.4402905 L40.4196472,8.27874564 Z" id="Path-137" fill="#9098FE"></path>
+                    <path d="M52.3604567,11.7174191 C51.7889717,10.9669929 53.1585792,9.8207684 56.4692791,8.27874564 C59.1251304,10.7590029 60.4625422,12.5151801 60.4815146,13.5472771 C60.5099732,15.0954226 58.2747488,8.84894603 52.3604567,11.7174191 Z" id="Path-138" fill="#9098FE"></path>
+                    <path d="M38.4884071,23.5380678 C40.9282268,24.7645279 43.2468127,24.8362369 44.5060376,24.8362369 C46.4654473,24.8362369 47.1350043,24.0297358 46.5089595,22.7292682 C45.4038171,20.4335828 44.2359343,19.0526118 42.5073178,16.5574913 L41.8808113,17.2563262 C43.3949466,19.4895707 43.9868192,20.828372 45.4038171,22.7292682 C45.9613409,23.4771838 44.5366832,23.1128955 43.664688,23.1128955 C42.6064804,23.1128955 41.2530767,23.8903225 38.94337,22.7292682 L38.4884071,23.5380678 Z" id="Path-139" fill="#9098FE" fill-rule="nonzero"></path>
+                    <path d="M52.2342668,23.9989258 C55.7431595,25.6912032 58.4666267,24.7212952 57.5551,21.9629675 C56.7880967,19.6419751 55.9466749,18.4620615 55.1320133,16.5574913 L54.9398663,17.1446388 C55.6989999,18.7026848 56.133063,19.9143568 56.7880967,22.0085007 C57.3805271,23.9025019 55.578746,24.5418216 52.499954,23.0569742 L52.2342668,23.9989258 Z" id="Path-139" fill="#9098FE" fill-rule="nonzero"></path>
+                    <path d="M48.266361,20.0435495 C51.1056436,25.3486966 53.5583358,28.70951 55.7110566,30.1694737 C55.9620251,30.3396792 55.9632067,30.4180852 55.6498714,30.7794709 C55.2098406,31.286981 54.3002731,31.8927247 53.1034391,32.4779213 C50.8464508,33.5814845 47.9908223,34.3774832 47.3089052,34.2014861 C45.9915984,33.8615001 45.4742857,32.5487365 46.10947,32.2002116 L45.1566635,30.7757254 C42.9120625,32.0073354 44.1364884,35.1145112 46.8049665,35.8032232 C48.1086718,36.1396988 51.3109118,35.2470831 53.9769891,33.9434942 C55.3763127,33.2592895 56.4685644,32.5318838 57.0961027,31.8081116 C57.995082,30.7712727 57.9778239,29.6261166 56.8132383,28.8363009 C54.9652396,27.5829982 52.6389785,24.3954276 49.921074,19.3170732 L48.266361,20.0435495 Z" id="Path-140" fill="#9098FE" fill-rule="nonzero"></path>
+                    <path d="M49.4850949,38.6341463 L49.4850949,36.7458504 C45.8038688,36.7458504 43.0546969,36.4554218 41.237579,35.8745645 C41.5422532,37.1860024 44.2914251,38.1058631 49.4850949,38.6341463 Z" id="Path-141" fill="#9098FE"></path>
+                    <path d="M52.2342668,37.3394708 L52.2342668,38.6341463 C54.8706148,38.0203943 56.7033961,37.1005337 57.7326107,35.8745645 C56.4339225,36.434778 54.6011412,36.9230801 52.2342668,37.3394708 Z" id="Path-142" fill="#9098FE"></path>
+                    <path d="M49.2540442,41.9758207 C45.8902645,42.5569482 43.6157261,42.8167796 42.6740474,42.3097552 C42.0530035,41.975369 40.8987976,41.567022 39.9379876,40.5921024 C39.7009818,40.3516162 39.2177883,39.6989642 38.4884071,38.6341463 C38.4884071,39.7217278 40.4622736,42.7413896 42.0827021,43.6138705 C43.3946543,44.3202598 45.8251901,44.3202598 49.4850949,43.6879737 L49.2540442,41.9758207 Z" id="Path-143" fill="#9098FE" fill-rule="nonzero"></path>
+                    <path d="M33.2246296,93.7930162 C31.6077447,89.5582079 28.7682726,69.280553 29.5184966,68.7119731 C30.0186459,68.3329198 36.5552097,68.1433932 49.1281879,68.1433932 L50.0352047,80.9682047 L54.3817407,80.9682047 L56.8864568,89.5582079 C54.9696587,90.6318392 53.3485839,91.0581152 52.0232322,90.8370361 C50.0352047,90.5054175 54.0112597,92.4690827 52.0232322,93.7930162 C50.0352047,95.1169497 42.0553088,97.41541 33.2246296,93.7930162 Z" id="Path-144" fill="#9098FE"></path>
+                    <polygon id="Path-145" fill="#9098FE" points="50.703737 56.1647467 57.7326107 56.930398 56.720735 49.6724739 49.910242 52.6100978 45.8837635 53.3014359 40.056801 51.834442 35.7392352 50.8901973 37.4252425 60.7108014 45.8837635 56.1647467"></polygon>
+                    <path d="M32.9900632,41.8823459 C37.7206743,48.5022794 40.549828,51.7213794 41.7225238,52.286372 C42.5587028,52.6892343 49.6279339,52.1873571 52.2806479,51.623298 C55.7461902,50.8864035 58.668292,48.2010983 60.4817826,45.695889 L59.5198493,46.3601421 C57.8569258,48.6573537 55.3064954,50.0675692 52.0634176,50.75716 C49.5263556,51.2966274 45.3223637,51.7785405 42.5314452,51.3350499 C41.2477415,51.131063 38.2942677,47.6877353 33.796564,41.3937282 L32.9900632,41.8823459 Z" id="Path-146" fill="#9098FE" fill-rule="nonzero"></path>
+                    <polygon id="Path-147" fill="#9098FE" points="39.334561 61.7012114 46.1767101 56.8839453 50.3312487 67.9222728"></polygon>
+                    <polygon id="Path-148" fill="#9098FE" points="51.6221763 56.8839453 55.1557976 57.8909201 56.6757464 59.7383729 51.1774025 70.6818547"></polygon>
+                    <path d="M54.3728589,79.4594781 L53.0804206,69.7706874 L56.8128016,69.0831808 C63.7253076,65.3765759 67.6648954,63.8316996 68.6315647,64.4485519 C70.0815688,65.3738303 76.7365623,72.1692727 74.6842182,75.8143754 C72.631874,79.4594781 71.1632546,80.8740284 68.6315647,80.8740284 C66.9437715,80.8740284 64.9067186,80.4025117 62.5204059,79.4594781 L58.4469648,78.7104694 L54.3728589,79.4594781 Z" id="Path-149" fill="#9098FE"></path>
+                </g>
+                <rect id="Rectangle-9" x="0" y="0" width="110" height="110"></rect>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/images/mongodb.svg b/src/images/mongodb.svg
new file mode 100644
index 0000000..3920f28
--- /dev/null
+++ b/src/images/mongodb.svg
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="110px" height="110px" viewBox="0 0 110 110" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 46.2 (44496) - http://www.bohemiancoding.com/sketch -->
+    <title>Mongo_DB</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="assets" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Mongo_DB">
+            <g id="Group-2">
+                <g id="Group" transform="translate(35.506329, 11.139241)">
+                    <path d="M20.520866,0 L19.7159083,76.9365832 C5.33691142,63.9508133 -1.17703247,51.0077418 0.174076618,38.1073687 C1.5251857,25.2069955 8.30744882,12.5045393 20.520866,0 Z" id="Path-106" fill="#E0FFC1"></path>
+                    <path d="M18.4538622,0 L19.2588199,76.9365832 C33.6378168,63.9508133 40.1517606,51.0077418 38.8006516,38.1073687 C37.4495425,25.2069955 30.6672794,12.5045393 18.4538622,0 Z" id="Path-106" fill="#B8E986"></path>
+                    <polygon id="Path-107" fill="#646EF2" points="18.4538622 77.0095687 21.4918189 77.0095687 21.4918189 89.5882036 18.4538622 89.5882036"></polygon>
+                </g>
+                <rect id="Rectangle-9" x="0" y="0" width="110" height="110"></rect>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/images/mysql.svg b/src/images/mysql.svg
new file mode 100644
index 0000000..2927ad3
--- /dev/null
+++ b/src/images/mysql.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="110px" height="110px" viewBox="0 0 110 110" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 46.2 (44496) - http://www.bohemiancoding.com/sketch -->
+    <title>My_SQL</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="assets" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="My_SQL">
+            <g id="Group">
+                <g id="Group-77" transform="translate(10.717949, 14.102564)">
+                    <path d="M63.9983956,61.7804112 L64.9851611,61.6657017 C64.6554864,61.7011851 64.3265649,61.7394216 63.9983956,61.7804112 Z M64.9851611,61.6657017 L62.2906976,61.6657017 C73.5749006,69.7465733 75.5551295,73.2428877 77.0120545,75.885059 C70.2649049,69.0960303 64.2278784,64.5393208 58.900975,62.2149305 L55.6157109,60.2017107 L59.419364,59.4532959 C63.6601525,58.6188695 70.3426564,58.9092263 74.8181988,58.9797412 C72.1282429,55.6790928 64.7736593,51.1912624 53.0307789,46.7101837 L52.1639112,46.2950063 L52.1639112,45.3533918 C52.1639112,42.4924763 48.9850161,35.4971052 42.6755578,24.7734407 C36.4838219,14.2498592 26.9058555,8.79832274 13.7567534,8.3382521 L13.3363166,8.32354154 L6.57951862,3.23425277 C4.32103841,1.47642897 3.15221663,2.1166381 2.62067858,3.23425277 C2.3297473,3.84596639 2.31546565,4.31809002 2.53506323,4.90046607 C2.71368813,5.37418197 3.03898888,5.91142356 3.63565835,6.73724229 C3.81360623,6.98353056 4.50071758,7.91187548 4.5305563,7.95251435 C4.92609664,8.49122093 5.23859529,8.93218178 5.54461952,9.39060943 C6.14010009,10.2826459 6.64963957,11.154828 7.10032195,12.0827765 C7.92597803,13.7827905 8.61151013,15.3787867 9.29422236,17.1376547 C9.61528277,17.964801 10.5810943,20.571501 10.7688163,21.0560719 C11.8096745,23.7428622 12.6713286,25.2441045 14.1902761,26.7848261 C14.4018674,26.9994505 14.6259094,27.2132122 14.8637095,27.4270886 L15.626229,28.1128951 L15.2669282,29.0617265 C14.4376422,31.2516817 11.7652849,37.1542583 12.0491735,42.0457167 C12.332863,46.9337455 15.8499027,52.2525035 17.7440225,54.5239157 C18.466724,49.6896448 18.9088957,43.7875862 19.8552018,40.1277214 L21.9679591,31.9565747 L22.3622352,42.0457167 C23.0216703,47.9718964 26.4445808,52.9272005 32.6596888,58.9797412 L37.9599441,65.701516 C33.4362393,61.2961368 23.2841758,51.590103 21.4729513,47.1028331 C20.9508949,49.8162618 20.4730233,52.7779564 20.0397051,55.9873495 L19.7409156,58.200349 L17.7440225,57.1085575 C13.4850444,54.7799822 11.1915445,49.3294119 10.7688163,42.0457167 C10.4955355,37.3370323 12.0650178,31.5785766 12.88699,28.6097682 C10.93572,26.6312602 9.92121241,25.3917367 8.74501633,22.3555959 C8.54659203,21.8433988 7.6943731,18.9574377 7.38426911,18.1585184 C6.72932033,16.4711773 6.63548966,14.9978198 5.84811357,13.3766238 C5.46105767,12.5796813 5.01952588,11.8239083 4.49606374,11.0397563 C4.21874244,10.6243259 3.93059181,10.2177221 3.55950591,9.71232131 C3.53880819,9.68413203 2.84097325,8.74129864 2.65096754,8.47832176 C1.90996256,7.45273587 1.13430527,6.11596864 0.839202045,5.33335047 C0.339714666,4.00870248 0.230576302,3.26232623 0.839202045,1.89679074 C1.79992173,-0.258715902 3.92877819,-0.778996059 7.38426911,1.89679074 L14.291284,5.33335047 C28.2811812,5.9340911 38.6990588,11.9387431 45.3654819,23.269111 C51.433423,33.5822887 53.9362939,41.4874586 54.4353894,45.3533918 C67.3801171,51.6077708 73.1406866,54.7230096 75.5551295,57.1085575 L79.2095692,61.454802 L75.5551295,61.454802 C71.9490612,61.2249361 68.4260849,61.2953506 64.9851611,61.6657017 Z" id="Path-108" fill="#646EF2" fill-rule="nonzero"></path>
+                    <path d="M15.6766374,13.02782 C16.8811436,13.6510977 17.5347649,14.4008026 17.6375011,15.2769349 C17.7916055,16.5911334 18.8341976,14.8018221 18.2133082,14.0896606 C17.7993819,13.6148862 16.953825,13.2609394 15.6766374,13.02782 Z" id="Path-109" stroke="#646EF2"></path>
+                </g>
+                <rect id="Rectangle-9" x="0" y="0" width="110" height="110"></rect>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/images/nodejs.svg b/src/images/nodejs.svg
new file mode 100644
index 0000000..2adb6fc
--- /dev/null
+++ b/src/images/nodejs.svg
@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="110px" height="110px" viewBox="0 0 110 110" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 46.2 (44496) - http://www.bohemiancoding.com/sketch -->
+    <title>Node_js</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="assets" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Node_js">
+            <g id="Group-2">
+                <g id="Group-72" transform="translate(15.197368, 10.855263)">
+                    <polygon id="Path-91" fill="#B8E986" points="0 22.5391441 38.7424154 -1.13686838e-13 76.3181176 22.5391441 76.3181176 65.9656666 38.7424154 88.9311025 0 65.9656666"></polygon>
+                    <g id="Group" transform="translate(3.783508, 31.595678)">
+                        <polygon id="Path-92" fill="#646EF2" points="4.17701805 19.0622164 0.558596995 21.2332691 0.558596995 11.8253743 6.34807068 9.65432169 7.07175489 9.65432169 12.8612286 11.8253743 12.8612286 21.2332691 9.24280752 19.0622164 9.24280752 13.2727427 4.17701805 13.2727427"></polygon>
+                        <path d="M46.8743865,11.0112296 L46.8743865,0.246426951 L49.7691233,0.970111162 L49.7691233,19.0622164 L49.0454391,19.0622164 L43.2559654,21.2332691 L37.4664917,19.0622164 L37.4664917,11.8253743 L43.2559654,9.65432169 L46.8743865,11.0112296 Z M43.2559654,17.614848 L46.1507023,16.1674796 L46.1507023,14.7201112 L43.2559654,13.2727427 L40.3612286,14.7201112 L40.3612286,16.1674796 L43.2559654,17.614848 Z" id="Combined-Shape" fill="#646EF2"></path>
+                        <path d="M20.0980707,19.0622164 L20.0980707,11.8253743 L25.8875444,9.65432169 L31.677018,11.8253743 L31.677018,19.0622164 L25.8875444,21.2332691 L20.0980707,19.0622164 Z M25.8875444,17.6225471 L28.7822812,16.1674796 L28.7822812,14.7201112 L25.8875444,13.2727427 L22.9928075,14.7201112 L22.9928075,16.1674796 L25.8875444,17.6225471 Z" id="Combined-Shape" fill="#FAFAFA"></path>
+                        <path d="M63.5544478,14.0147571 L62.80163,13.2698844 L61.3526587,13.2698844 L59.1554637,14.7201112 L59.1554637,16.1674796 L61.3526587,17.614848 L67.8574855,17.614848 L67.8574855,15.4448205 L64.9888365,15.4340076 L61.3526587,15.4340076 L61.3526587,14.0276993 L63.5544478,14.0147571 Z M55.55538,19.0622164 L55.5668789,11.8311827 L61.3526587,9.65637188 L62.80163,9.65637188 L67.8574855,13.2698844 L67.8574855,17.614848 L62.8021259,21.2332691 L61.3526587,21.2332691 L55.55538,19.0622164 Z" id="Combined-Shape" fill="#646EF2"></path>
+                    </g>
+                </g>
+                <rect id="Rectangle-11" x="0" y="0" width="110" height="110"></rect>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/images/postgresql.svg b/src/images/postgresql.svg
new file mode 100644
index 0000000..de92cb7
--- /dev/null
+++ b/src/images/postgresql.svg
@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="110px" height="110px" viewBox="0 0 110 110" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 46.2 (44496) - http://www.bohemiancoding.com/sketch -->
+    <title>Postrgresql</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="assets" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Postrgresql">
+            <g id="Group">
+                <g id="Group-75" transform="translate(8.333333, 8.333333)">
+                    <path d="M41.1272542,68.3950071 C41.6283342,82.6871057 44.1581343,90.6365613 48.7166546,92.2433739 C55.554435,94.6535928 67.6034645,90.5970692 68.8046496,85.9581397 C69.6054396,82.86552 70.497865,76.2792084 71.4819257,66.199205 C84.8958239,63.7107359 91.2285584,60.6656279 90.480129,57.0638809 C89.7316996,53.4621339 84.9185925,52.79178 76.0408076,55.0528193 C87.1996345,35.2533542 91.554584,22.1355869 89.1056563,15.6995174 C85.4322646,6.04541325 78.4473573,0.417139473 65.1265917,0 C53.7572563,5.81418093 55.9184771,1.87183547 46.9592468,1.13957533 C39.4342436,2.32487058 37.5651232,3.38429001 36.141099,4.56562818 C34.7170748,5.74696636 17.2733645,-4.44771756 7.51209804,4.56562818 C-2.24916837,13.5789739 -4.78807343,35.1157194 14.0175485,65.2495635 C17.4691965,68.4678721 21.588025,68.7844193 26.3740342,66.199205 L33.0177811,57.8435072 L37.8755688,57.8435072 C31.1752633,60.6175333 27.9042202,63.0862187 28.0624395,65.2495635 C28.4555462,68.7356159 32.8104844,69.7840971 41.1272542,68.3950071 Z" id="Path-102" fill="#B8E986"></path>
+                    <g id="Group-74" transform="translate(2.743620, 0.808357)">
+                        <path d="M42.6020785,62.7023746 C41.7628979,78.0421961 43.5535645,86.4619551 47.9740782,87.9616516 C54.6048488,90.2111962 63.3484858,86.3453982 64.5133057,82.0157171 C65.2898523,79.129263 66.3004228,72.6914822 67.5450172,62.7023746 C81.2004497,60.9706861 87.6652804,58.4240213 86.9395093,55.0623802 C85.8508526,50.0199186 69.5100061,61.1722009 71.7664583,52.3914769 C76.906502,46.8523536 88.2571863,25.7169936 84.6950044,16.7064682 C81.1328225,7.69594273 75.2710227,2.19192266 62.3535355,1.80259126 C57.5191213,5.12738042 55.1136716,2.17314231 46.4256768,1.48969737 C39.1284886,2.5959764 35.6264744,4.96127183 34.2455617,6.06385758 C32.864649,7.16644333 15.1137239,-2.62205794 6.48328694,6.06385758 C-2.14715003,14.7497731 -4.38227403,34.5773653 13.8540187,62.7023746 C17.20117,65.7061387 20.6063695,65.1960808 24.0696172,61.1722009 L30.7148692,53.5173451 C34.511233,55.5774826 36.2152714,56.7329635 35.8269844,56.9837878 C35.6159239,62.7023746 25.2260337,61.6601575 26.1848717,63.5887094 C27.6331843,66.1484286 33.1055865,65.8529837 42.6020785,62.7023746 Z" id="Path-102" fill="#646EF2"></path>
+                        <ellipse id="Oval-15" stroke="#B8E986" stroke-width="2" fill="#B8E986" cx="37.3945231" cy="29.9262348" rx="1.62584883" ry="1.0816786"></ellipse>
+                        <path d="M69.8247252,19.906187 C68.457027,16.1012734 66.5037529,13.2086637 63.9890477,10.8630379 C62.1669361,9.16343823 56.853347,5.70731359 56.4807938,5.36972731 C53.4838813,2.65409717 42.6038319,2.25566342 35.8765283,6.42467849 C30.6530644,9.66174059 27.6812954,16.5802872 27.0964232,27.3436105 C26.4747748,37.2480496 26.3183127,43.3570128 26.6128001,45.4712188 C26.8649177,47.2812414 28.9759102,51.4588815 32.1578144,54.2036331 L29.4943067,55.5125481 C25.8018885,52.3274206 23.9386144,48.5991492 23.5612868,45.8902097 C23.2263288,43.4854537 23.3845893,37.306272 24.0210859,27.1661186 C24.6539274,15.518953 28.0167112,7.69008863 34.2453849,3.83008235 C42.0914633,-1.03225491 54.4863894,-0.578345498 58.5574488,3.11061486 C58.6813518,3.22288863 64.0199345,6.69526993 66.0983289,8.63392082 C68.9612838,11.3043813 71.1900102,14.6049093 72.7260488,18.878143 C72.9474233,19.4940031 73.4686167,22.4511721 73.5493231,23.3393886 C73.7462413,25.5065767 73.8124569,28.2306757 73.7740264,31.458039 C73.7474627,33.6888392 73.6744979,36.0090561 73.5584862,38.7140705 C73.5337903,39.2898986 73.5085624,39.8523161 73.4758437,40.5635504 C73.4372324,41.3986088 73.4188872,41.7960753 73.4040029,42.1267995 C73.3563192,43.1863146 73.3353826,43.7688643 73.3353826,44.086375 C73.3353826,45.8159949 72.7995443,48.4977609 71.7356833,52.2170991 L70.9574914,54.9377167 L69.0906185,52.8015654 C60.6666983,43.1625759 56.7645256,36.1987629 57.5049386,31.5251401 C58.5110673,25.1742712 61.1727342,21.6496991 65.0856425,21.5668349 C66.5459602,21.5359096 68.2365235,21.52917 70.1581284,21.5465334 C70.0207024,20.7746099 69.8801816,20.0604658 69.8247252,19.906187 Z M65.1513345,24.6246789 C63.0636072,24.668891 61.3500935,26.9379211 60.5480797,32.0003797 C60.049019,35.1505421 63.0087204,40.7744594 69.519861,48.5768663 C70.0107497,46.5589127 70.2548269,45.0521194 70.2548269,44.086375 C70.2548269,43.7046441 70.2764912,43.101845 70.3265179,41.9902693 C70.3414939,41.6575086 70.3599362,41.2579387 70.3984962,40.4240005 C70.4310825,39.7156438 70.4561799,39.1561346 70.4807195,38.5839523 C70.595502,35.9075981 70.6675544,33.6163966 70.693686,31.4218816 C70.7251932,28.7759318 70.6844746,26.488479 70.5590722,24.6091864 C68.4881928,24.586996 66.6852847,24.5921943 65.1513345,24.6246789 Z" id="Path-103" fill="#B8E986" fill-rule="nonzero"></path>
+                        <path d="M35.414288,58.4463114 L38.889557,56.7447608 C39.5897562,56.4019314 40.1489695,56.19799 40.5427916,56.1269094 C40.7319754,56.0927637 40.7555173,56.0955492 40.6601928,56.0300642 C40.9905848,56.2570332 41.5370564,56.9483377 41.8716528,57.7475764 C42.3362208,58.8572737 41.0252732,62.1726097 40.5427916,63.4658413 L42.4130016,66.0236892 C43.7935572,62.3232824 44.6411826,55.045585 42.4130016,53.5148936 C41.9172451,53.1743242 41.3596018,53.0216621 40.7284266,53.0315835 L43.8547762,44.6825264 L43.9322675,44.3894272 C44.6241082,40.0633456 45.0878817,36.346353 45.3231544,33.2346848 C45.6585494,28.7988179 43.4034575,25.8083552 39.1305909,22.6367572 C36.8634351,20.9539275 32.7810926,22.2043749 26.3216369,25.9437965 L26.3216369,29.4398177 C31.6199277,26.3726021 36.4964949,24.5003495 37.2860372,25.0863989 C40.7849485,27.6835171 42.483361,29.935771 42.2512423,33.0057262 C42.0256307,35.9896189 41.5799498,39.5754775 40.9137809,43.759669 L35.414288,58.4463114 Z" id="Combined-Shape" fill="#B8E986" fill-rule="nonzero"></path>
+                        <path d="M71.4582777,50.4843929 C67.3008289,53.8093358 65.4917605,60.4560666 67.1012461,64.1187171 L69.8147056,62.9822622 C68.8445105,60.774423 69.1877645,56.4947794 72.3706705,53.9492326 L71.4582777,50.4843929 Z" id="Path-105" fill="#B8E986"></path>
+                        <ellipse id="Oval-15" stroke="#B8E986" stroke-width="2" fill="#B8E986" cx="66.6598021" cy="28.8445562" rx="1.62584883" ry="1.0816786"></ellipse>
+                    </g>
+                </g>
+                <rect id="Rectangle-9" x="0" y="0" width="110" height="110"></rect>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/images/python.svg b/src/images/python.svg
new file mode 100644
index 0000000..784d0d4
--- /dev/null
+++ b/src/images/python.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="110px" height="110px" viewBox="0 0 110 110" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 46.2 (44496) - http://www.bohemiancoding.com/sketch -->
+    <title>Python</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="assets" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Python">
+            <g id="Group">
+                <g id="Group-73" transform="translate(13.508772, 13.508772)">
+                    <path d="M19.4525379,63.4767025 L9.21436004,63.4767025 C3.07145335,59.2007937 1.0759596e-12,52.1478268 4.54747351e-13,42.3178017 C-1.65968806e-13,32.518885 3.07145335,25.8017736 9.21436004,22.1664675 L43.0003469,22.1664675 L43.0003469,19.1437674 L22.5239912,19.1437674 L22.5239912,6.04540024 C26.6391701,2.01513341 33.464622,1.52810078e-13 43.0003469,0 C52.6154076,-1.52800917e-13 59.4408595,2.68684455 63.4767025,8.06053365 L63.4767025,35.2648347 L56.309978,41.310235 L29.6907157,41.310235 L19.4525379,50.3783353 L19.4525379,63.4767025 Z M31.7383513,14.1059339 C33.2054787,14.1059339 34.8098046,12.5270735 34.8098046,11.0832338 C34.8098046,8.63182738 33.2054787,7.05296695 31.7383513,7.05296695 C29.247406,7.05296695 27.6430801,8.63182738 27.6430801,11.0832338 C27.6430801,12.5270735 29.247406,14.1059339 31.7383513,14.1059339 Z" id="Combined-Shape" fill="#646EF2"></path>
+                    <path d="M41.5320552,85.5555556 L31.3327719,85.5555556 C25.1634927,81.2796468 22.078853,74.2344569 22.078853,64.419986 C22.078853,54.6055152 25.1069626,47.8755708 31.1631816,44.2301529 L65.1387018,44.2301529 L65.1387018,41.1938825 L44.6226407,41.1938825 L44.6226407,28.1153818 C48.724622,24.0910293 55.563309,22.078853 65.1387018,22.078853 C74.7140946,22.078853 81.5197125,24.775111 85.5555556,30.167627 L85.5555556,57.3397526 L78.4268822,63.3569159 L51.7244749,63.3569159 L41.5320552,72.4821967 L41.5320552,85.5555556 Z M53.3001826,36.1812939 C55.2792189,36.1812939 56.8835448,34.6024335 56.8835448,32.6548104 C56.8835448,30.7071874 55.2792189,29.1283269 53.3001826,29.1283269 C51.3211463,29.1283269 49.7168204,30.7071874 49.7168204,32.6548104 C49.7168204,34.6024335 51.3211463,36.1812939 53.3001826,36.1812939 Z" id="Combined-Shape" fill="#B8E986" transform="translate(53.817204, 53.817204) scale(-1, -1) translate(-53.817204, -53.817204) "></path>
+                </g>
+                <rect id="Rectangle-11" x="0" y="0" width="110" height="110"></rect>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/images/rails.svg b/src/images/rails.svg
new file mode 100644
index 0000000..4270206
--- /dev/null
+++ b/src/images/rails.svg
@@ -0,0 +1,29 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="110px" height="110px" viewBox="0 0 110 110" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 46.2 (44496) - http://www.bohemiancoding.com/sketch -->
+    <title>Rails</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="assets" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Rails">
+            <g id="Group-2">
+                <g id="Group" transform="translate(2.894737, 7.960526)">
+                    <g id="Group-65" transform="translate(0.000000, 48.683885)" fill-rule="nonzero" fill="#B8E986">
+                        <polygon id="Path-59" points="19.308474 28.3586693 86.0183853 28.3586693 86.0183853 23.7158035 19.308474 23.7158035"></polygon>
+                        <polygon id="Path-60" points="28.4886079 14.4300719 73.8356645 14.4300719 73.8356645 9.78720615 28.4886079 9.78720615"></polygon>
+                        <polygon id="Path-60" transform="translate(21.208403, 21.295448) scale(-1, 1) rotate(-315.000000) translate(-21.208403, -21.295448) " points="-4.18822746 22.6109193 41.5999339 25.8313312 46.6050328 20.6676974 1.48347814 16.7595642"></polygon>
+                        <polygon id="Path-60" transform="translate(82.665893, 21.295448) rotate(-315.000000) translate(-82.665893, -21.295448) " points="57.2692624 22.6109193 103.057424 25.8313312 108.062523 20.6676974 62.940968 16.7595642"></polygon>
+                    </g>
+                    <g id="Group-25" transform="translate(20.826539, 0.000000)">
+                        <polygon id="Path-52" fill="#646EF2" points="2.83920471 52.3773296 56.5780486 52.3773296 18.7176817 34.159128"></polygon>
+                        <polygon id="Path-53" fill="#818AFF" points="33.0285915 13.6636512 56.1494861 52.1697435 18.4809406 34.8318023"></polygon>
+                        <polygon id="Path-54" fill="#646EF2" points="41.4486019 0 56.0244887 51.9631679 31.8881428 15.3484918"></polygon>
+                        <polygon id="Path-55" fill="#646EF2" points="2.90689747 51.999501 0.0544145068 24.9137693 16.6660648 0 40.2806193 0 31.2310061 15.8458163 17.8907008 34.2830948"></polygon>
+                        <polygon id="Path-56" fill="#818AFF" points="16.4196127 34.9628515 30.569283 14.7013391 8.9589405 11.9295931"></polygon>
+                    </g>
+                </g>
+                <rect id="Rectangle-9" x="0" y="0" width="110" height="110"></rect>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/images/react.svg b/src/images/react.svg
new file mode 100644
index 0000000..a6ef2cd
--- /dev/null
+++ b/src/images/react.svg
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="110px" height="110px" viewBox="0 0 110 110" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 46.2 (44496) - http://www.bohemiancoding.com/sketch -->
+    <title>React</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="assets" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="React">
+            <g id="Group">
+                <g id="Group-76" transform="translate(13.750000, 10.421053)" fill="#646EF2">
+                    <path d="M42.625,88.5789474 C32.3818726,88.5789474 24.75,69.4253728 24.75,45.9539474 C24.75,22.482522 32.3818726,3.32894737 42.625,3.32894737 C52.8681274,3.32894737 60.5,22.482522 60.5,45.9539474 C60.5,69.4253728 52.8681274,88.5789474 42.625,88.5789474 Z M42.625,85.5733237 C50.4807041,85.5733237 57.5208333,67.9048368 57.5208333,45.9539474 C57.5208333,24.003058 50.4807041,6.33457104 42.625,6.33457104 C34.7692959,6.33457104 27.7291667,24.003058 27.7291667,45.9539474 C27.7291667,67.9048368 34.7692959,85.5733237 42.625,85.5733237 Z" id="Oval-16" fill-rule="nonzero" transform="translate(42.625000, 45.953947) rotate(-330.000000) translate(-42.625000, -45.953947) "></path>
+                    <path d="M42.625,88.5789474 C32.3818726,88.5789474 24.75,69.4253728 24.75,45.9539474 C24.75,22.482522 32.3818726,3.32894737 42.625,3.32894737 C52.8681274,3.32894737 60.5,22.482522 60.5,45.9539474 C60.5,69.4253728 52.8681274,88.5789474 42.625,88.5789474 Z M42.625,85.5733237 C50.4807041,85.5733237 57.5208333,67.9048368 57.5208333,45.9539474 C57.5208333,24.003058 50.4807041,6.33457104 42.625,6.33457104 C34.7692959,6.33457104 27.7291667,24.003058 27.7291667,45.9539474 C27.7291667,67.9048368 34.7692959,85.5733237 42.625,85.5733237 Z" id="Oval-16" fill-rule="nonzero" transform="translate(42.625000, 45.953947) rotate(-270.000000) translate(-42.625000, -45.953947) "></path>
+                    <path d="M42.625,88.5789474 C32.3818726,88.5789474 24.75,69.4253728 24.75,45.9539474 C24.75,22.482522 32.3818726,3.32894737 42.625,3.32894737 C52.8681274,3.32894737 60.5,22.482522 60.5,45.9539474 C60.5,69.4253728 52.8681274,88.5789474 42.625,88.5789474 Z M42.625,85.5733237 C50.4807041,85.5733237 57.5208333,67.9048368 57.5208333,45.9539474 C57.5208333,24.003058 50.4807041,6.33457104 42.625,6.33457104 C34.7692959,6.33457104 27.7291667,24.003058 27.7291667,45.9539474 C27.7291667,67.9048368 34.7692959,85.5733237 42.625,85.5733237 Z" id="Oval-16" fill-rule="nonzero" transform="translate(42.625000, 45.953947) rotate(-30.000000) translate(-42.625000, -45.953947) "></path>
+                    <circle id="Oval-17" cx="42.625" cy="45.9539474" r="6.875"></circle>
+                </g>
+                <rect id="Rectangle-11" x="0" y="0" width="110" height="110"></rect>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/images/redis.svg b/src/images/redis.svg
new file mode 100644
index 0000000..e65010a
--- /dev/null
+++ b/src/images/redis.svg
@@ -0,0 +1,31 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="110px" height="110px" viewBox="0 0 110 110" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 46.2 (44496) - http://www.bohemiancoding.com/sketch -->
+    <title>Redis</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="assets" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Redis">
+            <g id="Group">
+                <g id="Group-82" transform="translate(17.769231, 16.076923)">
+                    <g id="Group-81" transform="translate(0.000000, 19.250000)">
+                        <polygon id="Path-128" fill="#818AFF" points="-2.27373675e-13 31.3858696 37.296875 47.7065217 74.59375 31.3858696 38.5401042 16.3206522"></polygon>
+                        <polygon id="Path-129" fill="#646EF2" points="2.27373675e-13 41.4293478 2.27373675e-13 31.3858696 37.296875 47.7065217 74.59375 31.3858696 74.59375 40.173913 36.0536458 57.75"></polygon>
+                        <polygon id="Path-128" fill="#818AFF" points="-2.27373675e-13 15.0652174 37.296875 31.3858696 74.59375 15.0652174 38.5401042 0"></polygon>
+                        <polygon id="Path-129" fill="#646EF2" points="2.27373675e-13 25.1086957 2.27373675e-13 15.0652174 37.296875 31.3858696 74.59375 15.0652174 74.59375 23.8532609 36.0536458 41.4293478"></polygon>
+                    </g>
+                    <g id="Group-80">
+                        <polygon id="Path-128" fill="#818AFF" points="-2.27373675e-13 14.875 37.296875 30.9895833 74.59375 14.875 38.5401042 0"></polygon>
+                        <polygon id="Path-129" fill="#646EF2" points="2.27373675e-13 24.7916667 2.27373675e-13 14.875 37.296875 30.9895833 74.59375 14.875 74.59375 23.5520833 36.0536458 40.90625"></polygon>
+                        <path d="M23.5972995,18.8476241 C27.0303821,18.8476241 32.2758491,19.2395095 32.2758491,15.8164946 C32.2758491,12.3934798 27.8193028,12.5004629 24.3862202,12.5004629 C20.9531377,12.5004629 14.91875,11.6087489 14.91875,15.0317638 C14.91875,18.4547786 20.164217,18.8476241 23.5972995,18.8476241 Z" id="Oval-19" fill="#FFFFFF"></path>
+                        <polygon id="Path-130" fill="#FFFFFF" points="31.0807292 22.1515426 40.6176969 26.7042184 45.2082041 19.8333333"></polygon>
+                        <polygon id="Path-131" fill="#FFFFFF" points="40.0462165 12.3581409 37.8402844 8.79708437 31.0807292 7.92864208 36.072517 6.16251402 34.8020174 2.47916667 39.0734556 5.00030782 44.0799081 3.65289302 42.9262821 6.9206287 46.4413753 7.92864208 41.7264399 8.79708437"></polygon>
+                        <polygon id="Path-132" fill="#545EE1" points="44.0401093 15.733993 56.3981113 9.91666667 56.9820345 17.0011176 52.1595164 19.0832798"></polygon>
+                        <polygon id="Path-133" fill="#202CCA" points="56.8331957 16.9918129 64.1345507 13.8360899 55.5904737 10.4888643"></polygon>
+                    </g>
+                </g>
+                <rect id="Rectangle-9" x="0" y="0" width="110" height="110"></rect>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/images/ruby.svg b/src/images/ruby.svg
new file mode 100644
index 0000000..b9f59d3
--- /dev/null
+++ b/src/images/ruby.svg
@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="110px" height="110px" viewBox="0 0 110 110" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 46.2 (44496) - http://www.bohemiancoding.com/sketch -->
+    <title>Ruby</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="assets" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Ruby">
+            <g id="Group-2">
+                <g id="Group" transform="translate(23.000000, 25.000000)">
+                    <g id="Group-25">
+                        <polygon id="Path-52" fill="#646EF2" points="3.28750018 60.2833417 65.5114247 60.2833417 21.6731051 39.3152228"></polygon>
+                        <polygon id="Path-53" fill="#818AFF" points="38.2436323 15.7260891 65.0151945 60.0444218 21.3989839 40.0894328"></polygon>
+                        <polygon id="Path-54" fill="#646EF2" points="47.993118 0 64.8704606 59.8066649 36.9231128 17.6652453"></polygon>
+                        <polygon id="Path-55" fill="#646EF2" points="3.36588128 59.8484823 0.0630062711 28.6743382 19.2975488 0 46.6407171 0 36.1622175 18.2376376 20.7155483 39.4579015"></polygon>
+                        <polygon id="Path-56" fill="#818AFF" points="19.0121831 40.240263 35.3960118 16.9204091 10.37351 13.7302864"></polygon>
+                    </g>
+                </g>
+                <rect id="Rectangle-9" x="0" y="0" width="110" height="110"></rect>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/pages/index.js b/src/pages/index.js
index 4be30d4..f0c5527 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -6,6 +6,7 @@ import Card from '../components/Card'
 import Service from '../components/Service'
 import PageIntro from '../components/PageIntro'
 import InfoBox from '../components/InfoBox'
+import Technologies from '../components/Technologies'
 
 import ImgIntro from '../images/software-consulting.svg'
 import ImgDesign from '../images/ux-ui-design-agency.svg'
@@ -72,7 +73,7 @@ const IndexPage = ({ ...props }) => (
         <div className="py-8 text-center lg:flex justify-center">
           <Button
             standard
-            text="More About The Services We Provide"
+            text="More About What We Do"
             url="/services"
             classes="m-1 rounded-full hover:shadow-md text-grey-darker hover:shadow"
           />
@@ -86,11 +87,6 @@ const IndexPage = ({ ...props }) => (
           text="We think big, design smart and develop fast. We have helped organizations of various sizes bring life to ideas and existing products. We're now really interested in hearing how we can help you"
         />
         <div className="p-4 md:flex items-center max-w-full justify-center">
-          <img
-            src={LogoIBM}
-            className="opacity-50 hover:opacity-100 client-logo p-1"
-            alt="IBM Logo"
-          />
           <img
             src={LogoRicoh}
             className="opacity-50 hover:opacity-100 client-logo p-1"
diff --git a/src/pages/services.js b/src/pages/services.js
index e19ab66..75139b8 100644
--- a/src/pages/services.js
+++ b/src/pages/services.js
@@ -1,4 +1,5 @@
 import React from 'react'
+import Link from 'gatsby-link'
 
 import PageIntro from '../components/PageIntro'
 import SectionIntro from '../components/SectionIntro'
@@ -14,59 +15,57 @@ const ServicesPage = () => (
       sectionClasses="mb-16 lg:mb-8"
     />
 
-    <section className="container max-w-lg mx-auto mt-12 p-4">
+    <section className="container mx-auto mt-12 p-4">
       <SectionIntro
-        classes="text-center"
+        classes="text-center max-w-lg mx-auto"
         headline="Software Development Services"
         text="We have experiences with a wide variety of industries and are always keeping track of emerging technologies so that we can deliver forward-thinking solutions. Our developers are handpicked with care to ensure that we always deliver top-notch software quality. With our agile development process we can ensure high productivity and know how to balance between cost, time and quality."
       />
+      <div className="md:flex mt-4">
+        <div className="my-1 md:mx-1 border p-6 hover:shadow-md rounded">
+          <h3 className="text-l my-2">Modern Web Development</h3>
+          <p className="leading-normal">
+            We offer full-cycle web development services for the connected
+            world. Our talented developers work with popular languages and are
+            always up to speed with cutting edge trends in web development. We
+            provide services for both custom web development solutions and
+            extensions for third party solutions.
+          </p>
+        </div>
+
+        <div className="my-1 md:mx-1 border hover:shadow-md p-6 rounded">
+          <h3 className="text-l my-2">Mobile App Development</h3>
+          <p className="leading-normal">
+            We have what it takes to develop competitive iOS and Android
+            applications using both native languages and hybrid solutions.
+            Solutions for iOS are built with Swift & Objective-C and Android
+            solutions are built with Java & Kotlin. We love using technologies
+            like React Native to build cross-platform native apps.
+          </p>
+        </div>
+
+        <div className="my-1 md:mx-1 border hover:shadow-md p-6 rounded">
+          <h3 className="text-l my-2">UX & UI Design</h3>
+          <p className="leading-normal">
+            Our approach is simple: focus on how users might use the product in
+            the best way possible. We offer UX and interface design for all
+            screens and devices. The solutions are usually shaped through
+            iterative processes of research, prototyping and testing.
+          </p>
+        </div>
+      </div>
+      <div className="border md:mx-1 my-1 mb-8 hover:shadow-md rounded p-6">
+        <SectionIntro
+          headline="Technologies"
+          classes="text-center text-l max-w-lg mx-auto"
+          text="We understand that technologies are just tools, so we tend to be framework agnostic and select the best tools for your needs. These are the technologies that we're currently working with on a daily basis."
+        />
+        <Technologies />
+      </div>
     </section>
 
-    <div className="md:flex container mx-auto">
-      <div className="my-4 md:mx-2 border p-6 rounded">
-        <h3 className="text-l my-2">Modern Web Development</h3>
-        <p className="leading-normal">
-          We offer full-cycle web development services for the connected world.
-          Our talented developers work with popular languages and are always up
-          to speed with cutting edge trends in web development. We provide
-          services for both custom web development solutions and extensions for
-          third party solutions.
-        </p>
-      </div>
-
-      <div className="my-4 md:mx-2 border p-6 rounded">
-        <h3 className="text-l my-2">Mobile App Development</h3>
-        <p className="leading-normal">
-          We have what it takes to develop competitive iOS and Android
-          applications using both native languages and hybrid solutions.
-          Solutions for iOS are built with Swift & Objective-C and Android
-          solutions are built with Java & Kotlin. We love using technologies
-          like React Native to build cross-platform native apps.
-        </p>
-      </div>
-
-      <div className="my-4 md:mx-2 border p-6 rounded">
-        <h3 className="text-l my-2">UX & UI Design</h3>
-        <p className="leading-normal">
-          Our approach is simple: focus on how users might use the product in
-          the best way possible. We offer UX and interface design for all
-          screens and devices. The solutions are usually shaped through
-          iterative processes of research, prototyping and testing.
-        </p>
-      </div>
-    </div>
-
-    <div className="container mx-auto my-12">
-      <SectionIntro
-        classes="text-center max-w-lg mx-auto"
-        headline="Technologies"
-        text="We understand that technologies are just tools and select the appropriate tool for your needs. These are the technologies that we're currently working with on a daily basis."
-      />
-      <Technologies />
-    </div>
-
-    <div className="bg-grey-lighter p-10">
-      <section className="container mx-auto max-w-lg text-center">
+    <div className="bg-grey-lighter p-4">
+      <section className="container mx-auto mt-8 max-w-lg text-center">
         <SectionIntro
           headline="How We Work"
           text="We are serving everything from Fortune 500 companies to startups and tailor our processes based on your scale and needs. We collaborate closely with our clients at each step of the development process and make sure that the solutions delivery great value and meet your specific business requirements"
@@ -74,6 +73,29 @@ const ServicesPage = () => (
       </section>
       <WorkStyle />
     </div>
+
+    <div className="bg-indigo-darkest text-center py-4 lg:px-4">
+      <Link className="no-underline text-white" to="/contact">
+        <div
+          className="p-2 bg-indigo-darker items-center text-indigo-lightest leading-none lg:rounded-full flex lg:inline-flex"
+          role="alert"
+        >
+          <span className="flex rounded-full bg-indigo uppercase px-2 py-1 text-xs font-bold mr-3">
+            Let's Connect
+          </span>
+          <span className="font-semibold mr-2 text-left flex-auto">
+            Tell us about your project and get a free proposal
+          </span>
+          <svg
+            className="fill-current opacity-75 h-4 w-4"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 20 20"
+          >
+            <path d="M12.95 10.707l.707-.707L8 4.343 6.586 5.757 10.828 10l-4.242 4.243L8 15.657l4.95-4.95z" />
+          </svg>
+        </div>
+      </Link>
+    </div>
   </div>
 )
 
diff --git a/src/styles/index.css b/src/styles/index.css
index 1b9a246..64e711b 100644
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -946,6 +946,298 @@ table {
   background-color: #ffebef;
 }
 
+.group:hover .group-hover\:bg-transparent {
+  background-color: transparent;
+}
+
+.group:hover .group-hover\:bg-black {
+  background-color: #212121;
+}
+
+.group:hover .group-hover\:bg-grey-darkest {
+  background-color: #3d4852;
+}
+
+.group:hover .group-hover\:bg-grey-darker {
+  background-color: #606f7b;
+}
+
+.group:hover .group-hover\:bg-grey-dark {
+  background-color: #8795a1;
+}
+
+.group:hover .group-hover\:bg-grey {
+  background-color: #b8c2cc;
+}
+
+.group:hover .group-hover\:bg-grey-light {
+  background-color: #dae1e7;
+}
+
+.group:hover .group-hover\:bg-grey-lighter {
+  background-color: #f1f5f8;
+}
+
+.group:hover .group-hover\:bg-grey-lightest {
+  background-color: #f8fafc;
+}
+
+.group:hover .group-hover\:bg-white {
+  background-color: #fff;
+}
+
+.group:hover .group-hover\:bg-red-darkest {
+  background-color: #3b0d0c;
+}
+
+.group:hover .group-hover\:bg-red-darker {
+  background-color: #621b18;
+}
+
+.group:hover .group-hover\:bg-red-dark {
+  background-color: #cc1f1a;
+}
+
+.group:hover .group-hover\:bg-red {
+  background-color: #e3342f;
+}
+
+.group:hover .group-hover\:bg-red-light {
+  background-color: #ef5753;
+}
+
+.group:hover .group-hover\:bg-red-lighter {
+  background-color: #f9acaa;
+}
+
+.group:hover .group-hover\:bg-red-lightest {
+  background-color: #fcebea;
+}
+
+.group:hover .group-hover\:bg-orange-darkest {
+  background-color: #462a16;
+}
+
+.group:hover .group-hover\:bg-orange-darker {
+  background-color: #613b1f;
+}
+
+.group:hover .group-hover\:bg-orange-dark {
+  background-color: #de751f;
+}
+
+.group:hover .group-hover\:bg-orange {
+  background-color: #f6993f;
+}
+
+.group:hover .group-hover\:bg-orange-light {
+  background-color: #faad63;
+}
+
+.group:hover .group-hover\:bg-orange-lighter {
+  background-color: #fcd9b6;
+}
+
+.group:hover .group-hover\:bg-orange-lightest {
+  background-color: #fff5eb;
+}
+
+.group:hover .group-hover\:bg-yellow-darkest {
+  background-color: #453411;
+}
+
+.group:hover .group-hover\:bg-yellow-darker {
+  background-color: #684f1d;
+}
+
+.group:hover .group-hover\:bg-yellow-dark {
+  background-color: #f2d024;
+}
+
+.group:hover .group-hover\:bg-yellow {
+  background-color: #ffed4a;
+}
+
+.group:hover .group-hover\:bg-yellow-light {
+  background-color: #fff382;
+}
+
+.group:hover .group-hover\:bg-yellow-lighter {
+  background-color: #fff9c2;
+}
+
+.group:hover .group-hover\:bg-yellow-lightest {
+  background-color: #fcfbeb;
+}
+
+.group:hover .group-hover\:bg-green-darkest {
+  background-color: #0f2f21;
+}
+
+.group:hover .group-hover\:bg-green-darker {
+  background-color: #1a4731;
+}
+
+.group:hover .group-hover\:bg-green-dark {
+  background-color: #1f9d55;
+}
+
+.group:hover .group-hover\:bg-green {
+  background-color: #38c172;
+}
+
+.group:hover .group-hover\:bg-green-light {
+  background-color: #51d88a;
+}
+
+.group:hover .group-hover\:bg-green-lighter {
+  background-color: #a2f5bf;
+}
+
+.group:hover .group-hover\:bg-green-lightest {
+  background-color: #e3fcec;
+}
+
+.group:hover .group-hover\:bg-teal-darkest {
+  background-color: #0d3331;
+}
+
+.group:hover .group-hover\:bg-teal-darker {
+  background-color: #20504f;
+}
+
+.group:hover .group-hover\:bg-teal-dark {
+  background-color: #38a89d;
+}
+
+.group:hover .group-hover\:bg-teal {
+  background-color: #4dc0b5;
+}
+
+.group:hover .group-hover\:bg-teal-light {
+  background-color: #64d5ca;
+}
+
+.group:hover .group-hover\:bg-teal-lighter {
+  background-color: #a0f0ed;
+}
+
+.group:hover .group-hover\:bg-teal-lightest {
+  background-color: #e8fffe;
+}
+
+.group:hover .group-hover\:bg-blue-darkest {
+  background-color: #12283a;
+}
+
+.group:hover .group-hover\:bg-blue-darker {
+  background-color: #1c3d5a;
+}
+
+.group:hover .group-hover\:bg-blue-dark {
+  background-color: #2779bd;
+}
+
+.group:hover .group-hover\:bg-blue {
+  background-color: #3490dc;
+}
+
+.group:hover .group-hover\:bg-blue-light {
+  background-color: #6cb2eb;
+}
+
+.group:hover .group-hover\:bg-blue-lighter {
+  background-color: #bcdefa;
+}
+
+.group:hover .group-hover\:bg-blue-lightest {
+  background-color: #eff8ff;
+}
+
+.group:hover .group-hover\:bg-indigo-darkest {
+  background-color: #191e38;
+}
+
+.group:hover .group-hover\:bg-indigo-darker {
+  background-color: #2f365f;
+}
+
+.group:hover .group-hover\:bg-indigo-dark {
+  background-color: #5661b3;
+}
+
+.group:hover .group-hover\:bg-indigo {
+  background-color: #6574cd;
+}
+
+.group:hover .group-hover\:bg-indigo-light {
+  background-color: #7886d7;
+}
+
+.group:hover .group-hover\:bg-indigo-lighter {
+  background-color: #b2b7ff;
+}
+
+.group:hover .group-hover\:bg-indigo-lightest {
+  background-color: #e6e8ff;
+}
+
+.group:hover .group-hover\:bg-purple-darkest {
+  background-color: #21183c;
+}
+
+.group:hover .group-hover\:bg-purple-darker {
+  background-color: #382b5f;
+}
+
+.group:hover .group-hover\:bg-purple-dark {
+  background-color: #794acf;
+}
+
+.group:hover .group-hover\:bg-purple {
+  background-color: #9561e2;
+}
+
+.group:hover .group-hover\:bg-purple-light {
+  background-color: #a779e9;
+}
+
+.group:hover .group-hover\:bg-purple-lighter {
+  background-color: #d6bbfc;
+}
+
+.group:hover .group-hover\:bg-purple-lightest {
+  background-color: #f3ebff;
+}
+
+.group:hover .group-hover\:bg-pink-darkest {
+  background-color: #451225;
+}
+
+.group:hover .group-hover\:bg-pink-darker {
+  background-color: #6f213f;
+}
+
+.group:hover .group-hover\:bg-pink-dark {
+  background-color: #eb5286;
+}
+
+.group:hover .group-hover\:bg-pink {
+  background-color: #f66d9b;
+}
+
+.group:hover .group-hover\:bg-pink-light {
+  background-color: #fa7ea8;
+}
+
+.group:hover .group-hover\:bg-pink-lighter {
+  background-color: #ffbbca;
+}
+
+.group:hover .group-hover\:bg-pink-lightest {
+  background-color: #ffebef;
+}
+
 .hover\:bg-transparent:hover {
   background-color: transparent;
 }
@@ -4298,6 +4590,298 @@ table {
   color: #ffebef;
 }
 
+.group:hover .group-hover\:text-transparent {
+  color: transparent;
+}
+
+.group:hover .group-hover\:text-black {
+  color: #212121;
+}
+
+.group:hover .group-hover\:text-grey-darkest {
+  color: #3d4852;
+}
+
+.group:hover .group-hover\:text-grey-darker {
+  color: #606f7b;
+}
+
+.group:hover .group-hover\:text-grey-dark {
+  color: #8795a1;
+}
+
+.group:hover .group-hover\:text-grey {
+  color: #b8c2cc;
+}
+
+.group:hover .group-hover\:text-grey-light {
+  color: #dae1e7;
+}
+
+.group:hover .group-hover\:text-grey-lighter {
+  color: #f1f5f8;
+}
+
+.group:hover .group-hover\:text-grey-lightest {
+  color: #f8fafc;
+}
+
+.group:hover .group-hover\:text-white {
+  color: #fff;
+}
+
+.group:hover .group-hover\:text-red-darkest {
+  color: #3b0d0c;
+}
+
+.group:hover .group-hover\:text-red-darker {
+  color: #621b18;
+}
+
+.group:hover .group-hover\:text-red-dark {
+  color: #cc1f1a;
+}
+
+.group:hover .group-hover\:text-red {
+  color: #e3342f;
+}
+
+.group:hover .group-hover\:text-red-light {
+  color: #ef5753;
+}
+
+.group:hover .group-hover\:text-red-lighter {
+  color: #f9acaa;
+}
+
+.group:hover .group-hover\:text-red-lightest {
+  color: #fcebea;
+}
+
+.group:hover .group-hover\:text-orange-darkest {
+  color: #462a16;
+}
+
+.group:hover .group-hover\:text-orange-darker {
+  color: #613b1f;
+}
+
+.group:hover .group-hover\:text-orange-dark {
+  color: #de751f;
+}
+
+.group:hover .group-hover\:text-orange {
+  color: #f6993f;
+}
+
+.group:hover .group-hover\:text-orange-light {
+  color: #faad63;
+}
+
+.group:hover .group-hover\:text-orange-lighter {
+  color: #fcd9b6;
+}
+
+.group:hover .group-hover\:text-orange-lightest {
+  color: #fff5eb;
+}
+
+.group:hover .group-hover\:text-yellow-darkest {
+  color: #453411;
+}
+
+.group:hover .group-hover\:text-yellow-darker {
+  color: #684f1d;
+}
+
+.group:hover .group-hover\:text-yellow-dark {
+  color: #f2d024;
+}
+
+.group:hover .group-hover\:text-yellow {
+  color: #ffed4a;
+}
+
+.group:hover .group-hover\:text-yellow-light {
+  color: #fff382;
+}
+
+.group:hover .group-hover\:text-yellow-lighter {
+  color: #fff9c2;
+}
+
+.group:hover .group-hover\:text-yellow-lightest {
+  color: #fcfbeb;
+}
+
+.group:hover .group-hover\:text-green-darkest {
+  color: #0f2f21;
+}
+
+.group:hover .group-hover\:text-green-darker {
+  color: #1a4731;
+}
+
+.group:hover .group-hover\:text-green-dark {
+  color: #1f9d55;
+}
+
+.group:hover .group-hover\:text-green {
+  color: #38c172;
+}
+
+.group:hover .group-hover\:text-green-light {
+  color: #51d88a;
+}
+
+.group:hover .group-hover\:text-green-lighter {
+  color: #a2f5bf;
+}
+
+.group:hover .group-hover\:text-green-lightest {
+  color: #e3fcec;
+}
+
+.group:hover .group-hover\:text-teal-darkest {
+  color: #0d3331;
+}
+
+.group:hover .group-hover\:text-teal-darker {
+  color: #20504f;
+}
+
+.group:hover .group-hover\:text-teal-dark {
+  color: #38a89d;
+}
+
+.group:hover .group-hover\:text-teal {
+  color: #4dc0b5;
+}
+
+.group:hover .group-hover\:text-teal-light {
+  color: #64d5ca;
+}
+
+.group:hover .group-hover\:text-teal-lighter {
+  color: #a0f0ed;
+}
+
+.group:hover .group-hover\:text-teal-lightest {
+  color: #e8fffe;
+}
+
+.group:hover .group-hover\:text-blue-darkest {
+  color: #12283a;
+}
+
+.group:hover .group-hover\:text-blue-darker {
+  color: #1c3d5a;
+}
+
+.group:hover .group-hover\:text-blue-dark {
+  color: #2779bd;
+}
+
+.group:hover .group-hover\:text-blue {
+  color: #3490dc;
+}
+
+.group:hover .group-hover\:text-blue-light {
+  color: #6cb2eb;
+}
+
+.group:hover .group-hover\:text-blue-lighter {
+  color: #bcdefa;
+}
+
+.group:hover .group-hover\:text-blue-lightest {
+  color: #eff8ff;
+}
+
+.group:hover .group-hover\:text-indigo-darkest {
+  color: #191e38;
+}
+
+.group:hover .group-hover\:text-indigo-darker {
+  color: #2f365f;
+}
+
+.group:hover .group-hover\:text-indigo-dark {
+  color: #5661b3;
+}
+
+.group:hover .group-hover\:text-indigo {
+  color: #6574cd;
+}
+
+.group:hover .group-hover\:text-indigo-light {
+  color: #7886d7;
+}
+
+.group:hover .group-hover\:text-indigo-lighter {
+  color: #b2b7ff;
+}
+
+.group:hover .group-hover\:text-indigo-lightest {
+  color: #e6e8ff;
+}
+
+.group:hover .group-hover\:text-purple-darkest {
+  color: #21183c;
+}
+
+.group:hover .group-hover\:text-purple-darker {
+  color: #382b5f;
+}
+
+.group:hover .group-hover\:text-purple-dark {
+  color: #794acf;
+}
+
+.group:hover .group-hover\:text-purple {
+  color: #9561e2;
+}
+
+.group:hover .group-hover\:text-purple-light {
+  color: #a779e9;
+}
+
+.group:hover .group-hover\:text-purple-lighter {
+  color: #d6bbfc;
+}
+
+.group:hover .group-hover\:text-purple-lightest {
+  color: #f3ebff;
+}
+
+.group:hover .group-hover\:text-pink-darkest {
+  color: #451225;
+}
+
+.group:hover .group-hover\:text-pink-darker {
+  color: #6f213f;
+}
+
+.group:hover .group-hover\:text-pink-dark {
+  color: #eb5286;
+}
+
+.group:hover .group-hover\:text-pink {
+  color: #f66d9b;
+}
+
+.group:hover .group-hover\:text-pink-light {
+  color: #fa7ea8;
+}
+
+.group:hover .group-hover\:text-pink-lighter {
+  color: #ffbbca;
+}
+
+.group:hover .group-hover\:text-pink-lightest {
+  color: #ffebef;
+}
+
 .hover\:text-transparent:hover {
   color: transparent;
 }
@@ -5258,6 +5842,298 @@ table {
     background-color: #ffebef;
   }
 
+  .group:hover .sm\:group-hover\:bg-transparent {
+    background-color: transparent;
+  }
+
+  .group:hover .sm\:group-hover\:bg-black {
+    background-color: #212121;
+  }
+
+  .group:hover .sm\:group-hover\:bg-grey-darkest {
+    background-color: #3d4852;
+  }
+
+  .group:hover .sm\:group-hover\:bg-grey-darker {
+    background-color: #606f7b;
+  }
+
+  .group:hover .sm\:group-hover\:bg-grey-dark {
+    background-color: #8795a1;
+  }
+
+  .group:hover .sm\:group-hover\:bg-grey {
+    background-color: #b8c2cc;
+  }
+
+  .group:hover .sm\:group-hover\:bg-grey-light {
+    background-color: #dae1e7;
+  }
+
+  .group:hover .sm\:group-hover\:bg-grey-lighter {
+    background-color: #f1f5f8;
+  }
+
+  .group:hover .sm\:group-hover\:bg-grey-lightest {
+    background-color: #f8fafc;
+  }
+
+  .group:hover .sm\:group-hover\:bg-white {
+    background-color: #fff;
+  }
+
+  .group:hover .sm\:group-hover\:bg-red-darkest {
+    background-color: #3b0d0c;
+  }
+
+  .group:hover .sm\:group-hover\:bg-red-darker {
+    background-color: #621b18;
+  }
+
+  .group:hover .sm\:group-hover\:bg-red-dark {
+    background-color: #cc1f1a;
+  }
+
+  .group:hover .sm\:group-hover\:bg-red {
+    background-color: #e3342f;
+  }
+
+  .group:hover .sm\:group-hover\:bg-red-light {
+    background-color: #ef5753;
+  }
+
+  .group:hover .sm\:group-hover\:bg-red-lighter {
+    background-color: #f9acaa;
+  }
+
+  .group:hover .sm\:group-hover\:bg-red-lightest {
+    background-color: #fcebea;
+  }
+
+  .group:hover .sm\:group-hover\:bg-orange-darkest {
+    background-color: #462a16;
+  }
+
+  .group:hover .sm\:group-hover\:bg-orange-darker {
+    background-color: #613b1f;
+  }
+
+  .group:hover .sm\:group-hover\:bg-orange-dark {
+    background-color: #de751f;
+  }
+
+  .group:hover .sm\:group-hover\:bg-orange {
+    background-color: #f6993f;
+  }
+
+  .group:hover .sm\:group-hover\:bg-orange-light {
+    background-color: #faad63;
+  }
+
+  .group:hover .sm\:group-hover\:bg-orange-lighter {
+    background-color: #fcd9b6;
+  }
+
+  .group:hover .sm\:group-hover\:bg-orange-lightest {
+    background-color: #fff5eb;
+  }
+
+  .group:hover .sm\:group-hover\:bg-yellow-darkest {
+    background-color: #453411;
+  }
+
+  .group:hover .sm\:group-hover\:bg-yellow-darker {
+    background-color: #684f1d;
+  }
+
+  .group:hover .sm\:group-hover\:bg-yellow-dark {
+    background-color: #f2d024;
+  }
+
+  .group:hover .sm\:group-hover\:bg-yellow {
+    background-color: #ffed4a;
+  }
+
+  .group:hover .sm\:group-hover\:bg-yellow-light {
+    background-color: #fff382;
+  }
+
+  .group:hover .sm\:group-hover\:bg-yellow-lighter {
+    background-color: #fff9c2;
+  }
+
+  .group:hover .sm\:group-hover\:bg-yellow-lightest {
+    background-color: #fcfbeb;
+  }
+
+  .group:hover .sm\:group-hover\:bg-green-darkest {
+    background-color: #0f2f21;
+  }
+
+  .group:hover .sm\:group-hover\:bg-green-darker {
+    background-color: #1a4731;
+  }
+
+  .group:hover .sm\:group-hover\:bg-green-dark {
+    background-color: #1f9d55;
+  }
+
+  .group:hover .sm\:group-hover\:bg-green {
+    background-color: #38c172;
+  }
+
+  .group:hover .sm\:group-hover\:bg-green-light {
+    background-color: #51d88a;
+  }
+
+  .group:hover .sm\:group-hover\:bg-green-lighter {
+    background-color: #a2f5bf;
+  }
+
+  .group:hover .sm\:group-hover\:bg-green-lightest {
+    background-color: #e3fcec;
+  }
+
+  .group:hover .sm\:group-hover\:bg-teal-darkest {
+    background-color: #0d3331;
+  }
+
+  .group:hover .sm\:group-hover\:bg-teal-darker {
+    background-color: #20504f;
+  }
+
+  .group:hover .sm\:group-hover\:bg-teal-dark {
+    background-color: #38a89d;
+  }
+
+  .group:hover .sm\:group-hover\:bg-teal {
+    background-color: #4dc0b5;
+  }
+
+  .group:hover .sm\:group-hover\:bg-teal-light {
+    background-color: #64d5ca;
+  }
+
+  .group:hover .sm\:group-hover\:bg-teal-lighter {
+    background-color: #a0f0ed;
+  }
+
+  .group:hover .sm\:group-hover\:bg-teal-lightest {
+    background-color: #e8fffe;
+  }
+
+  .group:hover .sm\:group-hover\:bg-blue-darkest {
+    background-color: #12283a;
+  }
+
+  .group:hover .sm\:group-hover\:bg-blue-darker {
+    background-color: #1c3d5a;
+  }
+
+  .group:hover .sm\:group-hover\:bg-blue-dark {
+    background-color: #2779bd;
+  }
+
+  .group:hover .sm\:group-hover\:bg-blue {
+    background-color: #3490dc;
+  }
+
+  .group:hover .sm\:group-hover\:bg-blue-light {
+    background-color: #6cb2eb;
+  }
+
+  .group:hover .sm\:group-hover\:bg-blue-lighter {
+    background-color: #bcdefa;
+  }
+
+  .group:hover .sm\:group-hover\:bg-blue-lightest {
+    background-color: #eff8ff;
+  }
+
+  .group:hover .sm\:group-hover\:bg-indigo-darkest {
+    background-color: #191e38;
+  }
+
+  .group:hover .sm\:group-hover\:bg-indigo-darker {
+    background-color: #2f365f;
+  }
+
+  .group:hover .sm\:group-hover\:bg-indigo-dark {
+    background-color: #5661b3;
+  }
+
+  .group:hover .sm\:group-hover\:bg-indigo {
+    background-color: #6574cd;
+  }
+
+  .group:hover .sm\:group-hover\:bg-indigo-light {
+    background-color: #7886d7;
+  }
+
+  .group:hover .sm\:group-hover\:bg-indigo-lighter {
+    background-color: #b2b7ff;
+  }
+
+  .group:hover .sm\:group-hover\:bg-indigo-lightest {
+    background-color: #e6e8ff;
+  }
+
+  .group:hover .sm\:group-hover\:bg-purple-darkest {
+    background-color: #21183c;
+  }
+
+  .group:hover .sm\:group-hover\:bg-purple-darker {
+    background-color: #382b5f;
+  }
+
+  .group:hover .sm\:group-hover\:bg-purple-dark {
+    background-color: #794acf;
+  }
+
+  .group:hover .sm\:group-hover\:bg-purple {
+    background-color: #9561e2;
+  }
+
+  .group:hover .sm\:group-hover\:bg-purple-light {
+    background-color: #a779e9;
+  }
+
+  .group:hover .sm\:group-hover\:bg-purple-lighter {
+    background-color: #d6bbfc;
+  }
+
+  .group:hover .sm\:group-hover\:bg-purple-lightest {
+    background-color: #f3ebff;
+  }
+
+  .group:hover .sm\:group-hover\:bg-pink-darkest {
+    background-color: #451225;
+  }
+
+  .group:hover .sm\:group-hover\:bg-pink-darker {
+    background-color: #6f213f;
+  }
+
+  .group:hover .sm\:group-hover\:bg-pink-dark {
+    background-color: #eb5286;
+  }
+
+  .group:hover .sm\:group-hover\:bg-pink {
+    background-color: #f66d9b;
+  }
+
+  .group:hover .sm\:group-hover\:bg-pink-light {
+    background-color: #fa7ea8;
+  }
+
+  .group:hover .sm\:group-hover\:bg-pink-lighter {
+    background-color: #ffbbca;
+  }
+
+  .group:hover .sm\:group-hover\:bg-pink-lightest {
+    background-color: #ffebef;
+  }
+
   .sm\:hover\:bg-transparent:hover {
     background-color: transparent;
   }
@@ -8586,6 +9462,298 @@ table {
     color: #ffebef;
   }
 
+  .group:hover .sm\:group-hover\:text-transparent {
+    color: transparent;
+  }
+
+  .group:hover .sm\:group-hover\:text-black {
+    color: #212121;
+  }
+
+  .group:hover .sm\:group-hover\:text-grey-darkest {
+    color: #3d4852;
+  }
+
+  .group:hover .sm\:group-hover\:text-grey-darker {
+    color: #606f7b;
+  }
+
+  .group:hover .sm\:group-hover\:text-grey-dark {
+    color: #8795a1;
+  }
+
+  .group:hover .sm\:group-hover\:text-grey {
+    color: #b8c2cc;
+  }
+
+  .group:hover .sm\:group-hover\:text-grey-light {
+    color: #dae1e7;
+  }
+
+  .group:hover .sm\:group-hover\:text-grey-lighter {
+    color: #f1f5f8;
+  }
+
+  .group:hover .sm\:group-hover\:text-grey-lightest {
+    color: #f8fafc;
+  }
+
+  .group:hover .sm\:group-hover\:text-white {
+    color: #fff;
+  }
+
+  .group:hover .sm\:group-hover\:text-red-darkest {
+    color: #3b0d0c;
+  }
+
+  .group:hover .sm\:group-hover\:text-red-darker {
+    color: #621b18;
+  }
+
+  .group:hover .sm\:group-hover\:text-red-dark {
+    color: #cc1f1a;
+  }
+
+  .group:hover .sm\:group-hover\:text-red {
+    color: #e3342f;
+  }
+
+  .group:hover .sm\:group-hover\:text-red-light {
+    color: #ef5753;
+  }
+
+  .group:hover .sm\:group-hover\:text-red-lighter {
+    color: #f9acaa;
+  }
+
+  .group:hover .sm\:group-hover\:text-red-lightest {
+    color: #fcebea;
+  }
+
+  .group:hover .sm\:group-hover\:text-orange-darkest {
+    color: #462a16;
+  }
+
+  .group:hover .sm\:group-hover\:text-orange-darker {
+    color: #613b1f;
+  }
+
+  .group:hover .sm\:group-hover\:text-orange-dark {
+    color: #de751f;
+  }
+
+  .group:hover .sm\:group-hover\:text-orange {
+    color: #f6993f;
+  }
+
+  .group:hover .sm\:group-hover\:text-orange-light {
+    color: #faad63;
+  }
+
+  .group:hover .sm\:group-hover\:text-orange-lighter {
+    color: #fcd9b6;
+  }
+
+  .group:hover .sm\:group-hover\:text-orange-lightest {
+    color: #fff5eb;
+  }
+
+  .group:hover .sm\:group-hover\:text-yellow-darkest {
+    color: #453411;
+  }
+
+  .group:hover .sm\:group-hover\:text-yellow-darker {
+    color: #684f1d;
+  }
+
+  .group:hover .sm\:group-hover\:text-yellow-dark {
+    color: #f2d024;
+  }
+
+  .group:hover .sm\:group-hover\:text-yellow {
+    color: #ffed4a;
+  }
+
+  .group:hover .sm\:group-hover\:text-yellow-light {
+    color: #fff382;
+  }
+
+  .group:hover .sm\:group-hover\:text-yellow-lighter {
+    color: #fff9c2;
+  }
+
+  .group:hover .sm\:group-hover\:text-yellow-lightest {
+    color: #fcfbeb;
+  }
+
+  .group:hover .sm\:group-hover\:text-green-darkest {
+    color: #0f2f21;
+  }
+
+  .group:hover .sm\:group-hover\:text-green-darker {
+    color: #1a4731;
+  }
+
+  .group:hover .sm\:group-hover\:text-green-dark {
+    color: #1f9d55;
+  }
+
+  .group:hover .sm\:group-hover\:text-green {
+    color: #38c172;
+  }
+
+  .group:hover .sm\:group-hover\:text-green-light {
+    color: #51d88a;
+  }
+
+  .group:hover .sm\:group-hover\:text-green-lighter {
+    color: #a2f5bf;
+  }
+
+  .group:hover .sm\:group-hover\:text-green-lightest {
+    color: #e3fcec;
+  }
+
+  .group:hover .sm\:group-hover\:text-teal-darkest {
+    color: #0d3331;
+  }
+
+  .group:hover .sm\:group-hover\:text-teal-darker {
+    color: #20504f;
+  }
+
+  .group:hover .sm\:group-hover\:text-teal-dark {
+    color: #38a89d;
+  }
+
+  .group:hover .sm\:group-hover\:text-teal {
+    color: #4dc0b5;
+  }
+
+  .group:hover .sm\:group-hover\:text-teal-light {
+    color: #64d5ca;
+  }
+
+  .group:hover .sm\:group-hover\:text-teal-lighter {
+    color: #a0f0ed;
+  }
+
+  .group:hover .sm\:group-hover\:text-teal-lightest {
+    color: #e8fffe;
+  }
+
+  .group:hover .sm\:group-hover\:text-blue-darkest {
+    color: #12283a;
+  }
+
+  .group:hover .sm\:group-hover\:text-blue-darker {
+    color: #1c3d5a;
+  }
+
+  .group:hover .sm\:group-hover\:text-blue-dark {
+    color: #2779bd;
+  }
+
+  .group:hover .sm\:group-hover\:text-blue {
+    color: #3490dc;
+  }
+
+  .group:hover .sm\:group-hover\:text-blue-light {
+    color: #6cb2eb;
+  }
+
+  .group:hover .sm\:group-hover\:text-blue-lighter {
+    color: #bcdefa;
+  }
+
+  .group:hover .sm\:group-hover\:text-blue-lightest {
+    color: #eff8ff;
+  }
+
+  .group:hover .sm\:group-hover\:text-indigo-darkest {
+    color: #191e38;
+  }
+
+  .group:hover .sm\:group-hover\:text-indigo-darker {
+    color: #2f365f;
+  }
+
+  .group:hover .sm\:group-hover\:text-indigo-dark {
+    color: #5661b3;
+  }
+
+  .group:hover .sm\:group-hover\:text-indigo {
+    color: #6574cd;
+  }
+
+  .group:hover .sm\:group-hover\:text-indigo-light {
+    color: #7886d7;
+  }
+
+  .group:hover .sm\:group-hover\:text-indigo-lighter {
+    color: #b2b7ff;
+  }
+
+  .group:hover .sm\:group-hover\:text-indigo-lightest {
+    color: #e6e8ff;
+  }
+
+  .group:hover .sm\:group-hover\:text-purple-darkest {
+    color: #21183c;
+  }
+
+  .group:hover .sm\:group-hover\:text-purple-darker {
+    color: #382b5f;
+  }
+
+  .group:hover .sm\:group-hover\:text-purple-dark {
+    color: #794acf;
+  }
+
+  .group:hover .sm\:group-hover\:text-purple {
+    color: #9561e2;
+  }
+
+  .group:hover .sm\:group-hover\:text-purple-light {
+    color: #a779e9;
+  }
+
+  .group:hover .sm\:group-hover\:text-purple-lighter {
+    color: #d6bbfc;
+  }
+
+  .group:hover .sm\:group-hover\:text-purple-lightest {
+    color: #f3ebff;
+  }
+
+  .group:hover .sm\:group-hover\:text-pink-darkest {
+    color: #451225;
+  }
+
+  .group:hover .sm\:group-hover\:text-pink-darker {
+    color: #6f213f;
+  }
+
+  .group:hover .sm\:group-hover\:text-pink-dark {
+    color: #eb5286;
+  }
+
+  .group:hover .sm\:group-hover\:text-pink {
+    color: #f66d9b;
+  }
+
+  .group:hover .sm\:group-hover\:text-pink-light {
+    color: #fa7ea8;
+  }
+
+  .group:hover .sm\:group-hover\:text-pink-lighter {
+    color: #ffbbca;
+  }
+
+  .group:hover .sm\:group-hover\:text-pink-lightest {
+    color: #ffebef;
+  }
+
   .sm\:hover\:text-transparent:hover {
     color: transparent;
   }
@@ -9547,6 +10715,298 @@ table {
     background-color: #ffebef;
   }
 
+  .group:hover .md\:group-hover\:bg-transparent {
+    background-color: transparent;
+  }
+
+  .group:hover .md\:group-hover\:bg-black {
+    background-color: #212121;
+  }
+
+  .group:hover .md\:group-hover\:bg-grey-darkest {
+    background-color: #3d4852;
+  }
+
+  .group:hover .md\:group-hover\:bg-grey-darker {
+    background-color: #606f7b;
+  }
+
+  .group:hover .md\:group-hover\:bg-grey-dark {
+    background-color: #8795a1;
+  }
+
+  .group:hover .md\:group-hover\:bg-grey {
+    background-color: #b8c2cc;
+  }
+
+  .group:hover .md\:group-hover\:bg-grey-light {
+    background-color: #dae1e7;
+  }
+
+  .group:hover .md\:group-hover\:bg-grey-lighter {
+    background-color: #f1f5f8;
+  }
+
+  .group:hover .md\:group-hover\:bg-grey-lightest {
+    background-color: #f8fafc;
+  }
+
+  .group:hover .md\:group-hover\:bg-white {
+    background-color: #fff;
+  }
+
+  .group:hover .md\:group-hover\:bg-red-darkest {
+    background-color: #3b0d0c;
+  }
+
+  .group:hover .md\:group-hover\:bg-red-darker {
+    background-color: #621b18;
+  }
+
+  .group:hover .md\:group-hover\:bg-red-dark {
+    background-color: #cc1f1a;
+  }
+
+  .group:hover .md\:group-hover\:bg-red {
+    background-color: #e3342f;
+  }
+
+  .group:hover .md\:group-hover\:bg-red-light {
+    background-color: #ef5753;
+  }
+
+  .group:hover .md\:group-hover\:bg-red-lighter {
+    background-color: #f9acaa;
+  }
+
+  .group:hover .md\:group-hover\:bg-red-lightest {
+    background-color: #fcebea;
+  }
+
+  .group:hover .md\:group-hover\:bg-orange-darkest {
+    background-color: #462a16;
+  }
+
+  .group:hover .md\:group-hover\:bg-orange-darker {
+    background-color: #613b1f;
+  }
+
+  .group:hover .md\:group-hover\:bg-orange-dark {
+    background-color: #de751f;
+  }
+
+  .group:hover .md\:group-hover\:bg-orange {
+    background-color: #f6993f;
+  }
+
+  .group:hover .md\:group-hover\:bg-orange-light {
+    background-color: #faad63;
+  }
+
+  .group:hover .md\:group-hover\:bg-orange-lighter {
+    background-color: #fcd9b6;
+  }
+
+  .group:hover .md\:group-hover\:bg-orange-lightest {
+    background-color: #fff5eb;
+  }
+
+  .group:hover .md\:group-hover\:bg-yellow-darkest {
+    background-color: #453411;
+  }
+
+  .group:hover .md\:group-hover\:bg-yellow-darker {
+    background-color: #684f1d;
+  }
+
+  .group:hover .md\:group-hover\:bg-yellow-dark {
+    background-color: #f2d024;
+  }
+
+  .group:hover .md\:group-hover\:bg-yellow {
+    background-color: #ffed4a;
+  }
+
+  .group:hover .md\:group-hover\:bg-yellow-light {
+    background-color: #fff382;
+  }
+
+  .group:hover .md\:group-hover\:bg-yellow-lighter {
+    background-color: #fff9c2;
+  }
+
+  .group:hover .md\:group-hover\:bg-yellow-lightest {
+    background-color: #fcfbeb;
+  }
+
+  .group:hover .md\:group-hover\:bg-green-darkest {
+    background-color: #0f2f21;
+  }
+
+  .group:hover .md\:group-hover\:bg-green-darker {
+    background-color: #1a4731;
+  }
+
+  .group:hover .md\:group-hover\:bg-green-dark {
+    background-color: #1f9d55;
+  }
+
+  .group:hover .md\:group-hover\:bg-green {
+    background-color: #38c172;
+  }
+
+  .group:hover .md\:group-hover\:bg-green-light {
+    background-color: #51d88a;
+  }
+
+  .group:hover .md\:group-hover\:bg-green-lighter {
+    background-color: #a2f5bf;
+  }
+
+  .group:hover .md\:group-hover\:bg-green-lightest {
+    background-color: #e3fcec;
+  }
+
+  .group:hover .md\:group-hover\:bg-teal-darkest {
+    background-color: #0d3331;
+  }
+
+  .group:hover .md\:group-hover\:bg-teal-darker {
+    background-color: #20504f;
+  }
+
+  .group:hover .md\:group-hover\:bg-teal-dark {
+    background-color: #38a89d;
+  }
+
+  .group:hover .md\:group-hover\:bg-teal {
+    background-color: #4dc0b5;
+  }
+
+  .group:hover .md\:group-hover\:bg-teal-light {
+    background-color: #64d5ca;
+  }
+
+  .group:hover .md\:group-hover\:bg-teal-lighter {
+    background-color: #a0f0ed;
+  }
+
+  .group:hover .md\:group-hover\:bg-teal-lightest {
+    background-color: #e8fffe;
+  }
+
+  .group:hover .md\:group-hover\:bg-blue-darkest {
+    background-color: #12283a;
+  }
+
+  .group:hover .md\:group-hover\:bg-blue-darker {
+    background-color: #1c3d5a;
+  }
+
+  .group:hover .md\:group-hover\:bg-blue-dark {
+    background-color: #2779bd;
+  }
+
+  .group:hover .md\:group-hover\:bg-blue {
+    background-color: #3490dc;
+  }
+
+  .group:hover .md\:group-hover\:bg-blue-light {
+    background-color: #6cb2eb;
+  }
+
+  .group:hover .md\:group-hover\:bg-blue-lighter {
+    background-color: #bcdefa;
+  }
+
+  .group:hover .md\:group-hover\:bg-blue-lightest {
+    background-color: #eff8ff;
+  }
+
+  .group:hover .md\:group-hover\:bg-indigo-darkest {
+    background-color: #191e38;
+  }
+
+  .group:hover .md\:group-hover\:bg-indigo-darker {
+    background-color: #2f365f;
+  }
+
+  .group:hover .md\:group-hover\:bg-indigo-dark {
+    background-color: #5661b3;
+  }
+
+  .group:hover .md\:group-hover\:bg-indigo {
+    background-color: #6574cd;
+  }
+
+  .group:hover .md\:group-hover\:bg-indigo-light {
+    background-color: #7886d7;
+  }
+
+  .group:hover .md\:group-hover\:bg-indigo-lighter {
+    background-color: #b2b7ff;
+  }
+
+  .group:hover .md\:group-hover\:bg-indigo-lightest {
+    background-color: #e6e8ff;
+  }
+
+  .group:hover .md\:group-hover\:bg-purple-darkest {
+    background-color: #21183c;
+  }
+
+  .group:hover .md\:group-hover\:bg-purple-darker {
+    background-color: #382b5f;
+  }
+
+  .group:hover .md\:group-hover\:bg-purple-dark {
+    background-color: #794acf;
+  }
+
+  .group:hover .md\:group-hover\:bg-purple {
+    background-color: #9561e2;
+  }
+
+  .group:hover .md\:group-hover\:bg-purple-light {
+    background-color: #a779e9;
+  }
+
+  .group:hover .md\:group-hover\:bg-purple-lighter {
+    background-color: #d6bbfc;
+  }
+
+  .group:hover .md\:group-hover\:bg-purple-lightest {
+    background-color: #f3ebff;
+  }
+
+  .group:hover .md\:group-hover\:bg-pink-darkest {
+    background-color: #451225;
+  }
+
+  .group:hover .md\:group-hover\:bg-pink-darker {
+    background-color: #6f213f;
+  }
+
+  .group:hover .md\:group-hover\:bg-pink-dark {
+    background-color: #eb5286;
+  }
+
+  .group:hover .md\:group-hover\:bg-pink {
+    background-color: #f66d9b;
+  }
+
+  .group:hover .md\:group-hover\:bg-pink-light {
+    background-color: #fa7ea8;
+  }
+
+  .group:hover .md\:group-hover\:bg-pink-lighter {
+    background-color: #ffbbca;
+  }
+
+  .group:hover .md\:group-hover\:bg-pink-lightest {
+    background-color: #ffebef;
+  }
+
   .md\:hover\:bg-transparent:hover {
     background-color: transparent;
   }
@@ -12875,6 +14335,298 @@ table {
     color: #ffebef;
   }
 
+  .group:hover .md\:group-hover\:text-transparent {
+    color: transparent;
+  }
+
+  .group:hover .md\:group-hover\:text-black {
+    color: #212121;
+  }
+
+  .group:hover .md\:group-hover\:text-grey-darkest {
+    color: #3d4852;
+  }
+
+  .group:hover .md\:group-hover\:text-grey-darker {
+    color: #606f7b;
+  }
+
+  .group:hover .md\:group-hover\:text-grey-dark {
+    color: #8795a1;
+  }
+
+  .group:hover .md\:group-hover\:text-grey {
+    color: #b8c2cc;
+  }
+
+  .group:hover .md\:group-hover\:text-grey-light {
+    color: #dae1e7;
+  }
+
+  .group:hover .md\:group-hover\:text-grey-lighter {
+    color: #f1f5f8;
+  }
+
+  .group:hover .md\:group-hover\:text-grey-lightest {
+    color: #f8fafc;
+  }
+
+  .group:hover .md\:group-hover\:text-white {
+    color: #fff;
+  }
+
+  .group:hover .md\:group-hover\:text-red-darkest {
+    color: #3b0d0c;
+  }
+
+  .group:hover .md\:group-hover\:text-red-darker {
+    color: #621b18;
+  }
+
+  .group:hover .md\:group-hover\:text-red-dark {
+    color: #cc1f1a;
+  }
+
+  .group:hover .md\:group-hover\:text-red {
+    color: #e3342f;
+  }
+
+  .group:hover .md\:group-hover\:text-red-light {
+    color: #ef5753;
+  }
+
+  .group:hover .md\:group-hover\:text-red-lighter {
+    color: #f9acaa;
+  }
+
+  .group:hover .md\:group-hover\:text-red-lightest {
+    color: #fcebea;
+  }
+
+  .group:hover .md\:group-hover\:text-orange-darkest {
+    color: #462a16;
+  }
+
+  .group:hover .md\:group-hover\:text-orange-darker {
+    color: #613b1f;
+  }
+
+  .group:hover .md\:group-hover\:text-orange-dark {
+    color: #de751f;
+  }
+
+  .group:hover .md\:group-hover\:text-orange {
+    color: #f6993f;
+  }
+
+  .group:hover .md\:group-hover\:text-orange-light {
+    color: #faad63;
+  }
+
+  .group:hover .md\:group-hover\:text-orange-lighter {
+    color: #fcd9b6;
+  }
+
+  .group:hover .md\:group-hover\:text-orange-lightest {
+    color: #fff5eb;
+  }
+
+  .group:hover .md\:group-hover\:text-yellow-darkest {
+    color: #453411;
+  }
+
+  .group:hover .md\:group-hover\:text-yellow-darker {
+    color: #684f1d;
+  }
+
+  .group:hover .md\:group-hover\:text-yellow-dark {
+    color: #f2d024;
+  }
+
+  .group:hover .md\:group-hover\:text-yellow {
+    color: #ffed4a;
+  }
+
+  .group:hover .md\:group-hover\:text-yellow-light {
+    color: #fff382;
+  }
+
+  .group:hover .md\:group-hover\:text-yellow-lighter {
+    color: #fff9c2;
+  }
+
+  .group:hover .md\:group-hover\:text-yellow-lightest {
+    color: #fcfbeb;
+  }
+
+  .group:hover .md\:group-hover\:text-green-darkest {
+    color: #0f2f21;
+  }
+
+  .group:hover .md\:group-hover\:text-green-darker {
+    color: #1a4731;
+  }
+
+  .group:hover .md\:group-hover\:text-green-dark {
+    color: #1f9d55;
+  }
+
+  .group:hover .md\:group-hover\:text-green {
+    color: #38c172;
+  }
+
+  .group:hover .md\:group-hover\:text-green-light {
+    color: #51d88a;
+  }
+
+  .group:hover .md\:group-hover\:text-green-lighter {
+    color: #a2f5bf;
+  }
+
+  .group:hover .md\:group-hover\:text-green-lightest {
+    color: #e3fcec;
+  }
+
+  .group:hover .md\:group-hover\:text-teal-darkest {
+    color: #0d3331;
+  }
+
+  .group:hover .md\:group-hover\:text-teal-darker {
+    color: #20504f;
+  }
+
+  .group:hover .md\:group-hover\:text-teal-dark {
+    color: #38a89d;
+  }
+
+  .group:hover .md\:group-hover\:text-teal {
+    color: #4dc0b5;
+  }
+
+  .group:hover .md\:group-hover\:text-teal-light {
+    color: #64d5ca;
+  }
+
+  .group:hover .md\:group-hover\:text-teal-lighter {
+    color: #a0f0ed;
+  }
+
+  .group:hover .md\:group-hover\:text-teal-lightest {
+    color: #e8fffe;
+  }
+
+  .group:hover .md\:group-hover\:text-blue-darkest {
+    color: #12283a;
+  }
+
+  .group:hover .md\:group-hover\:text-blue-darker {
+    color: #1c3d5a;
+  }
+
+  .group:hover .md\:group-hover\:text-blue-dark {
+    color: #2779bd;
+  }
+
+  .group:hover .md\:group-hover\:text-blue {
+    color: #3490dc;
+  }
+
+  .group:hover .md\:group-hover\:text-blue-light {
+    color: #6cb2eb;
+  }
+
+  .group:hover .md\:group-hover\:text-blue-lighter {
+    color: #bcdefa;
+  }
+
+  .group:hover .md\:group-hover\:text-blue-lightest {
+    color: #eff8ff;
+  }
+
+  .group:hover .md\:group-hover\:text-indigo-darkest {
+    color: #191e38;
+  }
+
+  .group:hover .md\:group-hover\:text-indigo-darker {
+    color: #2f365f;
+  }
+
+  .group:hover .md\:group-hover\:text-indigo-dark {
+    color: #5661b3;
+  }
+
+  .group:hover .md\:group-hover\:text-indigo {
+    color: #6574cd;
+  }
+
+  .group:hover .md\:group-hover\:text-indigo-light {
+    color: #7886d7;
+  }
+
+  .group:hover .md\:group-hover\:text-indigo-lighter {
+    color: #b2b7ff;
+  }
+
+  .group:hover .md\:group-hover\:text-indigo-lightest {
+    color: #e6e8ff;
+  }
+
+  .group:hover .md\:group-hover\:text-purple-darkest {
+    color: #21183c;
+  }
+
+  .group:hover .md\:group-hover\:text-purple-darker {
+    color: #382b5f;
+  }
+
+  .group:hover .md\:group-hover\:text-purple-dark {
+    color: #794acf;
+  }
+
+  .group:hover .md\:group-hover\:text-purple {
+    color: #9561e2;
+  }
+
+  .group:hover .md\:group-hover\:text-purple-light {
+    color: #a779e9;
+  }
+
+  .group:hover .md\:group-hover\:text-purple-lighter {
+    color: #d6bbfc;
+  }
+
+  .group:hover .md\:group-hover\:text-purple-lightest {
+    color: #f3ebff;
+  }
+
+  .group:hover .md\:group-hover\:text-pink-darkest {
+    color: #451225;
+  }
+
+  .group:hover .md\:group-hover\:text-pink-darker {
+    color: #6f213f;
+  }
+
+  .group:hover .md\:group-hover\:text-pink-dark {
+    color: #eb5286;
+  }
+
+  .group:hover .md\:group-hover\:text-pink {
+    color: #f66d9b;
+  }
+
+  .group:hover .md\:group-hover\:text-pink-light {
+    color: #fa7ea8;
+  }
+
+  .group:hover .md\:group-hover\:text-pink-lighter {
+    color: #ffbbca;
+  }
+
+  .group:hover .md\:group-hover\:text-pink-lightest {
+    color: #ffebef;
+  }
+
   .md\:hover\:text-transparent:hover {
     color: transparent;
   }
@@ -13836,6 +15588,298 @@ table {
     background-color: #ffebef;
   }
 
+  .group:hover .lg\:group-hover\:bg-transparent {
+    background-color: transparent;
+  }
+
+  .group:hover .lg\:group-hover\:bg-black {
+    background-color: #212121;
+  }
+
+  .group:hover .lg\:group-hover\:bg-grey-darkest {
+    background-color: #3d4852;
+  }
+
+  .group:hover .lg\:group-hover\:bg-grey-darker {
+    background-color: #606f7b;
+  }
+
+  .group:hover .lg\:group-hover\:bg-grey-dark {
+    background-color: #8795a1;
+  }
+
+  .group:hover .lg\:group-hover\:bg-grey {
+    background-color: #b8c2cc;
+  }
+
+  .group:hover .lg\:group-hover\:bg-grey-light {
+    background-color: #dae1e7;
+  }
+
+  .group:hover .lg\:group-hover\:bg-grey-lighter {
+    background-color: #f1f5f8;
+  }
+
+  .group:hover .lg\:group-hover\:bg-grey-lightest {
+    background-color: #f8fafc;
+  }
+
+  .group:hover .lg\:group-hover\:bg-white {
+    background-color: #fff;
+  }
+
+  .group:hover .lg\:group-hover\:bg-red-darkest {
+    background-color: #3b0d0c;
+  }
+
+  .group:hover .lg\:group-hover\:bg-red-darker {
+    background-color: #621b18;
+  }
+
+  .group:hover .lg\:group-hover\:bg-red-dark {
+    background-color: #cc1f1a;
+  }
+
+  .group:hover .lg\:group-hover\:bg-red {
+    background-color: #e3342f;
+  }
+
+  .group:hover .lg\:group-hover\:bg-red-light {
+    background-color: #ef5753;
+  }
+
+  .group:hover .lg\:group-hover\:bg-red-lighter {
+    background-color: #f9acaa;
+  }
+
+  .group:hover .lg\:group-hover\:bg-red-lightest {
+    background-color: #fcebea;
+  }
+
+  .group:hover .lg\:group-hover\:bg-orange-darkest {
+    background-color: #462a16;
+  }
+
+  .group:hover .lg\:group-hover\:bg-orange-darker {
+    background-color: #613b1f;
+  }
+
+  .group:hover .lg\:group-hover\:bg-orange-dark {
+    background-color: #de751f;
+  }
+
+  .group:hover .lg\:group-hover\:bg-orange {
+    background-color: #f6993f;
+  }
+
+  .group:hover .lg\:group-hover\:bg-orange-light {
+    background-color: #faad63;
+  }
+
+  .group:hover .lg\:group-hover\:bg-orange-lighter {
+    background-color: #fcd9b6;
+  }
+
+  .group:hover .lg\:group-hover\:bg-orange-lightest {
+    background-color: #fff5eb;
+  }
+
+  .group:hover .lg\:group-hover\:bg-yellow-darkest {
+    background-color: #453411;
+  }
+
+  .group:hover .lg\:group-hover\:bg-yellow-darker {
+    background-color: #684f1d;
+  }
+
+  .group:hover .lg\:group-hover\:bg-yellow-dark {
+    background-color: #f2d024;
+  }
+
+  .group:hover .lg\:group-hover\:bg-yellow {
+    background-color: #ffed4a;
+  }
+
+  .group:hover .lg\:group-hover\:bg-yellow-light {
+    background-color: #fff382;
+  }
+
+  .group:hover .lg\:group-hover\:bg-yellow-lighter {
+    background-color: #fff9c2;
+  }
+
+  .group:hover .lg\:group-hover\:bg-yellow-lightest {
+    background-color: #fcfbeb;
+  }
+
+  .group:hover .lg\:group-hover\:bg-green-darkest {
+    background-color: #0f2f21;
+  }
+
+  .group:hover .lg\:group-hover\:bg-green-darker {
+    background-color: #1a4731;
+  }
+
+  .group:hover .lg\:group-hover\:bg-green-dark {
+    background-color: #1f9d55;
+  }
+
+  .group:hover .lg\:group-hover\:bg-green {
+    background-color: #38c172;
+  }
+
+  .group:hover .lg\:group-hover\:bg-green-light {
+    background-color: #51d88a;
+  }
+
+  .group:hover .lg\:group-hover\:bg-green-lighter {
+    background-color: #a2f5bf;
+  }
+
+  .group:hover .lg\:group-hover\:bg-green-lightest {
+    background-color: #e3fcec;
+  }
+
+  .group:hover .lg\:group-hover\:bg-teal-darkest {
+    background-color: #0d3331;
+  }
+
+  .group:hover .lg\:group-hover\:bg-teal-darker {
+    background-color: #20504f;
+  }
+
+  .group:hover .lg\:group-hover\:bg-teal-dark {
+    background-color: #38a89d;
+  }
+
+  .group:hover .lg\:group-hover\:bg-teal {
+    background-color: #4dc0b5;
+  }
+
+  .group:hover .lg\:group-hover\:bg-teal-light {
+    background-color: #64d5ca;
+  }
+
+  .group:hover .lg\:group-hover\:bg-teal-lighter {
+    background-color: #a0f0ed;
+  }
+
+  .group:hover .lg\:group-hover\:bg-teal-lightest {
+    background-color: #e8fffe;
+  }
+
+  .group:hover .lg\:group-hover\:bg-blue-darkest {
+    background-color: #12283a;
+  }
+
+  .group:hover .lg\:group-hover\:bg-blue-darker {
+    background-color: #1c3d5a;
+  }
+
+  .group:hover .lg\:group-hover\:bg-blue-dark {
+    background-color: #2779bd;
+  }
+
+  .group:hover .lg\:group-hover\:bg-blue {
+    background-color: #3490dc;
+  }
+
+  .group:hover .lg\:group-hover\:bg-blue-light {
+    background-color: #6cb2eb;
+  }
+
+  .group:hover .lg\:group-hover\:bg-blue-lighter {
+    background-color: #bcdefa;
+  }
+
+  .group:hover .lg\:group-hover\:bg-blue-lightest {
+    background-color: #eff8ff;
+  }
+
+  .group:hover .lg\:group-hover\:bg-indigo-darkest {
+    background-color: #191e38;
+  }
+
+  .group:hover .lg\:group-hover\:bg-indigo-darker {
+    background-color: #2f365f;
+  }
+
+  .group:hover .lg\:group-hover\:bg-indigo-dark {
+    background-color: #5661b3;
+  }
+
+  .group:hover .lg\:group-hover\:bg-indigo {
+    background-color: #6574cd;
+  }
+
+  .group:hover .lg\:group-hover\:bg-indigo-light {
+    background-color: #7886d7;
+  }
+
+  .group:hover .lg\:group-hover\:bg-indigo-lighter {
+    background-color: #b2b7ff;
+  }
+
+  .group:hover .lg\:group-hover\:bg-indigo-lightest {
+    background-color: #e6e8ff;
+  }
+
+  .group:hover .lg\:group-hover\:bg-purple-darkest {
+    background-color: #21183c;
+  }
+
+  .group:hover .lg\:group-hover\:bg-purple-darker {
+    background-color: #382b5f;
+  }
+
+  .group:hover .lg\:group-hover\:bg-purple-dark {
+    background-color: #794acf;
+  }
+
+  .group:hover .lg\:group-hover\:bg-purple {
+    background-color: #9561e2;
+  }
+
+  .group:hover .lg\:group-hover\:bg-purple-light {
+    background-color: #a779e9;
+  }
+
+  .group:hover .lg\:group-hover\:bg-purple-lighter {
+    background-color: #d6bbfc;
+  }
+
+  .group:hover .lg\:group-hover\:bg-purple-lightest {
+    background-color: #f3ebff;
+  }
+
+  .group:hover .lg\:group-hover\:bg-pink-darkest {
+    background-color: #451225;
+  }
+
+  .group:hover .lg\:group-hover\:bg-pink-darker {
+    background-color: #6f213f;
+  }
+
+  .group:hover .lg\:group-hover\:bg-pink-dark {
+    background-color: #eb5286;
+  }
+
+  .group:hover .lg\:group-hover\:bg-pink {
+    background-color: #f66d9b;
+  }
+
+  .group:hover .lg\:group-hover\:bg-pink-light {
+    background-color: #fa7ea8;
+  }
+
+  .group:hover .lg\:group-hover\:bg-pink-lighter {
+    background-color: #ffbbca;
+  }
+
+  .group:hover .lg\:group-hover\:bg-pink-lightest {
+    background-color: #ffebef;
+  }
+
   .lg\:hover\:bg-transparent:hover {
     background-color: transparent;
   }
@@ -17164,6 +19208,298 @@ table {
     color: #ffebef;
   }
 
+  .group:hover .lg\:group-hover\:text-transparent {
+    color: transparent;
+  }
+
+  .group:hover .lg\:group-hover\:text-black {
+    color: #212121;
+  }
+
+  .group:hover .lg\:group-hover\:text-grey-darkest {
+    color: #3d4852;
+  }
+
+  .group:hover .lg\:group-hover\:text-grey-darker {
+    color: #606f7b;
+  }
+
+  .group:hover .lg\:group-hover\:text-grey-dark {
+    color: #8795a1;
+  }
+
+  .group:hover .lg\:group-hover\:text-grey {
+    color: #b8c2cc;
+  }
+
+  .group:hover .lg\:group-hover\:text-grey-light {
+    color: #dae1e7;
+  }
+
+  .group:hover .lg\:group-hover\:text-grey-lighter {
+    color: #f1f5f8;
+  }
+
+  .group:hover .lg\:group-hover\:text-grey-lightest {
+    color: #f8fafc;
+  }
+
+  .group:hover .lg\:group-hover\:text-white {
+    color: #fff;
+  }
+
+  .group:hover .lg\:group-hover\:text-red-darkest {
+    color: #3b0d0c;
+  }
+
+  .group:hover .lg\:group-hover\:text-red-darker {
+    color: #621b18;
+  }
+
+  .group:hover .lg\:group-hover\:text-red-dark {
+    color: #cc1f1a;
+  }
+
+  .group:hover .lg\:group-hover\:text-red {
+    color: #e3342f;
+  }
+
+  .group:hover .lg\:group-hover\:text-red-light {
+    color: #ef5753;
+  }
+
+  .group:hover .lg\:group-hover\:text-red-lighter {
+    color: #f9acaa;
+  }
+
+  .group:hover .lg\:group-hover\:text-red-lightest {
+    color: #fcebea;
+  }
+
+  .group:hover .lg\:group-hover\:text-orange-darkest {
+    color: #462a16;
+  }
+
+  .group:hover .lg\:group-hover\:text-orange-darker {
+    color: #613b1f;
+  }
+
+  .group:hover .lg\:group-hover\:text-orange-dark {
+    color: #de751f;
+  }
+
+  .group:hover .lg\:group-hover\:text-orange {
+    color: #f6993f;
+  }
+
+  .group:hover .lg\:group-hover\:text-orange-light {
+    color: #faad63;
+  }
+
+  .group:hover .lg\:group-hover\:text-orange-lighter {
+    color: #fcd9b6;
+  }
+
+  .group:hover .lg\:group-hover\:text-orange-lightest {
+    color: #fff5eb;
+  }
+
+  .group:hover .lg\:group-hover\:text-yellow-darkest {
+    color: #453411;
+  }
+
+  .group:hover .lg\:group-hover\:text-yellow-darker {
+    color: #684f1d;
+  }
+
+  .group:hover .lg\:group-hover\:text-yellow-dark {
+    color: #f2d024;
+  }
+
+  .group:hover .lg\:group-hover\:text-yellow {
+    color: #ffed4a;
+  }
+
+  .group:hover .lg\:group-hover\:text-yellow-light {
+    color: #fff382;
+  }
+
+  .group:hover .lg\:group-hover\:text-yellow-lighter {
+    color: #fff9c2;
+  }
+
+  .group:hover .lg\:group-hover\:text-yellow-lightest {
+    color: #fcfbeb;
+  }
+
+  .group:hover .lg\:group-hover\:text-green-darkest {
+    color: #0f2f21;
+  }
+
+  .group:hover .lg\:group-hover\:text-green-darker {
+    color: #1a4731;
+  }
+
+  .group:hover .lg\:group-hover\:text-green-dark {
+    color: #1f9d55;
+  }
+
+  .group:hover .lg\:group-hover\:text-green {
+    color: #38c172;
+  }
+
+  .group:hover .lg\:group-hover\:text-green-light {
+    color: #51d88a;
+  }
+
+  .group:hover .lg\:group-hover\:text-green-lighter {
+    color: #a2f5bf;
+  }
+
+  .group:hover .lg\:group-hover\:text-green-lightest {
+    color: #e3fcec;
+  }
+
+  .group:hover .lg\:group-hover\:text-teal-darkest {
+    color: #0d3331;
+  }
+
+  .group:hover .lg\:group-hover\:text-teal-darker {
+    color: #20504f;
+  }
+
+  .group:hover .lg\:group-hover\:text-teal-dark {
+    color: #38a89d;
+  }
+
+  .group:hover .lg\:group-hover\:text-teal {
+    color: #4dc0b5;
+  }
+
+  .group:hover .lg\:group-hover\:text-teal-light {
+    color: #64d5ca;
+  }
+
+  .group:hover .lg\:group-hover\:text-teal-lighter {
+    color: #a0f0ed;
+  }
+
+  .group:hover .lg\:group-hover\:text-teal-lightest {
+    color: #e8fffe;
+  }
+
+  .group:hover .lg\:group-hover\:text-blue-darkest {
+    color: #12283a;
+  }
+
+  .group:hover .lg\:group-hover\:text-blue-darker {
+    color: #1c3d5a;
+  }
+
+  .group:hover .lg\:group-hover\:text-blue-dark {
+    color: #2779bd;
+  }
+
+  .group:hover .lg\:group-hover\:text-blue {
+    color: #3490dc;
+  }
+
+  .group:hover .lg\:group-hover\:text-blue-light {
+    color: #6cb2eb;
+  }
+
+  .group:hover .lg\:group-hover\:text-blue-lighter {
+    color: #bcdefa;
+  }
+
+  .group:hover .lg\:group-hover\:text-blue-lightest {
+    color: #eff8ff;
+  }
+
+  .group:hover .lg\:group-hover\:text-indigo-darkest {
+    color: #191e38;
+  }
+
+  .group:hover .lg\:group-hover\:text-indigo-darker {
+    color: #2f365f;
+  }
+
+  .group:hover .lg\:group-hover\:text-indigo-dark {
+    color: #5661b3;
+  }
+
+  .group:hover .lg\:group-hover\:text-indigo {
+    color: #6574cd;
+  }
+
+  .group:hover .lg\:group-hover\:text-indigo-light {
+    color: #7886d7;
+  }
+
+  .group:hover .lg\:group-hover\:text-indigo-lighter {
+    color: #b2b7ff;
+  }
+
+  .group:hover .lg\:group-hover\:text-indigo-lightest {
+    color: #e6e8ff;
+  }
+
+  .group:hover .lg\:group-hover\:text-purple-darkest {
+    color: #21183c;
+  }
+
+  .group:hover .lg\:group-hover\:text-purple-darker {
+    color: #382b5f;
+  }
+
+  .group:hover .lg\:group-hover\:text-purple-dark {
+    color: #794acf;
+  }
+
+  .group:hover .lg\:group-hover\:text-purple {
+    color: #9561e2;
+  }
+
+  .group:hover .lg\:group-hover\:text-purple-light {
+    color: #a779e9;
+  }
+
+  .group:hover .lg\:group-hover\:text-purple-lighter {
+    color: #d6bbfc;
+  }
+
+  .group:hover .lg\:group-hover\:text-purple-lightest {
+    color: #f3ebff;
+  }
+
+  .group:hover .lg\:group-hover\:text-pink-darkest {
+    color: #451225;
+  }
+
+  .group:hover .lg\:group-hover\:text-pink-darker {
+    color: #6f213f;
+  }
+
+  .group:hover .lg\:group-hover\:text-pink-dark {
+    color: #eb5286;
+  }
+
+  .group:hover .lg\:group-hover\:text-pink {
+    color: #f66d9b;
+  }
+
+  .group:hover .lg\:group-hover\:text-pink-light {
+    color: #fa7ea8;
+  }
+
+  .group:hover .lg\:group-hover\:text-pink-lighter {
+    color: #ffbbca;
+  }
+
+  .group:hover .lg\:group-hover\:text-pink-lightest {
+    color: #ffebef;
+  }
+
   .lg\:hover\:text-transparent:hover {
     color: transparent;
   }
@@ -18125,6 +20461,298 @@ table {
     background-color: #ffebef;
   }
 
+  .group:hover .xl\:group-hover\:bg-transparent {
+    background-color: transparent;
+  }
+
+  .group:hover .xl\:group-hover\:bg-black {
+    background-color: #212121;
+  }
+
+  .group:hover .xl\:group-hover\:bg-grey-darkest {
+    background-color: #3d4852;
+  }
+
+  .group:hover .xl\:group-hover\:bg-grey-darker {
+    background-color: #606f7b;
+  }
+
+  .group:hover .xl\:group-hover\:bg-grey-dark {
+    background-color: #8795a1;
+  }
+
+  .group:hover .xl\:group-hover\:bg-grey {
+    background-color: #b8c2cc;
+  }
+
+  .group:hover .xl\:group-hover\:bg-grey-light {
+    background-color: #dae1e7;
+  }
+
+  .group:hover .xl\:group-hover\:bg-grey-lighter {
+    background-color: #f1f5f8;
+  }
+
+  .group:hover .xl\:group-hover\:bg-grey-lightest {
+    background-color: #f8fafc;
+  }
+
+  .group:hover .xl\:group-hover\:bg-white {
+    background-color: #fff;
+  }
+
+  .group:hover .xl\:group-hover\:bg-red-darkest {
+    background-color: #3b0d0c;
+  }
+
+  .group:hover .xl\:group-hover\:bg-red-darker {
+    background-color: #621b18;
+  }
+
+  .group:hover .xl\:group-hover\:bg-red-dark {
+    background-color: #cc1f1a;
+  }
+
+  .group:hover .xl\:group-hover\:bg-red {
+    background-color: #e3342f;
+  }
+
+  .group:hover .xl\:group-hover\:bg-red-light {
+    background-color: #ef5753;
+  }
+
+  .group:hover .xl\:group-hover\:bg-red-lighter {
+    background-color: #f9acaa;
+  }
+
+  .group:hover .xl\:group-hover\:bg-red-lightest {
+    background-color: #fcebea;
+  }
+
+  .group:hover .xl\:group-hover\:bg-orange-darkest {
+    background-color: #462a16;
+  }
+
+  .group:hover .xl\:group-hover\:bg-orange-darker {
+    background-color: #613b1f;
+  }
+
+  .group:hover .xl\:group-hover\:bg-orange-dark {
+    background-color: #de751f;
+  }
+
+  .group:hover .xl\:group-hover\:bg-orange {
+    background-color: #f6993f;
+  }
+
+  .group:hover .xl\:group-hover\:bg-orange-light {
+    background-color: #faad63;
+  }
+
+  .group:hover .xl\:group-hover\:bg-orange-lighter {
+    background-color: #fcd9b6;
+  }
+
+  .group:hover .xl\:group-hover\:bg-orange-lightest {
+    background-color: #fff5eb;
+  }
+
+  .group:hover .xl\:group-hover\:bg-yellow-darkest {
+    background-color: #453411;
+  }
+
+  .group:hover .xl\:group-hover\:bg-yellow-darker {
+    background-color: #684f1d;
+  }
+
+  .group:hover .xl\:group-hover\:bg-yellow-dark {
+    background-color: #f2d024;
+  }
+
+  .group:hover .xl\:group-hover\:bg-yellow {
+    background-color: #ffed4a;
+  }
+
+  .group:hover .xl\:group-hover\:bg-yellow-light {
+    background-color: #fff382;
+  }
+
+  .group:hover .xl\:group-hover\:bg-yellow-lighter {
+    background-color: #fff9c2;
+  }
+
+  .group:hover .xl\:group-hover\:bg-yellow-lightest {
+    background-color: #fcfbeb;
+  }
+
+  .group:hover .xl\:group-hover\:bg-green-darkest {
+    background-color: #0f2f21;
+  }
+
+  .group:hover .xl\:group-hover\:bg-green-darker {
+    background-color: #1a4731;
+  }
+
+  .group:hover .xl\:group-hover\:bg-green-dark {
+    background-color: #1f9d55;
+  }
+
+  .group:hover .xl\:group-hover\:bg-green {
+    background-color: #38c172;
+  }
+
+  .group:hover .xl\:group-hover\:bg-green-light {
+    background-color: #51d88a;
+  }
+
+  .group:hover .xl\:group-hover\:bg-green-lighter {
+    background-color: #a2f5bf;
+  }
+
+  .group:hover .xl\:group-hover\:bg-green-lightest {
+    background-color: #e3fcec;
+  }
+
+  .group:hover .xl\:group-hover\:bg-teal-darkest {
+    background-color: #0d3331;
+  }
+
+  .group:hover .xl\:group-hover\:bg-teal-darker {
+    background-color: #20504f;
+  }
+
+  .group:hover .xl\:group-hover\:bg-teal-dark {
+    background-color: #38a89d;
+  }
+
+  .group:hover .xl\:group-hover\:bg-teal {
+    background-color: #4dc0b5;
+  }
+
+  .group:hover .xl\:group-hover\:bg-teal-light {
+    background-color: #64d5ca;
+  }
+
+  .group:hover .xl\:group-hover\:bg-teal-lighter {
+    background-color: #a0f0ed;
+  }
+
+  .group:hover .xl\:group-hover\:bg-teal-lightest {
+    background-color: #e8fffe;
+  }
+
+  .group:hover .xl\:group-hover\:bg-blue-darkest {
+    background-color: #12283a;
+  }
+
+  .group:hover .xl\:group-hover\:bg-blue-darker {
+    background-color: #1c3d5a;
+  }
+
+  .group:hover .xl\:group-hover\:bg-blue-dark {
+    background-color: #2779bd;
+  }
+
+  .group:hover .xl\:group-hover\:bg-blue {
+    background-color: #3490dc;
+  }
+
+  .group:hover .xl\:group-hover\:bg-blue-light {
+    background-color: #6cb2eb;
+  }
+
+  .group:hover .xl\:group-hover\:bg-blue-lighter {
+    background-color: #bcdefa;
+  }
+
+  .group:hover .xl\:group-hover\:bg-blue-lightest {
+    background-color: #eff8ff;
+  }
+
+  .group:hover .xl\:group-hover\:bg-indigo-darkest {
+    background-color: #191e38;
+  }
+
+  .group:hover .xl\:group-hover\:bg-indigo-darker {
+    background-color: #2f365f;
+  }
+
+  .group:hover .xl\:group-hover\:bg-indigo-dark {
+    background-color: #5661b3;
+  }
+
+  .group:hover .xl\:group-hover\:bg-indigo {
+    background-color: #6574cd;
+  }
+
+  .group:hover .xl\:group-hover\:bg-indigo-light {
+    background-color: #7886d7;
+  }
+
+  .group:hover .xl\:group-hover\:bg-indigo-lighter {
+    background-color: #b2b7ff;
+  }
+
+  .group:hover .xl\:group-hover\:bg-indigo-lightest {
+    background-color: #e6e8ff;
+  }
+
+  .group:hover .xl\:group-hover\:bg-purple-darkest {
+    background-color: #21183c;
+  }
+
+  .group:hover .xl\:group-hover\:bg-purple-darker {
+    background-color: #382b5f;
+  }
+
+  .group:hover .xl\:group-hover\:bg-purple-dark {
+    background-color: #794acf;
+  }
+
+  .group:hover .xl\:group-hover\:bg-purple {
+    background-color: #9561e2;
+  }
+
+  .group:hover .xl\:group-hover\:bg-purple-light {
+    background-color: #a779e9;
+  }
+
+  .group:hover .xl\:group-hover\:bg-purple-lighter {
+    background-color: #d6bbfc;
+  }
+
+  .group:hover .xl\:group-hover\:bg-purple-lightest {
+    background-color: #f3ebff;
+  }
+
+  .group:hover .xl\:group-hover\:bg-pink-darkest {
+    background-color: #451225;
+  }
+
+  .group:hover .xl\:group-hover\:bg-pink-darker {
+    background-color: #6f213f;
+  }
+
+  .group:hover .xl\:group-hover\:bg-pink-dark {
+    background-color: #eb5286;
+  }
+
+  .group:hover .xl\:group-hover\:bg-pink {
+    background-color: #f66d9b;
+  }
+
+  .group:hover .xl\:group-hover\:bg-pink-light {
+    background-color: #fa7ea8;
+  }
+
+  .group:hover .xl\:group-hover\:bg-pink-lighter {
+    background-color: #ffbbca;
+  }
+
+  .group:hover .xl\:group-hover\:bg-pink-lightest {
+    background-color: #ffebef;
+  }
+
   .xl\:hover\:bg-transparent:hover {
     background-color: transparent;
   }
@@ -21453,6 +24081,298 @@ table {
     color: #ffebef;
   }
 
+  .group:hover .xl\:group-hover\:text-transparent {
+    color: transparent;
+  }
+
+  .group:hover .xl\:group-hover\:text-black {
+    color: #212121;
+  }
+
+  .group:hover .xl\:group-hover\:text-grey-darkest {
+    color: #3d4852;
+  }
+
+  .group:hover .xl\:group-hover\:text-grey-darker {
+    color: #606f7b;
+  }
+
+  .group:hover .xl\:group-hover\:text-grey-dark {
+    color: #8795a1;
+  }
+
+  .group:hover .xl\:group-hover\:text-grey {
+    color: #b8c2cc;
+  }
+
+  .group:hover .xl\:group-hover\:text-grey-light {
+    color: #dae1e7;
+  }
+
+  .group:hover .xl\:group-hover\:text-grey-lighter {
+    color: #f1f5f8;
+  }
+
+  .group:hover .xl\:group-hover\:text-grey-lightest {
+    color: #f8fafc;
+  }
+
+  .group:hover .xl\:group-hover\:text-white {
+    color: #fff;
+  }
+
+  .group:hover .xl\:group-hover\:text-red-darkest {
+    color: #3b0d0c;
+  }
+
+  .group:hover .xl\:group-hover\:text-red-darker {
+    color: #621b18;
+  }
+
+  .group:hover .xl\:group-hover\:text-red-dark {
+    color: #cc1f1a;
+  }
+
+  .group:hover .xl\:group-hover\:text-red {
+    color: #e3342f;
+  }
+
+  .group:hover .xl\:group-hover\:text-red-light {
+    color: #ef5753;
+  }
+
+  .group:hover .xl\:group-hover\:text-red-lighter {
+    color: #f9acaa;
+  }
+
+  .group:hover .xl\:group-hover\:text-red-lightest {
+    color: #fcebea;
+  }
+
+  .group:hover .xl\:group-hover\:text-orange-darkest {
+    color: #462a16;
+  }
+
+  .group:hover .xl\:group-hover\:text-orange-darker {
+    color: #613b1f;
+  }
+
+  .group:hover .xl\:group-hover\:text-orange-dark {
+    color: #de751f;
+  }
+
+  .group:hover .xl\:group-hover\:text-orange {
+    color: #f6993f;
+  }
+
+  .group:hover .xl\:group-hover\:text-orange-light {
+    color: #faad63;
+  }
+
+  .group:hover .xl\:group-hover\:text-orange-lighter {
+    color: #fcd9b6;
+  }
+
+  .group:hover .xl\:group-hover\:text-orange-lightest {
+    color: #fff5eb;
+  }
+
+  .group:hover .xl\:group-hover\:text-yellow-darkest {
+    color: #453411;
+  }
+
+  .group:hover .xl\:group-hover\:text-yellow-darker {
+    color: #684f1d;
+  }
+
+  .group:hover .xl\:group-hover\:text-yellow-dark {
+    color: #f2d024;
+  }
+
+  .group:hover .xl\:group-hover\:text-yellow {
+    color: #ffed4a;
+  }
+
+  .group:hover .xl\:group-hover\:text-yellow-light {
+    color: #fff382;
+  }
+
+  .group:hover .xl\:group-hover\:text-yellow-lighter {
+    color: #fff9c2;
+  }
+
+  .group:hover .xl\:group-hover\:text-yellow-lightest {
+    color: #fcfbeb;
+  }
+
+  .group:hover .xl\:group-hover\:text-green-darkest {
+    color: #0f2f21;
+  }
+
+  .group:hover .xl\:group-hover\:text-green-darker {
+    color: #1a4731;
+  }
+
+  .group:hover .xl\:group-hover\:text-green-dark {
+    color: #1f9d55;
+  }
+
+  .group:hover .xl\:group-hover\:text-green {
+    color: #38c172;
+  }
+
+  .group:hover .xl\:group-hover\:text-green-light {
+    color: #51d88a;
+  }
+
+  .group:hover .xl\:group-hover\:text-green-lighter {
+    color: #a2f5bf;
+  }
+
+  .group:hover .xl\:group-hover\:text-green-lightest {
+    color: #e3fcec;
+  }
+
+  .group:hover .xl\:group-hover\:text-teal-darkest {
+    color: #0d3331;
+  }
+
+  .group:hover .xl\:group-hover\:text-teal-darker {
+    color: #20504f;
+  }
+
+  .group:hover .xl\:group-hover\:text-teal-dark {
+    color: #38a89d;
+  }
+
+  .group:hover .xl\:group-hover\:text-teal {
+    color: #4dc0b5;
+  }
+
+  .group:hover .xl\:group-hover\:text-teal-light {
+    color: #64d5ca;
+  }
+
+  .group:hover .xl\:group-hover\:text-teal-lighter {
+    color: #a0f0ed;
+  }
+
+  .group:hover .xl\:group-hover\:text-teal-lightest {
+    color: #e8fffe;
+  }
+
+  .group:hover .xl\:group-hover\:text-blue-darkest {
+    color: #12283a;
+  }
+
+  .group:hover .xl\:group-hover\:text-blue-darker {
+    color: #1c3d5a;
+  }
+
+  .group:hover .xl\:group-hover\:text-blue-dark {
+    color: #2779bd;
+  }
+
+  .group:hover .xl\:group-hover\:text-blue {
+    color: #3490dc;
+  }
+
+  .group:hover .xl\:group-hover\:text-blue-light {
+    color: #6cb2eb;
+  }
+
+  .group:hover .xl\:group-hover\:text-blue-lighter {
+    color: #bcdefa;
+  }
+
+  .group:hover .xl\:group-hover\:text-blue-lightest {
+    color: #eff8ff;
+  }
+
+  .group:hover .xl\:group-hover\:text-indigo-darkest {
+    color: #191e38;
+  }
+
+  .group:hover .xl\:group-hover\:text-indigo-darker {
+    color: #2f365f;
+  }
+
+  .group:hover .xl\:group-hover\:text-indigo-dark {
+    color: #5661b3;
+  }
+
+  .group:hover .xl\:group-hover\:text-indigo {
+    color: #6574cd;
+  }
+
+  .group:hover .xl\:group-hover\:text-indigo-light {
+    color: #7886d7;
+  }
+
+  .group:hover .xl\:group-hover\:text-indigo-lighter {
+    color: #b2b7ff;
+  }
+
+  .group:hover .xl\:group-hover\:text-indigo-lightest {
+    color: #e6e8ff;
+  }
+
+  .group:hover .xl\:group-hover\:text-purple-darkest {
+    color: #21183c;
+  }
+
+  .group:hover .xl\:group-hover\:text-purple-darker {
+    color: #382b5f;
+  }
+
+  .group:hover .xl\:group-hover\:text-purple-dark {
+    color: #794acf;
+  }
+
+  .group:hover .xl\:group-hover\:text-purple {
+    color: #9561e2;
+  }
+
+  .group:hover .xl\:group-hover\:text-purple-light {
+    color: #a779e9;
+  }
+
+  .group:hover .xl\:group-hover\:text-purple-lighter {
+    color: #d6bbfc;
+  }
+
+  .group:hover .xl\:group-hover\:text-purple-lightest {
+    color: #f3ebff;
+  }
+
+  .group:hover .xl\:group-hover\:text-pink-darkest {
+    color: #451225;
+  }
+
+  .group:hover .xl\:group-hover\:text-pink-darker {
+    color: #6f213f;
+  }
+
+  .group:hover .xl\:group-hover\:text-pink-dark {
+    color: #eb5286;
+  }
+
+  .group:hover .xl\:group-hover\:text-pink {
+    color: #f66d9b;
+  }
+
+  .group:hover .xl\:group-hover\:text-pink-light {
+    color: #fa7ea8;
+  }
+
+  .group:hover .xl\:group-hover\:text-pink-lighter {
+    color: #ffbbca;
+  }
+
+  .group:hover .xl\:group-hover\:text-pink-lightest {
+    color: #ffebef;
+  }
+
   .xl\:hover\:text-transparent:hover {
     color: transparent;
   }
diff --git a/tailwind.config.js b/tailwind.config.js
index 0d7a7c9..5e937ba 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -838,7 +838,7 @@ module.exports = {
   modules: {
     appearance: ['responsive'],
     backgroundAttachment: ['responsive'],
-    backgroundColors: ['responsive', 'hover'],
+    backgroundColors: ['responsive', 'hover', 'group-hover'],
     backgroundPosition: ['responsive'],
     backgroundRepeat: ['responsive'],
     backgroundSize: ['responsive'],
@@ -871,7 +871,7 @@ module.exports = {
     svgFill: [],
     svgStroke: [],
     textAlign: ['responsive'],
-    textColors: ['responsive', 'hover'],
+    textColors: ['responsive', 'hover', 'group-hover'],
     textSizes: ['responsive'],
     textStyle: ['responsive', 'hover'],
     tracking: ['responsive'],