diff --git a/website/src/_includes/sections/simplex_unique.html b/website/src/_includes/sections/simplex_unique.html new file mode 100644 index 0000000000..88661915ca --- /dev/null +++ b/website/src/_includes/sections/simplex_unique.html @@ -0,0 +1,129 @@ +
+
+

Why Simplex is unique

+ +
+
+
+ + More info + + + + + + + +
+

#1

+

+ Complete privacy of your identity, profile, contacts and metadata +

+ + +
+ +
+ + +
+
+ + +
+ + More info + + + + + + + +
+

#2

+

+ The best protection against spam and abuse +

+ + +
+ +
+ + +
+
+ + +
+ + More info + + + + + + + +
+

#3

+

+ Ownership, control and security of your data +

+ + +
+ +
+ + +
+
+ + +
+ + More info + + + + + + + +
+

#4

+

+ Fully decentralised – users own the SimpleX network +

+ + +
+ +
+ + +
+
+ +
+ + + + + + + +
+
+
+
\ No newline at end of file diff --git a/website/src/css/style.css b/website/src/css/style.css index 403e222f9e..7cff3fb6fe 100644 --- a/website/src/css/style.css +++ b/website/src/css/style.css @@ -132,6 +132,13 @@ html { border: 1px solid transparent; } +.dark .unique-swiper .border-gradient{ + background: + linear-gradient(#0C0B13, #0C0B13) padding-box, + linear-gradient(to bottom, transparent, #01F1FF 58%) border-box; + border: 1px solid transparent; +} + @media (min-width:1024px) { .nav-link-text { position: relative; @@ -244,9 +251,25 @@ header nav { background-clip: text; } +.swiper-pagination-bullet { + height: 12px; + width: 12px; + margin: 0 5px !important; +} +.dark .swiper-pagination-bullet{ + background: #D4D4D433; + opacity: .8; +} + +.swiper-pagination-bullet-active{ + opacity: 1 !important; +} .swiper-pagination-bullet-active { background-color: #0197FF !important; } +.dark .swiper-pagination-bullet-active{ + background-color: #70F0F9 !important; +} .swiper-button-next, .swiper-button-prev { @@ -258,6 +281,11 @@ header nav { display: none; } +.unique-swiper .swiper-slide, +.unique-swiper .swiper-wrapper{ + height: inherit; +} + .swiper-scrollbar-horizontal { margin-top: 40px !important; width: 300px !important; diff --git a/website/src/img/new/unique-section-1-dark.png b/website/src/img/new/unique-section-1-dark.png new file mode 100644 index 0000000000..2efee8b5e1 Binary files /dev/null and b/website/src/img/new/unique-section-1-dark.png differ diff --git a/website/src/img/new/unique-section-1.png b/website/src/img/new/unique-section-1.png new file mode 100644 index 0000000000..1b66493dfc Binary files /dev/null and b/website/src/img/new/unique-section-1.png differ diff --git a/website/src/img/new/unique-section-2-dark.png b/website/src/img/new/unique-section-2-dark.png new file mode 100644 index 0000000000..6449be2024 Binary files /dev/null and b/website/src/img/new/unique-section-2-dark.png differ diff --git a/website/src/img/new/unique-section-2.png b/website/src/img/new/unique-section-2.png new file mode 100644 index 0000000000..6474552747 Binary files /dev/null and b/website/src/img/new/unique-section-2.png differ diff --git a/website/src/img/new/unique-section-3-dark.png b/website/src/img/new/unique-section-3-dark.png new file mode 100644 index 0000000000..8eea04fe14 Binary files /dev/null and b/website/src/img/new/unique-section-3-dark.png differ diff --git a/website/src/img/new/unique-section-3.png b/website/src/img/new/unique-section-3.png new file mode 100644 index 0000000000..9bd584c45a Binary files /dev/null and b/website/src/img/new/unique-section-3.png differ diff --git a/website/src/img/new/unique-section-4-dark.png b/website/src/img/new/unique-section-4-dark.png new file mode 100644 index 0000000000..51dc83aa36 Binary files /dev/null and b/website/src/img/new/unique-section-4-dark.png differ diff --git a/website/src/img/new/unique-section-4.png b/website/src/img/new/unique-section-4.png new file mode 100644 index 0000000000..e9c461951d Binary files /dev/null and b/website/src/img/new/unique-section-4.png differ diff --git a/website/src/index.html b/website/src/index.html index 25e50bc205..724154dfe2 100644 --- a/website/src/index.html +++ b/website/src/index.html @@ -40,6 +40,9 @@ title: "SimpleX Chat" + +{% include "sections/simplex_unique.html" %} +
diff --git a/website/src/js/script.js b/website/src/js/script.js index b8b5ae88c6..cf9e77990c 100644 --- a/website/src/js/script.js +++ b/website/src/js/script.js @@ -28,12 +28,30 @@ // btnMobile.addEventListener('click', toggleMenu); // btnMobile.addEventListener('touchstart', toggleMenu); +const swiper = new Swiper('.unique-swiper', { + slidesPerView: 1, + spaceBetween: 80, + // autoplay: { + // delay: 3000, + // disableOnInteraction: false, + // }, + direction: 'horizontal', + pagination: { + el: '.swiper-pagination', + clickable: true, + }, + navigation: { + nextEl: '.swiper-button-next', + prevEl: '.swiper-button-prev', + }, +}); + const privateSwiper = new Swiper('.private-swiper', { slidesPerView: 1, spaceBetween: 20, - autoplay: { - delay: 3000, - }, + // autoplay: { + // delay: 3000, + // }, direction: 'horizontal', scrollbar: {