refactor: move content of src/ to root dir for readability

components/Environment.tsx

@@ -0,0 +1,169 @@
+import Image from 'next/image'
+
+import { Container } from './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="w-32 rounded-lg p-2" color={feature.iconColor} alt="" />
+      <h3
+        className="mt-6 text-lg font-medium text-blue-600"
+      >
+        {feature.name}
+      </h3>
+      <p className="mt-2 font-display text-xl text-slate-900">
+        {feature.summary}
+      </p>
+      <p className="mt-4 text-sm text-slate-600">
+        {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-slate-900 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>
+  )
+}