Added custome field env for client side, and auto click next for feature section

docs/docusaurus.config.js

@@ -403,6 +403,11 @@ const config = {
     },
   },
 
+  // Put your custom environment here
+  customFields: {
+    apiKeyBrevo: process.env.API_KEY_BREVO,
+  },
+
   themes: ['@docusaurus/theme-live-codeblock', '@docusaurus/theme-mermaid'],
 }
 

docs/package.json

@@ -39,17 +39,17 @@
     "prism-react-renderer": "^1.3.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-hook-form": "^7.47.0",
     "react-icons": "^4.11.0",
     "react-tweet": "^3.2.0",
     "redocusaurus": "^2.0.0",
     "sass": "^1.69.3",
     "tailwind-merge": "^2.1.0",
-    "tailwindcss": "^3.3.3",
+    "tailwindcss": "^3.3.3"
-    "react-hook-form": "^7.47.0"
   },
   "devDependencies": {
     "@docusaurus/module-type-aliases": "^3.0.0",
-    "dotenv": "^16.3.1",
+    "dotenv": "^16.4.5",
     "tailwindcss-animate": "^1.0.7"
   },
   "browserslist": {

docs/src/containers/Footer/index.js

@@ -1,5 +1,6 @@
 import React from 'react'
 
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext'
 import { AiOutlineGithub, AiOutlineTwitter } from 'react-icons/ai'
 import { BiLogoDiscordAlt, BiLogoLinkedin } from 'react-icons/bi'
 import { useForm } from 'react-hook-form'
@@ -106,12 +107,16 @@ const menus = [
 const getCurrentYear = new Date().getFullYear()
 
 export default function Footer() {
-  const { register, handleSubmit } = useForm({
+  const { register, handleSubmit, reset } = useForm({
     defaultValues: {
       email: '',
     },
   })
 
+  const {
+    siteConfig: { customFields },
+  } = useDocusaurusContext()
+
   const onSubmit = (data) => {
     const { email } = data
     const options = {
@@ -119,7 +124,7 @@ export default function Footer() {
       headers: {
         'accept': 'application/json',
         'content-type': 'application/json',
-        'api-key': process.env.API_KEY_BREVO,
+        'api-key': customFields.apiKeyBrevo,
       },
       body: JSON.stringify({
         updateEnabled: false,
@@ -131,6 +136,11 @@ export default function Footer() {
     if (email) {
       fetch('https://api.brevo.com/v3/contacts', options)
         .then((response) => response.json())
+        .then((response) => {
+          if (response.id) {
+            reset()
+          }
+        })
         .catch((err) => console.error(err))
     }
   }

docs/src/pages/index.js

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useState, useEffect } from 'react'
 import DownloadApp from '@site/src/containers/DownloadApp'
 import { Tweet } from 'react-tweet'
 import { useForm } from 'react-hook-form'
@@ -21,7 +21,13 @@ import Dropdown from '@site/src/containers/Elements/dropdown'
 
 import useIsBrowser from '@docusaurus/useIsBrowser'
 
-const tabel = {
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext'
+
+import Svg from '@site/static/img/homepage/features01dark.svg'
+
+import { twMerge } from 'tailwind-merge'
+
+const table = {
   labels: [
     'Ownership',
     'Openness',
@@ -57,6 +63,26 @@ const tabel = {
   ],
 }
 
+const features = [
+  {
+    title: 'Run local AI or connect to remote APIs',
+    description:
+      'Choose between running AI models locally for privacy, like Llama or Mistral, or connect to remote APIs, like ChatGPT or Claude.',
+  },
+  {
+    title: 'Browse and download models',
+    description: `With Jan's Hub, instantly download popular AI models or import your own to expand your toolkit without hassle.`,
+  },
+  {
+    title: 'Use Jan in your natural workflows',
+    description: `Jan works with your workflow, ready to assist at a moment's notice without interrupting your work.`,
+  },
+  {
+    title: 'Customize and add features with Extensions',
+    description: `Tailor Jan exactly to your needs with Extensions, making your experience truly your own.`,
+  },
+]
+
 export default function Home() {
   const isBrowser = useIsBrowser()
   const { stargazers } = useAppStars()
@@ -71,12 +97,16 @@ export default function Home() {
   const userAgent = isBrowser && navigator.userAgent
   const isBrowserChrome = isBrowser && userAgent.includes('Chrome')
 
-  const { register, handleSubmit } = useForm({
+  const { register, handleSubmit, reset } = useForm({
     defaultValues: {
       email: '',
     },
   })
 
+  const {
+    siteConfig: { customFields },
+  } = useDocusaurusContext()
+
   const onSubmit = (data) => {
     const { email } = data
     const options = {
@@ -84,7 +114,7 @@ export default function Home() {
       headers: {
         'accept': 'application/json',
         'content-type': 'application/json',
-        'api-key': process.env.API_KEY_BREVO,
+        'api-key': customFields.apiKeyBrevo,
       },
       body: JSON.stringify({
         updateEnabled: false,
@@ -96,10 +126,30 @@ export default function Home() {
     if (email) {
       fetch('https://api.brevo.com/v3/contacts', options)
         .then((response) => response.json())
+        .then((response) => {
+          if (response.id) {
+            reset()
+          }
+        })
         .catch((err) => console.error(err))
     }
   }
 
+  const [activeFeature, setActiveFeature] = useState(0)
+
+  useEffect(() => {
+    if (activeFeature < 3) {
+      setTimeout(() => {
+        setActiveFeature(activeFeature + 1)
+      }, 5000)
+    }
+    if (activeFeature === 3) {
+      setTimeout(() => {
+        setActiveFeature(0)
+      }, 5000)
+    }
+  }, [activeFeature])
+
   return (
     <>
       <Banner />
@@ -243,14 +293,14 @@ export default function Home() {
 
           {/* Feature */}
           <div className="w-full xl:w-10/12 mx-auto relative py-8">
-            <div className="flex p-4 lg:justify-between flex-col lg:flex-row items-end">
+            <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">
                   Jan redefines <br className="hidden lg:block" /> how we use
                   computers
                 </h1>
               </div>
-              <div className="mt-10 w-full lg:w-1/2 mr-auto text-right">
+              <div className="mt-10 w-full lg:w-1/2 mr-auto lg:text-right">
                 <a
                   className="mt-6 text-blue-600 dark:text-blue-400 cursor-pointer"
                   href="https://jan.ai/features/"
@@ -260,6 +310,47 @@ export default function Home() {
                 </a>
               </div>
             </div>
+
+            <div className="flex items-center gap-8 mt-10">
+              <div className="w-full lg:w-2/5 px-4 lg:p-0">
+                {features.map((feature, i) => {
+                  const isActive = activeFeature === i
+                  return (
+                    <div
+                      key={i}
+                      className="mb-4 dark:bg-[#1F1F1F] bg-[#F5F5F5] p-6 rounded-xl cursor-pointer"
+                      onClick={() => setActiveFeature(i)}
+                    >
+                      <div
+                        className={twMerge(
+                          'flex items-center gap-4',
+                          isActive && 'items-start'
+                        )}
+                      >
+                        <h1 className="dark:text-[#4C4C4C] text-[#C4C4C4]">
+                          0{i + 1}
+                        </h1>
+                        <div>
+                          <h6 className="text-xl">{feature.title}</h6>
+                          <p
+                            className={twMerge(
+                              'mt-1 leading-relaxed text-black/60 dark:text-white/60 hidden',
+                              isActive && 'block'
+                            )}
+                          >
+                            {feature.description}
+                          </p>
+                        </div>
+                      </div>
+                    </div>
+                  )
+                })}
+              </div>
+
+              <div className="relative w-full -right-[10%] rounded-l-3xl overflow-hidden">
+                <Svg />
+              </div>
+            </div>
           </div>
 
           {/* Philosophy */}
@@ -471,7 +562,7 @@ export default function Home() {
               <div className="mt-20 flex dark:bg-[#181818] bg-[#FAFAFA] border border-gray-300 dark:border-gray-600 rounded-t-2xl border-b-0">
                 <div className="w-56 lg:w-80 border-r border-gray-300 dark:border-gray-600">
                   <div className="p-7"></div>
-                  {tabel.labels.map((label, i) => {
+                  {table.labels.map((label, i) => {
                     return (
                       <div
                         className="border-t border-gray-300 dark:border-gray-600 p-4 font-bold text-left"
@@ -486,7 +577,7 @@ export default function Home() {
 
                 <div className="w-full lg:w-1/2 border-r border-gray-300 dark:border-gray-600 hidden md:block">
                   <h6 className="p-4 mb-0">Status Quo</h6>
-                  {tabel.statusQuo.map((label, i) => {
+                  {table.statusQuo.map((label, i) => {
                     return (
                       <div
                         className="border-t border-gray-300 dark:border-gray-600 p-4"
@@ -510,7 +601,7 @@ export default function Home() {
                     />
                     <h6 className="mb-0">Jan</h6>
                   </div>
-                  {tabel.jan.map((label, i) => {
+                  {table.jan.map((label, i) => {
                     return (
                       <div
                         className="border-t border-gray-300 dark:border-gray-600 p-4"

docs/yarn.lock

@@ -5166,10 +5166,10 @@ dot-prop@^6.0.1:
   dependencies:
     is-obj "^2.0.0"
 
-dotenv@^16.3.1:
+dotenv@^16.4.5:
-  version "16.3.1"
+  version "16.4.5"
-  resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-16.3.1.tgz#369034de7d7e5b120972693352a3bf112172cc3e"
+  resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-16.4.5.tgz#cdd3b3b604cb327e286b4762e13502f717cb099f"
-  integrity sha512-IPzF4w4/Rd94bA9imS68tZBaYyBWSCE47V1RGuMrB94iyTOIEwRmVL2x/4An+6mETpLrKJ5hQkB8W4kFAadeIQ==
+  integrity sha512-ZmdL2rui+eB2YwhsWzjInR8LldtZHGDoQ1ugH85ppHKwpUHL7j7rN0Ti9NCnGiQbhaZ11FpR+7ao1dNsmduNUg==
 
 duplexer@^0.1.2:
   version "0.1.2"