Merge branch 'main' of github.com:FrontMatter/web-documentation-nextjs

Author: estruyf

components/Page/CTA.tsx

@@ -44,8 +44,8 @@ export const CTA: React.FunctionComponent<ICTAProps> = (props: React.PropsWithCh
         </div>
       </div>
 
-      <div className="sm:mx-auto sm:max-w-3xl sm:px-6">
-        <div className={`py-12 sm:relative sm:py-16 lg:absolute lg:inset-y-0 lg:right-0 lg:w-1/2`}>
+      <div className="-mx-4 sm:mx-auto sm:max-w-3xl sm:px-6">
+        <div className={`py-10 sm:py-16 sm:relative lg:absolute lg:inset-y-0 lg:right-0 lg:w-1/2`}>
           <div className={`relative sm:mx-auto sm:max-w-3xl sm:px-0 lg:-mr-40 lg:max-w-none lg:h-full lg:pl-12`}>
             <img
               className={`w-full lg:h-full lg:w-auto lg:max-w-none`}

components/Page/Hero.tsx

@@ -45,15 +45,14 @@ export const Hero: React.FunctionComponent<IHeroProps> = ({ view, title, descrip
         </div>
       </div>
 
-      <div className={`sm:mx-auto sm:max-w-3xl sm:px-6`}>
-        <div className={`py-12 sm:relative sm:py-16 lg:absolute lg:inset-y-0 lg:w-1/2 ${view === "left" ? `lg:left-0` : `lg:right-0`}`}>
+      <div className={`-mx-4 sm:mx-auto sm:max-w-3xl sm:px-6`}>
+        <div className={`py-10 sm:py-16 sm:relative lg:absolute lg:inset-y-0 lg:w-1/2 ${view === "left" ? `lg:left-0` : `lg:right-0`}`}>
           <div className={`relative sm:mx-auto sm:max-w-3xl sm:px-0 lg:max-w-none lg:h-full ${view === "left" ? `` : `lg:-mr-40 lg:pl-12`}`}>
             <img
               className={`w-full lg:h-full lg:w-auto lg:max-w-none ${view === "left" ? `lg:absolute lg:right-0 img-left` : 'img-right'}`}
               src={imgSrc}
               alt={imgAlt}
-              loading={`lazy`}
-              data-scroll />
+              loading={`lazy`} />
           </div>
         </div>
       </div>

styles/globals.css

@@ -293,7 +293,7 @@ main img {
   opacity: var(--opacity, 0);
 } */
 
-[data-scroll] {
+/* [data-scroll] {
   translate: var(--x, 0) 0;
   transition: translate 0.2s, opacity 0.2s;
   opacity: var(--opacity, 0);
@@ -314,7 +314,7 @@ main img {
 .img-right[data-scroll="out"] {
   --opacity: 0;
   --x: 100%;
-}
+} */
 
 .iframe__wrapper {
   position: relative;