fix: container padding

Author: rob-at-cortex

src/components/HeaderFooter/HeaderDesktop.tsx

@@ -59,7 +59,7 @@ export function HeaderDesktop({ isMenuOpen, logoLight, logoDark }: HeaderProps)
           isScrolled || isMenuOpen ? 'translate-y-0' : '-translate-y-full bg-transparent'
         }`}
       > */}
-        <Container>
+        <Container className='px-0'>
           <nav className="backdrop-blur-sm text-white p-0 rounded-b-xl">
             <div className="flex items-center justify-between bg-accent px-9 py-0 dark:bg-[#212124] [&_.logo-light]:[filter:brightness(0)_invert(1)] rounded-b-xl dark:border dark:border-accent">
               <BrandLogo logoDark={logoDark} logoLight={logoLight}/>

src/components/Heros/LowImpact/index.tsx

@@ -16,7 +16,7 @@ type LowImpactHeroType =
 
 export const LowImpactHero: React.FC<LowImpactHeroType> = ({ children, richText }) => {
   return (
-      <div className="min-w-full py-8 bg-muted">
+      <div className="min-w-full py-10 bg-muted mt-24">
         <div className="container">
           {children || (richText && <RichText content={richText} enableGutter={false} />)}
         </div>

src/components/Heros/MediumImpact/index.tsx

@@ -88,7 +88,7 @@ export const MediumImpactHero: React.FC<MediumImpactHeroType> = ({
 
 
   return (
-    <div className="relative bg-brand-one pb-12 pt-10">
+    <div className="relative bg-brand-one pb-12 mt-20 pt-10">
       {media && <BackgroundImage media={media as MediaObject | string} />}
       {/* <Image
         src={args.heroBackgroundImage}

src/components/Other/Container.tsx

@@ -19,11 +19,17 @@ export interface IContainer {
    * @type {boolean}
    */
   isNoPadding?: boolean
+
+  /**
+   * Additional class names to apply to the container.
+   * @type {string}
+   */
+  className?: string
 }
 
 /** Container provide content containment, padding, and alignment within specific devices or viewports. */
-export function Container({ children, isFluid = false, isNoPadding = false }: IContainer) {
-  const containerClasses = cn( 'container', isFluid && 'full-width' ,  isNoPadding && 'no-padding' )
+export function Container({ children, isFluid = false, isNoPadding = false, className = '' }: IContainer) {
+  const containerClasses = cn('container', isFluid && 'full-width', isNoPadding && 'no-padding', className)
 
   return <div className={containerClasses}>{children}</div>
 }