More fixes to LAF. Added a "What is Eidolon?" section

eidolon-ai · Aug 7, 2024 · d8213a7 · d8213a7
1 parent 399d651
commit d8213a7
Show file tree

Hide file tree

Showing 6 changed files with 104 additions and 49 deletions.
diff --git a/webui/apps/docs/src/components/Logo.astro b/webui/apps/docs/src/components/Logo.astro
@@ -3,7 +3,7 @@ import { SITE } from 'astrowind:config';
 import Image from "./common/Image.astro";
 ---
 
-<Image src={"~/assets/images/default.png"} alt={SITE?.name} style="width: 32px; height:32px" class="w-8 h-8 md:w-6 md:h-6 rounded-full" /> 
+<Image loading="eager" src={"~/assets/images/default.png"} alt={SITE?.name} style="width: 32px; height:32px" class="w-8 h-8 md:w-6 md:h-6 rounded-full" /> 
 <span class="self-center ml-2 rtl:ml-0 rtl:mr-2 text-2xl md:text-xl font-bold text-gray-900 whitespace-nowrap dark:text-white ">
   {SITE?.name}
 </span>
diff --git a/webui/apps/docs/src/components/widgets/Footer.astro b/webui/apps/docs/src/components/widgets/Footer.astro
@@ -1,7 +1,8 @@
 ---
