diff --git a/src/components/layouts/Iqtoken.tsx b/src/components/layouts/Iqtoken.tsx index c233162..7bf6d56 100644 --- a/src/components/layouts/Iqtoken.tsx +++ b/src/components/layouts/Iqtoken.tsx @@ -1,199 +1,199 @@ -'use client'; +"use client"; -import { useErc20 } from '@/hooks/useEr20'; -import { useLockOverview } from '@/hooks/useLockOverview'; -import { useTheme } from 'next-themes'; -import Image from 'next/image'; -import React, { useEffect, useRef, useState } from 'react'; -import InViewAnimateBottom from '../transitions/InViewAnimateBottom'; -import InViewAnimateSlideDown from '../transitions/InViewSlideDown'; -import InViewAnimateSlideUp from '../transitions/inViewSlideUp'; -import { fetchPriceChange, numFormatter } from '../utils/stats-utils'; -import { motion } from 'framer-motion'; +import { useErc20 } from "@/hooks/useEr20"; +import { useLockOverview } from "@/hooks/useLockOverview"; +import { useTheme } from "next-themes"; +import Image from "next/image"; +import React, { useEffect, useRef, useState } from "react"; +import InViewAnimateBottom from "../transitions/InViewAnimateBottom"; +import InViewAnimateSlideDown from "../transitions/InViewSlideDown"; +import InViewAnimateSlideUp from "../transitions/inViewSlideUp"; +import { fetchPriceChange, numFormatter } from "../utils/stats-utils"; +import { motion } from "framer-motion"; export const StatsPointers = ({ - title, - content, - className, - headerSize, + title, + content, + className, + headerSize, }: { - title: string; - content: string; - className?: string; - headerSize?: string; + title: string; + content: string; + className?: string; + headerSize?: string; }) => { - return ( - -
-
-

- {title} -

- {content} -
-
- - ); + return ( + +
+
+

+ {title} +

+ {content} +
+
+ + ); }; export const TokenBrief = ({ - title, - description, - description2, - buttonText, - action, + title, + description, + description2, + buttonText, + action, }: { - title: string; - description: string; - description2?: string; - buttonText: string; - action: string; + title: string; + description: string; + description2?: string; + buttonText: string; + action: string; }) => { - return ( -
- -

- {title} -

- -
- -

- {description} -

- {description2 && ( -

- {description2} -

- )} - - - - {buttonText} - - -
-
- ); + return ( +
+ +

+ {title} +

+ +
+ +

+ {description} +

+ {description2 && ( +

+ {description2} +

+ )} + + + + {buttonText} + + +
+
+ ); }; const Iqtoken = () => { - const { theme } = useTheme(); - const [appTheme, setAppTheme] = useState(''); - const { tvl } = useErc20(); - const { totalHiiqSupply } = useLockOverview(); - const isFetchedData = useRef(false); - const [marketData, setMarketData] = useState<{ [x: string]: any } | null>( - null - ); + const { theme } = useTheme(); + const [appTheme, setAppTheme] = useState(""); + const { tvl } = useErc20(); + const { totalHiiqSupply } = useLockOverview(); + const isFetchedData = useRef(false); + const [marketData, setMarketData] = useState<{ [x: string]: any } | null>( + null + ); - useEffect(() => { - setAppTheme(theme || ''); - if (!isFetchedData.current) { - isFetchedData.current = true; - const res2 = fetchPriceChange(); + useEffect(() => { + setAppTheme(theme || ""); + if (!isFetchedData.current) { + isFetchedData.current = true; + const res2 = fetchPriceChange(); - Promise.resolve(res2).then((data) => { - setMarketData(data); - }); - } - }, [theme]); - let imageUrl; - if (appTheme === 'light') { - imageUrl = '/images/aboutus.png'; - } - if (appTheme === 'dark') { - imageUrl = '/images/aboutus-dark.png'; - } + Promise.resolve(res2).then((data) => { + setMarketData(data); + }); + } + }, [theme]); + let imageUrl; + if (appTheme === "light") { + imageUrl = "/images/aboutus.png"; + } + if (appTheme === "dark") { + imageUrl = "/images/aboutus-dark.png"; + } - return ( -
-
- +
+ -
-
- - {imageUrl && ( - - )} - -
-
- -

- HiIQ -

- - -

- HiIQ, launched to incentivize long-term engagement and - governance participation, allows users to lock up IQ tokens, - increasing HiIQ balance for voting power and earning IQ token - rewards, with 3 million tokens generated daily. -

- -
-
-
- - -
-
- - -
-
-
-
-
-
-
- ); + action="https://iq.wiki" + buttonText="Learn more" + /> +
+
+ + {imageUrl && ( + + )} + +
+
+ +

+ HiIQ +

+ + +

+ HiIQ, launched to incentivize long-term engagement and + governance participation, allows users to lock up IQ tokens, + increasing HiIQ balance for voting power and earning IQ token + rewards, with 3 million tokens generated daily. +

+ +
+
+
+ + +
+
+ + +
+
+
+
+
+
+ + ); }; export default Iqtoken; diff --git a/src/components/layouts/braindao-team/index.tsx b/src/components/layouts/braindao-team/index.tsx index 3f14249..4526400 100644 --- a/src/components/layouts/braindao-team/index.tsx +++ b/src/components/layouts/braindao-team/index.tsx @@ -1,122 +1,122 @@ -import InViewAnimateBottom from "@/components/transitions/InViewAnimateBottom"; -import InViewAnimateFadeIn from "@/components/transitions/InViewAnimateFadeIn"; -import { editors, productTeam } from "@/data/team"; -import Image, { ImageProps } from "next/image"; -import React from "react"; +import InViewAnimateBottom from '@/components/transitions/InViewAnimateBottom'; +import InViewAnimateFadeIn from '@/components/transitions/InViewAnimateFadeIn'; +import { editors, productTeam } from '@/data/team'; +import Image, { ImageProps } from 'next/image'; +import React from 'react'; type TTeam = { - src?: ImageProps["src"]; - name?: string; - role?: string; - twitterLink?: string; - linkedlnLink?: string; - wikiLink?: string; + src?: ImageProps['src']; + name?: string; + role?: string; + twitterLink?: string; + linkedlnLink?: string; + wikiLink?: string; }; const TeamCard = ({ - src, - name, - role, - twitterLink, - linkedlnLink, - wikiLink, + src, + name, + role, + twitterLink, + linkedlnLink, + wikiLink, }: TTeam) => { - return ( - -
-
- -
-
-
-
-

- {name || ""} -

-

- {role || ""} -

-
- -
-
-
-
- - ); + return ( + +
+
+ +
+
+
+
+

+ {name || ''} +

+

+ {role || ''} +

+
+
+ +
+
+
+
+
+ + ); }; const BraindaoTeam = () => { - return ( -
-
-

- Humans of BrainDAO -

-
- - Product Team - -
- {productTeam.map((team, idx) => { - return ( - - ); - })} -
-
-
- - Content Team - -
- {editors.map((item) => ( - - ))} -
-
-
-
- ); + return ( +
+
+

+ Humans of BrainDAO +

+
+ + Product Team + +
+ {productTeam.map((team, idx) => { + return ( + + ); + })} +
+
+
+ + Content Team + +
+ {editors.map((item) => ( + + ))} +
+
+
+
+ ); }; export default BraindaoTeam; diff --git a/src/components/layouts/ecosystem/Iqwiki.tsx b/src/components/layouts/ecosystem/Iqwiki.tsx index beb1594..e755102 100644 --- a/src/components/layouts/ecosystem/Iqwiki.tsx +++ b/src/components/layouts/ecosystem/Iqwiki.tsx @@ -1,99 +1,99 @@ -'use client'; +"use client"; -import InViewAnimateBottom from '@/components/transitions/InViewAnimateBottom'; -import InViewAnimateSlideUp from '@/components/transitions/inViewSlideUp'; -import { useTheme } from 'next-themes'; -import Image from 'next/image'; -import React, { useEffect, useState } from 'react'; -import { TokenBrief } from '../Iqtoken'; +import InViewAnimateBottom from "@/components/transitions/InViewAnimateBottom"; +import InViewAnimateSlideUp from "@/components/transitions/inViewSlideUp"; +import { useTheme } from "next-themes"; +import Image from "next/image"; +import React, { useEffect, useState } from "react"; +import { TokenBrief } from "../Iqtoken"; const Iqwiki = () => { - const { theme } = useTheme(); - const [appTheme, setAppTheme] = useState(''); + const { theme } = useTheme(); + const [appTheme, setAppTheme] = useState(""); - useEffect(() => { - setAppTheme(theme || ''); - }, [theme]); - let imageUrl, imageUrl2, imageUrl3; - if (appTheme === 'light') { - imageUrl = '/images/iqwiki-widget-new.png'; - imageUrl2 = '/images/wiki-rank.png'; - imageUrl3 = '/images/wiki-homepage.png'; - } - if (appTheme === 'dark') { - imageUrl = '/images/iqwiki-widget-new-dark.png'; - imageUrl2 = '/images/wiki-rank-dark.png'; - imageUrl3 = '/images/wiki-homepage-dark.png'; - } + useEffect(() => { + setAppTheme(theme || ""); + }, [theme]); + let imageUrl, imageUrl2, imageUrl3; + if (appTheme === "light") { + imageUrl = "/images/iqwiki-widget-new.png"; + imageUrl2 = "/images/wiki-rank.png"; + imageUrl3 = "/images/wiki-homepage.png"; + } + if (appTheme === "dark") { + imageUrl = "/images/iqwiki-widget-new-dark.png"; + imageUrl2 = "/images/wiki-rank-dark.png"; + imageUrl3 = "/images/wiki-homepage-dark.png"; + } - return ( -
- -
-
-

- Explore a diverse range of wikis designed to guide you through the - realms of{' '} - - cryptocurrency and blockchain. - -

-
-
-
- {imageUrl3 && ( - - )} -
-
-
- -
-
- {imageUrl && ( - - )} -
-
-
- {imageUrl2 && ( - - )} -
-
- - Integrations: - -
-
-
-
-
-
-
- -
- ); + return ( +
+ +
+
+

+ Explore a diverse range of wikis designed to guide you through the + realms of{" "} + + cryptocurrency and blockchain. + +

+
+
+
+ {imageUrl3 && ( + + )} +
+
+
+ +
+
+ {imageUrl && ( + + )} +
+
+
+ {imageUrl2 && ( + + )} +
+
+ + Integrations: + +
+
+
+
+
+
+
+ +
+ ); }; export default Iqwiki; diff --git a/src/components/transitions/InViewAnimateBottom.tsx b/src/components/transitions/InViewAnimateBottom.tsx index 469860e..61d8911 100644 --- a/src/components/transitions/InViewAnimateBottom.tsx +++ b/src/components/transitions/InViewAnimateBottom.tsx @@ -1,54 +1,54 @@ -'use client'; +"use client"; -import { useAnimation, motion } from 'framer-motion'; -import React, { useEffect, useState } from 'react'; -import { useInView } from 'react-intersection-observer'; +import { useAnimation, motion } from "framer-motion"; +import React, { useEffect, useState } from "react"; +import { useInView } from "react-intersection-observer"; export type TInViewAnimate = { - children: React.ReactNode; - className?: string; - delay?: number; + children: React.ReactNode; + className?: string; + delay?: number; }; const InViewAnimateBottom: React.FC = ({ - children, - className, - delay, + children, + className, + delay, }) => { - const { ref, inView } = useInView(); - const animation = useAnimation(); - const [hasAnimated, setHasAnimated] = useState(false); + const { ref, inView } = useInView(); + const animation = useAnimation(); + const [hasAnimated, setHasAnimated] = useState(false); - useEffect(() => { - if (inView && !hasAnimated) { - setHasAnimated(true); - animation.start({ - // y: 0, - opacity: 1, - transition: { - type: 'tween', - duration: 1.5, - }, - }); - } - if (!inView && !hasAnimated) { - animation.start({ - // y: '100px', - opacity: 0, - }); - } - }, [animation, delay, inView, hasAnimated]); + useEffect(() => { + if (inView && !hasAnimated) { + setHasAnimated(true); + animation.start({ + // y: 0, + opacity: 1, + transition: { + type: "tween", + duration: 1.5, + }, + }); + } + if (!inView && !hasAnimated) { + animation.start({ + // y: '100px', + opacity: 0, + }); + } + }, [animation, delay, inView, hasAnimated]); - return ( - - {children} - - ); + return ( + + {children} + + ); }; export default InViewAnimateBottom;