feat: added banner for orgs (#13644)

Use this banner to test https://pbs.twimg.com/profile_banners/1063089191565905920/1685635865/1500x500

- [x] add backend
- [x] add file upload (require 1500x500px) in Organization/Appearance
- [x] for now, apply this to all Org event types. later we could think about sub-team overwrites, but for now org is enough


1) Upload Banner Screen

<img width="1512" alt="Screenshot 2024-02-15 at 10 26 36 PM" src="https://github.com/calcom/cal.com/assets/53316345/3c7417ee-7ef7-4138-b5f8-38f255a407fa">

2) 

<img width="1512" alt="Screenshot 2024-02-15 at 10 27 02 PM" src="https://github.com/calcom/cal.com/assets/53316345/a74dffbf-3727-4b2f-82d5-fefd55c12901">


3) Go to Org Team Event Types

<img width="1512" alt="Screenshot 2024-02-15 at 10 27 21 PM" src="https://github.com/calcom/cal.com/assets/53316345/5f188bd7-8a66-4da7-be73-1b5e178b5b3b">


__________________________________________________

DESIGNS


![CleanShot 2024-02-12 at 15 02 37@2x](https://github.com/calcom/cal.com/assets/8019099/85602120-1ced-4627-ae7c-375d33ccf1e9)


__


![CleanShot 2024-02-12 at 14 55 23@2x](https://github.com/calcom/cal.com/assets/8019099/e8a9e9c3-4e01-4a07-a2e0-7259027feb36)


![CleanShot 2024-02-12 at 14 55 34@2x](https://github.com/calcom/cal.com/assets/8019099/56500809-6c6e-49a6-9229-43190dd711b7)

mobile:
![CleanShot 2024-02-12 at 14 56 00@2x](https://github.com/calcom/cal.com/assets/8019099/f90b58b2-3104-4c00-bc18-a2a54ac8e7e7)

apps/web/lib/team/[slug]/[type]/getServerSideProps.tsx

@@ -96,6 +96,7 @@ export const getServerSideProps = async (context: GetServerSidePropsContext) =>
       isBrandingHidden: team?.hideBranding,
       isInstantMeeting: eventData.isInstantEvent && queryIsInstantMeeting ? true : false,
       themeBasis: null,
+      orgBannerUrl: eventData?.team?.parent?.bannerUrl ?? "",
     },
   };
 };

apps/web/pages/team/[slug]/[type].tsx

@@ -25,6 +25,7 @@ export const getMultipleDurationValue = (
   if (multipleDurationConfig.includes(Number(queryDuration))) return Number(queryDuration);
   return defaultValue;
 };
+
 export default function Type({
   slug,
   user,
@@ -34,6 +35,7 @@ export default function Type({
   isBrandingHidden,
   eventData,
   isInstantMeeting,
+  orgBannerUrl,
 }: PageProps) {
   const searchParams = useSearchParams();
 
@@ -66,6 +68,7 @@ export default function Type({
           searchParams?.get("duration"),
           eventData.length
         )}
+        orgBannerUrl={orgBannerUrl}
       />
     </main>
   );

apps/web/public/static/locales/en/common.json

@@ -251,6 +251,7 @@
   "confirm_auth_change": "This will change the way you log in",
   "confirm_auth_email_change": "Changing the email address will disconnect your current authentication method to log in to Cal.com. We will ask you to verify your new email address. Moving forward, you will be logged out and use your new email address to log in instead of your current authentication method after setting your password by following the instructions that will be sent to your mail.",
   "reset_your_password": "Set your new password with the instructions sent to your email address.",
+  "org_banner_instructions":"Please upload image of {{width}} width and {{height}} height.",
   "email_change": "Log back in with your new email address and password.",
   "create_your_account": "Create your account",
   "create_your_calcom_account": "Create your Cal.com account",
@@ -2083,6 +2084,7 @@
   "organizations": "Organizations",
   "upload_cal_video_logo":"Upload Cal Video Logo",
   "update_cal_video_logo":"Update Cal Video Logo",
+  "upload_banner": "Upload Banner",
   "cal_video_logo_upload_instruction":"To ensure your logo is visible against Cal video's dark background, please upload a light-colored image in PNG or SVG format to maintain transparency.",
   "org_admin_other_teams": "Other teams",
   "org_admin_other_teams_description": "Here you can see teams inside your organization that you are not part of. You can add yourself to them if needed.",