Keep tweaking

Author: yvonnetangsu

components/Storyblok/PageHeader/HeaderFullWidthImage.tsx

@@ -35,7 +35,7 @@ export const HeaderFullWidthImage = ({ blok }: HeaderFullWidthImageProps) => {
   );
 
   return (
-    <div className="w-full relative break-words">
+    <div className="w-full relative">
       <div className="relative overflow-hidden w-full h-160 sm:h-240 md:h-[33rem] lg:h-400 xl:h-500 2xl:h-600">
         {fullWidthImage}
         {logoFilename && (
@@ -51,8 +51,10 @@ export const HeaderFullWidthImage = ({ blok }: HeaderFullWidthImageProps) => {
           <Heading
             as="h1"
             id="page-title"
+            size="f5"
             align="center"
-            className="text-black w-full mb-08em fluid-type-5 md:text-left text-balance"
+            mb="08em"
+            className="w-full md:text-left text-balance"
           >
             {title}
           </Heading>

components/Storyblok/PageHeader/HeaderMinimal.tsx

@@ -19,7 +19,10 @@ export const HeaderMinimal = ({ blok }: HeaderMinimalProps) => {
       <Heading
         as="h1"
         id="page-title"
-        className={cnb('mb-0 mx-auto fluid-type-5 max-w-1200 text-balance', bgColor === 'fog-light' ? 'text-black' : 'text-white')}
+        size="f5"
+        mb="none"
+        color={bgColor === 'fog-light' ? 'black' : 'white'}
+        className="mx-auto max-w-1200 text-balance"
         align="center"
       >
         {title}

components/Storyblok/PageHeader/HeaderNoImage.tsx

@@ -15,7 +15,7 @@ export const HeaderNoImage = ({ blok }: HeaderNoImageProps) => {
   } = blok;
 
   return (
-    <div className="break-words">
+    <div>
       <Container pt={7} pb={9} className={darkBgColors[bgColor || 'palo-alto-dark']}>
         <Heading
           as="h1"

components/Storyblok/PageHeader/HeaderSmallImage.tsx

@@ -18,42 +18,40 @@ export const HeaderSmallImage = ({ blok }: HeaderSmallImageProps) => {
   } = blok;
 
   return (
-    <div className="relative block pt-38 md:pt-0 bg-white break-words">
-      <Container className="flex flex-col md:flex-row md:items-start md:pt-58 lg:pt-72 2xl:pt-95 grid-gap mx-auto">
-        <div className="w-full md:w-7/12 xl:w-6/12">
-          <Heading
-            as="h1"
-            id="page-title"
-            size="f5"
-            align="center"
-            mb="04em"
-            className=" text-black mt-0 md:text-left"
-          >
-            {title}
-          </Heading>
-          {hasRichText(intro) && (
-            <RichText wysiwyg={intro} className="subheading" />
-          )}
-        </div>
-        {filename && (
-          <>
-            <div
-              className={cnb(
-                'block md:absolute md:top-0 md:right-0 w-full aspect-[3/2] md:aspect-none md:w-[calc(41vw-6rem)] md:h-[calc(27.33vw-4rem)] lg:w-[calc(48vw-10rem)] lg:h-[calc(32vw-6.67rem)] 3xl:h-[48rem]',
-                darkBgColors[bgColor || 'palo-alto-dark'],
-              )}
-              aria-hidden="true"
-            />
-            <AspectRatioImage
-              filename={filename}
-              focus={focus}
-              alt={alt}
-              imageSize="header"
-              className="print:hidden relative md:w-5/12 xl:w-6/12 mr-0 -ml-20 w-[calc(100%+2rem)] sm:-ml-30 sm:w-[calc(100%+3rem)] md:ml-0 -mt-[60vw] md:mt-0 z-10 pb-0"
-            />
-          </>
+    <Container pt={5} pb={5} className="relative bg-white break-words flex flex-col md:flex-row md:items-start grid-gap mx-auto">
+      <div className="w-full md:w-7/12 xl:w-6/12">
+        <Heading
+          as="h1"
+          id="page-title"
+          size="f5"
+          align="center"
+          mb="04em"
+          className=" text-black mt-0 md:text-left"
+        >
+          {title}
+        </Heading>
+        {hasRichText(intro) && (
+          <RichText wysiwyg={intro} className="text-20 md:text-23 lg:text-25 mb-07em md:mb-0" />
         )}
-      </Container>
-    </div>
+      </div>
+      {filename && (
+        <>
+          <div
+            className={cnb(
+              'block translate-x-[2rem] sm:translate-x-[3rem] md:translate-x-0 md:absolute md:top-0 md:right-0 w-full aspect-[3/2] 3xl:aspect-none md:w-[calc(41vw-6rem)] lg:w-[calc(48vw-10rem)] 3xl:h-[48rem]',
+              darkBgColors[bgColor || 'palo-alto-dark'],
+            )}
+            aria-hidden="true"
+          />
+          <AspectRatioImage
+            filename={filename}
+            focus={focus}
+            alt={alt}
+            imageSize="header"
+            className="print:hidden relative md:w-5/12 xl:w-6/12 mr-0 -ml-20 w-[calc(100%+2rem)] sm:-ml-30 sm:w-[calc(100%+3rem)] md:ml-0 -mt-[57vw] md:mt-0 z-10 pb-0"
+          />
+        </>
+      )}
+    </Container>
   );
 };

components/Storyblok/SbInteriorPage.tsx

@@ -35,7 +35,7 @@ export const SbInteriorPage = (props: SbInteriorPageProps) => {
       <CreateBloks blokSection={props.blok.localHeader} slug={props.slug} />
       <main id="main-content" className={`ood-interior-page ood-interior-page--${props.blok.headerStyle}`}>
         <article className="bg-fog-light">
-          <header>
+          <header className="break-words">
             {props.blok.headerStyle === 'has-image' && (
               <HeaderSmallImage {...props} />
             )}

components/Storyblok/partials/BodyLeftSidebar.tsx

@@ -1,5 +1,4 @@
 'use client';
-import React from 'react';
 import { type SbBlokData, storyblokEditable } from '@storyblok/react/rsc';
 import { useWindowSize } from 'usehooks-ts';
 import { CreateBloks } from '@/components/CreateBloks';

components/Storyblok/partials/BodyNoSidebar.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { type SbBlokData, storyblokEditable } from '@storyblok/react/rsc';
 import { CreateBloks } from '@/components/CreateBloks';
 import { FlexCell } from '@/components/Storyblok/partials/FlexCell';