Improved styling for annoucement hero

components/campaigns/AnnoucementHero.js

@@ -1,8 +1,8 @@
-import Paragraph from '../typography/Paragraph'
-import Button from '../buttons/Button'
-import Heading from '../typography/Heading'
-import Container from '../layout/Container'
-import AnnouncementRemainingDays from './AnnouncementRamainingDays'
+import Paragraph from '../typography/Paragraph';
+import Button from '../buttons/Button';
+import Heading from '../typography/Heading';
+import Container from '../layout/Container';
+import AnnouncementRemainingDays from './AnnouncementRamainingDays';
 
 function shouldShowBanner(cfpDeadline) {
   const currentDate = new Date(); // Get the current date
@@ -15,19 +15,22 @@ function shouldShowBanner(cfpDeadline) {
 
   return true;
 }
-export default function AnnouncementHero({ className = '', small = false, hideVideo = false }) {
+export default function AnnouncementHero({
+  className = '',
+  small = false,
+  hideVideo = false,
+}) {
   //return null;
 
-    const cfpDeadline = '2023-07-28T06:00:00Z'
-    const showBanner = shouldShowBanner(cfpDeadline);
+  const cfpDeadline = '2023-07-28T06:00:00Z';
+  const showBanner = shouldShowBanner(cfpDeadline);
   if (!showBanner) return null;
 
-
   return (
-    <Container wide as="section" padding='' className='text-center'>
+    <Container wide as="section" padding="" className="text-center">
       <div
         className={`bg-gray-50 border border-gray-200 py-6 rounded ${className} ${
-          small ? 'mb-4' : 'mb-12'
+          small ? 'mb-4' : 'mx-3 mt-3 p-3 mb-6'
         }`}
       >
         <Heading
@@ -47,7 +50,10 @@ export default function AnnouncementHero({ className = '', small = false, hideVi
         <Paragraph typeStyle="body-lg">
           20th of September, 2023 | London, UK
         </Paragraph>
-        <AnnouncementRemainingDays dateTime={cfpDeadline} eventName="the end of Call for Speakers." />
+        <AnnouncementRemainingDays
+          dateTime={cfpDeadline}
+          eventName="the end of Call for Speakers."
+        />
         <div className="mt-6 pb-2 space-x-2">
           <Button
             href="https://conference.asyncapi.com/"