From 62d9c2e8364f33a71fd2715f5de51b1fde5d429a Mon Sep 17 00:00:00 2001
From: ajaysi <ajay.calsoft@gmail.com>
Date: Sun, 1 Mar 2026 18:42:27 +0530
Subject: [PATCH] feat: Cherry-pick Website Maker feature from remote backup

---
 .../BusinessDescriptionStep.tsx               | 639 +++++++++---------
 .../OnboardingWizard/WebsiteStep.tsx          |  20 +-
 frontend/src/services/onboardingCache.ts      |  16 +
 3 files changed, 349 insertions(+), 326 deletions(-)

diff --git a/frontend/src/components/OnboardingWizard/BusinessDescriptionStep.tsx b/frontend/src/components/OnboardingWizard/BusinessDescriptionStep.tsx
index 32886af3..98e74ce4 100644
--- a/frontend/src/components/OnboardingWizard/BusinessDescriptionStep.tsx
+++ b/frontend/src/components/OnboardingWizard/BusinessDescriptionStep.tsx
@@ -1,32 +1,6 @@
 import React, { useState, useEffect } from 'react';
-import { 
-  Box, 
-  Button, 
-  TextField, 
-  Typography, 
-  Card, 
-  CardContent, 
-  CircularProgress, 
-  Alert,
-  Dialog,
-  DialogTitle,
-  DialogContent,
-  DialogActions,
-  Grid,
-  CardActionArea,
-  Tooltip,
-  InputAdornment,
-  IconButton,
-  Chip
-} from '@mui/material';
-import { 
-  ArrowBack as ArrowBackIcon, 
-  Save as SaveIcon, 
-  CheckCircle as CheckCircleIcon,
-  HelpOutline as HelpIcon,
-  Lightbulb as LightbulbIcon,
-  AutoAwesome as AutoAwesomeIcon
-} from '@mui/icons-material';
+import { Box, Button, TextField, Typography, Card, CardContent, CircularProgress, Alert, MenuItem, Divider } from '@mui/material';
+import { ArrowBack as ArrowBackIcon, Save as SaveIcon, CheckCircle as CheckCircleIcon } from '@mui/icons-material';
 import { businessInfoApi, BusinessInfo } from '../../api/businessInfo';
 import { onboardingCache } from '../../services/onboardingCache';
 
@@ -35,36 +9,72 @@ interface BusinessDescriptionStepProps {
   onContinue: (businessData?: BusinessInfo) => void;
 }
 
