refactor(homepage): remove Environment and TechStack
- it did not make sense for a viewer how the website progresses, what is the point - big pictures in Environment causing too long page loads
This commit is contained in:
parent
017d4f6a62
commit
5508601722
11 changed files with 0 additions and 399 deletions
|
|
@ -1,166 +0,0 @@
|
||||||
import Image from "next/image";
|
|
||||||
|
|
||||||
import { Container } from "@/components/Container";
|
|
||||||
|
|
||||||
import logoKubernetes from "@/images/logos/tools/kubernetes.svg";
|
|
||||||
import logok3s from "@/images/logos/tools/k3s.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 logovmware from "@/images/logos/tools/vmware.svg";
|
|
||||||
|
|
||||||
const features = [
|
|
||||||
{
|
|
||||||
name: "Kubernetes",
|
|
||||||
summary:
|
|
||||||
"Open Source systém pro automatizaci deploymentů, škálování a správu kontejnerizovaných aplikací.",
|
|
||||||
description:
|
|
||||||
"Kubernetes je na platformě nezávislý systém, díky kterému může běžet Vaše aplikace u vás v datacentru, v public cloudu nebo třeba v okrajových lokalitách, a nebo třeba na všech najednou, bez problému.",
|
|
||||||
icon: logoKubernetes,
|
|
||||||
iconColor: "#326CE5",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "k3s & rke2",
|
|
||||||
summary:
|
|
||||||
"k3s: lehká distrubuce Kubernetes; rke2: Kubernetes do Vašeho datacentra.",
|
|
||||||
description:
|
|
||||||
"k3s i rke2 jsou velice snadno instalovatelné distribuce Kubernetes, které můžete nainstalovat úplně všude a přitom mít stále k dispozici celý Kubernetes ekosystém, bez kompromisů.",
|
|
||||||
icon: logok3s,
|
|
||||||
iconColor: "#FFC61C",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "Rancher",
|
|
||||||
summary: "Kubernetes jako služba, ve Vašem datacentru.",
|
|
||||||
description:
|
|
||||||
"Platforma, pro Vaše Kubernetes clustery. Komplexní řešení celého životního cyklu clusteru. Neřešte každodení problémy, nechte je řešit Rancher řešit za vás.",
|
|
||||||
icon: logoRancher,
|
|
||||||
iconColor: "#0075A8",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "AWS",
|
|
||||||
summary: "Největší veřejný cloud. Máte problém? AWS má na to službu.",
|
|
||||||
description:
|
|
||||||
"Amazon Web Services (AWS) je cloudový poskytovatel služeb, včetně ukládání obrovských objemů dat, výpočetního výkonu a sítí. To vše aby pomohli firmám i jednotlivcům růst. AWS je nejrozšířenější poskytovatel, který je cenově dostupný, flexibilní cesta, jak stavět a provozovat aplikace a služby.",
|
|
||||||
icon: logoAWS,
|
|
||||||
iconColor: "#232F3E",
|
|
||||||
},
|
|
||||||
// {
|
|
||||||
// name: 'Google Cloud Platform',
|
|
||||||
// summary:
|
|
||||||
// 'Organize all of your contacts, service providers, and invoices in one place.',
|
|
||||||
// description:
|
|
||||||
// 'This also isn’t actually a feature, it’s just some friendly advice. We definitely recommend that you do this, you’ll feel really organized and professional.',
|
|
||||||
// icon: logoGCP,
|
|
||||||
// iconColor: '#4285F4',
|
|
||||||
// },
|
|
||||||
{
|
|
||||||
name: "DigitalOcean",
|
|
||||||
summary: "Jednoduchý cloudový poskytovatel, ve kterém se neztratíte.",
|
|
||||||
description:
|
|
||||||
"DigitalOcean patří k menším cloudovým poskytovatelům, avšak jejich portfolio vám pro Vaši aplikaci bohatě stačí a nebudete se ztrácet v komplexitě velkých poskytovatelů se spoustou služeb.",
|
|
||||||
icon: logoDigitalOcean,
|
|
||||||
iconColor: "#0080FF",
|
|
||||||
},
|
|
||||||
// {
|
|
||||||
// name: 'OpenStack',
|
|
||||||
// summary:
|
|
||||||
// 'Organize all of your contacts, service providers, and invoices in one place.',
|
|
||||||
// description:
|
|
||||||
// 'This also isn’t actually a feature, it’s just some friendly advice. We definitely recommend that you do this, you’ll feel really organized and professional.',
|
|
||||||
// icon: logoOpenStack,
|
|
||||||
// iconColor: '#ED1944',
|
|
||||||
// },
|
|
||||||
{
|
|
||||||
name: "VMware",
|
|
||||||
summary:
|
|
||||||
"Populární řešení pro správu Vaše datacentra, od virtuálních serverů až po úložiště.",
|
|
||||||
description:
|
|
||||||
"VMware je virtualizační platforma, která umožňuje vytvářet a spravovat virtuální servery a jejich fyzickém hardwaru. Zároveň umožňuje vytvářet oddělená prostředí například pro vývoj a ostrý provoz, tak i pro zcela různé aplikace.",
|
|
||||||
icon: logovmware,
|
|
||||||
iconColor: "#607078",
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
type FeatureType = {
|
|
||||||
name: string;
|
|
||||||
summary: string;
|
|
||||||
description: string;
|
|
||||||
icon: any;
|
|
||||||
iconColor: string;
|
|
||||||
};
|
|
||||||
|
|
||||||
type FeatureProps = {
|
|
||||||
feature: FeatureType;
|
|
||||||
className?: string;
|
|
||||||
props?: any[];
|
|
||||||
};
|
|
||||||
|
|
||||||
function Feature({ feature, className, ...props }: FeatureProps) {
|
|
||||||
return (
|
|
||||||
<div className={className} {...props}>
|
|
||||||
<Image
|
|
||||||
src={feature.icon}
|
|
||||||
className="rounded-lg p-2"
|
|
||||||
width="128"
|
|
||||||
height="128"
|
|
||||||
color={feature.iconColor}
|
|
||||||
alt=""
|
|
||||||
/>
|
|
||||||
<h3 className="mt-6 text-lg font-medium text-amber-500">{feature.name}</h3>
|
|
||||||
<p className="font-display mt-2 text-xl text-black">
|
|
||||||
{feature.summary}
|
|
||||||
</p>
|
|
||||||
<p className="mt-4 text-slate-700">{feature.description}</p>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function FeaturesMobile() {
|
|
||||||
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">
|
|
||||||
{features.map((feature) => (
|
|
||||||
<div key={feature.name}>
|
|
||||||
<Feature feature={feature} className="mx-auto max-w-2xl" />
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function FeaturesDesktop() {
|
|
||||||
return (
|
|
||||||
<div className="hidden lg:mt-20 lg:block">
|
|
||||||
<div className="grid grid-cols-3 gap-x-8 gap-y-4">
|
|
||||||
{features.map((feature) => (
|
|
||||||
<div key={feature.name}>
|
|
||||||
<Feature feature={feature} className="relative" />
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export function Environment() {
|
|
||||||
return (
|
|
||||||
<section
|
|
||||||
id="secondary-features"
|
|
||||||
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">
|
|
||||||
Jakákoliv platforma, kdekoliv
|
|
||||||
</h2>
|
|
||||||
<p className="mt-4 text-lg tracking-tight text-slate-700">
|
|
||||||
Od veřejného cloudu přes on-premise až po serverless, se vším vám
|
|
||||||
poradím.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<FeaturesMobile />
|
|
||||||
<FeaturesDesktop />
|
|
||||||
</Container>
|
|
||||||
</section>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
@ -1,229 +0,0 @@
|
||||||
import { ReactNode } from "react";
|
|
||||||
import Image, { StaticImageData } from "next/image";
|
|
||||||
import { Tab } from "@headlessui/react";
|
|
||||||
import clsx from "clsx";
|
|
||||||
|
|
||||||
import { Container } from "@/components/Container";
|
|
||||||
|
|
||||||
import screenshotArgoCD from "@/images/screenshots/argocd.png";
|
|
||||||
import screenshotGitLab from "@/images/screenshots/gitlab.png";
|
|
||||||
import screenshotTerraform from "@/images/screenshots/terraform.png";
|
|
||||||
import screenshotKubernetes from "@/images/screenshots/kubernetes.png";
|
|
||||||
import screenshotGrafana from "@/images/screenshots/grafana.png";
|
|
||||||
import screenshotPrometheus from "@/images/screenshots/prometheus.png";
|
|
||||||
|
|
||||||
import logoTerraform from "@/images/logos/tools/terraform.svg";
|
|
||||||
import logoGit from "@/images/logos/tools/git.svg";
|
|
||||||
import logoKubernetes from "@/images/logos/tools/kubernetes.svg";
|
|
||||||
import logoPrometheus from "@/images/logos/tools/prometheus.svg";
|
|
||||||
import logoArgo from "@/images/logos/tools/argo.svg";
|
|
||||||
import logoGrafana from "@/images/logos/tools/grafana.svg";
|
|
||||||
|
|
||||||
const features = [
|
|
||||||
{
|
|
||||||
name: "Verzování",
|
|
||||||
summary: "Spravujte svůj kód pomocí verzovacího nástroje Git.",
|
|
||||||
description:
|
|
||||||
"Mějte historii změn v aplikaci od začátku až do dnes, můžete se kdykoliv vrátit do bodu v čase. Řešte konflikty včas, předtím než je nasadíte do produkce a umožněte Vaším programátorům spolupracovat na jednou, aniž by si překáželi.",
|
|
||||||
image: screenshotGitLab,
|
|
||||||
icon: logoGit,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "Infastruktura jako kód",
|
|
||||||
summary:
|
|
||||||
"Mějte Vaši infrastrukturu deklarativně definovanou a verzovanou, díky Terraformu.",
|
|
||||||
description:
|
|
||||||
"Vaši infrastrukturu můžete snadno přesunout k jinému poskytovateli, a nebo jen vytvořit nové prostředí pro zákazníka, aby si váš produkt vyzkoušel a to během minut.",
|
|
||||||
image: screenshotTerraform,
|
|
||||||
icon: logoTerraform,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "Orchestrace",
|
|
||||||
summary:
|
|
||||||
"Nechte Vaši aplikaci běžet napříč mnoha servery a škálovat dle potřeb.",
|
|
||||||
description:
|
|
||||||
"Kubernetes se stalo nejen standardem, ale i hlavní platformou pro vývoj aplikací ať SaaS nebo dodávaných třetím stranám. Jde o skvělou platformu pro provoz Vaší aplikace ať ve veřejném cloudu nebo na vlastním hardwaru popř. on edge blízko koncových uživatelů.",
|
|
||||||
image: screenshotKubernetes,
|
|
||||||
icon: logoKubernetes,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "Monitoring",
|
|
||||||
summary: "Sledujte Vaši aplikaci, jak se chová v čase.",
|
|
||||||
description:
|
|
||||||
"Prometheus je standard pro monitoring aplikací, ať v Kubernetes ale i mimo. Sbírejte telemetrická data v čase o Vaši aplikaci. Vyhodnoťte, kde má Vaše aplikace slabá místa. Zároveň můžete tvořit pravidla, dle kterých vás AlertManager upozorní, když se něco pokazí.",
|
|
||||||
image: screenshotPrometheus,
|
|
||||||
icon: logoPrometheus,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "Vizualizace",
|
|
||||||
summary:
|
|
||||||
"Od grafů zatížení procesoru po počet otevřených TCP spojení, vše jasně a přehledně.",
|
|
||||||
description:
|
|
||||||
"Grafana je skvělý nástroj pro vizualizaci dat z monitoringu, vytvořte si dashboardy pro jednotlivé části Vaší aplikace, mějte pohromadě infrastrukturu, provoz na síti, dostupnost a třeba počet neúspěšných pokusů o přihlášení, zda vůči Vaší aplikaci neprobíhá hackerský útok.",
|
|
||||||
image: screenshotGrafana,
|
|
||||||
icon: logoGrafana,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "GitOps",
|
|
||||||
summary:
|
|
||||||
"Spravujte stav Vašich prostředí deklarativně, ať vždy víte, jaký je aktuální stav.",
|
|
||||||
description:
|
|
||||||
"ArgoCD je spolehlivý nástroj pro práci s Kubernetes a nasazováním změn a přitom si udržovat přehled o právě nasazených aplikacích, verzím a konfiguraci, snadno, soplehlivě, verzovaně.",
|
|
||||||
image: screenshotArgoCD,
|
|
||||||
icon: logoArgo,
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
type FeatureType = {
|
|
||||||
name: string | ReactNode;
|
|
||||||
summary: string;
|
|
||||||
description: string;
|
|
||||||
image: StaticImageData;
|
|
||||||
icon: any;
|
|
||||||
};
|
|
||||||
|
|
||||||
type FeatureProps = {
|
|
||||||
feature: FeatureType;
|
|
||||||
isActive: boolean;
|
|
||||||
className?: string;
|
|
||||||
props?: any;
|
|
||||||
};
|
|
||||||
|
|
||||||
function Feature({ feature, isActive, className, ...props }: FeatureProps) {
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
className={clsx(className, !isActive && "opacity-75 hover:opacity-100")}
|
|
||||||
{...props}
|
|
||||||
>
|
|
||||||
<Image
|
|
||||||
src={feature.icon}
|
|
||||||
width="128"
|
|
||||||
height="128"
|
|
||||||
className={clsx(
|
|
||||||
// 'w-32',
|
|
||||||
"flex justify-center rounded-lg p-2"
|
|
||||||
// isActive ? 'fill-amber-500' : 'fill-slate-500'
|
|
||||||
)}
|
|
||||||
alt=""
|
|
||||||
/>
|
|
||||||
<h3
|
|
||||||
className={clsx(
|
|
||||||
"mt-6 text-lg font-medium",
|
|
||||||
isActive ? "text-amber-500" : "text-slate-700"
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
{feature.name}
|
|
||||||
</h3>
|
|
||||||
<p className="font-display mt-2 text-xl text-black">
|
|
||||||
{feature.summary}
|
|
||||||
</p>
|
|
||||||
<p className="mt-4 text-slate-700">{feature.description}</p>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function FeaturesMobile() {
|
|
||||||
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">
|
|
||||||
{features.map((feature) => (
|
|
||||||
<div key={feature.name}>
|
|
||||||
<Feature feature={feature} className="mx-auto max-w-2xl" isActive />
|
|
||||||
<div className="relative mt-10 pb-10">
|
|
||||||
<div className="absolute -inset-x-4 bottom-0 top-8 bg-slate-200 sm:-inset-x-6" />
|
|
||||||
<div className="relative mx-auto w-[52.75rem] overflow-hidden rounded-xl bg-white shadow-lg shadow-slate-900/5 ring-1 ring-slate-500/10">
|
|
||||||
<Image
|
|
||||||
className="w-full"
|
|
||||||
src={feature.image}
|
|
||||||
alt=""
|
|
||||||
// sizes="52.75rem"
|
|
||||||
width="800"
|
|
||||||
height="548"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function FeaturesDesktop() {
|
|
||||||
return (
|
|
||||||
<Tab.Group as="div" className="hidden lg:mt-20 lg:block">
|
|
||||||
{({ selectedIndex }) => (
|
|
||||||
<>
|
|
||||||
<Tab.List className="grid grid-cols-3 gap-x-8 gap-y-4">
|
|
||||||
{features.map((feature, featureIndex) => (
|
|
||||||
<Feature
|
|
||||||
key={feature.name}
|
|
||||||
feature={{
|
|
||||||
...feature,
|
|
||||||
name: (
|
|
||||||
<Tab className="[&:not(:focus-visible)]:focus:outline-none">
|
|
||||||
<span className="absolute inset-0" />
|
|
||||||
{feature.name}
|
|
||||||
</Tab>
|
|
||||||
),
|
|
||||||
}}
|
|
||||||
isActive={featureIndex === selectedIndex}
|
|
||||||
className="relative"
|
|
||||||
/>
|
|
||||||
))}
|
|
||||||
</Tab.List>
|
|
||||||
<Tab.Panels className="rounded-4xl relative mt-20 overflow-hidden bg-slate-200 px-14 py-16 xl:px-16">
|
|
||||||
<div className="-mx-5 flex">
|
|
||||||
{features.map((feature, featureIndex) => (
|
|
||||||
<Tab.Panel
|
|
||||||
static
|
|
||||||
key={feature.name}
|
|
||||||
className={clsx(
|
|
||||||
"px-5 transition duration-500 ease-in-out [&:not(:focus-visible)]:focus:outline-none",
|
|
||||||
featureIndex !== selectedIndex && "opacity-60"
|
|
||||||
)}
|
|
||||||
style={{ transform: `translateX(-${selectedIndex * 100}%)` }}
|
|
||||||
aria-hidden={featureIndex !== selectedIndex}
|
|
||||||
>
|
|
||||||
<div className="w-[52.75rem] overflow-hidden rounded-xl bg-white shadow-lg shadow-slate-900/5 ring-1 ring-slate-500/10">
|
|
||||||
<Image
|
|
||||||
className="w-full"
|
|
||||||
src={feature.image}
|
|
||||||
alt=""
|
|
||||||
// sizes="52.75rem"
|
|
||||||
width="800"
|
|
||||||
height="548"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</Tab.Panel>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
<div className="rounded-4xl pointer-events-none absolute inset-0 ring-1 ring-inset ring-slate-900/10" />
|
|
||||||
</Tab.Panels>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</Tab.Group>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export function TechStack() {
|
|
||||||
return (
|
|
||||||
<section
|
|
||||||
id="tech-stack"
|
|
||||||
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">
|
|
||||||
Open Source DevOps stack
|
|
||||||
</h2>
|
|
||||||
<p className="mt-4 text-lg tracking-tight text-slate-700">
|
|
||||||
Věřím v Open Source technologie, prakticky všichni je denně
|
|
||||||
využíváme a jsou naší budoucností.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<FeaturesMobile />
|
|
||||||
<FeaturesDesktop />
|
|
||||||
</Container>
|
|
||||||
</section>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 488 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 413 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 453 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 358 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 530 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 186 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 511 KiB |
|
|
@ -7,9 +7,7 @@ import { Faqs } from "@/components/homepage/Faqs";
|
||||||
import { Footer } from "@/components/layout/Footer";
|
import { Footer } from "@/components/layout/Footer";
|
||||||
import { Pricing } from "@/components/homepage/Pricing";
|
import { Pricing } from "@/components/homepage/Pricing";
|
||||||
import { PrimaryFeatures } from "@/components/homepage/PrimaryFeatures";
|
import { PrimaryFeatures } from "@/components/homepage/PrimaryFeatures";
|
||||||
import { TechStack } from "@/components/homepage/TechStack";
|
|
||||||
import { Testimonials } from "@/components/homepage/Testimonials";
|
import { Testimonials } from "@/components/homepage/Testimonials";
|
||||||
import { Environment } from "@/components/homepage/Environment";
|
|
||||||
import { KubernetesEverywhere } from "@/components/homepage/KubernetesEverywhere";
|
import { KubernetesEverywhere } from "@/components/homepage/KubernetesEverywhere";
|
||||||
import { TrainingList } from "@/components/homepage/Training";
|
import { TrainingList } from "@/components/homepage/Training";
|
||||||
|
|
||||||
|
|
@ -29,10 +27,8 @@ export default function Home() {
|
||||||
<Hero />
|
<Hero />
|
||||||
<PrimaryFeatures />
|
<PrimaryFeatures />
|
||||||
<TrainingList />
|
<TrainingList />
|
||||||
<TechStack />
|
|
||||||
<KubernetesEverywhere />
|
<KubernetesEverywhere />
|
||||||
<CallToAction />
|
<CallToAction />
|
||||||
<Environment />
|
|
||||||
<Testimonials />
|
<Testimonials />
|
||||||
<Pricing />
|
<Pricing />
|
||||||
{/* <Faqs /> */}
|
{/* <Faqs /> */}
|
||||||
|
|
|
||||||
Reference in a new issue