Add new content to homepage
diff --git a/website-v2/src/components/FeatureItemHorizontal.tsx b/website-v2/src/components/FeatureItemHorizontal.tsx
new file mode 100644
index 0000000..9b73556
--- /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 829e88a..8a7ffdb 100644
--- a/website-v2/src/components/PageSection.tsx
+++ b/website-v2/src/components/PageSection.tsx
@@ -7,14 +7,16 @@
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 b0c608a..0975829 100644
--- a/website-v2/src/components/PageSectionTitle.tsx
+++ b/website-v2/src/components/PageSectionTitle.tsx
@@ -11,7 +11,7 @@
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 0000000..ef49608
--- /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 0000000..b4754ef
--- /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 e244fde..a2aa85d 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 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">
+ <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>
- <div className={"top-claim-area-main-title"}>
- Industrial IoT Toolbox
+ <div className={"col-3 teaser-image"}>
</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>
</>
)
diff --git a/website-v2/src/components/TwoColumnFeatureSection.tsx b/website-v2/src/components/TwoColumnFeatureSection.tsx
new file mode 100644
index 0000000..05d6c48
--- /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 c7d9074..a93c3bc 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 b2fb402..ad03d17 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 bc39384..8c0531e 100644
--- a/website-v2/src/components/home/MadeForIIoT.tsx
+++ b/website-v2/src/components/home/MadeForIIoT.tsx
@@ -3,7 +3,8 @@
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 0000000..df479a9
--- /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 0000000..fcb786f
--- /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 27de1fc..0d6a3c9 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 2091cc8..c32bcb5 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 e93e1ad..e03b018 100644
--- a/website-v2/src/pages/index.js
+++ b/website-v2/src/pages/index.js
@@ -4,6 +4,8 @@
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 @@
<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 51f469d..89446e3 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 @@
-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 @@
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 @@
.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 @@
}
.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 @@
}
.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 @@
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 @@
}
.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 6f90e7d..7b0f560 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 889e744..0000000
--- a/website-v2/static/img/bg-img/bg-index-color.png
+++ /dev/null
Binary files 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 cacc9ba..0000000
--- a/website-v2/static/img/bg-img/bg-index.jpg
+++ /dev/null
Binary files 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 0000000..a568c28
--- /dev/null
+++ b/website-v2/static/img/bg-img/sp.png
Binary files 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
Binary files differ
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
Binary files differ
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
Binary files differ
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
Binary files differ
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
Binary files differ
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
Binary files differ
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
Binary files differ
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
Binary files differ
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
Binary files differ
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
Binary files differ
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
Binary files differ
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
Binary files differ
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
Binary files differ
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
Binary files differ
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
Binary files differ
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
Binary files differ
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 0000000..088e629
--- /dev/null
+++ b/website-v2/static/img/screenshots/python-client.png
Binary files 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 0000000..d43bf37
--- /dev/null
+++ b/website-v2/static/img/screenshots/python-onlineml.png
Binary files 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 0000000..eaa4045
--- /dev/null
+++ b/website-v2/static/img/screenshots/sdk-data-processor.png
Binary files 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
Binary files differ
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
Binary files differ
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
Binary files differ
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
Binary files differ
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
Binary files differ
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
Binary files differ
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
Binary files differ
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
Binary files differ
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
Binary files differ
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
Binary files differ
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
Binary files differ
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 0000000..1b96f71
--- /dev/null
+++ b/website-v2/static/img/screenshots/streampipes-cli.png
Binary files 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 0000000..db99929
--- /dev/null
+++ b/website-v2/static/img/screenshots/streampipes-connect-opcua.png
Binary files 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 0000000..c6cd3cb
--- /dev/null
+++ b/website-v2/static/img/screenshots/streampipes-connect-overview.png
Binary files 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 0000000..2b91b88
--- /dev/null
+++ b/website-v2/static/img/screenshots/streampipes-connect-schema-editor.png
Binary files 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 0000000..ad60bf3
--- /dev/null
+++ b/website-v2/static/img/screenshots/streampipes-custom-ui.png
Binary files 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 0000000..315766a
--- /dev/null
+++ b/website-v2/static/img/screenshots/streampipes-mail-configuration.png
Binary files 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
Binary files differ
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 0000000..b78fe29
--- /dev/null
+++ b/website-v2/static/img/screenshots/streampipes-user-management.png
Binary files differ
