LLM/DocsGPT
1
0
Fork 0
mirror of https://github.com/arc53/DocsGPT.git synced 2025-11-29 08:33:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

lint

Browse Source
This commit is contained in:
Alex
2024-03-14 11:37:33 +00:00
parent 70e1560cb3
commit 80a4a094af
10 changed files with 193 additions and 133 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
frontend/src/Hero.tsx
View File

@@ -4,11 +4,14 @@ import DocsGPT3 from './assets/cute_docsgpt3.svg';
export default function Hero({ className = '' }: { className?: string }) {
// const isMobile = window.innerWidth <= 768;
const { isMobile } = useMediaQuery();
const [isDarkTheme] = useDarkTheme()
const [isDarkTheme] = useDarkTheme();
return (
<div className={`mt-14 ${isMobile ? 'mb-2' : 'mb-12'} flex flex-col text-black-1000 dark:text-bright-gray`}>
<div
className={`mt-14 ${
isMobile ? 'mb-2' : 'mb-12'
} flex flex-col text-black-1000 dark:text-bright-gray`}
>
<div className=" mb-2 flex items-center justify-center sm:mb-10">
<p className="mr-2 text-4xl font-semibold">DocsGPT</p>
<img className="mb-2 h-14" src={DocsGPT3} alt="DocsGPT" />
</div>
@@ -36,20 +39,24 @@ export default function Hero({ className = '' }: { className?: string }) {
</>
)}
<div
className={`sections ${isMobile ? '' : 'mt-1'
} flex flex-wrap items-center justify-center gap-2 sm:gap-1 md:gap-0`}
className={`sections ${
isMobile ? '' : 'mt-1'
} flex flex-wrap items-center justify-center gap-2 sm:gap-1 md:gap-0`}
>
{/* first */}
<div className="h-auto md:h-60 rounded-[50px] bg-gradient-to-l from-[#6EE7B7]/70 dark:from-[#D16FF8] via-[#3B82F6] dark:via-[#48E6E0] to-[#9333EA]/50 dark:to-[#C85EF6] p-1 md:rounded-tr-none md:rounded-br-none">
<div className="h-auto rounded-[50px] bg-gradient-to-l from-[#6EE7B7]/70 via-[#3B82F6] to-[#9333EA]/50 p-1 dark:from-[#D16FF8] dark:via-[#48E6E0] dark:to-[#C85EF6] md:h-60 md:rounded-tr-none md:rounded-br-none">
<div
className={`h-full rounded-[45px] bg-white dark:bg-dark-charcoal p-${isMobile ? '3.5' : '6 py-8'
} md:rounded-tr-none md:rounded-br-none`}
className={`h-full rounded-[45px] bg-white dark:bg-dark-charcoal p-${
isMobile ? '3.5' : '6 py-8'
} md:rounded-tr-none md:rounded-br-none`}
>
{/* Add Mobile check here */}
{isMobile ? (
<div className="flex justify-center">
<img
src={isDarkTheme ? "/message-text-dark.svg" : "/message-text.svg"}
src={
isDarkTheme ? '/message-text-dark.svg' : '/message-text.svg'
}
alt="lock"
className="h-[24px] w-[24px] "
/>
@@ -60,7 +67,9 @@ export default function Hero({ className = '' }: { className?: string }) {
) : (
<>
<img
src={isDarkTheme ? "/message-text-dark.svg" : "/message-text.svg"}
src={
isDarkTheme ? '/message-text-dark.svg' : '/message-text.svg'
}
alt="lock"
className="h-[24px] w-[24px]"
/>
@@ -84,22 +93,31 @@ export default function Hero({ className = '' }: { className?: string }) {
</div>
</div>
{/* second */}
<div className="h-auto md:h-60 rounded-[50px] bg-gradient-to-r from-[#6EE7B7]/70 dark:from-[#D16FF8] via-[#3B82F6] dark:via-[#48E6E0] to-[#9333EA]/50 dark:to-[#C85EF6] p-1 md:rounded-none md:py-1 md:px-0">
<div className="h-auto rounded-[50px] bg-gradient-to-r from-[#6EE7B7]/70 via-[#3B82F6] to-[#9333EA]/50 p-1 dark:from-[#D16FF8] dark:via-[#48E6E0] dark:to-[#C85EF6] md:h-60 md:rounded-none md:py-1 md:px-0">
<div
className={`h-full rounded-[45px] bg-white dark:bg-dark-charcoal p-${isMobile ? '3.5' : '6 py-6'
} md:rounded-none`}
className={`h-full rounded-[45px] bg-white dark:bg-dark-charcoal p-${
isMobile ? '3.5' : '6 py-6'
} md:rounded-none`}
>
{/* Add Mobile check here */}
{isMobile ? (
<div className="flex justify-center ">
<img src={isDarkTheme ? "/lock-dark.svg" : "/lock.svg"} alt="lock" className="h-[24px] w-[24px]" />
<img
src={isDarkTheme ? '/lock-dark.svg' : '/lock.svg'}
alt="lock"
className="h-[24px] w-[24px]"
/>
<h2 className="mb-0 pl-1 text-lg font-bold">
Secure Data Storage
</h2>
</div>
) : (
<>
<img src={isDarkTheme ? "/lock-dark.svg" : "/lock.svg"} alt="lock" className="h-[24px] w-[24px]" />
<img
src={isDarkTheme ? '/lock-dark.svg' : '/lock.svg'}
alt="lock"
className="h-[24px] w-[24px]"
/>
<h2 className="mt-2 mb-3 text-lg font-bold">
Secure Data Storage
</h2>
@@ -120,16 +138,21 @@ export default function Hero({ className = '' }: { className?: string }) {
</div>
</div>
{/* third */}
<div className="h-auto md:h-60 rounded-[50px] bg-gradient-to-l from-[#6EE7B7]/70 dark:from-[#D16FF8] via-[#3B82F6] dark:via-[#48E6E0] to-[#9333EA]/50 dark:to-[#C85EF6] p-1 md:rounded-tl-none md:rounded-bl-none ">
<div className="h-auto rounded-[50px] bg-gradient-to-l from-[#6EE7B7]/70 via-[#3B82F6] to-[#9333EA]/50 p-1 dark:from-[#D16FF8] dark:via-[#48E6E0] dark:to-[#C85EF6] md:h-60 md:rounded-tl-none md:rounded-bl-none ">
<div
className={`h-full firefox rounded-[45px] bg-white dark:bg-dark-charcoal p-${isMobile ? '3.5' : '6 px-6 '
} lg:rounded-tl-none lg:rounded-bl-none`}
className={`firefox h-full rounded-[45px] bg-white dark:bg-dark-charcoal p-${
isMobile ? '3.5' : '6 px-6 '
} lg:rounded-tl-none lg:rounded-bl-none`}
>
{/* Add Mobile check here */}
{isMobile ? (
<div className="flex justify-center">
<img
src={isDarkTheme ? "message-programming-dark.svg" : "/message-programming.svg"}
src={
isDarkTheme
? 'message-programming-dark.svg'
: '/message-programming.svg'
}
alt="lock"
className="h-[24px] w-[24px]"
/>
@@ -140,7 +163,11 @@ export default function Hero({ className = '' }: { className?: string }) {
) : (
<>
<img
src={isDarkTheme ? "/message-programming-dark.svg" : "/message-programming.svg"}
src={
isDarkTheme
? '/message-programming-dark.svg'
: '/message-programming.svg'
}
alt="lock"
className="h-[24px] w-[24px]"
/>