From 2bbbb2dddeaf856429a6aa88fd65cad615fc4d52 Mon Sep 17 00:00:00 2001
From: Dev Kumar <devskumar99@gmail.com>
Date: Wed, 2 Nov 2022 10:48:42 -0400
Subject: [PATCH] website: made changes to landing page wrt pods and
 screenshots (#683)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* website: made changes to landing page wrt pods and screenshots

Signed-off-by: Dev Kumar <devskumar99@gmail.com>
Signed-off-by: Stévan Le Meur <1636769+slemeur@users.noreply.github.com>

* website: format & lint fix

Signed-off-by: Dev Kumar <devskumar99@gmail.com>
Signed-off-by: Stévan Le Meur <1636769+slemeur@users.noreply.github.com>

* website: minor changes

Signed-off-by: Dev Kumar <devskumar99@gmail.com>
Signed-off-by: Stévan Le Meur <1636769+slemeur@users.noreply.github.com>

* website: minor changes

Signed-off-by: Dev Kumar <devskumar99@gmail.com>
Signed-off-by: Stévan Le Meur <1636769+slemeur@users.noreply.github.com>

* website: suggested changes for pods section

Signed-off-by: Dev Kumar <devskumar99@gmail.com>
Signed-off-by: Stévan Le Meur <1636769+slemeur@users.noreply.github.com>

* website: suggested changes for pods section

Signed-off-by: Dev Kumar <devskumar99@gmail.com>
Signed-off-by: Stévan Le Meur <1636769+slemeur@users.noreply.github.com>

* minor tweak

Signed-off-by: Stévan Le Meur <1636769+slemeur@users.noreply.github.com>

* Update website/src/pages/index.tsx

Co-authored-by: Charlie Drage <charlie@charliedrage.com>
Signed-off-by: Stévan Le Meur <1636769+slemeur@users.noreply.github.com>

* Update website/src/pages/index.tsx

Co-authored-by: Charlie Drage <charlie@charliedrage.com>
Signed-off-by: Stévan Le Meur <1636769+slemeur@users.noreply.github.com>

* Update website/src/pages/index.tsx

Co-authored-by: Charlie Drage <charlie@charliedrage.com>
Signed-off-by: Stévan Le Meur <1636769+slemeur@users.noreply.github.com>

* Update website/src/pages/index.tsx

Co-authored-by: Charlie Drage <charlie@charliedrage.com>
Signed-off-by: Stévan Le Meur <1636769+slemeur@users.noreply.github.com>

* Update index.tsx

Signed-off-by: Stévan Le Meur <1636769+slemeur@users.noreply.github.com>

* chore: fix linter

Change-Id: I591a32cf0c09f69c18c4c3554416d1ec31f68466
Signed-off-by: Florent Benoit <fbenoit@redhat.com>

Signed-off-by: Dev Kumar <devskumar99@gmail.com>
Signed-off-by: Stévan Le Meur <1636769+slemeur@users.noreply.github.com>
Signed-off-by: Florent Benoit <fbenoit@redhat.com>
Co-authored-by: Stévan Le Meur <1636769+slemeur@users.noreply.github.com>
Co-authored-by: Charlie Drage <charlie@charliedrage.com>
Co-authored-by: Florent Benoit <fbenoit@redhat.com>
---
 website/src/pages/index.tsx | 99 ++++++++++++++++++++++++++++++++-----
 1 file changed, 87 insertions(+), 12 deletions(-)

diff --git a/website/src/pages/index.tsx b/website/src/pages/index.tsx
index a47cc362e37..9c755beec53 100644
--- a/website/src/pages/index.tsx
+++ b/website/src/pages/index.tsx
@@ -342,9 +342,7 @@ function EnterpriseReady() {
               <div className="flex-grow pl-6">
                 <h2 className="text-gray-900 dark:text-gray-100 text-lg title-font font-medium mb-2">Code signing</h2>
 
-                <p className="leading-relaxed text-base">
-                  macOS binaries are digitally signed (Windows certification is in progress).
-                </p>
+                <p className="leading-relaxed text-base">Signed binaries for both macOS and Windows</p>
               </div>
             </div>
             <div className="p-4 md:w-1/3 flex">
@@ -380,7 +378,7 @@ const copyBrewInstructions = () => {
 
 function RunAnywhere() {
   return (
-    <section className="text-gray-600 dark:text-gray-300 dark:bg-zinc-900 bg-zinc-100 body-font">
+    <section className="text-gray-600 dark:text-gray-300 dark:bg-zinc-800 bg-zinc-200 body-font">
       <div className="container px-5 py-24 mx-auto flex flex-wrap">
         <div className="flex flex-col text-center w-full mb-5">
           <h2 className="max-w-lg mb-6 font-sans text-3xl font-bold leading-none tracking-tight text-gray-900 dark:text-white sm:text-4xl md:mx-auto">
@@ -392,7 +390,7 @@ function RunAnywhere() {
         </div>
         <div className="flex flex-wrap w-full justify-center">
           <div className="p-4 w-11/12 md:w-1/2 lg:w-1/3">
-            <div className="flex rounded-lg h-full bg-zinc-300 dark:bg-zinc-700 bg-opacity-60 p-8 flex-col">
+            <div className="flex rounded-lg h-full bg-zinc-100 dark:bg-zinc-900 bg-opacity-60 p-8 flex-col">
               <Link
                 title="Download for Windows"
                 className="no-underline hover:no-underline text-gray-900 dark:text-white hover:dark:text-violet-600 "
@@ -411,7 +409,7 @@ function RunAnywhere() {
             </div>
           </div>
           <div className="p-4 w-11/12 md:w-1/2 lg:w-1/3">
-            <div className="flex rounded-lg h-full bg-zinc-300 dark:bg-zinc-700 bg-opacity-60 p-8 flex-col">
+            <div className="flex rounded-lg h-full bg-zinc-100 dark:bg-zinc-900 bg-opacity-60 p-8 flex-col">
               <Link
                 title="Download for macOS"
                 className="no-underline hover:no-underline text-gray-900 dark:text-white hover:dark:text-violet-600 "
@@ -439,7 +437,7 @@ function RunAnywhere() {
             </div>
           </div>
           <div className="p-4 w-11/12 md:w-1/2 lg:w-1/3">
-            <div className="flex rounded-lg h-full bg-zinc-300 dark:bg-zinc-700 bg-opacity-60 p-8 flex-col">
+            <div className="flex rounded-lg h-full bg-zinc-100 dark:bg-zinc-900 bg-opacity-60 p-8 flex-col">
               <Link
                 title="Download for Linux"
                 className="no-underline hover:no-underline text-gray-900 dark:text-white hover:dark:text-violet-600 "
@@ -464,7 +462,7 @@ function RunAnywhere() {
 
 function MainFeatures() {
   return (
-    <section className="text-gray-600 dark:text-gray-300 dark:bg-zinc-800 bg-zinc-200 body-font py-24">
+    <section className="text-gray-600 dark:text-gray-300 dark:bg-zinc-900 bg-zinc-100 body-font py-24">
       <div className="container px-5 mx-auto flex flex-wrap">
         <div className="flex flex-col text-center w-full mb-5">
           <SectionTitle name="features" />
@@ -502,10 +500,6 @@ function MainFeatures() {
                   <FontAwesomeIcon icon={faGaugeHigh} className="text-purple-800 w-3 h-3 mt-1 mr-2" />
                   Start / Stop / Restart containers
                 </p>
-                <p className="leading-relaxed text-base list-disc">
-                  <FontAwesomeIcon icon={faRocket} className="text-purple-800 w-3 h-3 mt-1 mr-2" />
-                  Start / Stop / Restart pods
-                </p>
               </div>
             </div>
             <div className="p-4 md:w-1/4 flex">
@@ -569,6 +563,86 @@ function MainFeatures() {
   );
 }
 
+function Pods() {
+  return (
+    <section className="text-gray-600 dark:text-gray-300 dark:bg-zinc-800 bg-zinc-200 body-font py-24">
+      <div className="container px-5 mx-auto flex flex-wrap">
+        <div className="flex flex-col text-center w-full mb-5">
+          <SectionTitle name="features" />
+
+          <h2 className="max-w-lg mb-6 font-sans text-3xl font-bold leading-none tracking-tight text-gray-900 dark:text-white sm:text-4xl md:mx-auto">
+            Work with Pods and Kubernetes
+          </h2>
+        </div>
+        <div className="container px-5 pb-5 mx-auto">
+          <div className="flex flex-wrap sm:-m-4 -mx-4 -mb-10 -mt-4 md:space-y-0 space-y-6">
+            <div className="p-4 md:w-1/2 flex">
+              <div className="w-12 h-12 inline-flex items-center justify-center rounded-full bg-gray-400 text-purple-800 mb-4 flex-shrink-0">
+                <FontAwesomeIcon size="2x" icon={faGears} className="w-6 h-6 " />
+              </div>
+              <div className="flex-grow pl-6">
+                <h2 className="text-gray-900 dark:text-gray-100 text-lg title-font font-medium mb-2">
+                  Create and "Podify"
+                </h2>
+                <p className="leading-relaxed text-base list-disc">
+                  <FontAwesomeIcon icon={faDiagramProject} className="text-purple-800 w-3 h-3 mt-1 mr-2" />
+                  Create Pods from existing containers
+                </p>
+                <p className="leading-relaxed text-base list-disc">
+                  <FontAwesomeIcon icon={faGaugeHigh} className="text-purple-800 w-3 h-3 mt-1 mr-2" />
+                  Create, start, inspect and manage pods
+                </p>
+              </div>
+            </div>
+            <div className="p-4 md:w-1/2 flex">
+              <div className="w-12 h-12 inline-flex items-center justify-center rounded-full bg-gray-400 text-purple-900 mb-4 flex-shrink-0">
+                <FontAwesomeIcon size="2x" icon={faGaugeHigh} className="w-6 h-6 " />
+              </div>
+              <div className="flex-grow pl-6">
+                <h2 className="text-gray-900 dark:text-gray-100 text-lg title-font font-medium mb-2">Kubernetes</h2>
+                <p className="leading-relaxed text-base list-disc">
+                  <FontAwesomeIcon icon={faRocket} className="text-purple-800 w-3 h-3 mt-1 mr-2" />
+                  Play Kubernetes YAML directly with Podman Engine
+                </p>
+                <p className="leading-relaxed text-base list-disc">
+                  <FontAwesomeIcon icon={faRocket} className="text-purple-800 w-3 h-3 mt-1 mr-2" />
+                  Generate Kubernetes YAML from pods
+                </p>
+                <p className="leading-relaxed text-base list-disc">
+                  <FontAwesomeIcon icon={faRocket} className="text-purple-800 w-3 h-3 mt-1 mr-2" />
+                  Deploy to existing Kubernetes environments
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className="container px-5 mx-auto flex flex-wrap">
+        <div className="flex flex-col text-center w-full mb-5">
+          <Link
+            title="Discover More"
+            className="no-underline hover:no-underline text-gray-900 dark:text-white hover:dark:text-violet-600 "
+            to="/features">
+            <div className="mt-3 text-purple-900 dark:text-purple-400 inline-flex items-center">
+              Discover More
+              <svg
+                fill="none"
+                stroke="currentColor"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                className="w-4 h-4 ml-2"
+                viewBox="0 0 24 24">
+                <path d="M5 12h14M12 5l7 7-7 7"></path>
+              </svg>
+            </div>
+          </Link>
+        </div>
+      </div>
+    </section>
+  );
+}
+
 export default function Home(): JSX.Element {
   return (
     <Layout
@@ -578,6 +652,7 @@ export default function Home(): JSX.Element {
       <Hero />
       <RunAnywhere />
       <MainFeatures />
+      <Pods />
       <Configure />
       <Extensibility />
       <KeepUpToDate />