feat: add dcl music festival campaign (#2049)

webapp/src/components/Campaign/CampaignBanner/CampaignBanner.css

@@ -1,5 +1,5 @@
 .CampaignBanner {
   overflow: hidden;
-  margin: 0 24px 20px;
+  margin: 15px 24px;
   position: relative;
 }

webapp/src/components/Campaign/banners/CampaignBrowserBanner/CampaignBrowserBanner.css

@@ -1,31 +1,25 @@
 .CampaignBrowserBanner {
   display: flex;
-  align-items: center;
-  justify-content: center;
-  background-image: url(../pride-banner.png);
+  background-image: url(../banner.png);
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
-  height: 260px;
-  padding: 16px 48px;
-  text-align: center;
-  gap: 100px;
 }
 
-.CampaignBrowserBanner .logo-container {
-  display: flex;
-  flex-direction: column;
+.CampaignBrowserBanner .banner-container {
+  display: grid;
+  grid-template-columns: 400px 1fr 400px;
   align-items: center;
-  gap: 10px;
-  font-size: 15px;
-  font-weight: 600;
+  justify-content: center;
+  text-align: center;
+  gap: 40px;
 }
 
 .CampaignBrowserBanner .ui.header {
   color: white;
   margin-bottom: 8px;
   font-size: 34px;
-  line-height: 26px;
+  line-height: 36px;
   font-weight: 800;
   margin-bottom: 10px;
   text-transform: uppercase;
@@ -34,58 +28,89 @@
 }
 
 .CampaignBrowserBanner .event-banner-logo {
-  width: 320px;
+  width: 100%;
+  padding: 40px;
+  padding-right: 0;
+}
+
+.CampaignBrowserBanner .event-banner-icon {
+  max-width: 100%;
+  padding: 40px;
+  padding-left: 0;
 }
 
 .CampaignBrowserBanner p {
-  text-align: justify;
+  text-align: start;
   overflow-wrap: break-word;
   font-size: 19px;
-  font-weight: 700;
-  word-spacing: -1px;
+  font-weight: 400;
   text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
 }
 
 .CampaignBrowserBanner .copy {
-  flex: 0 1 auto;
-  margin-right: 20px;
   max-width: 700px;
-  display: flex;
-  flex-direction: column;
+  padding: 40px 0;
 }
 
-.CampaignBrowserBanner .ui.primary.button.event-banner-browse-button {
-  background-color: #fd98ff;
-  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
-}
+@media (max-width: 1200px) {
+  .CampaignBrowserBanner .banner-container {
+    grid-template-columns: 250px 1fr 250px;
+  }
 
-.CampaignBrowserBanner .event-banner-pink {
-  color: #fd98ff;
-  text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
+  .CampaignBrowserBanner .copy {
+    font-size: 26px;
+    line-height: 28px;
+  }
 }
 
 @media (max-width: 768px) {
   .CampaignBrowserBanner {
-    background-image: url(../pride-banner-mobile.png);
+    background-image: url(../banner_mobile.png);
+    display: grid;
+    grid-template-columns: 50% 50%;
+  }
+
+  .CampaignBrowserBanner .banner-container {
     height: auto;
-    padding: 40px;
+    padding: 20px;
     display: flex;
     flex-direction: column;
     gap: 20px;
+    padding-right: 0;
   }
   .CampaignBrowserBanner .event-banner-logo {
-    width: 250px;
+    width: 100%;
+    padding: 0;
+  }
+  .CampaignBrowserBanner .event-banner-icon {
+    display: none;
   }
+  .CampaignBrowserBanner .event-banner-vertical-icon {
+    width: 100%;
+    height: 100%;
+  }
+
+  .CampaignBrowserBanner .event-banner-vertical-icon::before {
+    content: '';
+    background: url('../wearables_vertical.png');
+    background-size: cover;
+    width: 100%;
+    height: 100%;
+    display: block;
+  }
+
   .CampaignBrowserBanner .copy {
     margin-right: 0px;
   }
   .CampaignBrowserBanner .ui.header {
     font-size: 20px;
     text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
+    line-height: 24px;
   }
   .CampaignBrowserBanner p {
     font-size: 15px;
     text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
     text-align: start;
   }
 }
+

webapp/src/components/Campaign/banners/CampaignBrowserBanner/CampaignBrowserBanner.tsx

@@ -1,34 +1,37 @@
 import React from 'react'
-import { Header } from 'decentraland-ui'
+import { Header, Mobile } from 'decentraland-ui'
 import { t } from 'decentraland-dapps/dist/modules/translation/utils'
-import logo from '../pride-logo.png'
+import logo from '../logo.png'
+import wearableIcon from '../wearables.png'
 import './CampaignBrowserBanner.css'
 
 const CampaignBrowserBanner: React.FC = () => {
   return (
     <div className="CampaignBrowserBanner">
-      <div className="logo-container">
+      <div className="banner-container">
         <img
           src={logo}
           alt={t('campaign.event_hashtag')}
           className="event-banner-logo"
         />
-        <span>{t('event_campaign.campaign_browser.slogan')}</span>
-      </div>
-
-      <div className="copy">
-        <Header>{t('event_campaign.campaign_browser.title')}</Header>
-        <p>
-          {t('event_campaign.campaign_browser.subtitle', {
-            event_hashtag: (
-              <b className="event-banner-pink">
-                {t('campaign.event_hashtag')}!
-              </b>
-            ),
-            enter: <br />
-          })}
-        </p>
+        <div className="copy">
+          <Header>{t('event_campaign.campaign_browser.title')}</Header>
+          <p>
+            {t('event_campaign.campaign_browser.subtitle', {
+              event_hashtag: t('campaign.event_hashtag'),
+              enter: <br />
+            })}
+          </p>
+        </div>
+        <img
+          src={wearableIcon}
+          alt={t('campaign.event_hashtag')}
+          className="event-banner-icon"
+        />
       </div>
+      <Mobile>
+        <div className="event-banner-vertical-icon" />
+      </Mobile>
     </div>
   )
 }

webapp/src/components/Campaign/banners/CampaignCollectiblesBanner/CampaignCollectiblesBanner.tsx

@@ -1,15 +1,9 @@
 import React from 'react'
 
-import { CampaignBanner } from '../../CampaignBanner'
 import { CampaignHomepageBanner } from '../CampaignHomepageBanner'
 
 const CampaignCollectiblesBanner: React.FC = () => {
-  return (
-    <CampaignBanner>
-      {/* We're using the same banner for this event. */}
-      <CampaignHomepageBanner />
-    </CampaignBanner>
-  )
+  return <CampaignHomepageBanner />
 }
 
 export default CampaignCollectiblesBanner

webapp/src/components/Campaign/banners/CampaignHomepageBanner/CampaignHomepageBanner.css

@@ -1,8 +1,8 @@
 .CampaignHomepageBanner {
   width: 100%;
-  padding: 25px 50px;
-  display: flex;
-  background-image: url('../pride-banner.png');
+  display: grid;
+  grid-template-columns: 400px 1fr 300px;
+  background-image: url('../banner.png');
   background-size: cover;
   background-position: center;
   flex-direction: row;
@@ -21,6 +21,7 @@
   line-height: 26px;
   gap: 10px;
   justify-content: center;
+  padding: 40px 0;
 }
 
 .CampaignHomepageBanner .event-banner-logo-container {
@@ -30,15 +31,17 @@
   font-weight: 600;
   text-align: center;
   line-height: unset;
+  padding: 40px;
+  padding-right: 0;
 }
 
 .CampaignHomepageBanner .event-banner-logo {
-  width: 320px;
+  width: 100%;
 }
 
 .CampaignHomepageBanner .title {
   font-size: 34px;
-  line-height: 29px;
+  line-height: 36px;
   font-weight: 800;
   margin-bottom: 10px;
   text-transform: uppercase;
@@ -47,11 +50,9 @@
 }
 
 .CampaignHomepageBanner .subtitle {
-  text-align: center;
   overflow-wrap: break-word;
   font-size: 19px;
-  font-weight: 700;
-  word-spacing: -1px;
+  font-weight: 400;
 }
 
 .CampaignHomepageBanner .event-banner-pink {
@@ -67,22 +68,53 @@
   margin-top: 15px;
 }
 
-.CampaignHomepageBanner .event-banner-hat {
-  width: 256px;
-  height: 219px;
-  align-self: center;
+.CampaignHomepageBanner .event-banner-bird {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+.CampaignHomepageBanner .event-banner-bird::after {
+  content: '';
+  background: url(../bird.png);
+  width: 120%;
+  height: 120%;
+  max-height: 350px;
+  position: absolute;
+  background-position-x: left;
+  background-position-y: center;
+  background-size: cover;
+  background-repeat: no-repeat;
+}
+
+@media (max-width: 1200px) {
+  .CampaignHomepageBanner {
+    grid-template-columns: 300px 1fr 200px;
+  }
+
+  .CampaignHomepageBanner .event-banner-bird::after {
+    width: 100%;
+    height: 100%;
+    max-height: 250px;
+  }
 }
 
 @media (max-width: 768px) {
   .CampaignHomepageBanner {
-    background-image: url(../pride-banner-mobile.png);
+    background-image: url(../banner_mobile.png);
     height: auto;
     padding: 34px;
     display: flex;
     flex-direction: column;
     gap: 30px;
   }
 
+  .CampaignHomepageBanner .event-banner-logo-container  {
+    padding: 0;
+  }
+
   .CampaignHomepageBanner .copy {
     margin-right: 0px;
     margin-bottom: 20px;
@@ -99,7 +131,7 @@
   .CampaignHomepageBanner .subtitle {
     text-align: unset;
   }
-  .CampaignHomepageBanner .event-banner-hat {
+  .CampaignHomepageBanner .event-banner-bird {
     display: none;
   }
   .CampaignHomepageBanner .event-banner-logo {