Start of reworking one-ai page

docusaurus.config.ts

@@ -168,21 +168,15 @@ const config: Config = {
           className: "navbar__dropdown--products",
           items: [
             {
-              to: "/one-ai",
-              label: "ONE AI",
+              to: "/",
+              label: "ONE WARE AI",
               className: "dropdown__link--highlight",
+              activeBaseRegex: "^/$",
             },
             {
-              to: "/docs/one-ai/getting-started/quick-start-guide",
-              label: "Get Started",
-            },
-            {
-              to: "/docs/one-ai/demos/overview",
-              label: "Demo Projects",
-            },
-            {
-              to: "/docs/one-ai/supported-vendors",
-              label: "Supported Hardware",
+              to: "/one-ai",
+              label: "LucidNet",
+              className: "dropdown__link--highlight",
             },
             {
               to: "/studio",

i18n/de/code.json

@@ -2124,5 +2124,14 @@
   },
   "pricing.opensource.subtitle": {
     "message": "Kostenlose Credits für nicht-kommerzielle Projekte"
+  },
+  "homepage.showcase.cta.title": {
+    "message": "Praxisbenchmarks, maßgeschneiderte Architekturen & One-Click-Deployment"
+  },
+  "homepage.showcase.cta.description": {
+    "message": "Erfahre, wie ONE AI YOLO in direkten Vergleichen übertrifft — und deploye auf FPGAs, GPUs, CPUs und mehr."
+  },
+  "homepage.showcase.cta.link": {
+    "message": "ONE AI entdecken"
   }
 }

src/components/AiProcessSlider/index.tsx

@@ -0,0 +1,162 @@
+import React, { useState, useEffect, useRef, useCallback } from "react";
+import Translate from "@docusaurus/Translate";
+
+const steps = [
+  {
+    title: <Translate id="oneai.slider.capture">Capture and Label</Translate>,
+    src: require("@site/static/img/ai/Capture.png").default,
+    alt: "Capture",
+    description: (
+      <Translate id="oneai.slider.capture.description">
+        Capture just a few images, label them - ONE AI takes care of the rest.
+        ONE AI requires only a small dataset to deliver a fully functional AI
+        model. Its adaptive architecture automatically scales with your data.
+      </Translate>
+    ),
+  },
+  {
+    title: <Translate id="oneai.slider.guide">Guide and Select</Translate>,
+    src: require("@site/static/img/ai/Pre.png").default,
+    alt: "Hardware",
+    description: (
+      <Translate id="oneai.slider.guide.description">
+        Use our intuitive and visual process to teach the AI what is important,
+        where to generalize and what to predict. You can specify your exact
+        hardware and performance requirements and then let ONE AI create the
+        perfect model for your needs.
+      </Translate>
+    ),
+  },
+  {
+    title: <Translate id="oneai.slider.train">Predict and Train</Translate>,
+    src: require("@site/static/img/ai/Train.png").default,
+    alt: "Simulation",
+    description: (
+      <Translate id="oneai.slider.train.description">
+        After you start training, ONE AI will automatically generate a custom
+        neural network for your hardware and application. The AI then trains on
+        your data, but only learns what is important. This ensures highest
+        performance and accuracy.
+      </Translate>
+    ),
+  },
+  {
+    title: <Translate id="oneai.slider.deploy">Test and Deploy</Translate>,
+    src: require("@site/static/img/ai/Export.png").default,
+    alt: "Extensible",
+    description: (
+      <Translate id="oneai.slider.deploy.description">
+        While training and testing, the AI already behaves like on your target
+        hardware. No matter if you are using an FPGA, Microcontroller, GPU, CPU
+        or TPU. If you are satisfied with the results, you can export the AI as
+        cross-platform executable, universal HDL code, C++ project or
+        ONNX/TF/TF-Lite Model.
+      </Translate>
+    ),
+  },
+];
+
+export default function AiProcessSlider() {
+  const [active, setActive] = useState(0);
+  const [visible, setVisible] = useState(true);
+  const pendingRef = useRef<number | null>(null);
+  const timerRef = useRef<ReturnType<typeof setInterval> | null>(null);
+
+  const transitionTo = useCallback((idx: number) => {
+    if (idx === active && pendingRef.current === null) return;
+    setVisible(false);
+    pendingRef.current = idx;
+  }, [active]);
+
+  useEffect(() => {
+    if (!visible && pendingRef.current !== null) {
+      const timeout = setTimeout(() => {
+        setActive(pendingRef.current!);
+        pendingRef.current = null;
+        setVisible(true);
+      }, 300);
+      return () => clearTimeout(timeout);
+    }
+  }, [visible]);
+
+  useEffect(() => {
+    timerRef.current = setInterval(() => {
+      setVisible(false);
+      pendingRef.current = null;
+      setTimeout(() => {
+        setActive((a) => {
+          const next = (a + 1) % steps.length;
+          return next;
+        });
+        setVisible(true);
+      }, 300);
+    }, 20000);
+    return () => { if (timerRef.current) clearInterval(timerRef.current); };
+  }, []);
+
+  const step = steps[active];
+
+  return (
+    <section className="py-16 md:py-24">
+      <div className="container mx-auto px-6">
+        <div className="max-w-7xl mx-auto">
+          <h2 className="text-gray-600 dark:text-gray-300 text-3xl md:text-4xl font-normal text-left mb-12">
+            <Translate id="oneai.compare.heading">
+              The Entire AI Development Process Automated in One Tool
+            </Translate>
+          </h2>
+
+          <div className="flex flex-col lg:flex-row gap-8 lg:gap-12 items-center">
+            <div
+              className="lg:w-[60%] flex-shrink-0 bg-white dark:bg-[#2a2a2a] rounded-lg overflow-hidden flex items-center justify-center p-4 sm:p-6"
+              style={{
+                opacity: visible ? 1 : 0,
+                transform: visible ? "translateY(0)" : "translateY(8px)",
+                transition: "opacity 0.3s ease, transform 0.3s ease",
+              }}
+            >
+              <img
+                src={step.src}
+                alt={step.alt}
+                className="w-full h-auto object-contain"
+                loading="lazy"
+                decoding="async"
+              />
+            </div>
+
+            <div className="lg:w-[40%] flex flex-col">
+              <div
+                style={{
+                  opacity: visible ? 1 : 0,
+                  transform: visible ? "translateY(0)" : "translateY(8px)",
+                  transition: "opacity 0.3s ease, transform 0.3s ease",
+                }}
+              >
+                <h3 className="text-2xl md:text-3xl font-semibold text-gray-800 dark:text-gray-100 mb-4">
+                  {step.title}
+                </h3>
+                <p className="text-base md:text-lg text-gray-600 dark:text-gray-400 leading-relaxed">
+                  {step.description}
+                </p>
+              </div>
+
+              <div className="flex justify-center lg:justify-start gap-2 mt-6">
+                {steps.map((_, idx) => (
+                  <button
+                    key={idx}
+                    onClick={() => transitionTo(idx)}
+                    className={`w-3 h-3 rounded-full border-0 p-0 cursor-pointer transition-all duration-300 ${
+                      idx === active
+                        ? "bg-[var(--ifm-color-primary)] scale-110"
+                        : "bg-gray-300 dark:bg-gray-600 hover:bg-gray-400 dark:hover:bg-gray-500"
+                    }`}
+                  />
+                ))}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}

src/components/ArchitectureSection/ArchFlowComponents.tsx

@@ -0,0 +1,160 @@
+import React from "react";
+import type { LayerBlock, MainPathSegment, ResidualBlock } from "./types";
+import { isResidualBlock } from "./types";
+
+export function LayerCard({ block }: { block: LayerBlock }) {
+  return (
+    <div
+      className="w-full rounded-lg px-4 py-2.5 text-center"
+      style={{
+        border: block.trainable
+          ? "1px solid color-mix(in srgb, var(--ifm-color-primary) 30%, transparent)"
+          : "1px solid var(--arch-card-border)",
+        background: block.trainable
+          ? "color-mix(in srgb, var(--ifm-color-primary) 6%, transparent)"
+          : "var(--arch-card-bg)",
+      }}
+    >
+      <code className="text-[10px] sm:text-xs font-mono font-medium dark:text-white text-gray-800 px-3 py-0.5">
+        {block.label}
+      </code>
+    </div>
+  );
+}
+
+export function CompactLayerCard({ block }: { block: LayerBlock }) {
+  return <LayerCard block={block} />;
+}
+
+export function ArrowDown() {
+  return (
+    <div className="flex flex-col items-center py-1">
+      <div className="w-px h-5" style={{ background: "color-mix(in srgb, var(--ifm-color-primary) 30%, transparent)" }} />
+      <svg width="8" height="5" viewBox="0 0 8 5" fill="none">
+        <path d="M1 1l3 3 3-3" stroke="var(--ifm-color-primary)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" opacity="0.4" />
+      </svg>
+    </div>
+  );
+}
+
+export function MiniMergeIndicator() {
+  return (
+    <div className="flex items-center justify-center w-full my-1">
+      <div className="flex-1 h-px" style={{ background: "color-mix(in srgb, var(--ifm-color-primary) 30%, transparent)" }} />
+      <div className="flex flex-col items-center mx-2">
+        <svg width="8" height="5" viewBox="0 0 8 5" fill="none">
+          <path d="M1 1l3 3 3-3" stroke="var(--ifm-color-primary)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" opacity="0.4" />
+        </svg>
+      </div>
+      <div className="flex-1 h-px" style={{ background: "color-mix(in srgb, var(--ifm-color-primary) 30%, transparent)" }} />
+    </div>
+  );
+}
+
+export function MiniForkIndicator() {
+  return (
+    <div className="flex flex-col items-center w-full">
+      <div className="w-px h-3" style={{ background: "color-mix(in srgb, var(--ifm-color-primary) 30%, transparent)" }} />
+      <div className="flex items-center w-full">
+        <div className="flex-1 h-px" style={{ background: "color-mix(in srgb, var(--ifm-color-primary) 30%, transparent)" }} />
+        <div className="mx-2">
+          <svg width="8" height="5" viewBox="0 0 8 5" fill="none">
+            <path d="M1 1l3 3 3-3" stroke="var(--ifm-color-primary)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" opacity="0.4" />
+          </svg>
+        </div>
+        <div className="flex-1 h-px" style={{ background: "color-mix(in srgb, var(--ifm-color-primary) 30%, transparent)" }} />
+      </div>
+    </div>
+  );
+}
+
+export function LinearArchFlow({ layers }: { layers: LayerBlock[] }) {
+  return (
+    <div className="flex flex-col items-center w-full" style={{ maxWidth: 520 }}>
+      {layers.map((block, idx) => (
+        <React.Fragment key={idx}>
+          <LayerCard block={block} />
+          {idx < layers.length - 1 && <ArrowDown />}
+        </React.Fragment>
+      ))}
+    </div>
+  );
+}
+
+export function SequentialFlow({ layers }: { layers: LayerBlock[] }) {
+  return (
+    <>
+      {layers.map((block, idx) => (
+        <React.Fragment key={idx}>
+          <div className="w-full"><LayerCard block={block} /></div>
+          {idx < layers.length - 1 && <ArrowDown />}
+        </React.Fragment>
+      ))}
+    </>
+  );
+}
+
+export function CompactSequentialFlow({ layers }: { layers: LayerBlock[] }) {
+  return (
+    <>
+      {layers.map((block, idx) => (
+        <React.Fragment key={idx}>
+          <div className="w-full"><CompactLayerCard block={block} /></div>
+          {idx < layers.length - 1 && <ArrowDown />}
+        </React.Fragment>
+      ))}
+    </>
+  );
+}
+
+export function ResidualBlockFlow({ block }: { block: ResidualBlock }) {
+  const isIdentitySkip = block.skipBranch.length === 0;
+
+  return (
+    <div className="flex flex-col items-center w-full">
+      <MiniForkIndicator />
+
+      <div className="grid grid-cols-2 gap-2 items-stretch w-full">
+        <div className="flex flex-col items-center">
+          <CompactSequentialFlow layers={block.mainBranch} />
+        </div>
+        <div className="flex flex-col items-center">
+          {isIdentitySkip ? (
+            <div className="flex flex-col items-center flex-1 w-full">
+              <span className="text-[8px] uppercase tracking-wider text-gray-400 dark:text-gray-500 font-semibold mb-1">identity</span>
+              <div className="w-px flex-1 min-h-[40px]" style={{ background: "color-mix(in srgb, var(--ifm-color-primary) 30%, transparent)" }} />
+            </div>
+          ) : (
+            <>
+              <CompactSequentialFlow layers={block.skipBranch} />
+              <div className="flex-1 flex flex-col items-center pt-1 min-h-[8px]">
+                <div className="w-px flex-1" style={{ background: "color-mix(in srgb, var(--ifm-color-primary) 30%, transparent)" }} />
+              </div>
+            </>
+          )}
+        </div>
+      </div>
+
+      <MiniMergeIndicator />
+
+      <div className="w-full"><LayerCard block={block.merge} /></div>
+    </div>
+  );
+}
+
+export function MainPathFlow({ segments }: { segments: MainPathSegment[] }) {
+  return (
+    <div className="flex flex-col items-center w-full">
+      {segments.map((segment, segIdx) => (
+        <React.Fragment key={segIdx}>
+          {segIdx > 0 && <ArrowDown />}
+          {isResidualBlock(segment) ? (
+            <ResidualBlockFlow block={segment} />
+          ) : (
+            <SequentialFlow layers={segment} />
+          )}
+        </React.Fragment>
+      ))}
+    </div>
+  );
+}