Core-1277: Add 3 CTA buttons to Assignable landing page

src/app/components/jsx-helpers/raw-html.tsx

@@ -42,7 +42,7 @@ type RawHTMLArgs = {
 
 export default function RawHTML({
     Tag = 'div',
-    html,
+    html = '',
     embed = false,
     ...otherProps
 }: RawHTMLArgs) {

src/app/pages/assignable/assignable.tsx

@@ -6,17 +6,11 @@ import {
     About,
     Courses,
     FAQ,
-    OverlappingQuote,
     CTA
 } from './lazy-imports';
+import type {BannerData} from './sections/banner/banner';
 import './assignable.scss';
 
-type ImageMeta = {
-    meta: {
-        downloadUrl: string;
-    };
-};
-
 type CarouselImage = {
     image: {
         file: string;
@@ -37,11 +31,7 @@ type FAQItem = {
     answer: string;
 };
 
-type AssignablePageData = {
-    headingTitleImageUrl: string;
-    subheading: string;
-    headingDescription: string;
-    headingImage: ImageMeta;
+type AssignablePageData = BannerData & {
     section2Heading: string;
     section2Description: string;
     imageCarousel: [CarouselImage[]];
@@ -51,10 +41,6 @@ type AssignablePageData = {
     comingSoonBooks: BookData[];
     faqHeader: string;
     faqs: FAQItem[];
-    addAssignableCtaHeader: string;
-    addAssignableCtaDescription: string;
-    addAssignableCtaLink: string;
-    addAssignableCtaButtonText: string;
     assignableCtaText: string;
     assignableCtaLink: string;
     assignableCtaButtonText: string;
@@ -76,9 +62,6 @@ function AssignablePage({data}: {data: AssignablePageData}) {
             <LazyLoad>
                 <FAQ data={data} />
             </LazyLoad>
-            <LazyLoad>
-                <OverlappingQuote data={data} />
-            </LazyLoad>
             <LazyLoad>
                 <CTA data={data} />
             </LazyLoad>

src/app/pages/assignable/sections/banner/banner.scss

@@ -15,8 +15,18 @@
         padding-bottom: 6rem;
     }
 
+    .content-block {
+        justify-items: center;
+        text-align: center;
+
+        h1 {
+            @include scale-set-font(h1, hero-h1);
+        }
+    }
+
     .title-image {
         max-width: 100%;
+        max-height: 12rem;
     }
 
     .background-image {
@@ -33,10 +43,48 @@
     }
 
     .text-content {
+        @include body-font(2.2rem);
         padding: 0;
+
+        @include width-up-to($tablet-max) {
+            @include set-font(body-large);
+        }
     }
 
     .btn {
         justify-self: left;
     }
+
+    .button-row {
+        display: flex;
+        flex-direction: row;
+        gap: $normal-margin;
+
+        @include width-up-to($phone-max) {
+            flex-direction: column;
+        }
+
+        .button-shaped {
+            background-color: ui-color(white);
+            border: thin solid os-color(orange);
+            border-radius: 1.2rem;
+            color: text-color(normal);
+            display: flex;
+            flex-direction: column;
+            gap: 1rem;
+            justify-items: center;
+            justify-content: space-between;
+            padding: 1rem 2rem;
+
+            p {
+                @include body-font(2rem);
+                margin: 0;
+            }
+
+            a {
+                @include set-font(body-regular);
+                line-height: normal;
+            }
+        }
+    }
 }

src/app/pages/assignable/sections/banner/banner.tsx

@@ -5,30 +5,33 @@ import useOptimizedImage, {
 } from '~/helpers/use-optimized-image';
 import './banner.scss';
 
-type BannerProps = {
-    data: {
-        headingTitleImageUrl: string;
-        subheading: string;
-        headingDescription: string;
-        headingImage: {
-            meta: {
-                downloadUrl: string;
-            };
+export type BannerData = {
+    headingTitleImageUrl: string;
+    subheading: string;
+    headingDescription: string;
+    headingImage: {
+        meta: {
+            downloadUrl: string;
         };
     };
+    addAssignableCtaHeader: string;
+    addAssignableCtaDescription: string;
+    addAssignableCtaLink: string;
+    addAssignableCtaButtonText: string;
+    instructorInterestCtaHeader: string;
+    instructorInterestCtaDescription: string;
+    instructorInterestCtaLink: string;
+    instructorInterestCtaButtonText: string;
+    instructorHelpCtaHeader: string;
+    instructorHelpCtaDescription: string;
+    instructorHelpCtaLink: string;
+    instructorHelpCtaButtonText: string;
+    ctaSectionFooter: string;
 };
 
-export default function Banner({
-    data: {
-        headingTitleImageUrl,
-        subheading,
-        headingDescription: description,
-        headingImage: {
-            meta: {downloadUrl: image}
-        }
-    }
-}: BannerProps) {
+export default function Banner({data}: {data: BannerData}) {
     const maxDim = maxDimIfNarrowerThan(1920);
+    const image = data.headingImage.meta.downloadUrl;
     const optimizedImage = useOptimizedImage(image, maxDim);
 
     return (
@@ -40,16 +43,43 @@ export default function Banner({
             <div className="content-block">
                 <div>
                     <img
-                        src={headingTitleImageUrl}
+                        src={data.headingTitleImageUrl}
                         className="title-image"
                         alt="Assignable by OpenStax"
                     />
-                    <div>
-                        <i>{subheading}</i>
-                    </div>
+                    <h1>{data.subheading}</h1>
                 </div>
-                <RawHTML className="text-content" html={description} />
+                <RawHTML className="text-content" html={data.headingDescription} />
+                <div className="button-row">
+                    <CTAButton
+                        header={data.addAssignableCtaHeader}
+                        href={data.addAssignableCtaLink}
+                        linkText={data.addAssignableCtaButtonText}
+                    />
+                    <CTAButton
+                        header={data.instructorInterestCtaHeader}
+                        href={data.instructorInterestCtaLink}
+                        linkText={data.instructorInterestCtaButtonText}
+                    />
+                    <CTAButton
+                        header={data.instructorHelpCtaHeader}
+                        href={data.instructorHelpCtaLink}
+                        linkText={data.instructorHelpCtaButtonText}
+                    />
+                </div>
+                <RawHTML className="text-content" html={data.ctaSectionFooter} />
             </div>
         </section>
     );
 }
+
+function CTAButton({header, href, linkText}: {
+    header: string;
+    href: string;
+    linkText: string;
+}) {
+    return <div className="button-shaped">
+        <p>{header}</p>
+        <a href={href}>{linkText}</a>
+    </div>;
+}