-import { Icon } from 'astro-icon/components';
-import { SITE } from 'astrowind:config';
-import { getHomePermalink } from '~/utils/permalinks';
+import {Icon} from 'astro-icon/components';
+import {SITE} from 'astrowind:config';
+import {getHomePermalink} from '~/utils/permalinks';
+import Logo from "../Logo.astro";
 
 interface Link {
   text?: string;
@@ -23,20 +24,47 @@ export interface Props {
   theme?: string;
 }
 
-const { socialLinks = [], secondaryLinks = [], links = [], footNote = '', theme = 'light' } = Astro.props;
+const {socialLinks = [], secondaryLinks = [], links = [], footNote = '', theme = 'light'} = Astro.props;
 ---
 
-<footer class:list={[{ dark: theme === 'dark' }, 'relative border-t border-gray-200 dark:border-slate-800 not-prose']}>
+<footer class:list={[{dark: theme === 'dark'}, 'relative border-t border-gray-200 dark:border-slate-800 not-prose']}>
   <div class="dark:bg-dark absolute inset-0 pointer-events-none" aria-hidden="true"></div>
   <div class="relative max-w-7xl mx-auto px-4 sm:px-6 dark:text-slate-300">
     <div class="grid grid-cols-12 gap-4 gap-y-8 sm:gap-8 py-8 md:py-12">
       <div class="col-span-12 lg:col-span-4">
-        <div class="mb-2">
-          <a class="inline-block font-bold text-xl" href={getHomePermalink()}>{SITE?.name}</a>
+        <div class="mb-2 flex flex-row">
+          <Logo/>
+        </div>
+        <div class="md:flex md:items-center md:justify-between ">
+          {
+            socialLinks?.length ? (
+              <ul class="flex mb-4 -ml-2 md:mb-0 rtl:ml-0 rtl:-mr-2 rtl:md:ml-0 rtl:md:mr-4">
+                {socialLinks.map(({ariaLabel, href, text, icon}) => (
+                  <li>
+                    <a
+                      class="text-muted dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5 inline-flex items-center"
+                      aria-label={ariaLabel}
+                      href={href}
+                    >
+                      {icon &&
+                        <Icon name={icon} class="w-5 h-5"/>}
+                      <Fragment set:html={text}/>
+                    </a>
+                  </li>
+                ))}
+              </ul>
+            ) : (
+              ''
+            )
+          }
+
+          <div class="text-sm mr-4 dark:text-muted">
+            <Fragment set:html={footNote}/>
+          </div>
         </div>
         <div class="text-sm text-muted">
           {
-            secondaryLinks.map(({ text, href }) => (
+            secondaryLinks.map(({text, href}) => (
               <a
                 class="text-muted hover:text-gray-700 dark:text-gray-400 hover:underline transition duration-150 ease-in-out mr-2 rtl:mr-0 rtl:ml-2"
                 href={href}
@@ -47,19 +75,19 @@ const { socialLinks = [], secondaryLinks = [], links = [], footNote = '', theme
         </div>
       </div>
       {
-        links.map(({ title, links }) => (
+        links.map(({title, links}) => (
           <div class="col-span-6 md:col-span-3 lg:col-span-2">
             <div class="dark:text-gray-300 font-medium mb-2">{title}</div>
             {links && Array.isArray(links) && links.length > 0 && (
               <ul class="text-sm">
-                {links.map(({ text, href, ariaLabel }) => (
+                {links.map(({text, href, ariaLabel}) => (
                   <li class="mb-2">
                     <a
                       class="text-muted hover:text-gray-700 hover:underline dark:text-gray-400 transition duration-150 ease-in-out"
                       href={href}
                       aria-label={ariaLabel}
                     >
-                      <Fragment set:html={text} />
+                      <Fragment set:html={text}/>
                     </a>
                   </li>
                 ))}
@@ -69,31 +97,5 @@ const { socialLinks = [], secondaryLinks = [], links = [], footNote = '', theme
         ))
       }
     </div>
-    <div class="md:flex md:items-center md:justify-between py-6 md:py-8">
-      {
-        socialLinks?.length ? (
-          <ul class="flex mb-4 md:order-1 -ml-2 md:ml-4 md:mb-0 rtl:ml-0 rtl:-mr-2 rtl:md:ml-0 rtl:md:mr-4">
-            {socialLinks.map(({ ariaLabel, href, text, icon }) => (
-              <li>
-                <a
-                  class="text-muted dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5 inline-flex items-center"
-                  aria-label={ariaLabel}
-                  href={href}
-                >
-                  {icon && <Icon name={icon} class="w-5 h-5" />}
-                  <Fragment set:html={text} />
-                </a>
-              </li>
-            ))}
-          </ul>
-        ) : (
-          ''
-        )
-      }
-
-      <div class="text-sm mr-4 dark:text-muted">
-        <Fragment set:html={footNote} />
-      </div>
-    </div>
   </div>
 </footer>
diff --git a/webui/apps/docs/src/components/widgets/MainTitle.astro b/webui/apps/docs/src/components/widgets/MainTitle.astro
@@ -44,13 +44,13 @@ const {
         />
         <div class="flex text-center mt-7 mb-14 gap-7 justify-center">
           <a href="https://pypi.org/project/eidolon-ai-sdk/">
-            <img style="display: inline-block;" alt="PyPI - Version" src="https://img.shields.io/pypi/v/eidolon-ai-sdk?style=flat&label=eidolon-ai-sdk">
+            <img class="md:h-6 lg:h-8" style="display: inline-block;" alt="PyPI - Version" src="https://img.shields.io/pypi/v/eidolon-ai-sdk?style=flat&label=eidolon-ai-sdk">
           </a>
           <a href="https://pypistats.org/packages/eidolon-ai-sdk">
-            <img style="display: inline-block" alt="PyPI - Downloads" src="https://img.shields.io/pypi/dm/eidolon-ai-sdk">
+            <img class="md:h-6 lg:h-8" style="display: inline-block" alt="PyPI - Downloads" src="https://img.shields.io/pypi/dm/eidolon-ai-sdk">
           </a>
           <a href="https://github.com/eidolon-ai/eidolon/actions/workflows/test_python.yml?query=branch%3Amain">
-            <img style="display: inline-block;" alt="GitHub Test Status"
+            <img class="md:h-6 lg:h-8" style="display: inline-block;" alt="GitHub Test Status"
                  src="https://img.shields.io/github/actions/workflow/status/eidolon-ai/eidolon/test_python.yml?style=flat&logo=github&label=test">
           </a>
         </div>

diff --git a/webui/apps/docs/src/components/widgets/ProductDescription.astro b/webui/apps/docs/src/components/widgets/ProductDescription.astro
@@ -0,0 +1,37 @@
+---
+import Headline from '~/components/ui/Headline.astro';
+import ItemGrid from '~/components/ui/ItemGrid.astro';
+import WidgetWrapper from '~/components/ui/WidgetWrapper.astro';
+
+const {
+  title = '',
+  subtitle = '',
+  tagline = '',
+  itemSetup = '',
+  items = [],
+  columns = 2,
+
+  id,
+  isDark = false,
+  classes = {},
+  bg = await Astro.slots.render('bg'),
+} = Astro.props;
+---
+
+<WidgetWrapper id={id} isDark={isDark} containerClass={`mx-auto ${classes?.container ?? ''}`} bg={bg}>
+  <Headline title={title} subtitle={subtitle} tagline={tagline} classes={{
+    container: 'max-w-5xl text-left mb-4 md:mb-4',
+  }}/>
+  {itemSetup && <div class="mx-auto max-w-5xl mb-4 text-xl text-muted" set:html={itemSetup}/>}
+  <ItemGrid
+    items={items}
+    columns={columns}
+    defaultIcon="tabler:chevron-right"
+    classes={{
+      container: `max-w-5xl gap-y-8 md:gap-y-12 `,
+      panel: 'max-w-none',
+      icon: 'flex-shrink-0 mt-1 w-6 h-6 text-primary',
+      description: 'text-md',
+    }}
+  />
+</WidgetWrapper>
diff --git a/webui/apps/docs/src/components/widgets/Steps.astro b/webui/apps/docs/src/components/widgets/Steps.astro
@@ -30,7 +30,6 @@ const {
         tagline={tagline}
         classes={{
           container: 'text-left rtl:text-right mb-4 md:mb-4',
-          title: 'text-xl lg:text-2xl',
           ...((classes?.headline as {}) ?? {}),
         }}
       />

diff --git a/webui/apps/docs/src/pages/index.astro b/webui/apps/docs/src/pages/index.astro
@@ -5,6 +5,7 @@ import Steps from '~/components/widgets/Steps.astro';
 import ContentWithTabs from "../components/widgets/ContentWithTabs.astro";
 import MainTitle from "../components/widgets/MainTitle.astro";
 import ContentWithTabs from "../components/widgets/ContentWithTabs.astro";
+import ProductDescription from "../components/widgets/ProductDescription.astro";
 
 
 const metadata = {
@@ -50,14 +51,31 @@ const githubText = `<div style="height: 16px; width: 16px">${githubIcon}</div>&n
   </MainTitle>
 
   <div class="mb-16"/>
-  <!-- Content Widget **************** -->
 
+  <ProductDescription
+    classes={{container: 'bg-gradient-to-b from-gray-100 to-white w-full'}}  
+    title="What is Eidolon?" 
+    subtitle="Eidolon AI is the industry's first AI Agent Server for the Enterprise. An Open Source framework, we empower developers to rapidly build & deploy GenAI Apps, dramatically increasing developer productivity."
+    itemSetup="Eidolon features 2 key capabilities:"
+    items={[
+    {
+      title: 'Agent Server',
+      description: 'A secure, enterprise ready, deployment server for Agentic applications. The Agent Server  is based on a Microservice architecture, is interoperable with other agents ' +
+        'and enables easy production deployment, making it a a natural choice for enterprises.'
+    },
+      {
+        title: 'Eidolon SDK',
+        description: 'A pluggable AI Agent framework (SDK) for developers to build Agentic applications quickly and easily. The SDK is designed to be extensible and flexible, ' +
+          'enabling developers to build and deploy agents in a fraction of the time it would take to build from scratch.',
+      }
+    ]}>
+ </ProductDescription>
   <div class=" bg-gray-100 dark:bg-blue-950">
     <hr/>
     <Steps
-      title="Bring enterprise Agents into production in three easy steps"
+      title="Bring agents into production in 3 easy steps"
       horizontal
-      classes = {{container: "pb-2 md:pb-2 lg:pb-2 lg:py-4 py-2 md:py-2"}}
+      classes = {{container: "lg:pt-14 pt-6 md:pt-10 pb-0 md:pb-0 lg:pb-0 "}}
       items={[
         {
           title: '<span class="font-medium">1. Build</span>',
@@ -77,7 +95,6 @@ const githubText = `<div style="height: 16px; width: 16px">${githubIcon}</div>&n
       ]}
     />
   </div>
-  <hr/>
   <ContentWithTabs
     id="build"
     bullets={[
@@ -198,7 +215,7 @@ spec:
     </Fragment>
 
     <Fragment slot="bg">
-      <div class="absolute inset-0 bg-gray-100 dark:bg-blue-950"></div>
+      <div class="absolute inset-0 dark:bg-blue-950 bg-gradient-to-b from-gray-100 to-white"></div>
     </Fragment>
   </ContentWithTabs>
 
@@ -254,7 +271,7 @@ chatbot   3s`
     </Fragment>
 
     <Fragment slot="bg">
-      <div class="absolute inset-0 bg-white dark:bg-transparent"></div>
+      <div class="absolute inset-0 bg-gradient-to-b from-gray-100 to-white dark:bg-transparent"></div>
     </Fragment>
   </ContentWithTabs>
   <hr/>
@@ -327,7 +344,7 @@ expect(response).toContain("supportive community")`,
     </Fragment>
 
     <Fragment slot="bg">
-      <div class="absolute inset-0 bg-gray-50 dark:bg-blue-950"></div>
+      <div class="absolute inset-0 bg-gradient-to-b from-gray-100 to-white dark:bg-blue-950"></div>
     </Fragment>
   </ContentWithTabs>