Updated NLUX docs

docs/src/pages/(examples)/intro/example.tsx

@@ -18,10 +18,8 @@ export default () => {
         user
       }}
       conversationOptions={{ layout: 'bubbles' }}
-      displayOptions={{ colorScheme: "dark" }}
-      composerOptions={{ 
-        placeholder: "Type your query"
-      }}
+      displayOptions={{ colorScheme: "${colorScheme}" }}
+      composerOptions={{ placeholder: "Type your query" }}
     />
   );
 };

docs/src/pages/(sections)/hero/border.module.css

@@ -0,0 +1,120 @@
+HTML CSSResult Skip Results Iframe
+
+/* The secret sauce that enables gradient rotation. NOTE: does not work in all browsers. https://caniuse.com/?search=%40property */
+@property --border-angle-1 {
+    syntax: "<angle>";
+    inherits: true;
+    initial-value: 0deg;
+}
+
+@property --border-angle-2 {
+    syntax: "<angle>";
+    inherits: true;
+    initial-value: 90deg;
+}
+
+@property --border-angle-3 {
+    syntax: "<angle>";
+    inherits: true;
+    initial-value: 180deg;
+}
+
+
+/* sRGB color. */
+:root {
+    --bright-blue: rgb(0, 100, 255);
+    --bright-green: rgb(232, 221, 191);
+    --bright-red: rgb(255, 0, 0);
+    --background: black;
+    --foreground: #fbf2ef;
+    --border-size: 2px;
+    --border-radius: 0.75em;
+}
+
+/* Display-P3 color, when supported. */
+@supports (color: color(display-p3 1 1 1)) {
+    :root {
+        --bright-blue: color(display-p3 0 0.2 1);
+        --bright-green: color(display-p3 0.4 1 0);
+        --bright-red: color(display-p3 1 0 0);
+    }
+}
+
+@keyframes rotateBackground {
+    to {
+        --border-angle-1: 360deg;
+    }
+}
+
+@keyframes rotateBackground2 {
+    to {
+        --border-angle-2: -270deg;
+    }
+}
+
+@keyframes rotateBackground3 {
+    to {
+        --border-angle-3: 540deg;
+    }
+}
+
+.shinyButton {
+    --border-angle-1: 0deg;
+    --border-angle-2: 90deg;
+    --border-angle-3: 180deg;
+    color: inherit;
+    font-family: inherit;
+    border: 0;
+    padding: var(--border-size);
+    display: flex;
+    width: max-content;
+    border-radius: var(--border-radius);
+    background-color: transparent;
+    background-image: conic-gradient(
+            from var(--border-angle-1) at 10% 15%,
+            transparent,
+            var(--bright-blue) 10%,
+            transparent 30%,
+            transparent
+    ),
+    conic-gradient(
+            from var(--border-angle-2) at 70% 60%,
+            transparent,
+            var(--bright-green) 10%,
+            transparent 60%,
+            transparent
+    ),
+    conic-gradient(
+            from var(--border-angle-3) at 50% 20%,
+            transparent,
+            var(--bright-red) 10%,
+            transparent 50%,
+            transparent
+    );
+
+    animation: rotateBackground 3s linear infinite,
+    rotateBackground2 8s linear infinite,
+    rotateBackground3 13s linear infinite;
+}
+
+/* Change this background to transparent to see how the gradient works */
+.shinyButton div {
+    padding: 0.5em 1em;
+    border-radius: calc(var(--border-radius) - var(--border-size));
+}
+
+html[data-theme="dark"] .shinyButton div {
+    background: var(--background);
+    color: var(--foreground);
+}
+
+html[data-theme="light"] .shinyButton div {
+    background: var(--foreground);
+    color: var(--background);
+}
+
+@font-face {
+    font-family: "Aspekta";
+    font-weight: normal;
+    src: url("https://assets.codepen.io/240751/Aspekta-300.woff2") format("woff2");
+}

docs/src/pages/(sections)/hero/hero.tsx

@@ -7,6 +7,7 @@ import exampleIntroFileSendFunction from '@site/src/pages/(examples)/intro/send'
 import exampleIntroFileAiChatBot from '@site/src/pages/(examples)/intro/example';
 import exampleIntroFilePersonas from '@site/src/pages/(examples)/intro/personas';
 import styles from '@site/src/pages/index.module.css';
+import borderStyles from './border.module.css';
 import heroStyles from '@site/src/pages/(sections)/hero/hero.module.css';
 import Heading from '@theme/Heading';
 
@@ -90,43 +91,29 @@ export const Hero = ({className}: { className?: string }) => {
                         </div>
                     </div>
                 </div>
+                <div className={styles.buttons}>
+                    <Link
+                        className={`shinyButton button button--primary button--lg ${borderStyles.shinyButton}`}
+                        to="/learn/get-started"
+                    >
+                        <div>
+                            Get Started Now
+                        </div>
+                    </Link>
+                </div>
                 <div className={styles.nluxInAction}>
-                    <p>
-                        <strong><code>@nlux/react</code> in action</strong> 👇 ―
-                        Edit the code below to see how it works.
-                    </p>
                     <CodeEditor
                         className={styles.codeEditor}
                         direction="row"
                         files={{
-                            'App.tsx': exampleIntroFileAiChatBot(colorMode),
+                            'App.tsx': exampleIntroFileAiChatBot,
                             'send.ts': exampleIntroFileSendFunction,
                             'personas.tsx': exampleIntroFilePersonas,
                         }}
                         editorHeight={420}
                         simulatedPrompt="How an AI assistant can enhance my website's user experience?"
                     />
                 </div>
-                <div className={styles.buttons}>
-                    <Link
-                        className="button button--primary button--lg"
-                        to="/learn/get-started"
-                    >
-                        Get Started
-                    </Link>
-                    <Link
-                        className="button button--primary button--lg"
-                        to="/examples/react-js-ai-assistant"
-                    >
-                        Examples
-                    </Link>
-                    <Link
-                        className="button button--primary button--lg"
-                        to="/reference/overview"
-                    >
-                        API Reference
-                    </Link>
-                </div>
             </div>
         </header>
     );