fixes ui suggestions

EveripediaNetwork · Apr 4, 2024 · 82d28d4 · 82d28d4
1 parent 021e278
commit 82d28d4
Show file tree

Hide file tree

Showing 10 changed files with 177 additions and 142 deletions.
diff --git a/public/images/iq-social-dark-1.png b/public/images/iq-social-dark-1.png
diff --git a/public/images/iq-social-dark-2.png b/public/images/iq-social-dark-2.png
diff --git a/public/images/iq-social-dark.png b/public/images/iq-social-dark.png
diff --git a/public/images/iq-social-light-1.png b/public/images/iq-social-light-1.png
diff --git a/public/images/iq-social-light-2.png b/public/images/iq-social-light-2.png
diff --git a/public/images/iq-social-light.png b/public/images/iq-social-light.png
diff --git a/src/components/layouts/Iqtoken.tsx b/src/components/layouts/Iqtoken.tsx
@@ -1,39 +1,39 @@
-"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 { motion } from 'framer-motion';
+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';
 
 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 ? headerSize : "text-2xl xl:text-3xl"
+              headerSize ? 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>
@@ -45,7 +45,7 @@ export const TokenBrief = ({
   description,
   description2,
   buttonText,
-  action,
+  action
 }: {
   title: string;
   description: string;
@@ -54,28 +54,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"
+            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>
@@ -87,7 +88,7 @@ export const TokenBrief = ({
 
 const Iqtoken = () => {
   const { theme } = useTheme();
-  const [appTheme, setAppTheme] = useState("");
+  const [appTheme, setAppTheme] = useState('');
   const { tvl } = useErc20();
   const { totalHiiqSupply } = useLockOverview();
   const isFetchedData = useRef(false);
@@ -96,7 +97,7 @@ const Iqtoken = () => {
   );
 
   useEffect(() => {
-    setAppTheme(theme || "");
+    setAppTheme(theme || '');
     if (!isFetchedData.current) {
       isFetchedData.current = true;
       const res2 = fetchPriceChange();
@@ -107,84 +108,84 @@ const Iqtoken = () => {
     }
   }, [theme]);
   let imageUrl;
-  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>

diff --git a/src/components/layouts/ecosystem/iqcode.tsx b/src/components/layouts/ecosystem/iqcode.tsx
@@ -1,81 +1,78 @@
-"use client";
+'use client';
 
-import InViewAnimateBottom from "@/components/transitions/InViewAnimateBottom";
-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 { useTheme } from 'next-themes';
+import Image from 'next/image';
+import React, { useEffect, useState } from 'react';
+import { TokenBrief } from '../Iqtoken';
 
 export const FeatureList = ({
   title,
   description,
   icon,
-  delay,
+  delay
 }: {
   title: string;
   description: string;
   icon: JSX.Element;
   delay?: number;
 }) => {
   return (
-    <InViewAnimateBottom className="flex flex-1 flex-col gap-4 items-start">
-      <div className="w-12 h-12 rounded-full flex justify-center text-xl dark:text-brand-800 text-brand-500 items-center border-8 dark:border-brand-200 border-brand-50 dark:bg-brand-400 bg-brand-100">
+    <InViewAnimateBottom className='flex flex-1 flex-col gap-4 items-start'>
+      <div className='w-12 h-12 rounded-full flex justify-center text-xl dark:text-brand-800 text-brand-500 items-center border-8 dark:border-brand-200 border-brand-50 dark:bg-brand-400 bg-brand-100'>
         {icon}
       </div>
-      <div className="">
-        <h4 className="dark:text-whiteAlpha-900 text-gray800 font-semibold text-lg md:text-xl mb-1">
+      <div className=''>
+        <h4 className='dark:text-whiteAlpha-900 text-gray800 font-semibold text-lg md:text-xl mb-1'>
           {title}
         </h4>
-        <p className="text-sm lg:text-base">{description}</p>
+        <p className='text-sm lg:text-base'>{description}</p>
       </div>
     </InViewAnimateBottom>
   );
 };
 
 const Iqcode = () => {
   const { theme } = useTheme();
-  const [appTheme, setAppTheme] = useState("");
+  const [appTheme, setAppTheme] = useState('');
 
   useEffect(() => {
-    setAppTheme(theme ?? "");
+    setAppTheme(theme ?? '');
   }, [theme]);
 
   let imageUrl: string | undefined;
-  if (appTheme === "light") {
-    imageUrl = "/images/iq-code-light.png";
+  if (appTheme === 'light') {
+    imageUrl = '/images/iq-code-light.png';
   }
-  if (appTheme === "dark") {
-    imageUrl = "/images/iq-code-dark.png";
+  if (appTheme === 'dark') {
+    imageUrl = '/images/iq-code-dark.png';
   }
 
   return (
     <div
-      id="iq-code"
-      className="max-w-[1536px] px-4 sm:px-10 xl:px-[120px] mx-auto flex flex-col gap-10 xl:gap-16 pt-[48px] sm:pt-[80px] 2xl:pt-24 relative"
+      id='iq-code'
+      className='max-w-[1536px] px-4 sm:px-10 xl:px-[120px] mx-auto flex flex-col gap-10 xl:gap-16 pt-[48px] sm:pt-[80px] 2xl:pt-24 relative'
     >
       <TokenBrief
-        title="IQ code"
+        title='IQ code'
         description={
-          "IQ code is an upcoming smart contract coding tool with AI features specifically tailored for smart contracts. The product will function as a Solidity advisor, aiming to improve coding efficiency and code quality, to assist developers. "
+          'IQ code is an upcoming smart contract coding tool with AI features specifically tailored for smart contracts. The product will function as a Solidity advisor, aiming to improve coding efficiency and code quality, to assist developers. '
         }
-        action="https://iqcode.ai/demo"
-        buttonText="See Demo"
+        action='https://iqcode.ai/demo'
+        buttonText='See Demo'
       />
 
       <InViewAnimateBottom>
-        <div className="w-full relative h-[320px] min-[500px]:h-[450px] sm:h-[600px] md:h-[650px] lg:h-[750px] xl:h-[1000px]">
-          {imageUrl && (
-            <Image
-              src={imageUrl}
-              alt="IQ Code Illustration"
-              fill
-              sizes="100vw"
-              className="object-cover md:object-contain"
-            />
-          )}
-        </div>
+        {imageUrl && (
+          <Image
+            src={imageUrl}
+            alt='IQ Code Illustration'
+            sizes='100vw'
+            height={690}
+            width={1300}
+          />
+        )}
       </InViewAnimateBottom>
-      <div className="h-[174px] w-full absolute dark:bg-gradient-linear bg-gradient-linear-light bg-cover left-0 -bottom-2 sm:bottom-0" />
     </div>
   );
 };