From 5f540776e43367d069d1484cc3125635173bf715 Mon Sep 17 00:00:00 2001 From: Youssef Date: Wed, 18 Oct 2023 18:43:13 +0330 Subject: [PATCH 1/2] feat(new-landing): implement new landing page --- src/components/Icon/ArrowForward.tsx | 4 +- src/components/Icon/CollectionsLeft.tsx | 229 ++++--- src/components/Icon/CollectionsRight.tsx | 209 ++++--- src/components/Icon/VectorHorizontal4.tsx | 8 +- src/components/Icon/Votes.tsx | 721 +++++++++++----------- src/components/layout/Header.tsx | 22 +- src/hooks/useCountDown.tsx | 31 + src/pages/index.tsx | 38 +- src/utils/contants.ts | 1 + src/utils/helpers.ts | 32 +- 10 files changed, 725 insertions(+), 570 deletions(-) create mode 100644 src/hooks/useCountDown.tsx diff --git a/src/components/Icon/ArrowForward.tsx b/src/components/Icon/ArrowForward.tsx index 5495ba8..a4a5be2 100644 --- a/src/components/Icon/ArrowForward.tsx +++ b/src/components/Icon/ArrowForward.tsx @@ -5,12 +5,12 @@ export const ArrowForward: React.FC> = ({ }) => { return ( + xmlns="http://www.w3.org/2000/svg" + {...props}> > = ({ return ( @@ -39,7 +39,7 @@ export const CollectionsLeft: React.FC> = ({ stroke="#297AFF" /> @@ -56,26 +56,13 @@ export const CollectionsLeft: React.FC> = ({ fill="#403BEB" /> - - - - - - - @@ -104,99 +91,169 @@ export const CollectionsLeft: React.FC> = ({ fill="#14171C" /> + + + + + + + + + + + - - - - - - - - - - - - - - + + + + + + + - - - - - - + > = ({ stroke="#297AFF" /> @@ -56,29 +56,16 @@ export const CollectionsRight: React.FC> = ({ fill="#403BEB" /> - - - - - - - - + > = ({ fill="#14171C" /> + - + - - + + + + + + + + + + + + + + + - - - - - - + > = ({ + width="91" + x="576" + y="578"> > = ({ height="91" id="filter3_d_1351_2576" width="91" - x="576" - y="578"> + x="662" + y="392"> > = ({ return ( diff --git a/src/components/Icon/Votes.tsx b/src/components/Icon/Votes.tsx index 08916df..a193670 100644 --- a/src/components/Icon/Votes.tsx +++ b/src/components/Icon/Votes.tsx @@ -4,475 +4,446 @@ export const Votes: React.FC> = ({ ...props }) => { return ( + + - - - - - + fillOpacity="0.8" + height="43" + rx="12" + width="801" + x="-15" + y="48" + /> + + + + + + + + + + + + + + - - - - - + fillOpacity="0.8" + height="43" + rx="12" + width="801" + x="-15" + y="150" + /> + + + + - - - - - + fillOpacity="0.8" + height="43" + rx="12" + width="801" + x="-15" + y="201" + /> + + + + + + - - - - - - - - - - - - - + - + + + + + + + - - - - - + fillOpacity="0.8" + height="43" + rx="12" + width="801" + x="-15" + y="303" + /> + + + + + + - - - - - - - - - - - - - - + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + ) } diff --git a/src/components/layout/Header.tsx b/src/components/layout/Header.tsx index d56d259..f85d9af 100644 --- a/src/components/layout/Header.tsx +++ b/src/components/layout/Header.tsx @@ -4,15 +4,19 @@ 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 (
setShowButton(false)}>
@@ -20,13 +24,21 @@ export function Header() {
-
setShowButton(true)}> - -
+ {count > 0 ? ( + + ) : ( +
setShowButton(true)}> + +
+ )} + {user && showButton && (
+ 'absolute right-0 top-12 whitespace-nowrap rounded-2xl bg-white px-10 py-6 text-black' + )}> My account diff --git a/src/hooks/useCountDown.tsx b/src/hooks/useCountDown.tsx new file mode 100644 index 0000000..29dc592 --- /dev/null +++ b/src/hooks/useCountDown.tsx @@ -0,0 +1,31 @@ +import { useState, useEffect } from 'react' + +const useCountdown = ( + initialCount: number, + interval: number = 1000 +): [number, () => void] => { + const [count, setCount] = useState(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 diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 8d4c6c6..fbcfc8c 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.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 (
@@ -35,16 +40,15 @@ export default function Home() { src="/images/center-universe.svg" width="1289" /> - +

Retroactive Public Goods Funding

-

Impact = Profit

- +

+ Impact Profit +

+

Starting on Nov 6

Galaxy
-
+

Check and Modify Your Votes

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.

- +
@@ -145,13 +149,17 @@ export default function Home() {

Ready to Shape the Galaxy?

-

- Kickstart Your Journey: Connect Your Wallet Now -

- + {count > 0 ? ( + + ) : ( + + )} + ({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` +} From ec87b1c67b33585e19bd06ad426cb29a6502717b Mon Sep 17 00:00:00 2001 From: Youssef Date: Thu, 19 Oct 2023 11:52:07 +0330 Subject: [PATCH 2/2] fix(landing): add see the demo version button --- src/pages/index.tsx | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 deletions(-) diff --git a/src/pages/index.tsx b/src/pages/index.tsx index fbcfc8c..731a22a 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -20,6 +20,7 @@ import useCountdown from '@/hooks/useCountDown' import { PAIRWISE_RELEASE_DATE } from '@/utils/contants' import { formatMilliseconds } from '@/utils/helpers' import Image from 'next/image' +import Link from 'next/link' export default function Home() { const [count] = useCountdown(PAIRWISE_RELEASE_DATE.valueOf() - Date.now()) @@ -35,20 +36,25 @@ export default function Home() { /> Galaxy - -
-

+ +
+

Retroactive Public Goods Funding

Impact Profit

Starting on Nov 6

+ + + {' '}