Added section wall of love or testimonial

docs/src/containers/Testimonial/index.js

@@ -0,0 +1,175 @@
+import { useColorMode } from '@docusaurus/theme-common'
+import { Tweet } from 'react-tweet'
+
+const firstColumn = [
+  {
+    type: 'tweet',
+    id: '1742843063938994469',
+  },
+  {
+    type: 'youtube',
+    id: 'ZCiEQVOjH5U',
+  },
+  {
+    type: 'youtube',
+    id: '7JpzE-_cKo4',
+  },
+  {
+    type: 'tweet',
+    id: '1744729548074459310',
+  },
+]
+
+const secondColumn = [
+  {
+    type: 'youtube',
+    id: 'QpMQgJL4AZA',
+  },
+  {
+    type: 'tweet',
+    id: '1750801065132384302',
+  },
+  {
+    type: 'youtube',
+    id: '9ta2S425Zu8',
+  },
+  {
+    type: 'tweet',
+    id: '1757504717519749292',
+  },
+]
+
+const thirdColumn = [
+  {
+    type: 'tweet',
+    id: '1745560583548670250',
+  },
+  {
+    type: 'youtube',
+    id: 'zkafOIyQM8s',
+  },
+  {
+    type: 'tweet',
+    id: '1757500111629025788',
+  },
+]
+
+const fourthColumn = [
+  {
+    type: 'tweet',
+    id: '1742993414986068423',
+  },
+  {
+    type: 'youtube',
+    id: '9ta2S425Zu8',
+  },
+  {
+    type: 'youtube',
+    id: 'ES021_sY6WQ',
+  },
+  {
+    type: 'youtube',
+    id: 'CbJGxNmdWws',
+  },
+]
+
+const Testimonial = () => {
+  const { colorMode } = useColorMode()
+
+  return (
+    <div className="bg-[#F0F0F0] dark:bg-[#242424] p-8 mt-10 pb-20">
+      <div className="w-full xl:w-3/5 mx-auto relative py-8 text-center">
+        <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">
+          ...despite our bugs and fast moving releases
+        </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="space-y-4">
+              {firstColumn.map((item, i) => {
+                if (item.type === 'tweet') return <Tweet key={i} id={item.id} />
+                if (item.type === 'youtube')
+                  return (
+                    <div>
+                      <iframe
+                        width="100%"
+                        height="260"
+                        src={`https://www.youtube.com/embed/${item.id}`}
+                        title="Install Jan to Run LLM Offline and Local First"
+                        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+                        allowfullscreen
+                        className="rounded-xl"
+                      />
+                    </div>
+                  )
+              })}
+            </div>
+            <div className="space-y-4">
+              {secondColumn.map((item, i) => {
+                if (item.type === 'tweet') return <Tweet key={i} id={item.id} />
+                if (item.type === 'youtube')
+                  return (
+                    <div>
+                      <iframe
+                        width="100%"
+                        height="260"
+                        src={`https://www.youtube.com/embed/${item.id}`}
+                        title="Install Jan to Run LLM Offline and Local First"
+                        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+                        allowfullscreen
+                        className="rounded-xl"
+                      />
+                    </div>
+                  )
+              })}
+            </div>
+            <div className="space-y-4">
+              {thirdColumn.map((item, i) => {
+                if (item.type === 'tweet') return <Tweet key={i} id={item.id} />
+                if (item.type === 'youtube')
+                  return (
+                    <div>
+                      <iframe
+                        width="100%"
+                        height="260"
+                        src={`https://www.youtube.com/embed/${item.id}`}
+                        title="Install Jan to Run LLM Offline and Local First"
+                        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+                        allowfullscreen
+                        className="rounded-xl"
+                      />
+                    </div>
+                  )
+              })}
+            </div>
+            <div className="space-y-4">
+              {fourthColumn.map((item, i) => {
+                if (item.type === 'tweet') return <Tweet key={i} id={item.id} />
+                if (item.type === 'youtube')
+                  return (
+                    <div>
+                      <iframe
+                        width="100%"
+                        height="260"
+                        src={`https://www.youtube.com/embed/${item.id}`}
+                        title="Install Jan to Run LLM Offline and Local First"
+                        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+                        allowfullscreen
+                        className="rounded-xl"
+                      />
+                    </div>
+                  )
+              })}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default Testimonial

docs/src/pages/index.js

@@ -1,6 +1,5 @@
 import React, { useState, useEffect } from 'react'
 import DownloadApp from '@site/src/containers/DownloadApp'
-import { Tweet } from 'react-tweet'
 import { useForm } from 'react-hook-form'
 
 import useBaseUrl from '@docusaurus/useBaseUrl'
@@ -27,6 +26,8 @@ import Svg from '@site/static/img/homepage/features01dark.svg'
 
 import { twMerge } from 'tailwind-merge'
 
+import Testimonial from '@site/src/containers/Testimonial'
+
 const table = {
   labels: [
     'Ownership',
@@ -280,16 +281,7 @@ export default function Home() {
           </div>
 
           {/* Wall of love */}
-          <div className="bg-[#F0F0F0] dark:bg-[#242424] p-8 mt-20">
+          <Testimonial />
-            <div className="w-full xl:w-3/5 mx-auto relative py-8 text-center">
-              <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">
-                ...despite our bugs and fast moving releases
-              </p>
-            </div>
-          </div>
 
           {/* Feature */}
           <div className="w-full xl:w-10/12 mx-auto relative py-8">
@@ -729,6 +721,12 @@ export default function Home() {
               </div>
             </div>
           </div>
+
+          {!isBrowserChrome && (
+            <div className="my-10" id="download-section">
+              <DownloadApp />
+            </div>
+          )}
         </main>
       </Layout>
     </>

docs/src/styles/components/base.scss

@@ -27,6 +27,92 @@
     --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
   }
 
+  .react-tweet-theme {
+    --tweet-container-margin: 1.5rem 0;
+    --tweet-header-font-size: 0.9375rem;
+    --tweet-header-line-height: 1.25rem;
+    --tweet-body-font-size: 1.25rem;
+    --tweet-body-font-weight: 400;
+    --tweet-body-line-height: 1.5rem;
+    --tweet-body-margin: 0;
+    --tweet-quoted-container-margin: 0.75rem 0;
+    --tweet-quoted-body-font-size: 0.938rem;
+    --tweet-quoted-body-font-weight: 400;
+    --tweet-quoted-body-line-height: 1.25rem;
+    --tweet-quoted-body-margin: 0.25rem 0 0.75rem 0;
+    --tweet-info-font-size: 0.9375rem;
+    --tweet-info-line-height: 1.25rem;
+    --tweet-actions-font-size: 0.875rem;
+    --tweet-actions-line-height: 1rem;
+    --tweet-actions-font-weight: 700;
+    --tweet-actions-icon-size: 1.25em;
+    --tweet-actions-icon-wrapper-size: calc(
+      var(--tweet-actions-icon-size) + 0.75em
+    );
+    --tweet-replies-font-size: 0.875rem;
+    --tweet-replies-line-height: 1rem;
+    --tweet-replies-font-weight: 700;
+  }
+
+  :is([data-theme='light'], .light) :where(.react-tweet-theme),
+  :where(.react-tweet-theme) {
+    --tweet-skeleton-gradient: linear-gradient(
+      270deg,
+      #fafafa,
+      #eaeaea,
+      #eaeaea,
+      #fafafa
+    );
+    --tweet-border: 1px solid #cfd9de;
+    --tweet-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+      Helvetica, Arial, sans-serif;
+    --tweet-font-color: #0f1419;
+    --tweet-font-color-secondary: #536471;
+    --tweet-bg-color: #fff;
+    --tweet-bg-color-hover: #f7f9f9;
+    --tweet-quoted-bg-color-hover: rgba(0, 0, 0, 0.03);
+    --tweet-color-blue-primary: #1d9bf0;
+    --tweet-color-blue-primary-hover: #1a8cd8;
+    --tweet-color-blue-secondary: #006fd6;
+    --tweet-color-blue-secondary-hover: rgba(0, 111, 214, 0.1);
+    --tweet-color-red-primary: #f91880;
+    --tweet-color-red-primary-hover: rgba(249, 24, 128, 0.1);
+    --tweet-color-green-primary: #00ba7c;
+    --tweet-color-green-primary-hover: rgba(0, 186, 124, 0.1);
+    --tweet-twitter-icon-color: var(--tweet-font-color);
+    --tweet-verified-old-color: #829aab;
+    --tweet-verified-blue-color: var(--tweet-color-blue-primary);
+  }
+
+  :is([data-theme='dark'], .dark) :where(.react-tweet-theme) {
+    --tweet-skeleton-gradient: linear-gradient(
+      270deg,
+      #15202b,
+      #1e2732,
+      #1e2732,
+      #15202b
+    );
+    --tweet-border: 1px solid #425364;
+    --tweet-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+      Helvetica, Arial, sans-serif;
+    --tweet-font-color: #f7f9f9;
+    --tweet-font-color-secondary: #8b98a5;
+    --tweet-bg-color: #333333;
+    --tweet-bg-color-hover: #1e2732;
+    --tweet-quoted-bg-color-hover: hsla(0, 0%, 100%, 0.03);
+    --tweet-color-blue-primary: #1d9bf0;
+    --tweet-color-blue-primary-hover: #1a8cd8;
+    --tweet-color-blue-secondary: #6bc9fb;
+    --tweet-color-blue-secondary-hover: rgba(107, 201, 251, 0.1);
+    --tweet-color-red-primary: #f91880;
+    --tweet-color-red-primary-hover: rgba(249, 24, 128, 0.1);
+    --tweet-color-green-primary: #00ba7c;
+    --tweet-color-green-primary-hover: rgba(0, 186, 124, 0.1);
+    --tweet-twitter-icon-color: var(--tweet-font-color);
+    --tweet-verified-old-color: #829aab;
+    --tweet-verified-blue-color: #fff;
+  }
+
   pre,
   code {
     @apply text-sm;
@@ -69,3 +155,12 @@
     box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
   }
 }
+
+.actions_node_modules-react-tweet-dist-twitter-theme-tweet-actions-module,
+.authorFollow_node_modules-react-tweet-dist-twitter-theme-tweet-header-module {
+  display: none !important;
+}
+
+.replies_node_modules-react-tweet-dist-twitter-theme-tweet-replies-module {
+  margin-top: 10px;
+}