noobify welcome demo, still need to add new field so this doesn't appear everytime

web/components/button.tsx

@@ -39,8 +39,10 @@ export function Button(props: {
         color === 'yellow' && 'bg-yellow-400 text-white hover:bg-yellow-500',
         color === 'blue' && 'bg-blue-400 text-white hover:bg-blue-500',
         color === 'indigo' && 'bg-indigo-500 text-white hover:bg-indigo-600',
-        color === 'gray' && 'bg-gray-100 text-gray-600 hover:bg-gray-200',
-        color === 'gray-white' && 'bg-white text-gray-500 hover:bg-gray-200',
+        color === 'gray' &&
+          'bg-greyscale-1 text-greyscale-7 hover:bg-greyscale-2',
+        color === 'gray-white' &&
+          'text-greyscale-6 hover:bg-greyscale-2 bg-white',
         className
       )}
       disabled={disabled}

web/components/buttons/pill-button.tsx

@@ -15,8 +15,8 @@ export function PillButton(props: {
       className={clsx(
         'cursor-pointer select-none whitespace-nowrap rounded-full',
         selected
-          ? ['text-white', color ?? 'bg-gray-700']
-          : 'bg-gray-100 hover:bg-gray-200',
+          ? ['text-white', color ?? 'bg-greyscale-6']
+          : 'bg-greyscale-2 hover:bg-greyscale-3',
         big ? 'px-8 py-2' : 'px-3 py-1.5 text-sm'
       )}
       onClick={onSelect}

web/components/title.tsx

@@ -5,7 +5,7 @@ export function Title(props: { text: string; className?: string }) {
   return (
     <h1
       className={clsx(
-        'my-4 inline-block text-2xl text-indigo-700 sm:my-6 sm:text-3xl',
+        'my-4 inline-block text-2xl font-normal text-indigo-700 sm:my-6 sm:text-3xl',
         className
       )}
     >

web/pages/_app.tsx

@@ -6,6 +6,8 @@ import Script from 'next/script'
 import { usePreserveScroll } from 'web/hooks/use-preserve-scroll'
 import { QueryClient, QueryClientProvider } from 'react-query'
 import { AuthProvider } from 'web/components/auth-context'
+import { useUser } from 'web/hooks/use-user'
+import Welcome from 'web/components/onboarding/welcome'
 
 function firstLine(msg: string) {
   return msg.replace(/\r?\n.*/s, '')
@@ -78,9 +80,9 @@ function MyApp({ Component, pageProps }: AppProps) {
           content="width=device-width, initial-scale=1, maximum-scale=1"
         />
       </Head>
-
       <AuthProvider>
         <QueryClientProvider client={queryClient}>
+          <Welcome {...pageProps}/>
           <Component {...pageProps} />
         </QueryClientProvider>
       </AuthProvider>

web/pages/group/[...slugs]/index.tsx

@@ -51,6 +51,7 @@ import { ENV_CONFIG } from 'common/envs/constants'
 import { useSaveReferral } from 'web/hooks/use-save-referral'
 import { Button } from 'web/components/button'
 
+const manifundGroupNames = ['Cause Exploration Prize']
 export const getStaticProps = fromPropz(getStaticPropz)
 export async function getStaticPropz(props: { params: { slugs: string[] } }) {
   const { slugs } = props.params
@@ -242,48 +243,114 @@ export default function GroupPage(props: {
       href: groupPath(group.slug, 'about'),
     },
   ]
+
+  const manifundTabs = [
+    {
+      title: 'Chat',
+      content: chatTab,
+      href: groupPath(group.slug, GROUP_CHAT_SLUG),
+    },
+    {
+      title: 'Markets',
+      content: questionsTab,
+      href: groupPath(group.slug, 'markets'),
+    },
+    {
+      title: 'Leaderboards',
+      content: leaderboard,
+      href: groupPath(group.slug, 'leaderboards'),
+    },
+    {
+      title: 'About',
+      content: aboutTab,
+      href: groupPath(group.slug, 'about'),
+    },
+  ]
   const tabIndex = tabs.map((t) => t.title).indexOf(page ?? GROUP_CHAT_SLUG)
 
-  return (
-    <Page
-      rightSidebar={showChatSidebar ? chatTab : undefined}
-      rightSidebarClassName={showChatSidebar ? '!top-0' : ''}
-      className={showChatSidebar ? '!max-w-7xl !pb-0' : ''}
-    >
-      <SEO
-        title={group.name}
-        description={`Created by ${creator.name}. ${group.about}`}
-        url={groupPath(group.slug)}
-      />
-      <Col className="px-3">
-        <Row className={'items-center justify-between gap-4'}>
-          <div className={'sm:mb-1'}>
-            <div
-              className={'line-clamp-1 my-2 text-2xl text-indigo-700 sm:my-3'}
-            >
-              {group.name}
+  if (manifundGroupNames.includes(group.name)) {
+    return (
+      <Page
+        rightSidebar={showChatSidebar ? chatTab : undefined}
+        rightSidebarClassName={showChatSidebar ? '!top-0' : ''}
+        className={showChatSidebar ? '!max-w-7xl !pb-0' : ''}
+      >
+        <SEO
+          title={group.name}
+          description={`Created by ${creator.name}. ${group.about}`}
+          url={groupPath(group.slug)}
+        />
+        <Col className="px-3">
+          <Row className={'items-center justify-between gap-4'}>
+            <div className={'sm:mb-1'}>
+              <div
+                className={'line-clamp-1 my-2 text-2xl text-indigo-700 sm:my-3'}
+              >
+                {group.name}
+              </div>
+              <div className={'hidden sm:block'}>
+                <Linkify text={group.about} />
+              </div>
             </div>
-            <div className={'hidden sm:block'}>
-              <Linkify text={group.about} />
+            <div className="mt-2">
+              <JoinOrAddQuestionsButtons
+                group={group}
+                user={user}
+                isMember={!!isMember}
+              />
             </div>
-          </div>
-          <div className="mt-2">
-            <JoinOrAddQuestionsButtons
-              group={group}
-              user={user}
-              isMember={!!isMember}
-            />
-          </div>
-        </Row>
-      </Col>
-      <Tabs
-        currentPageForAnalytics={groupPath(group.slug)}
-        className={'mb-0 sm:mb-2'}
-        defaultIndex={tabIndex > 0 ? tabIndex : 0}
-        tabs={tabs}
-      />
-    </Page>
-  )
+          </Row>
+        </Col>
+        <Tabs
+          currentPageForAnalytics={groupPath(group.slug)}
+          className={'mb-0 sm:mb-2'}
+          defaultIndex={tabIndex > 0 ? tabIndex : 0}
+          tabs={tabs}
+        />
+      </Page>
+    )
+  } else {
+    return (
+      <Page
+        rightSidebar={showChatSidebar ? chatTab : undefined}
+        rightSidebarClassName={showChatSidebar ? '!top-0' : ''}
+        className={showChatSidebar ? '!max-w-7xl !pb-0' : ''}
+      >
+        <SEO
+          title={group.name}
+          description={`Created by ${creator.name}. ${group.about}`}
+          url={groupPath(group.slug)}
+        />
+        <Col className="px-3">
+          <Row className={'items-center justify-between gap-4'}>
+            <div className={'sm:mb-1'}>
+              <div
+                className={'line-clamp-1 my-2 text-2xl text-indigo-700 sm:my-3'}
+              >
+                {group.name}
+              </div>
+              <div className={'hidden sm:block'}>
+                <Linkify text={group.about} />
+              </div>
+            </div>
+            <div className="mt-2">
+              <JoinOrAddQuestionsButtons
+                group={group}
+                user={user}
+                isMember={!!isMember}
+              />
+            </div>
+          </Row>
+        </Col>
+        <Tabs
+          currentPageForAnalytics={groupPath(group.slug)}
+          className={'mb-0 sm:mb-2'}
+          defaultIndex={tabIndex > 0 ? tabIndex : 0}
+          tabs={tabs}
+        />
+      </Page>
+    )
+  }
 }
 
 function JoinOrAddQuestionsButtons(props: {

web/tailwind.config.js

@@ -18,6 +18,19 @@ module.exports = {
       backgroundImage: {
         'world-trading': "url('/world-trading-background.webp')",
       },
+      colors: {
+        // primary: '#4338CA',
+        // 'primary-dark': '#1F1F6D',
+        // secondary: '#E97176',
+        // 'secondary-dark': '#6060C6',
+        'greyscale-1': '#FBFBFF',
+        'greyscale-2': '#E7E7F4',
+        'greyscale-3': '#D8D8EB',
+        'greyscale-4': '#B1B1C7',
+        'greyscale-5': '#9191A7',
+        'greyscale-6': '#66667C',
+        'greyscale-7': '#111140',
+      },
       typography: {
         quoteless: {
           css: {