sweeps-explainer

web/components/cashout/select-cashout-options.tsx

@@ -141,7 +141,7 @@ export function SelectCashoutOptions(props: {
       <Col className="bg-canvas-50 w-full gap-4 rounded-lg p-4 pb-1">
         <Row className=" gap-4">
           <img
-            alt="donate"
+            alt="cashout"
             src="/images/cash-icon.png"
             height={80}
             width={80}

web/components/sweeps-explainer.tsx

@@ -0,0 +1,61 @@
+import clsx from 'clsx'
+import { MARKET_VISIT_BONUS_TOTAL, STARTING_BALANCE } from 'common/economy'
+import { SWEEPIES_NAME, TRADE_TERM, TRADING_TERM } from 'common/envs/constants'
+import { formatMoney } from 'common/util/format'
+import { Button } from 'web/components/buttons/button'
+import { useIsMobile } from 'web/hooks/use-is-mobile'
+import { firebaseLogin } from 'web/lib/firebase/users'
+import SquiggleHorizontal from 'web/lib/icons/squiggle-horizontal.svg'
+import SquiggleVertical from 'web/lib/icons/squiggle-vertical.svg'
+import { withTracking } from 'web/lib/service/analytics'
+import { Row } from './layout/row'
+import { ManaCoin } from 'web/public/custom-components/manaCoin'
+import { SweepiesCoin } from 'web/public/custom-components/sweepiesCoin'
+
+export function SweepsExplainer() {
+  const isMobile = useIsMobile()
+
+  return (
+    <>
+      <div
+        className={clsx(
+          'flex h-60 w-full flex-col overflow-hidden text-lg drop-shadow-sm sm:mt-4 sm:h-48 sm:flex-row '
+        )}
+      >
+        <div
+          className={clsx(
+            'relative z-30 h-[40%] w-full rounded-t-xl bg-indigo-200 p-4 sm:h-full sm:w-[50%] sm:rounded-l-xl sm:rounded-r-none sm:p-8 '
+          )}
+        >
+          <Row className="h-full w-full items-center gap-4 pt-6 font-semibold text-indigo-700 sm:pt-0">
+            <ManaCoin className="text-7xl md:text-8xl" />
+            <span className="mb-2 sm:mb-0">
+              Compete with your friends by {TRADING_TERM} with play money
+            </span>
+          </Row>
+        </div>
+        <div className="relative h-[60%] w-full rounded-b-xl bg-indigo-700 p-4 align-bottom sm:h-full sm:w-[50%] sm:rounded-l-none sm:rounded-r-xl sm:p-8 sm:pl-16">
+          {!isMobile && (
+            <div className="absolute -left-0.5 bottom-0 z-20 h-full">
+              <SquiggleVertical className={clsx('h-full text-indigo-200')} />
+            </div>
+          )}
+          {isMobile && (
+            <div className="absolute -top-0.5 right-0 z-10 w-full items-center">
+              <SquiggleHorizontal
+                className={clsx('h-12 w-full object-fill text-indigo-200')}
+                preserveAspectRatio="none"
+              />
+            </div>
+          )}
+          <Row className=" h-full w-full items-end gap-4 font-semibold text-white sm:items-center">
+            <span className="mb-2 sm:mb-0 sm:text-right">
+              Or {TRADE_TERM} with {SWEEPIES_NAME} and win real prizes!
+            </span>
+            <SweepiesCoin className="text-7xl md:text-8xl" />
+          </Row>
+        </div>
+      </div>
+    </>
+  )
+}

web/pages/index.tsx

@@ -1,38 +1,44 @@
-import { useState } from 'react'
-import Link from 'next/link'
 import clsx from 'clsx'
+import Link from 'next/link'
+import { useState } from 'react'
 
-import { Page } from 'web/components/layout/page'
-import { Col } from 'web/components/layout/col'
-import { useSaveReferral } from 'web/hooks/use-save-referral'
-import { Row } from 'web/components/layout/row'
-import { TestimonialsPanel } from 'web/components/testimonials-panel'
-import { firebaseLogin } from 'web/lib/firebase/users'
-import { Button } from 'web/components/buttons/button'
-import { redirectIfLoggedIn } from 'web/lib/firebase/server-auth'
-import { Footer } from 'web/components/footer'
-import { useRedirectIfSignedIn } from 'web/hooks/use-redirect-if-signed-in'
-import { ManifoldLogo } from 'web/components/nav/manifold-logo'
-import { LogoSEO } from 'web/components/LogoSEO'
-import { MobileAppsQRCodeDialog } from 'web/components/buttons/mobile-apps-qr-code-button'
-import { useSaveCampaign } from 'web/hooks/use-save-campaign'
-import { FeedContractCard } from 'web/components/contract/feed-contract-card'
 import { Contract } from 'common/contract'
-import { db } from 'web/lib/supabase/db'
-import { HIDE_FROM_NEW_USER_SLUGS, TRADE_TERM } from 'common/envs/constants'
-import { useUser } from 'web/hooks/use-user'
-import { some } from 'd3-array'
-import { PillButton } from 'web/components/buttons/pill-button'
-import { Carousel } from 'web/components/widgets/carousel'
-import { removeEmojis } from 'common/util/string'
-import { filterDefined } from 'common/util/array'
-import { useGoogleAnalytics } from 'web/hooks/use-google-analytics'
+import {
+  HIDE_FROM_NEW_USER_SLUGS,
+  TRADE_TERM,
+  TRADING_TERM,
+  TWOMBA_ENABLED,
+} from 'common/envs/constants'
 import {
   contractFields,
   convertContract,
   getContract,
 } from 'common/supabase/contracts'
+import { filterDefined } from 'common/util/array'
+import { removeEmojis } from 'common/util/string'
+import { some } from 'd3-array'
 import { capitalize } from 'lodash'
+import { LogoSEO } from 'web/components/LogoSEO'
+import { Button } from 'web/components/buttons/button'
+import { MobileAppsQRCodeDialog } from 'web/components/buttons/mobile-apps-qr-code-button'
+import { PillButton } from 'web/components/buttons/pill-button'
+import { FeedContractCard } from 'web/components/contract/feed-contract-card'
+import { Footer } from 'web/components/footer'
+import { Col } from 'web/components/layout/col'
+import { Page } from 'web/components/layout/page'
+import { Row } from 'web/components/layout/row'
+import { ManifoldLogo } from 'web/components/nav/manifold-logo'
+import { SweepsExplainer } from 'web/components/sweeps-explainer'
+import { TestimonialsPanel } from 'web/components/testimonials-panel'
+import { Carousel } from 'web/components/widgets/carousel'
+import { useGoogleAnalytics } from 'web/hooks/use-google-analytics'
+import { useRedirectIfSignedIn } from 'web/hooks/use-redirect-if-signed-in'
+import { useSaveCampaign } from 'web/hooks/use-save-campaign'
+import { useSaveReferral } from 'web/hooks/use-save-referral'
+import { useUser } from 'web/hooks/use-user'
+import { redirectIfLoggedIn } from 'web/lib/firebase/server-auth'
+import { firebaseLogin } from 'web/lib/firebase/users'
+import { db } from 'web/lib/supabase/db'
 import { AboutManifold } from 'web/components/about-manifold'
 
 export const getServerSideProps = redirectIfLoggedIn('/home', async (_) => {
@@ -205,6 +211,7 @@ export default function LandingPage(props: {
             </Col>
           </Row>
         </Col>
+        {TWOMBA_ENABLED && <SweepsExplainer />}
         <Col>
           <Row className={'mb-3 mt-2 text-xl'}>🔥 Trending Topics</Row>
           <Carousel labelsParentClassName={'gap-2'} className="mx-1">