vojtech.mares/backup-websites-2024-01
Archived
1
0
Fork 0
Code Activity

feat(homepage): add "Kubernetes Everywhere" block

Browse source
This commit is contained in:
Vojtěch Mareš 2023-01-12 12:22:30 +01:00
parent 34494444fe
commit 7beaff9141
6 changed files with 140 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

134
components/homepage/KubernetesEverywhere.tsx Normal file
View file

@ -0,0 +1,134 @@
import Image, { StaticImageData } from "next/image";
import clsx from "clsx";
import { Container } from "@/components/Container";
import { Button } from "@/components/Button";
import logoKubernetes from "@/images/logos/tools/kubernetes.svg";
import logoRancher from "@/images/logos/tools/rancher.svg";
import logoAWS from "@/images/logos/tools/amazonaws.svg";
import logoDigitalOcean from "@/images/logos/tools/digitalocean.svg";
import logoGCP from "@/images/logos/tools/googlecloud.svg";
import logoAzure from "@/images/logos/tools/microsoftazure.svg";
import logoLinode from "@/images/logos/tools/linode.svg";
import logoOpenStack from "@/images/logos/tools/openstack.svg";
import logoProxmox from "@/images/logos/tools/proxmox.svg";
import logovmware from "@/images/logos/tools/vmware.svg";
const sections = [
{
title: "Kubernetes",
description: "Kubernetes je open-source platforma pro automatizaci a správu kontejnerizovaných aplikací. Je to jednotná standardizovaná platforma pro vývoj a provozování aplikací, která umožňuje rychle a efektivně nasazovat a spravovat aplikace v kontejnerech.",
images: [
{ src: logoKubernetes, alt: "Kubernetes"},
],
},
{
title: "Veřejný cloud",
description: "Veřejný cloud je sdílená fyzická infrastruktura, která je spravována třetí stranou, díky tomu se nestaráte o vlastní hardware a jeho údržbu. Veřejné cloudy jsou využívány společnostmi ať pro vývoj a testování, ale i pro produkční nasazení a dodávání jejich aplikace zákazníkům, kdekoliv na celém světě.",
images: [
{ src: logoAWS, alt: "Amazon Web Services"},
{ src: logoGCP, alt: "Google Cloud Platform"},
{ src: logoAzure, alt: "Microsoft Azure"},
],
},
{
title: "\"Malý\" veřejný cloud",
description: "Ne všichni hráči na cloudovém trhu jsou velké firmy. Existují i menší poskytovatelé, kteří sice nenabízí jejich rešení pro každý Váš problém, ale jen virtuální stroje, spravované Kubernetes a databáze a objektové úložiště. Což je však pro většinu aplikací naprosto dostatečné.",
images: [
{ src: logoDigitalOcean, alt: "Digital Ocean"},
{ src: logoLinode, alt: "Linode"},
],
},
{
title: "Vlastní infrastruktura",
description: "Ať máte vlastní datacentrum nebo jen pár virtuálních strojů, můžete využít Kubernetes a všechny jeho výhody. Využijte vlastní infrastrukturu a vytvořte si vlastní cloud. Pokud používáte například Proxmox, OpenStack nebo VMware vSphere, můžete využít jejich API a přímo je propojit s Vašimi Kubernetes, ať jeden cluster nebo víc.",
images: [
{ src: logoOpenStack, alt: "OpenStack"},
{ src: logoProxmox, alt: "Proxmox"},
{ src: logovmware, alt: "VMware"},
],
},
{
title: "Hybridní řešení",
description: "Pokud máte vlastní infrastrukturu, ale chcete využít i veřejný cloud, můžete využít například Rancher, který vám umožní propojit Vaši vlastní infrastrukturu s veřejným cloudem. Využijte výhody obou světů a vytvořte si hybridní řešení. Díky Rancheru získáte jednotnou ucelenou platformu pro všechny prostředí.",
images: [
{ src: logoRancher, alt: "Rancher"},
],
},
]
const SectionDesktop = ({title, description, images, reverse}: { title: string, description: string, images: { src: StaticImageData, alt: string }[], reverse: boolean}) => (
<div className="grid grid-cols-2 gap-x-24 gap-y-32">
<div>
<h3 className="font-display text-xl font-medium">{title}</h3>
<p className="mt-4 text-slate-700">{description}</p>
</div>
<div className={clsx(reverse ? "order-first" : "")}>
<div className="flex flex-row justify-around">
{images.map((image, index) => (
<Image key={index} src={image.src} width={128} height={128} alt={image.alt} title={image.alt} />
))}
</div>
</div>
</div>
)
const SectionMobile = ({title, description, images}: { title: string, description: string, images: { src: StaticImageData, alt: string }[]}) => (
<>
<div className="flex flex-wrap gap-x-8 justify-around overflow-hidden mb-4">
{images.map((image, index) => (
<Image key={index} src={image.src} width={128} height={128} alt={image.alt} title={image.alt} />
))}
</div>
<h3 className="font-display text-xl font-medium">{title}</h3>
<p className="mt-4 text-slate-700">{description}</p>
</>
)
const Mobile = () => (
<div className="lg:hidden mt-10">
{sections.map((section, index) => (
<div key={index} className={clsx(sections.length - 1 !== index ? "mb-10" : "")}>
<SectionMobile {...section} />
</div>
))}
</div>
)
const Desktop = () => (
<div className="hidden lg:block mt-10 lg:mt-20">
{sections.map((section, index) => (
<div key={index} className={
clsx(sections.length - 1 !== index ? "mb-32" : "")
}>
<SectionDesktop {...section} reverse={index % 2 === 1}/>
</div>
))}
</div>
)
export function KubernetesEverywhere() {
return (
<section
id="kubernetes-kdekoliv"
aria-label="Features for simplifying everyday business tasks"
className="pt-20 pb-14 sm:pb-20 sm:pt-32 lg:pb-32"
>
<Container>
<div className="mx-auto max-w-2xl md:text-center">
<h2 className="font-display text-3xl tracking-tight text-black sm:text-4xl">
Kubernetes, jedna platforma, kdekoliv
</h2>
<p className="mt-4 text-lg tracking-tight text-slate-700">
Se vším Vám poradím, od veřejného cloudu přes on-premise a serverless, až po edge.
</p>
</div>
<Mobile />
<Desktop />
</Container>
</section>
);
}