-const BUSINESS_EXAMPLES = [
-  {
-    title: "SaaS Tech Startup",
-    description: "We provide AI-powered project management tools for remote teams to boost productivity and collaboration. Our platform integrates with popular tools like Slack and Jira.",
-    industry: "Technology / Software",
-    target_audience: "Remote-first companies, Project Managers, Product Owners, Startups",
-    business_goals: "Increase user acquisition by 20% in Q3, improve user retention, and launch a new mobile app."
-  },
-  {
-    title: "Artisanal Coffee Shop",
-    description: "A cozy local coffee shop specializing in single-origin beans and homemade pastries, serving the downtown community with a focus on sustainability.",
-    industry: "Food & Beverage / Hospitality",
-    target_audience: "Local residents, office workers, coffee enthusiasts, students",
-    business_goals: "Build a loyal customer base, increase foot traffic during weekdays, and expand catering services for local offices."
-  },
-  {
-    title: "Digital Marketing Agency",
-    description: "A full-service digital marketing agency helping small businesses grow their online presence through SEO, PPC, and content marketing strategies.",
-    industry: "Marketing & Advertising",
-    target_audience: "Small to medium-sized business owners, e-commerce stores, local service providers",
-    business_goals: "Acquire 10 new monthly retainer clients, expand service offerings to include video marketing, and become a thought leader."
-  }
+interface WebsiteIntakeForm {
+  business_name: string;
+  business_summary: string;
+  template_type: 'blog' | 'profile' | 'shop' | 'dont_know';
+  geo_scope: 'global' | 'local' | 'hyper_local' | 'dont_know';
+  primary_offerings: string;
+  target_audience: string;
+  audience_type: 'B2B' | 'B2C' | 'Both' | 'dont_know';
+  brand_tone: string;
+  brand_adjectives: string;
+  avoid_terms: string;
+  competitor_urls: string;
+  contact_email: string;
+  contact_phone: string;
+  contact_location: string;
+  product_asset_mode: 'upload' | 'generate' | 'dont_know';
+  product_asset_urls: string;
+  product_asset_ids: string;
+}
+
+const templateOptions = [
+  { value: 'dont_know', label: "Don't know yet" },
+  { value: 'blog', label: 'Blog / Creator site' },
+  { value: 'profile', label: 'Profile / Services' },
+  { value: 'shop', label: 'Shop / Products' }
+];
+
+const geoScopeOptions = [
+  { value: 'dont_know', label: "Don't know yet" },
+  { value: 'global', label: 'Global' },
+  { value: 'local', label: 'Local' },
+  { value: 'hyper_local', label: 'Hyper-local' }
+];
+
+const audienceTypeOptions = [
+  { value: 'dont_know', label: "Don't know yet" },
+  { value: 'B2B', label: 'B2B' },
+  { value: 'B2C', label: 'B2C' },
+  { value: 'Both', label: 'Both' }
+];
+
+const productAssetOptions = [
+  { value: 'dont_know', label: "Don't know yet" },
+  { value: 'upload', label: 'Upload product images' },
+  { value: 'generate', label: 'Generate with AI (Product Marketing Studio)' }
 ];
 
 const BusinessDescriptionStep: React.FC<BusinessDescriptionStepProps> = ({ onBack, onContinue }) => {
-  const [formData, setFormData] = useState<BusinessInfo>({
-    business_description: '',
-    industry: '',
+  const [intakeForm, setIntakeForm] = useState<WebsiteIntakeForm>({
+    business_name: '',
+    business_summary: '',
+    template_type: 'dont_know',
+    geo_scope: 'dont_know',
+    primary_offerings: '',
     target_audience: '',
-    business_goals: '',
+    audience_type: 'dont_know',
+    brand_tone: 'Don\'t know yet',
+    brand_adjectives: '',
+    avoid_terms: '',
+    competitor_urls: '',
+    contact_email: '',
+    contact_phone: '',
+    contact_location: '',
+    product_asset_mode: 'dont_know',
+    product_asset_urls: '',
+    product_asset_ids: '',
   });
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
@@ -74,48 +84,46 @@ const BusinessDescriptionStep: React.FC<BusinessDescriptionStepProps> = ({ onBac
   useEffect(() => {
     console.log('🔄 BusinessDescriptionStep mounted. Loading cached data...');
     const cachedData = onboardingCache.getStepData(2)?.businessInfo;
+    const cachedIntake = onboardingCache.getStepData(2)?.websiteIntake;
     if (cachedData) {
-      setFormData(cachedData);
       console.log('✅ Loaded cached business info:', cachedData);
     } else {
       console.log('ℹ️ No cached business info found.');
     }
+    if (cachedIntake) {
+      setIntakeForm(cachedIntake);
+      console.log('✅ Loaded cached website intake:', cachedIntake);
+    }
   }, []);
 
-  const handleExampleSelect = (example: typeof BUSINESS_EXAMPLES[0]) => {
-    setFormData({
-      business_description: example.description,
-      industry: example.industry,
-      target_audience: example.target_audience,
-      business_goals: example.business_goals,
-    });
-    setShowExamples(false);
-    setSuccess('Example data populated! You can now edit it to fit your needs.');
-    setTimeout(() => setSuccess(null), 3000);
-  };
-
-  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+  const handleIntakeChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
     const { name, value } = e.target;
-    setFormData(prev => ({ ...prev, [name]: value }));
+    setIntakeForm(prev => ({ ...prev, [name]: value }));
   };
 
   const handleSaveAndContinue = async () => {
     setError(null);
     setSuccess(null);
     setLoading(true);
-    console.log('🚀 Attempting to save business info:', formData);
+    const derivedBusinessInfo: BusinessInfo = {
+      business_description: intakeForm.business_summary || 'No description provided',
+      industry: intakeForm.template_type === 'dont_know' ? '' : intakeForm.template_type,
+      target_audience: intakeForm.target_audience,
+      business_goals: intakeForm.primary_offerings,
+    };
+    console.log('🚀 Attempting to save business info:', derivedBusinessInfo);
 
     try {
       // Simulate user_id for now, replace with actual user_id from auth context later
       const userId = 1; 
-      const dataToSave = { ...formData, user_id: userId };
+      const dataToSave = { ...derivedBusinessInfo, user_id: userId };
 
       const response = await businessInfoApi.saveBusinessInfo(dataToSave);
       console.log('✅ Business info saved to DB:', response);
       setSuccess('Business information saved successfully!');
 
       // Also save to cache for consistency with other steps
-      onboardingCache.saveStepData(2, { businessInfo: response, hasWebsite: false });
+      onboardingCache.saveStepData(2, { businessInfo: response, websiteIntake: intakeForm, hasWebsite: false });
       console.log('✅ Business info saved to cache.');
 
       setTimeout(() => {
@@ -131,25 +139,12 @@ const BusinessDescriptionStep: React.FC<BusinessDescriptionStepProps> = ({ onBac
 
   return (
     <Box sx={{ mt: 4 }}>
-      <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', mb: 3 }}>
-        <Box>
-          <Typography variant="h5" gutterBottom sx={{ fontWeight: 600, color: '#111827' }}>
-            Tell us about your business
-          </Typography>
-          <Typography variant="body1" color="text.secondary">
-            Provide details about your business to help ALwrity tailor its services.
-          </Typography>
-        </Box>
-        <Button
-          variant="outlined"
-          color="primary"
-          startIcon={<LightbulbIcon />}
-          onClick={() => setShowExamples(true)}
-          sx={{ textTransform: 'none', borderRadius: '8px', whiteSpace: 'nowrap', ml: 2 }}
-        >
-          See Examples
-        </Button>
-      </Box>
+      <Typography variant="h5" gutterBottom>
+        Create your AI-generated website
+      </Typography>
+      <Typography variant="body1" color="textSecondary" sx={{ mb: 3 }}>
+        Share a few details (even 3-4 lines is enough). If you are unsure, choose “Don't know yet” and we’ll fill the gaps with AI.
+      </Typography>
 
       <Card sx={{ 
         p: 3, 
@@ -164,156 +159,233 @@ const BusinessDescriptionStep: React.FC<BusinessDescriptionStepProps> = ({ onBac
           {error && <Alert severity="error" sx={{ mb: 2 }}>{error}</Alert>}
           {success && <Alert severity="success" sx={{ mb: 2 }} icon={<CheckCircleIcon fontSize="inherit" />}>{success}</Alert>}
 
-          <Tooltip title="Describe what your business does, your unique value proposition, and your key products or services." arrow placement="top">
-            <TextField
-              label="Business Description"
-              name="business_description"
-              value={formData.business_description}
-              onChange={handleChange}
-              fullWidth
-              multiline
-              rows={4}
-              margin="normal"
-              required
-              placeholder="e.g., We provide AI-powered project management tools for remote teams..."
-              helperText={`${formData.business_description.length}/1000 characters`}
-              inputProps={{ maxLength: 1000 }}
-              disabled={loading}
-              InputProps={{
-                startAdornment: (
-                  <InputAdornment position="start" sx={{ mt: -3 }}>
-                    <HelpIcon color="action" fontSize="small" />
-                  </InputAdornment>
-                ),
-              }}
-              sx={{
-                '& .MuiOutlinedInput-root': {
-                  bgcolor: '#F9FAFB',
-                  color: '#111827',
-                  borderRadius: '12px',
-                  transition: 'all 0.2s',
-                  '& fieldset': { borderColor: '#E5E7EB' },
-                  '&:hover fieldset': { borderColor: '#6C5CE7' },
-                  '&.Mui-focused fieldset': { borderColor: '#6C5CE7', borderWidth: '2px' },
-                  '&.Mui-focused': { bgcolor: '#FFFFFF', boxShadow: '0 0 0 4px rgba(108, 92, 231, 0.1)' }
-                },
-                '& .MuiInputLabel-root': { color: '#6B7280' },
-                '& .MuiInputLabel-root.Mui-focused': { color: '#6C5CE7' },
-              }}
-            />
-          </Tooltip>
-
-          <Tooltip title="What industry or sector does your business operate in?" arrow placement="top">
-            <TextField
-              label="Industry"
-              name="industry"
-              value={formData.industry}
-              onChange={handleChange}
-              fullWidth
-              margin="normal"
-              placeholder="e.g., Technology, Retail, Healthcare..."
-              helperText={`${(formData.industry || '').length}/100 characters`}
-              inputProps={{ maxLength: 100 }}
-              disabled={loading}
-              InputProps={{
-                startAdornment: (
-                  <InputAdornment position="start">
-                    <HelpIcon color="action" fontSize="small" />
-                  </InputAdornment>
-                ),
-              }}
-              sx={{
-                '& .MuiOutlinedInput-root': {
-                  bgcolor: '#F9FAFB',
-                  color: '#111827',
-                  borderRadius: '12px',
-                  transition: 'all 0.2s',
-                  '& fieldset': { borderColor: '#E5E7EB' },
-                  '&:hover fieldset': { borderColor: '#6C5CE7' },
-                  '&.Mui-focused fieldset': { borderColor: '#6C5CE7', borderWidth: '2px' },
-                  '&.Mui-focused': { bgcolor: '#FFFFFF', boxShadow: '0 0 0 4px rgba(108, 92, 231, 0.1)' }
-                },
-                '& .MuiInputLabel-root': { color: '#6B7280' },
-                '& .MuiInputLabel-root.Mui-focused': { color: '#6C5CE7' },
-              }}
-            />
-          </Tooltip>
-
-          <Tooltip title="Who are your ideal customers? Be specific about demographics, interests, or roles." arrow placement="top">
-            <TextField
-              label="Target Audience"
-              name="target_audience"
-              value={formData.target_audience}
-              onChange={handleChange}
-              fullWidth
-              multiline
-              rows={2}
-              margin="normal"
-              placeholder="e.g., Small business owners, marketing managers, eco-conscious consumers..."
-              helperText={`${(formData.target_audience || '').length}/500 characters`}
-              inputProps={{ maxLength: 500 }}
-              disabled={loading}
-              InputProps={{
-                startAdornment: (
-                  <InputAdornment position="start" sx={{ mt: -1 }}>
-                    <HelpIcon color="action" fontSize="small" />
-                  </InputAdornment>
-                ),
-              }}
-              sx={{
-                '& .MuiOutlinedInput-root': {
-                  bgcolor: '#F9FAFB',
-                  color: '#111827',
-                  borderRadius: '12px',
-                  transition: 'all 0.2s',
-                  '& fieldset': { borderColor: '#E5E7EB' },
-                  '&:hover fieldset': { borderColor: '#6C5CE7' },
-                  '&.Mui-focused fieldset': { borderColor: '#6C5CE7', borderWidth: '2px' },
-                  '&.Mui-focused': { bgcolor: '#FFFFFF', boxShadow: '0 0 0 4px rgba(108, 92, 231, 0.1)' }
-                },
-                '& .MuiInputLabel-root': { color: '#6B7280' },
-                '& .MuiInputLabel-root.Mui-focused': { color: '#6C5CE7' },
-              }}
-            />
-          </Tooltip>
-
-          <Tooltip title="What are your main objectives for the next 6-12 months?" arrow placement="top">
-            <TextField
-              label="Business Goals"
-              name="business_goals"
-              value={formData.business_goals}
-              onChange={handleChange}
-              fullWidth
-              multiline
-              rows={3}
-              margin="normal"
-              placeholder="e.g., Increase brand awareness, generate more leads, launch a new product..."
-              helperText={`${(formData.business_goals || '').length}/1000 characters`}
-              inputProps={{ maxLength: 1000 }}
-              disabled={loading}
-              InputProps={{
-                startAdornment: (
-                  <InputAdornment position="start" sx={{ mt: -2 }}>
-                    <HelpIcon color="action" fontSize="small" />
-                  </InputAdornment>
-                ),
-              }}
-              sx={{
-                '& .MuiOutlinedInput-root': {
-                  bgcolor: '#F9FAFB',
-                  color: '#111827',
-                  borderRadius: '12px',
-                  transition: 'all 0.2s',
-                  '& fieldset': { borderColor: '#E5E7EB' },
-                  '&:hover fieldset': { borderColor: '#6C5CE7' },
-                  '&.Mui-focused fieldset': { borderColor: '#6C5CE7', borderWidth: '2px' },
-                  '&.Mui-focused': { bgcolor: '#FFFFFF', boxShadow: '0 0 0 4px rgba(108, 92, 231, 0.1)' }
-                },
-                '& .MuiInputLabel-root': { color: '#6B7280' },
-                '& .MuiInputLabel-root.Mui-focused': { color: '#6C5CE7' },
-              }}
-            />
-          </Tooltip>
+          <TextField
+            label="Business Name"
+            name="business_name"
+            value={intakeForm.business_name}
+            onChange={handleIntakeChange}
+            fullWidth
+            margin="normal"
+            placeholder="e.g., Maple Street Homestays"
+            disabled={loading}
+          />
+          <TextField
+            label="Describe what you do (3-4 lines)"
+            name="business_summary"
+            value={intakeForm.business_summary}
+            onChange={handleIntakeChange}
+            fullWidth
+            multiline
+            rows={4}
+            margin="normal"
+            required
+            helperText={`${intakeForm.business_summary.length}/1000 characters`}
+            inputProps={{ maxLength: 1000 }}
+            disabled={loading}
+          />
+          <TextField
+            label="Website template"
+            name="template_type"
+            value={intakeForm.template_type}
+            onChange={handleIntakeChange}
+            select
+            fullWidth
+            margin="normal"
+            disabled={loading}
+          >
+            {templateOptions.map(option => (
+              <MenuItem key={option.value} value={option.value}>
+                {option.label}
+              </MenuItem>
+            ))}
+          </TextField>
+          <TextField
+            label="Audience scope"
+            name="geo_scope"
+            value={intakeForm.geo_scope}
+            onChange={handleIntakeChange}
+            select
+            fullWidth
+            margin="normal"
+            disabled={loading}
+          >
+            {geoScopeOptions.map(option => (
+              <MenuItem key={option.value} value={option.value}>
+                {option.label}
+              </MenuItem>
+            ))}
+          </TextField>
+          <TextField
+            label="Primary offerings (comma separated)"
+            name="primary_offerings"
+            value={intakeForm.primary_offerings}
+            onChange={handleIntakeChange}
+            fullWidth
+            margin="normal"
+            placeholder="e.g., Short stays, airport pickup, local tours"
+            disabled={loading}
+          />
+          <TextField
+            label="Target audience"
+            name="target_audience"
+            value={intakeForm.target_audience}
+            onChange={handleIntakeChange}
+            fullWidth
+            multiline
+            rows={2}
+            margin="normal"
+            placeholder="e.g., Families visiting Pune for weddings"
+            disabled={loading}
+          />
+          <TextField
+            label="Audience type"
+            name="audience_type"
+            value={intakeForm.audience_type}
+            onChange={handleIntakeChange}
+            select
+            fullWidth
+            margin="normal"
+            disabled={loading}
+          >
+            {audienceTypeOptions.map(option => (
+              <MenuItem key={option.value} value={option.value}>
+                {option.label}
+              </MenuItem>
+            ))}
+          </TextField>
+          <TextField
+            label="Brand tone"
+            name="brand_tone"
+            value={intakeForm.brand_tone}
+            onChange={handleIntakeChange}
+            fullWidth
+            margin="normal"
+            placeholder="Friendly, premium, minimal"
+            disabled={loading}
+          />
+          <TextField
+            label="Brand adjectives (comma separated)"
+            name="brand_adjectives"
+            value={intakeForm.brand_adjectives}
+            onChange={handleIntakeChange}
+            fullWidth
+            margin="normal"
+            placeholder="e.g., cozy, reliable, modern"
+            disabled={loading}
+          />
+          <TextField
+            label="Avoid words or styles"
+            name="avoid_terms"
+            value={intakeForm.avoid_terms}
+            onChange={handleIntakeChange}
+            fullWidth
+            margin="normal"
+            placeholder="e.g., pushy sales language"
+            disabled={loading}
+          />
+          <Divider sx={{ my: 3 }} />
+          <Typography variant="subtitle1" sx={{ mb: 1 }}>
+            Contact details (we’ll use your account email if left blank)
+          </Typography>
+          <TextField
+            label="Contact email"
+            name="contact_email"
+            value={intakeForm.contact_email}
+            onChange={handleIntakeChange}
+            fullWidth
+            margin="normal"
+            placeholder="name@business.com"
+            disabled={loading}
+          />
+          <TextField
+            label="Contact phone"
+            name="contact_phone"
+            value={intakeForm.contact_phone}
+            onChange={handleIntakeChange}
+            fullWidth
+            margin="normal"
+            placeholder="+91 90000 00000"
+            disabled={loading}
+          />
+          <TextField
+            label="Location"
+            name="contact_location"
+            value={intakeForm.contact_location}
+            onChange={handleIntakeChange}
+            fullWidth
+            margin="normal"
+            placeholder="City, Region"
+            disabled={loading}
+          />
+          <Divider sx={{ my: 3 }} />
+          <Typography variant="subtitle1" sx={{ mb: 1 }}>
+            Optional: competitor URLs (1-3)
+          </Typography>
+          <TextField
+            label="Competitor URLs (comma separated)"
+            name="competitor_urls"
+            value={intakeForm.competitor_urls}
+            onChange={handleIntakeChange}
+            fullWidth
+            margin="normal"
+            placeholder="https://competitor1.com, https://competitor2.com"
+            disabled={loading}
+          />
+          {intakeForm.template_type === 'shop' && (
+            <>
+              <Divider sx={{ my: 3 }} />
+              <Typography variant="subtitle1" sx={{ mb: 1 }}>
+                Product images
+              </Typography>
+              <TextField
+                label="Product images"
+                name="product_asset_mode"
+                value={intakeForm.product_asset_mode}
+                onChange={handleIntakeChange}
+                select
+                fullWidth
+                margin="normal"
+                disabled={loading}
+              >
+                {productAssetOptions.map(option => (
+                  <MenuItem key={option.value} value={option.value}>
+                    {option.label}
+                  </MenuItem>
+                ))}
+              </TextField>
+              <Button
+                variant="outlined"
+                color="secondary"
+                href="/campaign-creator"
+                sx={{ mt: 1 }}
+                disabled={loading}
+              >
+                Open Product Marketing Studio
+              </Button>
+              <TextField
+                label="Product image URLs (comma separated)"
+                name="product_asset_urls"
+                value={intakeForm.product_asset_urls}
+                onChange={handleIntakeChange}
+                fullWidth
+                multiline
+                rows={2}
+                margin="normal"
+                placeholder="https://cdn.example.com/product-1.jpg, https://cdn.example.com/product-2.jpg"
+                disabled={loading}
+              />
+              <TextField
+                label="Product asset IDs (comma separated)"
+                name="product_asset_ids"
+                value={intakeForm.product_asset_ids}
+                onChange={handleIntakeChange}
+                fullWidth
+                margin="normal"
+                placeholder="asset_123, asset_456"
+                disabled={loading}
+              />
+            </>
+          )}
         </CardContent>
       </Card>
 
@@ -333,95 +405,12 @@ const BusinessDescriptionStep: React.FC<BusinessDescriptionStepProps> = ({ onBac
           color="primary"
           onClick={handleSaveAndContinue}
           endIcon={loading ? <CircularProgress size={20} color="inherit" /> : <SaveIcon />}
-          disabled={loading || !formData.business_description}
-          sx={{ 
-            boxShadow: '0 4px 6px -1px rgba(108, 92, 231, 0.4), 0 2px 4px -1px rgba(108, 92, 231, 0.2)',
-            '&:hover': { boxShadow: '0 10px 15px -3px rgba(108, 92, 231, 0.4), 0 4px 6px -2px rgba(108, 92, 231, 0.2)' }
-          }}
+          disabled={loading || !intakeForm.business_summary}
         >
           {loading ? 'Saving...' : 'Save & Continue'}
         </Button>
       </Box>
 
-      {/* Examples Modal */}
-      <Dialog 
-        open={showExamples} 
-        onClose={() => setShowExamples(false)}
-        maxWidth="md"
-        fullWidth
-        PaperProps={{
-          sx: { borderRadius: '16px' }
-        }}
-      >
-        <DialogTitle sx={{ display: 'flex', alignItems: 'center', gap: 1, borderBottom: '1px solid #F3F4F6' }}>
-          <AutoAwesomeIcon color="primary" />
-          <Typography variant="h6" component="span" sx={{ fontWeight: 600 }}>
-            Select an Example
-          </Typography>
-          <Typography variant="body2" color="text.secondary" sx={{ ml: 'auto' }}>
-            Click a card to populate the form
-          </Typography>
-        </DialogTitle>
-        <DialogContent sx={{ bgcolor: '#F9FAFB', p: 3 }}>
-          <Grid container spacing={2}>
-            {BUSINESS_EXAMPLES.map((example, index) => (
-              <Grid item xs={12} md={4} key={index}>
-                <Card 
-                  sx={{ 
-                    height: '100%', 
-                    border: '1px solid #E5E7EB',
-                    transition: 'all 0.2s',
-                    '&:hover': {
-                      borderColor: '#6C5CE7',
-                      boxShadow: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
-                      transform: 'translateY(-2px)'
-                    }
-                  }}
-                >
-                  <CardActionArea 
-                    onClick={() => handleExampleSelect(example)}
-                    sx={{ height: '100%', p: 2, display: 'flex', flexDirection: 'column', alignItems: 'flex-start', justifyContent: 'flex-start' }}
-                  >
-                    <Chip 
-                      label={example.title} 
-                      color="primary" 
-                      size="small" 
-                      variant="filled" 
-                      sx={{ mb: 2, fontWeight: 600, bgcolor: '#EEF2FF', color: '#6C5CE7' }} 
-                    />
-                    
-                    <Typography variant="subtitle2" sx={{ fontWeight: 700, mb: 0.5, color: '#374151' }}>
-                      Description:
-                    </Typography>
-                    <Typography variant="body2" color="text.secondary" paragraph sx={{ 
-                      display: '-webkit-box',
-                      WebkitLineClamp: 4,
-                      WebkitBoxOrient: 'vertical',
-                      overflow: 'hidden',
-                      mb: 2,
-                      fontSize: '0.875rem'
-                    }}>
-                      {example.description}
-                    </Typography>
-                    
-                    <Box sx={{ mt: 'auto', width: '100%' }}>
-                      <Typography variant="subtitle2" sx={{ fontWeight: 700, mb: 0.5, color: '#374151' }}>
-                        Industry:
-                      </Typography>
-                      <Typography variant="body2" color="text.secondary">
-                        {example.industry}
-                      </Typography>
-                    </Box>
-                  </CardActionArea>
-                </Card>
-              </Grid>
-            ))}
-          </Grid>
-        </DialogContent>
-        <DialogActions sx={{ borderTop: '1px solid #F3F4F6', p: 2 }}>
-          <Button onClick={() => setShowExamples(false)} color="inherit">Close</Button>
-        </DialogActions>
-      </Dialog>
     </Box>
   );
 };
diff --git a/frontend/src/components/OnboardingWizard/WebsiteStep.tsx b/frontend/src/components/OnboardingWizard/WebsiteStep.tsx
index b50a512e..c82cf559 100644
--- a/frontend/src/components/OnboardingWizard/WebsiteStep.tsx
+++ b/frontend/src/components/OnboardingWizard/WebsiteStep.tsx
@@ -42,6 +42,7 @@ import {
   performAnalysis,
   fetchLastAnalysis
 } from './WebsiteStep/utils';
+import { onboardingCache, WebsiteIntakeCache } from '../../services/onboardingCache';
 
 interface WebsiteStepProps {
   onContinue: (stepData?: any) => void;
@@ -369,7 +370,15 @@ const WebsiteStep: React.FC<WebsiteStepProps> = ({ onContinue, updateHeaderConte
       analysis: analysis,
       useAnalysisForGenAI: useAnalysisForGenAI
     };
-    
+
+    const cachedIntake = onboardingCache.getStepData(2) as WebsiteIntakeCache | undefined;
+    onboardingCache.saveStepData(2, {
+      ...cachedIntake,
+      website: fixedUrl,
+      analysis: analysis,
+      hasWebsite: true
+    });
+
     // Store in localStorage for Step 3 (Competitor Analysis)
     localStorage.setItem('website_url', fixedUrl);
     localStorage.setItem('website_analysis_data', JSON.stringify(analysis));
@@ -619,6 +628,15 @@ const WebsiteStep: React.FC<WebsiteStepProps> = ({ onContinue, updateHeaderConte
                     businessData: businessData
                   };
                   
+                  const cachedIntake = onboardingCache.getStepData(2) as WebsiteIntakeCache | undefined;
+                  onboardingCache.saveStepData(2, {
+                    ...cachedIntake,
+                    website: fixUrlFormat(website),
+                    analysis: analysis,
+                    businessInfo: businessData,
+                    hasWebsite: false
+                  });
+
                   // Store in localStorage for Step 3 (Competitor Analysis)
                   const fixedUrl = fixUrlFormat(website);
                   if (fixedUrl) {
diff --git a/frontend/src/services/onboardingCache.ts b/frontend/src/services/onboardingCache.ts
index a9931381..fe9c4534 100644
--- a/frontend/src/services/onboardingCache.ts
+++ b/frontend/src/services/onboardingCache.ts
@@ -3,6 +3,21 @@
  * Manages client-side caching of onboarding data until final submission
  */
 
+export type PageImages = {
+  home?: string;
+  about?: string;
+  contact?: string;
+  products?: string;
+};
+
+export interface WebsiteIntakeCache {
+  website?: string;
+  analysis?: any;
+  businessInfo?: any;
+  hasWebsite?: boolean;
+  page_images?: PageImages;
+}
+
 interface OnboardingCacheData {
   step1?: {
     apiKeys?: Record<string, string>;
@@ -12,6 +27,7 @@ interface OnboardingCacheData {
     website?: string;
     analysis?: any;
     businessInfo?: any;
+    websiteIntake?: any;
     hasWebsite?: boolean;
   };
   step3?: {