Add slider to homepage
diff --git a/website-v2/package-lock.json b/website-v2/package-lock.json
index 83917e1..2595614 100644
--- a/website-v2/package-lock.json
+++ b/website-v2/package-lock.json
@@ -4,7 +4,6 @@
"requires": true,
"packages": {
"": {
- "name": "website-v2",
"dependencies": {
"@docusaurus/core": "2.4.1",
"@docusaurus/plugin-client-redirects": "2.4.1",
@@ -16,7 +15,8 @@
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-lazy-load-image-component": "^1.5.4",
- "sass": "^1.63.6"
+ "sass": "^1.63.6",
+ "swiper": "^10.0.0"
}
},
"node_modules/@algolia/autocomplete-core": {
@@ -10594,15 +10594,6 @@
"url": "https://opencollective.com/webpack"
}
},
- "node_modules/search-insights": {
- "version": "2.6.0",
- "resolved": "https://registry.npmjs.org/search-insights/-/search-insights-2.6.0.tgz",
- "integrity": "sha512-vU2/fJ+h/Mkm/DJOe+EaM5cafJv/1rRTZpGJTuFPf/Q5LjzgMDsqPdSaZsAe+GAWHHsfsu+rQSAn6c8IGtBEVw==",
- "peer": true,
- "engines": {
- "node": ">=8.16.0"
- }
- },
"node_modules/section-matter": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/section-matter/-/section-matter-1.0.0.tgz",
@@ -11331,6 +11322,24 @@
"url": "https://github.com/fb55/entities?sponsor=1"
}
},
+ "node_modules/swiper": {
+ "version": "10.0.4",
+ "resolved": "https://registry.npmjs.org/swiper/-/swiper-10.0.4.tgz",
+ "integrity": "sha512-DlNR3KiaVkPep6RraZ2tNr7lvyuzELuR+4NZr4wO42t0UworIO3DxDlz8b5Q3uUioh7cJad99EdRJLkPF+r8Ag==",
+ "funding": [
+ {
+ "type": "patreon",
+ "url": "https://www.patreon.com/swiperjs"
+ },
+ {
+ "type": "open_collective",
+ "url": "http://opencollective.com/swiper"
+ }
+ ],
+ "engines": {
+ "node": ">= 4.7.0"
+ }
+ },
"node_modules/tapable": {
"version": "2.2.1",
"resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz",
@@ -11585,19 +11594,6 @@
"is-typedarray": "^1.0.0"
}
},
- "node_modules/typescript": {
- "version": "5.1.6",
- "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.1.6.tgz",
- "integrity": "sha512-zaWCozRZ6DLEWAWFrVDz1H6FVXzUSfTy5FUMWsQlU8Ym5JP9eO4xkTIROFCQvhQf61z6O/G6ugw3SgAnvvm+HA==",
- "peer": true,
- "bin": {
- "tsc": "bin/tsc",
- "tsserver": "bin/tsserver"
- },
- "engines": {
- "node": ">=14.17"
- }
- },
"node_modules/ua-parser-js": {
"version": "1.0.35",
"resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-1.0.35.tgz",
diff --git a/website-v2/package.json b/website-v2/package.json
index bb2e274..c1b0b03 100644
--- a/website-v2/package.json
+++ b/website-v2/package.json
@@ -19,6 +19,7 @@
"@iconify/icons-akar-icons": "^1.2.8",
"@iconify/react": "^3.2.2",
"react-lazy-load-image-component": "^1.5.4",
+ "swiper": "^10.0.0",
"clsx": "^1.1.1",
"docusaurus-plugin-sass": "^0.2.4",
"react": "^17.0.2",
diff --git a/website-v2/src/components/FeatureItemHorizontal.tsx b/website-v2/src/components/FeatureItemHorizontal.tsx
index 9b73556..1e111ef 100644
--- a/website-v2/src/components/FeatureItemHorizontal.tsx
+++ b/website-v2/src/components/FeatureItemHorizontal.tsx
@@ -1,28 +1,89 @@
-import React, { Children, FC } from 'react';
+import React, { Children, FC, useRef, useState } 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}
+import { Swiper, SwiperSlide } from 'swiper/react';
+
+// Import Swiper styles
+import 'swiper/css';
+import 'swiper/css/free-mode';
+import 'swiper/css/navigation';
+import 'swiper/css/thumbs';
+
+import { FreeMode, Navigation, Thumbs, Autoplay } from 'swiper/modules';
+
+const FeatureItemHorizontal = (props) => {
+
+ const [thumbsSwiper, setThumbsSwiper] = useState(null);
+
+ const imageGallery =
+ <>
+ <Swiper
+ style={{
+ '--swiper-navigation-color': 'var(--color-primary)',
+ '--swiper-pagination-color': 'var(--color-primary)',
+ }}
+ spaceBetween={10}
+ navigation={true}
+ loop={true}
+ autoplay={{
+ delay: 2000,
+ pauseOnMouseEnter: true,
+ disableOnInteraction: true
+ }}
+ thumbs={{ swiper: thumbsSwiper, slideThumbActiveClass: 'slide-thumb-active' }}
+ modules={[FreeMode, Navigation, Thumbs, Autoplay]}
+ className="mySwiper2"
+ >
+ {props.images.map(image => {
+ return (
+ <SwiperSlide>
+ <img className="d-block w-100 mt-2 mb-2" src={image.src} alt={image.alt}/>
+ </SwiperSlide>
+ )
+ })
+ }
+ </Swiper>
+ <Swiper
+ onSwiper={setThumbsSwiper}
+ spaceBetween={10}
+ slidesPerView={4}
+ freeMode={true}
+ watchSlidesProgress={true}
+ modules={[FreeMode, Navigation, Thumbs, Autoplay]}
+ className="mySwiper"
+ >
+ {props.images.map(image => {
+ return (
+ <SwiperSlide>
+ <img className="d-block w-100 mt-2 mb-2" src={image.src} alt={image.alt}/>
+ </SwiperSlide>
+ )
+ })
+ }
+ </Swiper>
+ </>
+
+ return (<>
+ <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">
+ {imageGallery}
</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>
+ <hr style={{marginTop: '20px', marginBottom: '20px'}}/>
</div>
- <hr style={{marginTop: '20px', marginBottom: '20px'}}/>
- </div>
- </section>
- </>
-)
+ </section>
+ </>
+ )
+
+}
export default FeatureItemHorizontal;
diff --git a/website-v2/src/components/home/LovedByUsers.tsx b/website-v2/src/components/home/LovedByUsers.tsx
index bd3b3bf..a390058 100644
--- a/website-v2/src/components/home/LovedByUsers.tsx
+++ b/website-v2/src/components/home/LovedByUsers.tsx
@@ -8,8 +8,9 @@
<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"},
+ images={[
{src: "/img/screenshots/streampipes-connect-opcua.png", alt: "StreamPipes Connect OPC-UA Browser"},
+ {src: "/img/screenshots/streampipes-connect-overview.png", alt: "StreamPipes Connect"},
{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>
@@ -45,7 +46,7 @@
<a href="/docs/use-pipeline-editor" className="sp-button sp-button-medium sp-button-blue"><i
className="fas fa-hand-point-right"></i> Learn more</a>
</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"}]}>
+ <FeatureItemHorizontal featureNumber={"03."} title={"Exploit"} images={[{src: "/img/screenshots/sp-data-explorer-config.png", alt: "Data Explorer Widgets"}, {src: "/img/screenshots/sp-explorer-ts.png", alt: "StreamPipes Data Explorer Time Series Chart"}, {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>
diff --git a/website-v2/static/css/custom.css b/website-v2/static/css/custom.css
index f54fcea..86af12f 100644
--- a/website-v2/static/css/custom.css
+++ b/website-v2/static/css/custom.css
@@ -472,3 +472,7 @@
text-decoration-style: solid;
text-underline-offset: 15px;
}
+
+.slide-thumb-active {
+ border: 2px solid var(--color-primary);
+}
