feat: continue

bob-collective · Jun 21, 2024 · 635547d · 635547d
1 parent 4bf1f7f
commit 635547d
Show file tree

Hide file tree

Showing 6 changed files with 354 additions and 24 deletions.
diff --git a/apps/next/public/cubs-group.svg b/apps/next/public/cubs-group.svg
diff --git a/apps/next/public/ecosystem-banner.png b/apps/next/public/ecosystem-banner.png
diff --git a/apps/next/src/app/bridge/components/BannerCarousel/BannerCarousel.style.tsx b/apps/next/src/app/bridge/components/BannerCarousel/BannerCarousel.style.tsx
@@ -1,14 +1,11 @@
 import { Card, Flex } from '@gobob/ui';
 import Slider from 'react-slick';
 import styled, { css } from 'styled-components';
+import Image from 'next/image';
 
 import { Banner } from './Banner';
 import { OnrampGraphic } from './OnrampGraphic';
 
-function getImageUrl(name: string) {
-  return new URL(`../../../../assets/${name}`, import.meta.url).href;
-}
-
 const StyledCarouselWrapper = styled(Card)`
   position: relative;
   text-decoration: none;
@@ -19,19 +16,18 @@ const StyledBannerContent = styled(Flex)`
   z-index: 1;
 `;
 
-const StyledBannerImg = styled.img`
+const StyledBannerImg = styled(Image)`
   position: absolute;
   right: 0;
   top: 0;
-  height: 100%;
   opacity: 0.5;
 
   ${({ theme }) => {
     return css`
-      transform: scale(4);
+      transform: scale(0.9) translate(50%, -50%);
 
       @media ${theme.breakpoints.up('s')} {
-        transform: scale(6) translateX(-15%);
+        transform: translate(30%, -50%);
       }
     `;
   }}
@@ -87,7 +83,8 @@ const StyledSlider = styled(Slider)`
 `;
 
 const StyledOnrampBanner = styled(Banner)`
-  /* background-repeat: no-repeat;
+  background-image: url('/cubs-group.svg');
+  background-repeat: no-repeat;
   background-size: cover;
 
   ${({ theme }) => {
@@ -98,7 +95,7 @@ const StyledOnrampBanner = styled(Banner)`
         background-position: 0% 50%;
       }
     `;
-  }} */
+  }}
 `;
 
 const StyledOnrampGraphic = styled(OnrampGraphic)`

diff --git a/apps/next/src/app/bridge/components/BannerCarousel/BannerCarousel.tsx b/apps/next/src/app/bridge/components/BannerCarousel/BannerCarousel.tsx
@@ -11,9 +11,9 @@ import { OnrampBanner } from './OnrampBanner';
 const settings: Settings = {
   dots: true,
   infinite: true,
-  autoplay: true,
+  // autoplay: true,
   speed: 500,
-  autoplaySpeed: 10000,
+  // autoplaySpeed: 10000,
   cssEase: 'linear',
   slidesToShow: 1,
   slidesToScroll: 1,

diff --git a/apps/next/src/app/bridge/components/BannerCarousel/EcosystemBanner.tsx b/apps/next/src/app/bridge/components/BannerCarousel/EcosystemBanner.tsx
@@ -1,7 +1,5 @@
 import { Flex, H1, P } from '@gobob/ui';
 
-import bannerSrc from '../../../../assets/ecosystem-banner.png';
-
 import { StyledBannerImg } from './BannerCarousel.style';
 import { Banner } from './Banner';
 
@@ -17,7 +15,13 @@ const EcosystemBanner = ({ onPress }: EcosystemBannerProps) => (
       </H1>
     </Flex>
     <P color='grey-200'>Discover the most exciting projects on BOB.</P>
-    <StyledBannerImg alt='BOB ecosystem banner' src={bannerSrc} />
+    <StyledBannerImg
+      height={800}
+      src='/ecosystem-banner.png'
+      alt='BOB ecosystem banner'
+      // sizes='(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw'
+      width={800}
+    />
   </Banner>
 );
 

diff --git a/apps/next/src/app/bridge/components/BannerCarousel/OnrampBanner.tsx b/apps/next/src/app/bridge/components/BannerCarousel/OnrampBanner.tsx
@@ -1,7 +1,4 @@
 import { Flex, H1, P } from '@gobob/ui';
-import Image from 'next/image';
-
-// import img from '../../../../assets/cubs-group.png';
 
 import { StyledBannerContent, StyledOnrampBanner, StyledOnrampGraphic } from './BannerCarousel.style';
 
@@ -20,12 +17,6 @@ const OnrampBanner = ({ onPress }: OnrampBannerProps) => (
       <P color='grey-200'>The fastest and easiest way to bridge BTC to BOB</P>
     </StyledBannerContent>
     <StyledOnrampGraphic />
-    <Image
-      fill
-      alt='Picture of the author'
-      sizes='(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw'
-      src='/assets/cubs-group.png'
-    />
   </StyledOnrampBanner>
 );