fix: fix padding around product banner (#944)

* fix: fix padding around product banner * fix: fix small gap
helpwave · Mar 26, 2024 · 0ce8ea2 · 0ce8ea2
1 parent 1275b5c
commit 0ce8ea2
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 9 deletions.
diff --git a/landing-page/components/sections/landing/ExpansionSection.tsx b/landing-page/components/sections/landing/ExpansionSection.tsx
@@ -28,7 +28,7 @@ const defaultExpansionTranslation: Record<Languages, ExpansionSectionTranslation
 const ExpansionSection = ({ overwriteTranslation }: PropsForTranslation<ExpansionSectionTranslation>) => {
   const translation = useTranslation(defaultExpansionTranslation, overwriteTranslation)
   return (
-    <div className={tw('pb-16')}>
+    <div className={tw('py-16')}>
         <h1 className={tw('w-full text-3xl text-center font-space')}>{translation.germanyHealthcareSystem}</h1>
 
         <div className={tw('mt-8 w-full flex flex-wrap gap-16 justify-evenly items-center')}>

diff --git a/landing-page/pages/index.tsx b/landing-page/pages/index.tsx
@@ -20,7 +20,7 @@ type HomePageTranslation = {
   helpwaveTasks: string
 }
 
-const defaultHomePageTranslation : Record<Languages, HomePageTranslation> = {
+const defaultHomePageTranslation: Record<Languages, HomePageTranslation> = {
   en: {
     checkOutFirstProduct: 'Check out our first product',
     checkOutFirstProductDescription: 'and how helpwave tasks increases productivity for our medical heroes',
@@ -46,20 +46,18 @@ const Home: NextPage = ({ overwriteTranslation }: PropsForTranslation<HomePageTr
         <PartnerSection/>
       </div>
       <Divider rotate={1}/>
-      <div className={tw('desktop:w-7/12 desktop:mx-auto mobile:mx-8 relative z-[1] desktop:pb-8 mobile:pb-16')}>
+      <div className={tw('desktop:w-7/12 desktop:mx-auto mobile:mx-8')}>
         <StorySection/>
       </div>
-      <div className={tw('w-screen parent bg-hw-primary-900 relative')}>
-        <div className={tw('desktop:w-5/12 desktop:mx-auto mobile:mx-8 desktop:pt-24 mobile:pt-32 text-white')}>
-          <ExpansionSection/>
-        </div>
-        <div className={tw('absolute z-[2] desktop:w-[620px] top-0 left-1/2 -translate-x-1/2 -translate-y-1/2')}>
+      <div className={tw('relative flex flex-col items-center')}>
+        <div className={tw('desktop:w-[620px] mx-20')}>
           <DescriptionWithAction
             // TODO translation
             title={`${translation.checkOutFirstProduct}...`}
             description={`...${translation.checkOutFirstProductDescription}`}
             trailing={(
-              <div className={tw('flex flex-row items-center desktop:justify-end mobile:justify-center grow desktop:pl-2 mobile:pt-2')}>
+              <div
+                className={tw('flex flex-row items-center desktop:justify-end mobile:justify-center grow desktop:pl-2 mobile:pt-2')}>
                 <Link
                   href="product/tasks"
                   className={tw('flex flex-row gap-x-4 whitespace-nowrap px-4 py-2 text-white bg-hw-primary-800 rounded-md')}
@@ -73,6 +71,10 @@ const Home: NextPage = ({ overwriteTranslation }: PropsForTranslation<HomePageTr
             descriptionClassName={tw('!text-gray-600')}
           />
         </div>
+        <div className={tw('absolute h-1/2 w-full top-1/2 bg-hw-primary-900 z-[-1] translate-y-[2px]')}></div>
+      </div>
+      <div className={tw('w-screen parent bg-hw-primary-900 text-white')}>
+        <ExpansionSection/>
       </div>
       <Footer/>
     </div>