-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
3 changed files
with
337 additions
and
337 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; |
Oops, something went wrong.