mirror of
https://github.com/simplex-chat/simplex-chat.git
synced 2026-05-25 20:44:38 +00:00
simplex unique section added
This commit is contained in:
M Sarmad Qadeer
@@ -0,0 +1,129 @@
|
||||
<section class="bg-primary-bg-light dark:bg-primary-bg-dark py-[85px] overflow-hidden">
|
||||
<div class="container scale-100">
|
||||
<p class="text-grey-black dark:text-white text-[45px] text-center font-bold mb-[32px]">Why Simplex is <span class="gradient-text">unique</span></p>
|
||||
|
||||
<div class="swiper unique-swiper px-4 py-2">
|
||||
<div class="swiper-wrapper mb-16">
|
||||
<div class="swiper-slide flex items-center md:items-start flex-col-reverse xl:flex-row xl:items-center px-4 md:px-10 lg:px-[50px] py-12 lg:py-[70px] rounded-[12px] shadow-[0px_3px_12px_rgba(0,0,0,0.2)] dark:shadow-none border-gradient">
|
||||
<a href="javascript:void(0);" class="flex items-center md:hidden">
|
||||
<span class="underline text-[16px] tracking-[0.02em] underline-offset-4 text-primary-light dark:text-primary-dark">More info</span>
|
||||
<span class="flex items-center justify-center h-[36px] w-[36px] mt-1">
|
||||
<svg class="fill-primary-light dark:fill-primary-dark" width="10" height="6" viewBox="0 0 10 6" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M1.50447 0.902966C1.21571 0.627397 0.747525 0.627397 0.458761 0.902966C0.169996 1.17853 0.169996 1.62532 0.458761 1.90089L4.21933 5.48961C4.25543 5.52406 4.29433 5.5542 4.33533 5.58003C4.62234 5.76088 5.01237 5.73074 5.26504 5.48961L9.02561 1.90089C9.31438 1.62532 9.31438 1.17853 9.02561 0.902966C8.73685 0.627397 8.26867 0.627397 7.97991 0.902966L4.74219 3.99273L1.50447 0.902966Z"/>
|
||||
</svg>
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<div class="pt-14 md:pt-0">
|
||||
<p class="text-[35px] lg:text-[65px] font-bold tracking-[0.06em] text-active-blue text-center md:text-left">#1</p>
|
||||
<p class="w-full max-w-[617px] text-[25px] leading-[33px] lg:text-[35px] lg:leading-[45px] text-center md:text-left font-bold mb-[30px] text-grey-black dark:text-white">
|
||||
Complete privacy of your identity, profile, contacts and metadata
|
||||
</p>
|
||||
<p class="w-full max-w-[541px] text-[16px] leading-[24px] tracking-[0.02em] mb-[36px] text-grey-black dark:text-white text-center md:text-left hidden md:block">
|
||||
Unlike any other existing messaging platform, SimpleX has no identifiers assigned to the users –- not even random numbers. This protects the privacy of who you are communicating with, hiding it from SimpleX platform servers and from any observers.
|
||||
</p>
|
||||
<a href="" class="underline text-primary-light dark:text-primary-dark lg:block text-[16px] underline-offset-4 tracking-[0.02em] hidden md:block">Learn how it improves privacy</a>
|
||||
</div>
|
||||
|
||||
<div class="flex-1 flex items-center justify-center w-full">
|
||||
<img class="w-full max-w-[400px] dark:hidden" src="/img/new/unique-section-1.png" alt="">
|
||||
<img class="w-full max-w-[400px] hidden dark:block" src="/img/new/unique-section-1-dark.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="swiper-slide flex items-center md:items-start flex-col-reverse xl:flex-row xl:items-center px-4 md:px-10 lg:px-[50px] py-12 lg:py-[70px] rounded-[12px] shadow-[0px_3px_12px_rgba(0,0,0,0.2)] dark:shadow-none border-gradient">
|
||||
<a href="javascript:void(0);" class="flex items-center md:hidden">
|
||||
<span class="underline text-[16px] tracking-[0.02em] underline-offset-4 text-primary-light dark:text-primary-dark">More info</span>
|
||||
<span class="flex items-center justify-center h-[36px] w-[36px] mt-1">
|
||||
<svg class="fill-primary-light dark:fill-primary-dark" width="10" height="6" viewBox="0 0 10 6" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M1.50447 0.902966C1.21571 0.627397 0.747525 0.627397 0.458761 0.902966C0.169996 1.17853 0.169996 1.62532 0.458761 1.90089L4.21933 5.48961C4.25543 5.52406 4.29433 5.5542 4.33533 5.58003C4.62234 5.76088 5.01237 5.73074 5.26504 5.48961L9.02561 1.90089C9.31438 1.62532 9.31438 1.17853 9.02561 0.902966C8.73685 0.627397 8.26867 0.627397 7.97991 0.902966L4.74219 3.99273L1.50447 0.902966Z"/>
|
||||
</svg>
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<div class="pt-14 md:pt-0">
|
||||
<p class="text-[35px] lg:text-[65px] font-bold tracking-[0.06em] text-active-blue text-center md:text-left">#2</p>
|
||||
<p class="w-full max-w-[617px] text-[25px] leading-[33px] lg:text-[35px] lg:leading-[45px] text-center md:text-left font-bold mb-[30px] text-grey-black dark:text-white">
|
||||
The best protection against spam and abuse
|
||||
</p>
|
||||
<p class="w-full max-w-[541px] text-[16px] leading-[24px] tracking-[0.02em] mb-[36px] text-grey-black dark:text-white text-center md:text-left hidden md:block">
|
||||
Because you have no identifier on the SimpleX platform, you cannot be contacted unless you share a one-time “burner” or temporary user address.
|
||||
</p>
|
||||
<a href="" class="underline text-primary-light dark:text-primary-dark lg:block text-[16px] underline-offset-4 tracking-[0.02em] hidden md:block">Learn how it improves privacy</a>
|
||||
</div>
|
||||
|
||||
<div class="flex-1 flex items-center justify-center w-full">
|
||||
<img class="w-full max-w-[400px] dark:hidden" src="/img/new/unique-section-2.png" alt="">
|
||||
<img class="w-full max-w-[400px] hidden dark:block" src="/img/new/unique-section-2-dark.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="swiper-slide flex items-center md:items-start flex-col-reverse xl:flex-row xl:items-center px-4 md:px-10 lg:px-[50px] py-12 lg:py-[70px] rounded-[12px] shadow-[0px_3px_12px_rgba(0,0,0,0.2)] dark:shadow-none border-gradient">
|
||||
<a href="javascript:void(0);" class="flex items-center md:hidden">
|
||||
<span class="underline text-[16px] tracking-[0.02em] underline-offset-4 text-primary-light dark:text-primary-dark">More info</span>
|
||||
<span class="flex items-center justify-center h-[36px] w-[36px] mt-1">
|
||||
<svg class="fill-primary-light dark:fill-primary-dark" width="10" height="6" viewBox="0 0 10 6" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M1.50447 0.902966C1.21571 0.627397 0.747525 0.627397 0.458761 0.902966C0.169996 1.17853 0.169996 1.62532 0.458761 1.90089L4.21933 5.48961C4.25543 5.52406 4.29433 5.5542 4.33533 5.58003C4.62234 5.76088 5.01237 5.73074 5.26504 5.48961L9.02561 1.90089C9.31438 1.62532 9.31438 1.17853 9.02561 0.902966C8.73685 0.627397 8.26867 0.627397 7.97991 0.902966L4.74219 3.99273L1.50447 0.902966Z"/>
|
||||
</svg>
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<div class="pt-14 md:pt-0">
|
||||
<p class="text-[35px] lg:text-[65px] font-bold tracking-[0.06em] text-active-blue text-center md:text-left">#3</p>
|
||||
<p class="w-full max-w-[617px] text-[25px] leading-[33px] lg:text-[35px] lg:leading-[45px] text-center md:text-left font-bold mb-[30px] text-grey-black dark:text-white">
|
||||
Ownership, control and security of your data
|
||||
</p>
|
||||
<p class="w-full max-w-[541px] text-[16px] leading-[24px] tracking-[0.02em] mb-[36px] text-grey-black dark:text-white text-center md:text-left hidden md:block">
|
||||
SimpleX stores all user data on client devices in a portable database format. The messages are held temporarily on SimpleX relay servers until they are received, then they are permanently deleted.
|
||||
</p>
|
||||
<a href="" class="underline text-primary-light dark:text-primary-dark lg:block text-[16px] underline-offset-4 tracking-[0.02em] hidden md:block">Learn how it improves privacy</a>
|
||||
</div>
|
||||
|
||||
<div class="flex-1 flex items-center justify-center w-full">
|
||||
<img class="w-full max-w-[400px] dark:hidden" src="/img/new/unique-section-3.png" alt="">
|
||||
<img class="w-full max-w-[400px] hidden dark:block" src="/img/new/unique-section-3-dark.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="swiper-slide flex items-center md:items-start flex-col-reverse xl:flex-row xl:items-center px-4 md:px-10 lg:px-[50px] py-12 lg:py-[70px] rounded-[12px] shadow-[0px_3px_12px_rgba(0,0,0,0.2)] dark:shadow-none border-gradient">
|
||||
<a href="javascript:void(0);" class="flex items-center md:hidden">
|
||||
<span class="underline text-[16px] tracking-[0.02em] underline-offset-4 text-primary-light dark:text-primary-dark">More info</span>
|
||||
<span class="flex items-center justify-center h-[36px] w-[36px] mt-1">
|
||||
<svg class="fill-primary-light dark:fill-primary-dark" width="10" height="6" viewBox="0 0 10 6" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M1.50447 0.902966C1.21571 0.627397 0.747525 0.627397 0.458761 0.902966C0.169996 1.17853 0.169996 1.62532 0.458761 1.90089L4.21933 5.48961C4.25543 5.52406 4.29433 5.5542 4.33533 5.58003C4.62234 5.76088 5.01237 5.73074 5.26504 5.48961L9.02561 1.90089C9.31438 1.62532 9.31438 1.17853 9.02561 0.902966C8.73685 0.627397 8.26867 0.627397 7.97991 0.902966L4.74219 3.99273L1.50447 0.902966Z"/>
|
||||
</svg>
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<div class="pt-14 md:pt-0">
|
||||
<p class="text-[35px] lg:text-[65px] font-bold tracking-[0.06em] text-active-blue text-center md:text-left">#4</p>
|
||||
<p class="w-full max-w-[617px] text-[25px] leading-[33px] lg:text-[35px] lg:leading-[45px] text-center md:text-left font-bold mb-[30px] text-grey-black dark:text-white">
|
||||
Fully decentralised – users own the SimpleX network
|
||||
</p>
|
||||
<p class="w-full max-w-[541px] text-[16px] leading-[24px] tracking-[0.02em] mb-[36px] text-grey-black dark:text-white text-center md:text-left hidden md:block">
|
||||
You can use SimpleX with your own servers and still communicate with people using the servers that are pre-configured in the apps or any other SimpleX servers. The SimpleX network is independent of any crypto currency or any other platform, other than the Internet
|
||||
</p>
|
||||
<a href="" class="underline text-primary-light dark:text-primary-dark lg:block text-[16px] underline-offset-4 tracking-[0.02em] hidden md:block">Learn how it improves privacy</a>
|
||||
</div>
|
||||
|
||||
<div class="flex-1 flex items-center justify-center w-full">
|
||||
<img class="w-full max-w-[400px] dark:hidden" src="/img/new/unique-section-4.png" alt="">
|
||||
<img class="w-full max-w-[400px] hidden dark:block" src="/img/new/unique-section-4-dark.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<img class="fixed left-4 top-[55%] swiper-button-prev hidden md:inline-block dark:hidden" src="/img/new/arrow-left.svg" alt="">
|
||||
<img class="fixed right-4 top-[55%] swiper-button-next hidden md:inline-block dark:hidden" src="/img/new/arrow-right.svg" alt="">
|
||||
<img class="fixed left-4 top-[55%] swiper-button-prev hidden dark:md:inline-block" src="/img/new/arrow-left-dark.svg" alt="">
|
||||
<img class="fixed right-4 top-[55%] swiper-button-next hidden dark:md:inline-block" src="/img/new/arrow-right-dark.svg" alt="">
|
||||
<!-- <div class="swiper-scrollbar dark:bg-grey-black dark:bg-opacity-[0.2]"></div> -->
|
||||
|
||||
<div class="swiper-pagination mt-100"></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -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;
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 138 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 97 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 88 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 74 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 50 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 63 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 80 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 52 KiB |
@@ -40,6 +40,9 @@ title: "SimpleX Chat"
|
||||
</section>
|
||||
|
||||
|
||||
<!-- Why SimpleX is unique -->
|
||||
{% include "sections/simplex_unique.html" %}
|
||||
|
||||
<!------------------------------FEATURES---------------------------------------------------------------------->
|
||||
<section class="bg-secondary-bg-light dark:bg-secondary-bg-dark py-[60px]">
|
||||
<div class="container flex flex-col items-center gap-[50px]">
|
||||
|
||||
@@ -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: {
|
||||
|
||||
Reference in New Issue
Block a user