From f2f6d4362fd04b20a61054136209932d1d29879a Mon Sep 17 00:00:00 2001 From: Roy Johnson Date: Wed, 8 Oct 2025 19:00:52 -0500 Subject: [PATCH 1/3] Core-1277: Add 3 CTA buttons to Assignable landing page [CORE-1277] --- src/app/pages/assignable/assignable.tsx | 12 ++- .../assignable/sections/banner/banner.scss | 44 +++++++++++ .../assignable/sections/banner/banner.tsx | 76 +++++++++++++------ 3 files changed, 104 insertions(+), 28 deletions(-) diff --git a/src/app/pages/assignable/assignable.tsx b/src/app/pages/assignable/assignable.tsx index dad7438b3..a72296545 100644 --- a/src/app/pages/assignable/assignable.tsx +++ b/src/app/pages/assignable/assignable.tsx @@ -6,7 +6,6 @@ import { About, Courses, FAQ, - OverlappingQuote, CTA } from './lazy-imports'; import './assignable.scss'; @@ -55,6 +54,14 @@ type AssignablePageData = { addAssignableCtaDescription: string; addAssignableCtaLink: string; addAssignableCtaButtonText: string; + instructorInterestCtaHeader: string; + instructorInterestCtaDescription: string; + instructorInterestCtaLink: string; + instructorInterestCtaButtonText: string; + instructorHelpCtaHeader: string; + instructorHelpCtaDescription: string; + instructorHelpCtaLink: string; + instructorHelpCtaButtonText: string; assignableCtaText: string; assignableCtaLink: string; assignableCtaButtonText: string; @@ -76,9 +83,6 @@ function AssignablePage({data}: {data: AssignablePageData}) { - - - diff --git a/src/app/pages/assignable/sections/banner/banner.scss b/src/app/pages/assignable/sections/banner/banner.scss index 8812fac50..f0ea29412 100644 --- a/src/app/pages/assignable/sections/banner/banner.scss +++ b/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,44 @@ } .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); + justify-items: center; + padding: 1rem 2rem; + + p { + @include body-font(2rem); + margin: 0; + } + + a { + @include set-font(body-regular); + line-height: 1; + } + } + } } diff --git a/src/app/pages/assignable/sections/banner/banner.tsx b/src/app/pages/assignable/sections/banner/banner.tsx index 3d1407219..9d46e8d3e 100644 --- a/src/app/pages/assignable/sections/banner/banner.tsx +++ b/src/app/pages/assignable/sections/banner/banner.tsx @@ -5,30 +5,32 @@ import useOptimizedImage, { } from '~/helpers/use-optimized-image'; import './banner.scss'; -type BannerProps = { - data: { - headingTitleImageUrl: string; - subheading: string; - headingDescription: string; - headingImage: { - meta: { - downloadUrl: string; - }; +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; }; -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 +42,42 @@ export default function Banner({
Assignable by OpenStax -
- {subheading} -
+

{data.subheading}

+
+ +
+ + +
-
); } + +function CTAButton({header, href, linkText}: { + header: string; + href: string; + linkText: string; +}) { + return
+

{header}

+ {linkText} +
; +} From eb522d73e313a50363dbffdb1b264eba41c33eef Mon Sep 17 00:00:00 2001 From: Roy Johnson Date: Thu, 9 Oct 2025 09:23:23 -0500 Subject: [PATCH 2/3] Adjust layout within button-shaped --- src/app/pages/assignable/sections/banner/banner.scss | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/app/pages/assignable/sections/banner/banner.scss b/src/app/pages/assignable/sections/banner/banner.scss index f0ea29412..10cd67623 100644 --- a/src/app/pages/assignable/sections/banner/banner.scss +++ b/src/app/pages/assignable/sections/banner/banner.scss @@ -69,7 +69,11 @@ 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 { @@ -79,7 +83,7 @@ a { @include set-font(body-regular); - line-height: 1; + line-height: normal; } } } From e22610cef0a06c9a2e627a5184463a485f1362b0 Mon Sep 17 00:00:00 2001 From: Roy Johnson Date: Mon, 20 Oct 2025 18:09:33 -0500 Subject: [PATCH 3/3] Add ctaSectionFooter to banner --- src/app/components/jsx-helpers/raw-html.tsx | 2 +- src/app/pages/assignable/assignable.tsx | 25 ++----------------- .../assignable/sections/banner/banner.tsx | 4 ++- 3 files changed, 6 insertions(+), 25 deletions(-) diff --git a/src/app/components/jsx-helpers/raw-html.tsx b/src/app/components/jsx-helpers/raw-html.tsx index 585c67d14..26a767c9b 100644 --- a/src/app/components/jsx-helpers/raw-html.tsx +++ b/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) { diff --git a/src/app/pages/assignable/assignable.tsx b/src/app/pages/assignable/assignable.tsx index a72296545..5d61f7ea9 100644 --- a/src/app/pages/assignable/assignable.tsx +++ b/src/app/pages/assignable/assignable.tsx @@ -8,14 +8,9 @@ import { FAQ, CTA } from './lazy-imports'; +import type {BannerData} from './sections/banner/banner'; import './assignable.scss'; -type ImageMeta = { - meta: { - downloadUrl: string; - }; -}; - type CarouselImage = { image: { file: string; @@ -36,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[]]; @@ -50,18 +41,6 @@ type AssignablePageData = { comingSoonBooks: BookData[]; faqHeader: string; faqs: FAQItem[]; - addAssignableCtaHeader: string; - addAssignableCtaDescription: string; - addAssignableCtaLink: string; - addAssignableCtaButtonText: string; - instructorInterestCtaHeader: string; - instructorInterestCtaDescription: string; - instructorInterestCtaLink: string; - instructorInterestCtaButtonText: string; - instructorHelpCtaHeader: string; - instructorHelpCtaDescription: string; - instructorHelpCtaLink: string; - instructorHelpCtaButtonText: string; assignableCtaText: string; assignableCtaLink: string; assignableCtaButtonText: string; diff --git a/src/app/pages/assignable/sections/banner/banner.tsx b/src/app/pages/assignable/sections/banner/banner.tsx index 9d46e8d3e..aa3d1ce31 100644 --- a/src/app/pages/assignable/sections/banner/banner.tsx +++ b/src/app/pages/assignable/sections/banner/banner.tsx @@ -5,7 +5,7 @@ import useOptimizedImage, { } from '~/helpers/use-optimized-image'; import './banner.scss'; -type BannerData = { +export type BannerData = { headingTitleImageUrl: string; subheading: string; headingDescription: string; @@ -26,6 +26,7 @@ type BannerData = { instructorHelpCtaDescription: string; instructorHelpCtaLink: string; instructorHelpCtaButtonText: string; + ctaSectionFooter: string; }; export default function Banner({data}: {data: BannerData}) { @@ -66,6 +67,7 @@ export default function Banner({data}: {data: BannerData}) { linkText={data.instructorHelpCtaButtonText} /> + );