Fix: Add padding top and bottom for hero text

Signed-off-by: George J Padayatti <[email protected]>

src/components/Card/index.js

@@ -9,7 +9,7 @@ export default function Card({ title, description, link }) {
                     {title}
                 </p>
                 {
-                    description && (<p className="text-[black] w-2/3 mt-2 text-[14px] text-center">
+                    description && (<p className="text-[black] w-full mt-2 text-[14px] text-center">
                         {description}
                     </p>)
                 }

src/components/Header/index.js

@@ -6,9 +6,11 @@ export default function Header() {
     return (
         <header className={clsx('hero hero--primary flex-auto p-0 min-h-[80dvh')}>
             <div className="container flex flex-col justify-center items-center">
-                <p className='mt-5 md:mt-0 text-3xl md:text-5xl w-full md:w-4/6 text-center break-words whitespace-normal'><Translate>CRANE Decentralised Health Dataspace Infrastructure</Translate></p>
-                <p className='mt-10 text-lg md:text-2xl w-full md:w-4/6 text-center opacity-70 text-black break-words'><span className='inline bg-white'><Translate>Developer Documentation and APIs</Translate></span></p>
-                <p className='mb-5 md:mb-0 text:lg md:text-2xl w-full md:w-4/6 text-center opacity-70 text-black break-words'><span className='inline bg-white'><Translate>Onboard, Integrate with and extend via the decentralised health data space</Translate></span></p>
+                <div className='pt-[100px] pb-[100px] flex flex-col justify-center items-center'>
+                    <p className='mt-5 md:mt-0 text-3xl md:text-5xl w-full md:w-4/6 text-center break-words whitespace-normal'><Translate>CRANE Decentralised Health Dataspace Infrastructure</Translate></p>
+                    <p className='mt-10 text-lg md:text-2xl w-full md:w-4/6 text-center opacity-70 text-black break-words'><span className='inline bg-white'><Translate>Developer Documentation and APIs</Translate></span></p>
+                    <p className='mb-5 md:mb-0 text:lg md:text-2xl w-full md:w-5/6 text-center opacity-70 text-black break-words'><span className='inline bg-white'><Translate>Onboard, Integrate with and extend via the decentralised health data space</Translate></span></p>
+                </div>
             </div>
         </header>
     );