{% include 'nav.html' %}
Created: {{ package.created_at.strftime('%b %d, %Y %H:%M') if package.created_at else 'unknown' }} | Modified: {{ package.updated_at.strftime('%b %d, %Y %H:%M') if package.updated_at else 'unknown' }} | Revisions: {{ revisions | length }} | Augments: {{ augments | length }}
Preview | |

Hero Section

About Section

Features ({{ site_copy.get('features', []) | length }})

{% set features_list = site_copy.get('features', []) %} {% if features_list is mapping and features_list.get('features') is not none %} {% set features_list = features_list.get('features', []) %} {% endif %} {% for f in features_list %}
{% if f is mapping %}
{% else %}
{{ f }}
{% endif %}
{% endfor %}

Testimonials ({{ site_copy.get('testimonials', []) | length }})

{% for t in site_copy.get('testimonials', []) %}
{% endfor %}

FAQ ({{ site_copy.get('faq_items', []) | length }})

{% for item in site_copy.get('faq_items', []) %}
{% endfor %}
{% if site_copy.get('problem_title') or site_copy.get('problem_body') %}

Problem Statement

{% endif %} {% if site_copy.get('solution_title') or site_copy.get('solution_body') %}

Solution

{% endif %} {% if site_copy.get('steps') or site_copy.get('how_it_works_title') %}

How It Works ({{ site_copy.get('steps', []) | length }})

{% for step in site_copy.get('steps', []) %}
Step {{ loop.index }}

{{ step.get('description', '') }}

{% endfor %}
{% endif %} {% if site_copy.get('pricing_tiers') %}

Pricing ({{ site_copy.get('pricing_tiers', []) | length }} tiers)

{% for tier in site_copy.get('pricing_tiers', []) %}
{{ tier.get('name', '') }} {{ tier.get('price', '') }}

{{ tier.get('description', '') }}

{% endfor %}
{% endif %} {% if site_copy.get('contact_title') or site_copy.get('contact_body') %}

Contact

{% endif %} {% if site_copy.get('stats') %}

Stats ({{ site_copy.get('stats', []) | length }})

{% for s in site_copy.get('stats', []) %}
{{ s.get('value', '') }} {{ s.get('label', '') }}
{% endfor %}
{% endif %} {% if site_copy.get('team_members') %}

Team ({{ site_copy.get('team_members', []) | length }})

{% for m in site_copy.get('team_members', []) %}
{{ m.get('name', '') }} {{ m.get('role', '') }}

{{ m.get('bio', '') | truncate(80) }}

{% endfor %}
{% endif %} {% if site_copy.get('gallery_sections') %}

Gallery ({{ site_copy.get('gallery_sections', []) | length }})

{% for g in site_copy.get('gallery_sections', []) %}
{{ g.get('title', '') }}

{{ g.get('description', '') | truncate(80) }}

{% endfor %}
{% endif %} {% if site_copy.get('resource_items') %}

Resources ({{ site_copy.get('resource_items', []) | length }})

{% for r in site_copy.get('resource_items', []) %}
{{ r.get('title', '') }}

{{ r.get('description', '') | truncate(80) }}

{% endfor %}
{% endif %} {% set comp = site_copy.get('comparison_table', {}) %} {% if comp and comp.get('headers') %}

Comparison Table

{{ comp.get('headers', []) | length }} columns, {{ comp.get('rows', []) | length }} rows
{% endif %}

Quick Actions

Package Info

Niche: {{ package.chosen_niche }}
Template: {{ template_type }}
Layout: {{ layout_style }}
Density: {{ density }}
Revisions: {{ revisions | length }}
Augments: {{ augments | length }}

Visual Assets Manager {{ (feature_images | length) + (1 if hero_image_url else 0) }} asset(s)

{% if hero_image_url %} {% set hero_meta = asset_metadata.get(hero_image_url, {}) %}
Hero Banner
★ Primary hero
Hero Banner
{% if hero_meta.size_bytes %} {{ (hero_meta.size_bytes / 1024) | round(1) }} KB {% endif %} {% if hero_meta.modified_at %} {{ hero_meta.modified_at[:10] }} {% endif %}
{% endif %} {% for key, img in feature_images.items() %} {% set img_meta = asset_metadata.get(img.url, {}) %} {% set fp = img.get('focal_point', {}) %}
{{ img.get('type', 'Asset') }}
{% if img.get('is_primary') %} ★ {% endif %} {{ img.get('type', 'custom') }}
{% if fp %}
◎ Focus
{% endif %}
{{ img.get('filename', key) }}
{% if img.get('size_bytes') or img_meta.size_bytes %} {{ ((img.get('size_bytes', 0) or img_meta.get('size_bytes', 0)) / 1024) | round(1) }} KB {% endif %} {% if img.get('created_at') %} {{ img.created_at[:10] }} {% elif img_meta.modified_at %} {{ img_meta.modified_at[:10] }} {% endif %}
{% endfor %} {% if not hero_image_url and not feature_images %}

