fix style bugs with flatcard

Author: kylemh

components/Cards/FlatCard/FlatCard.js

@@ -1,5 +1,6 @@
 import { element, node, shape, string } from 'prop-types';
 import classNames from 'classnames';
+import { twMerge } from 'tailwind-merge';
 import Image from 'next/image';
 import { FLAT_CARD_IMAGE } from 'common/constants/testIDs';
 import { getPlaceholder } from 'common/utils/next-utils';
@@ -31,28 +32,33 @@ function FlatCard({ button: Button, children, className, header, image }) {
         'pt-14': hasImage,
       })}
     >
-      <div className="p-8 border-4 border-solid border-themePrimary">
-        {header && <div className="order-2 text-center">{header}</div>}
+      <div
+        className={twMerge(
+          'p-8 flex flex-col gap-5 border-4 border-solid border-themePrimary',
+          hasImage && `pt-32`,
+        )}
+      >
+        {header && <div className="text-center">{header}</div>}
 
         {hasImage && (
-          <div className="flex justify-center">
+          <div className="flex justify-center -my-5">
             <div
               data-testid={FLAT_CARD_IMAGE}
-              className="border-solid border-themePrimary border-[3px] order-1 absolute -top-4 h-52 [&>img]:object-cover"
+              className="absolute -top-4 border-solid border-themePrimary border-[3px] w-[194px] h-[194px]"
             >
               <Image
                 src={image.source}
                 alt={image.alt ?? ''}
-                width={194}
-                height={194}
+                layout="fill"
+                objectFit
                 placeholder="blur"
                 blurDataURL={getPlaceholder(194, 194)}
               />
             </div>
           </div>
         )}
 
-        {header && <hr className="w-10/12 border-solid border-themePrimary" />}
+        {header && <hr className="w-full border-2 border-solid border-themePrimary" />}
 
         <div>{children}</div>
 

components/SuccessStory/SuccessStory.js

@@ -1,5 +1,5 @@
 import { string } from 'prop-types';
-import Image from 'next/image';
+import FlatCard from 'components/Cards/FlatCard/FlatCard';
 
 SuccessStory.propTypes = {
   imageSource: string.isRequired,
@@ -9,22 +9,9 @@ SuccessStory.propTypes = {
 
 function SuccessStory({ imageSource, quote, title }) {
   return (
-    <div className="box-border flex flex-col flex-nowrap items-center my-12 mx-4 pt-14 relative max-w-[320px] h-[940px] md:h-[748px] sm:h-auto">
-      <div className="absolute top-0 h-48 shadow-[1px_2px_5p_3px_rgba(0, 0, 0, 0.35)]">
-        <Image
-          alt={`${title} headshot`}
-          src={imageSource}
-          width={200}
-          height={200}
-          layout="fixed"
-        />
-      </div>
-
-      <div className="flex flex-1 flex-col flex-nowrap items-center p-8 pt-40 border-2 border-solid border-themePrimary [&>blockquote]:my-4 [&>blockquote]:mx-0 [&>blockquote]:text-base">
-        <h6 className="text-center text-base">{title}</h6>
-        <blockquote>{`"${quote}"`}</blockquote>
-      </div>
-    </div>
+    <FlatCard header={title} image={{ source: imageSource, alt: '' }}>
+      <blockquote>{`"${quote}"`}</blockquote>
+    </FlatCard>
   );
 }