This is an automated email from the ASF dual-hosted git repository.
riemer pushed a commit to branch improved-website
in repository https://gitbox.apache.org/repos/asf/streampipes-website.git
The following commit(s) were added to refs/heads/improved-website by this push:
new 236080c8 Add new content to homepage
236080c8 is described below
commit 236080c8f0c70b654cfb4338650bb82464799f44
Author: Dominik Riemer <[email protected]>
AuthorDate: Tue Jul 11 23:43:01 2023 +0200
Add new content to homepage
---
.../src/components/FeatureItemHorizontal.tsx | 28 +++++
website-v2/src/components/PageSection.tsx | 10 +-
website-v2/src/components/PageSectionTitle.tsx | 2 +-
website-v2/src/components/Subsection.tsx | 13 +++
website-v2/src/components/SupportLink.tsx | 17 +++
website-v2/src/components/Teaser.tsx | 119 +++++++++++----------
.../src/components/TwoColumnFeatureSection.tsx | 21 ++++
.../src/components/home/LovedByDevelopers.tsx | 74 ++++++++++++-
website-v2/src/components/home/LovedByUsers.tsx | 55 +++++++++-
website-v2/src/components/home/MadeForIIoT.tsx | 3 +-
.../src/components/home/ReadyforProduction.tsx | 60 +++++++++++
website-v2/src/components/home/Support.tsx | 31 ++++++
website-v2/src/css/customTheme.css | 4 +
website-v2/src/css/page-section.scss | 6 +-
website-v2/src/pages/index.js | 4 +
website-v2/static/css/custom-website.css | 58 +++++++---
website-v2/static/css/page-banner.css | 6 +-
website-v2/static/img/bg-img/bg-index-color.png | Bin 8674905 -> 0 bytes
website-v2/static/img/bg-img/bg-index.jpg | Bin 541592 -> 0 bytes
website-v2/static/img/bg-img/sp.png | Bin 0 -> 278635 bytes
.../static}/img/open_source/icon-docker.png | Bin
.../static}/img/open_source/icon-docs.png | Bin
.../static}/img/open_source/icon-github.png | Bin
.../static}/img/open_source/icon-mail.png | Bin
.../static}/img/open_source/icon-pypi.png | Bin
.../static}/img/open_source/icon-stackoverflow.png | Bin
.../static}/img/open_source/icon-twitter.png | Bin
.../static}/img/screenshots/connect-customize.png | Bin
.../static}/img/screenshots/live-dashboard.png | Bin
.../img/screenshots/pipeline-customization.png | Bin
.../static}/img/screenshots/pipeline-details.png | Bin
.../static}/img/screenshots/pipeline-editor-2.png | Bin
.../img/screenshots/pipeline-editor-sources.png | Bin
.../static}/img/screenshots/pipeline-editor.png | Bin
.../screenshots/pipeline-element-marketplace.png | Bin
.../static}/img/screenshots/pipeline-overview.png | Bin
.../static/img/screenshots/python-client.png | Bin 0 -> 85636 bytes
.../static/img/screenshots/python-onlineml.png | Bin 0 -> 117879 bytes
.../static/img/screenshots/sdk-data-processor.png | Bin 0 -> 155758 bytes
.../static}/img/screenshots/sp-connect.png | Bin
.../img/screenshots/sp-dashboard-config.png | Bin
.../static}/img/screenshots/sp-dashboard.png | Bin
.../img/screenshots/sp-data-explorer-config.png | Bin
.../img/screenshots/sp-data-explorer-heatmap.png | Bin
.../img/screenshots/sp-editor-config-trend.png | Bin
.../static}/img/screenshots/sp-editor-pipeline.png | Bin
.../static}/img/screenshots/sp-explorer-ts.png | Bin
.../screenshots/sp-install-pipeline-elements.png | Bin
.../static}/img/screenshots/sp-user-management.png | Bin
.../static}/img/screenshots/start-pipeline.png | Bin
.../static/img/screenshots/streampipes-cli.png | Bin 0 -> 198951 bytes
.../img/screenshots/streampipes-connect-opcua.png | Bin 0 -> 182453 bytes
.../screenshots/streampipes-connect-overview.png | Bin 0 -> 190502 bytes
.../streampipes-connect-schema-editor.png | Bin 0 -> 222854 bytes
.../img/screenshots/streampipes-custom-ui.png | Bin 0 -> 79589 bytes
.../screenshots/streampipes-mail-configuration.png | Bin 0 -> 122553 bytes
.../img/screenshots/streampipes-overview.png | Bin
.../screenshots/streampipes-user-management.png | Bin 0 -> 198372 bytes
58 files changed, 426 insertions(+), 85 deletions(-)
diff --git a/website-v2/src/components/FeatureItemHorizontal.tsx
b/website-v2/src/components/FeatureItemHorizontal.tsx
new file mode 100644
index 00000000..9b735561
--- /dev/null
+++ b/website-v2/src/components/FeatureItemHorizontal.tsx
@@ -0,0 +1,28 @@
+import React, { Children, FC } from 'react';
+
+const FeatureItemHorizontal = (props) => (
+ <>
+ <section className="elements-area section-padding-50">
+ <div className="container">
+ <div className="row">
+ <div className="col-md-4 col-12">
+ <div className="single-service-area">
+ <h2 className={"feature-hz-number"}>{props.featureNumber}</h2>
+ <h4 className={"feature-hz-title"}>{props.title}</h4>
+ {props.children}
+ </div>
+ </div>
+ <div className="col-md-8">
+ {props.images.map(image => {
+ return (<img className="d-block w-100 mt-2 mb-2" src={image.src}
alt={image.alt}/>)
+ })}
+ </div>
+ </div>
+ <hr style={{marginTop: '20px', marginBottom: '20px'}}/>
+ </div>
+ </section>
+ </>
+)
+
+export default FeatureItemHorizontal;
+
diff --git a/website-v2/src/components/PageSection.tsx
b/website-v2/src/components/PageSection.tsx
index 829e88ad..8a7ffdbc 100644
--- a/website-v2/src/components/PageSection.tsx
+++ b/website-v2/src/components/PageSection.tsx
@@ -7,14 +7,16 @@ const PageSection = (props) => {
const alignCenter = props.alignCenter ? 'align-items-center' : '';
const alignContentCenter = props.alignContentCenter ? 'text-center
justify-content-center' : '';
+ const lightModeClass = props.lightMode ? 'text-light' : '';
+
return (
<>
- <section className={`pt-10 pt-md-12 ${props.backgroundClass}`}>
- <div className="container-lg">
+ <section className={`pt-5 pb-5 pt-md-12 ${props.backgroundClass}`}>
+ <div className="container">
<div className={`row align-items-center ${alignCenter}`}>
<div className={"col-12"}>
- <PageSectionTitle title={props.sectionTitle}
subtitle={"test"}></PageSectionTitle>
- <div className={`col-lg-12 col-md-12 order-md-0
${alignContentCenter}`}>
+ <PageSectionTitle title={props.sectionTitle}
sectionSubtitle={props.sectionSubtitle}
lightMode={props.lightMode}></PageSectionTitle>
+ <div className={`col-lg-12 col-md-12 order-md-0
${alignContentCenter} ${lightModeClass}`}>
{props.children}
</div>
</div>
diff --git a/website-v2/src/components/PageSectionTitle.tsx
b/website-v2/src/components/PageSectionTitle.tsx
index b0c608ab..09758298 100644
--- a/website-v2/src/components/PageSectionTitle.tsx
+++ b/website-v2/src/components/PageSectionTitle.tsx
@@ -11,7 +11,7 @@ const PageSectionTitle = (props) => {
return (
<div className={`section-title ${largeSectionClass} ${alignClass}`}>
{
- props.subtitle ? (<span className="sub-title">{props.subtitle}</span>)
: (<span></span>)
+ props.sectionSubtitle ? (<span
className="sub-title">{props.sectionSubtitle}</span>) : (<span></span>)
}
{
props.title ? (<h2 className={`${titleClass} mb-4`}>{props.title}</h2>)
diff --git a/website-v2/src/components/Subsection.tsx
b/website-v2/src/components/Subsection.tsx
new file mode 100644
index 00000000..ef496081
--- /dev/null
+++ b/website-v2/src/components/Subsection.tsx
@@ -0,0 +1,13 @@
+import React, { FC } from 'react';
+
+const Subsection = (props) => (
+ <>
+ <div className={"h-100 d-flex flex-column justify-content-center"}>
+ <h1 className={"color-primary"}>{props.title}</h1>
+ {props.children}
+ </div>
+
+ </>
+)
+
+export default Subsection;
diff --git a/website-v2/src/components/SupportLink.tsx
b/website-v2/src/components/SupportLink.tsx
new file mode 100644
index 00000000..b4754efd
--- /dev/null
+++ b/website-v2/src/components/SupportLink.tsx
@@ -0,0 +1,17 @@
+
+import React, { FC } from 'react';
+
+const SupportLink = (props) => (
+<>
+ <div className="support-links-area">
+ <div className="more-service-content text-center" data-wow-delay=".1s">
+ <a href={props.href}>
+ <img src={props.imageSrc} alt=""/>
+ <h4>{props.label}</h4>
+ </a>
+ </div>
+ </div>
+</>
+)
+
+export default SupportLink;
diff --git a/website-v2/src/components/Teaser.tsx
b/website-v2/src/components/Teaser.tsx
index e244fdec..a2aa85db 100644
--- a/website-v2/src/components/Teaser.tsx
+++ b/website-v2/src/components/Teaser.tsx
@@ -1,68 +1,77 @@
import React, { FC } from 'react';
import TeaserFeature from './TeaserFeature';
+import CircleContainer from './CircleContainer';
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={"row"}>
+ <div className={"col-9 container-lg d-flex align-items-center
justify-content-center"}>
+ <div className={"left-claim-section"}>
+ <div className={"top-claim-area"}>
+ <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-download"></i> Download</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 className="container-header">
+ <div className="row">
+ <div className="col-12 col-lg-4">
+ <TeaserFeature
+ icon={"fa-table-columns"}
+ title={"Easy to use"}
+ subtitle={"Intuitive and fully integrated 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>
</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 className={"col-3 teaser-image"}>
</div>
</div>
+
+
+
</section>
</>
)
diff --git a/website-v2/src/components/TwoColumnFeatureSection.tsx
b/website-v2/src/components/TwoColumnFeatureSection.tsx
new file mode 100644
index 00000000..05d6c48a
--- /dev/null
+++ b/website-v2/src/components/TwoColumnFeatureSection.tsx
@@ -0,0 +1,21 @@
+import React, { FC } from 'react';
+
+const TwoColumnFeatureSection = (props) => {
+
+ return (
+ <>
+ <div className="container-lg mb-5 mt-5">
+ <div className="row">
+ <div className="col-lg-6 col-md-12 order-md-0">
+ {props.children[0]}
+ </div>
+ <div className="col-lg-6 col-md-12 order-md-1">
+ {props.children[1]}
+ </div>
+ </div>
+ </div>
+ </>
+ )
+}
+
+export default TwoColumnFeatureSection;
diff --git a/website-v2/src/components/home/LovedByDevelopers.tsx
b/website-v2/src/components/home/LovedByDevelopers.tsx
index c7d90742..a93c3bca 100644
--- a/website-v2/src/components/home/LovedByDevelopers.tsx
+++ b/website-v2/src/components/home/LovedByDevelopers.tsx
@@ -1,11 +1,83 @@
import React, { FC } from 'react';
import PageSection from '../PageSection';
+import TwoColumnFeatureSection from '../TwoColumnFeatureSection';
+import Subsection from '../Subsection';
const LovedByDevelopers = (props) => (
<>
<>
- <PageSection sectionTitle={"Loved by Developers"}
backgroundClass={"background-primary-light"}>
+ <PageSection sectionTitle={"First-class developer support"}
sectionSubtitle={"Easy to customize & extend"}
+ backgroundClass={"background-primary-light"}>
+ <div className={"text-center"}>Apache StreamPipes is a great platform
for developers: Implement custom adapters,
+ data processors or sinks and install them at runtime.<br/> Use
StreamPipes Functions to define processing
+ logic based on real-time IIoT data.<br/> Or use the client
libraries, available in Java and Python, to
+ interact with live and historical data in an easy way.
+ </div>
+ <TwoColumnFeatureSection>
+ <Subsection title={"Add your own extensions with the Software
Development Kit"}>
+ <p className={"text-left"}>It is easy to extend StreamPipes.
Whether you need connectivity to a proprietary
+ data source, want to
+ implement your custom-tailored algorithm as a pipeline element
or need a new interface to your third party
+ system: Simply use the SDK to extend the functionality of
StreamPipes.</p>
+ <p className={"text-left"}>
+ With its microservice architecture at its core, you can install
your extensions at any time without the
+ need to restart the whole system.
+ </p>
+ </Subsection>
+ <div>
+ <img className="d-block w-100 mt-2 mb-2"
src={"/img/screenshots/sdk-data-processor.png"} alt={"Online ML"}/>
+ </div>
+ </TwoColumnFeatureSection>
+ <TwoColumnFeatureSection>
+ <div>
+ <img className="d-block w-100 mt-2 mb-2"
src={"/img/screenshots/python-client.png"} alt={"Online ML"}/>
+ </div>
+ <Subsection title={"Interact with StreamPipes through our client
libraries"}>
+ <p className={"text-left"}>
+ StreamPipes includes Java and Python libraries which allow you
to interact with StreamPipes
+ programmatically.
+ </p>
+ <p className={"text-left"}>
+ You can modify the pipeline lifecycle, receive live data from
all connected sources in a unified API, and
+ Data Scientists love the possibility to extract historical data
directly into Pandas data frames for
+ in-depth analysis.
+ </p>
+
+ <p className={"text-left"}>And of course, you can also just use
the provided REST interface!</p>
+ </Subsection>
+ </TwoColumnFeatureSection>
+ <TwoColumnFeatureSection>
+ <Subsection title={"Seamlessly integrate AI & Machine Learning"}>
+ <p className={"text-left"}>
+ Our Python client includes an integration with the OnlineML
library River, so that you can get started
+ with your custom anomaly detection and other ML features with
just a few lines of code.
+ </p>
+ <p className={"text-left"}>
+ But you can also integrate other ML models, and play back the
results in form of a new data stream to
+ StreamPipes.
+ </p>
+ </Subsection>
+ <div>
+ <img className="d-block w-100 mt-2 mb-2"
src={"/img/screenshots/python-onlineml.png"} alt={"Online ML"}/>
+ </div>
+ </TwoColumnFeatureSection>
+ <TwoColumnFeatureSection>
+ <div>
+ <img className="d-block w-100 mt-2 mb-2"
src={"/img/screenshots/streampipes-custom-ui.png"} alt={"Online ML"}/>
+ </div>
+ <Subsection title={"Customized User Interfaces"}>
+ <p className={"text-left"}>
+ As a software platform that targets the Industrial IoT, we know
that many applications require their own user interface, for instance, to
assist maintenance personnel or to visualize machine behaviour.
+ </p>
+ <p className={"text-left"}>
+ The default user interface of StreamPipes can be extended with
additional views by an integrated microfrontend framework.
+ </p>
+ <p className={"text-left"}>
+ A Typescript client library and an API to access platform
features help you to build your custom IIoT solution with much less programming
effort.
+ </p>
+ </Subsection>
+ </TwoColumnFeatureSection>
</PageSection>
</>
diff --git a/website-v2/src/components/home/LovedByUsers.tsx
b/website-v2/src/components/home/LovedByUsers.tsx
index b2fb4026..ad03d173 100644
--- a/website-v2/src/components/home/LovedByUsers.tsx
+++ b/website-v2/src/components/home/LovedByUsers.tsx
@@ -1,11 +1,62 @@
import React, { FC } from 'react';
import PageSection from '../PageSection';
+import FeatureItemHorizontal from '../FeatureItemHorizontal';
const LovedByUsers = (props) => (
<>
<>
- <PageSection sectionTitle={"Loved by Users"}
backgroundClass={"background-white"}>
-
+ <PageSection sectionTitle={"A single user interface for everything."}
+ sectionSubtitle={"No more application wiring"}
backgroundClass={"background-white"}>
+ <FeatureItemHorizontal featureNumber={"01."} title={"IIoT
Connectivity"}
+ images={[{src:
"/img/screenshots/streampipes-connect-overview.png", alt: "StreamPipes
Connect"},
+ {src:
"/img/screenshots/streampipes-connect-opcua.png", alt: "StreamPipes Connect
OPC-UA Browser"},
+ {src:
"/img/screenshots/streampipes-connect-schema-editor.png", alt: "StreamPipes
Connect Schema Editor"}]}>
+ <p className={"text-left"}>Integrate data streams using the built-in
StreamPipes Connect library
+ with support many industrial protoocls such as S7, MQTT, Modbus,
OPC-UA and many other IT protocols such as Apache Kafka and Apache Pulsar.</p>
+ <hr/>
+ <p><b>Some included adapters and integrations:</b></p>
+ <p className={"text-left"}>
+ <a href="https://kafka.apache.org";>Apache Kafka</a>,
+ <a href="https://pulsar.apache.org";>Apache Pulsar</a>,
+ <a href="https://plc4x.apache.org";>Apache PLC4X (e.g., S7</a>,
+ <a href="https://www.ros.org";>Robot Operating System (ROS)</a>,
+ OPC-UA, MQTT and more.
+ </p>
+ <hr/>
+ <p className={"text-left"}>Adapters can be easily configured right
from the user interface - with an intuitive
+ configuration
+ menu.</p>
+ <p className={"text-left"}>Pre-processing rules can be added to
harmonize data before ingestion, e.g.,
+ transformation of
+ measurement units.</p>
+ </FeatureItemHorizontal>
+ <FeatureItemHorizontal featureNumber={"02."} title={"Analyze"}
images={[{src: "/img/screenshots/sp-editor-pipeline.png", alt: "StreamPipes
Pipeline Editor"}, {src: "/img/screenshots/sp-editor-config-trend.png", alt:
"Pipeline Editor Configuration"}]}>
+ <p className={"text-left"}>Harmonize and analyze data by using the
real-time algorithm toolbox ranging from simple filters up to pre-trained
neural networks - or build your own algorithm with the provided SDK.</p>
+ <hr/>
+ <p className={"text-left"}><b>Some included data processors:</b></p>
+ <p className={"text-left"}>
+ Trend Detection, Peak Detection, Numerical Filter, Sequence,
Boilerplate Removal, Event Rate, Field Converter, Frequency Calculation,
+ Generic image Classification, Measurement Unit Converter,
Projection, Timestamp Enricher, Trigonometry Functions and many more.
+ </p>
+ <hr/>
+ <p>Our pipeline elements focus on analyzing industrial IoT data -
for instance, we provide many operators to transform process data from PLC
systems.</p>
+ </FeatureItemHorizontal>
+ <FeatureItemHorizontal featureNumber={"03."} title={"Exploit"}
images={[{src: "/img/screenshots/sp-explorer-ts.png", alt: "StreamPipes Data
Explorer Time Series Chart"}, {src:
"/img/screenshots/sp-data-explorer-config.png", alt: "Data Explorer Widgets"},
{src: "/img/screenshots/sp-dashboard.png", alt: "Live Dashboard"}]}>
+ <p className={"text-left"}>Trigger notifications, configure your
real-time dashboard or send data to third-party systems such as databases
(e.g., Kafka or Elasticsearch), external services (e.g., Slack) or IoT
actuators.</p>
+ <hr/>
+ <p className={"text-left"}><b>Some included data sinks:</b></p>
+ <p>
+ <a href="https://kafka.apache.org";>Apache Kafka</a>,
+ <a href="https://pulsar.apache.org";>Apache Pulsar</a>,
+ <a href="https://couchdb.apache.org";>Apache CouchDB</a>,
+ <a href="https://iotdb.apache.org";>Apache IoTDB</a>,
+ OPC-UA, RabbitMQ, Email, Slack, Internal Notification, PostgreSQL
and more.
+ </p>
+ <hr/>
+ <p className={"text-left"}>The brand-new data explorer gives you an
intuitive and feature-rich component to visually analyze persisted time-series
data and comes with ready-to-use visualizations such as heatmaps, value
distribution charts or time-series charts.</p>
+ <hr/>
+ <p className={"text-left"}>Use the live dashboard to visualize data
in real-time, e.g., show critical values directly on the shopfloor.</p>
+ </FeatureItemHorizontal>
</PageSection>
</>
diff --git a/website-v2/src/components/home/MadeForIIoT.tsx
b/website-v2/src/components/home/MadeForIIoT.tsx
index bc39384f..8c0531ee 100644
--- a/website-v2/src/components/home/MadeForIIoT.tsx
+++ b/website-v2/src/components/home/MadeForIIoT.tsx
@@ -3,7 +3,8 @@ import PageSection from '../PageSection';
const MadeForIIoT = (props) => (
<>
- <PageSection sectionTitle={"Made for the Industrial IoT"}
backgroundClass={"background-primary-light"}>
+ <PageSection sectionTitle={"Made for the Industrial IoT"}
sectionSubtitle={"Quick-start your IIoT initiative"}
+ backgroundClass={"background-primary-light"}>
</PageSection>
diff --git a/website-v2/src/components/home/ReadyforProduction.tsx
b/website-v2/src/components/home/ReadyforProduction.tsx
new file mode 100644
index 00000000..df479a95
--- /dev/null
+++ b/website-v2/src/components/home/ReadyforProduction.tsx
@@ -0,0 +1,60 @@
+import React, { FC } from 'react';
+import PageSection from '../PageSection';
+import Subsection from '../Subsection';
+import TwoColumnFeatureSection from '../TwoColumnFeatureSection';
+
+const ReadyforProduction = (props) => (
+ <>
+ <PageSection sectionTitle={"Ready for production. Out of the box."}
lightMode
+ sectionSubtitle={"Other features"}
backgroundClass={"background-primary"}>
+
+ <TwoColumnFeatureSection>
+ <Subsection title={"User Management"}>
+ <p className={"text-left text-light"}>
+ User management is included and can be configured directly from
the user interface.
+ </p>
+ <p className={"text-left text-light"}>
+ StreamPipes supports the management of users, groups and
permissions, so that access to views can be individually restricted.
+ </p>
+ </Subsection>
+ <div>
+ <img className="d-block w-100 mt-2 mb-2"
src={"/img/screenshots/streampipes-user-management.png"} alt={"User
Management"}/>
+ </div>
+ </TwoColumnFeatureSection>
+
+ <TwoColumnFeatureSection>
+ <div>
+ <img className="d-block w-100 mt-2 mb-2"
src={"/img/screenshots/streampipes-mail-configuration.png"} alt={"Mail
Configuration"}/>
+ </div>
+ <Subsection title={"Email & notifications"}>
+ <p className={"text-left text-light"}>
+ StreamPipes can be configured to send emails, e.g., as
notifications directly from the pipeline editor.
+ </p>
+ <p className={"text-left text-light"}>
+ With configured email settings, user self-registration and
password recovery can be activated.
+ </p>
+ </Subsection>
+ </TwoColumnFeatureSection>
+
+ <TwoColumnFeatureSection>
+ <Subsection title={"Container-based deployment"}>
+ <p className={"text-left text-light"}>
+ Besides the official source code releases, Apache StreamPipes
offers ready-to-use deployment packages.
+ </p>
+ <p className={"text-left text-light"}>
+ Several Docker Compose files are available to start StreamPipes
with one of the supported message brokers for local setups.
+ </p>
+ <p className={"text-left text-light"}>
+ In addition, helm charts are provided to deploy StreamPipes to
Kubernetes clusters.
+ </p>
+ </Subsection>
+ <div>
+ <img className="d-block w-100 mt-2 mb-2"
src={"/img/screenshots/streampipes-cli.png"} alt={"Online ML"}/>
+ </div>
+ </TwoColumnFeatureSection>
+ </PageSection>
+
+ </>
+)
+
+export default ReadyforProduction;
diff --git a/website-v2/src/components/home/Support.tsx
b/website-v2/src/components/home/Support.tsx
new file mode 100644
index 00000000..fcb786f9
--- /dev/null
+++ b/website-v2/src/components/home/Support.tsx
@@ -0,0 +1,31 @@
+import React, { FC } from 'react';
+import PageSection from '../PageSection';
+import SupportLink from '../SupportLink';
+
+const Support = (props) => (
+ <>
+ <PageSection sectionTitle={"Resources & Support"}
+ backgroundClass={"background-light"}>
+ <section className="d-sm-flex clearfix">
+ <SupportLink imageSrc={"/img/open_source/icon-github.png"}
href={"https://www.github.com/apache/streampipes"}
+ label={"Github"}></SupportLink>
+ <SupportLink imageSrc={"/img/open_source/icon-docs.png"}
href={"/docs/index.html"}
+ label={"Documentation"}></SupportLink>
+ <SupportLink imageSrc={"/img/open_source/icon-docker.png"}
href={"https://hub.docker.com/u/apachestreampipes"}
+ label={"Docker Hub"}></SupportLink>
+ <SupportLink imageSrc={"/img/open_source/icon-pypi.png"}
href={"https://pypi.org/project/streampipes/"}
+ label={"PyPi"}></SupportLink>
+ <SupportLink imageSrc={"/img/open_source/icon-stackoverflow.png"}
+
href={"https://stackoverflow.com/questions/tagged/streampipes"}
+ label={"Stack Overflow"}></SupportLink>
+ <SupportLink imageSrc={"/img/open_source/icon-mail.png"}
href={"/mailinglists.html"}
+ label={"Mailing Lists"}></SupportLink>
+ </section>
+
+
+ </PageSection>
+
+ </>
+)
+
+export default Support;
diff --git a/website-v2/src/css/customTheme.css
b/website-v2/src/css/customTheme.css
index 27de1fc5..0d6a3c9b 100644
--- a/website-v2/src/css/customTheme.css
+++ b/website-v2/src/css/customTheme.css
@@ -34,6 +34,10 @@
background: var(--color-primary-light);
}
+.text-light {
+ color: #fcfcfc;
+}
+
.table {
margin-left: auto;
margin-right: auto;
diff --git a/website-v2/src/css/page-section.scss
b/website-v2/src/css/page-section.scss
index 2091cc81..c32bcb53 100644
--- a/website-v2/src/css/page-section.scss
+++ b/website-v2/src/css/page-section.scss
@@ -15,9 +15,9 @@
text-transform: uppercase;
margin-bottom: 15px;
color: var(--color-accent);
-
+ letter-spacing: .1rem;
font: {
- weight: 700;
+ weight: 800;
size: 15px;
};
@@ -37,6 +37,8 @@
margin-bottom: 0;
position: relative;
display: inline-block;
+ color: var(--color-primary);
+ font-weight: 800;
font: {
size: 44px;
diff --git a/website-v2/src/pages/index.js b/website-v2/src/pages/index.js
index e93e1ad6..e03b0181 100644
--- a/website-v2/src/pages/index.js
+++ b/website-v2/src/pages/index.js
@@ -4,6 +4,8 @@ import Teaser from "../components/Teaser";
import LovedByDevelopers from "../components/home/LovedByDevelopers";
import LovedByUsers from "../components/home/LovedByUsers";
import MadeForIIoT from "../components/home/MadeForIIoT";
+import ReadyforProduction from "../components/home/ReadyforProduction";
+import Support from "../components/home/Support";
export default () => {
return (
@@ -11,7 +13,9 @@ export default () => {
<Teaser></Teaser>
<MadeForIIoT></MadeForIIoT>
<LovedByUsers></LovedByUsers>
+ <ReadyforProduction></ReadyforProduction>
<LovedByDevelopers></LovedByDevelopers>
+ <Support></Support>
</Layout>
)
};
diff --git a/website-v2/static/css/custom-website.css
b/website-v2/static/css/custom-website.css
index 51f469d1..89446e3c 100644
--- a/website-v2/static/css/custom-website.css
+++ b/website-v2/static/css/custom-website.css
@@ -24,6 +24,7 @@
body,
html {
font-family: 'Heebo', sans-serif;
+ overflow-x: hidden;
}
.mt-10 {
@@ -122,7 +123,7 @@ img {
-ms-flex: 0 0 20%;
flex: 0 0 20%;
max-width: 16.5%;
- padding: 100px 20px;
+ padding: 20px 20px;
position: relative;
z-index: 1;
-webkit-transition-duration: 750ms;
@@ -301,7 +302,7 @@ img {
font-size:18pt;
width:100%;
//background: rgba(255, 255, 255, 0.85);
- box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06)
0px 2px 4px -1px;
+ box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15)
0px 0px 0px 1px;
height: 250px;
border-radius: 10px;
text-align: center;
@@ -317,14 +318,14 @@ img {
.feature-highlights-title {
font-weight: 800;
color: var(--color-accent);
- font-size: 2rem;
+ font-size: 1.5rem;
}
.feature-highlights-subtitle {
color:var(--color-primary);
padding:3px;
font-weight: 500;
- font-size: 1.25rem;
+ font-size: 1rem;
}
.sp-blue {
@@ -336,10 +337,14 @@ img {
}
.apache-teaser {
- text-align: center;
+ text-align: left;
font-family: 'Roboto', serif;
- font-size: 16pt;
+ font-size: 15pt;
font-weight: 500;
+ max-width: 80%;
+ margin-left: auto;
+ margin-right: auto;
+ text-align: center;
}
.apache-teaser:before, .apache-teaser:after {
@@ -386,14 +391,12 @@ img {
}
.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-image:url('/img/bg-img/sp.png');
+ //background:linear-gradient(0deg, rgba(255, 255, 255, 0.5), rgba(255,
255, 255, 0.5)), 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;
+ border-radius: 20px;
+ margin: 30px auto;
+ height: calc(100vh - 72px);
}
.teaser-text-area {
@@ -444,13 +447,13 @@ img {
text-transform: uppercase;
color: var(--color-accent);
font-weight: 800;
- font-size: 2rem;
+ font-size: 1.75rem;
padding: 10px;
}
.top-claim-area-main-title {
font-weight: 800;
- font-size: 6rem;
+ font-size: 5.25rem;
color: var(--color-primary);
}
@@ -473,9 +476,32 @@ img {
}
.teaser-actions {
- margin-top: 25px;
+ margin-top: 2rem;
+}
+
+.left-claim-section {
+ padding-left: 3rem;
+ margin-top: -20px;
+}
+
+.feature-hz-title {
+ font-family: 'Heebo', sans-serif;
+ font-weight: 800;
+ color: var(--color-accent);
+ line-height: 1.2;
+ font-size: 1.5rem;
}
+.feature-hz-number {
+ font-family: 'Heebo', sans-serif;
+ font-weight: 700;
+ line-height: 1.2;
+ color: var(--color-accent);
+ font-size: 2rem;
+}
+
+
+
diff --git a/website-v2/static/css/page-banner.css
b/website-v2/static/css/page-banner.css
index 6f90e7d3..7b0f5601 100644
--- a/website-v2/static/css/page-banner.css
+++ b/website-v2/static/css/page-banner.css
@@ -21,13 +21,13 @@
width: 100%;
position: relative;
z-index: 1;
- background: linear-gradient(0deg,rgba(57, 181, 74, 0.8),rgba(57, 181, 74,
0.8)), url('/img/bg-img/bg-index.jpg');
+ //background: linear-gradient(0deg,rgba(57, 181, 74, 0.8),rgba(57, 181,
74, 0.8)), url('/img/bg-img/bg-index.jpg');
background-size:cover;
- color:white;
+ color:var(--color-accent);
}
.page-banner-content h2 {
- color: white;
+ color: var(--color-accent);
font-family: 'Heebo', sans-serif;
font-size: 68px;
}
diff --git a/website-v2/static/img/bg-img/bg-index-color.png
b/website-v2/static/img/bg-img/bg-index-color.png
deleted file mode 100644
index 889e744d..00000000
Binary files a/website-v2/static/img/bg-img/bg-index-color.png and /dev/null
differ
diff --git a/website-v2/static/img/bg-img/bg-index.jpg
b/website-v2/static/img/bg-img/bg-index.jpg
deleted file mode 100644
index cacc9ba7..00000000
Binary files a/website-v2/static/img/bg-img/bg-index.jpg and /dev/null differ
diff --git a/website-v2/static/img/bg-img/sp.png
b/website-v2/static/img/bg-img/sp.png
new file mode 100644
index 00000000..a568c281
Binary files /dev/null and b/website-v2/static/img/bg-img/sp.png differ
diff --git a/website_old/website/img/open_source/icon-docker.png
b/website-v2/static/img/open_source/icon-docker.png
similarity index 100%
rename from website_old/website/img/open_source/icon-docker.png
rename to website-v2/static/img/open_source/icon-docker.png
diff --git a/website_old/website/img/open_source/icon-docs.png
b/website-v2/static/img/open_source/icon-docs.png
similarity index 100%
rename from website_old/website/img/open_source/icon-docs.png
rename to website-v2/static/img/open_source/icon-docs.png
diff --git a/website_old/website/img/open_source/icon-github.png
b/website-v2/static/img/open_source/icon-github.png
similarity index 100%
rename from website_old/website/img/open_source/icon-github.png
rename to website-v2/static/img/open_source/icon-github.png
diff --git a/website_old/website/img/open_source/icon-mail.png
b/website-v2/static/img/open_source/icon-mail.png
similarity index 100%
rename from website_old/website/img/open_source/icon-mail.png
rename to website-v2/static/img/open_source/icon-mail.png
diff --git a/website_old/website/img/open_source/icon-pypi.png
b/website-v2/static/img/open_source/icon-pypi.png
similarity index 100%
rename from website_old/website/img/open_source/icon-pypi.png
rename to website-v2/static/img/open_source/icon-pypi.png
diff --git a/website_old/website/img/open_source/icon-stackoverflow.png
b/website-v2/static/img/open_source/icon-stackoverflow.png
similarity index 100%
rename from website_old/website/img/open_source/icon-stackoverflow.png
rename to website-v2/static/img/open_source/icon-stackoverflow.png
diff --git a/website_old/website/img/open_source/icon-twitter.png
b/website-v2/static/img/open_source/icon-twitter.png
similarity index 100%
rename from website_old/website/img/open_source/icon-twitter.png
rename to website-v2/static/img/open_source/icon-twitter.png
diff --git a/website_old/website/img/screenshots/connect-customize.png
b/website-v2/static/img/screenshots/connect-customize.png
similarity index 100%
rename from website_old/website/img/screenshots/connect-customize.png
rename to website-v2/static/img/screenshots/connect-customize.png
diff --git a/website_old/website/img/screenshots/live-dashboard.png
b/website-v2/static/img/screenshots/live-dashboard.png
similarity index 100%
rename from website_old/website/img/screenshots/live-dashboard.png
rename to website-v2/static/img/screenshots/live-dashboard.png
diff --git a/website_old/website/img/screenshots/pipeline-customization.png
b/website-v2/static/img/screenshots/pipeline-customization.png
similarity index 100%
rename from website_old/website/img/screenshots/pipeline-customization.png
rename to website-v2/static/img/screenshots/pipeline-customization.png
diff --git a/website_old/website/img/screenshots/pipeline-details.png
b/website-v2/static/img/screenshots/pipeline-details.png
similarity index 100%
rename from website_old/website/img/screenshots/pipeline-details.png
rename to website-v2/static/img/screenshots/pipeline-details.png
diff --git a/website_old/website/img/screenshots/pipeline-editor-2.png
b/website-v2/static/img/screenshots/pipeline-editor-2.png
similarity index 100%
rename from website_old/website/img/screenshots/pipeline-editor-2.png
rename to website-v2/static/img/screenshots/pipeline-editor-2.png
diff --git a/website_old/website/img/screenshots/pipeline-editor-sources.png
b/website-v2/static/img/screenshots/pipeline-editor-sources.png
similarity index 100%
rename from website_old/website/img/screenshots/pipeline-editor-sources.png
rename to website-v2/static/img/screenshots/pipeline-editor-sources.png
diff --git a/website_old/website/img/screenshots/pipeline-editor.png
b/website-v2/static/img/screenshots/pipeline-editor.png
similarity index 100%
rename from website_old/website/img/screenshots/pipeline-editor.png
rename to website-v2/static/img/screenshots/pipeline-editor.png
diff --git
a/website_old/website/img/screenshots/pipeline-element-marketplace.png
b/website-v2/static/img/screenshots/pipeline-element-marketplace.png
similarity index 100%
rename from website_old/website/img/screenshots/pipeline-element-marketplace.png
rename to website-v2/static/img/screenshots/pipeline-element-marketplace.png
diff --git a/website_old/website/img/screenshots/pipeline-overview.png
b/website-v2/static/img/screenshots/pipeline-overview.png
similarity index 100%
rename from website_old/website/img/screenshots/pipeline-overview.png
rename to website-v2/static/img/screenshots/pipeline-overview.png
diff --git a/website-v2/static/img/screenshots/python-client.png
b/website-v2/static/img/screenshots/python-client.png
new file mode 100644
index 00000000..088e6296
Binary files /dev/null and
b/website-v2/static/img/screenshots/python-client.png differ
diff --git a/website-v2/static/img/screenshots/python-onlineml.png
b/website-v2/static/img/screenshots/python-onlineml.png
new file mode 100644
index 00000000..d43bf377
Binary files /dev/null and
b/website-v2/static/img/screenshots/python-onlineml.png differ
diff --git a/website-v2/static/img/screenshots/sdk-data-processor.png
b/website-v2/static/img/screenshots/sdk-data-processor.png
new file mode 100644
index 00000000..eaa4045c
Binary files /dev/null and
b/website-v2/static/img/screenshots/sdk-data-processor.png differ
diff --git a/website_old/website/img/screenshots/sp-connect.png
b/website-v2/static/img/screenshots/sp-connect.png
similarity index 100%
rename from website_old/website/img/screenshots/sp-connect.png
rename to website-v2/static/img/screenshots/sp-connect.png
diff --git a/website_old/website/img/screenshots/sp-dashboard-config.png
b/website-v2/static/img/screenshots/sp-dashboard-config.png
similarity index 100%
rename from website_old/website/img/screenshots/sp-dashboard-config.png
rename to website-v2/static/img/screenshots/sp-dashboard-config.png
diff --git a/website_old/website/img/screenshots/sp-dashboard.png
b/website-v2/static/img/screenshots/sp-dashboard.png
similarity index 100%
rename from website_old/website/img/screenshots/sp-dashboard.png
rename to website-v2/static/img/screenshots/sp-dashboard.png
diff --git a/website_old/website/img/screenshots/sp-data-explorer-config.png
b/website-v2/static/img/screenshots/sp-data-explorer-config.png
similarity index 100%
rename from website_old/website/img/screenshots/sp-data-explorer-config.png
rename to website-v2/static/img/screenshots/sp-data-explorer-config.png
diff --git a/website_old/website/img/screenshots/sp-data-explorer-heatmap.png
b/website-v2/static/img/screenshots/sp-data-explorer-heatmap.png
similarity index 100%
rename from website_old/website/img/screenshots/sp-data-explorer-heatmap.png
rename to website-v2/static/img/screenshots/sp-data-explorer-heatmap.png
diff --git a/website_old/website/img/screenshots/sp-editor-config-trend.png
b/website-v2/static/img/screenshots/sp-editor-config-trend.png
similarity index 100%
rename from website_old/website/img/screenshots/sp-editor-config-trend.png
rename to website-v2/static/img/screenshots/sp-editor-config-trend.png
diff --git a/website_old/website/img/screenshots/sp-editor-pipeline.png
b/website-v2/static/img/screenshots/sp-editor-pipeline.png
similarity index 100%
rename from website_old/website/img/screenshots/sp-editor-pipeline.png
rename to website-v2/static/img/screenshots/sp-editor-pipeline.png
diff --git a/website_old/website/img/screenshots/sp-explorer-ts.png
b/website-v2/static/img/screenshots/sp-explorer-ts.png
similarity index 100%
rename from website_old/website/img/screenshots/sp-explorer-ts.png
rename to website-v2/static/img/screenshots/sp-explorer-ts.png
diff --git
a/website_old/website/img/screenshots/sp-install-pipeline-elements.png
b/website-v2/static/img/screenshots/sp-install-pipeline-elements.png
similarity index 100%
rename from website_old/website/img/screenshots/sp-install-pipeline-elements.png
rename to website-v2/static/img/screenshots/sp-install-pipeline-elements.png
diff --git a/website_old/website/img/screenshots/sp-user-management.png
b/website-v2/static/img/screenshots/sp-user-management.png
similarity index 100%
rename from website_old/website/img/screenshots/sp-user-management.png
rename to website-v2/static/img/screenshots/sp-user-management.png
diff --git a/website_old/website/img/screenshots/start-pipeline.png
b/website-v2/static/img/screenshots/start-pipeline.png
similarity index 100%
rename from website_old/website/img/screenshots/start-pipeline.png
rename to website-v2/static/img/screenshots/start-pipeline.png
diff --git a/website-v2/static/img/screenshots/streampipes-cli.png
b/website-v2/static/img/screenshots/streampipes-cli.png
new file mode 100644
index 00000000..1b96f71c
Binary files /dev/null and
b/website-v2/static/img/screenshots/streampipes-cli.png differ
diff --git a/website-v2/static/img/screenshots/streampipes-connect-opcua.png
b/website-v2/static/img/screenshots/streampipes-connect-opcua.png
new file mode 100644
index 00000000..db99929c
Binary files /dev/null and
b/website-v2/static/img/screenshots/streampipes-connect-opcua.png differ
diff --git a/website-v2/static/img/screenshots/streampipes-connect-overview.png
b/website-v2/static/img/screenshots/streampipes-connect-overview.png
new file mode 100644
index 00000000..c6cd3cb9
Binary files /dev/null and
b/website-v2/static/img/screenshots/streampipes-connect-overview.png differ
diff --git
a/website-v2/static/img/screenshots/streampipes-connect-schema-editor.png
b/website-v2/static/img/screenshots/streampipes-connect-schema-editor.png
new file mode 100644
index 00000000..2b91b882
Binary files /dev/null and
b/website-v2/static/img/screenshots/streampipes-connect-schema-editor.png differ
diff --git a/website-v2/static/img/screenshots/streampipes-custom-ui.png
b/website-v2/static/img/screenshots/streampipes-custom-ui.png
new file mode 100644
index 00000000..ad60bf3b
Binary files /dev/null and
b/website-v2/static/img/screenshots/streampipes-custom-ui.png differ
diff --git
a/website-v2/static/img/screenshots/streampipes-mail-configuration.png
b/website-v2/static/img/screenshots/streampipes-mail-configuration.png
new file mode 100644
index 00000000..315766a9
Binary files /dev/null and
b/website-v2/static/img/screenshots/streampipes-mail-configuration.png differ
diff --git a/website_old/website/img/screenshots/streampipes-overview.png
b/website-v2/static/img/screenshots/streampipes-overview.png
similarity index 100%
rename from website_old/website/img/screenshots/streampipes-overview.png
rename to website-v2/static/img/screenshots/streampipes-overview.png
diff --git a/website-v2/static/img/screenshots/streampipes-user-management.png
b/website-v2/static/img/screenshots/streampipes-user-management.png
new file mode 100644
index 00000000..b78fe292
Binary files /dev/null and
b/website-v2/static/img/screenshots/streampipes-user-management.png differ
![https://www.apache.org/events/current-event-125x125.png"*/}](https://www.apache.org/events/current-event-125x125.png"*/}){kind=link}