Archives/DocsGPT
2
0
Fork 0
mirror of https://github.com/arc53/DocsGPT synced 2024-11-03 23:15:37 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: mobile responsive hero page

Browse Source
This commit is contained in:
Varun Dhand 2023-10-31 18:56:18 +05:30
parent b4a940a8d6
commit 7ba939b008
1 changed files with 139 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

178
frontend/src/Hero.tsx
View File

@ -1,34 +1,81 @@
import { useMediaQuery } from './hooks';
import DocsGPT3 from './assets/cute_docsgpt3.svg'; import DocsGPT3 from './assets/cute_docsgpt3.svg';
export default function Hero({ className = '' }: { className?: string }) { export default function Hero({ className = '' }: { className?: string }) {
// const isMobile = window.innerWidth <= 768;
const { isMobile } = useMediaQuery();
return ( return (
<div className={`mt-14 mb-12 flex flex-col `}> <div className={`mt-14 ${isMobile ? 'mb-2' : 'mb-12'}flex flex-col `}>
<div className="mb-10 flex items-center justify-center "> <div className=" mb-2 flex items-center justify-center sm:mb-10">
<p className="mr-2 text-4xl font-semibold">DocsGPT</p> <p className="mr-2 text-4xl font-semibold">DocsGPT</p>
<img className="mb-2 h-14" src={DocsGPT3} alt="DocsGPT" /> <img className="mb-2 h-14" src={DocsGPT3} alt="DocsGPT" />
</div> </div>
<p className="mb-3 text-center leading-6 text-black-1000"> {isMobile ? (
Welcome to DocsGPT, your technical documentation assistant! <p className="mb-3 text-center leading-6 text-black-1000">
</p> Welcome to <span className="font-bold ">DocsGPT</span>, your technical
<p className="mb-3 text-center leading-6 text-black-1000"> documentation assistant! Start by entering your query in the input
Enter a query related to the information in the documentation you field below, and we&apos;ll provide you with the most relevant
selected to receive answers.
<br /> and we will provide you with the most relevant answers. </p>
</p> ) : (
<p className="mb-3 text-center leading-6 text-black-1000"> <>
Start by entering your query in the input field below and we will do the <p className="mb-3 text-center leading-6 text-black-1000">
rest! Welcome to DocsGPT, your technical documentation assistant!
</p> </p>
<div className="sections mt-8 flex flex-col items-center justify-center gap-1 sm:gap-0 lg:flex-row"> <p className="mb-3 text-center leading-6 text-black-1000">
<div className="relative mb-4 h-60 rounded-[25px] bg-gradient-to-l from-[#6EE7B7]/70 via-[#3B82F6] to-[#9333EA]/50 p-1 sm:mr-0 lg:rounded-r-none"> Enter a query related to the information in the documentation you
<div className="h-full rounded-[21px] bg-white p-6 lg:rounded-r-none"> selected to receive
<img <br /> and we will provide you with the most relevant answers.
src="/message-text.svg" </p>
alt="lock" <p className="mb-3 text-center leading-6 text-black-1000">
className="h-[24px] w-[24px]" Start by entering your query in the input field below and we will do
/> the rest!
<h2 className="mt-2 mb-3 text-lg font-bold">Chat with Your Data</h2> </p>
<p className="w-[250px] text-xs text-gray-500"> </>
)}
<div
className={`sections ${
isMobile ? '' : 'mt-1'
} flex flex-wrap items-center justify-center gap-2 sm:gap-1 md:gap-0`}
>
{/* first */}
<div className=" rounded-[50px] bg-gradient-to-l from-[#6EE7B7]/70 via-[#3B82F6] to-[#9333EA]/50 p-1 md:rounded-tr-none md:rounded-br-none">
<div
className={`h-full rounded-[45px] bg-white 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="/message-text.svg"
alt="lock"
className="h-[24px] w-[24px] "
/>
<h2 className="mb-0 pl-1 text-lg font-bold">
Chat with Your Data
</h2>
</div>
) : (
<>
<img
src="/message-text.svg"
alt="lock"
className="h-[24px] w-[24px]"
/>
<h2 className="mt-2 mb-3 text-lg font-bold">
Chat with Your Data
</h2>
</>
)}
<p
className={
isMobile
? `w-[250px] text-center text-xs text-gray-500`
: `w-[250px] text-xs text-gray-500`
}
>
DocsGPT will use your data to answer questions. Whether its DocsGPT will use your data to answer questions. Whether its
documentation, source code, or Microsoft files, DocsGPT allows you documentation, source code, or Microsoft files, DocsGPT allows you
to have interactive conversations and find answers based on the to have interactive conversations and find answers based on the
@ -36,12 +83,36 @@ export default function Hero({ className = '' }: { className?: string }) {
</p> </p>
</div> </div>
</div> </div>
{/* second */}
<div className="relative mb-4 h-60 rounded-[25px] bg-gradient-to-r from-[#6EE7B7]/70 via-[#3B82F6] to-[#9333EA]/50 p-1 sm:mr-0 lg:rounded-none lg:px-0"> <div className=" rounded-[50px] bg-gradient-to-r from-[#6EE7B7]/70 via-[#3B82F6] to-[#9333EA]/50 p-1 md:rounded-none md:py-1 md:px-0">
<div className="h-full rounded-[21px] bg-white p-6 lg:rounded-none"> <div
<img src="/lock.svg" alt="lock" className="h-[24px] w-[24px]" /> className={`rounded-[45px] bg-white p-${
<h2 className="mt-2 mb-3 text-lg font-bold">Secure Data Storage</h2> isMobile ? '3.5' : '6 py-6'
<p className=" w-[250px] text-xs text-gray-500"> } md:rounded-none`}
>
{/* Add Mobile check here */}
{isMobile ? (
<div className="flex justify-center">
<img src="/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="/lock.svg" alt="lock" className="h-[24px] w-[24px]" />
<h2 className="mt-2 mb-3 text-lg font-bold">
Secure Data Storage
</h2>
</>
)}
<p
className={
isMobile
? `w-[250px] text-center text-xs text-gray-500`
: `w-[250px] text-xs text-gray-500`
}
>
The security of your data is our top priority. DocsGPT ensures the The security of your data is our top priority. DocsGPT ensures the
utmost protection for your sensitive information. With secure data utmost protection for your sensitive information. With secure data
storage and privacy measures in place, you can trust that your storage and privacy measures in place, you can trust that your
@ -49,15 +120,44 @@ export default function Hero({ className = '' }: { className?: string }) {
</p> </p>
</div> </div>
</div> </div>
<div className="relative mb-4 h-60 rounded-[25px] bg-gradient-to-l from-[#6EE7B7]/70 via-[#3B82F6] to-[#9333EA]/50 p-1 lg:rounded-l-none"> {/* third */}
<div className="h-full rounded-[21px] bg-white p-6 lg:rounded-l-none"> <div className=" rounded-[50px] bg-gradient-to-l from-[#6EE7B7]/80 via-[#3B82F6] to-[#9333EA]/50 p-1 md:rounded-tl-none md:rounded-bl-none ">
<img <div
src="/message-programming.svg" className={`rounded-[45px] bg-white p-${
alt="lock" isMobile ? '3.5' : '6 px-6 '
className="h-[24px] w-[24px]" } lg:rounded-tl-none lg:rounded-bl-none`}
/> >
<h2 className="mt-2 mb-3 text-lg font-bold">Open Source Code</h2> {/* Add Mobile check here */}
<p className=" w-[250px] text-xs text-gray-500"> {isMobile ? (
<div className="flex justify-center">
<img
src="/message-programming.svg"
alt="lock"
className="h-[24px] w-[24px]"
/>
<h2 className="mb-0 pl-1 text-lg font-bold">
Open Source Code
</h2>
</div>
) : (
<>
<img
src="/message-programming.svg"
alt="lock"
className="h-[24px] w-[24px]"
/>
<h2 className="mt-2 mb-3 text-lg font-bold">
Open Source Code
</h2>
</>
)}
<p
className={
isMobile
? `w-[250px] text-center text-xs text-gray-500`
: `w-[250px] text-xs text-gray-500`
}
>
DocsGPT is built on open source principles, promoting transparency DocsGPT is built on open source principles, promoting transparency
and collaboration. The source code is freely available, enabling and collaboration. The source code is freely available, enabling
developers to contribute, enhance, and customize the app to meet developers to contribute, enhance, and customize the app to meet