Implement use cases page

app/components/sections/QuoteBlock/QuoteBlock.view.tsx

@@ -26,15 +26,12 @@ function QuoteBlockView({
   const avatarAlt = t("avatarAlt").replace("{author}", author);
 
   if (config.statementLayout) {
-    if (!quoteSecondary?.trim()) {
-      return null;
-    }
-
     const statementTextClass =
       "font-bricolage-grotesque text-[28px] font-bold leading-9 tracking-[var(--text-xx-large-heading--letter-spacing)] text-[var(--color-surface-default-tertiary)] md:text-[length:var(--text-xx-large-heading)] md:leading-[length:var(--text-xx-large-heading--line-height)]";
 
     return (
       <section
+        data-figma-node="21967-24638"
         className={`${config.container} ${className}`.trim()}
         aria-labelledby={quoteId}
         role="region"
@@ -43,12 +40,18 @@ function QuoteBlockView({
           className="relative box-border flex w-full max-w-[1440px] shrink-0 flex-col items-center justify-center gap-[var(--space-800)] overflow-hidden rounded-[var(--spacing-scale-020)] bg-[var(--color-surface-invert-brand-primary,#fefcc9)] px-[var(--spacing-scale-032)] py-[var(--spacing-scale-048)] md:px-[var(--space-1800)] md:py-[var(--space-2400)]"
         >
           <QuoteStatementDecor />
-          <div className="relative z-10 flex w-full min-w-0 shrink-0 flex-col items-center gap-9 text-center md:gap-[length:var(--text-xx-large-heading--line-height)]">
-            <p id={quoteId} className={`${statementTextClass} mb-0 w-full min-w-0`}>
-              {quote}
-            </p>
-            <p className={`${statementTextClass} mb-0 w-full min-w-0`}>
-              {quoteSecondary}
+          <div className="relative z-10 flex w-full min-w-0 shrink-0 flex-col items-center text-center">
+            <p
+              id={quoteId}
+              className={`${statementTextClass} mb-0 flex w-full min-w-0 flex-col gap-9 text-center md:gap-[length:var(--text-xx-large-heading--line-height)] lg:block lg:gap-0`}
+            >
+              <span className="block lg:inline">{quote}</span>
+              {quoteSecondary ? (
+                <>
+                  <span className="hidden lg:inline">{" "}</span>
+                  <span className="block lg:inline">{quoteSecondary}</span>
+                </>
+              ) : null}
             </p>
           </div>
         </div>