fixed homepage

richardgill · Apr 1, 2024 · f24f548 · f24f548
1 parent 3a27a44
commit f24f548
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 10 deletions.
diff --git a/apps/docs/src/pages/index.astro b/apps/docs/src/pages/index.astro
@@ -9,24 +9,19 @@ import { Icon } from "astro-icon/components";
 <MainLayout title="llm-ui | react ui components for LLMs">
   <section class="space-y-6 pb-12 pt-16 lg:py-28">
     <div
-      class="container flex max-w-[64rem] flex-col items-center gap-5 text-center"
+      class="container flex max-w-[64rem] flex-col items-center gap-6 text-center"
     >
       <h1
         class="font-heading text-balance text-4xl font-bold !leading-[1.1] sm:text-5xl md:text-6xl lg:text-7xl"
       >
-        A modern example app built using
-        <span class="text-gradient_indigo-purple">
-          Astro v4 <span class="font-sans font-bold">+</span> shadcn<span
-            class="font-sans font-bold">/</span
-          >ui.
-        </span>
+        <span class="text-gradient_indigo-purple">React components</span><br /> for
+        <span class="text-gradient_indigo-purple">LLMs</span>
       </h1>
 
       <p
-        class="text-muted-foreground max-w-[42rem] text-balance leading-normal sm:text-xl sm:leading-8"
+        class="text-muted-foreground mb-3 max-w-[42rem] text-balance leading-normal sm:text-xl sm:leading-8"
       >
-        I&apos;m building a modern example app with Astro v4 and based on
-        shadcn-ui/taxonomy.
+        {"Customizable React components to help render your LLM's outputs."}
       </p>
 
       <div class="flex justify-center space-x-2 md:space-x-4">

diff --git a/apps/docs/src/styles/globals.css b/apps/docs/src/styles/globals.css
@@ -147,6 +147,14 @@
   }
 }
 
+.text-gradient_aqua-teal {
+  background: linear-gradient(90deg, #5fc3e4 0%, #3cba92 100%);
+  /* Bright aqua transitioning to a lush teal */
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
 .text-gradient_indigo-purple {
   background: linear-gradient(90deg, #6366f1 0%, rgba(168 85 247 / 0.9) 100%);
   /* background: linear-gradient(83.21deg,#3245ff 0%,#bc52ee 100%); */
@@ -155,6 +163,37 @@
   background-clip: text;
 }
 
+.text-gradient_indigo-purple-continuation {
+  background: linear-gradient(90deg, rgba(168, 85, 247, 0.9) 0%, #7e22ce 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.text-gradient_twilight-sky {
+  background: linear-gradient(90deg, #465a7d 0%, #764ba2 100%);
+  /* Dusky blue to rich violet */
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.text-gradient_deep-ocean {
+  background: linear-gradient(90deg, #003973 0%, #6a2a82 100%);
+  /* Deep navy to electric purple */
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.text-gradient_misty-blue-lavender {
+  background: linear-gradient(90deg, #9baacd 0%, #bfa2db 100%);
+  /* Misty blue to soft lavender */
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
 .bg_release_version {
   background: linear-gradient(
     25deg,