feat(new-landing): implement new landing page

Author: yussdev

src/components/Icon/ArrowForward.tsx

@@ -5,12 +5,12 @@ export const ArrowForward: React.FC<SVGProps<SVGSVGElement>> = ({
 }) => {
   return (
     <svg
-      {...props}
       fill="none"
       height="32"
       viewBox="0 0 32 32"
       width="32"
-      xmlns="http://www.w3.org/2000/svg">
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}>
       <path
         d="M16.75 7L25.75 16L16.75 25"
         stroke="currentColor"

src/components/Icon/CollectionsLeft.tsx

@@ -6,13 +6,13 @@ export const VectorHorizontal4: React.FC<SVGProps<SVGSVGElement>> = ({
   return (
     <svg
       fill="none"
-      height="385"
-      viewBox="0 0 6 385"
-      width="6"
+      height="377"
+      viewBox="0 0 672 377"
+      width="672"
       xmlns="http://www.w3.org/2000/svg"
       {...props}>
       <path
-        d="M0.333333 3C0.333333 4.47276 1.52724 5.66667 3 5.66667C4.47276 5.66667 5.66667 4.47276 5.66667 3C5.66667 1.52724 4.47276 0.333333 3 0.333333C1.52724 0.333333 0.333333 1.52724 0.333333 3ZM0.333333 382C0.333333 383.473 1.52724 384.667 3 384.667C4.47276 384.667 5.66667 383.473 5.66667 382C5.66667 380.527 4.47276 379.333 3 379.333C1.52724 379.333 0.333333 380.527 0.333333 382ZM2.5 3V382H3.5V3H2.5Z"
+        d="M0.333333 3C0.333333 4.47276 1.52724 5.66667 3 5.66667C4.47276 5.66667 5.66667 4.47276 5.66667 3C5.66667 1.52724 4.47276 0.333333 3 0.333333C1.52724 0.333333 0.333333 1.52724 0.333333 3ZM666.333 373.5C666.333 374.973 667.527 376.167 669 376.167C670.473 376.167 671.667 374.973 671.667 373.5C671.667 372.027 670.473 370.833 669 370.833C667.527 370.833 666.333 372.027 666.333 373.5ZM2.5 3V190.5H3.5V3H2.5ZM35 223H637V222H35V223ZM668.5 254.5V373.5H669.5V254.5H668.5ZM637 223C654.397 223 668.5 237.103 668.5 254.5H669.5C669.5 236.551 654.949 222 637 222V223ZM2.5 190.5C2.5 208.449 17.0507 223 35 223V222C17.603 222 3.5 207.897 3.5 190.5H2.5Z"
         fill="white"
       />
     </svg>

src/components/Icon/CollectionsRight.tsx

@@ -4,29 +4,41 @@ import { ConnectWalletButton } from '@/components/ConnectWalletButton'
 import { useSession } from '@/context/session'
 import cn from 'classnames'
 import { useState } from 'react'
+import { formatMilliseconds } from '@/utils/helpers'
+import useCountdown from '@/hooks/useCountDown'
+import { PAIRWISE_RELEASE_DATE } from '@/utils/contants'
 
 export function Header() {
   const { user } = useSession()
+  const [count] = useCountdown(PAIRWISE_RELEASE_DATE.valueOf() - Date.now())
 
   const [showButton, setShowButton] = useState(false)
 
   return (
     <header
-      className="z-10 flex h-[60px] items-center justify-between bg-gray-4 px-10"
+      className="z-10 flex h-[90px] items-center justify-between bg-gray-4 px-10"
       onMouseLeave={() => setShowButton(false)}>
       <Link href="/">
         <div className="ml-20">
           <Logo />
         </div>
       </Link>
       <div className="relative">
-        <div onMouseEnter={() => setShowButton(true)}>
-          <ConnectWalletButton className="h-[36px] bg-red" />
-        </div>
+        {count > 0 ? (
+          <button className="flex h-[45px] min-w-[200px] items-center justify-center rounded-full border border-red bg-transparent px-6 font-Inter text-red">
+            {formatMilliseconds(count)}
+          </button>
+        ) : (
+          <div onMouseEnter={() => setShowButton(true)}>
+            <ConnectWalletButton className="h-[36px] bg-red" />
+          </div>
+        )}
+
         {user && showButton && (
           <div
             className={cn(
-              'absolute right-0 top-12 whitespace-nowrap rounded-2xl bg-white px-10 py-6  text-black')}>
+              'absolute right-0 top-12 whitespace-nowrap rounded-2xl bg-white px-10 py-6  text-black'
+            )}>
             <Link href="/profile">
               <span className="cursor-pointer hover:underline">My account</span>
             </Link>

src/components/Icon/VectorHorizontal4.tsx

@@ -0,0 +1,31 @@
+import { useState, useEffect } from 'react'
+
+const useCountdown = (
+  initialCount: number,
+  interval: number = 1000
+): [number, () => void] => {
+  const [count, setCount] = useState<number>(initialCount)
+
+  useEffect(() => {
+    const countdownInterval = setInterval(() => {
+      setCount((prevCount) => prevCount - 1)
+    }, interval)
+
+    // Clear the interval when the component is unmounted or when the countdown reaches 0
+    if (count <= 0) {
+      clearInterval(countdownInterval)
+    }
+
+    return () => clearInterval(countdownInterval)
+  }, [count, interval])
+
+  // Reset the countdown to the initial value
+  const reset = () => {
+    setCount(initialCount)
+  }
+
+  // Return the current count and the reset function
+  return [count, reset]
+}
+
+export default useCountdown

src/components/Icon/Votes.tsx

@@ -1,5 +1,6 @@
 import { ConnectWalletButton } from '@/components/ConnectWalletButton'
 import { ArrowDown } from '@/components/Icon/ArrowDown'
+import { ArrowForward } from '@/components/Icon/ArrowForward'
 import { CollectionsLeft } from '@/components/Icon/CollectionsLeft'
 import { CollectionsRight } from '@/components/Icon/CollectionsRight'
 import { ColoredGrid } from '@/components/Icon/ColoredGrid'
@@ -15,9 +16,13 @@ import { VectorHorizontal2 } from '@/components/Icon/VectorHorizontal2'
 import { VectorHorizontal3 } from '@/components/Icon/VectorHorizontal3'
 import { VectorHorizontal4 } from '@/components/Icon/VectorHorizontal4'
 import { Votes } from '@/components/Icon/Votes'
+import useCountdown from '@/hooks/useCountDown'
+import { PAIRWISE_RELEASE_DATE } from '@/utils/contants'
+import { formatMilliseconds } from '@/utils/helpers'
 import Image from 'next/image'
 
 export default function Home() {
+  const [count] = useCountdown(PAIRWISE_RELEASE_DATE.valueOf() - Date.now())
   return (
     <div className="overflow-x-hidden">
       <div className="relative">
@@ -35,16 +40,15 @@ export default function Home() {
           src="/images/center-universe.svg"
           width="1289"
         />
-        <Star className="absolute right-80    top-40" />
+        <Star className="absolute right-80 top-40" />
         <div className="absolute inset-0 m-auto mt-28 flex w-[739px] flex-col items-center justify-center gap-6 rounded-2xl text-center font-IBM      leading-[63px] text-black ">
           <h2 className="text-[64px] font-bold text-red">
             Retroactive Public Goods Funding
           </h2>
-          <p className="text-2xl ">Impact = Profit</p>
-          <ConnectWalletButton
-            alternativeText="Start"
-            className="flex h-12 items-center bg-black"
-          />
+          <p className="font-Inter text-2xl ">
+            Impact <ArrowForward className="inline-flex" width={24} /> Profit
+          </p>
+          <p className="font-Inter text-2xl font-bold">Starting on Nov 6</p>
         </div>
         <Image
           alt="Galaxy"
@@ -129,14 +133,14 @@ export default function Home() {
           <CollectionsRight className="absolute -right-[320px] -mt-[40%]" />
         </div>
         <VectorHorizontal4 className="ml-28 mr-auto" />
-        <div className="my-6 -ml-36 flex w-[494px] flex-col gap-6 rounded-[32px] border border-white px-11 pb-14 pt-24 text-center text-black">
+        <div className="my-6 -mr-32 ml-auto  flex w-[494px] flex-col gap-6 rounded-[32px] border border-white px-11 pb-14 pt-24 text-center text-black">
           <h3 className="text-[32px] font-bold">Check and Modify Your Votes</h3>
           <p className="text-lg font-medium">
             Review and refine your votes at any time. Your opinions matter, and
             we want to make sure your choices reflect your passion for the
             projects that resonate with you.
           </p>
-          <Votes className="absolute -right-[350px] -mt-[60px]" />
+          <Votes className="absolute -left-[310px] -mt-[98px]" />
         </div>
       </div>
 
@@ -145,13 +149,17 @@ export default function Home() {
         <h2 className="text-5xl font-bold text-red">
           Ready to Shape the Galaxy?
         </h2>
-        <p className="text-[32px]  font-medium text-black">
-          Kickstart Your Journey: Connect Your Wallet Now
-        </p>
-        <ConnectWalletButton
-          alternativeText="Start"
-          className="flex h-12 items-center bg-black"
-        />
+        {count > 0 ? (
+          <button className="flex h-12 min-w-[200px] items-center justify-center rounded-full border border-black bg-transparent px-6 font-Inter  text-black">
+            {formatMilliseconds(count)}
+          </button>
+        ) : (
+          <ConnectWalletButton
+            alternativeText="Start"
+            className="flex h-12 items-center bg-black"
+          />
+        )}
+
         <Star
           className="absolute -bottom-20    -left-20"
           height={35}

src/components/layout/Header.tsx

@@ -1 +1,2 @@
 export const SHOW_HELP_STORAGE_KEY = 'pairwise-help-is-shown'
+export const PAIRWISE_RELEASE_DATE = new Date(2023, 10, 6) // November 6 2023

src/hooks/useCountDown.tsx

@@ -1,6 +1,4 @@
-import {
-  CollectionRanking,
-} from '@/components/Poll/Rankings/edit-logic/edit'
+import { CollectionRanking } from '@/components/Poll/Rankings/edit-logic/edit'
 
 export function generateNonOverlappingOrbitCoordinates(
   totalPoints: number,
@@ -96,17 +94,37 @@ export const convertRankingToAttestationFormat = (
     impactEvaluationLink: 'https://example.com/impact1',
     impactEvaluationDescription:
       'Donec vel maximus mi. Etiam vulputate at libero a euismod. Fusce id pulvinar dui. Etiam sit amet suscipit mauris. Donec viverra mauris elit. Cras at luctus libero, ac euismod sem. Etiam quis leo vestibulum tellus tincidunt bibendum vitae ac libero.',
-    listContent: flattenRanking(ranking).map((item) => ({RPGF3_Application_UID: item.id, OPAmount: totalOp * item.share})).filter((el) => el.OPAmount > 0)
+    listContent: flattenRanking(ranking)
+      .map((item) => ({
+        RPGF3_Application_UID: item.id,
+        OPAmount: totalOp * item.share,
+      }))
+      .filter((el) => el.OPAmount > 0),
   }
 
-  const listName = "List created by Pairwise"
+  const listName = 'List created by Pairwise'
   const listMetadataPtrType = 1
 
-  console.log("list:", obj.listContent)
+  console.log('list:', obj.listContent)
 
   return {
     listName,
     listMetadataPtrType,
-    listMetadataPtr: "https://ipfs.io/ipfs/QmXoypizjW3WknFiJnKLwHCnL72vedxjQkDDP1mXWo6uco/wiki/"
+    listMetadataPtr:
+      'https://ipfs.io/ipfs/QmXoypizjW3WknFiJnKLwHCnL72vedxjQkDDP1mXWo6uco/wiki/',
   }
 }
+
+export function formatMilliseconds(milliseconds: number): string {
+  const seconds: number = Math.floor(milliseconds / 1000)
+  const minutes: number = Math.floor(seconds / 60)
+  const hours: number = Math.floor(minutes / 60)
+  const days: number = Math.floor(hours / 24)
+
+  const remainingHours: number = hours % 24
+  const remainingMinutes: number = minutes % 60
+
+  return `${
+    days ? `${days} days, ` : ''
+  }${remainingHours} hours and ${remainingMinutes} minutes`
+}