Improve landing

src/components/landing/LandingHeader.tsx

@@ -21,12 +21,11 @@ const LandingHeader: React.FC<LandingHeaderProps> = ({
         <h1 className="text-5xl font-bold tracking-tight">LeLab</h1>
         <p className="text-xl text-gray-400">LeRobot but on HFSpace.</p>
         <Button
-          variant="ghost"
-          size="icon"
+          variant="outline"
           onClick={onShowInstructions}
-          className="mx-auto"
+          className="mx-auto flex items-center gap-2 border-blue-500 text-blue-400 hover:text-white hover:bg-blue-600 hover:border-blue-600 transition-colors duration-200 px-6 py-2"
         >
-          <Info className="h-6 w-6 text-gray-400 hover:text-white" />
+          👉&nbsp;&nbsp;&nbsp;&nbsp;Getting started&nbsp;&nbsp;&nbsp;&nbsp;👈
         </Button>
       </div>
     </div>

src/pages/Landing.tsx

@@ -358,6 +358,13 @@ const Landing = () => {
   };
 
   const actions: Action[] = [
+    {
+      title: "Calibration",
+      description: "Calibrate robot arm positions.",
+      handler: handleCalibrationClick,
+      color: "bg-indigo-500 hover:bg-indigo-600",
+      isWorkInProgress: false,
+    },
     {
       title: "Teleoperation",
       description: "Control the robot arm in real-time.",
@@ -371,17 +378,10 @@ const Landing = () => {
       color: "bg-red-500 hover:bg-red-600",
     },
     {
-      title: "Direct Follower Control",
-      description: "Control robot arm with mouse movements.",
-      handler: handleDirectFollowerClick,
-      color: "bg-blue-500 hover:bg-blue-600",
-      isWorkInProgress: true,
-    },
-    {
-      title: "Calibration",
-      description: "Calibrate robot arm positions.",
-      handler: handleCalibrationClick,
-      color: "bg-indigo-500 hover:bg-indigo-600",
+      title: "Replay Dataset",
+      description: "Replay and analyze recorded datasets.",
+      handler: handleReplayDatasetClick,
+      color: "bg-purple-500 hover:bg-purple-600",
       isWorkInProgress: true,
     },
     {
@@ -392,10 +392,10 @@ const Landing = () => {
       isWorkInProgress: true,
     },
     {
-      title: "Replay Dataset",
-      description: "Replay and analyze recorded datasets.",
-      handler: handleReplayDatasetClick,
-      color: "bg-purple-500 hover:bg-purple-600",
+      title: "Direct Follower Control",
+      description: "Control robot arm with mouse movements.",
+      handler: handleDirectFollowerClick,
+      color: "bg-blue-500 hover:bg-blue-600",
       isWorkInProgress: true,
     },
   ];