Merge pull request #6 from lanis-mobile/faq2

Faq2

Author: alessioc42

assets/fastlane/metadata/android/en-US/images/phoneScreenshots/01.png

@@ -3,4 +3,7 @@ import tailwind from '@astrojs/tailwind';
 
 export default defineConfig({
   integrations: [tailwind()],
+  image: {
+    domains: ['avatars.githubusercontent.com'],
+  },
 });

assets/fastlane/metadata/android/en-US/images/phoneScreenshots/02.png

@@ -1,10 +1,25 @@
 ---
+import { Image, getImage } from 'astro:assets';
 import StoreButtons from './StoreButtons.astro';
+import appIconSource from '../../assets/icon.png';
+import iosMaskBorderSource from '../../assets/ios-mask-border-128.svg';
+import iosMaskSource from '../../assets/ios-mask.svg';
+
+const iosMaskBorder = await getImage({ src: iosMaskBorderSource });
+const iosMask = await getImage({ src: iosMaskSource });
 ---
 
-<header class="mx-auto mt-8 mb-4 flex w-full max-w-[960px] flex-row items-start px-[30px] md:mt-32 md:mb-32 md:items-center">
-  <div class="mr-4 inline-block h-full w-full max-w-[100px] max-h-[100px] bg-[url('/assets/ios-mask-border-128.svg')] bg-contain bg-no-repeat p-[1px] md:mr-16 md:max-h-[250px] md:max-w-[250px]">
-    <img alt="Lanis-Mobile" class="h-auto w-full rounded-[22.5%] [mask-image:url('/assets/ios-mask.svg')] [mask-size:cover]" src="/content/image/b3o1shvbuyeezgcpd7vp.png" />
+<header class="mx-auto mt-8 mb-4 flex w-full max-w-[960px] flex-row items-start px-[30px] md:mt-32 md:mb-16 md:items-center">
+  <div
+    class="mr-4 inline-block h-full w-full max-w-[100px] max-h-[100px] bg-contain bg-no-repeat p-[1px] md:mr-16 md:max-h-[250px] md:max-w-[250px]"
+    style={`background-image: url(${iosMaskBorder.src});`}
+  >
+    <Image
+      src={appIconSource}
+      alt="Lanis-Mobile"
+      class="h-auto w-full rounded-[22.5%]"
+      style={`mask-image: url(${iosMask.src}); -webkit-mask-image: url(${iosMask.src}); mask-size: cover; -webkit-mask-size: cover;`}
+    />
   </div>
   <div>
     <h1 class="m-0 font-bold text-4xl text-[var(--font-xl)]">Lanis-Mobile</h1>