From 751c7ea87a48e34053bb9736fbab20885db16811 Mon Sep 17 00:00:00 2001
From: Korbs <korbs@sudovanilla.org>
Date: Tue, 27 Aug 2024 01:51:16 -0400
Subject: [PATCH] Add image option instead only only providing video

---
 src/components/Hero.astro  | 21 +++++++++++++++------
 src/pages/init/index.astro | 12 ++++++------
 2 files changed, 21 insertions(+), 12 deletions(-)

diff --git a/src/components/Hero.astro b/src/components/Hero.astro
index f1396ce..031473b 100644
--- a/src/components/Hero.astro
+++ b/src/components/Hero.astro
@@ -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;
diff --git a/src/pages/init/index.astro b/src/pages/init/index.astro
index fb4899d..37c1210 100644
--- a/src/pages/init/index.astro
+++ b/src/pages/init/index.astro
@@ -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"