Package Creator — LUFA AI
AI-Powered Packages

Your Showcase,
Built by AI

One form. One click. Claw builds a complete AI-powered showcase — website, images, video, voice, maps, forms, charts, and more — delivered autonomously.

🚀 Create Your Package View Examples 💰 Pricing
The Process

How It Works

📝

Fill the Form

Client info, project details, branding, and what to include.

🤖

Claw Builds It

AI researches, generates images, writes copy, creates video & audio.

🌐

Page Goes Live

Polished one-page site deployed with all media and interactive elements.

📧

Email Delivered

Client receives a styled email with their showcase link and assets.

See It In Action

Live Examples

Same content, 12 unique styles. Every page built by AI — images, video, voice, and all. Pick a vibe.

👑

Luxury & Premium

Black, gold, marble. Playfair Display serif. Dark & moody.
🏢

Professional & Clean

Blue & white, corporate, trustworthy. Light mode.
✨

Minimal & Elegant

White, clean lines, Outfit font. Zen & spacious.
📼

Retro & Nostalgic

Mustard, teal, VHS grain. 70s/80s vibes.
🚀

Futuristic & Techy

Cyan & purple neon, circuits, Space Grotesk. Sci-fi.
🌿

Organic & Natural

Green, earth tones, botanical. Eco-friendly.
🤝

Warm & Community

Golden, welcoming, DM Sans. People-focused.
⚡

Bold & Modern

Indigo & orange, high contrast, neon on dark.
🎨

Playful & Creative

Purple & pink, Poppins, whimsical & fun.
🏛️

Corporate & Formal

Navy, charcoal, gold. Boardroom authority.
🎭

Art Deco

Gold, geometric, 1920s glamour. Gatsby era.
❄️

Nordic

Slate blue, pine green, snow. Scandinavian hygge.
🚀 Build Yours Now
Step 1

Create Your Package

1 Client Info

📁 Click to upload or drag & drop

2 Project Details

We'll scrape this for content and brand info (optional)
Auto-generated from client name if blank

3 Branding & Design

Pick colors, describe them, or hit Generate for an AI-inspired palette
Advanced: adds a custom class to the page body

4 Package Contents

SuMoTuWeThFrSa
Select dates...

5 Special Instructions

Live Preview

Your Package Preview

This updates in real-time as you fill out the form above.

lufaai.com/your-slug

Your Project Title

Project description will appear here...

🖼️
AI Images
🎬
Video
🎙️
Voice
📊
Charts
📈
Dashboard
📱
QR Code
Everything Included

What You Get

🌐
Website
One-page scroller with hero, stats, gallery
🖼️
AI Images
Hero, sections, gallery — all AI-generated
🎬
Promo Video
Short video via Veo 3.1
🎙️
Voice Memo
AI voiceover via ElevenLabs
📊
Charts
Mermaid diagrams & flowcharts
📈
Dashboard
Interactive data visualization
📱
QR Code
Branded, links to live page
📧
Email
Styled HTML with assets
🗺️
Map
Service area with radius overlay
📝
Contact Form
Embedded lead capture
📅
Timeline
Visual milestones & history
💬
Testimonials
Client quote cards
🌗
Dark & Light Themes
Every package includes both variants
📅
Booking Calendar
Date picker with range selection
Transparent Pricing

Choose Your Plan

Starter

$49 / package
  • One-page website
  • 6 AI-generated images
  • QR code
  • Mobile responsive
  • No video
  • No voice memo
  • No charts/dashboard
Get Started

Professional

$149 / package
  • Everything in Starter
  • Promo video (Veo 3.1)
  • Voice memo (ElevenLabs)
  • Charts & dashboard
  • Gallery with lightbox
  • Email package
  • Contact form
Most Popular →

Enterprise

$349 / package
  • Everything in Professional
  • Service area map
  • Team section
  • Timeline & milestones
  • Before/after slider
  • FAQ accordion
  • Pricing table
  • Priority delivery
Go Enterprise

