Added section social

docs/src/pages/index.js

@@ -15,6 +15,7 @@ import {
   ComputerDesktopIcon,
   FolderPlusIcon,
 } from "@heroicons/react/24/outline";
+import { AiOutlineGithub, AiOutlineTwitter } from "react-icons/ai";
 
 import ThemedImage from "@theme/ThemedImage";
 
@@ -22,22 +23,18 @@ const features = [
   {
     name: "Personal AI that runs on your computer",
     desc: "Jan runs directly on your local machine, offering privacy, convenience and customizability.",
-    icon: ComputerDesktopIcon,
-  },
-  {
-    name: "Private and offline, your data never leaves your machine",
-    desc: "Your conversations and data are with an AI that runs on your computer, where only you have access.",
-    icon: ShieldCheckIcon,
-  },
-  {
-    name: "No subscription fees, the AI runs on your computer",
-    desc: "Say goodbye to monthly subscriptions or usage-based APIs. Jan runs 100% free on your own hardware.",
-    icon: CubeTransparentIcon,
   },
   {
     name: "Extendable via App and Plugin framework",
     desc: "Jan has a versatile app and plugin framework, allowing you to customize it to your needs.",
-    icon: FolderPlusIcon,
+  },
+  {
+    name: "Private and offline, your data never leaves your machine",
+    desc: "Your conversations and data are with an AI that runs on your computer, where only you have access.",
+  },
+  {
+    name: "No subscription fees, the AI runs on your computer",
+    desc: "Say goodbye to monthly subscriptions or usage-based APIs. Jan runs 100% free on your own hardware.",
   },
 ];
 
@@ -53,14 +50,14 @@ export default function Home() {
       >
         <main className="bg-gray-50 dark:bg-gray-950/95 relative">
           <div className="relative">
-            <ThemedImage
+            {/* <ThemedImage
               alt="App screenshot"
               sources={{
                 light: useBaseUrl("/img/bg-hero-light.svg"),
                 dark: useBaseUrl("/img/bg-hero-dark.svg"),
               }}
               className="absolute w-full h-full opacity-10 dark:opacity-20 top-0 object-cover blur-3xl"
-            />
+            /> */}
             <div className="container py-16">
               <div className="grid grid-cols-1 items-center gap-4">
                 <div className="relative z-10 text-center ">
@@ -127,29 +124,83 @@ export default function Home() {
               </div>
             </div>
           </div>
-
-          <div className="container mt-10 mb-20 text-center">
+          {/* <div className="container mt-10 mb-20 text-center">
             <h2>AI that you control</h2>
             <p className="text-base mt-2 w-full lg:w-2/5 mx-auto leading-relaxed">
-              Jan runs Large Language Models locally on Windows, Mac and Linux.
-              Available on Desktop and Cloud-Native.
+              Private. Local. Infinitely Customizable.
             </p>
-            <div className="grid text-left lg:grid-cols-2 lg:px-48 mt-16 gap-16">
+            <div className="grid text-left lg:grid-cols-2 mt-16 gap-16">
               {features.map((feat, i) => {
                 return (
-                  <div className="flex gap-x-4" key={i}>
-                    <feat.icon
-                      className="h-6 w-6 text-indigo-600 dark:text-indigo-400 flex-shrink-0"
-                      aria-hidden="true"
-                    />
+                  <div
+                    className="flex gap-x-4 p-8 rounded-3xl border bg-gray-100 border-gray-100 dark:border-[#202231] dark:bg-[#111217]"
+                    key={i}
+                  >
                     <div>
-                      <h6>{feat.name}</h6>
+                      <h5>{feat.name}</h5>
                       <p className="mt-2">{feat.desc}</p>
                     </div>
                   </div>
                 );
               })}
             </div>
+          </div> */}
+          <div class="container">
+            <div class="flex">
+              <div>
+                <h1 className="text-7xl">Your AI, forever.</h1>
+                <p>Apps come and go, but your AI and data should last. </p>
+              </div>
+            </div>
+          </div>
+          <div class="container py-20 text-center">
+            <h2>
+              We are open-source. <br /> Join Jan community.
+            </h2>
+            <div class="mt-14">
+              <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+                <div class="card h-52 relative flex items-center justify-center">
+                  <div class="relative z-50">
+                    <img
+                      src="/img/discord-logo.png"
+                      alt="Discord logo"
+                      className="w-28"
+                    />
+                  </div>
+                  <a
+                    href="https://discord.com/invite/FTk2MvZwJH"
+                    target="_blank"
+                  >
+                    <div class="card-link card-link-bg dark:card-link-bg-dark absolute right-4 top-5">
+                      Join our Discord
+                    </div>
+                  </a>
+                  <ThemedImage
+                    alt="Discord Element"
+                    sources={{
+                      light: useBaseUrl("/img/discord-element-light.png"),
+                      dark: useBaseUrl("/img/discord-element-dark.png"),
+                    }}
+                    className="absolute"
+                  />
+                </div>
+                <div class="card h-52 relative flex items-center justify-center">
+                  <div class="relative z-50">
+                    <AiOutlineGithub className="text-8xl dark:text-white text-black" />
+                  </div>
+                  <a href="https://github.com/janhq/jan" target="_blank">
+                    <div class="card-link card-link-bg dark:card-link-bg-dark absolute right-4 top-5">
+                      View Github
+                    </div>
+                  </a>
+                  <img
+                    alt="Github Element"
+                    src="/img/github-element-dark.png"
+                    className="absolute left-8"
+                  />
+                </div>
+              </div>
+            </div>
           </div>
         </main>
       </Layout>

docs/src/styles/card.scss

@@ -0,0 +1,31 @@
+@layer components {
+  .card-link-bg {
+    background: linear-gradient(180deg, #fff 0%, #fff 100%);
+    box-shadow:
+      0px 10px 10px -5px rgba(0, 0, 0, 0.1),
+      0px 20px 25px -5px rgba(0, 0, 0, 0.1),
+      0px 1px 2px 0px #f1f1f1 inset;
+  }
+
+  .card-link-bg-dark {
+    background: linear-gradient(180deg, #101118 0%, #101118 100%);
+    box-shadow:
+      0px 10px 10px -5px rgba(0, 0, 0, 0.3),
+      0px 1px 2px 0px #525154 inset;
+  }
+  .card {
+    @apply p-8 rounded-3xl border bg-gray-100 border-gray-100 dark:border-[#202231] dark:bg-[#111217];
+
+    &-link {
+      display: inline-flex;
+      padding: 8px 16px;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      gap: 8px;
+      border-radius: 16px;
+      font-size: 14px;
+      cursor: pointer;
+    }
+  }
+}

docs/src/styles/main.scss

@@ -6,3 +6,4 @@
 @import "./tweaks.scss";
 @import "./base.scss";
 @import "./components.scss";
+@import "./card.scss";

docs/tailwind.config.js

@@ -13,6 +13,7 @@ module.exports = {
     },
     fontFamily: {
       sans: [
+        "Inter",
         "-apple-system",
         "BlinkMacSystemFont",
         "Segoe UI",