feat: homepage fixes (#1109)

Co-authored-by: Maksymilian Kozak <[email protected]>
bosonprotocol · Oct 28, 2024 · 45ae535 · 45ae535
1 parent 1edebce
commit 45ae535
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 7 deletions.
diff --git a/src/components/modal/components/Explore/Collections/CollectionsCard.tsx b/src/components/modal/components/Explore/Collections/CollectionsCard.tsx
@@ -242,7 +242,11 @@ export default function CollectionsCard({ collection, lensProfile }: Props) {
           )}
           <div>
             <NameContainer>
-              <Typography color={colors.black} fontSize="1rem" fontWeight="600">
+              <Typography
+                color={colors.black}
+                fontSize="0.875rem"
+                fontWeight="600"
+              >
                 {name}
               </Typography>
             </NameContainer>

diff --git a/src/pages/landing/FeaturedOffers.tsx b/src/pages/landing/FeaturedOffers.tsx
@@ -22,8 +22,6 @@ const Root = styled.div`
 `;
 
 const Title = styled(Typography)`
-  font-size: 2rem;
-  font-weight: 600;
   line-height: 1.2;
 `;
 
@@ -34,9 +32,7 @@ export const ViewMore = styled(LinkWithQuery)`
   align-items: center;
   cursor: pointer;
   margin-left: 1.5rem;
-  font-size: 0.875rem;
-  font-weight: 600;
-  margin-bottom: 0.0625rem;
+  line-height: 1.3125rem;
   ${() => buttonText};
   color: var(--accent);
 
@@ -51,6 +47,8 @@ export const ViewMore = styled(LinkWithQuery)`
       transform: translateX(5px);
     }
   }
+  font-size: 0.875rem;
+  font-weight: 600;
 `;
 
 interface IFeaturedOffers {

diff --git a/src/pages/landing/Landing.tsx b/src/pages/landing/Landing.tsx
@@ -55,7 +55,6 @@ const StyledGridWithZindex = styled(GridWithZindex)`
 `;
 
 const Title = styled(Typography)`
-  font-size: 2rem;
   font-weight: 600;
   line-height: 1.2;
 `;
@@ -89,6 +88,37 @@ const LandingContainer = styled.div`
   border-radius: 0.5rem;
   background-color: ${colors.white};
   margin-bottom: 3.813rem;
+  position: relative;
+  transform-style: preserve-3d;
+
+  &:before {
+    content: "";
+    position: absolute;
+    inset: 0px;
+    background: linear-gradient(
+        135deg,
+        rgba(255, 140, 0, 0.1) 0%,
+        rgba(128, 0, 128, 0.1) 50%,
+        rgba(75, 0, 130, 0.1) 100%
+      ),
+      radial-gradient(
+        circle at 20% 100%,
+        rgba(76, 217, 100, 0.15) 0%,
+        transparent 50%
+      ),
+      radial-gradient(circle at 0% 100%, rgba(0, 0, 0, 0.1) 0%, transparent 40%),
+      radial-gradient(circle at 90% 90%, rgba(0, 0, 0, 0.1) 0%, transparent 40%),
+      radial-gradient(
+        circle at 100% 25%,
+        rgba(0, 0, 0, 0.1) 0%,
+        transparent 40%
+      );
+    filter: blur(20px);
+    transform: translate3d(28px, 34px, -1px);
+    border-radius: inherit;
+    pointer-events: none;
+    opacity: 0.2;
+  }
 `;
 
 const AnimatedGridContainer = styled.div`