Skip to content

Commit

Permalink
biome formatting
Browse files Browse the repository at this point in the history
  • Loading branch information
Aliiiu committed Oct 3, 2023
1 parent 4a868eb commit 60e5520
Show file tree
Hide file tree
Showing 3 changed files with 337 additions and 337 deletions.
178 changes: 89 additions & 89 deletions src/components/layouts/braindao-team/index.tsx
Original file line number Diff line number Diff line change
@@ -1,98 +1,98 @@
import { editors, productTeam } from '@/data/team';
import Image, { ImageProps } from 'next/image';
import React from 'react';
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;
src?: ImageProps["src"];
name?: string;
role?: string;
twitterLink?: string;
linkedlnLink?: string;
};
const TeamCard = ({ src, name, role, twitterLink, linkedlnLink }: TTeam) => {
return (
<div className='border bg-white dark:bg-gray700 border-gray200 dark:border-whiteAlpha-400 rounded-xl px-4 py-5'>
<div className='rounded-md relative h-[363px] md:h-[344px] lg:h-[360px] xl:h-[300px] 2xl:h-[324px] overflow-hidden'>
<Image src={src || '/images/team/kesar.png'} alt='' fill sizes='25vw' />
<div className='absolute top-0 left-0 h-full w-full bg-transparent px-5 pb-5 flex flex-col justify-end'>
<div className='bg-white dark:bg-gray700 relative rounded-[4px] py-2 px-1 flex flex-col gap-2 items-center w-full'>
<div className='rounded-full h-4 w-4 bg-brand-500 dark:bg-brand-800 absolute -top-2'></div>
<div className='flex flex-col items-center'>
<h4 className='text-gray800 dark:text-whiteAlpha-900 text-sm font-semibold'>
{name || 'Cesar Rodriguez'}
</h4>
<p className='text-brand-500 dark:text-brand-800 text-center font-medium text-xs'>
{role || 'Chief Technology Officer'}
</p>
</div>
<div className='flex justify-center'>
<div className='flex gap-2'>
<a
href={twitterLink}
target='_blank'
className='w-4 h-4 bg-twitter bg-no-repeat bg-contain dark:bg-twitter-dark'
/>
<a
href={linkedlnLink}
target='_blank'
className='w-4 h-4 bg-linkedln bg-no-repeat bg-contain dark:bg-linkedln-dark'
/>
</div>
</div>
</div>
</div>
</div>
</div>
);
return (
<div className="border bg-white dark:bg-gray700 border-gray200 dark:border-whiteAlpha-400 rounded-xl px-4 py-5">
<div className="rounded-md relative h-[363px] md:h-[344px] lg:h-[360px] xl:h-[300px] 2xl:h-[324px] overflow-hidden">
<Image src={src || "/images/team/kesar.png"} alt="" fill sizes="25vw" />
<div className="absolute top-0 left-0 h-full w-full bg-transparent px-5 pb-5 flex flex-col justify-end">
<div className="bg-white dark:bg-gray700 relative rounded-[4px] py-2 px-1 flex flex-col gap-2 items-center w-full">
<div className="rounded-full h-4 w-4 bg-brand-500 dark:bg-brand-800 absolute -top-2"></div>
<div className="flex flex-col items-center">
<h4 className="text-gray800 dark:text-whiteAlpha-900 text-sm font-semibold">
{name || "Cesar Rodriguez"}
</h4>
<p className="text-brand-500 dark:text-brand-800 text-center font-medium text-xs">
{role || "Chief Technology Officer"}
</p>
</div>
<div className="flex justify-center">
<div className="flex gap-2">
<a
href={twitterLink}
target="_blank"
className="w-4 h-4 bg-twitter bg-no-repeat bg-contain dark:bg-twitter-dark"
/>
<a
href={linkedlnLink}
target="_blank"
className="w-4 h-4 bg-linkedln bg-no-repeat bg-contain dark:bg-linkedln-dark"
/>
</div>
</div>
</div>
</div>
</div>
</div>
);
};
const BraindaoTeam = () => {
return (
<div className='bg-[#F9FAFB] text-gray600 dark:bg-gray800 dark:text-whiteAlpha-900'>
<div className='max-w-[1536px] px-4 md:px-20 xl:px-16 2xl:px-[120px] mx-auto py-[80px] xl:py-24'>
<h2 className='text-center text-4xl xl:text-5xl text-gray800 dark:text-whiteAlpha-900 font-semibold mb-10 xl:mb-14'>
Humans of BrainDAO
</h2>
<div className='flex flex-col gap-16 mt-14'>
<span className='p-5 text-brand-500 text-4xl border-b border-[#E2E8F0] dark:border-whiteAlpha-400'>
Product Team
</span>
<div className='grid sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-y-10 2xl:gap-y-16 gap-x-8 lg:gap-x-4'>
{productTeam.map((team) => {
return (
<TeamCard
src={team.src}
name={team.name}
role={team.role}
key={team.name}
linkedlnLink={team.linkedlnLink}
twitterLink={team.twitterLink}
/>
);
})}
</div>
</div>
<div className='flex flex-col gap-16 mt-14'>
<span className='p-5 text-brand-500 text-4xl border-b border-[#E2E8F0] dark:border-whiteAlpha-400'>
Editors
</span>
<div className='grid md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-y-16 gap-x-4'>
{editors.map((team) => {
return (
<TeamCard
key={team.name}
src={team.src}
name={team.name}
role={team.role}
linkedlnLink={team.linkedlnLink}
twitterLink={team.twitterLink}
/>
);
})}
</div>
</div>
</div>
</div>
);
return (
<div className="bg-[#F9FAFB] text-gray600 dark:bg-gray800 dark:text-whiteAlpha-900">
<div className="max-w-[1536px] px-4 md:px-20 xl:px-16 2xl:px-[120px] mx-auto py-[80px] xl:py-24">
<h2 className="text-center text-4xl xl:text-5xl text-gray800 dark:text-whiteAlpha-900 font-semibold mb-10 xl:mb-14">
Humans of BrainDAO
</h2>
<div className="flex flex-col gap-16 mt-14">
<span className="p-5 text-brand-500 text-4xl border-b border-[#E2E8F0] dark:border-whiteAlpha-400">
Product Team
</span>
<div className="grid sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-y-10 2xl:gap-y-16 gap-x-8 lg:gap-x-4">
{productTeam.map((team) => {
return (
<TeamCard
src={team.src}
name={team.name}
role={team.role}
key={team.name}
linkedlnLink={team.linkedlnLink}
twitterLink={team.twitterLink}
/>
);
})}
</div>
</div>
<div className="flex flex-col gap-16 mt-14">
<span className="p-5 text-brand-500 text-4xl border-b border-[#E2E8F0] dark:border-whiteAlpha-400">
Editors
</span>
<div className="grid md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-y-16 gap-x-4">
{editors.map((team) => {
return (
<TeamCard
key={team.name}
src={team.src}
name={team.name}
role={team.role}
linkedlnLink={team.linkedlnLink}
twitterLink={team.twitterLink}
/>
);
})}
</div>
</div>
</div>
</div>
);
};

