From c1d1633816b254b008eeaa6aa702fc06e067434e Mon Sep 17 00:00:00 2001
From: Kawa <us.fame.sq@gmail.com>
Date: Wed, 1 Apr 2026 12:48:53 +0200
Subject: [PATCH] feat(10-01): add IntroSection and showIntro gate to App.tsx
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add useState import to WizardShell
- Add showIntro local state (default true) — no persistence, resets on reload
- Add IntroSection component with action-first copy and Get Started CTA
- Copy mentions Azure Blob, S3, OneDrive, and 4 more backends
- Explains rclone.conf + deployment script generation
- Uses MD3_BTN_FILLED for CTA, MD3 tokens throughout
- When showIntro false, renders existing StepIndicator + step content unchanged
---
 src/App.tsx | 38 ++++++++++++++++++++++++++++++++++----
 1 file changed, 34 insertions(+), 4 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index d207d95..0910892 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -2,6 +2,7 @@
 // Step router — renders the correct step component based on currentStep.
 // StepIndicator renders above each step as persistent breadcrumb navigation.
 
+import { useState } from 'react';
 import { useWizard } from './store/context';
 import { WizardProvider } from './store/context';
 import { ThemeToggle } from './components/ui/ThemeToggle';
@@ -10,9 +11,32 @@ import { BackendSelectionStep } from './components/wizard/BackendSelectionStep';
 import { RemoteConfigStep } from './components/wizard/RemoteConfigStep';
 import { DeploymentStep } from './components/wizard/DeploymentStep';
 import { ReviewStep } from './components/wizard/ReviewStep';
+import { MD3_BTN_FILLED } from './styles/md3-buttons';
+
+function IntroSection({ onStart }: { onStart: () => void }) {
+  return (
+    <div className="flex flex-col items-center text-center py-16 px-4">
+      <h2 className="text-2xl font-bold text-on-surface mb-4">
+        Go from zero to a deployable rclone setup in minutes
+      </h2>
+      <p className="text-base text-on-surface-variant max-w-lg mb-3">
+        Ready2Blob walks you through configuring rclone for Azure Blob, S3, OneDrive, and 4 more
+        cloud backends — no syntax knowledge required.
+      </p>
+      <p className="text-base text-on-surface-variant max-w-lg mb-8">
+        The wizard generates a ready-to-use <code className="font-mono text-sm">rclone.conf</code>{' '}
+        and deployment scripts (Intune / RMM) you can download and run immediately.
+      </p>
+      <button type="button" className={MD3_BTN_FILLED} onClick={onStart}>
+        Get Started
+      </button>
+    </div>
+  );
+}
 
 function WizardShell() {
   const { state } = useWizard();
+  const [showIntro, setShowIntro] = useState(true);
 
   const steps = [
     <BackendSelectionStep key="backend" />,
@@ -33,10 +57,16 @@ function WizardShell() {
           <h1 className="text-3xl font-bold text-on-surface">Ready2Blob</h1>
           <ThemeToggle />
         </div>
-        <StepIndicator />
-        <div className="mt-8">
-          {CurrentStep}
-        </div>
+        {showIntro ? (
+          <IntroSection onStart={() => setShowIntro(false)} />
+        ) : (
+          <>
+            <StepIndicator />
+            <div className="mt-8">
+              {CurrentStep}
+            </div>
+          </>
+        )}
       </div>
     </div>
   );