features

Author: petar-cvit

src/components/HomepageFeatures/index.js

@@ -2,44 +2,45 @@ import React from 'react';
 import clsx from 'clsx';
 import styles from './styles.module.css';
 
+import configurable from '/static/img/configuration.png';
+import unify from '/static/img/unification.png';
+import simple from '/static/img/simple.png';
+
 const FeatureList = [
-  // {
-  //   title: 'Easy to Use',
-  //   Svg: require('@site/static/img/undraw_docusaurus_mountain.svg').default,
-  //   description: (
-  //     <>
-  //       Docusaurus was designed from the ground up to be easily installed and
-  //       used to get your website up and running quickly.
-  //     </>
-  //   ),
-  // },
-  // {
-  //   title: 'Focus on What Matters',
-  //   Svg: require('@site/static/img/undraw_docusaurus_tree.svg').default,
-  //   description: (
-  //     <>
-  //       Docusaurus lets you focus on your docs, and we&apos;ll do the chores. Go
-  //       ahead and move your docs into the <code>docs</code> directory.
-  //     </>
-  //   ),
-  // },
-  // {
-  //   title: 'Powered by React',
-  //   Svg: require('@site/static/img/undraw_docusaurus_react.svg').default,
-  //   description: (
-  //     <>
-  //       Extend or customize your website layout by reusing React. Docusaurus can
-  //       be extended while reusing the same header and footer.
-  //     </>
-  //   ),
-  // },
+  {
+    title: 'Configurable',
+    svg: configurable,
+    description: (
+      <>
+        Fully configurable UI that allows you you to deploy any K8s resource
+      </>
+    ),
+  },
+  {
+    title: 'Unifying',
+    svg: unify,
+    description: (
+      <>
+        Unify all applications under the same set of best practices
+      </>
+    ),
+  },
+  {
+    title: 'Simple',
+    svg: simple,
+    description: (
+      <>
+        Deploy your applications in a couple of clicks
+      </>
+    ),
+  },
 ];
 
-function Feature({Svg, title, description}) {
+function Feature({svg, title, description}) {
   return (
     <div className={clsx('col col--4')}>
       <div className="text--center">
-        <Svg className={styles.featureSvg} role="img" />
+          <img width={100} src={svg} />
       </div>
       <div className="text--center padding-horiz--md">
         <h3>{title}</h3>

src/pages/index.js

@@ -4,75 +4,38 @@ import Link from '@docusaurus/Link';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import Layout from '@theme/Layout';
 import HomepageFeatures from '@site/src/components/HomepageFeatures';
-import helmsman from '/static/img/cyclops_helmsman.png';
 
 import styles from './index.module.css';
 
 function HomepageHeader() {
-  const {siteConfig} = useDocusaurusContext();
-  return (
-    <header className={clsx('hero hero--primary', styles.heroBanner)}>
-      <div className="container">
-        <h1 className="hero__title">{siteConfig.title}</h1>
-        <p className="hero__subtitle">{siteConfig.tagline}</p>
-        <div className={styles.buttons}>
-          {/*<Link*/}
-          {/*  className="button button--secondary button--lg"*/}
-          {/*  to="/docs/intro">*/}
-          {/*  Docusaurus Tutorial - 5min ⏱️*/}
-          {/*</Link>*/}
-        </div>
-      </div>
-    </header>
-  );
+    const {siteConfig} = useDocusaurusContext();
+    return (
+        <header className={clsx('hero hero--primary', styles.heroBanner)}>
+            <div className="container">
+                <h1 className="hero__title">{siteConfig.title}</h1>
+                <p className="hero__subtitle">{siteConfig.tagline}</p>
+                <div className={styles.buttons}>
+                    <Link
+                        className="button button--secondary button--lg"
+                        to="/docs/installation/prerequisites">
+                        Deploy your first Cyclops module
+                    </Link>
+                </div>
+            </div>
+        </header>
+    );
 }
 
 export default function Home() {
-  const yamlString = 'apiVersion: apps/v1\n' +
-      'kind: Deployment\n' +
-      'metadata:\n' +
-      '  name: nginx-deployment\n' +
-      '  labels:\n' +
-      '    app: nginx\n' +
-      'spec:\n' +
-      '  replicas: 3\n' +
-      '  selector:\n' +
-      '    matchLabels:\n' +
-      '      app: nginx\n' +
-      '  template:\n' +
-      '    metadata:\n' +
-      '      labels:\n' +
-      '        app: nginx\n' +
-      '    spec:\n' +
-      '      containers:\n' +
-      '      - name: nginx\n' +
-      '        image: nginx:1.14.2\n' +
-      '        ports:\n' +
-      '        - containerPort: 80';
-
-  const {siteConfig} = useDocusaurusContext();
-  return (
-    <Layout
-      title={`${siteConfig.title}`}
-      description="Developer friendly Kubernetes">
-      <HomepageHeader />
-      <main>
-          <img src={helmsman} />
-
-          {/*<SyntaxHighlighter*/}
-          {/*    language="yaml"*/}
-          {/*    style={atomOneDark}*/}
-          {/*    customStyle={{*/}
-          {/*        borderBottomLeftRadius: '10px',*/}
-          {/*        borderBottomRightRadius: '10px',*/}
-          {/*        paddingLeft: '15px',*/}
-          {/*        width: '30%',*/}
-          {/*    }}*/}
-          {/*>*/}
-          {/*    {yamlString}*/}
-          {/*</SyntaxHighlighter>*/}
-        <HomepageFeatures />
-      </main>
-    </Layout>
-  );
-}
+    const {siteConfig} = useDocusaurusContext();
+    return (
+        <Layout
+            title={`Hello from ${siteConfig.title}`}
+            description="Description will go into a meta tag in <head />">
+            <HomepageHeader />
+            <main>
+                <HomepageFeatures />
+            </main>
+        </Layout>
+    );
+}