From 04f67b1aa0f4f19b42f5b097aefec59646da7fbe Mon Sep 17 00:00:00 2001 From: Youssef Date: Wed, 18 Oct 2023 18:43:13 +0330 Subject: [PATCH] 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/hooks/useCountDown.tsx | 31 + src/pages/index.tsx | 38 +- src/utils/helpers.ts | 32 +- 8 files changed, 707 insertions(+), 565 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/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..38fdcac 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 { formatMilliseconds } from '@/utils/helpers' import Image from 'next/image' +const RELEASE_DATE = new Date(2023, 9, 19) // November 6 2023 export default function Home() { + const [count] = useCountdown(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 ? ( +

+ {formatMilliseconds(count)} +

+ ) : ( + + )} + ({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` +}