diff --git a/landing/src/App.tsx b/landing/src/App.tsx
index 97ec91a87..3c4c37e3e 100644
--- a/landing/src/App.tsx
+++ b/landing/src/App.tsx
@@ -1,4 +1,5 @@
-import React, { useState, useEffect, useCallback, useRef } from "react";
+import type React from "react";
+import { useState, useEffect, useCallback, useRef } from "react";
import { Diagram } from "./components/Diagram";
import { SlackPanel } from "./components/SlackPanel";
import { StepIndicator } from "./components/StepIndicator";
@@ -56,7 +57,7 @@ const App: React.FC = () => {
setCurrentStepIndex(index);
setIsPlaying(false);
},
- [clearTimer],
+ [clearTimer]
);
const handleTogglePlay = useCallback(() => {
@@ -76,7 +77,7 @@ const App: React.FC = () => {
setCurrentStepIndex(0);
setIsPlaying(true);
},
- [clearTimer],
+ [clearTimer]
);
const currentStep = steps[currentStepIndex];
@@ -93,8 +94,7 @@ const App: React.FC = () => {
width: 32,
height: 32,
borderRadius: 8,
- background:
- "linear-gradient(135deg, #10B981 0%, #059669 100%)",
+ background: "linear-gradient(135deg, #10B981 0%, #059669 100%)",
display: "flex",
alignItems: "center",
justifyContent: "center",
@@ -170,19 +170,13 @@ const App: React.FC = () => {
{/* SVG Diagram */}
-
+
{/* Slack chat panel */}
-
+
diff --git a/landing/src/components/AnimatedPacket.tsx b/landing/src/components/AnimatedPacket.tsx
index b66075d75..aa13ca73d 100644
--- a/landing/src/components/AnimatedPacket.tsx
+++ b/landing/src/components/AnimatedPacket.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import type React from "react";
import { motion } from "framer-motion";
import { NODES } from "../nodes";
diff --git a/landing/src/components/ConnectionLine.tsx b/landing/src/components/ConnectionLine.tsx
index 6a179455a..44d0755f2 100644
--- a/landing/src/components/ConnectionLine.tsx
+++ b/landing/src/components/ConnectionLine.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import type React from "react";
import { colors } from "../styles";
import { NODES } from "../nodes";
diff --git a/landing/src/components/Diagram.tsx b/landing/src/components/Diagram.tsx
index 6515d8c72..96d76c3f2 100644
--- a/landing/src/components/Diagram.tsx
+++ b/landing/src/components/Diagram.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import type React from "react";
import { AnimatePresence } from "framer-motion";
import { NODES, CONNECTIONS } from "../nodes";
import type { FlowStep, PromptOption } from "../types";
@@ -49,10 +49,12 @@ export const Diagram: React.FC = ({ currentStep, prompt }) => {
viewBox="0 0 800 540"
preserveAspectRatio="xMidYMid meet"
style={{ display: "block" }}
+ aria-hidden="true"
>
{/* Defs for gradients */}
-
+ {/* biome-ignore lint/correctness/useUniqueElementIds: SVG gradient ID is scoped within this component's SVG element */}
+
diff --git a/landing/src/components/DiagramNode.tsx b/landing/src/components/DiagramNode.tsx
index ebe5c1151..5b02ba1b0 100644
--- a/landing/src/components/DiagramNode.tsx
+++ b/landing/src/components/DiagramNode.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import type React from "react";
import { motion } from "framer-motion";
import type { NodePosition } from "../types";
import { NodeIcon } from "./NodeIcon";
@@ -67,12 +67,7 @@ export const DiagramNode: React.FC = ({
/>
{/* Icon */}
-
+
= ({ type, size = 28 }) => {
switch (type) {
case "slack":
return (
-
-
+
{text}
@@ -330,6 +330,7 @@ const PermissionMessage: React.FC<{ text: string }> = ({ text }) => (
Allow for 1 hour