export default BraindaoTeam;
160 changes: 80 additions & 80 deletions src/components/layouts/ecosystem/Iqgpt.tsx
Original file line number Diff line number Diff line change
@@ -1,93 +1,93 @@
'use client';
"use client";

import { useTheme } from 'next-themes';
import Image from 'next/image';
import React, { useEffect, useState } from 'react';
import { useTheme } from "next-themes";
import Image from "next/image";
import React, { useEffect, useState } from "react";
import {
RiDatabaseLine,
RiNewspaperLine,
RiPlug2Line,
RiQuestionAnswerLine,
} from 'react-icons/ri';
import { TokenBrief } from '../Iqtoken';
RiDatabaseLine,
RiNewspaperLine,
RiPlug2Line,
RiQuestionAnswerLine,
} from "react-icons/ri";
import { TokenBrief } from "../Iqtoken";

export const FeatureList = ({
title,
description,
icon,
title,
description,
icon,
}: {
title: string;
description: string;
icon: JSX.Element;
title: string;
description: string;
icon: JSX.Element;
}) => {
return (
<div className='flex flex-1 flex-col gap-4 items-start'>
<div className='w-12 h-12 rounded-full flex justify-center text-xl text-brand-500 dark:text-brand-800 items-center border-8 border-brand-50 dark:border-brand-200 bg-brand-100 dark:bg-brand-400'>
{icon}
</div>
<div className=''>
<h4 className='text-gray800 dark:text-whiteAlpha-900 font-semibold text-lg md:text-xl mb-1'>
{title}
</h4>
<p className='text-sm lg:text-base'>{description}</p>
</div>
</div>
);
return (
<div className="flex flex-1 flex-col gap-4 items-start">
<div className="w-12 h-12 rounded-full flex justify-center text-xl text-brand-500 dark:text-brand-800 items-center border-8 border-brand-50 dark:border-brand-200 bg-brand-100 dark:bg-brand-400">
{icon}
</div>
<div className="">
<h4 className="text-gray800 dark:text-whiteAlpha-900 font-semibold text-lg md:text-xl mb-1">
{title}
</h4>
<p className="text-sm lg:text-base">{description}</p>
</div>
</div>
);
};

