Skip to content

Commit c9a4e66

Browse files
pietro-maximoffpietro-maximoff
authored
chore: banner update (#1083)
* chore: banner update * Create quick-hats-rush.md * chore: add card for quick launch
1 parent 3fd94d7 commit c9a4e66

9 files changed

Lines changed: 187 additions & 17 deletions

File tree

‎.changeset/quick-hats-rush.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"frontend": patch
3+
---
4+
5+
chore: banner update

‎apps/frontend/src/app/2_molecules/CTA/CTA.tsx‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ type CTAProps = {
1111
navigateTo: () => void;
1212
badges?: string[];
1313
disableCTA?: boolean;
14+
href?: string;
1415
};
1516

1617
export const CTA: FC<CTAProps> = ({
@@ -22,6 +23,7 @@ export const CTA: FC<CTAProps> = ({
2223
navigateTo,
2324
badges,
2425
disableCTA = false,
26+
href,
2527
}) => (
2628
<div
2729
key={index}
@@ -55,7 +57,9 @@ export const CTA: FC<CTAProps> = ({
5557
<Button
5658
className="w-full sm:w-auto"
5759
text={action}
58-
onClick={navigateTo}
60+
href={!disableCTA ? href : undefined}
61+
onClick={!disableCTA && !href ? navigateTo : undefined}
62+
hrefExternal={Boolean(href)}
5963
style={ButtonStyle.secondary}
6064
disabled={disableCTA}
6165
/>

‎apps/frontend/src/app/5_pages/LandingPage/components/Banner/Banner.tsx‎

Lines changed: 32 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import { useNavigate } from 'react-router-dom';
77

88
import { Button, ButtonSize, ButtonStyle } from '@sovryn/ui';
99

10+
import { LAUNCHPAD_LINKS } from '../../../../../constants/links';
1011
import { translations } from '../../../../../locales/i18n';
1112
import styles from './Banner.module.css';
1213
import { LandingPromoCard } from './components/LandingPromoCard/LandingPromoCard';
@@ -18,7 +19,7 @@ export const Banner: FC = () => {
1819
<div className="w-full relative pb-16">
1920
<Carousel
2021
arrows={false}
21-
draggable={false} // Needs to be true when we have more than 1 promo
22+
draggable
2223
partialVisible={false}
2324
focusOnSelect={false}
2425
responsive={{
@@ -32,12 +33,41 @@ export const Banner: FC = () => {
3233
swipeable
3334
className="static"
3435
renderDotsOutside
35-
showDots={false} // Needs to be true when we have more than 1 promo
36+
showDots
3637
autoPlay={false} // Needs to be true when we have more than 1 promo
3738
dotListClass={styles.dot}
3839
autoPlaySpeed={15000}
3940
infinite
4041
>
42+
<LandingPromoCard
43+
heading={t(translations.landingPage.promotions.originsLaunch.title)}
44+
description={t(
45+
translations.landingPage.promotions.originsLaunch.description,
46+
)}
47+
actions={
48+
<>
49+
<Button
50+
style={ButtonStyle.secondary}
51+
size={ButtonSize.large}
52+
text={t(translations.landingPage.promotions.originsLaunch.cta)}
53+
href={LAUNCHPAD_LINKS.ORIGINS}
54+
hrefExternal
55+
/>
56+
<Button
57+
style={ButtonStyle.ghost}
58+
size={ButtonSize.large}
59+
className="text-sm"
60+
text={t(
61+
translations.landingPage.promotions.originsLaunch
62+
.secondaryCta,
63+
)}
64+
href={LAUNCHPAD_LINKS.LEARN_MORE}
65+
hrefExternal
66+
/>
67+
</>
68+
}
69+
className="border-primary"
70+
/>
4171
<LandingPromoCard
4272
heading={t(translations.landingPage.promotions.bosLaunch.title)}
4373
description={t(

‎apps/frontend/src/app/5_pages/LandingPage/components/Banner/components/LandingPromoCard/LandingPromoCard.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ export const LandingPromoCard: FC<LandingPromoCardProps> = ({
2525
)}
2626
>
2727
<div>
28-
<Heading className="font-medium font-druk text-gray-10 tracking-wide antialiased text-[2rem] xs:text-[2.25rem] md:text-[2.875rem] leading-[3.75rem]">
28+
<Heading className="font-medium font-druk text-gray-10 tracking-wide antialiased text-[2rem] xs:text-[2.25rem] md:text-[2.875rem] leading-[3.75rem] uppercase">
2929
{heading}
3030
</Heading>
3131
<Paragraph className="font-medium leading-5 my-2 text-sm">

‎apps/frontend/src/app/5_pages/LandingPage/components/QuickLaunch/QuickLaunch.module.css‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
.dot {
2+
@apply bottom-5;
3+
button {
4+
@apply bg-gray-60 h-2 w-2 mr-2 border-0;
5+
}
6+
:global(.react-multi-carousel-dot--active) button {
7+
@apply bg-gray-30;
8+
}
9+
}

‎apps/frontend/src/app/5_pages/LandingPage/components/QuickLaunch/QuickLaunch.tsx‎

Lines changed: 70 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React, { FC, useMemo } from 'react';
22

33
import { t } from 'i18next';
4+
import Carousel from 'react-multi-carousel';
45
import { useNavigate } from 'react-router-dom';
56

67
import { noop } from '@sovryn/ui';
@@ -12,9 +13,11 @@ import borrowSovryn from '../../../../../assets/images/QuickLaunch/Borrow with S
1213
import comingSoon from '../../../../../assets/images/QuickLaunch/Coming soon.svg';
1314
import depositAMM from '../../../../../assets/images/QuickLaunch/Deposit in AMM.svg';
1415
import lendDLLR from '../../../../../assets/images/QuickLaunch/Lend DLLR.svg';
16+
import originsLaunch from '../../../../../assets/images/QuickLaunch/Origins Launch.svg';
1517
import passiveYield from '../../../../../assets/images/QuickLaunch/Passive yield.svg';
1618
import stakeSOV from '../../../../../assets/images/QuickLaunch/Stake SOV.svg';
1719
import tradeRunes from '../../../../../assets/images/QuickLaunch/Trade Runes.svg';
20+
import { LAUNCHPAD_LINKS } from '../../../../../constants/links';
1821
import { useCurrentChain } from '../../../../../hooks/useChainStore';
1922
import { translations } from '../../../../../locales/i18n';
2023
import { COMMON_SYMBOLS } from '../../../../../utils/asset';
@@ -23,6 +26,7 @@ import { formatValue } from '../../../../../utils/math';
2326
import { useGetNextSupplyInterestRate } from '../../../LendPage/hooks/useGetNextSupplyInterestRate';
2427
import { useGetReturnRates } from '../../../MarketMakingPage/hooks/useGetReturnRates';
2528
import { useGetStakingStatistics } from '../../../StakePage/components/StakingStatistics/hooks/useGetStakingStatistics';
29+
import styles from './QuickLaunch.module.css';
2630

2731
const pageTranslations = translations.landingPage;
2832

@@ -46,6 +50,19 @@ export const QuickLaunch: FC = () => {
4650

4751
const options = useMemo(
4852
() => [
53+
{
54+
title: t(pageTranslations.quickLaunch.originsLaunchpad.title, {
55+
amount: formatValue(maxStakingApr, 2),
56+
}),
57+
description: t(
58+
pageTranslations.quickLaunch.originsLaunchpad.description,
59+
),
60+
action: t(pageTranslations.quickLaunch.originsLaunchpad.action),
61+
href: LAUNCHPAD_LINKS.ORIGINS,
62+
url: noop,
63+
backgroundImage: originsLaunch,
64+
chains: [Chains.RSK],
65+
},
4966
{
5067
title: t(pageTranslations.quickLaunch.stake.title, {
5168
amount: formatValue(maxStakingApr, 2),
@@ -130,19 +147,59 @@ export const QuickLaunch: FC = () => {
130147
}, [options, chainId]);
131148

132149
return (
133-
<div className="bg-gray-80 rounded min-h-72 md:p-6 p-4 sm:mb-14 mb-10 grid md:grid-cols-2 xl:grid-cols-4 md:gap-6 gap-4">
134-
{filteredOptions.map((option, index) => (
135-
<CTA
136-
key={index}
137-
index={index}
138-
backgroundImage={option.backgroundImage}
139-
title={option.title}
140-
description={option.description}
141-
action={option.action}
142-
navigateTo={option.url}
143-
disableCTA={option.disable}
144-
/>
145-
))}
150+
<div className="bg-gray-80 rounded min-h-72 md:p-6 p-4 md:px-3 md:pb-16 sm:mb-14 mb-10 relative w-full">
151+
<Carousel
152+
arrows={false}
153+
draggable
154+
partialVisible={false}
155+
focusOnSelect={false}
156+
responsive={{
157+
superLargeDesktop: {
158+
breakpoint: { max: 4000, min: 3000 },
159+
items: 4,
160+
slidesToSlide: 4,
161+
},
162+
desktop: {
163+
breakpoint: { max: 3000, min: 1280 },
164+
items: 4,
165+
slidesToSlide: 4,
166+
},
167+
tablet: {
168+
breakpoint: { max: 1280, min: 768 },
169+
items: 3,
170+
slidesToSlide: 3,
171+
},
172+
mobile: {
173+
breakpoint: { max: 768, min: 0 },
174+
items: 1,
175+
slidesToSlide: 1,
176+
},
177+
}}
178+
minimumTouchDrag={80}
179+
swipeable
180+
className="static"
181+
renderDotsOutside
182+
showDots
183+
itemClass="px-3"
184+
autoPlay={false}
185+
dotListClass={styles.dot}
186+
autoPlaySpeed={15000}
187+
infinite={false}
188+
>
189+
{filteredOptions.map((option, index) => (
190+
<CTA
191+
key={index}
192+
index={index}
193+
backgroundImage={option.backgroundImage}
194+
title={option.title}
195+
description={option.description}
196+
action={option.action}
197+
href={option.href}
198+
navigateTo={option.url}
199+
disableCTA={option.disable}
200+
/>
201+
))}
202+
</Carousel>
146203
</div>
147204
);
148205
};

‎apps/frontend/src/assets/images/QuickLaunch/Origins Launch.svg‎

Lines changed: 48 additions & 0 deletions
Loading

‎apps/frontend/src/constants/links.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -68,3 +68,9 @@ export const SEPOLIA_FAUCET_LINK = 'https://sepolia-faucet.pk910.de';
6868
export const BOB_DOCS_LINK = 'https://docs.gobob.xyz/';
6969

7070
export const ROOTSTOCK_LINK = 'https://rootstock.io/';
71+
72+
export const LAUNCHPAD_LINKS = {
73+
ORIGINS: 'https://origins.sovryn.app',
74+
LEARN_MORE:
75+
'https://sovryn.com/all-things-sovryn/stake-sov-get-origins-bonus',
76+
};

‎apps/frontend/src/locales/en/translations.json‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -537,6 +537,11 @@
537537
"title": "Soon on BOB",
538538
"description": "Lending, Borrowing, Bitocracy voting & more.",
539539
"action": "Coming soon"
540+
},
541+
"originsLaunchpad": {
542+
"title": "Join $BOS Presale – Phase 2 Live",
543+
"description": "Deposit from any chain. Get bonuses for $SOV staking. BTC and ADA deposits.",
544+
"action": "Join Presale"
540545
}
541546
},
542547
"promotions": {
@@ -570,6 +575,12 @@
570575
"title": "Launching BOS!",
571576
"description": "Sovryn to lead BitcoinOS launch & retain 10% of $BOS. $SOV stakers decide allocation.",
572577
"cta": "Stake SOV"
578+
},
579+
"originsLaunch": {
580+
"title": "Origins is live!",
581+
"description": "Join the $BOS Phase 2 presale on Sovryn’s multichain launchpad. $SOV stakers earn bonuses!",
582+
"cta": "Join Presale",
583+
"secondaryCta": "Learn more"
573584
}
574585
},
575586
"titleSection": {

0 commit comments

Comments
 (0)