Upload components/TutorialOverlay.js with huggingface_hub

components/TutorialOverlay.js

@@ -1,5 +1,5 @@
 import { useState, useEffect } from 'react'
-import { X, ChevronRight, ChevronLeft, HelpCircle, Zap, Layers, Share2 } from 'lucide-react'
+import { X, ChevronRight, ChevronLeft, HelpCircle, Zap, Layers, Share2, Palette, Code } from 'lucide-react'
 import { useTutorial } from './TutorialContext'
 
 const tutorialSteps = [
@@ -7,7 +7,7 @@ const tutorialSteps = [
     id: 'toolbar',
     title: 'The Toolbar',
     description: 'Access all neural layer types and tools from here. Drag nodes onto the canvas to start building.',
-    position: { top: '100px', left: '20px' },
+    position: { top: '120px', left: '20px' },
     target: 'toolbar'
   },
   {
@@ -21,7 +21,7 @@ const tutorialSteps = [
     id: 'properties',
     title: 'Properties Panel',
     description: 'Select any node to view and edit its parameters here. All layer configurations are centralized.',
-    position: { top: '100px', right: '20px' },
+    position: { top: '120px', right: '20px' },
     target: 'properties-panel'
   },
   {
@@ -35,9 +35,16 @@ const tutorialSteps = [
     id: 'export',
     title: 'Export & Share',
     description: 'Export your architecture to code or share with your team. Supports PyTorch, TensorFlow, and more.',
-    position: { bottom: '100px', right: '20px' },
+    position: { bottom: '120px', right: '20px' },
     target: 'export-button'
   },
+  {
+    id: 'theme',
+    title: 'Dark Mode',
+    description: 'Toggle between light and dark themes for comfortable viewing in any environment.',
+    position: { top: '20px', right: '20px' },
+    target: 'theme-toggle'
+  },
   {
     id: 'complete',
     title: 'Tutorial Complete!',
@@ -91,7 +98,7 @@ export default function TutorialOverlay() {
       {highlightedElement && (
         <div className="fixed inset-0 z-40 pointer-events-none">
           <div
-            className="absolute border-4 border-primary-500 rounded-lg shadow-2xl"
+            className="absolute border-4 border-primary-500 rounded-lg shadow-2xl transition-all duration-300"
             style={{
               ...highlightedElement.getBoundingClientRect(),
               boxShadow: '0 0 0 9999px rgba(0, 0, 0, 0.6)'
@@ -112,8 +119,8 @@ export default function TutorialOverlay() {
           {tutorialSteps.map((_, index) => (
             <div
               key={index}
-              className={`w-2 h-2 rounded-full transition-colors ${
-                index === currentStep ? 'bg-primary-600' : 'bg-gray-300'
+              className={`w-2 h-2 rounded-full transition-all duration-300 ${
+                index === currentStep ? 'bg-primary-600 w-8' : 'bg-gray-300'
               }`}
             />
           ))}
@@ -125,8 +132,9 @@ export default function TutorialOverlay() {
           {currentStep === 1 && <Layers className="w-6 h-6 text-primary-600" />}
           {currentStep === 2 && <Settings className="w-6 h-6 text-primary-600" />}
           {currentStep === 3 && <Share2 className="w-6 h-6 text-primary-600" />}
-          {currentStep === 4 && <HelpCircle className="w-6 h-6 text-primary-600" />}
-          {currentStep === 5 && <Check className="w-6 h-6 text-primary-600" />}
+          {currentStep === 4 && <Code className="w-6 h-6 text-primary-600" />}
+          {currentStep === 5 && <Palette className="w-6 h-6 text-primary-600" />}
+          {currentStep === 6 && <Check className="w-6 h-6 text-primary-600" />}
         </div>
 
         {/* Content */}