Add QF description text

Author: sjd210

src/app/components/elements/PageTitle.tsx

@@ -72,6 +72,7 @@ export interface TitleIconProps {
 export interface PageTitleProps {
     currentPageTitle: string;
     subTitle?: string;
+    description?: string;
     disallowLaTeX?: boolean;
     help?: ReactElement;
     className?: string;
@@ -80,7 +81,7 @@ export interface PageTitleProps {
     preview?: boolean;
     icon?: TitleIconProps;
 }
-export const PageTitle = ({currentPageTitle, subTitle, disallowLaTeX, help, className, audienceViews, modalId, preview, icon}: PageTitleProps) => {
+export const PageTitle = ({currentPageTitle, subTitle, description, disallowLaTeX, help, className, audienceViews, modalId, preview, icon}: PageTitleProps) => {
     const dispatch = useAppDispatch();
     const openModal = useAppSelector((state: AppState) => Boolean(state?.activeModals?.length));
     const headerRef = useRef<HTMLHeadingElement>(null);
@@ -118,12 +119,17 @@ export const PageTitle = ({currentPageTitle, subTitle, disallowLaTeX, help, clas
     }
 
     return <h1 id="main-heading" tabIndex={-1} ref={headerRef} className={classNames("h-title h-secondary d-sm-flex", {"align-items-center py-4": isPhy}, className)}>
-        {icon && (
-            icon.type === "img" ? <img src={icon.icon} alt="" className="me-3"/> 
-                : icon.type === "hex" ? <PhyHexIcon icon={icon.icon} subject={icon.subject}/> : undefined)}
-        <div className="me-auto" data-testid={"main-heading"}>
-            {formatPageTitle(currentPageTitle, disallowLaTeX)}
-            {subTitle && <span className="h-subtitle d-none d-sm-block">{subTitle}</span>}
+        <div className="me-auto">
+            <div className="d-sm-flex align-items-center">
+                {icon && (
+                    icon.type === "img" ? <img src={icon.icon} alt="" className="me-3"/> 
+                        : icon.type === "hex" ? <PhyHexIcon icon={icon.icon} subject={icon.subject}/> : undefined)}
+                <div className="me-auto" data-testid={"main-heading"}>
+                    {formatPageTitle(currentPageTitle, disallowLaTeX)}
+                    {subTitle && <span className="h-subtitle d-none d-sm-block">{subTitle}</span>}
+                </div>
+            </div>
+            {description && <div className="h-description">{description}</div>}
         </div>
         <Helmet>
             <meta property="og:title" content={currentPageTitle} />

src/app/components/elements/TitleAndBreadcrumb.tsx

@@ -54,7 +54,7 @@ type TitleAndBreadcrumbProps = BreadcrumbTrailProps & PageTitleProps & {
     breadcrumbTitleOverride?: string;
     children?: ReactElement | boolean;
 };
-export const TitleAndBreadcrumb = ({modalId, children, breadcrumbTitleOverride, currentPageTitle, subTitle, disallowLaTeX, className, audienceViews, help, collectionType, intermediateCrumbs, preview, icon}: TitleAndBreadcrumbProps) => {
+export const TitleAndBreadcrumb = ({modalId, children, breadcrumbTitleOverride, currentPageTitle, subTitle, description, disallowLaTeX, className, audienceViews, help, collectionType, intermediateCrumbs, preview, icon}: TitleAndBreadcrumbProps) => {
     return <div className={classNames(className, {"title-breadcrumb-container": isPhy, "pt-4 pt-md-5": isAda})}>
         {isPhy && <div className="title-graphics"/>}
         {isAda && <BreadcrumbTrail
@@ -64,7 +64,7 @@ export const TitleAndBreadcrumb = ({modalId, children, breadcrumbTitleOverride,
         />}
         {children}
         <PageTitle
-            modalId={modalId} subTitle={subTitle}
+            modalId={modalId} subTitle={subTitle} description={description}
             disallowLaTeX={disallowLaTeX} audienceViews={audienceViews}
             currentPageTitle={currentPageTitle} help={help}
             preview={preview} icon={icon}

src/app/components/pages/QuestionFinder.tsx

@@ -394,7 +394,8 @@ export const QuestionFinder = withRouter(({location}: RouteComponentProps) => {
 
     return <Container id="finder-page" className={classNames("mb-5")} { ...(pageContext?.subject && { "data-bs-theme" : pageContext.subject })}>
         <TitleAndBreadcrumb 
-            currentPageTitle={siteSpecific("Question Finder", "Questions")} 
+            currentPageTitle={siteSpecific("Question Finder", "Questions")}
+            description={siteSpecific("Use our question finder to find questions to try on topics in Physics, Maths, Chemistry and Biology. Use our practice questions to become fluent in topics and then take your understanding and problem solving skills to the next level with our challenge questions.", "")}
             help={pageHelp}
             icon={{type: "hex", icon: "page-icon-finder"}}
         />

src/scss/common/header.scss

@@ -84,6 +84,13 @@ header {
   line-height: 1.2;
 }
 
+.h-description {
+  margin-left: 92px;
+  padding-top: 5px;
+  font-size: 1rem;
+  width: 75%
+}
+
 a.skip-main {
   left:-999px;
   position:absolute;