No assets yet. Generate or upload images below.

{% endif %}

Generate AI Images

Upload Custom Image

Brand Colors

Page Layout

Color Preview

{{ brand.get('name', domain) }}
{{ brand.get('tagline', '') }}
Sample Content
Accent Button

Custom Palettes

Save & reuse
{% if custom_palettes and custom_palettes|length > 0 %} {% for p in custom_palettes %}
{{ p.name }}
Custom
{% endfor %} {% else %}
No custom palettes saved yet. Use the form above to save your current colors.
{% endif %}

Palette Suggestions

Click to apply
Indigo Cosmos
Tech / SaaS
Forest Gold
Health / Wellness
Crimson Blaze
Bold / Food
Ocean Trust
Finance / Corp
Violet Luxe
Beauty / Fashion
Amber Craft
Artisan / Creative
Teal Serenity
Spa / Coaching
Carbon Mint
Dev / IT
Rose Petal
Wedding / Events
Sunset Trail
Travel / Sports
Midnight Scholar
Education
Lime Garden
Eco / Green

Background Texture

{% for cat_key, cat in texture_categories.items() %} {% for tex_key, tex in cat.textures.items() %} {% set full_key = cat_key + '/' + tex_key %} {% endfor %} {% endfor %}
{{ (atmosphere.get('texture_opacity', 0.5) * 100) | int }}%

Animation & Background

{% set _p = brand_data.get('color_primary','#4F46E5') %} {% set _s = brand_data.get('color_secondary','#7C3AED') %} {% set _a = brand_data.get('color_accent','#06B6D4') %} {% set _cur_style = atmosphere.get('animation_style', 'auto') %}
ADAPTIVE MOOD
Animation Off
{{ _cur_style | capitalize }}
{% set style_icons = { 'professional': '', 'creative': '', 'bold': '', 'warm': '', 'minimal': '' } %} {% for style in animation_styles %} {% endfor %}
Slow Fast {{ atmosphere.get('animation_speed', 1.0) }}x

Cursor & Favicon

Current Favicon Preview
Auto-generated from primary color

AI Refinement Chat

Ask AI to refine any part of your package
Hi! I'm here to help you refine your package for {{ domain }}. You can ask me to:
  • Rewrite any section (headline, about, features, etc.)
  • Add more detail or change the tone
  • Generate additional content sections
  • Improve SEO or conversion focus
  • Change the style, voice, or target audience
Just tell me what you'd like to change!

Quick Prompts

Your details will be combined with the prompt you click

Site Map

{% set sm = namespace(hero=site_copy.get('headline',''), about=site_copy.get('about',''), features=site_copy.get('features',[]), testimonials=site_copy.get('testimonials',[]), faq=site_copy.get('faq_items',[]), offer=site_copy.get('offer',''), cta=site_copy.get('cta_text','')) %}
Hero {% if not sm.hero %}{% endif %}
About {% if not sm.about %}{% endif %}
Features {% if sm.features %}({{ sm.features|length }}){% endif %} {% if not sm.features %}{% endif %}
Testimonials {% if sm.testimonials %}({{ sm.testimonials|length }}){% endif %} {% if not sm.testimonials %}{% endif %}
FAQ {% if sm.faq %}({{ sm.faq|length }}){% endif %} {% if not sm.faq %}{% endif %}
Offer {% if not sm.offer %}{% endif %}
CTA {% if not sm.cta %}{% endif %}

Interactive Augments

Augments are interactive tools (estimators, calculators, quizzes) that engage visitors and demonstrate expertise. They're generated as standalone HTML widgets you can embed on any site.

{% for aug in augments %}
{% if aug.augment_type == 'estimator' %} {% elif aug.augment_type == 'assessment' %} {% elif aug.augment_type == 'comparison' %} {% elif aug.augment_type == 'roi_calculator' %} {% elif aug.augment_type == 'configurator' %} {% else %} {% endif %}
{{ aug.title }}
{{ aug.augment_type | replace('_', ' ') | title }} · Created {{ aug.created_at.strftime('%b %d, %H:%M') if aug.created_at else '' }}
Preview
{% if aug.description %}

{{ aug.description }}

{% endif %}
{% endfor %} {% if not augments %}

No augments yet

Click "AI Suggest" or generate one from the panel on the right.

{% endif %}

Generate New Augment

About Augments

Augments are interactive tools that transform your site from a static brochure into a dynamic business platform.

