Create 2 col video layout

Author: DilsonsPickles

src/assets/img/waves-denoiz-plugin.webp

@@ -0,0 +1,15 @@
+---
+import ReleaseVideoPlaceholder from "../../assets/img/audacity-placeholder.webp";
+import PromoProductVideoPlaceholder from "../../assets/img/waves-denoiz-plugin.webp";
+import FeaturedVideo from "../video/FeaturedVideo";
+---
+
+    <section class="bg-gray-900">
+      <div class="grid md:grid-cols-2 max-w-screen-2xl px-6 sm:px-12 mx-auto py-8 gap-8 ">
+        <FeaturedVideo title="Our latest release" label="Master channel, new realtime effects & more!" placeholderImage={ReleaseVideoPlaceholder} videoURL="https://www.youtube-nocookie.com/embed/f5TXPUOFH6A?autoplay=1"/>
+        <FeaturedVideo title="Waves Denoiz Plugin" label="A new generation of noise removal that outpeforms traditional plugins." placeholderImage={PromoProductVideoPlaceholder} videoURL="https://www.youtube-nocookie.com/embed/f5TXPUOFH6A?autoplay=1" CTA ctaText="Get 50% off"/>
+      </div>
+    </section>
+  
+
+

src/components/homepage/ReleaseVideo.astro

@@ -0,0 +1,55 @@
+import React, { useState } from "react";
+
+function FeaturedVideo(props) {
+  const [isClicked, setIsClicked] = useState(false);
+
+  const { placeholderImage, videoURL, label, title, CTA, ctaText = "" } = props;
+
+  function handleVideoClick() {
+    setIsClicked(true);
+    if (typeof _paq !== "undefined") {
+      _paq.push([
+        "trackEvent",
+        "Video embed",
+        "Watch release video",
+        "Audacity release video",
+      ]);
+    }
+  }
+
+  return (
+    <div className="flex flex-col gap-2 lg:gap-4 ">
+      <div className="flex flex-col xs:flex-row xs:justify-between md:h-10">
+        <h3 className="text-white content-center">{title}</h3>
+        {CTA && (
+          <a className="py-3 px-2 rounded-md justify-center bg-yellow-300 hover:bg-yellow-400 active:bg-yellow-500 w-fit">
+            <p className="leading-none font-semibold">{ctaText}</p>
+          </a>
+        )}
+      </div>
+
+      {isClicked ? (
+        <iframe
+          className="w-full aspect-video rounded-md shadow-xl"
+          loading="lazy"
+          src={videoURL}
+          title="Audacity 3.2 - Real-Time Effects and Free Cloud Sharing"
+          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+          allowFullScreen
+        ></iframe>
+      ) : (
+        <img
+          tabIndex="0"
+          src={placeholderImage.src}
+          alt="YouTube thumbnail"
+          className="w-full aspect-video rounded-md shadow-xl cursor-pointer"
+          onClick={() => handleVideoClick()}
+          onKeyDown={(e) => e.key === "Enter" && handleVideoClick()}
+        />
+      )}
+      <p className="text-white">{label}</p>
+    </div>
+  );
+}
+
+export default FeaturedVideo;

src/components/homepage/ReleaseVideo.jsx

@@ -1,7 +1,7 @@
 ---
 import BlogPosts from "../components/homepage/BlogPosts.astro";
 import HeroBanner from "../components/homepage/HeroBanner.astro";
-import ReleaseVideo from "../components/homepage/ReleaseVideo";
+import ReleaseVideo from "../components/homepage/ReleaseVideo.astro";
 import BaseLayout from "../layouts/BaseLayout.astro";
 import ShareYourSounds from "../components/homepage/ShareYourSounds";
 import FeatureCards from "../components/homepage/FeatureCards.astro";
@@ -12,7 +12,7 @@ import RecordAnything from "../components/homepage/RecordAnything.astro";
 
 <BaseLayout title="Audacity ® | Free Audio editor, recorder, music making and more!">
   <HeroBanner />
-  <ReleaseVideo client:load/>
+  <ReleaseVideo />
   <RecordAnything />
   <ShareYourSounds client:load/>
   <FeatureCards />

src/components/video/FeaturedVideo.jsx

@@ -13,7 +13,7 @@
 
 
     h3 {
-        @apply text-lg md:text-2xl text-gray-700 font-semibold
+        @apply text-lg md:text-lg lg:text-2xl text-gray-700 font-semibold
     }
 
     h4 {

src/pages/index.astro

@@ -4,7 +4,8 @@ module.exports = {
   theme: {
     extend: {},
     screens: {
-      xs: "320px",
+      xxs: "320px",
+      xs: "480px",
       sm: "640px",
       md: "768px",
       lg: "1024px",