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