Merge branch 'main' of https://github.com/Official-MoonDao/MoonDAO-ap…

…p-expansion

.github/workflows/ci.yml

@@ -25,7 +25,7 @@ jobs:
       NEXT_PUBLIC_SWEEPSTAKES_OWNER: "0x0724d0eb7b6d32AEDE6F9e492a5B1436b537262b"
       NEXT_PUBLIC_THIRDWEB_CLIENT_ID: ${{ secrets.NEXT_PUBLIC_THIRDWEB_CLIENT_ID }}
       NEXT_PUBLIC_THIRDWEB_SECRET_KEY: ${{ secrets.NEXT_PUBLIC_THIRDWEB_SECRET_KEY }}
-      NEXT_PUBLIC_PRIVY_CLIENT_ID: ${{secrets.NEXT_PUBLIC_PRIVY_CLIENT_ID}}
+      NEXT_PUBLIC_PRIVY_APP_ID: ${{secrets.NEXT_PUBLIC_PRIVY_APP_ID}}
 
     steps:
       - name: Checkout

ui/components/layout/Sidebar/Navigation.ts

@@ -13,7 +13,7 @@ import {
 
 export const navigation = [
   {
-    name: 'home',
+    name: 'Welcome',
     href: '/',
     icon: HomeIcon,
   },
@@ -41,7 +41,6 @@ export const navigation = [
     name: 'Links',
     icon: FolderIcon,
     children: [
-      { name: 'Homepage', href: 'https://moondao.com/' },
       { name: 'Snapshot', href: 'https://snapshot.org/#/tomoondao.eth' },
       { name: 'Documentation', href: 'https://moondao.com/docs/introduction' },
       { name: 'Newsletter', href: 'https://moondao.ck.page/profile' },

ui/components/onboarding/OnboardingStageManager.tsx

@@ -79,7 +79,7 @@ export function OnboardingStageManager({ selectedChain }: any) {
 
   useEffect(() => {
     if (selectedLevel.price > 0) {
-      setStage(2)
+      setStage(1)
     }
 
     if (selectedLevel.price != 0) {
@@ -115,7 +115,7 @@ export function OnboardingStageManager({ selectedChain }: any) {
   }, [selectedLevel.price, totalLocked, totalMooneyBalance, selectedChain])
 
   useEffect(() => {
-    if (stage > 1) {
+    if (stage > 0) {
       setStage(0)
     }
   }, [address])
@@ -192,38 +192,6 @@ export function OnboardingStageManager({ selectedChain }: any) {
       </>
     )
   }
-
-  const StepZero = () => (
-    <StageContainer>
-      <div className="flex flex-col items-center lg:items-start px-4 lg:px-7 xl:px-9 lg:max-w-[1080px]">
-        <h2 className="text-[#071732] dark:text-white font-GoodTimes text-4xl sm:text-5xl lg:text-4xl xl:text-5xl text-center lg:text-left">
-          Welcome to MoonDAO
-        </h2>
-        <p className="mt-5 lg:mt-4 xl:mt-6 text-sm sm:text-base lg:text-sm xl:text-base sm:mt-6 max-w-[698px] text-center lg:text-left text-gray-600 dark:text-white dark:opacity-60">{`MoonDAO is accelerating humanity’s multiplanetary future through better coordination. Want to build this future together? Get started by joining our community, and you’ll be onboarded in less than 5 minutes, even if you’re new to Web3.
-`}</p>
-
-        <iframe
-          src="https://www.youtube.com/embed/Vs_vAtRgaBA"
-          className="mt-10 lg:mt-4 xl:mt-6 w-full xl:w-5/6 aspect-video object-cover"
-        />
-
-        <button
-          onClick={async () => {
-            if (!user) {
-              login()
-              setStage(1)
-            } else {
-              setStage(1)
-            }
-          }}
-          className="mt-8 px-5 py-3 bg-moon-orange text-white hover:scale-105 transition-all duration-150 hover:bg-white hover:text-moon-orange"
-        >
-          Join MoonDAO
-        </button>
-      </div>
-    </StageContainer>
-  )
-
   const StepOne = () => (
     <StageContainer>
       <div className="flex flex-col font-RobotoMono items-center">
@@ -232,18 +200,10 @@ export function OnboardingStageManager({ selectedChain }: any) {
         </h1>
 
         <p className="mt-5 bg-[#CBE4F7] text-[#1F212B] dark:bg-[#D7594F36] dark:text-white  px-2 py-2 xl:py-3 xl:px-4 2xl:max-w-[750px] text-center xl:text-left text-sm xl:text-base">
-          Disclaimer: You must be a member to participate in our space ticket
-          giveaway. Entries into the Ticket To Space Sweepstakes are 20,000
-          $MOONEY each. There is no expectation of profit with $MOONEY, read
-          more about $MOONEY
-          <a
-            className="text-moon-gold"
-            href="https://publish.obsidian.md/moondao/MoonDAO/docs/Governance+Tokens"
-          >
-            {' '}
-            here
-          </a>
-          .
+          Disclaimer: You must be a member to participate in our space ticket giveaway.
+          Entries into the Ticket To Space Sweepstakes are 20,000 $MOONEY each.
+          There is no expectation of profit with $MOONEY, read more about $MOONEY
+          <a className="text-moon-gold" href='https://publish.obsidian.md/moondao/MoonDAO/docs/Governance+Tokens'> here</a>.
         </p>
         <div className="py-4">
           <L2Toggle />
@@ -263,6 +223,17 @@ export function OnboardingStageManager({ selectedChain }: any) {
 
   const StepTwo = () => (
     <StageContainer>
+      <button
+        className="mt-3 py-2 px-4 lg:py-3 lg:px-5 lg:self-start transition-all duration-105 hover:scale-105 inline-flex items-center space-x-3"
+        style={{ marginBottom: '68px' }}
+        onClick={() => {
+          setStage(0)
+          setSelectedLevel({ price: 0, hasVotingPower: false })
+        }}
+      >
+        <input type="image" src="/backIcon.png" />
+        <span>Back</span>
+      </button>
       <div className="flex flex-col items-center lg:items-start px-4 lg:px-7 xl:px-9 lg:max-w-[1080px]">
         <div className="flex w-full justify-between">
           <h1 className="font-GoodTimes text-[#071732] dark:text-white text-4xl sm:text-5xl lg:text-4xl xl:text-5xl text-center lg:text-left">
@@ -354,11 +325,9 @@ export function OnboardingStageManager({ selectedChain }: any) {
       <li>
         <div className="flex cursor-pointer items-center leading-[1.3rem] no-underline focus:outline-none">
           <span
-            className={`my-6 flex h-[40px] w-[40px] items-center justify-center rounded-full ${
-              isActive ? 'bg-[#16a34a]' : 'bg-[#ebedef]'
-            } text-md font-medium ${
-              isActive ? 'text-white' : 'text-[#40464f]'
-            }`}
+            className={`my-6 flex h-[40px] w-[40px] items-center justify-center rounded-full ${isActive ? 'bg-[#16a34a]' : 'bg-[#ebedef]'
+              } text-md font-medium ${isActive ? 'text-white' : 'text-[#40464f]'
+              }`}
           >
             {stepNumber}
           </span>
@@ -368,7 +337,6 @@ export function OnboardingStageManager({ selectedChain }: any) {
   }
 
   const steps = [
-    { component: <StepZero /> },
     { component: <StepOne /> },
     { component: <StepTwo /> },
     { component: <StepThree /> },

ui/components/privy/PrivyConnectWallet.tsx

@@ -1,7 +1,3 @@
-import {
-  ArrowUpTrayIcon,
-  ArrowsPointingOutIcon,
-} from '@heroicons/react/24/outline'
 import { usePrivy, useWallets } from '@privy-io/react-auth'
 import { allChains } from '@thirdweb-dev/chains'
 import { useAddress } from '@thirdweb-dev/react'
@@ -101,7 +97,7 @@ export function PrivyConnectWallet() {
               <div className="pt-1">
                 <LinkAccounts user={user} />
                 <button
-                  className="w-full mt-4 p-1 border border-white text-white hover:scale-105 transition-all duration-150 hover:bg-orange-700"
+                  className="w-full mt-4 p-1 border border-white text-white hover:scale-105 transition-all duration-150 hover:bg-white hover:text-moon-orange"
                   onClick={async () => {
                     wallets.forEach((wallet) => wallet.disconnect())
                     logout()
@@ -116,7 +112,7 @@ export function PrivyConnectWallet() {
       ) : (
         <button
           onClick={login}
-          className="w-[200px] px-5 py-3 bg-moon-orange font-RobotoMono"
+          className="w-[200px] px-5 py-3 bg-moon-orange font-RobotoMono hover:scale-105 transition-all duration-150 hover:bg-white hover:text-moon-orange"
         >
           Connect
         </button>

ui/pages/index.tsx

@@ -10,70 +10,118 @@ import useTranslation from 'next-translate/useTranslation'
 import Link from 'next/link'
 import Head from '../components/layout/Head'
 import { PageCards } from '../components/layout/PageCards'
+import { useRouter } from 'next/router'
+import { LogoSidebarLight, LogoSidebar } from '../components/assets';
+import { useLightMode } from '../lib/utils/hooks/useLightMode'
+
 
 export default function Home() {
   const { t } = useTranslation('common')
-
-  const pages: any = [
-    {
-      name: 'Get $MOONEY',
-      description: 'Join the MoonDAO community by acquiring our governance token $MOONEY on UniSwap.',
-      href: 'https://app.uniswap.org/swap?inputCurrency=ETH&outputCurrency=0x20d4DB1946859E2Adb0e5ACC2eac58047aD41395&chain=mainnet',
-      icon: WalletIcon,
-      externalLink: true,
-    },
-    {
-      name: 'Bridge $MOONEY',
-      description: 'Reduce onchain gas fees by bridging $MOONEY from L1 to L2.',
-      href: 'https://wallet.polygon.technology/polygon/bridge/deposit',
-      icon: ArrowsRightLeftIcon,
-      externalLink: true,
-    },
-    {
-      name: 'Get Voting Power',
-      description: 'Voting power is granted to stakeholders, stake $MOONEY to fully participate in co-governance and co-creation.',
-      href: '/lock',
-      icon: LockClosedIcon,
-      externalLink: false,
-    },
-    {
-      name: 'Marketplace',
-      description: 'Buy and sell digital and space assets on the MoonDAO marketplace.',
-      href: 'https://market.moondao.com/',
-      icon: BuildingStorefrontIcon,
-      externalLink: true,
-    },
-    {
-      name: 'Analytics',
-      description: 'Explore stats and analytics related to our Treasury, the Community, and $MOONEY governance token.',
-      href: '/analytics',
-      icon: ChartBarIcon,
-      externalLink: false,
-    },
-    {
-      name: 'Events',
-      description: 'Get more involved by joining an upcoming scheduled event.',
-      href: '/events',
-      icon: CalendarIcon,
-      externalLink: false,
-    },
-
-  ]
+  const router = useRouter();
+  const [lightMode] = useLightMode()
 
   return (
     <div className="animate-fadeIn">
       <Head title="Home" />
-      {/*Features */}
 
-      <PageCards
-        id={'home-cards'}
-        pages={pages}
-        header={'Our base of operations'}
-        title={'The MoonDAO app'}
-        description={
-          'Here you can perform onchain operations related to the MoonDAO community.'
-        }
-      />
+      <div className="flex flex-col pt-10 w-full">
+        <div className="flex flex-col items-left px-4 lg:px-7 xl:px-9">
+          <h2 className="text-[#071732] dark:text-white font-GoodTimes text-4xl sm:text-5xl lg:text-4xl xl:text-5xl text-center lg:text-left">
+            Welcome to MoonDAO
+          </h2>
+          <p className="mt-5 lg:mt-4 xl:mt-6 text-sm sm:text-base lg:text-sm xl:text-base sm:mt-6 max-w-[698px] text-center lg:text-left text-gray-600 dark:text-white dark:opacity-60">
+            {`MoonDAO is accelerating humanity’s development of a lunar base through better coordination. Want to help? This flow will onboard you into our in less than 5 minutes, even if you’re new to Web3.`}
+          </p>
+        </div>
+        <div className="flex flex-col items-center justify-center px-4 lg:px-7 xl:px-9">
+          <iframe
+            src="https://www.youtube.com/embed/Vs_vAtRgaBA"
+            className="mt-10 lg:mt-4 xl:mt-6 w-full xl:w-5/6 aspect-video object-cover"
+          />
+          <div className="flex justify-center">
+            <button
+              className="mt-10 px-8 py-4 lg:w-[600px] font-bold w-full bg-moon-orange text-white hover:scale-105 transition-all duration-150 hover:bg-white hover:text-moon-orange"
+              onClick={() => {
+                router.push('/onboarding')
+              }}
+            >
+              Join MoonDAO
+            </button>
+          </div>
+        </div>
+
+        <div className="px-4 py-16 mx-auto max-w-7xl sm:px-6 lg:px-8">
+          <div className="mx-auto text-start">
+            <h2 className="text-3xl text-[#071732] dark:text-white font-GoodTimes sm:text-4xl lg:text-4xl xl:text-5xl text-center lg:text-left">Why Join MoonDAO?</h2>
+          </div>
+          <dl className="mt-12 space-y-10 sm:space-y-0 sm:grid sm:grid-cols-3 sm:gap-x-6 sm:gap-y-12 lg:grid-cols-2 lg:gap-x-8">
+            <div className="flex">
+              <div className="ml-3">
+                <dt className="text-lg font-medium text-center lg:text-left">Help Decentralize Access to Space</dt>
+                <dd className="mt-5 lg:mt-4 xl:mt-6 text-sm sm:text-base lg:text-sm xl:text-base sm:mt-6 max-w-[698px] text-center lg:text-left text-gray-600 dark:text-white dark:opacity-60">Ensure our multi-planetary future isn’t the exclusive domain of a few governments and billionaires, by working together to support a borderless, decentralized future that's open to all dedicated to building off-world, irrespective of national borders or geopolitics, by coordinating engineers, scientists, researchers, artists, devs, and space enthusiasts from all over the world.
+                </dd>
+              </div>
+            </div>
+            <div className="flex">
+              <div className="ml-3">
+                <dt className="text-lg font-medium text-center lg:text-left">Shape Our Community’s Destiny</dt>
+                <dd className="mt-5 lg:mt-4 xl:mt-6 text-sm sm:text-base lg:text-sm xl:text-base sm:mt-6 max-w-[698px] text-center lg:text-left text-gray-600 dark:text-white dark:opacity-60">
+                  Be an integral part of MoonDAO's vibrant community by actively participating in discussions, governance, voting, and initiatives. Shape the community's direction, voice your ideas, and foster connections with fellow members. Your input counts in building a strong and supportive network that propels us toward a shared interstellar future.
+                </dd>
+              </div>
+            </div>
+            <div className="flex">
+              <div className="ml-3">
+                <dt className="text-lg font-medium text-center lg:text-left">Co-Create a Lunar Settlement</dt>
+                <dd className="mt-5 lg:mt-4 xl:mt-6 text-sm sm:text-base lg:text-sm xl:text-base sm:mt-6 max-w-[698px] text-center lg:text-left text-gray-600 dark:text-white dark:opacity-60">Participate in shaping MoonDAO's direction through governance—guide the allocation of resources in our treasury, influence organizational decisions, and participate in direct governance as well as leadership elections.</dd>
+              </div>
+            </div>
+            <div className="flex">
+              <div className="ml-3">
+                <dt className="text-lg font-medium text-center lg:text-left">Get Funding for R&D</dt>
+                <dd className="mt-5 lg:mt-4 xl:mt-6 text-sm sm:text-base lg:text-sm xl:text-base sm:mt-6 max-w-[698px] text-center lg:text-left text-gray-600 dark:text-white dark:opacity-60">MoonDAO helps fund research and development projects from all over the world that are helping to decentralize access to space. Have a revolutionary idea? Pitch it to our community to get your project funded. Want to join a cutting edge team? Join a MoonDAO project.</dd>
+              </div>
+            </div>
+            <div className="flex">
+              <div className="ml-3">
+                <dt className="text-lg font-medium text-center lg:text-left">Network with Space Professionals</dt>
+                <dd className="mt-5 lg:mt-4 xl:mt-6 text-sm sm:text-base lg:text-sm xl:text-base sm:mt-6 max-w-[698px] text-center lg:text-left text-gray-600 dark:text-white dark:opacity-60">Connect and collaborate with a global network of like-minded visionaries, builders, and thought leaders, fostering innovation toward an open-source and open-space policy framework, including gaining access to funding opportunities or builders that can bring things to fruition.</dd>
+              </div>
+            </div>
+            <div className="flex">
+              <div className="ml-3">
+                <dt className="text-lg font-medium text-center lg:text-left">Savings on Space Ventures</dt>
+                <dd className="mt-5 lg:mt-4 xl:mt-6 text-sm sm:text-base lg:text-sm xl:text-base sm:mt-6 max-w-[698px] text-center lg:text-left text-gray-600 dark:text-white dark:opacity-60">
+                  Use your $MOONEY to access discounts on space-related products and services through the MoonDAO marketplace, including our DNA Mission to the Moon, digital assets, and more. Stay up to date as we take steps to make it available for community members to list their own offerings for $MOONEY!
+                </dd>
+              </div>
+            </div>
+            <div className="flex">
+              <div className="ml-3">
+                <dt className="text-lg font-medium text-center lg:text-left">Access to Extraordinary Events</dt>
+                <dd className="mt-5 lg:mt-4 xl:mt-6 text-sm sm:text-base lg:text-sm xl:text-base sm:mt-6 max-w-[698px] text-center lg:text-left text-gray-600 dark:text-white dark:opacity-60">Enjoy access to exclusive events like our Ticket to Space sweepstakes, Zero Gravity training with NASA astronauts, and other and other unforgettable experiences.</dd>
+              </div>
+            </div>
+            <div className="flex">
+              <div className="ml-3">
+                <dt className="text-lg font-medium text-center lg:text-left">Let’s Build Together</dt>
+                <dd className="mt-5 lg:mt-4 xl:mt-6 text-sm sm:text-base lg:text-sm xl:text-base sm:mt-6 max-w-[698px] text-center lg:text-left text-gray-600 dark:text-white dark:opacity-60">MoonDAO is only getting started with everything it plans to achieve and you can help shape the directions and achievements of the world’s largest Space Network State as humanity moves off-world.</dd>
+              </div>
+            </div>
+          </dl>
+          <div className="flex justify-center">
+            <button
+              className="mt-10 px-8 py-4 lg:w-[600px] w-full bg-moon-orange text-white font-bold hover:scale-105 transition-all duration-150 hover:bg-white hover:text-moon-orange"
+              onClick={() => {
+                router.push('/onboarding')
+              }}
+            >
+              Join MoonDAO
+            </button>
+          </div>
+        </div>
+      </div>
     </div>
+
   )
 }