const Iqgpt = () => {
const { theme } = useTheme();
const [appTheme, setAppTheme] = useState('');
const { theme } = useTheme();
const [appTheme, setAppTheme] = useState("");

useEffect(() => {
setAppTheme(theme || '');
}, [theme]);
let imageUrl;
if (appTheme === 'light') {
imageUrl = '/images/iq-gpt-mockup.png';
}
if (appTheme === 'dark') {
imageUrl = '/images/iq-gpt-mockup-dark-2.png';
}
return (
<div
id='iq-gpt'
className='max-w-[1536px] px-10 xl:px-[120px] mx-auto flex flex-col gap-10 xl:gap-16 py-[80px] xl:py-24'
>
<TokenBrief
title='IQ GPT'
description="IQ GPT is an extension of IQ wiki's decentralized framework, integrating crypto-focused AI models that utilize diverse data sources to bolster capabilities, offering insights into intricate terms, live market trends, and breaking news.IQ GPT is powered by the IQ token, enabling IQ holders to participate in governance and get access to additional features."
action='https://iqgpt.com'
buttonText='Explore IQ GPT'
/>
<div className='grid sm:grid-cols-2 xl:grid-cols-4 gap-2 2xl:gap-12 py-2'>
<FeatureList
icon={<RiDatabaseLine />}
title='Access to real-time data'
description='Access to real-time price data, trading volumes, market
capitalization.'
/>
<FeatureList
icon={<RiQuestionAnswerLine />}
title='AI generated answers'
description='Get AI generated answers to all your crypto questions.'
/>
<FeatureList
icon={<RiNewspaperLine />}
title='Update on news and trends'
description='Equip yourself with AI powered market analysis from real time market data, news and trends.'
/>
<FeatureList
icon={<RiPlug2Line />}
title='Pluggins'
description='Access to different plugins to select data sources for your enquires.'
/>
</div>
<div className='w-full relative h-[600px] md:h-[700px] lg:h-[850px] xl:h-[1000px] 2xl:h-[1117px]'>
{imageUrl && <Image src={imageUrl} alt='' fill sizes='100vw' />}
</div>
</div>
);
useEffect(() => {
setAppTheme(theme || "");
}, [theme]);
let imageUrl;
if (appTheme === "light") {
imageUrl = "/images/iq-gpt-mockup.png";
}
if (appTheme === "dark") {
imageUrl = "/images/iq-gpt-mockup-dark-2.png";
}
return (
<div
id="iq-gpt"
className="max-w-[1536px] px-10 xl:px-[120px] mx-auto flex flex-col gap-10 xl:gap-16 py-[80px] xl:py-24"
>
<TokenBrief
title="IQ GPT"
description="IQ GPT is an extension of IQ wiki's decentralized framework, integrating crypto-focused AI models that utilize diverse data sources to bolster capabilities, offering insights into intricate terms, live market trends, and breaking news.IQ GPT is powered by the IQ token, enabling IQ holders to participate in governance and get access to additional features."
action="https://iqgpt.com"
buttonText="Explore IQ GPT"
/>
<div className="grid sm:grid-cols-2 xl:grid-cols-4 gap-2 2xl:gap-12 py-2">
<FeatureList
icon={<RiDatabaseLine />}
title="Access to real-time data"
description="Access to real-time price data, trading volumes, market
capitalization."
/>
<FeatureList
icon={<RiQuestionAnswerLine />}
title="AI generated answers"
description="Get AI generated answers to all your crypto questions."
/>
<FeatureList
icon={<RiNewspaperLine />}
title="Update on news and trends"
description="Equip yourself with AI powered market analysis from real time market data, news and trends."
/>
<FeatureList
icon={<RiPlug2Line />}
title="Pluggins"
description="Access to different plugins to select data sources for your enquires."
/>
</div>
<div className="w-full relative h-[600px] md:h-[700px] lg:h-[850px] xl:h-[1000px] 2xl:h-[1117px]">
{imageUrl && <Image src={imageUrl} alt="" fill sizes="100vw" />}
</div>
</div>
);
};

export default Iqgpt;
Loading

0 comments on commit 60e5520

Please sign in to comment.