● Cost estimators build trust
● Assessments qualify leads
● Comparators aid decisions
● Configurators boost engagement

Each augment is a standalone HTML file included in your ZIP export.

Project History

{{ revisions | length }} revisions
{% for rev in revisions %}
{% if rev.revision_type == 'ai_refine' %} {% elif rev.revision_type == 'asset' %} {% else %} {% endif %}
{{ rev.description or rev.action }}
{% if rev.ai_prompt %}
Prompt: {{ rev.ai_prompt }}
{% endif %}
{{ rev.created_at.strftime('%b %d, %H:%M') if rev.created_at else '' }}{% if rev.ai_prompt %} · click to expand{% endif %}
{{ rev.revision_type }}
{% endfor %} {% if not revisions %}
No revisions yet. Start editing to build your project history.
{% endif %}

Brand Kit

Loading brand kit...

AI Graphics Pack

Powered by Nano Banana
Advanced: Reference Image & Creative Direction

Style reference only — not saved to brand kit

Generation Mode
or single:

No graphics pack generated yet

Click "Generate Full Pack" to create AI-generated logo, icons, separators, and site essentials matched to your brand

Logo

{% if package.graphics_pack and package.graphics_pack.get('logo') %} Generated Logo {% else %} Not yet generated {% endif %}
{% if package.graphics_pack and package.graphics_pack.get('logo') %} {{ package.graphics_pack.logo.get('asset_id', '') }} Rev {{ package.graphics_pack.logo.get('revision', 1) }} {{ package.graphics_pack.logo.get('style_name', '') }} {{ package.graphics_pack.logo.get('model_name', '') }} {% endif %}

Separator

{% if package.graphics_pack and package.graphics_pack.get('separator') %} Section Separator {% else %} Not yet generated {% endif %}
{% if package.graphics_pack and package.graphics_pack.get('separator') %} {{ package.graphics_pack.separator.get('asset_id', '') }} Rev {{ package.graphics_pack.separator.get('revision', 1) }} {{ package.graphics_pack.separator.get('style_name', '') }} {{ package.graphics_pack.separator.get('model_name', '') }} {% endif %}

Section Icons

{% if package.graphics_pack and package.graphics_pack.get('icons') %} {{ package.graphics_pack.icons | length }} generated {% endif %}
{% if package.graphics_pack and package.graphics_pack.get('icons') %} {% for sec_type, icon_data in package.graphics_pack.icons.items() %}
{{ sec_type }}

{{ sec_type }}

{{ icon_data.get('asset_id', '') }}

{% endfor %} {% else %}

No icons generated yet

{% endif %}

Site Essentials Checklist

{% set essentials_list = [ ('favicon', 'Favicon', 'Browser tab icon — tiny but mighty', 'SE-01'), ('nav_logo', 'Nav Logo', 'Compact logo for site navigation bar', 'SE-02'), ('footer_logo', 'Footer Logo', 'Muted logo variant for dark footers', 'SE-03'), ('og_image', 'Social Share', 'Image shown when site is shared on social media', 'SE-04'), ('cta_accent', 'CTA Accent', 'Decorative graphic near action buttons', 'SE-05'), ('email_header', 'Email Header', 'Branded header for marketing emails', 'SE-06'), ] %} {% set essentials_data = package.graphics_pack.get('essentials', {}) if package.graphics_pack else {} %} {% for ess_key, ess_name, ess_desc, ess_id in essentials_list %} {% set ess = essentials_data.get(ess_key) %}
{{ ess_name }} {% if ess %} Ready {% else %} Missing {% endif %}
{% if ess %}
{{ ess_name }}
{{ ess.get('asset_id', '') }} Rev {{ ess.get('revision', 1) }}
{% else %}

{{ ess_desc }}

{% endif %}
{% endfor %}
{% if package.graphics_pack and package.graphics_pack.get('errors') %}

Generation Errors

{% for err in package.graphics_pack.errors %}

{{ err.asset }}: {{ err.error[:150] }}

{% endfor %}
{% endif %} {% if package.graphics_pack %}
Generated: {{ package.graphics_pack.get('generated_at', 'Unknown')[:19] }} Pack v{{ package.graphics_pack.get('pack_version', 1) }} Model: {{ package.graphics_pack.get('model_name', package.graphics_pack.get('model', 'Unknown')) }} Assets: {{ (package.graphics_pack.get('stats', {}).get('icons_generated', 0) or 0) + (1 if package.graphics_pack.get('logo') else 0) + (1 if package.graphics_pack.get('separator') else 0) + (package.graphics_pack.get('essentials', {}) | length) }} History: {{ package.graphics_pack.get('history', []) | length }}
{% endif %}