feat(landing): update images

src/pages/index.astro

@@ -5,11 +5,12 @@ import Layout from '../layouts/Layout.astro';
 import Card from '../components/Card.astro';
 import LocalizedMarkdown from '@components/LocalizedMarkdown.astro';
 import Button from '../components/Button/Button.astro';
-import { Image } from 'astro:assets';
+import { Image, getImage } from 'astro:assets';
 import portrait from '../assets/images/portrait.jpg';
 import iconEmail from '../assets/icons/email.svg';
 import iconLinkedin from '../assets/icons/linkedin.svg';
 import iconGithub from '../assets/icons/github.svg';
+import Background1 from '@assets/images/section-bg-1.png';
 
 changeLanguage('en');
 
@@ -21,13 +22,18 @@ const portafolio = [
   await getEntry('portafolio', 'destino-temuco'),
   await getEntry('portafolio', 'sercotec'),
 ];
+
+const optimizedBackground = await getImage({
+  src: Background1,
+  format: 'webp',
+});
 ---
 
 <Layout title="aleidk">
   <section
     id="hero"
     class="bg-image flex-center"
-    style="--bg-image: url(https://placehold.co/600x400)"
+    style={`--bg-image: url(${optimizedBackground.src})`}
   >
     <div class="vstack gap-0 align-items-center">
       <Image
@@ -37,7 +43,7 @@ const portafolio = [
         loading="eager"
         width={200}
       />
-      <div>
+      <div class="text">
         <h1 class="text-center my-0">Alexander Navarro</h1>
         <div class="text-center" class="">
           <LocalizedMarkdown path="brief.md" />
@@ -161,10 +167,10 @@ const portafolio = [
 
   <section
     class="bg-image"
-    style="--bg-image: url(https://placehold.co/600x400)"
+    style={`--bg-image: url(${optimizedBackground.src})`}
   >
     <h2 class="text-center">{t('titles.whoAmI')}</h2>
-    <p class="w-95 w-lg-70 mx-auto text-justify">
+    <p class="w-95 w-lg-70 mx-auto text-justify text">
       <LocalizedMarkdown path="about-me.md" />
     </p>