Merge pull request #473 from staticGuru/main

Hero section's figma UI changes
This commit is contained in:
Alex 2023-10-07 13:33:38 +01:00 committed by GitHub
commit 75100cd182
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -5,28 +5,26 @@ export default function Hero({ className = '' }: { className?: string }) {
<p className="mr-2 text-4xl font-semibold">DocsGPT</p> <p className="mr-2 text-4xl font-semibold">DocsGPT</p>
<p className="text-[27px]">🦖</p> <p className="text-[27px]">🦖</p>
</div> </div>
<p className="mb-3 text-center leading-6 text-black-1000"> <p className="mb-2 text-center text-sm font-normal leading-6 text-black-1000">
Welcome to DocsGPT, your technical documentation assistant! Welcome to DocsGPT, your technical documentation assistant!
</p> </p>
<p className="mb-3 text-center leading-6 text-black-1000"> <p className="mb-2 text-center text-sm font-normal leading-6 text-black-1000 ">
Enter a query related to the information in the documentation you Enter a query related to the information in the documentation you
selected to receive selected to receive and we will provide you with the most relevant
<br /> and we will provide you with the most relevant answers. answers.
</p> </p>
<p className="mb-3 text-center leading-6 text-black-1000"> <p className="mb-2 text-center text-sm font-normal leading-6 text-black-1000 ">
Start by entering your query in the input field below and we will do the Start by entering your query in the input field below and we will do the
rest! rest!
</p> </p>
<div className="sections mt-1 flex flex-wrap items-center justify-center gap-1 sm:gap-1 md:gap-0 "> <div className="sections mt-7 flex flex-wrap items-center justify-center gap-1 sm:gap-1 md:gap-0 ">
<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=" rounded-[28px] 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-6 md:rounded-tr-none md:rounded-br-none"> <div className="h-full rounded-[25px] bg-white p-6 md:rounded-tr-none md:rounded-br-none">
<img <img src="/message-text.svg" alt="lock" className="h-7 w-7" />
src="/message-text.svg" <h2 className="mt-2 mb-5 text-base font-normal leading-6">
alt="lock" Chat with Your Data
className="h-[24px] w-[24px]" </h2>
/> <p className="w-[300px] text-sm font-normal leading-6 text-black-1000">
<h2 className="mt-2 mb-3 text-lg font-bold">Chat with Your Data</h2>
<p className="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
@ -35,11 +33,13 @@ export default function Hero({ className = '' }: { className?: string }) {
</div> </div>
</div> </div>
<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=" rounded-[28px] 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="rounded-[45px] bg-white px-6 py-4 md:rounded-none"> <div className="rounded-[25px] bg-white px-6 py-6 md:rounded-none">
<img src="/lock.svg" alt="lock" className="h-[24px] w-[24px]" /> <img src="/lock.svg" alt="lock" className="h-7 w-7" />
<h2 className="mt-2 mb-3 text-lg font-bold">Secure Data Storage</h2> <h2 className="mt-2 mb-5 text-base font-normal leading-6">
<p className=" w-[250px] text-xs text-gray-500"> Secure Data Storage
</h2>
<p className=" w-[300px] text-sm font-normal leading-6 text-black-1000">
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
@ -47,15 +47,17 @@ export default function Hero({ className = '' }: { className?: string }) {
</p> </p>
</div> </div>
</div> </div>
<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"> <div className=" rounded-[28px] bg-gradient-to-l from-[#6EE7B7]/80 via-[#3B82F6] to-[#9333EA]/50 p-1 md:rounded-tl-none md:rounded-bl-none">
<div className="rounded-[45px] bg-white px-6 p-6 lg:rounded-tl-none lg:rounded-bl-none"> <div className="rounded-[25px] bg-white p-6 px-6 lg:rounded-tl-none lg:rounded-bl-none">
<img <img
src="/message-programming.svg" src="/message-programming.svg"
alt="lock" alt="lock"
className="h-[24px] w-[24px]" className="h-7 w-7"
/> />
<h2 className="mt-2 mb-3 text-lg font-bold">Open Source Code</h2> <h2 className="mt-2 mb-5 text-base font-normal leading-6">
<p className=" w-[250px] text-xs text-gray-500"> Open Source Code
</h2>
<p className=" w-[300px] text-sm font-normal leading-6 text-black-1000">
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