working on a white button for alternate CTAs

components/ButtonWhite.tsx

@@ -0,0 +1,69 @@
+import { FunctionComponent } from 'react'
+import styled from '@emotion/styled'
+import tw from 'twin.macro'
+
+export const idleGradient =
+  'bg-gradient-to-tr from-white via-white to-mango-yellow'
+export const activeGradient =
+  'bg-gradient-to-br from-mango-orange via-mango-green to-mango-green'
+
+const StyledButton = styled.button<ButtonProps>`
+  :before {
+    ${tw`absolute left-0 top-0 opacity-0 h-full w-full block transition-opacity duration-500`}
+    ${({ gray }) => (gray ? tw`bg-bkg-3` : tw`${activeGradient}`)}
+    border-radius: inherit;
+    content: '';
+    z-index: -10;
+  }
+
+  :hover {
+    :before {
+      ${tw`opacity-100`}
+    }
+  }
+
+  :focus {
+    ${tw`ring-2 ring-mango-yellow ring-opacity-40 outline-none`}
+  }
+
+  :active {
+    :before {
+      ${tw`ring-2 ring-mango-yellow ring-opacity-40`}
+    }
+  }
+
+  :disabled {
+    ${tw`cursor-not-allowed opacity-60`}
+    :before {
+      ${tw`hidden`}
+    }
+  }
+`
+
+interface ButtonProps {
+  className?: string
+  gray?: boolean
+  onClick?: () => void
+  disabled?: boolean
+}
+
+const Button: FunctionComponent<ButtonProps> = ({
+  children,
+  className,
+  gray,
+  ...props
+}) => {
+  return (
+    <StyledButton
+      className={`${className} relative z-10 px-6 py-2 rounded-full text-gray-800 hover:text-white font-bold  ${
+        gray ? 'bg-bkg-4' : idleGradient
+      }`}
+      gray={gray}
+      {...props}
+    >
+      {children}
+    </StyledButton>
+  )
+}
+
+export default Button

pages/lending.tsx

@@ -0,0 +1,27 @@
+//import NavBarBeta from '../components/NavBarBeta'
+//import HeroSectionMarkets from '../components/HeroSectionMarkets'
+//import FeatureSection from '../components/FeatureSection'
+//import FooterSection from '../components/FooterSection'
+import ButtonWhite from '../components/ButtonWhite'
+
+const Markets = () => {
+  return (
+    <div className={`bg-th-bkg-1 text-th-fgd-1 transition-all overflow-hidden h-screen flex`}>
+      {/* 
+      <div className="w-screen h-2 bg-gradient-to-r from-mango-red via-mango-yellow to-mango-green"></div>
+      <NavBarBeta />
+      <HeroSectionMarkets />
+      <FeatureSection />
+      <FooterSection />
+      <div className="w-screen h-2 bg-gradient-to-r from-mango-red via-mango-yellow to-mango-green"></div>
+
+      */}
+      <div className="mx-auto relative top-96">
+      <ButtonWhite>This is a CTA</ButtonWhite>
+
+      </div>
+    </div>
+  )
+}
+
+export default Markets