Add teaser section
diff --git a/website-v2/docusaurus.config.js b/website-v2/docusaurus.config.js
index bc01ade..b67e763 100644
--- a/website-v2/docusaurus.config.js
+++ b/website-v2/docusaurus.config.js
@@ -24,7 +24,7 @@
"/css/all.min.css",
"/css/bootstrap.min.css",
- "/css/button.css",
+ "/css/buttons.css",
"/css/responsive.css",
"/css/team.css",
"/css/custom-website.css",
diff --git a/website-v2/src/components/Teaser.tsx b/website-v2/src/components/Teaser.tsx
new file mode 100644
index 0000000..e244fde
--- /dev/null
+++ b/website-v2/src/components/Teaser.tsx
@@ -0,0 +1,70 @@
+import React, { FC } from 'react';
+import TeaserFeature from './TeaserFeature';
+
+const Teaser = (props) => (
+ <>
+ <section className="elements-area">
+ <div className={"top-claim-area"}>
+ {/*<h1 className="header-apache-text">Apache <span className="sp-green">S</span><span*/}
+ {/* className="sp-blue">tream</span><span className="sp-green">P</span><span*/}
+ {/* className="sp-blue">ipes</span>*/}
+ {/*</h1>*/}
+ <div className={"top-claim-area-subtitle"}>
+ <span className={"top-claim-area-subtitle-text"}>All-In-One</span>
+ </div>
+ <div className={"top-claim-area-main-title"}>
+ Industrial IoT Toolbox
+ </div>
+ </div>
+ <div className="apache-teaser">Apache StreamPipes is a self-service Industrial IoT toolbox to enable non-technical
+ users to
+ connect, analyze and explore IoT data streams.
+ </div>
+ <div className={"after-apache-teaser"}></div>
+ <div className={"teaser-actions text-center"}>
+ <a href="/download" className="sp-button sp-button-large sp-button-blue sp-button-margin"><i
+ className="fas fa-rocket"></i> Get started</a>
+ <a href="/docs/user-guide-introduction"
+ className="sp-button sp-button-large sp-button-gray sp-button-margin"><i
+ className="fas fa-book"></i> Documentation
+ </a>
+ <a href="https://www.github.com/apache/streampipes"
+ className="sp-button sp-button-large sp-button-gray sp-button-margin"><i
+ className="fab fa-github"></i> Github
+ </a>
+ </div>
+
+ <div className="container-header teaser-image">
+ <div className="row">
+ <div className="col-12 col-lg-4">
+ <TeaserFeature
+ icon={"fa-table-columns"}
+ title={"Easy to use"}
+ subtitle={"Intuitive web-based user interface"}>
+ </TeaserFeature>
+ </div>
+ <div className="col-12 col-lg-4">
+ <TeaserFeature
+ icon={"fa-bolt"}
+ title={"Powerful"}
+ subtitle={"Quickly implement your IIoT use cases"}>
+ </TeaserFeature>
+ </div>
+ <div className="col-12 col-lg-4">
+ <TeaserFeature
+ icon={"fa-code"}
+ title={"Extensible"}
+ subtitle={"Developer tools for Java, Python and TypeScript"}>
+ </TeaserFeature>
+ </div>
+ {/*<a href="https://www.apache.org/events/current-event.html">*/}
+ {/* <img src="https://www.apache.org/events/current-event-125x125.png"*/}
+ {/* className={"event-image"}/>*/}
+ {/*</a>*/}
+ </div>
+ </div>
+ </section>
+ </>
+)
+
+export default Teaser;
diff --git a/website-v2/src/components/TeaserFeature.tsx b/website-v2/src/components/TeaserFeature.tsx
new file mode 100644
index 0000000..e34a692
--- /dev/null
+++ b/website-v2/src/components/TeaserFeature.tsx
@@ -0,0 +1,18 @@
+import React, { FC } from 'react';
+
+const TeaserFeature = (props) => (
+ <>
+ <div className="feature-highlights d-flex justify-content-center flex-column">
+ <span className="feature-highlights-icon">
+ <i className={`fas ${props.icon}`}></i>
+ </span>
+ <div className="feature-highlights-title">{props.title}</div>
+ <div
+ className="feature-highlights-subtitle">{props.subtitle}
+ </div>
+ </div>
+ </>
+)
+
+export default TeaserFeature;
+
diff --git a/website-v2/src/components/home/LovedByDevelopers.tsx b/website-v2/src/components/home/LovedByDevelopers.tsx
new file mode 100644
index 0000000..61611af
--- /dev/null
+++ b/website-v2/src/components/home/LovedByDevelopers.tsx
@@ -0,0 +1,22 @@
+import React, { FC } from 'react';
+
+const LovedByDevelopers = (props) => (
+ <>
+ <div className="page-banner-area">
+ <div className="container h-100">
+ <div className="row h-100 align-items-center">
+ <div className="col-12">
+ <div className="page-banner-content">
+ <h2>
+ {props.title}
+ </h2>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ </>
+)
+
+export default LovedByDevelopers;
diff --git a/website-v2/src/components/home/LovedByUsers.tsx b/website-v2/src/components/home/LovedByUsers.tsx
new file mode 100644
index 0000000..b668139
--- /dev/null
+++ b/website-v2/src/components/home/LovedByUsers.tsx
@@ -0,0 +1,22 @@
+import React, { FC } from 'react';
+
+const LovedByUsers = (props) => (
+ <>
+ <div className="page-banner-area">
+ <div className="container h-100">
+ <div className="row h-100 align-items-center">
+ <div className="col-12">
+ <div className="page-banner-content">
+ <h2>
+ {props.title}
+ </h2>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ </>
+)
+
+export default LovedByUsers;
diff --git a/website-v2/src/components/home/MadeForIIoT.tsx b/website-v2/src/components/home/MadeForIIoT.tsx
new file mode 100644
index 0000000..3ed1dba
--- /dev/null
+++ b/website-v2/src/components/home/MadeForIIoT.tsx
@@ -0,0 +1,22 @@
+import React, { FC } from 'react';
+
+const MadeForIIoT = (props) => (
+ <>
+ <div className="page-banner-area">
+ <div className="container h-100">
+ <div className="row h-100 align-items-center">
+ <div className="col-12">
+ <div className="page-banner-content">
+ <h2>
+ {props.title}
+ </h2>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ </>
+)
+
+export default MadeForIIoT;
diff --git a/website-v2/src/pages/index.js b/website-v2/src/pages/index.js
index a225238..e93e1ad 100644
--- a/website-v2/src/pages/index.js
+++ b/website-v2/src/pages/index.js
@@ -1,7 +1,17 @@
import Layout from "@theme/Layout";
- import React from "react";
+import React from "react";
+import Teaser from "../components/Teaser";
+import LovedByDevelopers from "../components/home/LovedByDevelopers";
+import LovedByUsers from "../components/home/LovedByUsers";
+import MadeForIIoT from "../components/home/MadeForIIoT";
- export default () => {
- return <Layout />;
- };
-
\ No newline at end of file
+export default () => {
+ return (
+ <Layout>
+ <Teaser></Teaser>
+ <MadeForIIoT></MadeForIIoT>
+ <LovedByUsers></LovedByUsers>
+ <LovedByDevelopers></LovedByDevelopers>
+ </Layout>
+ )
+};
diff --git a/website-v2/static/css/buttons.css b/website-v2/static/css/buttons.css
index 38e7580..0f23912 100644
--- a/website-v2/static/css/buttons.css
+++ b/website-v2/static/css/buttons.css
@@ -20,7 +20,7 @@
display: inline-block ;
vertical-align: middle;
border: 0;
- border-radius: 3px;
+ border-radius: 25px;
cursor: pointer;
font-family: inherit;
font-weight: bold;
@@ -65,4 +65,4 @@
.sp-button.sp-button-blue {
background: rgb(27, 20, 100);
color: rgba(255, 255, 255, 0.75);
-}
\ No newline at end of file
+}
diff --git a/website-v2/static/css/custom-website.css b/website-v2/static/css/custom-website.css
index bb91a83..51bffff 100644
--- a/website-v2/static/css/custom-website.css
+++ b/website-v2/static/css/custom-website.css
@@ -276,13 +276,13 @@
}
.sp-button-margin {
- margin-bottom:10px;
+ margin-left: 5px;
+ margin-right: 5px;
}
.container-header {
- padding-left:80px;
- padding-right:20px;
- width:100%;
+ margin: 4rem;
+ border-radius: 15px;
}
.header-apache-text {
@@ -298,25 +298,32 @@
}
.feature-highlights {
- margin-top: 16px;
- margin-bottom: 16px;
font-size:18pt;
width:100%;
+ background: rgba(255, 255, 255, 0.85);
+ height: 250px;
+ border-radius: 10px;
+ text-align: center;
+ padding: 15px;
}
.feature-highlights-icon {
margin-right:10px;
+ color: var(--color-accent);
+ font-size: 3rem;
}
-.feature-highlights-text {
- border-bottom: 1px solid rgb(204, 217, 223);
- padding-bottom: 10px;
+.feature-highlights-title {
+ font-weight: 800;
+ color: var(--color-accent);
+ font-size: 2rem;
}
-.feature-highlights-bg {
- background: rgb(57,181,74);
- color:white;
+.feature-highlights-subtitle {
+ color:var(--color-primary);
padding:3px;
+ font-weight: 500;
+ font-size: 1.25rem;
}
.sp-blue {
@@ -328,12 +335,10 @@
}
.apache-teaser {
- position: relative;
- padding-left: 1em;
- border-left: 0.2em solid rgb(57,181,74);
+ text-align: center;
font-family: 'Roboto', serif;
font-size: 16pt;
- font-weight: 100;
+ font-weight: 500;
}
.apache-teaser:before, .apache-teaser:after {
@@ -375,7 +380,100 @@
font-weight: 500;
}
+.h-100 {
+ height: 100%;
+}
+.teaser-image {
+ background-image:url('/img/bg-img/bg-index-color.png');
+ //background:linear-gradient(0deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7)), url('/img/bg-img/bg-index-color.png');
+ background-size:cover;
+ border-radius: 10px;
+ max-width: 1100px;
+ margin-left: auto;
+ margin-right: auto;
+ padding: 20px;
+}
+
+.teaser-text-area {
+ background:rgba(255, 255, 255, 0.95);
+ margin-top:50px;
+ margin-bottom:50px;
+ padding:35px;
+ border-radius:15px;
+ display:inline-block;
+ max-width:750px;
+}
+
+.ml-0 {
+ margin-left: 0;
+}
+
+.mb-20 {
+ margin-bottom: 20px;
+}
+
+.mt-10 {
+ margin-top: 10px;
+}
+
+.mr-0 {
+ margin-right: 0;
+}
+
+.event-image {
+ position:absolute;
+ bottom:50px;
+ float:right;
+ margin-left:20px;
+ margin-right:-10px;
+ margin-top:50px;
+}
+
+.top-claim-area {
+ margin-top: 3rem;
+ text-align: center;
+}
+
+.top-claim-area-subtitle {
+
+}
+
+.top-claim-area-subtitle-text {
+ text-transform: uppercase;
+ color: var(--color-accent);
+ font-weight: 800;
+ font-size: 2rem;
+ padding: 10px;
+}
+
+.top-claim-area-main-title {
+ font-weight: 800;
+ font-size: 6rem;
+ color: var(--color-primary);
+}
+
+.top-claim-area-main-title:after {
+ content: '';
+ width: 125px;
+ border-bottom: var(--color-accent) 8px solid;
+ display: block;
+ margin: 12px auto;
+ left: 50%;
+}
+
+.after-apache-teaser:before {
+ content: '';
+ width: 125px;
+ border-bottom: var(--color-accent) 8px solid;
+ display: block;
+ margin: 12px auto;
+ left: 50%;
+}
+
+.teaser-actions {
+ margin-top: 25px;
+}
diff --git a/website-v2/static/img/bg-img/bg-index-color.png b/website-v2/static/img/bg-img/bg-index-color.png
new file mode 100644
index 0000000..889e744
--- /dev/null
+++ b/website-v2/static/img/bg-img/bg-index-color.png
Binary files differ
