From adbee9409f1974816a21cc662249cff3ff32f991 Mon Sep 17 00:00:00 2001
From: Vojtech Mares <iam@vojtechmares.com>
Date: Mon, 9 Jan 2023 11:00:26 +0100
Subject: [PATCH] feat(hero): add company logos

---
 components/Hero.tsx      | 87 ++++++++++++++++++++++------------------
 images/logos/digitoo.svg |  1 +
 images/logos/glami.svg   |  1 +
 3 files changed, 51 insertions(+), 38 deletions(-)
 create mode 100644 images/logos/digitoo.svg
 create mode 100644 images/logos/glami.svg

diff --git a/components/Hero.tsx b/components/Hero.tsx
index f4b4714..d250cfa 100644
--- a/components/Hero.tsx
+++ b/components/Hero.tsx
@@ -1,9 +1,27 @@
-import Image from "next/image";
+import Image, { type StaticImageData } from "next/image";
 
 import { Button } from "@/components/Button";
 import { Container } from "@/components/Container";
 
 import avatarVojtechMares from "@/images/avatars/vojtech-mares.png";
+import logoGLAMI from "@/images/logos/glami.svg";
+import logoDigitoo from "@/images/logos/digitoo.svg";
+
+type Company = {
+  name: string;
+  logo: StaticImageData;
+}
+
+type CompanyList = Company[][]; // rows, three items per row
+
+const companies: CompanyList = [
+  [
+    { name: 'GLAMI', logo: logoGLAMI },
+    { name: 'Digitoo', logo: logoDigitoo },
+  ],
+  // [], // columns for mobile view - 3 items per row
+];
+
 
 export function Hero() {
   return (
@@ -42,47 +60,40 @@ export function Hero() {
                 Napište mi email
               </Button>
             </div>
+            <div className="mt-10 "> {/* mt-36 lg:mt-44 */}
+              <p className="font-display text-lg tracking-tight text-slate-900">
+                Moji spokojení klienti, přidejte se k nim i Vy.
+              </p>
+              <ul
+                role="list"
+                className="mt-4 flex items-center justify-center gap-x-8 sm:justify-start sm:flex-col sm:gap-x-0 sm:gap-y-10 xl:flex-row xl:gap-x-12 xl:gap-y-0"
+              >
+                {companies.map((group, groupIndex) => (
+                  <li key={groupIndex}>
+                    <ul
+                      role="list"
+                      className="flex flex-col items-center justify-center gap-y-8 sm:justify-start sm:flex-row sm:gap-x-12 sm:gap-y-0"
+                    >
+                      {group.map((company) => (
+                        <li key={company.name} className="flex">
+                          <Image
+                            className="h-16 object-scale-down"
+                            src={company.logo}
+                            alt={company.name}
+                            width={128}
+                            height={64}
+                          />
+                        </li>
+                      ))}
+                    </ul>
+                  </li>
+                ))}
+              </ul>
+            </div>
           </div>
           <Image className="pt-10 md:pt-0" width={400} height={800} src={avatarVojtechMares} alt="Vojtěch Mareš" />
         </div>
       </Container>
-      <Container>
-        {/* <div className="mt-36 lg:mt-44">
-          <p className="font-display text-base text-slate-900">
-            Trusted by these six companies so far
-          </p>
-          <ul
-            role="list"
-            className="mt-8 flex items-center justify-center gap-x-8 sm:flex-col sm:gap-x-0 sm:gap-y-10 xl:flex-row xl:gap-x-12 xl:gap-y-0"
-          >
-            {[
-              [
-                { name: 'Transistor', logo: logoTransistor },
-                { name: 'Tuple', logo: logoTuple },
-                { name: 'StaticKit', logo: logoStaticKit },
-              ],
-              [
-                { name: 'Mirage', logo: logoMirage },
-                { name: 'Laravel', logo: logoLaravel },
-                { name: 'Statamic', logo: logoStatamic },
-              ],
-            ].map((group, groupIndex) => (
-              <li key={groupIndex}>
-                <ul
-                  role="list"
-                  className="flex flex-col items-center gap-y-8 sm:flex-row sm:gap-x-12 sm:gap-y-0"
-                >
-                  {group.map((company) => (
-                    <li key={company.name} className="flex">
-                      <Image src={company.logo} alt={company.name} unoptimized />
-                    </li>
-                  ))}
-                </ul>
-              </li>
-            ))}
-          </ul>
-        </div> */}
-      </Container>
     </>
   );
 }
diff --git a/images/logos/digitoo.svg b/images/logos/digitoo.svg
new file mode 100644
index 0000000..907fa25
--- /dev/null
+++ b/images/logos/digitoo.svg
@@ -0,0 +1 @@
+<svg data-v-2e6ed387="" width="126" height="40" viewBox="0 0 126 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon"><path fill-rule="evenodd" clip-rule="evenodd" d="M92.1005 23.4273C89.372 23.4273 87.1602 21.0852 87.1602 18.1967C87.1602 15.3081 89.372 12.9664 92.1005 12.9664C94.829 12.9664 97.0407 15.3081 97.0407 18.1967C97.0407 21.0852 94.829 23.4273 92.1005 23.4273ZM92.1006 7.8418C86.3864 7.8418 81.7539 12.478 81.7539 18.1967C81.7539 23.9157 86.3864 28.5516 92.1006 28.5516C97.8147 28.5516 102.447 23.9157 102.447 18.1967C102.447 12.478 97.8147 7.8418 92.1006 7.8418Z" fill="#0065EF" class="o-1" data-svg-origin="103.35389862060546 18.141800212860108" transform="matrix(1,0,0,1,0,0)" style="transform-origin: 0px 0px;"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M114.655 23.4273C111.927 23.4273 109.715 21.0852 109.715 18.1967C109.715 15.3081 111.927 12.9664 114.655 12.9664C117.384 12.9664 119.595 15.3081 119.595 18.1967C119.595 21.0852 117.384 23.4273 114.655 23.4273ZM114.655 7.8418C108.941 7.8418 104.309 12.478 104.309 18.1967C104.309 23.9157 108.941 28.5516 114.655 28.5516C120.369 28.5516 125.002 23.9157 125.002 18.1967C125.002 12.478 120.369 7.8418 114.655 7.8418Z" fill="#0065EF" class="o-2" data-svg-origin="103.30899810791016 18.141800212860108" transform="matrix(1,0,0,1,0,0)" style="transform-origin: 0px 0px;"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M24.5469 27.5324H29.9536V9.06445H24.5469V27.5324Z" fill="#0065EF" class="i-1" data-svg-origin="24.546899795532227 9.06445026397705" transform="matrix(1,0,0,1,0,0)" style="transform-origin: 0px 0px;"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M27.2489 0.516113C25.4108 0.516113 24.1133 1.77805 24.1133 3.54585C24.1133 5.3492 25.4108 6.61182 27.2489 6.61182C29.087 6.61182 30.3848 5.3492 30.3848 3.54585C30.3848 1.77805 29.087 0.516113 27.2489 0.516113Z" fill="#0065EF" class="ic-1" data-svg-origin="44.11330032348633 3.516112983226776" transform="matrix(1,0,0,1,0,0)" style="transform-origin: 0px 0px;"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M58.6797 27.5324H64.0865V9.06445H58.6797V27.5324Z" fill="#0065EF" class="i-2" data-svg-origin="58.6796989440918 9.06445026397705" transform="matrix(1,0,0,1,0,0)" style="transform-origin: 0px 0px;"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M61.3856 0.516113C59.5478 0.516113 58.25 1.77805 58.25 3.54585C58.25 5.3492 59.5478 6.61182 61.3856 6.61182C63.224 6.61182 64.5215 5.3492 64.5215 3.54585C64.5215 1.77805 63.224 0.516113 61.3856 0.516113Z" fill="#0065EF" class="ic-2" data-svg-origin="44.25 20.516112983226776" transform="matrix(1,0,0,1,0,0)" style="transform-origin: 0px 0px;"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M75.3962 21.0039V13.1767H79.5766V9.06443H75.3962V4.41113H70.26L70.2422 9.06443H67.3945V13.1767H69.9895V21.5443C69.9895 25.4768 72.3686 28.2536 76.0448 28.2536C77.1981 28.2536 78.6401 28.0372 79.7569 27.6763V23.3125C79.1445 23.4919 78.3515 23.601 77.8467 23.601C76.3334 23.601 75.3962 22.5547 75.3962 21.0039Z" fill="#0065EF"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M43.5726 23.4273C40.8442 23.4273 38.6324 21.0856 38.6324 18.1967C38.6324 15.3081 40.8442 12.9664 43.5726 12.9664C46.3011 12.9664 48.5129 15.3081 48.5129 18.1967C48.5129 21.0856 46.3011 23.4273 43.5726 23.4273ZM50.4726 10.4826C48.6417 8.84123 46.2244 7.8418 43.5727 7.8418C37.8582 7.8418 33.2261 12.478 33.2261 18.1967C33.2261 23.9157 37.8582 28.5516 43.5727 28.5516C45.3733 28.5516 47.0662 28.0905 48.541 27.2808V28.3503V29.3972V29.5702H48.5348C48.5232 32.1012 46.4863 34.151 43.9617 34.1821V34.1749H43.7971C41.2968 34.1168 39.2858 32.0841 39.2742 29.5702H39.2705V29.3972H33.7028C33.7028 34.9915 38.2343 39.5269 43.8244 39.5269V39.518H43.8261V39.5269C49.3005 39.5269 53.7483 35.1747 53.9303 29.7401H53.9477V29.3972V9.19704C52.6209 9.19704 51.4084 9.68275 50.4726 10.4826Z" fill="#0065EF"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M10.3466 23.4274C7.61809 23.4274 5.40634 21.0857 5.40634 18.1968C5.40634 15.3082 7.61809 12.9662 10.3466 12.9662C13.0751 12.9662 15.2868 15.3082 15.2868 18.1968C15.2868 21.0857 13.0751 23.4274 10.3466 23.4274ZM20.6933 0.767578H15.2869V9.09662C13.819 8.29646 12.1359 7.84186 10.3466 7.84186C4.63251 7.84186 0 12.4781 0 18.1968C0 23.9158 4.63251 28.5517 10.3466 28.5517C16.027 28.5517 20.6359 23.9702 20.6909 18.2986H20.6933V0.767578Z" fill="#0065EF"></path></svg>
diff --git a/images/logos/glami.svg b/images/logos/glami.svg
new file mode 100644
index 0000000..3ce48f7
--- /dev/null
+++ b/images/logos/glami.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="72" height="16" viewBox="0 0 72 16"><g fill="none" fill-rule="evenodd"><path style="fill: #000" d="M70.0355571,15.822208 L70.0355571,0.2448 L72,0.2448 L72,15.822208 L70.0355571,15.822208 Z M61.5776143,0.244864 L64.2676179,0.244864 L64.2676179,15.822304 L62.3701286,15.822304 L62.3701286,2.868704 L57.6152357,14.521312 L55.6954071,14.521312 L50.9405143,2.868704 L50.9405143,15.822304 L49.043025,15.822304 L49.043025,0.244864 L51.7330286,0.244864 L56.6553214,12.349568 L61.5776143,0.244864 Z M36.8866607,12.184192 L37.4997214,10.519488 L41.0092393,10.519488 L38.2970893,3.022944 L33.6426429,15.82224 L31.4994536,15.82224 L37.504575,0.244832 L39.0671036,0.244832 L45.072225,15.82224 L42.9403821,15.82224 L41.6230071,12.184192 L36.8866607,12.184192 Z M29.552175,13.981152 L28.8739607,15.822208 L20.5233429,15.822208 L20.5233429,0.2448 L22.4877857,0.2448 L22.4877857,13.981152 L29.552175,13.981152 Z M8.09971071,7.111104 L16.1999679,7.111104 L16.1999679,15.822208 L14.4000321,15.822208 L14.4000321,13.019904 C12.9140036,14.835904 10.6423071,16 8.09971071,16 C3.633525,16 0,12.4112 0,8 C0,3.5888 3.633525,0 8.09971071,0 C10.3329,0 12.3578357,0.897248 13.8244179,2.345792 L12.5522357,3.602304 C11.4114214,2.475552 9.83648571,1.777792 8.09971071,1.777792 C4.62603214,1.777792 1.79993571,4.569056 1.79993571,8 C1.79993571,11.430944 4.62603214,14.222208 8.09971071,14.222208 C11.267775,14.222208 13.8960643,11.900096 14.3341714,8.888896 L8.09971071,8.888896 L8.09971071,7.111104 Z"></path></g></svg>