diff --git a/webapp/src/components/Campaign/CampaignBanner/CampaignBanner.css b/webapp/src/components/Campaign/CampaignBanner/CampaignBanner.css index c67005445f..360ece4ad5 100644 --- a/webapp/src/components/Campaign/CampaignBanner/CampaignBanner.css +++ b/webapp/src/components/Campaign/CampaignBanner/CampaignBanner.css @@ -1,5 +1,5 @@ .CampaignBanner { overflow: hidden; - margin: 0 24px 20px; + margin: 15px 24px; position: relative; } diff --git a/webapp/src/components/Campaign/banners/CampaignBrowserBanner/CampaignBrowserBanner.css b/webapp/src/components/Campaign/banners/CampaignBrowserBanner/CampaignBrowserBanner.css index f3d69a2cae..7ee4ab140f 100644 --- a/webapp/src/components/Campaign/banners/CampaignBrowserBanner/CampaignBrowserBanner.css +++ b/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,54 +28,84 @@ } .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; @@ -89,3 +113,4 @@ text-align: start; } } + diff --git a/webapp/src/components/Campaign/banners/CampaignBrowserBanner/CampaignBrowserBanner.tsx b/webapp/src/components/Campaign/banners/CampaignBrowserBanner/CampaignBrowserBanner.tsx index 40c9ac51a9..c1da69de66 100644 --- a/webapp/src/components/Campaign/banners/CampaignBrowserBanner/CampaignBrowserBanner.tsx +++ b/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 (
-
+
{t('campaign.event_hashtag')} - {t('event_campaign.campaign_browser.slogan')} -
- -
-
{t('event_campaign.campaign_browser.title')}
-

- {t('event_campaign.campaign_browser.subtitle', { - event_hashtag: ( - - {t('campaign.event_hashtag')}! - - ), - enter:
- })} -

+
+
{t('event_campaign.campaign_browser.title')}
+

+ {t('event_campaign.campaign_browser.subtitle', { + event_hashtag: t('campaign.event_hashtag'), + enter:
+ })} +

+
+ {t('campaign.event_hashtag')}
+ +
+
) } diff --git a/webapp/src/components/Campaign/banners/CampaignCollectiblesBanner/CampaignCollectiblesBanner.tsx b/webapp/src/components/Campaign/banners/CampaignCollectiblesBanner/CampaignCollectiblesBanner.tsx index 3ee14b0c5a..fbb6c90155 100644 --- a/webapp/src/components/Campaign/banners/CampaignCollectiblesBanner/CampaignCollectiblesBanner.tsx +++ b/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 ( - - {/* We're using the same banner for this event. */} - - - ) + return } export default CampaignCollectiblesBanner diff --git a/webapp/src/components/Campaign/banners/CampaignHomepageBanner/CampaignHomepageBanner.css b/webapp/src/components/Campaign/banners/CampaignHomepageBanner/CampaignHomepageBanner.css index d787ad804d..cb7169d9ae 100644 --- a/webapp/src/components/Campaign/banners/CampaignHomepageBanner/CampaignHomepageBanner.css +++ b/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,15 +68,42 @@ 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; @@ -83,6 +111,10 @@ 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 { diff --git a/webapp/src/components/Campaign/banners/CampaignHomepageBanner/CampaignHomepageBanner.tsx b/webapp/src/components/Campaign/banners/CampaignHomepageBanner/CampaignHomepageBanner.tsx index c7534f5e1f..004874be00 100644 --- a/webapp/src/components/Campaign/banners/CampaignHomepageBanner/CampaignHomepageBanner.tsx +++ b/webapp/src/components/Campaign/banners/CampaignHomepageBanner/CampaignHomepageBanner.tsx @@ -1,68 +1,30 @@ import React from 'react' -import { Link } from 'react-router-dom' -import { Button, Desktop, TabletAndBelow } from 'decentraland-ui' import { t } from 'decentraland-dapps/dist/modules/translation/utils' -import { locations } from '../../../../modules/routing/locations' -import { AssetType } from '../../../../modules/asset/types' -import * as decentraland from '../../../../modules/vendor/decentraland' -import { VendorName } from '../../../../modules/vendor' -import { SortBy } from '../../../../modules/routing/types' -import logo from '../pride-logo.png' -import hat from '../pride_hat.png' +import logo from '../logo.png' import './CampaignHomepageBanner.css' const CampaignHomepageBanner: React.FC = () => { return (
- {t('event_campaign.homepage.dates')} {t('campaign.event_hashtag')} - {t('event_campaign.homepage.slogan')}
{t('event_campaign.homepage.title')} - - - {t('event_campaign.homepage.subtitle', { - event_hashtag: ( - - {t('campaign.event_hashtag')} - - ), - enter:
- })} -
-
- - - {t('event_campaign.homepage.subtitle_mobile')} - - - +
- {t('campaign.event_tag')} +
) } diff --git a/webapp/src/components/Campaign/banners/banner.png b/webapp/src/components/Campaign/banners/banner.png new file mode 100644 index 0000000000..da3bb7049e Binary files /dev/null and b/webapp/src/components/Campaign/banners/banner.png differ diff --git a/webapp/src/components/Campaign/banners/banner_mobile.png b/webapp/src/components/Campaign/banners/banner_mobile.png new file mode 100644 index 0000000000..ab2246aa58 Binary files /dev/null and b/webapp/src/components/Campaign/banners/banner_mobile.png differ diff --git a/webapp/src/components/Campaign/banners/bird.png b/webapp/src/components/Campaign/banners/bird.png new file mode 100644 index 0000000000..ad43259d59 Binary files /dev/null and b/webapp/src/components/Campaign/banners/bird.png differ diff --git a/webapp/src/components/Campaign/banners/logo.png b/webapp/src/components/Campaign/banners/logo.png new file mode 100644 index 0000000000..08795d4575 Binary files /dev/null and b/webapp/src/components/Campaign/banners/logo.png differ diff --git a/webapp/src/components/Campaign/banners/pride-banner-mobile.png b/webapp/src/components/Campaign/banners/pride-banner-mobile.png deleted file mode 100644 index c7b31ed919..0000000000 Binary files a/webapp/src/components/Campaign/banners/pride-banner-mobile.png and /dev/null differ diff --git a/webapp/src/components/Campaign/banners/pride-banner.png b/webapp/src/components/Campaign/banners/pride-banner.png deleted file mode 100644 index 8eef7867ea..0000000000 Binary files a/webapp/src/components/Campaign/banners/pride-banner.png and /dev/null differ diff --git a/webapp/src/components/Campaign/banners/pride-logo.png b/webapp/src/components/Campaign/banners/pride-logo.png deleted file mode 100644 index bd7faeb632..0000000000 Binary files a/webapp/src/components/Campaign/banners/pride-logo.png and /dev/null differ diff --git a/webapp/src/components/Campaign/banners/pride_hat.png b/webapp/src/components/Campaign/banners/pride_hat.png deleted file mode 100644 index 56afe83a9d..0000000000 Binary files a/webapp/src/components/Campaign/banners/pride_hat.png and /dev/null differ diff --git a/webapp/src/components/Campaign/banners/wearables.png b/webapp/src/components/Campaign/banners/wearables.png new file mode 100644 index 0000000000..c9cf5fe62a Binary files /dev/null and b/webapp/src/components/Campaign/banners/wearables.png differ diff --git a/webapp/src/components/Campaign/banners/wearables_vertical.png b/webapp/src/components/Campaign/banners/wearables_vertical.png new file mode 100644 index 0000000000..f3a42914fc Binary files /dev/null and b/webapp/src/components/Campaign/banners/wearables_vertical.png differ diff --git a/webapp/src/components/Campaign/config.ts b/webapp/src/components/Campaign/config.ts index 496ce7a91c..e226e5958e 100644 --- a/webapp/src/components/Campaign/config.ts +++ b/webapp/src/components/Campaign/config.ts @@ -1,2 +1,2 @@ -export const CAMPAIGN_TAG = 'PRIDE23' +export const CAMPAIGN_TAG = 'DCLMF23' export const CAMPAING_TAB_ANIMATION_ENABLED = true diff --git a/webapp/src/modules/translation/locales/en.json b/webapp/src/modules/translation/locales/en.json index 3525ff4db9..6fc9fea37d 100644 --- a/webapp/src/modules/translation/locales/en.json +++ b/webapp/src/modules/translation/locales/en.json @@ -1297,32 +1297,23 @@ "confirm_transaction": "Confirm the transaction on your wallet to continue" }, "campaign": { - "tab": "PRIDE23", - "badge": "PRIDE23", - "event_tag": "PRIDE23", - "event_hashtag": "#MetaversePride23" + "tab": "DCLMF23", + "badge": "DCLMF23", + "event_tag": "DCLMF23", + "event_hashtag": "#DCLMF23" }, "event_campaign": { "homepage": { - "title": "Prepare the Perfect Pride Look!", - "subtitle": "Show your Pride in Decentraland during {event_hashtag} with prismatic Wearables & Emotes that celebrate Inclusivity and Diversity in the metaverse—find everything you need in one place.", - "subtitle_mobile": "Show your Pride in Decentraland with prismatic Wearables & Emotes made by the community—find everything you need in one place.", - "cta": "Browse Pride Items", - "dates": "JUNE 27-29", - "slogan": "CELEBRATE DIVERSITY AND INCLUSIVITY IN THE METAVERSE" + "title": "Get Ready for Decentraland Music Festival!", + "subtitle": "3 Days Of Immersive Musical Experience & Digitally-Native Performances Are Coming To Decentraland Nov 16-18. Get Ready With The Latest Festival Wearables & Emotes From DCL's Community Creators." }, "collectibles": { - "title": "Prepare the Perfect Pride Look!", - "subtitle": "Show your Pride in Decentraland during {event_hashtag} with prismatic Wearables & Emotes that celebrate Inclusivity and Diversity in the metaverse—find everything you need in one place.", - "cta": "Browse Pride Items", - "cta_mobile": "Browse", - "dates": "JUNE 27-29", - "slogan": "CELEBRATE DIVERSITY AND INCLUSIVITY IN THE METAVERSE" + "title": "Get Ready for Decentraland Music Festival!", + "subtitle": "3 Days Of Immersive Musical Experience & Digitally-Native Performances Are Coming To Decentraland Nov 16-18. Get Ready With The Latest Festival Wearables & Emotes From DCL's Community Creators." }, "campaign_browser": { - "title": "Metaverse Pride Essentials", - "subtitle": "Celebrate Inclusivity & Diversity during {event_hashtag} Prepare the perfect Pride parade look with vibrant Wearables & Emotes from the DCL community.", - "slogan": "CELEBRATE DIVERSITY AND INCLUSIVITY IN THE METAVERSE" + "title": "Decentraland Music Festival Essentials", + "subtitle": "From Crowd Surfing Emotes to Glowing Wearables, Find All The Festival Items You Need For #DCLMF23 Right Here" } }, "asset_card": { diff --git a/webapp/src/modules/translation/locales/es.json b/webapp/src/modules/translation/locales/es.json index f40a105948..c1a53a0414 100644 --- a/webapp/src/modules/translation/locales/es.json +++ b/webapp/src/modules/translation/locales/es.json @@ -1289,32 +1289,23 @@ "confirm_transaction": "Confirme la transacción en su billetera para continuar" }, "campaign": { - "tab": "PRIDE23", - "badge": "PRIDE23", - "event_tag": "PRIDE23", - "event_hashtag": "#MetaversePride23" + "tab": "DCLMF23", + "badge": "DCLMF23", + "event_tag": "DCLMF23", + "event_hashtag": "#DCLMF23" }, "event_campaign": { "homepage": { - "title": "Prepará el look perfecto para Pride!", - "subtitle": "Muestre su orgullo en Decentraland durante {event_hashtag} con Wearables y emotes que celebran la inclusión y la diversidad en el metaverso: encuentre todo lo que necesita en un solo lugar.", - "subtitle_mobile": "Muestre su orgullo en Decentraland con Wearables y Emotes creados por la comunidad: encuentre todo lo que necesita en un solo lugar.", - "cta": "Buscar Items Pride", - "dates": "JUNIO 27-29", - "slogan": "CELEBRA LA DIVERSIDAD E INCLUSION EN EL METAVERSO" + "title": "¡Prepárate para Decentraland Music Festival!", + "subtitle": "3 días de experiencia musical inmersiva y actuaciones digitalmente nativas están llegando a Decentral y del 16 al 18 de noviembre.Prepárese con los últimos wearables y emots del festival de los creadores de la comunidad de DCL." }, "collectibles": { - "title": "Prepará el look perfecto para Pride!", - "subtitle": "Muestre su orgullo en Decentraland durante {event_hashtag} con Wearables y emotes que celebran la inclusión y la diversidad en el metaverso: encuentre todo lo que necesita en un solo lugar.", - "subtitle_mobile": "Muestre su orgullo en Decentraland con Wearables y Emotes creados por la comunidad: encuentre todo lo que necesita en un solo lugar.", - "cta": "Buscar Items Pride", - "dates": "JUNIO 27-29", - "slogan": "CELEBRA LA DIVERSIDAD E INCLUSION EN EL METAVERSO" + "title": "¡Prepárate para Decentraland Music Festival!", + "subtitle": "3 días de experiencia musical inmersiva y actuaciones digitalmente nativas están llegando a Decentral y del 16 al 18 de noviembre.Prepárese con los últimos wearables y emots del festival de los creadores de la comunidad de DCL." }, "campaign_browser": { - "title": "Esenciales Pride del metaverso", - "subtitle": "Celebre la inclusión y la diversidad durante {event_hashtag} Prepare el look perfecto para el desfile del Orgullo con vibrantes Wearables y Emotes de la comunidad DCL.", - "slogan": "CELEBRATE DIVERSITY AND INCLUSIVITY IN THE METAVERSE" + "title": "Esenciales del Music Festival", + "subtitle": "Desde Emotes de surf en la multitud hasta wearables brillantes, encuentre todos los artículos del festival que necesita para #DCLMF23 aquí" } }, "asset_card": { diff --git a/webapp/src/modules/translation/locales/zh.json b/webapp/src/modules/translation/locales/zh.json index fc6607a7d2..87b71d530c 100644 --- a/webapp/src/modules/translation/locales/zh.json +++ b/webapp/src/modules/translation/locales/zh.json @@ -1294,32 +1294,23 @@ "confirm_transaction": "确认您钱包上的交易以继续" }, "campaign": { - "tab": "PRIDE23", - "badge": "PRIDE23", - "event_tag": "PRIDE23", - "event_hashtag": "#MetaversePride23" + "tab": "DCLMF23", + "badge": "DCLMF23", + "event_tag": "DCLMF23", + "event_hashtag": "#DCLMF23" }, "event_campaign": { "homepage": { - "title": "為 Pride 打造完美造型!", - "subtitle": "在 {event_hashtag} 期間通過可穿戴設備和表情展示您對 Decentraland 的自豪感, 慶祝元宇宙中的包容性和多樣性 - 在一個地方找到您需要的一切。", - "subtitle_mobile": "通過社區創建的可穿戴設備和表情展示您對 Decentraland 的自豪感——在一個地方找到您需要的一切。", - "cta": "搜索驕傲物品", - "dates": "月 27 日至 29 日", - "slogan": "慶祝元宇宙的多樣性和包容性" + "title": "准备去分散音乐节!", + "subtitle": "11月16日至18日,分散的3天的沉浸式音乐经验和数字表演即将到来。为DCL社区创作者的最新节日可穿戴设备和情感做好准备。" }, "collectibles": { - "title": "為 Pride 打造完美造型!", - "subtitle": "在 {event_hashtag} 期間通過可穿戴設備和表情展示您對 Decentraland 的自豪感, 慶祝元宇宙中的包容性和多樣性 - 在一個地方找到您需要的一切。", - "subtitle_mobile": "通過社區創建的可穿戴設備和表情展示您對 Decentraland 的自豪感——在一個地方找到您需要的一切。", - "cta": "搜索驕傲物品", - "dates": "月 27 日至 29 日", - "slogan": "慶祝元宇宙的多樣性和包容性" + "title": "准备去分散音乐节!", + "subtitle": "11月16日至18日,分散的3天的沉浸式音乐经验和数字表演即将到来。为DCL社区创作者的最新节日可穿戴设备和情感做好准备。" }, "campaign_browser": { - "title": "元界驕傲精華", - "subtitle": "在 {event_hashtag} 期間慶祝包容性和多樣性 將驕傲遊行的完美外觀與來自 DCL 社區的充滿活力的可穿戴設備和表情組合在一起。", - "slogan": "慶祝元宇宙的多樣性和包容性" + "title": "分散音乐节的要点", + "subtitle": "从人群冲浪到发光的可穿戴设备,在这里找到#DCLMF23所需的所有节日项目" } }, "asset_card": {