Merge branch 'master' of github.com:khoj-ai/landing-page

khoj-ai · Jan 5, 2024 · ab20b1b · ab20b1b
2 parents 9c34bf5 + 4ab6700
commit ab20b1b
Show file tree

Hide file tree

Showing 8 changed files with 50 additions and 31 deletions.
diff --git a/src/NavMenu.tsx b/src/NavMenu.tsx
@@ -14,7 +14,7 @@ import type { MenuProps } from 'antd';
 import Icon from '@ant-design/icons';
 
 import { DiscordIcon, GithubIcon } from './components/Icons';
-import { DISCORD_LINK, GITHUB_KHOJ } from './common/constants';
+import { DISCORD_LINK, GITHUB_KHOJ, DEV_DOCS, CLOUD_LINK } from './common/constants';
 
 export default function NavMenu() {
 
@@ -36,7 +36,7 @@ export default function NavMenu() {
 
     const primaryCTA = {
         label: (
-            <a className='primary-cta' href="https://app.khoj.dev">
+            <a className='primary-cta' href={CLOUD_LINK}>
                 Get Started
             </a>
         ),
@@ -47,7 +47,7 @@ export default function NavMenu() {
     const items: MenuProps['items'] = [
         {
             label: (
-                <a href="https://docs.khoj.dev/#/setup" target="_blank">
+                <a href={DEV_DOCS} target="_blank">
                    Docs
                 </a>
                 ),

diff --git a/src/common/constants.ts b/src/common/constants.ts
@@ -2,3 +2,4 @@ export const WAITLIST_API_URL = process.env.NODE_ENV == 'production' ? "https://
 export const DISCORD_LINK = "https://discord.gg/BDgyabRM6e";
 export const DEV_DOCS = "https://docs.khoj.dev/#/";
 export const GITHUB_KHOJ = "https://github.com/khoj-ai/khoj";
+export const CLOUD_LINK = "https://app.khoj.dev/login?";
diff --git a/src/pages/About.tsx b/src/pages/About.tsx
@@ -94,9 +94,9 @@ export default function About() {
                                 </li>
                             </ul>
                         </div>
-                        <div id="team" className="product-description">
+                        <div id="team" className="product-description content">
                             <div className='production-description-subcomponent-light'>
-                                <h2 className='production-description-subcomponent'>Team</h2>
+                                <h2 id="team-heading" className='production-description-subcomponent'>Team</h2>
                                 <div className='founders-text'>
                                     <div className='founders-item'>
                                         <div className='founders-item-image-container'>

diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
@@ -1,7 +1,7 @@
 import '../styles/Home.css';
 import { Button } from 'antd';
 import { Link } from "react-router-dom";
-import { DISCORD_LINK, DEV_DOCS } from '../common/constants';
+import { DISCORD_LINK, DEV_DOCS, CLOUD_LINK } from '../common/constants';
 import ChatBubbles from '../components/ChatBubbles';
 import IconDisplay from '../components/IconsDisplay';
 
@@ -88,7 +88,7 @@ export function Home() {
 								size='large'
 								className='cta-button'
 								style={{borderRadius: '4px', fontSize: 'x-large', height: '50px' }}
-								href="https://app.khoj.dev">
+								href={CLOUD_LINK}>
 									Try the Beta
 								</Button>
 						</div>
@@ -110,7 +110,7 @@ export function Home() {
 			<section id="mission">
 				<div id="mission" className='camping-block'>
 					<div className="product-description first-description">
-						<div className='production-description-subcomponent camping-description-subcomponent'>
+						<div className='production-description-subcomponent camping-description-subcomponent left-section'>
 							<h2 className='production-description-subcomponent'>Connect your knowledge</h2>
 							<p className='product-description-subcomponent-light'>
 								Khoj can understand your PDFs, markdown, plaintext, GitHub, and Notion, with more in the works.
@@ -119,18 +119,18 @@ export function Home() {
 								Connect files directly from your computer using our <a href="/downloads" className='inline-link-light'>Desktop Application</a>. They'll automatically stay in sync.
 							</p>
 						</div>
-						<div className='camping-description-subcomponent'>
+						<div className='camping-description-subcomponent right-section'>
 							<IconDisplay />
 						</div>
 					</div>
 				</div>
 			</section>
 			<div>
 				<div className="product-description">
-					<div className='production-description-subcomponent-light'>
+					<div className='production-description-subcomponent-light left-section'>
 						<img id="demo-video" src="https://khoj-web-bucket.s3.amazonaws.com/doing_good_better_demo.png" alt="chat-demo" />
 					</div>
-					<div className='production-description-subcomponent-light'>
+					<div className='production-description-subcomponent-light right-section'>
 						<h2 className='production-description-subcomponent'>Simplify your reasoning</h2>
 						<p className='product-description-subcomponent-light'>
 							Khoj allows you to leverage AI to make better sense of your notes and documents.
@@ -142,7 +142,7 @@ export function Home() {
 				</div>
 			</div>
 			<div id="plugins" className='product-description'>
-				<div className='production-description-subcomponent'>
+				<div className='production-description-subcomponent left-section'>
 					<h2 className='production-description-subcomponent'>Engage anytime, anywhere</h2>
 					<p className='product-description-subcomponent'>
 						Use our native desktop app on any OS. Or use our first-party clients, <a className='inline-link-light' href="https://www.gnu.org/software/emacs/">Emacs</a> and <a className='inline-link-light' href="https://obsidian.md/">Obsidian</a>, to stay within your existing workflow.
@@ -154,24 +154,24 @@ export function Home() {
 								size='large'
 								className='cta-button'
 								style={{borderRadius: '4px', fontSize: 'x-large', height: '50px' }}
-								href="https://app.khoj.dev">
+								href={CLOUD_LINK}>
 									Get started
 								</Button>
 						</div>
 					</div>
 				</div>
-				<div className='production-description-subcomponent'>
+				<div className='production-description-subcomponent right-section'>
 					<div className='supported-icons'>
 						<img className='clients-diagram' src='https://khoj-web-bucket.s3.amazonaws.com/clients_diagram.svg' alt='Data Sources Diagram' title="Khoj can be accessed from Obsidian, Emacs, the browser, or our native Desktop client. WhatsApp coming soon." />
 					</div>
 				</div>
 			</div>
 			<div>
 				<div className="product-description">
-					<div className='production-description-subcomponent-light'>
+					<div className='production-description-subcomponent-light left-section'>
 						<img id="demo-video" src="https://khoj-web-bucket.s3.amazonaws.com/mountain_sunrise.svg" alt="chat-demo" />
 					</div>
-					<div className='production-description-subcomponent-light'>
+					<div className='production-description-subcomponent-light right-section'>
 						<h2 className='production-description-subcomponent'>Stay in flow</h2>
 						<p className='product-description-subcomponent-light'>
 							No GTD or Zettlekasten required. Read and write with peace of mind. 
@@ -184,7 +184,7 @@ export function Home() {
 			</div>
 			<div>
 				<div className="product-description">
-					<div className='production-description-subcomponent'>
+					<div className='production-description-subcomponent left-section'>
 						<h2 className='production-description-subcomponent'>Run privately</h2>
 						<p className='product-description-subcomponent'>
 							We are completely open-source.
@@ -195,7 +195,7 @@ export function Home() {
 							You can switch between offline and online models when run locally. You can choose to use foundation models or keep your data on-premises.
 						</p>
 					</div>
-					<div className='production-description-subcomponent'>
+					<div className='production-description-subcomponent right-section'>
 						<p className='product-description-subcomponent'>
 							Get started with Khoj locally in a few minutes with the following commands:
 						</p>
@@ -217,7 +217,7 @@ export function Home() {
 				</div>
 			</div>
 			<div id="conclude" className='product-discussion'>
-				<div className='production-description-subcomponent-light'>
+				<div className='production-description-subcomponent-light center-section'>
 					<h2 className='production-description-subcomponent'>Get involved</h2>
 					<p className='product-description-subcomponent-light'>
 						Personal AI should be accessible, transparent, and secure, so you can reason and create more effectively.

diff --git a/src/pages/Pricing.tsx b/src/pages/Pricing.tsx
@@ -1,9 +1,9 @@
-import React from 'react';
 import { Link } from 'react-router-dom';
 
 import { Button } from 'antd';
 
 import '../styles/Pricing.css';
+import { CLOUD_LINK } from '../common/constants';
 
 const Pricing = () => {
   return (
@@ -32,7 +32,7 @@ const Pricing = () => {
 								size='large'
 								className='cta-button'
 								style={{borderRadius: '4px', fontSize: 'x-large', height: '50px' }}
-								href="https://app.khoj.dev">
+								href={CLOUD_LINK}>
 									Get Started
 								</Button>
 						</div>
@@ -42,7 +42,8 @@ const Pricing = () => {
                         <div className='card-content notice'>Early-Bird deal!</div>
                         <div className='card-content'>
                             <ul className='card-content'>
-                                <li className='card-content'>Multi-modal (voice, image), internet-enabled AI chat</li>
+                                <li className='card-content'>Real-time internet aware AI</li>
+                                <li className='card-content'>Multi-modal: voice, image (soon!)</li>
                                 <li className='card-content'>Early access to new features</li>
                                 <li className='card-content'>Up to 100 MB of data storage</li>
                                 <li className='card-content'>Unlimited queries per day</li>

diff --git a/src/styles/About.css b/src/styles/About.css
@@ -14,8 +14,14 @@ div.content-sections {
     grid-template-columns: 1fr;
 }
 
+#team-heading {
+    margin-bottom: 2rem;
+    font-family: var(--impact);
+    font-size: x-large;
+}
+
 div.article {
-    margin: 0 25%;
+    margin: 0 12%;
 }
 
 ul.content {

diff --git a/src/styles/Home.css b/src/styles/Home.css
@@ -208,9 +208,21 @@ span.founders-item-bio {
     display: block;
 }
 
+div.left-section {
+    padding-left: 25%;
+    padding-right: 0;
+}
+div.right-section {
+    padding-left: 0;
+    padding-right: 25%;
+}
+div.center-section {
+    padding-left: 25%;
+    padding-right: 25%;
+}
 div.production-description-subcomponent {
     background-color: var(--mild-sun);
-    padding: 4% 15%;
+    padding-top: 4%;
     padding-bottom: 2.5%;
     font-size: x-large;
     text-align: left;
@@ -221,7 +233,7 @@ div.camping-description-subcomponent {
 
 div.production-description-subcomponent-light {
     background-color: var(--light);
-    padding: 4% 15%;
+    padding-top: 4%;
     padding-bottom: 4.5%;
     font-size: x-large;
     text-align: left;
@@ -359,9 +371,7 @@ img#yc-logo {
     }
 
     div.product-description-bubbles {
-        margin-right: 10%;
-        margin-left: 10%;
-        width: 80%;
+        width: 100%;
     }
     #demo-video {
         width: 95%;

diff --git a/src/styles/Pricing.css b/src/styles/Pricing.css
@@ -20,12 +20,13 @@ ul.card-content {
     list-style: disc;
     text-align: left;
     font-family: var(--reader);
+    font-size: large;
 }
 
-h2.article-title {
-    text-align: left;
-    margin: 2rem;
+h1.article-title {
+    margin: 2rem 0;
     font-family: var(--impact);
+    font-size: xx-large;
 }
 
 div.content-sections {