Skip to content

Commit

Permalink
refactor: Update landing page with AI Mind logo and improve navigatio…
Browse files Browse the repository at this point in the history 
…n bar accessibility
  • Loading branch information
@Arghya721
Arghya721 committed Sep 1, 2024
1 parent 998b096 commit d0a3411
Show file tree
Hide file tree
Showing 2 changed files with 50 additions and 40 deletions.
60 changes: 36 additions & 24 deletions web/public/index.html
View file
Original file line number Diff line number Diff line change
@@ -1,24 +1,34 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/ai-mind.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Unleash the power of AI conversation with Chat-with-LLMs! Our innovative platform lets you chat with a variety of Large Language Models (LLMs) from leading providers like OpenAI, Anthrophic, and Google. Go beyond a single model - switch seamlessly between them mid-conversation to explore diverse capabilities. It's like having multiple AI experts at your fingertips, all in one place. Discover the power of choice in AI conversation with Chat-with-LLMs."
/>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap" rel="stylesheet">
<link href="./output.css" rel="stylesheet">
<link rel="apple-touch-icon" href="%PUBLIC_URL%/ai-mind.svg" />
<!--

<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/ai-mind.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta name="description"
content="Chat-with-LLMs lets you chat with AI models like OpenAI's GPT, Google's Gemini, and Anthropic's Claude. Explore diverse AI capabilities." />
<meta name="keywords"
content="AI, Chat, LLM, Large Language Models, OpenAI, Anthropic, Google AI, AI conversation, AI models, ChatGPT, Claude, Gemini" />
<meta name="author" content="Chat With LLMs" />
<meta property="og:title"
content="Chat-with-LLMs: The Ultimate AI Conversation Platform with OpenAI, Anthropic, Google, and More" />
<meta property="og:description"
content="Discover the power of choice in AI conversation. Chat with multiple Large Language Models from leading providers in one place." />
<meta property="og:image" content="%PUBLIC_URL%/ai-mind.svg" />
<meta property="og:url" content="https://chat-with-llms.com" />
<meta property="og:type" content="website" />
<meta name="robots" content="index, follow" />
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap" rel="stylesheet">
<link href="./output.css" rel="stylesheet">
<link rel="apple-touch-icon" href="%PUBLIC_URL%/ai-mind.svg" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Expand All @@ -27,12 +37,13 @@
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>Chat With llms</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
<title>Chat-with-LLMs: The Ultimate AI Conversation Platform with OpenAI, Anthropic, Google, and More</title>
</head>

<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
Expand All @@ -42,5 +53,6 @@
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>
</body>

</html>
30 changes: 14 additions & 16 deletions web/src/components/LandingPageNavBar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,31 +17,29 @@ export const LandingPageNavBar = () => {
});

return (
<div className='flex justify-between min-h-[8dvh] border-b dark:bg-slate-900 dark:text-teal-400'>
<nav aria-label="Main Navigation" className='flex justify-between min-h-[8dvh] border-b dark:bg-slate-900 dark:text-teal-400'>
<div className="px-4 lg:px-6 justify-start flex items-center">
<img src={aiMind} alt="ai-mind" className="h-10 w-10 pr-2" />
<span className="text-xs sm:text-xl font-bold">chat-with-llms</span>
<img src={aiMind} alt="AI Mind Logo" className="h-10 w-10 pr-2" />
<span className="text-xs sm:text-xl font-bold" aria-label="Website Name">Chat With LLMs</span>
</div>
<div className='px-4 lg:px-6 justify-end flex items-center'>
{/* <GoogleLogin
onSuccess={handleGoogleSuccess}
onError={handleGoogleFailure}
render={renderProps => (
)}
/> */}
<Button color="primary" variant="bordered" className='dark:border-violet-600 dark:bg-violet-600 dark:hover:bg-violet-700 dark:text-gray-100' startContent={<FcGoogle />} onClick={
async () => {
<Button
color="primary"
variant="bordered"
className='dark:border-violet-600 dark:bg-violet-600 dark:hover:bg-violet-700 dark:text-gray-100'
startContent={<FcGoogle />}
aria-label="Google Sign In"
onClick={async () => {
const isVerified = await verifyGoogleAuth();
if (isVerified)
navigate('/chat');
else
login();
}
}>
}}
>
Sign in
</Button>
</div>
</div>
</nav>
);
}
}

0 comments on commit d0a3411

Please sign in to comment.