wip: website

website/docusaurus.config.js

@@ -59,11 +59,12 @@ const config = {
     /** @type {import('@docusaurus/preset-classic').ThemeConfig} */
     ({
       navbar: {
-        title: 'Copilot',
         logo: {
-          alt: 'Copilot`s Logo',
-          src: '/img/homepage/detox-logo.png',
+          alt: 'Detox Copilot Logo',
+          src: 'img/homepage/detox-logo.png',
+          srcDark: 'img/homepage/detox-logo.png',
         },
+        style: 'dark',
         items: [
           {
             type: 'doc',
@@ -85,9 +86,8 @@ const config = {
           },
           {
             href: 'https://github.com/wix-incubator/detox-copilot',
+            label: 'GitHub',
             position: 'right',
-            className: 'header-github-link',
-            'aria-label': 'GitHub repository'
           },
         ],
       },

website/package.json

@@ -17,6 +17,7 @@
     "@docusaurus/core": "3.6.1",
     "@docusaurus/preset-classic": "3.6.1",
     "@mdx-js/react": "^3.0.0",
+    "bootstrap": "^5.3.3",
     "clsx": "^2.0.0",
     "docusaurus-plugin-sass": "^0.2.5",
     "prism-react-renderer": "^2.3.0",

website/src/components/Homepage/DemoSection/index.js

@@ -0,0 +1,111 @@
+import React, { useState, useEffect } from 'react';
+import styles from './styles.module.scss';
+
+const commands = [
+  "Type username into the field",
+  "Type password into the field",
+  "Press the login button"
+];
+
+export default function DemoSection() {
+  const [currentStep, setCurrentStep] = useState(0);
+  const [username, setUsername] = useState('');
+  const [password, setPassword] = useState('');
+  const [isAnimating, setIsAnimating] = useState(false);
+  const [focusedField, setFocusedField] = useState(null);
+
+  const simulateTyping = async (text, setter) => {
+    for (let i = 0; i <= text.length; i++) {
+      setter(text.slice(0, i));
+      await new Promise(resolve => setTimeout(resolve, 100));
+    }
+  };
+
+  useEffect(() => {
+    const animationTimer = setInterval(async () => {
+      setIsAnimating(true);
+
+      switch (currentStep) {
+        case 0:
+          setFocusedField('username');
+          await simulateTyping('testuser', setUsername);
+          break;
+        case 1:
+          setFocusedField('password');
+          await simulateTyping('********', setPassword);
+          break;
+        case 2:
+          setFocusedField('login');
+          setTimeout(() => {
+            setUsername('');
+            setPassword('');
+            setFocusedField(null);
+          }, 1000);
+          break;
+      }
+
+      setTimeout(() => {
+        setIsAnimating(false);
+        setCurrentStep((prev) => (prev + 1) % commands.length);
+      }, 2000);
+    }, 4000);
+
+    return () => clearInterval(animationTimer);
+  }, [currentStep]);
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+  };
+
+  return (
+    <div className={styles.demoContainer}>
+      <div className={styles.demoCommands}>
+        {commands.map((command, index) => (
+          <div
+            key={index}
+            className={`${styles.command} ${
+              currentStep === index ? styles.active : ''
+            } ${isAnimating && currentStep === index ? styles.animating : ''}`}
+          >
+            {currentStep === index && isAnimating && (
+              <span className={styles.spinner}></span>
+            )}
+            {command}
+          </div>
+        ))}
+      </div>
+
+      <div className={styles.demoInteractive}>
+        <form onSubmit={handleSubmit} className={styles.loginForm}>
+          <div className={styles.inputGroup}>
+            <input
+              type="text"
+              value={username}
+              readOnly
+              placeholder="Username"
+              className={`${styles.demoInput} ${focusedField === 'username' ? styles.focused : ''}`}
+              tabIndex="-1"
+            />
+          </div>
+          <div className={styles.inputGroup}>
+            <input
+              type="password"
+              value={password}
+              readOnly
+              placeholder="Password"
+              className={`${styles.demoInput} ${focusedField === 'password' ? styles.focused : ''}`}
+              tabIndex="-1"
+            />
+          </div>
+          <button 
+            type="submit" 
+            className={`${styles.demoButton} ${focusedField === 'login' ? styles.focused : ''}`}
+            tabIndex="-1"
+          >
+            Login
+          </button>
+        </form>
+      </div>
+    </div>
+  );
+}