From b1aa7f75500fcb4fc37e6aae1223a72415bdbab9 Mon Sep 17 00:00:00 2001
From: Vojtech Mares <iam@vojtechmares.com>
Date: Wed, 11 Jan 2023 14:07:28 +0100
Subject: [PATCH] feat: add training list to homepage

---
 components/homepage/Pricing.tsx  |  2 +-
 components/homepage/Training.tsx | 94 ++++++++++++++++++++++++++++++++
 components/layout/Header.tsx     |  2 +-
 pages/index.tsx                  |  2 +
 4 files changed, 98 insertions(+), 2 deletions(-)
 create mode 100644 components/homepage/Training.tsx

diff --git a/components/homepage/Pricing.tsx b/components/homepage/Pricing.tsx
index b2e8926..2861f03 100644
--- a/components/homepage/Pricing.tsx
+++ b/components/homepage/Pricing.tsx
@@ -105,7 +105,7 @@ export function Pricing() {
             name="Firemní školení"
             price="24 000 CZK za jednodenní školení"
             description="Jednoduše, s názornými příklady, které si každý vyzkouší. Naučím váš tým nové technologii nebo prohloubíme stávající znalosti."
-            href="/skoleni"
+            href="/#skoleni"
             buttonText="Seznam školení"
           />
           <Plan
diff --git a/components/homepage/Training.tsx b/components/homepage/Training.tsx
new file mode 100644
index 0000000..b3c2801
--- /dev/null
+++ b/components/homepage/Training.tsx
@@ -0,0 +1,94 @@
+import Image, { StaticImageData } from "next/image";
+import Link from "next/link";
+
+import { Container } from "@/components/Container";
+
+import logoKubernetes from "@/images/logos/tools/kubernetes.svg";
+import logoTerraform from "@/images/logos/tools/terraform.svg";
+import logoArgo from "@/images/logos/tools/argo.svg";
+import logoGit from "@/images/logos/tools/git.svg";
+
+type TrainingType = {
+  name: string;
+  logo: StaticImageData;
+  href: string;
+};
+
+const trainingList: TrainingType[] = [
+  { name: 'Kubernetes', href: '/skoleni/kubernetes', logo: logoKubernetes },
+  { name: 'Terraform', href: '/skoleni/terraform', logo: logoTerraform },
+  { name: 'ArgoCD', href: '/skoleni/argocd', logo: logoArgo },
+  { name: 'Git', href: '/skoleni/git', logo: logoGit },
+];
+
+type TrainingProps = {
+  training: TrainingType;
+  className?: string;
+};
+
+const Training = ({ training, className }: TrainingProps) => {
+  return (
+    <Link href={training.href} className={className}>
+      <Image
+        src={training.logo}
+        className="rounded-lg p-2 invert mx-auto"
+        width="128"
+        height="128"
+        alt={training.name}
+      />
+      <h3 className="mt-6 text-lg font-medium text-amber-500 text-center">{training.name}</h3>
+    </Link>
+  );
+};
+
+const TrainingGridMobile = () => {
+  return (
+    <div className="-mx-4 mt-20 flex flex-col gap-y-10 overflow-hidden px-4 sm:-mx-6 sm:px-6 lg:hidden">
+      {trainingList.map((training) => (
+        <div key={training.name}>
+          <Training training={training} className="mx-auto max-w-2xl" />
+        </div>
+      ))}
+    </div>
+  );
+};
+
+const TrainingGridDesktop = () => {
+  return (
+    <div className="hidden lg:mt-20 lg:block">
+      <div className="grid grid-cols-4 gap-x-8 gap-y-4">
+        {trainingList.map((training) => (
+          <div key={training.name}>
+            <Training training={training} className="relative py-4 cursor-pointer rounded-3xl transition ease-in-out duration-300 md:hover:-translate-y-1 md:hover:scale-110 md:ring-1 md:hover:ring-slate-700 md:ring-transparent" />
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+const TrainingList = () => {
+  return (
+    <section
+      id="skoleni"
+      aria-label="Training"
+      className="pt-20 pb-14 sm:pb-20 sm:pt-32 lg:pb-32 bg-black"
+    >
+      <Container>
+        <div className="mx-auto max-w-2xl md:text-center">
+          <h2 className="font-display text-3xl tracking-tight text-white sm:text-4xl">
+            Moje školení
+          </h2>
+          <p className="mt-4 text-lg tracking-tight text-slate-400">
+            Od veřejného cloudu přes on-premise až po serverless, se vším vám
+            poradím.
+          </p>
+        </div>
+        <TrainingGridMobile />
+        <TrainingGridDesktop />
+      </Container>
+    </section>
+  );
+};
+
+export { TrainingList };
diff --git a/components/layout/Header.tsx b/components/layout/Header.tsx
index a87c907..b9231b5 100644
--- a/components/layout/Header.tsx
+++ b/components/layout/Header.tsx
@@ -15,7 +15,7 @@ export function Header() {
               </span>
               <div className="hidden md:flex md:gap-x-6">
                 <Link
-                  href="/skoleni"
+                  href="/#skoleni"
                   className="inline-block rounded-full py-2 px-4 text-lg font-medium text-slate-700 hover:bg-slate-100 hover:text-black focus-visible:outline-black"
                 >
                   Školení
diff --git a/pages/index.tsx b/pages/index.tsx
index 0f595ad..ec3944d 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -10,6 +10,7 @@ import { PrimaryFeatures } from "@/components/homepage/PrimaryFeatures";
 import { TechStack } from "@/components/homepage/TechStack";
 import { Testimonials } from "@/components/homepage/Testimonials";
 import { Environment } from "@/components/homepage/Environment";
+import { TrainingList } from "@/components/homepage/Training";
 
 export default function Home() {
   return (
@@ -26,6 +27,7 @@ export default function Home() {
         <Header />
         <Hero />
         <PrimaryFeatures />
+        <TrainingList />
         <TechStack />
         <CallToAction />
         <Environment />