Create 2 col video layout

src/components/homepage/ReleaseVideo.astro

@@ -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.jsx

@@ -1,59 +0,0 @@
-import React, { useState } from "react";
-import VideoPlaceholder from "../../assets/img/audacity-placeholder.webp";
-
-function ReleaseVideo() {
-  const [isClicked, setIsClicked] = useState(false);
-
-  function handleVideoClick() {
-    setIsClicked(true);
-    if (typeof _paq !== "undefined") {
-      _paq.push([
-        "trackEvent",
-        "Video embed",
-        "Watch release video",
-        "Audacity release video",
-      ]);
-    }
-  }
-
-  return (
-    <section className="bg-gray-900">
-      <div className="grid grid-cols-12 max-w-screen-xl mx-6 sm:mx-16 xl:mx-auto py-8 sm:py-12 md:py-12 gap-6 md:gap-12">
-        <div className="flex justify-center flex-col col-span-12 md:col-span-6 lg:col-span-5 gap-4">
-          <h2 className="text-white">
-            Produce music. Produce podcasts. Take total control of your sound.
-          </h2>
-          <a
-            href="https://support.audacityteam.org/additional-resources/changelog"
-            target="_blank"
-          >
-            <p className="dark-hyperlink">More about our new release</p>
-          </a>
-        </div>
-        <div className="flex row-start-1 col-span-12 md:col-span-6 md:col-start-7 lg:col-span-7 lg:col-start-6">
-          {isClicked ? (
-            <iframe
-              className="w-full aspect-video rounded-md shadow-xl"
-              loading="lazy"
-              src="https://www.youtube-nocookie.com/embed/f5TXPUOFH6A?autoplay=1"
-              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={VideoPlaceholder.src}
-              alt="YouTube thumbnail"
-              className="w-full aspect-video rounded-md shadow-xl cursor-pointer"
-              onClick={() => handleVideoClick()}
-              onKeyDown={e => e.key === 'Enter' && handleVideoClick()}
-            />
-          )}
-        </div>
-      </div>
-    </section>
-  );
-}
-
-export default ReleaseVideo;

src/components/video/FeaturedVideo.jsx

@@ -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/pages/index.astro

@@ -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/styles/input.css

@@ -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 {

tailwind.config.cjs

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