Skip to content

Commit

Permalink
fixes formatting
Browse files Browse the repository at this point in the history
  • Loading branch information
@Adebesin-Cell
Adebesin-Cell committed Jul 12, 2024
1 parent 8e29bc0 commit 248f80d
Show file tree
Hide file tree
Showing 9 changed files with 200 additions and 197 deletions.
18 changes: 9 additions & 9 deletions src/app/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,22 +1,22 @@
import Hero from '@/components/layouts/Hero';
import Iqtoken from '@/components/layouts/Iqtoken';
import BraindaoTeam from '@/components/layouts/braindao-team';
import Ecosystem from '@/components/layouts/ecosystem';
import { fetchCoinMarketData } from '@/modules/fetchCoinMarketData';
import { getLockOverview } from '@/modules/getLockOverview';
import { getTvl } from '@/modules/getTVL';
import Hero from "@/components/layouts/Hero";
import Iqtoken from "@/components/layouts/Iqtoken";
import BraindaoTeam from "@/components/layouts/braindao-team";
import Ecosystem from "@/components/layouts/ecosystem";
import { fetchCoinMarketData } from "@/modules/fetchCoinMarketData";
import { getLockOverview } from "@/modules/getLockOverview";
import { getTvl } from "@/modules/getTVL";

export default async function Home() {
const [tvl, marketData, lockOverview] = await Promise.all([
getTvl(),
fetchCoinMarketData(),
getLockOverview()
getLockOverview(),
]);

const { totalHiiqSupply } = lockOverview;

return (
<div className=''>
<div className="">
<Hero />
<Iqtoken
tvl={tvl}
Expand Down
10 changes: 5 additions & 5 deletions src/components/layouts/ClientProviders.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
'use client';
"use client";

import { ThemeProvider } from 'next-themes';
import type { PropsWithChildren } from 'react';
import { CSPostHogProvider } from './CgPosthogProvider';
import { ThemeProvider } from "next-themes";
import type { PropsWithChildren } from "react";
import { CSPostHogProvider } from "./CgPosthogProvider";

const ClientProviders = ({ children }: PropsWithChildren) => {
return (
<ThemeProvider attribute='class' defaultTheme='dark'>
<ThemeProvider attribute="class" defaultTheme="dark">
<CSPostHogProvider>{children}</CSPostHogProvider>
</ThemeProvider>
);
Expand Down
112 changes: 56 additions & 56 deletions src/components/layouts/Iqtoken.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,34 +1,34 @@
'use client';
"use client";

import { numFormatter } from '@/modules/helpers/numFormatter';
import { useTheme } from 'next-themes';
import Image from 'next/image';
import React, { useEffect, useState } from 'react';
import InViewAnimateBottom from '../transitions/InViewAnimateBottom';
import { numFormatter } from "@/modules/helpers/numFormatter";
import { useTheme } from "next-themes";
import Image from "next/image";
import React, { useEffect, useState } from "react";
import InViewAnimateBottom from "../transitions/InViewAnimateBottom";

export const StatsPointers = ({
title,
content,
className,
headerSize
headerSize,
}: {
title: string;
content: string;
className?: string;
headerSize?: string;
}) => {
return (
<InViewAnimateBottom className='flex-1'>
<div className='border-l-2 border-pink-500 pl-4'>
<InViewAnimateBottom className="flex-1">
<div className="border-l-2 border-pink-500 pl-4">
<div className={`flex flex-col ${className}`}>
<h4
className={`dark:text-whiteAlpha-900 text-gray800 font-semibold ${
headerSize || 'text-2xl xl:text-3xl'
headerSize || "text-2xl xl:text-3xl"
}`}
>
{title}
</h4>
<span className={headerSize ? '' : 'xl:text-lg'}>{content}</span>
<span className={headerSize ? "" : "xl:text-lg"}>{content}</span>
</div>
</div>
</InViewAnimateBottom>
Expand All @@ -40,7 +40,7 @@ export const TokenBrief = ({
description,
description2,
buttonText,
action
action,
}: {
title: string;
description: string;
Expand All @@ -49,29 +49,29 @@ export const TokenBrief = ({
action: string;
}) => {
return (
<div className='flex items-start flex-col xl:flex-row xl:gap-[186px]'>
<div className="flex items-start flex-col xl:flex-row xl:gap-[186px]">
<InViewAnimateBottom>
<h3 className='font-semibold dark:text-whiteAlpha-900 text-gray800 text-2xl sm:text-3xl xl:text-4xl'>
<h3 className="font-semibold dark:text-whiteAlpha-900 text-gray800 text-2xl sm:text-3xl xl:text-4xl">
{title}
</h3>
</InViewAnimateBottom>
<div className='flex-1 mt-2 xl:mt-0'>
<div className="flex-1 mt-2 xl:mt-0">
<InViewAnimateBottom>
<p className='xl:text-lg dark:text-whiteAlpha-800 text-gray600'>
<p className="xl:text-lg dark:text-whiteAlpha-800 text-gray600">
{description}
</p>
{description2 && (
<p className='xl:text-lg dark:text-whiteAlpha-800 text-gray600'>
<p className="xl:text-lg dark:text-whiteAlpha-800 text-gray600">
{description2}
</p>
)}
</InViewAnimateBottom>
<InViewAnimateBottom>
<a
href={action}
target='_blank'
className='flex justify-center w-[200px] xl:w-[256px] text-white/90 dark:bg-brand-800 bg-brand-500 py-3 xl:py-4 mt-4 xl:mt-8 rounded-md hover:bg-brand-700 transition-all ease-in-out duration-300'
rel='noreferrer'
target="_blank"
className="flex justify-center w-[200px] xl:w-[256px] text-white/90 dark:bg-brand-800 bg-brand-500 py-3 xl:py-4 mt-4 xl:mt-8 rounded-md hover:bg-brand-700 transition-all ease-in-out duration-300"
rel="noreferrer"
>
{buttonText}
</a>
Expand All @@ -84,99 +84,99 @@ export const TokenBrief = ({
const Iqtoken = ({
marketData,
tvl,
totalHiiqSupply
totalHiiqSupply,
}: {
totalHiiqSupply: number;
tvl: number;
// biome-ignore lint/suspicious/noExplicitAny: <explanation>
marketData: { [x: string]: any } | null;
}) => {
const { theme } = useTheme();
const [appTheme, setAppTheme] = useState('');
const [appTheme, setAppTheme] = useState("");

useEffect(() => {
setAppTheme(theme ?? '');
setAppTheme(theme ?? "");
}, [theme]);

let imageUrl: string | undefined = undefined;
if (appTheme === 'light') {
imageUrl = '/images/aboutus.png';
if (appTheme === "light") {
imageUrl = "/images/aboutus.png";
}
if (appTheme === 'dark') {
imageUrl = '/images/aboutus-dark.png';
if (appTheme === "dark") {
imageUrl = "/images/aboutus-dark.png";
}

return (
<div
id='iq-token'
className='dark:bg-gray800 bg-[#F9FAFB] dark:text-whiteAlpha-900 text-gray600'
id="iq-token"
className="dark:bg-gray800 bg-[#F9FAFB] dark:text-whiteAlpha-900 text-gray600"
>
<div className='max-w-[1536px] px-4 md:px-10 xl:px-24 2xl:px-[120px] mx-auto py-[48px] sm:py-[80px] xl:py-24'>
<div className="max-w-[1536px] px-4 md:px-10 xl:px-24 2xl:px-[120px] mx-auto py-[48px] sm:py-[80px] xl:py-24">
<TokenBrief
title='The IQ Token'
title="The IQ Token"
description="The IQ token is a cryptocurrency that powers a knowledge ecosystem
that includes the world's largest cryptocurrency and
blockchain encyclopedia, IQ.wiki. IQ token holders can stake their
tokens to participate in governance and get access to additional
features. They can vote on governance decisions and govern
BrainDAO, the native DAO and treasury of the IQ ecosystem."
action='https://iq.wiki'
buttonText='Learn more'
action="https://iq.wiki"
buttonText="Learn more"
/>
<div className='flex flex-col-reverse lg:flex-row items-start mt-16'>
<div className='lg:flex-1 w-full overflow-hidden'>
<InViewAnimateBottom className='w-full md:w-[80%] xl:w-full h-[300px] sm:h-[450px] lg:h-[380px] xl:h-[500px] relative'>
<div className="flex flex-col-reverse lg:flex-row items-start mt-16">
<div className="lg:flex-1 w-full overflow-hidden">
<InViewAnimateBottom className="w-full md:w-[80%] xl:w-full h-[300px] sm:h-[450px] lg:h-[380px] xl:h-[500px] relative">
{imageUrl && (
<Image
src={imageUrl}
alt=''
alt=""
fill
sizes='(max-width:960px) 80vw, 50vw'
className='object-contain'
sizes="(max-width:960px) 80vw, 50vw"
className="object-contain"
/>
)}
</InViewAnimateBottom>
</div>
<div className='flex-1'>
<div className="flex-1">
<InViewAnimateBottom>
<h3 className='dark:text-whiteAlpha-900 text-gray800 text-3xl xl:text-4xl font-semibold'>
<h3 className="dark:text-whiteAlpha-900 text-gray800 text-3xl xl:text-4xl font-semibold">
HiIQ
</h3>
</InViewAnimateBottom>
<InViewAnimateBottom>
<p className='text-sm xl:text-lg dark:text-whiteAlpha-800 text-gray600 mt-4'>
<p className="text-sm xl:text-lg dark:text-whiteAlpha-800 text-gray600 mt-4">
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.
</p>
</InViewAnimateBottom>
<div className='pt-8'>
<div className='flex flex-col gap-10 xl:gap-12'>
<div className='flex justify-between'>
<div className="pt-8">
<div className="flex flex-col gap-10 xl:gap-12">
<div className="flex justify-between">
<StatsPointers
title={`${numFormatter(
marketData?.circulatingSupply || ''
marketData?.circulatingSupply || ""
)} IQ`}
content='Circulating supply'
className='h-[80px] xl:h-[95px] justify-between'
content="Circulating supply"
className="h-[80px] xl:h-[95px] justify-between"
/>
<StatsPointers
title={`$${numFormatter(marketData?.marketCap || '')}`}
content='Market cap'
className='h-[80px] xl:h-[95px] justify-between'
title={`$${numFormatter(marketData?.marketCap || "")}`}
content="Market cap"
className="h-[80px] xl:h-[95px] justify-between"
/>
</div>
<div className='flex justify-between'>
<div className="flex justify-between">
<StatsPointers
title={`$${numFormatter(tvl)}+`}
content='Total HiIQ'
className='h-[80px] xl:h-[95px] justify-between'
content="Total HiIQ"
className="h-[80px] xl:h-[95px] justify-between"
/>
<StatsPointers
title={`${numFormatter(totalHiiqSupply)} IQ+`}
content='Total volume locked'
className='h-[80px] xl:h-[95px] justify-between'
content="Total volume locked"
className="h-[80px] xl:h-[95px] justify-between"
/>
</div>
</div>
Expand Down
Loading

0 comments on commit 248f80d

Please sign in to comment.