Add Black Friday page

Fixes #155

src/components/CourseCard.astro

@@ -16,10 +16,10 @@ const { course, holiday = false, prices } = Astro.props;
 ---
 
 <div
-  class={`card-shadow card-shadow-color mt-8 w-full overflow-hidden rounded-2xl ${holiday ? "bg-holiday-secondary" : "bg-secondary"} md:flex md:h-52`}
+  class={`card-shadow card-shadow-color mt-8 w-full overflow-hidden rounded-2xl md:flex md:h-52`}
 >
   <div
-    class="mb-4 shrink-0 overflow-hidden md:mb-0 md:mr-4 md:min-h-full md:rounded-l-2xl"
+    class="mb-0 shrink-0 overflow-hidden md:mb-0 md:min-h-full md:rounded-l-2xl"
   >
     <a href={`/courses/${course.slug}`}>
       <div class="h-72 w-full overflow-hidden md:h-full md:w-64 lg:w-96">
@@ -32,7 +32,9 @@ const { course, holiday = false, prices } = Astro.props;
       </div>
     </a>
   </div>
-  <div class="my-8 px-8 md:my-auto md:px-8">
+  <div
+    class={`my-0 px-8 py-8 md:py-0 md:my-auto md:px-8 flex flex-col align-middle justify-center w-full h-full ${holiday ? "bg-holiday-secondary" : "bg-secondary"}`}
+  >
     <span class="flex gap-x-2">
       <h3
         class={`text-center text-xl font-bold ${holiday ? "text-holiday-card-content-2" : "text-content-2"} hover:text-accent-2 md:text-left`}

src/components/NewsletterForm.astro

@@ -6,7 +6,7 @@
       <h2
         class="mx-auto max-w-3xl text-center text-4xl font-semibold tracking-tight text-holiday-content-1 sm:text-5xl"
       >
-        Get notified about awesome discounts!
+        Get notified for awesome discounts!
       </h2>
       <div
         class="mx-auto mt-6 max-w-lg text-center text-lg text-holiday-content-1"

src/components/NotificationBanner.astro

@@ -21,8 +21,8 @@
     >
     </div>
   </div>
-  <p class="text-sm/6 text-gray-900">
-    <a href="/black-friday">
+  <p class="relative w-full text-sm/6 text-gray-900">
+    <a href="/black-friday" class="text-center">
       <strong class="font-semibold">Black Friday Deal</strong><svg
         viewBox="0 0 2 2"
         class="mx-2 inline size-0.5 fill-current"

src/layouts/HolidayLayout/_components/HolidayDiscountBundle.astro

@@ -20,7 +20,7 @@ const { bundleImage, offer, prices, title } = Astro.props;
         <Picture
           src={bundleImage}
           alt={`${title} bundle`}
-          class="w-full flex-none rounded-2xl lg:max-w-lg"
+          class="w-full flex-none lg:max-w-lg"
           formats={["avif", "webp"]}
         />
         <div class="w-full flex-auto">
@@ -47,7 +47,7 @@ const { bundleImage, offer, prices, title } = Astro.props;
               href={`https://courses.rockthejvm.com/purchase?product_id=${5951531}`}
               class="rounded-md bg-holiday-cta px-3.5 py-2.5 text-sm font-semibold text-holiday-ctatext shadow-sm hover:bg-accent-1 hover:text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white"
             >
-              <span class="blink">Get it now</span>
+              Get it now
             </a>
             <a
               href="/courses/black-friday-2024"

src/pages/courses/_sections/Pricing.astro

@@ -190,22 +190,22 @@ const membershipIncludedCardClassNames =
         featuredBundles.map((bundle) => (
           <div class="mx-auto my-8 flex max-w-5xl flex-col items-start gap-x-8 gap-y-6 rounded-3xl bg-secondary p-8 ring-2 ring-content-1/10 sm:gap-y-10 sm:p-10 lg:col-span-2 lg:flex-row lg:items-center">
             <img
-              class="rounded-lg"
+              class="mx-auto rounded-lg"
               width="250"
               src={bundle.data.heroImage.src}
               alt={bundle.data.title}
             />
             <div class="lg:min-w-0 lg:flex-1">
-              <h3 class="text-lg font-semibold leading-8 tracking-tight text-accent-1">
+              <h3 class="mx-auto text-center text-lg font-semibold leading-8 tracking-tight text-accent-1 lg:text-left">
                 {bundle.data.title}
               </h3>
-              <div class="mt-1 text-base leading-7 text-content-1">
+              <div class="mt-1 text-center text-base leading-7 text-content-1 lg:text-left">
                 <Fragment set:html={bundle.data.excerpt} />
               </div>
             </div>
             <a
               href={`/courses/${bundle.slug}`}
-              class="rounded-md px-3.5 py-2 text-sm font-semibold leading-6 text-accent-1 ring-1 ring-inset ring-indigo-200 hover:ring-indigo-300 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
+              class="mx-auto rounded-md px-5 py-3 text-sm font-semibold leading-6 text-accent-1 ring-1 ring-inset ring-indigo-200 hover:ring-indigo-300 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 sm:px-3.5 sm:py-2"
             >
               <span aria-hidden="true" class="text-content-1">
                 Buy Now &rarr;