add rewards homepage banner

blockworks-foundation · Nov 28, 2023 · ee4eef3 · ee4eef3
1 parent 2d13fa0
commit ee4eef3
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 2 deletions.
diff --git a/components/home/HomePage.tsx b/components/home/HomePage.tsx
@@ -24,6 +24,8 @@ import useMarketsData from '../../hooks/useMarketData'
 import { useQuery } from '@tanstack/react-query'
 import { MANGO_DATA_API_URL } from '../../utils/constants'
 import Loading from '../shared/Loading'
+import Image from 'next/image'
+import Link from 'next/link'
 
 gsap.registerPlugin(MotionPathPlugin)
 gsap.registerPlugin(ScrollTrigger)
@@ -244,7 +246,48 @@ const HomePage = () => {
 
   return (
     <>
-      <SectionWrapper className="overflow-hidden h-[760px] lg:h-auto">
+      <SectionWrapper noPaddingY>
+        <div className="border border-gray-700 px-6 py-4 rounded-xl max-w-4xl mx-auto relative overflow-hidden">
+          <div className="relative z-10">
+            <div className="flex items-center space-x-6">
+              <Image
+                src="/images/mango-mints/chest.png"
+                height={72}
+                width={72}
+                alt="Chest"
+              />
+              <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between w-full">
+                <div className="pr-4">
+                  <h3 className="font-rewards text-3xl -mb-1">
+                    Trade. Win. Repeat.
+                  </h3>
+                  <p className="text-white">
+                    Rewards are go! Win amazing prizes every week for trading on
+                    Mango.
+                  </p>
+                </div>
+                <Link
+                  className="text-yellow-300 font-bold font-display text-base border border-yellow-300 rounded-lg px-4 py-2 md:hover:border-yellow-500 md:hover:text-yellow-500 text-center mt-4 sm:mt-0"
+                  href="/rewards"
+                  shallow
+                >
+                  <span className="whitespace-nowrap">Find out more</span>
+                </Link>
+              </div>
+            </div>
+          </div>
+          <ColorBlur
+            blendMode="lighten"
+            className="top-1/2 left-0 opacity-60 bg-purple-600"
+            height="200px"
+            width="500px"
+          />
+        </div>
+      </SectionWrapper>
+      <SectionWrapper
+        className="overflow-hidden h-[760px] lg:h-auto py-12 md:py-24 md:pt-20 lg:pb-32"
+        noPaddingY
+      >
         <div className="grid grid-cols-12" ref={topSection}>
           <div className="col-span-12 lg:col-span-5 mb-12 lg:mb-0 relative z-10">
             <h1 className="mb-6 text-center lg:text-left">

diff --git a/components/shared/ColorBlur.tsx b/components/shared/ColorBlur.tsx
@@ -1,18 +1,22 @@
 import { useTheme } from 'next-themes'
 
 const ColorBlur = ({
+  blendMode,
   className,
   height,
   width,
 }: {
+  blendMode?: string
   className?: string
   height: string
   width: string
 }) => {
   const { theme } = useTheme()
   return theme !== 'Light' ? (
     <div
-      className={`absolute bg-th-fgd-1 mix-blend-overlay rounded-full filter blur-3xl ${className}`}
+      className={`absolute ${
+        blendMode ? `mix-blend-${blendMode}` : 'mix-blend-overlay'
+      } rounded-full filter blur-3xl ${className}`}
       style={{ height: height, width: width }}
     />
   ) : null