Korbs/sudovanilla-website
1
Fork 0
Code Issues Pull requests Activity

Add image option instead only only providing video

Browse source
This commit is contained in:
Korbs 2024-08-27 01:51:16 -04:00
parent a260dc9e35
commit 751c7ea87a
2 changed files with 21 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
src/components/Hero.astro
View file

@ -1,25 +1,26 @@
---
// Properties
const { Title, Description, VideoSrc, VideoCredit, VideoPoster } = Astro.props;
const { Title, Description, VideoSrc, UseImage, UseVideo, Credit, VideoPoster, Image } = Astro.props;
// Components
import SudoVanillaLogo from "@components/global/SudoVanillaLogo.astro";
import SudoVanilla from "@components/global/SudoVanillaLogo.astro";
// Icons
import { InfoCircle } from "iconoir-react";
import { InfoCircle } from "@iconoir/vue";
---
<div class="landing-hero">
<video autoplay muted loop src={VideoSrc} poster={VideoPoster}></video>
{UseImage ? <img src={Image}/> : null}
{UseVideo ? <video autoplay muted loop src={VideoSrc} poster={VideoPoster}></video> : null}
<!-- Shoelace needs JS, this is a fallback solution -->
<noscript>
<p id="video-credit">{VideoCredit}</p>
<p id="video-credit">{Credit}</p>
</noscript>
<sl-tooltip
id="video-credit-js"
class="with-js"
content={VideoCredit}
content={Credit}
placement="top-end"
style="--sl-tooltip-arrow-size: 0; --max-width: 600px;"
>
@ -46,6 +47,14 @@ import { InfoCircle } from "iconoir-react";
object-fit: cover;
pointer-events: none;
}
img {
width: 100%;
height: 500px;
border-radius: 10px;
opacity: 0.32;
object-fit: cover;
pointer-events: none;
}
#video-credit,
#video-credit-js {
position: absolute;
@ -53,7 +62,7 @@ import { InfoCircle } from "iconoir-react";
bottom: 0px;
right: 0px;
font-size: 10px;
opacity: 0.4;
opacity: 0.8;
margin: 32px;
a {
color: white;

12
src/pages/init/index.astro
View file

@ -9,7 +9,7 @@ import Posts from "@components/blog/posts.astro";
import LargeCard from "@components/Feature.astro";
// Icons
import { BookmarkBook, ReportColumns } from "iconoir-react";
import { BookmarkBook, ReportColumns } from "@iconoir/vue";
---
<Default MobileTitle="Init Privacy">
@ -17,17 +17,17 @@ import { BookmarkBook, ReportColumns } from "iconoir-react";
<p class="header-sub-service">Init Privacy</p>
<div>
<a href="/init/software/browsers/">Softwares</a>
<a href="/init/websites/">Websites</a>
<a href="/init/disclaimer/">Disclaimers</a>
<a href="/init/software/websites/">Websites</a>
<a href="/init/software/disclaimer/">Disclaimers</a>
</div>
</Fragment>
<Fragment slot="body">
<Hero
Title="Init Privacy"
Description="Your data is your business"
VideoSrc="https://md.sudovanilla.org/videos/mp4/init-hero.mp4"
VideoPoster="https://md.sudovanilla.org/images/init-poster.png"
VideoCredit="Video By George Morina on Pexels"
UseImage
Image="https://images.pexels.com/photos/179993/pexels-photo-179993.jpeg"
Credit="Black and White CCTV Cameras. Shot by Thomas Windisch on Pexels."
/>
<LargeCard
Title="User Freedom"