refactor-upto-phase 6

frontend/src/pages/Sites/Builder/steps/BusinessDetailsStep.tsx

@@ -10,10 +10,10 @@ import { useState, useEffect } from 'react';
 import { useBuilderWorkflowStore } from '../../../../store/builderWorkflowStore';
 import { fetchSiteBlueprintById, updateSiteBlueprint, SiteBlueprint } from '../../../../services/api';
 import { Card, CardDescription, CardTitle } from '../../../../components/ui/card';
-import ButtonWithTooltip from '../../../../components/ui/button/ButtonWithTooltip';
+import Button from '../../../../components/ui/button/Button';
 import Input from '../../../../components/form/input/InputField';
 import Alert from '../../../../components/ui/alert/Alert';
-import { Loader2 } from 'lucide-react';
+import { BoltIcon, GridIcon } from '../../../../icons';
 import type { BuilderFormData, SiteBuilderMetadata } from '../../../../types/siteBuilder';
 
 // Stage 1 Wizard props
@@ -115,11 +115,13 @@ function BusinessDetailsStepStage2({ blueprintId }: { blueprintId: number }) {
   const canProceed = formData.name.trim().length > 0;
 
   return (
-    <Card className="p-6">
-      <CardTitle>Business Details</CardTitle>
-      <CardDescription>
-        Tell us about your business and site type to get started.
-      </CardDescription>
+    <Card variant="surface" padding="lg" className="space-y-6">
+      <div>
+        <CardTitle>Business details</CardTitle>
+        <CardDescription>
+          Tell us about your business and hosting preference to keep blueprints organized.
+        </CardDescription>
+      </div>
 
       {error && (
         <Alert variant="error" className="mt-4">
@@ -128,62 +130,58 @@ function BusinessDetailsStepStage2({ blueprintId }: { blueprintId: number }) {
       )}
 
       <div className="mt-6 space-y-4">
-        <div>
-          <label className="block text-sm font-medium mb-2">Site Name *</label>
-          <Input
-            value={formData.name}
-            onChange={(e) => setFormData({ ...formData, name: e.target.value })}
-            placeholder="My Awesome Site"
-            required
-          />
+        <div className="grid gap-6 md:grid-cols-2">
+          <div>
+            <label className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2 block">
+              Site name *
+            </label>
+            <Input
+              value={formData.name}
+              onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+              placeholder="Acme Robotics"
+              required
+            />
+          </div>
+          <div>
+            <label className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2 block">
+              Hosting type
+            </label>
+            <select
+              value={formData.hosting_type}
+              onChange={(e) => setFormData({ ...formData, hosting_type: e.target.value as any })}
+              className="w-full rounded-xl border border-gray-200 bg-white px-3 py-2 text-sm text-gray-900 shadow-theme-xs dark:border-white/10 dark:bg-white/[0.03] dark:text-white"
+            >
+              <option value="igny8_sites">IGNY8 Sites</option>
+              <option value="wordpress">WordPress</option>
+              <option value="shopify">Shopify</option>
+              <option value="multi">Multiple destinations</option>
+            </select>
+          </div>
         </div>
 
         <div>
-          <label className="block text-sm font-medium mb-2">Description</label>
+          <label className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2 block">
+            Business description
+          </label>
           <textarea
             value={formData.description}
             onChange={(e) => setFormData({ ...formData, description: e.target.value })}
-            className="w-full px-3 py-2 border rounded-md"
+            className="w-full rounded-xl border border-gray-200 bg-white px-3 py-2 text-sm text-gray-900 shadow-theme-xs dark:border-white/10 dark:bg-white/[0.03] dark:text-white"
             rows={3}
-            placeholder="Brief description of your site..."
+            placeholder="Brief description of your business and what the site should cover"
           />
         </div>
-
-        <div>
-          <label className="block text-sm font-medium mb-2">Hosting Type</label>
-          <select
-            value={formData.hosting_type}
-            onChange={(e) => setFormData({ ...formData, hosting_type: e.target.value as any })}
-            className="w-full px-3 py-2 border rounded-md"
-          >
-            <option value="igny8_sites">IGNY8 Sites</option>
-            <option value="wordpress">WordPress</option>
-            <option value="shopify">Shopify</option>
-            <option value="multi">Multiple Destinations</option>
-          </select>
-        </div>
       </div>
 
       <div className="mt-6 flex justify-end">
-        <ButtonWithTooltip
+        <Button
           onClick={handleSave}
           disabled={!canProceed || saving || loading}
           variant="primary"
-          tooltip={
-            !canProceed ? 'Please provide a site name to continue' :
-            saving ? 'Saving...' :
-            loading ? 'Loading...' : undefined
-          }
+          startIcon={<GridIcon className="size-4" />}
         >
-          {saving ? (
-            <>
-              <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-              Saving...
-            </>
-          ) : (
-            'Save & Continue'
-          )}
-        </ButtonWithTooltip>
+          {saving ? 'Saving…' : 'Save & continue'}
+        </Button>
       </div>
 
       {!canProceed && (
@@ -208,69 +206,88 @@ function BusinessDetailsStepStage1({
   selectedSectors?: Array<{ id: number; name: string }>;
 }) {
   return (
-    <Card variant="surface" padding="lg">
-      <div className="space-y-4">
-        <div>
-          <p className="text-xs uppercase tracking-wider text-gray-500 dark:text-white/50">
-            Business context
-          </p>
-          <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
-            Business details
-          </h3>
-          <p className="text-sm text-gray-500 dark:text-gray-400">
-            These details help the AI understand what kind of site we are building.
-          </p>
+    <Card variant="surface" padding="lg" className="space-y-6">
+      <div>
+        <div className="inline-flex items-center gap-2 rounded-xl bg-gradient-to-br from-[var(--color-primary)] to-[var(--color-primary-dark)] px-3 py-1 text-xs font-semibold uppercase tracking-wide text-white">
+          <BoltIcon className="size-3.5" />
+          Business context
         </div>
+        <h3 className="mt-3 text-xl font-semibold text-gray-900 dark:text-white">
+          Business details
+        </h3>
+        <p className="text-sm text-gray-500 dark:text-gray-400 max-w-2xl">
+          These inputs help the AI understand what we’re building. You can refine them later in the builder or site settings.
+        </p>
+      </div>
 
-        <div>
-          <label className="block text-sm font-medium mb-2">Site name</label>
+      <div className="grid gap-6 lg:grid-cols-2">
+        <div className="space-y-4 rounded-2xl border border-gray-100 bg-white p-4 shadow-theme-sm dark:border-white/5 dark:bg-white/[0.02]">
+          <label className="text-sm font-semibold text-gray-900 dark:text-white">
+            Site name
+          </label>
           <Input
             value={data.siteName}
             onChange={(e) => onChange('siteName', e.target.value)}
             placeholder="Acme Robotics"
           />
+          <p className="text-xs text-gray-500 dark:text-gray-400">
+            Appears in dashboards, blueprints, and deployment metadata.
+          </p>
         </div>
 
-        <div className="grid grid-cols-2 gap-4">
-          <div>
-            <label className="block text-sm font-medium mb-2">Business type</label>
-            <Input
-              value={data.businessType}
-              onChange={(e) => onChange('businessType', e.target.value)}
-              placeholder="B2B SaaS platform"
-            />
-          </div>
-          <div>
-            <label className="block text-sm font-medium mb-2">Industry</label>
-            <Input
-              value={data.industry}
-              onChange={(e) => onChange('industry', e.target.value)}
-              placeholder="Supply chain automation"
-            />
-          </div>
-        </div>
-
-        <div>
-          <label className="block text-sm font-medium mb-2">Target audience</label>
+        <div className="space-y-4 rounded-2xl border border-gray-100 bg-white p-4 shadow-theme-sm dark:border-white/5 dark:bg-white/[0.02]">
+          <label className="text-sm font-semibold text-gray-900 dark:text-white">
+            Target audience
+          </label>
           <Input
             value={data.targetAudience}
             onChange={(e) => onChange('targetAudience', e.target.value)}
             placeholder="Operations leaders at fast-scaling eCommerce brands"
           />
+          <p className="text-xs text-gray-500 dark:text-gray-400">
+            Helps the AI craft messaging, examples, and tone.
+          </p>
         </div>
+      </div>
 
-        <div>
-          <label className="block text-sm font-medium mb-2">Hosting preference</label>
+      <div className="grid gap-6 lg:grid-cols-3">
+        <div className="space-y-3 rounded-2xl border border-gray-100 bg-white p-4 shadow-theme-sm dark:border-white/5 dark:bg-white/[0.02]">
+          <label className="text-sm font-semibold text-gray-900 dark:text-white">
+            Business type
+          </label>
+          <Input
+            value={data.businessType}
+            onChange={(e) => onChange('businessType', e.target.value)}
+            placeholder="B2B SaaS platform"
+          />
+        </div>
+        <div className="space-y-3 rounded-2xl border border-gray-100 bg-white p-4 shadow-theme-sm dark:border-white/5 dark:bg-white/[0.02]">
+          <label className="text-sm font-semibold text-gray-900 dark:text-white">
+            Industry
+          </label>
+          <Input
+            value={data.industry}
+            onChange={(e) => onChange('industry', e.target.value)}
+            placeholder="Supply chain automation"
+          />
+        </div>
+        <div className="space-y-3 rounded-2xl border border-gray-100 bg-white p-4 shadow-theme-sm dark:border-white/5 dark:bg-white/[0.02]">
+          <label className="text-sm font-semibold text-gray-900 dark:text-white">
+            Hosting preference
+          </label>
           <select
             value={data.hostingType}
             onChange={(e) => onChange('hostingType', e.target.value as BuilderFormData['hostingType'])}
-            className="w-full px-3 py-2 border rounded-md"
+            className="w-full rounded-xl border border-gray-200 bg-white px-3 py-2 text-sm text-gray-900 shadow-theme-xs dark:border-white/10 dark:bg-white/[0.03] dark:text-white"
           >
             <option value="igny8_sites">IGNY8 Sites</option>
             <option value="wordpress">WordPress</option>
             <option value="shopify">Shopify</option>
             <option value="multi">Multiple destinations</option>
           </select>
+          <p className="text-xs text-gray-500 dark:text-gray-400">
+            Determines deployment targets and integration requirements.
+          </p>
         </div>
       </div>
     </Card>