mirror of
https://github.com/simplex-chat/simplex-chat.git
synced 2026-04-02 02:55:57 +00:00
3419ce293b
* website: downloads page * link * website: fix h2 headers issue * website: fix sidebar issue * website: fix language changer for downloads page in navbar * update, add security assessment section --------- Co-authored-by: M Sarmad Qadeer <MSarmadQadeer@gmail.com>
132 lines
12 KiB
HTML
132 lines
12 KiB
HTML
{% set lang = page.url | getlang %}
|
|
<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)] hero-section-1 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">
|
|
<h1 class="primary-header text-center xl:text-left xl:rtl:text-right font-bold text-[38px] md:text-[55px] leading-[46px] md:leading-[63px] mb-2 xl:mb-8">{{ "hero-header" | i18n({}, lang ) | safe }}</h1>
|
|
<h2 class="secondary-header text-center xl:text-left xl:rtl:text-right font-bold text-[28px] md:text-[38px] leading-[36px] md:leading-[43px] mb-2 xl:mb-8 tracking-[0.01em]">{{ "hero-subheader" | i18n({}, lang ) | safe }}</h2>
|
|
<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">
|
|
{{ "hero-p-1" | i18n({}, lang ) | safe }}
|
|
</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 xl:rtl:text-right text-[14px] xl:text-[16px] leading-[34px] underline-offset-2">{{ "hero-overlay-1-textlink" | i18n({}, lang ) | safe }}</a>
|
|
{{ overlay(hero_overlays.sections[1], lang) }}
|
|
<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 xl:rtl:text-right text-[14px] xl:text-[16px] leading-[34px] underline-offset-2">{{ "hero-overlay-2-textlink" | i18n({}, lang ) | safe }}</a>
|
|
{{ overlay(hero_overlays.sections[0], lang) }}
|
|
<a href="javascript:void(0)" data-show-overlay="{{ hero_overlays.sections[2].overlayContent.overlayId }}" class="open-overlay-btn underline text-primary-light dark:text-primary-dark block text-center xl:text-left xl:rtl:text-right text-[14px] xl:text-[16px] leading-[34px] underline-offset-2">{{ "hero-overlay-3-textlink" | i18n({}, lang ) | safe }}</a>
|
|
{{ overlay(hero_overlays.sections[2], lang) }}
|
|
</article>
|
|
|
|
<article class="w-full xl:max-w-[600px]">
|
|
<div id="simplex-reviews" class="flex items-center justify-center xl:justify-start flex-wrap gap-4 my-10">
|
|
<a class="block rounded overflow-hidden" title="security assessment" href="https://simplex.chat/blog/20221108-simplex-chat-v4.2-security-audit-new-website.html" target="_blank">
|
|
<img class="h-[40px] w-auto block dark:hidden" src="/img/trail-of-bits-light.png" alt="Trail of Bits">
|
|
<img class="h-[40px] w-auto hidden dark:block" src="/img/trail-of-bits-dark.png" alt="Trail of Bits">
|
|
</a>
|
|
<a class="block rounded overflow-hidden" title="messenger recommendations" href="https://www.privacyguides.org/en/real-time-communication/#simplex-chat" target="_blank">
|
|
<img class="h-[40px] w-auto block dark:hidden" src="/img/privacy-guides-light.png" alt="Privacy Guides">
|
|
<img class="h-[40px] w-auto hidden dark:block" src="/img/privacy-guides-dark.png" alt="Privacy Guides">
|
|
</a>
|
|
<a class="block rounded overflow-hidden" title="publication" href="https://www.heise.de/suche/?q=simplex+chat&sort_by=date&rm=search" target="_blank">
|
|
<img class="h-[40px] w-auto block dark:hidden" src="/img/heise-light.png" alt="Heise Online">
|
|
<img class="h-[40px] w-auto hidden dark:block" src="/img/heise-dark.png" alt="Heise Online">
|
|
</a>
|
|
<a class="block rounded overflow-hidden" title="review" href="https://www.kuketz-blog.de/simplex-eindruecke-vom-messenger-ohne-identifier/" target="_blank">
|
|
<img class="h-[40px] w-auto block dark:hidden" src="/img/kuketz-blog-light.png" alt="Mike Kuketz blog">
|
|
<img class="h-[40px] w-auto hidden dark:block" src="/img/kuketz-blog-dark.png" alt="Mike Kuketz blog">
|
|
</a>
|
|
<a class="block rounded overflow-hidden" title="podcast interview" href="https://optoutpod.com/episodes/s3e02-simplexchat/" target="_blank">
|
|
<img class="h-[40px] w-auto" src="/img/optout.jpg" alt="Opt Out Podcast">
|
|
</a>
|
|
</div>
|
|
|
|
<div>
|
|
<p class="text-black dark:text-white hidden md:block text-center xl:text-left xl:rtl:text-right text-[16px] leading-[26px] mb-[11px] md:mt-6">{{ "get-simplex" | i18n({}, lang ) | safe }}</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="{{ '' if lang == 'en' else '/' ~ lang }}/fdroid" 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>
|
|
</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">
|
|
<h2 class="text-active-blue text-center xl:text-left xl:rtl:text-right font-bold text-[28px] md:text-[35px] leading-[36px] md:leading-[43px] mb-[28px]">
|
|
{{ "hero-2-header" | i18n({}, lang ) | safe }}
|
|
</h2>
|
|
<p class="text-center text-black dark:text-white xl:text-justify leading-[24px] text-[16px] mb-10 xl:mb-[25px] header-description">
|
|
{{ "hero-2-header-desc" | i18n({}, lang ) | safe }}
|
|
</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" | i18n({}, lang ) | safe }}</a>
|
|
<a href="#features" class="menu-link">{{ "features" | i18n({}, lang ) | safe }}</a>
|
|
<a href="#privacy" class="menu-link">{{ "simplex-privacy" | i18n({}, lang ) | safe }}</a>
|
|
<a href="#network" class="menu-link">{{ "simplex-network" | i18n({}, lang ) | safe }}</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>
|