1
images/logos/tools/civo.svg Normal file
View file

@ -0,0 +1 @@
<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Civo</title><path d="M9.229 7.985h-.993c-.183 0-.303.14-.303.318v7.393c0 .177.12.318.303.318h.993a.318.318 0 0 0 .323-.318V8.303a.317.317 0 0 0-.323-.318m-3.1 5.838a.32.32 0 0 0-.507-.104 2.34 2.34 0 0 1-1.604.635c-1.627 0-2.868-1.65-2.141-3.368a2.128 2.128 0 0 1 1.13-1.128c.992-.42 1.958-.18 2.599.408a.32.32 0 0 0 .507-.103l.43-.943a.353.353 0 0 0-.111-.428C5.425 8.03 4.05 7.732 2.617 8.22a3.838 3.838 0 0 0-2.412 2.478c-.874 2.772 1.172 5.32 3.813 5.32.92 0 1.764-.31 2.44-.831a.348.348 0 0 0 .101-.42zm17.666-3.125a3.838 3.838 0 0 0-2.412-2.478 4.176 4.176 0 0 0-2.329-.13c-1.2.269-2.07.838-2.834 2.479l-1.534 3.326-2.603-5.722a.32.32 0 0 0-.29-.187l-1.138-.002a.32.32 0 0 0-.292.453l3.376 7.382a.324.324 0 0 0 .291.19l.056.005h1.276a.236.236 0 0 0 .076-.013.335.335 0 0 0 .2-.18l1.71-3.893c.515-1.213.827-1.718 1.643-2.065a2.527 2.527 0 0 1 2.054.026c.492.222.878.629 1.084 1.128a2.701 2.701 0 0 1 .206.95 2.354 2.354 0 0 1-2.353 2.387 2.34 2.34 0 0 1-1.604-.635.32.32 0 0 0-.507.104l-.43.944a.348.348 0 0 0 .1.42c.677.52 1.522.831 2.44.831 2.642 0 4.688-2.548 3.814-5.32"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 1.1 KiB

1
images/logos/tools/linode.svg Normal file
View file

@ -0,0 +1 @@
<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Linode</title><path d="M22.006 10.684a.15.15 0 0 0-.07-.15l-3.261-1.821a.14.14 0 0 0-.14 0l-2.771 1.69a.17.17 0 0 0-.07.13v1.451l-1.13-.74a.14.14 0 0 0-.15 0l-1.62 1-.071-1.64a.19.19 0 0 0-.07-.12l-1.65-1.09 1.51-.781a.16.16 0 0 0 .08-.14l-.27-6.272a.16.16 0 0 0-.08-.13L8 0h-.1L2.08 1.81A.16.16 0 0 0 2 2l1.27 6.233a.22.22 0 0 0 0 .08l1.83 1.38-1.26.6a.16.16 0 0 0-.08.17l1 4.702a.18.18 0 0 0 0 .07L6 16.375l-.8.49a.15.15 0 0 0-.06.16l.75 3.642a.11.11 0 0 0 0 .07l3.002 3.221a.14.14 0 0 0 .2 0l3.921-3.121a.16.16 0 0 0 .06-.12l-.07-2.12 1.32 1.1a.14.14 0 0 0 .18 0l3.142-2.511a.24.24 0 0 0 .06-.11l.09-1.57 1 .67a.14.14 0 0 0 .17 0l2.571-2.001a.14.14 0 0 0 .05-.1zm-9.623.15l.07 1.57.12 2.781-4.231 2.871-.66-4.532zm-.35-8.423l.25 5.912-5.002 2.59-.9-6.321zM3.54 8.123L2.33 2.26l3.74 2.32.931 6.203-1.58-1.2zM5 15.055l-.88-4.261 3.281 2.74.6 4.382-1.68-1.62zm1.14 5.512l-.65-3.141 2.892 2.85.47 3.162zm3.002 3l-.49-3.33 4.001-2.871.14 3.28zm3.861-5.36v-1.081a.16.16 0 0 0-.05-.11l-1.13-.92 1-.7a.14.14 0 0 0 .06-.12v-.261l1.39 1.06v3.211zm4.442-1.201l-2.861 2.28v-3.22l3.07-2.201zm1.29-1.21l-.9-.631.09-1.59a.11.11 0 0 0 0-.06.1.1 0 0 0 0-.05l-1.93-1.27v-1.391l3 1.89zm2.55-1.861l-2.28 1.81.26-3.06 2.431-1.681z"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 1.3 KiB

