MinPluto/poke-on-astro-experiment
Archived
1
0
Fork 0
Code Issues Pull requests Activity

Complete landing

Browse source
This commit is contained in:
Korbs 2024-06-21 22:09:44 -04:00
parent 023d521fef
commit c854ae8153
No known key found for this signature in database
3 changed files with 259 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/components/Dropdown.astro
View file

@ -135,10 +135,12 @@ function ToggleHeaderLanguageDropdown() {
position: absolute;
top: 70px;
right: 24px;
background: #202020;
background: transparent;
border-radius: 12px;
gap: 6px;
padding: 12px 6px 8px 6px;
backdrop-filter: blur(24px) brightness(0.1) contrast(0.9);
z-index: 5;
p {
margin: 0px 0px 0px 12px;
color: gray;

1
src/components/global/Header.astro
View file

@ -46,6 +46,7 @@ header {
width: 100%;
background: #161616;
border-bottom: 2px #232323 solid;
z-index: 5;
.header-content {
display: flex;
justify-content: space-between;

256
src/pages/index.astro
View file

@ -1,5 +1,259 @@
---
// Layout
import Layout from "@layouts/Default.astro";
// Components
import { Image } from 'astro:assets';
// Images
import WebScreenshot from '@assets/screenshots/web.png'
import MobileScreenshot from '@assets/screenshots/mobile.jpg'
import Chan from '@assets/chan/v2.png'
---
<Layout Title="Poke" Description="▶▶ Poke - The privacy app of your dreams!"></Layout>
<Layout Title="Poke" Description="▶▶ Poke - The privacy app of your dreams!">
<video playsinline autoplay muted loop class="landing-background" src="/flurry-background.webm" type="video/webm"/>
<div class="landing">
<h1>PRIVACY APP OF YOUR DREAMS</h1>
<p style="max-width: 800px;">Poke is a free software youtube front-end, search engine, translator, map app and even more!!1!! Watch silly videos, search stuff on the internet and do all of that and more anonymously in this all-in-one privacy app!!!1! :3</p>
<div style="display: flex; gap: 12px;">
<Image src={WebScreenshot} alt="Web screenshot"/>
<Image src={MobileScreenshot} alt="Web screenshot"/>
<Image id="chan" src={Chan} alt="Poke-Chan"/>
</div>
<!-- Icons are from Iconoir -->
<h1 style="margin-left: auto;margin-right: auto;text-align: center;margin-bottom: -1em;margin-top: 1em;"> Why Choose Poke Lol? </h1>
<div class="new-feature-set">
<div class="feature-set">
<div class="feature-set-title">
<?xml version="1.0" encoding="UTF-8"?><svg style="background: #ea6d6d;" width="24px" height="24px" viewBox="0 0 24 24" stroke-width="1.5" fill="none" xmlns="http://www.w3.org/2000/svg" color="#ffffff" style="--darkreader-inline-color: #e8e6e3;" data-darkreader-inline-color=""><path d="M19.5 16L17.0248 12.6038" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" style="--darkreader-inline-stroke: #ffffff;" data-darkreader-inline-stroke=""></path><path d="M12 17.5V14" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" style="--darkreader-inline-stroke: #ffffff;" data-darkreader-inline-stroke=""></path><path d="M4.5 16L6.96895 12.6124" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" style="--darkreader-inline-stroke: #ffffff;" data-darkreader-inline-stroke=""></path><path d="M3 8C6.6 16 17.4 16 21 8" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" style="--darkreader-inline-stroke: #ffffff;" data-darkreader-inline-stroke=""></path></svg>
<h2>No Tracking and Ads</h2>
</div>
<p> Poke Has no Trackers or ads - we dont and we wont see the vids ur watching :3</p>
</div>
<div class="feature-set">
<div class="feature-set-title">
<?xml version="1.0" encoding="UTF-8"?><svg style="background: #6d8cea;" width="24px" height="24px" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="#ffffff" style="--darkreader-inline-color: #e8e6e3;" data-darkreader-inline-color=""><path d="M15 7C16.1046 7 17 6.10457 17 5C17 3.89543 16.1046 3 15 3C13.8954 3 13 3.89543 13 5C13 6.10457 13.8954 7 15 7Z" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" style="--darkreader-inline-stroke: #ffffff;" data-darkreader-inline-stroke=""></path><path d="M12.6133 8.26691L9.30505 12.4021L13.4403 16.5374L11.3727 21.0861" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" style="--darkreader-inline-stroke: #ffffff;" data-darkreader-inline-stroke=""></path><path d="M6.4104 9.5075L9.79728 6.19931L12.6132 8.26692L15.508 11.5752H19.2297" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" style="--darkreader-inline-stroke: #ffffff;" data-darkreader-inline-stroke=""></path><path d="M8.89152 15.7103L7.65095 16.5374H4.34277" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" style="--darkreader-inline-stroke: #ffffff;" data-darkreader-inline-stroke=""></path></svg>
<h2>Very Fast</h2>
</div>
<p> Poke is really ligthweight (both on server and client :3) so you can still use it on poor connections :3</p>
</div>
<div class="feature-set">
<div class="feature-set-title">
<?xml version="1.0" encoding="UTF-8"?><svg style="background: #519355;" width="24px" height="24px" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="#ffffff" style="--darkreader-inline-color: #e8e6e3;" data-darkreader-inline-color=""><path d="M12 8V16M12 16L15.5 12.5M12 16L8.5 12.5" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" style="--darkreader-inline-stroke: #ffffff;" data-darkreader-inline-stroke=""></path><path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" style="--darkreader-inline-stroke: #ffffff;" data-darkreader-inline-stroke=""></path></svg>
<h2>Downloader</h2>
</div>
<p>You wouldnt download a car - welp i would :D u can download videos from poke for 0$!</p>
</div>
<div class="feature-set">
<div class="feature-set-title">
<?xml version="1.0" encoding="UTF-8"?><svg style="background: #ea6ddc;" width="24px" height="24px" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="#ffffff" style="--darkreader-inline-color: #e8e6e3;" data-darkreader-inline-color=""><path d="M21 12V10C21 7.23858 18.7614 5 16 5H8C5.23858 5 3 7.23858 3 10V10C3 12.7614 5.23858 15 8 15H12" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" style="--darkreader-inline-stroke: #ffffff;" data-darkreader-inline-stroke=""></path><path d="M20.1241 19.1185C20.6654 18.5758 21 17.827 21 17C21 15.3431 19.6569 14 18 14C16.3431 14 15 15.3431 15 17C15 18.6569 16.3431 20 18 20C18.8299 20 19.581 19.663 20.1241 19.1185ZM20.1241 19.1185L22 21" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" style="--darkreader-inline-stroke: #ffffff;" data-darkreader-inline-stroke=""></path></svg>
<h2>Web Search</h2>
</div>
<p>u can search the interwebs for anything that u wan!! (ik wha ur gonna search :p) </p>
</div>
<div class="feature-set">
<div class="feature-set-title">
<?xml version="1.0" encoding="UTF-8"?><svg style="background: #b7a358;" width="24px" height="24px" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="#ffffff" style="--darkreader-inline-color: #e8e6e3;" data-darkreader-inline-color=""><path d="M4.62323 5.24841C2.99408 7.02743 2 9.39765 2 12C2 17.5229 6.47715 22 12 22C14.5361 22 16.8517 21.0559 18.6146 19.5" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" style="--darkreader-inline-stroke: #ffffff;" data-darkreader-inline-stroke=""></path><path d="M21.3021 15.6775C21.7525 14.5392 22 13.2985 22 12C22 6.47715 17.5228 2 12 2C10.7687 2 9.58934 2.22255 8.5 2.62961" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" style="--darkreader-inline-stroke: #ffffff;" data-darkreader-inline-stroke=""></path><path d="M9 15C9.64448 15.8593 10.8428 16.3494 12 16.391C13.1141 16.431 14.1901 16.0554 14.6973 15.1933" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" style="--darkreader-inline-stroke: #ffffff;" data-darkreader-inline-stroke=""></path><path d="M12 16.391V18.5" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" style="--darkreader-inline-stroke: #ffffff;" data-darkreader-inline-stroke=""></path><path d="M9.5 9.5C9.5 10.6811 10.3525 11.1647 11.3862 11.5" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" style="--darkreader-inline-stroke: #ffffff;" data-darkreader-inline-stroke=""></path><path d="M15 8.5C14.315 7.81501 13.1087 7.33855 12 7.30872V5.5" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" style="--darkreader-inline-stroke: #ffffff;" data-darkreader-inline-stroke=""></path><path d="M3 3L21 21" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" style="--darkreader-inline-stroke: #ffffff;" data-darkreader-inline-stroke=""></path></svg>
<h2>DRM Free</h2>
</div>
<p> Poke comes without digital restrictions management - poke is free software :3</p>
</div>
<div class="feature-set">
<div class="feature-set-title">
<?xml version="1.0" encoding="UTF-8"?><svg style="background: #886dea;" width="24px" height="24px" viewBox="0 0 24 24" stroke-width="1.5" fill="none" xmlns="http://www.w3.org/2000/svg" color="#ffffff"><path d="M17.5 17.5C20 21 23.9486 18.4151 23 15C21.5753 9.87113 20.8001 7.01556 20.3969 5.50793C20.1597 4.62136 19.3562 4 18.4384 4L5.56155 4C4.64382 4 3.844 4.62481 3.62085 5.515C2.7815 8.86349 2.0326 11.8016 1.14415 15C0.195501 18.4151 4.14415 21 6.64415 17.5" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M16 4V6C16 7.10457 15.1046 8 14 8H10C8.89543 8 8 7.10457 8 6L8 4" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M8 16C9.10457 16 10 15.1046 10 14C10 12.8954 9.10457 12 8 12C6.89543 12 6 12.8954 6 14C6 15.1046 6.89543 16 8 16Z" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M16 16C17.1046 16 18 15.1046 18 14C18 12.8954 17.1046 12 16 12C14.8954 12 14 12.8954 14 14C14 15.1046 14.8954 16 16 16Z" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg>
<h2>Games Included</h2>
</div>
<p> U can play funnie games on poke! </p>
</div>
</div>
<div class="adaptive-grid">
<div class="card">
<div class="card-title">
<h2>Join Us</h2>
<br/>
<p>join our community if you want to! :3</p>
</div>
<div class="card-actions">
<a class="card-secondary" href="https://discord.poketube.fun"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M524.5 69.8a1.5 1.5 0 0 0 -.8-.7A485.1 485.1 0 0 0 404.1 32a1.8 1.8 0 0 0 -1.9 .9 337.5 337.5 0 0 0 -14.9 30.6 447.8 447.8 0 0 0 -134.4 0 309.5 309.5 0 0 0 -15.1-30.6 1.9 1.9 0 0 0 -1.9-.9A483.7 483.7 0 0 0 116.1 69.1a1.7 1.7 0 0 0 -.8 .7C39.1 183.7 18.2 294.7 28.4 404.4a2 2 0 0 0 .8 1.4A487.7 487.7 0 0 0 176 479.9a1.9 1.9 0 0 0 2.1-.7A348.2 348.2 0 0 0 208.1 430.4a1.9 1.9 0 0 0 -1-2.6 321.2 321.2 0 0 1 -45.9-21.9 1.9 1.9 0 0 1 -.2-3.1c3.1-2.3 6.2-4.7 9.1-7.1a1.8 1.8 0 0 1 1.9-.3c96.2 43.9 200.4 43.9 295.5 0a1.8 1.8 0 0 1 1.9 .2c2.9 2.4 6 4.9 9.1 7.2a1.9 1.9 0 0 1 -.2 3.1 301.4 301.4 0 0 1 -45.9 21.8 1.9 1.9 0 0 0 -1 2.6 391.1 391.1 0 0 0 30 48.8 1.9 1.9 0 0 0 2.1 .7A486 486 0 0 0 610.7 405.7a1.9 1.9 0 0 0 .8-1.4C623.7 277.6 590.9 167.5 524.5 69.8zM222.5 337.6c-29 0-52.8-26.6-52.8-59.2S193.1 219.1 222.5 219.1c29.7 0 53.3 26.8 52.8 59.2C275.3 311 251.9 337.6 222.5 337.6zm195.4 0c-29 0-52.8-26.6-52.8-59.2S388.4 219.1 417.9 219.1c29.7 0 53.3 26.8 52.8 59.2C470.7 311 447.5 337.6 417.9 337.6z"/></svg> Discord</a>
<a class="card-primary" href="https://matrix.to/#/%23poke:vern.cc"><svg version="1.1" viewBox="0 0 27.9 32" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"><g transform="translate(-.095 .005)" fill="#040404"><path d="m27.1 31.2v-30.5h-2.19v-0.732h3.04v32h-3.04v-0.732z"/><path d="m8.23 10.4v1.54h0.044c0.385-0.564 0.893-1.03 1.49-1.37 0.58-0.323 1.25-0.485 1.99-0.485 0.72 0 1.38 0.14 1.97 0.42 0.595 0.279 1.05 0.771 1.36 1.48 0.338-0.5 0.796-0.941 1.38-1.32 0.58-0.383 1.27-0.574 2.06-0.574 0.602 0 1.16 0.074 1.67 0.22 0.514 0.148 0.954 0.383 .32 0.707 0.366 0.323 0.653 0.746 0.859 1.27 0.205 0.522 0.308 1.15 0.308 1.89v7.63h-3.13v-6.46c0-0.383-0.015-0.743-0.044-1.08-0.0209-0.307-0.103-0.607-0.242-0.882-0.133-0.251-0.336-0.458-0.584-0.596-0.257-0.146-0.606-0.22-1.05-0.22-0.44 0-0.796 0.085-1.07 0.253-0.272 0.17-0.485 0.39-0.639 0.662-0.159 0.287-0.264 0.602-0.308 0.927-0.052 0.347-0.078 0.697-0.078 1.05v6.35h-3.13v-6.4c0-0.338-7e-3 -0.673-0.021-1-0.0114-0.314-0.0749-0.623-0.188-0.916-0.108-0.277-0.3-0.512-0.55-0.673-0.258-0.168-0.636-0.253-1.14-0.253-0.198 0.0083-0.394 0.042-0.584 0.1-0.258 0.0745-0.498 0.202-0.705 0.374-0.228 0.184-0.422 0.449-0.584 0.794-0.161 0.346-0.242 0.798-0.242 1.36v6.62h-3.13v-11.4z"/><path d="m0.936 0.732v30.5h2.19v0.732h-3.04v-32h3.03v0.732z"/></g></svg> Matrix</a>
</div>
</div>
<div class="card">
<div class="card-title">
<h2>Free and libre</h2>
<br/>
<p>Poke is free and libre software! u can view, edit and redistribute under GNU GPL 3 or later :3</p>
</div>
<div class="card-actions">
<a class="card-secondary" href="https://github.com/ashley0143/poke"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3 .3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5 .3-6.2 2.3zm44.2-1.7c-2.9 .7-4.9 2.6-4.6 4.9 .3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3 .7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3 .3 2.9 2.3 3.9 1.6 1 3.6 .7 4.3-.7 .7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3 .7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3 .7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"/></svg> GitHub</a>
<a class="card-primary" href="https://codeberg.org/ashley/poke"><svg xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="svg1468" version="1.1" viewBox="0 0 4.233 4.233"><title id="title16">Codeberg logo</title><defs id="defs1462"><linearGradient id="linearGradient6918" x1="42519.285" x2="42575.336" y1="-7078.789" y2="-6966.931" gradientUnits="userSpaceOnUse" xlink:href="#linearGradient6924"></linearGradient><linearGradient id="linearGradient6924"><stop style="stop-color:#2185d0;stop-opacity:0" id="stop6920" offset="0"></stop><stop id="stop6926" offset=".495" style="stop-color:#000000;stop-opacity:.48923996"></stop><stop style="stop-color:#000000;stop-opacity:.63279623" id="stop6922" offset="1"></stop></linearGradient><linearGradient id="linearGradient6918-3" x1="42519.285" x2="42575.336" y1="-7078.789" y2="-6966.931" gradientUnits="userSpaceOnUse" xlink:href="#linearGradient6924-6"></linearGradient><linearGradient id="linearGradient6924-6"><stop style="stop-color:#000000;stop-opacity:0" id="stop6920-7" offset="0"></stop><stop id="stop6926-5" offset=".495" style="stop-color:#000000;stop-opacity:.30000001"></stop><stop style="stop-color:#000000;stop-opacity:.30000001" id="stop6922-3" offset="1"></stop></linearGradient></defs><metadata id="metadata1465"></metadata><g id="g370484" transform="matrix(0.06551432,0,0,0.06551432,-2.232417,-1.431776)"><path id="path6733-5" style="font-variation-settings:normal;opacity:1;vector-effect:none;fill:url(#linearGradient6918-3);fill-opacity:1;stroke:none;stroke-width:3.67846;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:2;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke markers fill;stop-color:#000;stop-opacity:1" d="m 42519.285,-7078.7891 a 0.76086879,0.56791688 0 0 0 -0.738,0.6739 l 33.586,125.8886 a 87.182358,87.182358 0 0 0 39.381,-33.7636 l -71.565,-92.5196 a 0.76086879,0.56791688 0 0 0 -0.664,-0.2793 z" transform="matrix(0.37058478,0,0,0.37058478,-15690.065,2662.0533)"></path><path id="path360787" style="opacity:1;fill:#000000;fill-opacity:1;stroke-width:17.0055;paint-order:markers fill stroke;stop-color:#000" d="m 11249.461,-1883.6961 c -12.74,0 -23.067,10.3275 -23.067,23.0671 0,4.3335 1.22,8.5795 3.522,12.2514 l 19.232,-24.8636 c 0.138,-0.1796 0.486,-0.1796 0.624,0 l 19.233,24.8646 c 2.302,-3.6721 3.523,-7.9185 3.523,-12.2524 0,-12.7396 -10.327,-23.0671 -23.067,-23.0671 z" transform="matrix(1.4006354,0,0,1.4006354,-15690.065,2662.0533)"></path></g></svg> Codeberg</a>
</div>
</div>
</div>
</div>
</Layout>
<style lang="scss" is:global>
header {
background: transparent !important;
border: none !important;
}
video {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: -1;
opacity: .27;
pointer-events: none;
}
.landing {
margin: auto;
position: relative;
margin-top: 240px;
max-width: 1200px;
h1 {
font-size: xxx-large;
font-stretch: ultra-expanded;
font-weight: 1000;
}
img {
margin-top: 48px;
height: 503px;
object-fit: cover;
object-position: top;
mask-image: linear-gradient(#5315ff,#0000);
border-top-left-radius: 1em;
border-top-right-radius: 1em;
pointer-events: none;
-webkit-mask-image: linear-gradient(#5315ff,#0000);
}
#chan {
height: 400px;
width: 369px;
mask-image: none;
z-index: -1;
transform: scaleX(1);
float: right;
display: flex;
position: absolute;
right: 10px;
margin: -237px -60px 0 0;
-webkit-mask-image: linear-gradient(#5315ff,#0000);
}
}
.new-feature-set {
display: grid;
margin: 54px 0 24px 0;
max-width: 1200px;
grid-template-columns: repeat(auto-fit,minmax(350px,1fr));
text-align: left;
.feature-set {
padding: 32px;
.feature-set-title {
display: flex;
align-items: center;
gap: 12px;
justify-content: left;
h2 {
font-stretch: ultra-expanded;
font-weight: 1000;
margin: 0;
}
svg {
width: 32px;
height: 32px;
border-radius: 5rem;
padding: 6px;
}
}
p {
text-align: left;
}
}
}
p {
display: block;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0;
margin-inline-end: 0;
}
.adaptive-grid {
display: grid;
grid-template-columns: repeat(auto-fit,minmax(350px,1fr));
max-width: 1200px;
margin: auto;
grid-gap: 12px;
}
.card {
padding: 24px;
.card-title {
display: flex;
flex-direction: column;
svg {
width: 32px;
height: 32px;
margin-right: 12px;
}
h2 {
font-stretch: ultra-expanded;
font-weight: 1000;
margin: 0px;
}
}
.card-actions {
display: flex;
align-items: center;
justify-content: right;
gap: 12px;
svg {
width: 24px !important;
height: 24px !important;
margin-right: 6px;
}
a {
color: white;
border: 2px white solid;
border-radius: 3rem;
padding: 12px 24px 12px 12px;
display: flex;
align-items: center;
text-decoration: none;
&:hover {
filter: brightness(0.8);
text-decoration: nones;
}
}
.card-primary {
background: white;
color: black;
svg {
fill: black;
}
}
.card-secondary {
svg {
fill: white;
}
}
}
}
</style>