docs: fixed the Hero section (janhq#2447)

docs: fixed the Hero section
desczero · Mar 21, 2024 · b8e4a02 · b8e4a02
2 parents 678c18e + d088a30
commit b8e4a02
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 9 deletions.
diff --git a/docs/src/components/HomepagePrimaryFeatures/index.js b/docs/src/components/HomepagePrimaryFeatures/index.js
@@ -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>

diff --git a/docs/src/pages/docs.js b/docs/src/pages/docs.js
@@ -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>
+
   );
 }
 

diff --git a/docs/src/pages/docs.module.css b/docs/src/pages/docs.module.css
@@ -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;
+  }
+}