Nicholai/jan
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs: Fixed the Hero section

Browse Source
This commit is contained in:
Arista Indrajaya 2024-03-21 15:25:04 +07:00
parent 5b1b730f2b
commit 78b05f0280
3 changed files with 16 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
docs/src/components/HomepagePrimaryFeatures/index.js
View File

@ -6,25 +6,25 @@ export default function HomepagePrimaryFeatures() {
<div className="w-full md:w-1/2 h-72 md:h-84 flex-1 rounded-lg p-8 relative bg-gradient-to-r from-gray-100 to-blue-400 dark:from-gray-700 dark:to-blue-800 mb-8 md:mb-0">
<div className="mb-16">
<p className="text-lg mb-4">Installation</p>
<h3 className="text-1xl md:text-2xl lg:text-3xl font-semibold">Install Jan across multiple platforms.</h3>
<h3 className="text-1xl md:text-2xl xl:text-3xl font-semibold">Install Jan across multiple platforms.</h3>
</div>
<div>
<a href={"/guides/install"} className="btn bg-black hover:bg-gray-600 dark:bg-blue-500 text-normal md:text-xl text-white font-normal py-2 px-4 rounded-xl">Get Started</a>
</div>
<div className="absolute right-4 bottom-4">
<img alt={"Card Image"} src={"/img/homepage-new/rocket.png"} className="h-16 md:h-24" />
<img alt={"Card Image"} src={"/img/homepage-new/rocket.png"} className="h-12 lg:h-24" />
</div>
</div>
<div className="w-full md:w-1/2 h-72 md:h-84 flex-1 rounded-lg p-8 relative bg-gradient-to-r from-gray-100 to-purple-400 dark:from-gray-700 dark:to-purple-800">
<div className="mb-16">
<p className="text-lg mb-4">API Reference</p>
<h3 className="text-1xl md:text-2xl lg:text-3xl font-semibold">Interact with our API locally.</h3>
<h3 className="text-1xl md:text-2xl xl:text-3xl font-semibold">Interact with our API locally.</h3>
</div>
<div>
<a href={"/api-reference"} className="btn bg-black hover:bg-gray-600 dark:bg-blue-500 text-normal md:text-xl text-white font-normal py-2 px-4 rounded-xl">Get Started</a>
</div>
<div className="absolute right-4 bottom-4">
<img alt={"Card Image"} src={"/img/homepage-new/chat.png"} className="h-16 md:h-24" />
<img alt={"Card Image"} src={"/img/homepage-new/chat.png"} className="h-12 lg:h-24" />
</div>
</div>
</div>

8
docs/src/pages/docs.js
View File

@ -13,10 +13,10 @@ function HomepageHeader() {
const { siteConfig } = useDocusaurusContext();
return (
<header className="bg-white dark:bg-gray-800 py-16 h-[60vh] text-center relative overflow-hidden">
<header className="bg-white dark:bg-gray-800 py-16 h-[20%] 2xl:h-[80vh] text-center relative overflow-hidden">
<div className="bg-custom-img w-full h-full absolute top-0 left-0 bg-cover bg-center"></div>
<div className="container relative z-10">
<Heading as="h1" className="text-2xl md:text-3xl lg:text-5xl font-semibold text-white dark:text-gray-200 mb-8 mt-8">
<Heading as="h1" className="text-2xl lg:text-3xl xl:text-5xl 2xl:text-7xl font-semibold text-white dark:text-gray-200 mb-8 mt-8 2xl:mt-24 2xl:mb-16">
Hello, how can we help?
</Heading>
<div className={styles.searchBar}>
@ -28,12 +28,12 @@ function HomepageHeader() {
insight={true}
/>
</div>
<p className="text-lg md:text-xl lg:text-2xl text-white dark:text-gray-200 mt-8">
<p className="text-lg md:text-xl xl:text-2xl 2xl:text-4xl text-white dark:text-gray-200 mt-8 xl:mt-12">
Open-source ChatGPT alternative that runs 100% offline on your computer.
</p>
</div>
</header>
);
}

9
docs/src/pages/docs.module.css
View File

@ -6,7 +6,6 @@
margin-right: auto;
border-radius: 25px;
display: flex;
margin-bottom: 4rem;
}
.searchBar svg {
@ -44,3 +43,11 @@
padding: 0px 5px;
margin: 0px 10px;
}
@media screen and (min-width: 1400px) {
.searchBar {
max-width: 70%;
margin-left: auto;
margin-right: auto;
}
}