blade/simplex-chat
1
0
Fork 0
mirror of https://github.com/simplex-chat/simplex-chat.git synced 2024-12-17 17:20:21 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

new website (#1307)

Browse Source 
* nav in process

* edited web.yml

* navbar issue fixed

* added theme switcher

* added privacy matters section

* added features section

* updated nav padding

* added network section

* improved sidebar dark mode colors

* added footer

* simplex private section added

* added some improvements

* nav issue fixed

* simplex unique section added

* a small fix

* added overlay & data to some sections

* added overlay to simplex unique section
added some improvements to other sections too

* added a small fix

* updated CNAME

* markdown files for why simplex is unique

* Revert "markdown files for why simplex is unique"

This reverts commit ef728218f7.

* added hero section

* added comparison and simplex explained section

* added blogs page

* added articles page

* a small fix in hero section

* added contact page

* updated contact

* created files for overlay content

* a light update

* hero animation

* working on hero

* added responsiveness for mobile

* a quick fix

* added responsiveness to tablet screen

* added responsiveness for desktop screen on hero section

* switch theme of hero

* nav color update

* set comparisons sections

* switch theme of comparisons section

* added responsiveness in simplex explained section

* add logic to simplex explained

* added theme switcher to simplex explained

* manage join simplex section

* update what makes simplex private

* a quick update

* add improvements

* a bit update

* add improvements

* texts for why privacy matters section

* update headers

* texts for "why unique" and "features" sections

* EOLs

* update swipers

* update & add transitions to simplex unique section

* updated overlays

* increase the size of cross on overlays

* add overlays to hero

* website: texts for "private" and "explained" sections (#5)

* website: texts for "private" section

* texts for simplex explained

* blog previews and images (#6)

* blog previews and images

* text for dark mode

* add link style

* add overlay to -> unlike p2p networks

* add picture with blue arrows to simplex explained

* update blog list layout

* remove extra css

* bigger navigation circles & center positions

* make bullets (dots) bigger

* make private scroll thicker

* update hero & footer mobile download btns

* fix dark mode animation files (#7)

* improved contrast for light animation in hero section (#8)

* remove old animation

* Made Hero Pixel Perfect to Desktop

* texts in hero section overlays (#10)

* texts in hero section overlays

* replace hero video

* eol

* update footer links (#11)

* update footer links

* eol

* texts, links, fix layout (#12)

* mailchimp form (#13)

* site meta tags (#14)

* site meta tags

* update blog og:url

* amend texts

* font

* update text

* contact page

* Making things Polished in Hero (#15)

* Made Video Responsive on Tablet

* Fixed the issues

* remove extra files for home & contact page

* update invitation

* refactoring

* fix nav for dark

* quick fix

* update blog list layout

* refactoring

* disable inactive nav circles

* contact page

* fix mobile

* detect platform & show btns according to it

* contact & invitation page setting

* complete contact/invitation page

* create variables for download btns

* fixes for hero - for tablet & mobile

* update hero layout

* update footer layout

* increase the size of logo in navbar

* updated nav & footer logos

* add links to join simplex section

* text for p2p networks section

* text on contact page about link

* add touchstart handler to close popup

* update APK links

* update CNAME

Co-authored-by: M Sarmad Qadeer <MSarmadQadeer@gmail.com>
Co-authored-by: Ojas Shukla <54703305+whizzbbig@users.noreply.github.com>
This commit is contained in:
Evgeny Poberezkin
2022-11-08 11:04:02 +00:00
committed by GitHub
parent dd9e94eefd
commit fa5a70cd19
468 changed files with 5466 additions and 1323 deletions
Download Patch File Download Diff File Expand all files Collapse all files
website/src/_includes/hero.html
+106
View File
@@ -0,0 +1,106 @@
<div class="first-two-sections pt-[66px] bg-white dark:bg-gradient-radial-mobile dark:lg:bg-gradient-radial">
<div class="md:flex md:flex-col-reverse md:items-center xl:flex xl:flex-row xl:items-start relative xl:justify-between xl:gap-10 container">
<div class="">
<section class="xl:h-[calc(100vh-66px)] xl:max-h-[888px] m-auto w-full flex items-center justify-between landing-page-header px-5">
<div class="xl:h-full flex flex-col items-center xl:items-start xl:justify-around w-full landing-page-header-div">
{# <img class="static-phone-tablet hidden md:block xl:hidden" src="/img/new/tab-hero.svg" alt="" /> #}
<img class="static-phone-mobile md:hidden" src="/img/new/mobile-hero.png" alt="" />
<article class="w-full xl:max-w-[600px] landing-page-header-article">
<p class="primary-header text-center xl:text-left font-bold text-[38px] md:text-[55px] leading-[46px] md:leading-[63px] mb-2 xl:mb-8">Privacy redefined</p>
<p class="secondary-header text-center xl:text-left font-bold text-[28px] md:text-[38px] leading-[36px] md:leading-[43px] mb-2 xl:mb-8 tracking-[0.01em]">The first messenger<br>without user IDs</p>
<p class="landing-page-header-article-paragraph text-black dark:text-white text-center xl:text-justify text-[16px] leading-[24px] mb-[20px] header-description">
Other apps have user IDs: Signal, Matrix, Session, Briar, Jami, Cwtch, etc.<br>
SimpleX does not, <strong>not even random numbers</strong>.<br>
This radically improves your privacy.
</p>
<a href="javascript:void(0)" data-show-overlay="{{ hero_overlays.sections[1].overlayContent.overlayId }}" class="open-overlay-btn underline text-primary-light dark:text-primary-dark block text-center xl:text-left text-[14px] xl:text-[16px] leading-[34px] underline-offset-2">Why user IDs are bad for privacy?</a>
{{ overlay(hero_overlays.sections[1]) }}
<a href="javascript:void(0)" data-show-overlay="{{ hero_overlays.sections[0].overlayContent.overlayId }}" class="open-overlay-btn underline text-primary-light dark:text-primary-dark block text-center xl:text-left text-[14px] xl:text-[16px] leading-[34px] underline-offset-2">How does SimpleX work?</a>
{{ overlay(hero_overlays.sections[0]) }}
</article>
<article class="w-full xl:max-w-[600px]">
<p class="text-black dark:text-white hidden md:block text-center xl:text-left text-[16px] leading-[26px] mb-[11px] md:mt-6">Get SimpleX</p>
<div class="socials flex items-center justify-center xl:justify-start gap-4 flex-wrap mt-[30px]">
<a href="https://apps.apple.com/us/app/simplex-chat/id1605771084" target="_blank"><img class="h-[40px] w-auto" src="/img/new/apple_store.svg" /></a>
<a href="https://play.google.com/store/apps/details?id=chat.simplex.app" target="_blank" title="Public iOS preview on TestFlight"><img class="h-[40px] w-auto" src="/img/new/google_play.svg" /></a>
<a href="https://app.simplex.chat" target="_blank" title="SimpleX F-Droid Repository"><img class="h-[40px] w-auto" src="/img/new/f_droid.svg" /></a>
<a href="https://testflight.apple.com/join/DWuT2LQu" target="_blank"><img class="h-[40px] w-auto" src="/img/new/testflight.png" /></a>
<a href="https://github.com/simplex-chat/simplex-chat/releases/latest/download/simplex.apk" target="_blank"><img class="h-[40px] w-auto" src="/img/new/apk_icon.png" /></a>
</div>
</article>
</div>
</section>
<section class="xl:h-[calc(100vh-66px)] xl:max-h-[888px]">
<div class="h-[calc(100%-81.42px)] w-full flex flex-col items-start justify-around">
<div class="hero-video-phone-container w-full xl:hidden">
<div class="hidden relative md:flex items-center justify-center">
<img id="hero-video-phone-Background hidden md:block" src="/img/new/tab-video.svg" />
<video class="absolute rounded-lg top-10 w-[235px] ml-[-6px] mt-1" controls>
<source src="/video/connect.mp4" type="video/mp4">
</video>
{# <div class="absolute flex flex-col items-center gap-3">
<img src="/img/new/play-btn.svg" alt="" />
<p class="text-center text-[16px] leading-[24px] tracking-[0.04em] text-white">PLAY</p>
</div> #}
</div>
<div class="w-full md:hidden my-10 relative flex items-center justify-center bg-[#17203D]">
<video class="w-full" controls>
<source src="/video/connect.mp4" type="video/mp4">
</video>
{# <img src="/img/new/mobile-video-placeholder.png" alt="">
<div class="absolute flex flex-col items-center gap-3">
<img src="/img/new/play-btn.svg" alt="" />
<p class="text-center text-[16px] leading-[24px] tracking-[0.04em] text-white">PLAY</p>
</div> #}
{# <video class="w-full absolute" controls>
<source src="/video/connect.mp4" type="video/mp4">
</video> #}
</div>
{# <iframe id="hero-video-phone" src="https://www.youtube.com/embed/2IbRtjez6ag" title="Foodies Carpool Show ft WildLens By Abrar" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> #}
</div>
<article class="w-full xl:max-w-[600px] landing-page-header-article px-5">
<p class="text-active-blue text-center xl:text-left font-bold text-[28px] md:text-[35px] leading-[36px] md:leading-[43px] mb-[28px]">
Make a private connection
</p>
<p class="text-center text-black dark:text-white xl:text-justify leading-[24px] text-[16px] mb-10 xl:mb-[25px] header-description">
The video shows how you connect to your friend via their 1-time QR-code, in person or via a video link.
You can also connect by sharing an invitation link.
</p>
</article>
<div class="w-full container px-5 hidden md:flex items-center justify-center gap-[50px] py-[24px] xl:absolute bottom-0 z-10">
<a href="#why-simplex" class="menu-link">Why SimpleX</a>
<a href="#features" class="menu-link">Features</a>
<a href="#simplex-privacy" class="menu-link">SimpleX privacy</a>
<a href="#simplex-network" class="menu-link">SimpleX network</a>
</div>
</div>
</section>
</div>
<div class="hero-phone-background hidden md:flex md:static md:max-w-[490px] md:mb-6 xl:mb-0 xl:flex items-center justify-center h-fit xl:h-[calc(100vh-66px)] xl:max-h-[888px] xl:min-w-[600px] xl:sticky top-[66px]">
<img id="hero-phone-light" class="only-light"/>
<img id="hero-phone-dark" class="only-dark"/>
<div id="hero-phone-preload" style="display: none"></div>
<video id="hero-phone-video" class="absolute hidden rounded-[12px] bg-black w-[238px] mr-[-4px] mt-[14px]" controls>
<source src="/video/connect.mp4" type="video/mp4">
</video>
</div>
</div>
</div>
<script>
var navBar = document.querySelector("nav");
var landingPageHeader = document.querySelector('.landing-page-header');
//landingPageHeader.style.height = window.innerHeight - navBar.offsetHeight + 'px';
// event listener for changing height of section according to window height
//window.addEventListener('resize', function () {
// landingPageHeader.style.height = window.innerHeight - navBar.offsetHeight + 'px';
//});
</script>