fix conflicts

components/ui/Container/Container.tsx

@@ -9,7 +9,9 @@ interface Props {
 }
 
 const Container: FC<Props> = ({ children, className, el = 'div', clean }) => {
-  const rootClassName = cn(className, { 'mx-auto max-w-8xl px-12': !clean })
+  const rootClassName = cn(className, {
+    'mx-auto max-w-8xl px-6': !clean,
+  })
 
   let Component: React.ComponentType<React.HTMLAttributes<
     HTMLDivElement

components/ui/Hero/Hero.module.css

@@ -0,0 +1,6 @@
+.root {
+  @apply mx-auto grid grid-cols-1 py-32 gap-4;
+  @screen md {
+    @apply grid-cols-2;
+  }
+}

components/ui/Hero/Hero.tsx

@@ -1,6 +1,8 @@
 import React, { FC } from 'react'
 import { Container } from '@components/ui'
 import { RightArrow } from '@components/icon'
+import s from './Hero.module.css'
+
 interface Props {
   className?: string
   headline: string
@@ -9,17 +11,21 @@ interface Props {
 
 const Hero: FC<Props> = ({ headline, description }) => {
   return (
-    <div className="mx-auto grid grid-cols-2 bg-black py-32">
+    <div className="bg-black">
       <Container>
-        <h2 className="text-4xl leading-10 font-extrabold text-white sm:text-5xl sm:leading-none sm:tracking-tight lg:text-6xl">
-          {headline}
-        </h2>
-        <div className="flex flex-col justify-between">
-          <p className="mt-5 text-xl leading-7 text-accent-2">{description}</p>
-          <a className="text-white pt-3 font-bold hover:underline flex flex-row cursor-pointer">
-            <span>Read it here</span>
-            <RightArrow width="20" heigh="20" className="ml-1" />
-          </a>
+        <div className={s.root}>
+          <h2 className="text-4xl leading-10 font-extrabold text-white sm:text-5xl sm:leading-none sm:tracking-tight lg:text-6xl">
+            {headline}
+          </h2>
+          <div className="flex flex-col justify-between">
+            <p className="mt-5 text-xl leading-7 text-accent-2 text-white">
+              {description}
+            </p>
+            <a className="text-white pt-3 font-bold hover:underline flex flex-row cursor-pointer w-max-content">
+              <span>Read it here</span>
+              <RightArrow width="20" heigh="20" className="ml-1" />
+            </a>
+          </div>
         </div>
       </Container>
     </div>

components/ui/Modal/Modal.tsx

@@ -2,7 +2,7 @@ import cn from 'classnames'
 import { FC, useRef } from 'react'
 import s from './Modal.module.css'
 import { useDialog } from '@react-aria/dialog'
-import { useOverlay, usePreventScroll, useModal } from '@react-aria/overlays'
+import { useOverlay, useModal } from '@react-aria/overlays'
 import { FocusScope } from '@react-aria/focus'
 
 interface Props {
@@ -25,10 +25,6 @@ const Modal: FC<Props> = ({
   let { overlayProps } = useOverlay(props, ref)
   let { dialogProps } = useDialog(props, ref)
 
-  usePreventScroll({
-    isDisabled: !show,
-  })
-
   return (
     <div className={rootClassName}>
       <FocusScope contain restoreFocus autoFocus>

components/ui/Sidebar/Sidebar.tsx

@@ -2,43 +2,33 @@ import cn from 'classnames'
 import { FC, useRef } from 'react'
 import s from './Sidebar.module.css'
 import { Transition } from '@headlessui/react'
-import {
-  useOverlay,
-  usePreventScroll,
-  useModal,
-  OverlayContainer,
-} from '@react-aria/overlays'
+import { useOverlay, useModal, OverlayContainer } from '@react-aria/overlays'
 import { useDialog } from '@react-aria/dialog'
 import { FocusScope } from '@react-aria/focus'
 
 interface Props {
   className?: string
   children?: any
-  show?: boolean
-  close: () => void
+  open?: boolean
+  onClose: () => void
 }
 
-const Sidebar: FC<Props> = ({ className, children, show = true, close }) => {
+const Sidebar: FC<Props> = ({ className, children, open = false, onClose }) => {
   const rootClassName = cn(s.root, className)
-
   const ref = useRef<HTMLDivElement>(null)
   const { modalProps } = useModal()
   const { overlayProps } = useOverlay(
     {
-      isOpen: show,
-      onClose: close,
+      isOpen: open,
       isDismissable: true,
+      onClose: onClose,
     },
     ref
   )
   const { dialogProps } = useDialog({}, ref)
 
-  usePreventScroll({
-    isDisabled: !show,
-  })
-
   return (
-    <Transition show={show}>
+    <Transition show={open}>
       <OverlayContainer>
         <FocusScope contain restoreFocus autoFocus>
           <div className={rootClassName}>
@@ -54,7 +44,7 @@ const Sidebar: FC<Props> = ({ className, children, show = true, close }) => {
                 <div
                   className="absolute inset-0 bg-black bg-opacity-50 transition-opacity"
                   // Close the sidebar when clicking on the backdrop
-                  onClick={close}
+                  onClick={onClose}
                 />
               </Transition.Child>
               <section