Build Your Package

Select a tier or pick individual features. Your price updates instantly.

Starter
$497
1-page website, 5 AI images, contact form
Professional
$997
Everything in Starter + video, voice, charts, dashboard, QR code, email template
Enterprise
$1,997
Everything in Professional + map, timeline, testimonials, calendar integration
A-la-carte total
$0
Your package price
$497
You save $0

From Blank to Beautiful

Drag the slider to see the transformation. AI builds your page in under 2 hours.

Before: Blank Template
YourBrand
Home About Contact

Welcome to the Future

AI-powered websites delivered in hours, not weeks.

Get Started
⚡ Fast 2-hour delivery
✨ AI-Built Smart design
🚀 Ready Launch today
After: AI-Built in 2 Hours

Choose Your Style

12 hand-crafted themes, each fully customizable with AI.

Ready in 2 Hours

From form submission to live website — here is exactly what happens.

Form Submitted
0 min
AI Processing
~30 min
Review & Polish
~1 hour
Live & Delivered
~2 hours
+ f.price + '
' + '' + ''; div.addEventListener('click', function() { toggleFeature(f.id); }); div.addEventListener('keydown', function(e) { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); toggleFeature(f.id); } }); featuresGrid.appendChild(div); activeFeatures[f.id] = false; }); function toggleFeature(id) { activeFeatures[id] = !activeFeatures[id]; updateToggles(); updatePrice(); } function selectTier(tier) { currentTier = tier; // Auto-enable features included in the tier features.forEach(function(f) { activeFeatures[f.id] = f.tiers.indexOf(tier) !== -1; }); // Update tier card visuals var cards = document.querySelectorAll('.pkw-tier-card'); cards.forEach(function(c) { var isActive = c.getAttribute('data-tier') === tier; c.classList.toggle('pkw-active', isActive); c.setAttribute('aria-pressed', isActive ? 'true' : 'false'); }); updateToggles(); updatePrice(); } function updateToggles() { features.forEach(function(f) { var el = featuresGrid.querySelector('[data-feature="' + f.id + '"]'); var isOn = activeFeatures[f.id]; var isIncluded = f.tiers.indexOf(currentTier) !== -1; el.classList.toggle('pkw-on', isOn); el.setAttribute('aria-checked', isOn ? 'true' : 'false'); el.querySelector('.pkw-feature-included').style.display = (isOn && isIncluded) ? 'block' : 'none'; el.querySelector('.pkw-feature-price').style.display = (isOn && isIncluded) ? 'none' : 'block'; }); } function updatePrice() { var alacarte = 0; features.forEach(function(f) { if (activeFeatures[f.id]) alacarte += f.price; }); var packagePrice = tierPrices[currentTier]; // If user has selected more features than the tier includes, add the extras var extrasTotal = 0; features.forEach(function(f) { if (activeFeatures[f.id] && f.tiers.indexOf(currentTier) === -1) { extrasTotal += f.price; } }); var finalPrice = packagePrice + extrasTotal; var savings = alacarte - finalPrice; if (savings < 0) savings = 0; animateNumber(totalEl, finalPrice); alacarteEl.textContent = ' + alacarte.toLocaleString(); savingsEl.textContent = 'You save + savings.toLocaleString(); savingsEl.style.display = savings > 0 ? 'inline-block' : 'none'; } var animFrame = null; function animateNumber(el, target) { var current = parseInt(el.textContent.replace(/[$,]/g, '')) || 0; if (animFrame) cancelAnimationFrame(animFrame); var start = performance.now(); var duration = 400; function step(now) { var progress = Math.min((now - start) / duration, 1); var ease = 1 - Math.pow(1 - progress, 3); var val = Math.round(current + (target - current) * ease); el.textContent = ' + val.toLocaleString(); if (progress < 1) { animFrame = requestAnimationFrame(step); } } animFrame = requestAnimationFrame(step); } // Tier click handlers document.querySelectorAll('.pkw-tier-card').forEach(function(card) { card.addEventListener('click', function() { selectTier(this.getAttribute('data-tier')); }); card.addEventListener('keydown', function(e) { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); selectTier(this.getAttribute('data-tier')); } }); }); // Initialize selectTier('starter'); /* ========================================================== WIDGET 2: Before/After Slider ========================================================== */ var slider = document.getElementById('pkw-slider'); var afterSide = document.getElementById('pkw-after'); var handle = document.getElementById('pkw-handle'); var isDragging = false; function setSliderPosition(x) { var rect = slider.getBoundingClientRect(); var pct = Math.max(0, Math.min(1, (x - rect.left) / rect.width)); afterSide.style.clipPath = 'inset(0 ' + ((1 - pct) * 100) + '% 0 0)'; handle.style.left = (pct * 100) + '%'; } function onPointerDown(e) { isDragging = true; slider.style.cursor = 'ew-resize'; setSliderPosition(e.clientX || (e.touches && e.touches[0].clientX)); } function onPointerMove(e) { if (!isDragging) return; e.preventDefault(); setSliderPosition(e.clientX || (e.touches && e.touches[0].clientX)); } function onPointerUp() { isDragging = false; slider.style.cursor = 'ew-resize'; } slider.addEventListener('mousedown', onPointerDown); slider.addEventListener('touchstart', onPointerDown, { passive: true }); document.addEventListener('mousemove', onPointerMove); document.addEventListener('touchmove', onPointerMove, { passive: false }); document.addEventListener('mouseup', onPointerUp); document.addEventListener('touchend', onPointerUp); /* ========================================================== WIDGET 3: Theme Preview Carousel ========================================================== */ var themes = [ { name: "Luxury", slug: "luxury", img: "https://lufaai.com/wp-content/uploads/2026/02/luxury-hero.png", url: "https://lufaai.com/demo-luxury/" }, { name: "Professional", slug: "professional", img: "https://lufaai.com/wp-content/uploads/2026/02/professional-hero.png", url: "https://lufaai.com/demo-professional/" }, { name: "Minimal", slug: "minimal", img: "https://lufaai.com/wp-content/uploads/2026/02/minimal-hero.png", url: "https://lufaai.com/demo-minimal/" }, { name: "Retro", slug: "retro", img: "https://lufaai.com/wp-content/uploads/2026/02/retro-hero.jpg", url: "https://lufaai.com/demo-retro/" }, { name: "Futuristic", slug: "futuristic", img: "https://lufaai.com/wp-content/uploads/2026/02/futuristic-hero.png", url: "https://lufaai.com/demo-futuristic/" }, { name: "Organic", slug: "organic", img: "https://lufaai.com/wp-content/uploads/2026/02/organic-hero.jpg", url: "https://lufaai.com/demo-organic/" }, { name: "Warm", slug: "warm", img: "https://lufaai.com/wp-content/uploads/2026/02/warm-hero.png", url: "https://lufaai.com/demo-warm/" }, { name: "Bold", slug: "bold", img: "https://lufaai.com/wp-content/uploads/2026/02/bold-hero.png", url: "https://lufaai.com/demo-bold/" }, { name: "Playful", slug: "playful", img: "https://lufaai.com/wp-content/uploads/2026/02/playful-hero.png", url: "https://lufaai.com/demo-playful/" }, { name: "Corporate", slug: "corporate", img: "https://lufaai.com/wp-content/uploads/2026/02/corporate-hero.png", url: "https://lufaai.com/demo-corporate/" }, { name: "Art Deco", slug: "artdeco", img: "https://lufaai.com/wp-content/uploads/2026/02/theme-artdeco-hero.png", url: "https://lufaai.com/demo-artdeco/" }, { name: "Nordic", slug: "nordic", img: "https://lufaai.com/wp-content/uploads/2026/02/theme-nordic-hero.png", url: "https://lufaai.com/demo-nordic/" } ]; var track = document.getElementById('pkw-track'); var dotsContainer = document.getElementById('pkw-dots'); var prevBtn = document.getElementById('pkw-prev'); var nextBtn = document.getElementById('pkw-next'); var carouselIndex = 0; var autoInterval = null; var cardWidth = 320; // 300px card + 20px gap // Build theme cards themes.forEach(function(t) { var card = document.createElement('div'); card.className = 'pkw-theme-card'; card.innerHTML = '' + t.name + ' theme preview' + '
' + '' + t.name + '' + 'View Demo' + '' + '' + '
'; track.appendChild(card); }); // Calculate how many cards fit in view function getVisibleCount() { var wrap = document.getElementById('pkw-carousel'); var w = wrap.offsetWidth; return Math.max(1, Math.floor(w / cardWidth)); } function getMaxIndex() { return Math.max(0, themes.length - getVisibleCount()); } // Build dots function buildDots() { dotsContainer.innerHTML = ''; var maxIdx = getMaxIndex(); for (var i = 0; i <= maxIdx; i++) { var dot = document.createElement('button'); dot.className = 'pkw-carousel-dot' + (i === carouselIndex ? ' pkw-dot-active' : ''); dot.setAttribute('aria-label', 'Go to slide ' + (i + 1)); dot.setAttribute('data-idx', i); dot.addEventListener('click', function() { goTo(parseInt(this.getAttribute('data-idx'))); }); dotsContainer.appendChild(dot); } } function updateDots() { var dots = dotsContainer.querySelectorAll('.pkw-carousel-dot'); dots.forEach(function(d, i) { d.classList.toggle('pkw-dot-active', i === carouselIndex); }); } function goTo(idx) { var maxIdx = getMaxIndex(); carouselIndex = Math.max(0, Math.min(idx, maxIdx)); track.style.transform = 'translateX(' + (-carouselIndex * cardWidth) + 'px)'; updateDots(); } function goNext() { goTo(carouselIndex + 1 > getMaxIndex() ? 0 : carouselIndex + 1); } function goPrev() { goTo(carouselIndex - 1 < 0 ? getMaxIndex() : carouselIndex - 1); } prevBtn.addEventListener('click', function() { goPrev(); resetAuto(); }); nextBtn.addEventListener('click', function() { goNext(); resetAuto(); }); function startAuto() { autoInterval = setInterval(goNext, 4000); } function resetAuto() { clearInterval(autoInterval); startAuto(); } // Pause on hover var carouselWrap = document.getElementById('pkw-carousel'); carouselWrap.addEventListener('mouseenter', function() { clearInterval(autoInterval); }); carouselWrap.addEventListener('mouseleave', function() { startAuto(); }); // Recalculate on resize var resizeTimer; window.addEventListener('resize', function() { clearTimeout(resizeTimer); resizeTimer = setTimeout(function() { buildDots(); goTo(Math.min(carouselIndex, getMaxIndex())); }, 200); }); buildDots(); startAuto(); /* ========================================================== WIDGET 4: Delivery Timeline — Intersection Observer ========================================================== */ var timelineEl = document.getElementById('pkw-timeline'); var timelineFill = document.getElementById('pkw-timeline-fill'); var steps = timelineEl.querySelectorAll('.pkw-step'); var timelineAnimated = false; var observer = new IntersectionObserver(function(entries) { entries.forEach(function(entry) { if (entry.isIntersecting && !timelineAnimated) { timelineAnimated = true; animateTimeline(); } }); }, { threshold: 0.3 }); observer.observe(timelineEl); function animateTimeline() { // Check if we are in vertical layout (mobile) var isMobile = window.innerWidth <= 768; if (isMobile) { timelineFill.style.height = '100%'; } else { timelineFill.style.width = '100%'; } steps.forEach(function(step, i) { var delay = parseInt(step.getAttribute('data-delay')) || 0; setTimeout(function() { step.classList.add('pkw-visible'); }, delay + 200); setTimeout(function() { step.classList.add('pkw-glow'); }, delay + 600); }); } })();