Improvement feedback

docs/src/containers/Banner/index.js

@@ -5,6 +5,7 @@ import { useAppRelease } from '@site/src/hooks/useAppRelease'
 
 import { AiOutlineGithub, AiOutlineTwitter } from 'react-icons/ai'
 import { BiLogoDiscordAlt } from 'react-icons/bi'
+import { FaLinkedin } from 'react-icons/fa'
 
 const socials = [
   {
@@ -19,6 +20,10 @@ const socials = [
     icon: <AiOutlineGithub className="text-lg text-white" />,
     href: 'https://github.com/janhq/jan',
   },
+  {
+    icon: <FaLinkedin className="text-lg text-white" />,
+    href: 'https://www.linkedin.com/company/janframework/',
+  },
 ]
 
 export default function AnnoncementBanner() {

docs/src/containers/Footer/index.js

@@ -34,25 +34,34 @@ const socials = [
 
 const menus = [
   {
-    name: 'For Developers',
+    name: 'Product',
     child: [
       {
         menu: 'Documentation',
         path: '/developer',
       },
       {
-        menu: 'Hardware',
+        menu: 'Changelog',
-        path: '/hardware',
+        path: 'https://github.com/janhq/jan/releases',
+        external: true,
+      },
+    ],
+  },
+  {
+    name: 'For Developers',
+    child: [
+      {
+        menu: 'Guides',
+        path: '/guides',
+      },
+      {
+        menu: 'Developer',
+        path: '/developer',
       },
       {
         menu: 'API Reference',
         path: '/api-reference',
       },
-      {
-        menu: 'Changelog',
-        path: 'https://github.com/janhq/jan/releases',
-        external: true,
-      },
     ],
   },
   {
@@ -149,12 +158,12 @@ export default function Footer() {
     <footer className="flex-shrink-0 relative overflow-hidden py-10">
       <div className="container">
         <div className="grid grid-cols-2 gap-8 md:grid-cols-2 lg:grid-cols-6">
-          <div className="lg:col-span-3 col-span-2">
+          <div className="col-span-2">
             <div className="flex items-center space-x-2 mb-3">
               <img alt="Jan Logo" src="/img/logo.svg" />
-              <h2 className="h6">Jan</h2>
+              <h2 className="h5">Jan</h2>
             </div>
-            <div className="w-full lg:w-1/2 mt-2">
+            <div className="w-full lg:w-3/4 mt-2">
               <h6>The Soul of a New Machine</h6>
               <p className="dark:text-gray-400 text-gray-600 mt-2">
                 Subscribe to our newsletter on AI{' '}
@@ -166,7 +175,7 @@ export default function Footer() {
                 <form className="relative" onSubmit={handleSubmit(onSubmit)}>
                   <input
                     type="email"
-                    className="w-full h-12 p-4 pr-14 rounded-xl border dark:border-gray-600 border-gray-300 dark:bg-[#252525]"
+                    className="w-full h-12 p-4 pr-14 rounded-xl border dark:border-gray-600 dark:bg-[#252525] border-[#F0F0F0]"
                     placeholder="Enter your email"
                     {...register('email')}
                   />

docs/src/containers/Testimonial/index.js

@@ -82,14 +82,185 @@ const Testimonial = () => {
         <h1 className="text-5xl !font-normal leading-tight lg:leading-tight mt-2 font-serif">
           People say nice things
         </h1>
-        <p className="leading-relaxed mt-2 text-black/60 dark:text-white/60">
+        <p className="leading-relaxed mt-2 text-black/60 dark:text-white/60 flex gap-x-2 justify-center">
-          ...despite our bugs and fast moving releases
+          ...despite our bugs and fast moving releases{' '}
+          <svg
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <g clip-path="url(#clip0_1810_7276)">
+              <path
+                d="M24.0001 11.4301H22.8601V19.4326H24.0001V11.4301Z"
+                className="fill-black/60 dark:fill-white/60"
+              />
+              <path
+                d="M22.8599 19.4325H21.7124V20.5725H22.8599V19.4325Z"
+                className="fill-black/60 dark:fill-white/60"
+              />
+              <path
+                d="M22.8599 9.14246H21.7124V11.43H22.8599V9.14246Z"
+                className="fill-black/60 dark:fill-white/60"
+              />
+              <path
+                d="M21.7125 20.5725H20.5725V21.72H21.7125V20.5725Z"
+                className="fill-black/60 dark:fill-white/60"
+              />
+              <path
+                d="M21.7125 6.86255H20.5725V9.14255H21.7125V6.86255Z"
+                className="fill-black/60 dark:fill-white/60"
+              />
+              <path
+                d="M20.5726 21.72H19.4326V22.86H20.5726V21.72Z"
+                className="fill-black/60 dark:fill-white/60"
+              />
+              <path
+                d="M20.5726 5.71497H19.4326V6.86247H20.5726V5.71497Z"
+                className="fill-black/60 dark:fill-white/60"
+              />
+              <path
+                d="M19.4324 2.28748H18.2849V5.71498H19.4324V2.28748Z"
+                className="fill-black/60 dark:fill-white/60"
+              />
+              <path
+                d="M12.5701 22.86V21.72H14.8576V20.5725H11.4301V21.72H5.71509V22.86H11.4301V24H19.4326V22.86H12.5701Z"
+                className="fill-black/60 dark:fill-white/60"
+              />
+              <path
+                d="M18.285 1.14746H17.145V2.28746H18.285V1.14746Z"
+                className="fill-black/60 dark:fill-white/60"
+              />
+              <path
+                d="M17.1449 11.4301H14.8574V12.5701H17.1449V11.4301Z"
+                className="fill-black/60 dark:fill-white/60"
+              />
+              <path
+                d="M16.0049 19.4325H14.8574V20.5725H16.0049V19.4325Z"
+                className="fill-black/60 dark:fill-white/60"
+              />
+              <path
+                d="M17.145 0H13.7175V1.1475H17.145V0Z"
+                className="fill-black/60 dark:fill-white/60"
+              />
+              <path
+                d="M14.8575 18.285H13.7175V19.4325H14.8575V18.285Z"
+                className="fill-black/60 dark:fill-white/60"
+              />
+              <path
+                d="M14.8575 12.5699H13.7175V13.7174H14.8575V12.5699Z"
+                className="fill-black/60 dark:fill-white/60"
+              />
+              <path
+                d="M16.005 2.28748H13.7175V4.57498H16.005V2.28748Z"
+                className="fill-black/60 dark:fill-white/60"
+              />
+              <path
+                d="M13.7176 13.7175H12.5701V18.285H13.7176V13.7175Z"
+                className="fill-black/60 dark:fill-white/60"
+              />
+              <path
+                d="M13.7176 1.14746H12.5701V2.28746H13.7176V1.14746Z"
+                className="fill-black/60 dark:fill-white/60"
+              />
+              <path
+                d="M12.5699 2.28748H11.4299V4.57498H12.5699V2.28748Z"
+                className="fill-black/60 dark:fill-white/60"
+              />
+              <path
+                d="M11.43 19.4325H10.29V20.5725H11.43V19.4325Z"
+                className="fill-black/60 dark:fill-white/60"
+              />
+              <path
+                d="M10.2901 16.005H9.14258V19.4325H10.2901V16.005Z"
+                className="fill-black/60 dark:fill-white/60"
+              />
+              <path
+                d="M11.4301 4.57495H9.14258V5.71495H11.4301V4.57495Z"
+                className="fill-black/60 dark:fill-white/60"
+              />
+              <path
+                d="M9.14244 14.8575H8.00244V16.005H9.14244V14.8575Z"
+                className="fill-black/60 dark:fill-white/60"
+              />
+              <path
+                d="M9.14244 6.86255H8.00244V8.00255H9.14244V6.86255Z"
+                className="fill-black/60 dark:fill-white/60"
+              />
+              <path
+                d="M9.14244 2.28748H8.00244V4.57498H9.14244V2.28748Z"
+                className="fill-black/60 dark:fill-white/60"
+              />
+              <path
+                d="M8.00255 1.14746H6.86255V2.28746H8.00255V1.14746Z"
+                className="fill-black/60 dark:fill-white/60"
+              />
+              <path
+                d="M8.00245 8.00244H4.57495V9.14244H8.00245V8.00244Z"
+                className="fill-black/60 dark:fill-white/60"
+              />
+              <path
+                d="M5.71495 20.5725H4.57495V21.72H5.71495V20.5725Z"
+                className="fill-black/60 dark:fill-white/60"
+              />
+              <path
+                d="M6.86249 0H3.42749V1.1475H6.86249V0Z"
+                className="fill-black/60 dark:fill-white/60"
+              />
+              <path
+                d="M1.1475 22.86V21.72H0V24H5.715V22.86H1.1475Z"
+                className="fill-black/60 dark:fill-white/60"
+              />
+              <path
+                d="M8.0026 13.7175H2.2876V14.8575H8.0026V13.7175Z"
+                className="fill-black/60 dark:fill-white/60"
+              />
+              <path
+                d="M5.71499 2.28748H3.42749V4.57498H5.71499V2.28748Z"
+                className="fill-black/60 dark:fill-white/60"
+              />
+              <path
+                d="M3.42746 20.5725H4.57496V19.4325H2.28746V20.5725H1.14746V21.72H3.42746V20.5725Z"
+                className="fill-black/60 dark:fill-white/60"
+              />
+              <path
+                d="M3.4276 5.71497H2.2876V8.00247H3.4276V5.71497Z"
+                className="fill-black/60 dark:fill-white/60"
+              />
+              <path
+                d="M3.4276 1.14746H2.2876V2.28746H3.4276V1.14746Z"
+                className="fill-black/60 dark:fill-white/60"
+              />
+              <path
+                d="M2.28746 18.285H1.14746V19.4325H2.28746V18.285Z"
+                className="fill-black/60 dark:fill-white/60"
+              />
+              <path
+                d="M2.28746 8.00244H1.14746V10.2899H2.28746V8.00244Z"
+                className="fill-black/60 dark:fill-white/60"
+              />
+              <path
+                d="M2.28746 2.28748H1.14746V5.71498H2.28746V2.28748Z"
+                className="fill-black/60 dark:fill-white/60"
+              />
+              <path
+                d="M2.2875 16.005V14.8575H1.1475V10.29H0V18.285H1.1475V16.005H2.2875Z"
+                className="fill-black/60 dark:fill-white/60"
+              />
+            </g>
+            <defs>
+              <clipPath id="clip0_1810_7276">
+                <rect width="24" height="24" fill="white" />
+              </clipPath>
+            </defs>
+          </svg>
         </p>
       </div>
       <div className="w-full xl:w-3/4 mx-auto relative text-center">
         <div data-theme={colorMode} className="mt-10">
-          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 text-left">
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 lg:gap-8 text-left">
-            <div className="space-y-4">
+            <div className="space-y-4 lg:space-y-8">
               {firstColumn.map((item, i) => {
                 if (item.type === 'tweet')
                   return (
@@ -114,7 +285,7 @@ const Testimonial = () => {
                   )
               })}
             </div>
-            <div className="space-y-4">
+            <div className="space-y-4 lg:space-y-8">
               {secondColumn.map((item, i) => {
                 if (item.type === 'tweet')
                   return (
@@ -139,7 +310,7 @@ const Testimonial = () => {
                   )
               })}
             </div>
-            <div className="space-y-4">
+            <div className="space-y-4 lg:space-y-8">
               {thirdColumn.map((item, i) => {
                 if (item.type === 'tweet')
                   return (
@@ -164,7 +335,7 @@ const Testimonial = () => {
                   )
               })}
             </div>
-            <div className="space-y-4">
+            <div className="space-y-4 lg:space-y-8">
               {fourthColumn.map((item, i) => {
                 if (item.type === 'tweet')
                   return (

docs/src/pages/index.js

@@ -210,7 +210,7 @@ export default function Home() {
               <a
                 href="https://github.com/janhq/jan"
                 target="_blank"
-                className="card-wrapper dark:card-wrapper-dark p-4 inline-flex px-4 py-3 rounded-lg cursor-pointer justify-center items-start space-x-4 "
+                className="card-wrapper dark:card-wrapper-dark p-4 inline-flex px-4 py-3 rounded-lg cursor-pointer justify-center items-start space-x-4 min-h-28"
               >
                 <span>
                   <FaGithub className="text-3xl" />
@@ -218,8 +218,8 @@ export default function Home() {
                 <div className="flex-col">
                   <div className="flex items-center gap-2">
                     <h6 className="text-base">Github</h6>
-                    <div className="text-sm text-black dark:text-white flex items-center space-x-1 py-1 px-2 rounded-md bg-[#E9E9E9] dark:bg-[#484748]">
+                    <div className="text-sm text-black/60 dark:text-white/60 flex items-center space-x-1 py-1 px-2 rounded-md bg-[#E9E9E9] dark:bg-[#484748]">
-                      <RiStarSFill className="text-lg text-[#FEC928]" />
+                      <RiStarSFill className="text-lg text-[#CA8A04]" />
                       <span className="font-semibold">
                         {stargazers.count} stars
                       </span>
@@ -233,7 +233,7 @@ export default function Home() {
               <a
                 href="https://discord.gg/FTk2MvZwJH"
                 target="_blank"
-                className="card-wrapper dark:card-wrapper-dark p-4 inline-flex px-4 py-3 rounded-lg cursor-pointer justify-center items-start space-x-4 "
+                className="card-wrapper dark:card-wrapper-dark p-4 inline-flex px-4 py-3 rounded-lg cursor-pointer justify-center items-start space-x-4 min-h-28"
               >
                 <span>
                   <FaDiscord className="text-3xl" />
@@ -241,7 +241,7 @@ export default function Home() {
                 <div className="flex-col">
                   <div className="flex items-center gap-2">
                     <h6 className="text-base">Discord</h6>
-                    <div className="text-sm text-black dark:text-white flex items-center space-x-1 py-1 px-2 rounded-md bg-[#E9E9E9] dark:bg-[#484748]">
+                    <div className="text-sm text-black/60 dark:text-white/60 flex items-center space-x-1 py-1 px-2 rounded-md bg-[#E9E9E9] dark:bg-[#484748]">
                       <div className="w-2 h-2 bg-green-500 rounded-full" />
                       <span className="font-semibold">
                         {data.presence_count} online
@@ -257,7 +257,7 @@ export default function Home() {
               <a
                 href="https://github.com/orgs/janhq/projects/5/views/16"
                 target="_blank"
-                className="card-wrapper dark:card-wrapper-dark p-4 inline-flex px-4 py-3 rounded-lg cursor-pointer justify-center items-start space-x-4 "
+                className="card-wrapper dark:card-wrapper-dark p-4 inline-flex px-4 py-3 rounded-lg cursor-pointer justify-center items-start space-x-4 min-h-28"
               >
                 <span>
                   <IoMapOutline className="text-3xl" />
@@ -278,7 +278,7 @@ export default function Home() {
           <Testimonial />
 
           {/* Feature */}
-          <div className="w-full xl:w-10/12 mx-auto relative py-8">
+          <div className="w-full xl:w-10/12 mx-auto relative py-8 lg:pt-24">
             <div className="flex p-4 lg:px-0 lg:justify-between flex-col lg:flex-row items-end">
               <div className="w-full">
                 <h1 className="text-5xl lg:text-7xl !font-normal leading-tight lg:leading-tight mt-2 font-serif">
@@ -313,7 +313,7 @@ export default function Home() {
                           isActive && 'items-start'
                         )}
                       >
-                        <h1 className="dark:text-[#4C4C4C] text-[#C4C4C4]">
+                        <h1 className="dark:text-[#4C4C4C] text-[#C4C4C4] text-[32px]">
                           0{i + 1}
                         </h1>
                         <div>
@@ -375,13 +375,89 @@ export default function Home() {
           </div>
 
           {/* Philosophy */}
-          <div className="px-4 lg:px-8 mt-10 lg:mt-20 border-y border-gray-300 dark:border-gray-800">
+          <div className="px-4 lg:px-8 mt-10 lg:mt-20 border-y border-[#F0F0F0] dark:border-gray-800">
             <div className="w-full xl:w-3/4 mx-auto relative pt-8 text-center">
               <h1 className="text-5xl !font-normal leading-tight lg:leading-tight mt-2 font-serif">
                 Our Philosophy
               </h1>
-              <p className="leading-relaxed mt-2 text-black/60 dark:text-white/60">
+              <p className="leading-relaxed mt-2 text-black/60 dark:text-white/60 flex gap-x-2 justify-center">
-                Jan is opinionated software on what AI should be
+                Jan is opinionated software on what AI should be{' '}
+                <svg
+                  width="24"
+                  height="24"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M10.5 0H15V1.5H13.5V3H18V4.5H16.5V6H15V7.5H13.5V9H12V10.5H13.5V12H15V13.5H10.5V16.5H9V12H7.5V10.5H6V9H7.5V7.5H9V6H10.5V4.5H12V1.5H10.5V0Z"
+                    className="fill-black/60 dark:fill-white/60"
+                  />
+                  <path
+                    d="M21 0H22.5V1.5H21V0Z"
+                    className="fill-black/60 dark:fill-white/60"
+                  />
+                  <path
+                    d="M9 1.5H10.5V4.5H9V1.5Z"
+                    className="fill-black/60 dark:fill-white/60"
+                  />
+                  <path
+                    d="M18 1.5H21V3H18V1.5Z"
+                    className="fill-black/60 dark:fill-white/60"
+                  />
+                  <path
+                    d="M4.5 10.5H6V12H4.5V10.5Z"
+                    className="fill-black/60 dark:fill-white/60"
+                  />
+                  <path
+                    d="M3 12H4.5V13.5H3V12Z"
+                    className="fill-black/60 dark:fill-white/60"
+                  />
+                  <path
+                    d="M0 13.5H3V15H0V13.5Z"
+                    className="fill-black/60 dark:fill-white/60"
+                  />
+                  <path
+                    d="M15 13.5H16.5V15H21V16.5H15V13.5Z"
+                    className="fill-black/60 dark:fill-white/60"
+                  />
+                  <path
+                    d="M7.5 16.5H9V18H12V19.5H7.5V21H3V19.5H6V18H7.5V16.5Z"
+                    className="fill-black/60 dark:fill-white/60"
+                  />
+                  <path
+                    d="M12 16.5H15V18H12V16.5Z"
+                    className="fill-black/60 dark:fill-white/60"
+                  />
+                  <path
+                    d="M21 16.5H22.5V18H21V16.5Z"
+                    className="fill-black/60 dark:fill-white/60"
+                  />
+                  <path
+                    d="M15 18H16.5V19.5H15V18Z"
+                    className="fill-black/60 dark:fill-white/60"
+                  />
+                  <path
+                    d="M19.5 18H21V19.5H19.5V18Z"
+                    className="fill-black/60 dark:fill-white/60"
+                  />
+                  <path
+                    d="M16.5 19.5H19.5V21H16.5V19.5Z"
+                    className="fill-black/60 dark:fill-white/60"
+                  />
+                  <path
+                    d="M1.5 21H3V22.5H1.5V21Z"
+                    className="fill-black/60 dark:fill-white/60"
+                  />
+                  <path
+                    d="M7.5 21H9V22.5H12V24H3V22.5H7.5V21Z"
+                    className="fill-black/60 dark:fill-white/60"
+                  />
+                  <path
+                    d="M12 21H16.5V22.5H12V21Z"
+                    className="fill-black/60 dark:fill-white/60"
+                  />
+                </svg>
               </p>
 
               <div className="grid grid-cols-1 lg:grid-cols-3 gap-8 text-left mt-16">
@@ -649,8 +725,8 @@ export default function Home() {
                     className="w-28 mx-auto h-auto"
                     alt="App screenshots"
                     sources={{
-                      light: useBaseUrl('/img/homepage/mac-system-black.webp'),
+                      light: useBaseUrl('/img/homepage/mac-system-black.svg'),
-                      dark: useBaseUrl('/img/homepage/mac-system-white.webp'),
+                      dark: useBaseUrl('/img/homepage/mac-system-white.svg'),
                     }}
                   />
                   <h1 className="text-5xl lg:text-7xl !font-normal leading-tight lg:leading-tight mt-2 font-serif">
@@ -667,7 +743,7 @@ export default function Home() {
                     >
                       <input
                         type="email"
-                        className="w-full h-16 p-4 pr-14 rounded-xl border border-gray-600 dark:bg-white/10"
+                        className="w-full h-16 p-4 pr-14 rounded-xl border border-[#F0F0F0] dark:bg-white/10 dark:border-gray-600"
                         placeholder="Enter your email"
                         {...register('email')}
                       />

docs/src/styles/components/base.scss

@@ -167,3 +167,7 @@
     margin-top: 10px;
   }
 }
+
+.font-serif {
+  letter-spacing: -4px;
+}

docs/src/styles/main.scss

@@ -1,4 +1,4 @@
-@import url('https://fonts.googleapis.com/css2?family=Arapey&family=Inter:wght@100..900&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100..700;1,100..700&display=swap&family=Inter:wght@100..900&display=swap');
 
 @import 'tailwindcss/base';
 @import 'tailwindcss/components';

docs/tailwind.config.js

@@ -56,7 +56,7 @@ module.exports = {
         'Helvetica',
         'sans-serif',
       ],
-      serif: ['Arapey'],
+      serif: ['Josefin Sans'],
     },
     extend: {
       backgroundImage: {