Merge pull request #52 from audacity/optimised-images

Tested on branch deploy

Author: DilsonsPickles

src/assets/img/Audacity_Logo.svg

@@ -1,4 +1,3 @@
-import React from "react";
 import { trackEvent } from "../../utils/matomo";
 
 function handleButtonClick(eventName) {
@@ -8,11 +7,11 @@ function handleButtonClick(eventName) {
 }
 
 function JoinAudioDotComButton(props) {
-  const { href, matomoEventName, large } = props;
+  const { href, large } = props;
   return (
     <a
       onClick={() => {
-        handleButtonClick(matomoEventName);
+        handleButtonClick();
       }}
       className={` ${
         large ? "py-4 px-6" : "py-2 px-4"

src/components/button/JoinAudioDotComButton.jsx

@@ -24,7 +24,7 @@ const options: Intl.DateTimeFormatOptions = {
   class="col-span-12 sm:col-span-6 md:col-span-4 flex flex-col gap-4 hover:opacity-90 transition-opacity duration-200"
 >
   <Image
-    width="800"
+    width="732"
     quality="80"
     class="rounded-md aspect-image"
     alt={coverAlt}

src/components/card/NEWBlogPostCard.astro

@@ -0,0 +1,64 @@
+---
+import { getImage } from "astro:assets";
+import audiocomBackground from "../../assets/img/audiocom-background.webp";
+import { Image } from "astro:assets";
+import FeaturedVideo from "../video/FeaturedVideo";
+import JoinAudioDotComButton from "../button/JoinAudioDotComButton";
+import AudioDotComLogo from "../../assets/img/audio-dot-com.svg";
+import VideoPlaceholder from '../../assets/img/audiocom-placeholder.webp'
+
+// Optimize the background image
+const optimizedBg = await getImage({
+  src: audiocomBackground,
+  format: "webp",
+  width: 960, // Default size, you can adjust based on your needs
+  quality: 50,
+});
+
+const releaseVideoPlaceholderImage = await getImage({
+  src: VideoPlaceholder,
+  format: "webp",
+  width: 732,
+  quality: 80,
+});
+
+const releaseVideo = {
+  title: "Introducing Audio.com",
+  placeholderImage: releaseVideoPlaceholderImage.src,
+  videoURL: "https://www.youtube-nocookie.com/embed/ZDnQgaCoppo?autoplay=1",
+  imageAltText: "Video thumbnail: 15 reasons why you should use Audio.com"
+};
+---
+
+<!-- Apply the background using inline style -->
+<section style={`background-image: url('${optimizedBg.src}'); background-size: cover;`}>
+  <div
+    class="grid md:grid-cols-2 max-w-screen-xl px-6 sm:px-12 py-12 gap-8 mx-auto"
+  >
+    <div class="flex lg:items-center col-span-2 md:col-span-1 md:col-start-1 row-start-2 md:row-start-1">
+      <FeaturedVideo
+        client:load
+        placeholderImage={releaseVideo.placeholderImage}
+        imageAltText={releaseVideo.imageAltText}
+        videoURL={releaseVideo.videoURL}
+        textColor="text-slate-50"
+        matomoEventName={releaseVideo.title}
+      />
+    </div>
+    <div class="col-span-2 md:col-span-1 md:col-start-2 md:row-start-1 flex flex-col gap-8 lg:py-12">
+      <Image src={AudioDotComLogo} class="w-20" alt="audio.com" />
+      <div>
+        <h2 class="text-white">Level up your Audacity</h2>
+        <p class="text-gray-300 mt-4">
+          Audio.com, the online companion to Audacity, lets you collaborate on
+          projects, create versioned backups, and easily share and publish your
+          work.
+        </p>
+      </div>
+
+      <JoinAudioDotComButton
+        href="https://audio.com/audacity/auth/sign-in?mtm_campaign=audacityteamorg&mtm_content=Block_button"
+      />
+    </div>
+  </div>
+</section>

src/components/homepage/Audiodotcom.astro

@@ -33,8 +33,9 @@ import AudacityMockUp from "../../assets/img/HeroBannerImage.webp";
       <Image
         src={AudacityMockUp}
         alt="A laptop showing the Audacity application"
-        width={960}
+        width={668}
         quality={80}
+        loading="eager"
       />
     </div>
   </div>