1
images/logos/tools/microsoftazure.svg Normal file
View file

@ -0,0 +1 @@
<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Microsoft Azure</title><path d="M22.379 23.343a1.62 1.62 0 0 0 1.536-2.14v.002L17.35 1.76A1.62 1.62 0 0 0 15.816.657H8.184A1.62 1.62 0 0 0 6.65 1.76L.086 21.204a1.62 1.62 0 0 0 1.536 2.139h4.741a1.62 1.62 0 0 0 1.535-1.103l.977-2.892 4.947 3.675c.28.208.618.32.966.32m-3.084-12.531 3.624 10.739a.54.54 0 0 1-.51.713v-.001h-.03a.54.54 0 0 1-.322-.106l-9.287-6.9h4.853m6.313 7.006c.116-.326.13-.694.007-1.058L9.79 1.76a1.722 1.722 0 0 0-.007-.02h6.034a.54.54 0 0 1 .512.366l6.562 19.445a.54.54 0 0 1-.338.684"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 593 B

1
images/logos/tools/proxmox.svg Normal file
View file

@ -0,0 +1 @@
<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Proxmox</title><path d="M4.928 1.825c-1.09.553-1.09.64-.07 1.78 5.655 6.295 7.004 7.782 7.107 7.782.139.017 7.971-8.542 8.058-8.801.034-.07-.208-.312-.519-.536-.415-.312-.864-.433-1.712-.467-1.59-.104-2.144.242-4.115 2.455-.899 1.003-1.66 1.833-1.66 1.833-.017 0-.76-.813-1.642-1.798S8.473 2.1 8.127 1.91c-.796-.45-2.421-.484-3.2-.086zM1.297 4.367C.45 4.695 0 5.007 0 5.248c0 .121 1.331 1.678 2.94 3.459 1.625 1.78 2.939 3.268 2.939 3.302 0 .035-1.331 1.522-2.94 3.303C1.314 17.11.017 18.683.035 18.822c.086.467 1.504 1.055 2.541 1.055 1.678-.018 2.058-.312 5.603-4.202 1.78-1.954 3.233-3.614 3.233-3.666 0-.069-1.435-1.694-3.199-3.63-2.3-2.508-3.423-3.632-3.96-3.874-.812-.398-2.126-.467-2.956-.138zm18.467.12c-.502.26-1.764 1.505-3.943 3.891-1.763 1.937-3.199 3.562-3.199 3.631 0 .07 1.453 1.712 3.234 3.666 3.544 3.89 3.925 4.184 5.602 4.202 1.038 0 2.455-.588 2.542-1.055.017-.156-1.28-1.712-2.905-3.493-1.608-1.78-2.94-3.285-2.94-3.32 0-.034 1.332-1.539 2.94-3.32C22.72 6.91 24.017 5.352 24 5.214c-.087-.45-1.366-.968-2.473-1.038-.795-.034-1.21.035-1.763.312zM7.954 16.973c-2.144 2.369-3.908 4.374-3.943 4.46-.034.07.208.312.52.537.414.311.864.432 1.711.467 1.574.103 2.161-.26 4.15-2.508.864-.968 1.608-1.78 1.625-1.78s.761.812 1.643 1.798c2.023 2.248 2.559 2.576 4.132 2.49.848-.035 1.297-.156 1.712-.467.311-.225.553-.467.519-.536-.087-.26-7.92-8.819-8.058-8.801-.069 0-1.867 1.954-4.011 4.34z"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 1.5 KiB

2
pages/index.tsx
View file

@ -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 { KubernetesEverywhere } from "@/components/homepage/KubernetesEverywhere";
import { TrainingList } from "@/components/homepage/Training";
export default function Home() {
@ -29,6 +30,7 @@ export default function Home() {
<PrimaryFeatures />
<TrainingList />
<TechStack />
<KubernetesEverywhere />
<CallToAction />
<Environment />
<Testimonials />