From ee4eef324e387bd6bd78b04661cf840bf3629d07 Mon Sep 17 00:00:00 2001
From: saml33 <slam.uke@gmail.com>
Date: Tue, 28 Nov 2023 11:29:58 +1100
Subject: [PATCH] add rewards homepage banner

---
 components/home/HomePage.tsx    | 45 ++++++++++++++++++++++++++++++++-
 components/shared/ColorBlur.tsx |  6 ++++-
 2 files changed, 49 insertions(+), 2 deletions(-)

diff --git a/components/home/HomePage.tsx b/components/home/HomePage.tsx
index 747612fa..7123521c 100644
--- 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
index efc3a475..a3f9841d 100644
--- a/components/shared/ColorBlur.tsx
+++ b/components/shared/ColorBlur.tsx
@@ -1,10 +1,12 @@
 import { useTheme } from 'next-themes'
 
 const ColorBlur = ({
+  blendMode,
   className,
   height,
   width,
 }: {
+  blendMode?: string
   className?: string
   height: string
   width: string
@@ -12,7 +14,9 @@ const ColorBlur = ({
   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