StackFast Website Rebuild — Complete Prompt + Image Briefs

PART 1: WEBSITE OVERHAUL PROMPT

Use this prompt with Cursor, Bolt, v0, or any AI code tool to rebuild the site.

The Prompt

Build a modern, conversion-focused marketing website for "StackFast" — a custom software development studio targeting small-to-medium businesses in Australia.

## Brand Identity

**Name:** StackFast
**Tagline:** "Custom software for your business — shipped in days, not months."
**Positioning:** We build full-stack applications (not design files) for SMBs who are stuck on spreadsheets, manual processes, or off-the-shelf tools that don't fit.
**Tone:** Confident but approachable. Clear, not jargon-heavy. Fast, not rushed. Affordable, not cheap. These clients are business owners, not developers — write for them.

**Colour Palette:**
- Primary: Deep navy #0F172A (headings, dark sections)
- Accent: Electric blue #3B82F6 (links, buttons, highlights)
- CTA: Warm amber #F59E0B (primary action buttons, urgency)
- Background: White #FFFFFF and light gray #F8FAFC (alternating sections)
- Body text: Slate #334155
- Muted text: #94A3B8

**Typography:**
- Headings: Space Grotesk or Geist (geometric, modern, approachable)
- Body: Inter or system UI stack
- Monospace (if showing code/tech): JetBrains Mono

**Logo:**
- Wordmark: "Stack" in bold/semibold weight, "Fast" in regular weight or electric blue accent
- Optional icon: stacked horizontal bars with slight forward lean (speed + layers)
- Must work on both dark and light backgrounds

**Design References:**
- Vercel.com — dark hero, clean sections, developer credibility
- Linear.app — minimal, product-focused, premium
- Stripe.com — authority through clarity and whitespace
- withsupafast.com — energy, social proof integration, visual case studies, clear CTAs

## Page Structure

Build a single-page marketing site with these sections in order:

### 1. NAVIGATION
- Logo (left)
- Links: What We Build | How It Works | Pricing | Results
- CTA button (right): "Book a Free Call" (amber button)
- Sticky on scroll, blur background effect
- Mobile: hamburger menu

### 2. HERO SECTION
- Dark navy background (#0F172A)
- Headline (large, white): "Custom software for your business — shipped in days, not months."
- Subheadline (slate/muted): "We build the apps, tools, and systems your business needs to run better. You describe the problem, we deliver working software you own."
- Two CTAs: "Book a Free Scope Call" (amber, primary) | "See What We Build" (outline/ghost, secondary)
- Social proof strip below CTAs: "X apps shipped · Average build: 8 days · 100% on time" (with subtle dividers between stats)
- Background: subtle grid pattern or gradient mesh, NOT a stock photo

**Hero background image prompt:**
> Abstract dark navy blue (#0F172A) background with subtle glowing grid lines in electric blue (#3B82F6), minimal geometric shapes suggesting speed and technology, soft gradient mesh, no text, no people, clean and modern, suitable for website hero section with white text overlay. 1920x1080.

### 3. LOGO BAR / TRUST STRIP
- "Trusted by businesses across Australia"
- Row of 5-6 client logos (greyscale, subtle)
- If no real logos yet, use placeholder text: "Featured clients coming soon" or skip this section

### 4. WHAT WE BUILD
- Section headline: "What We Build"
- Subline: "Everything your business needs to stop relying on spreadsheets, manual processes, and tools that don't fit. Not mockups. Working software."
- 6-card grid (2 columns on desktop, 1 on mobile)
- Each card: icon or small illustration + title + 2-line description
- Subtle hover effect (lift shadow or border glow)

Cards (each card needs an illustration — generate these with a consistent flat/line illustration style, all using electric blue #3B82F6 and navy #0F172A on white background):

1. **Business Operations Apps** — Custom tools to run your business — quoting, scheduling, inventory, job tracking, invoicing. Replace the spreadsheets with software built around how YOU work.
   > Image: Minimal flat illustration of a digital dashboard showing charts, task lists, and a calendar view, electric blue (#3B82F6) and navy (#0F172A) on white background, clean lines, modern SaaS style, no text. 800x800.

2. **Customer Portals & Dashboards** — Give your clients a branded login where they can view orders, track progress, download documents, and communicate with your team.
   > Image: Minimal flat illustration of a user login screen with a branded dashboard behind it, showing document list and progress bars, electric blue and navy on white background, clean modern style, no text. 800x800.

3. **Internal Tools & Admin Panels** — Operational dashboards, team management, reporting interfaces, approval workflows. Stop wasting time on manual work.
   > Image: Minimal flat illustration of an admin control panel with data tables, toggle switches, and sidebar navigation, electric blue and navy on white background, clean modern SaaS aesthetic, no text. 800x800.

4. **AI-Powered Features** — Smart document processing, automated categorisation, chatbots, content generation. Add intelligence to your existing workflows.
   > Image: Minimal flat illustration of a document being processed by AI with sparkle/magic elements and flowing data streams, electric blue and warm amber (#F59E0B) accents on white background, modern and clean, no text. 800x800.

5. **API & Integration Layers** — Connect your systems. Payment processing, Xero/MYOB sync, CRM integration, automated data flows between tools.
   > Image: Minimal flat illustration of connected system blocks with arrows flowing between them representing API integrations and data sync, electric blue and navy on white background, clean technical diagram style, no text. 800x800.

6. **Mobile-Ready Applications** — Progressive web apps that work on any device. Give your team and customers access from anywhere — no app store required.
   > Image: Minimal flat illustration of a mobile phone and tablet showing the same responsive application interface, electric blue and navy on white background, clean modern style, no text. 800x800.

### 5. HOW IT WORKS
- 4-step horizontal timeline (vertical on mobile)
- Each step: number circle + title + description
- Subtle connecting line between steps

Steps:
1. **Scope (Day 1)** — You describe the problem. We define what needs to be built, how long it takes, and what it costs. Fixed quote within 24 hours.
2. **Build (Days 2-8)** — We build in the open. Daily updates and a live preview. Watch your app take shape in real time.
3. **Ship (Days 8-14)** — Deployed and live. Full source code handover. Documentation. 2 weeks of bug fixes included.
4. **Own** — It's yours. The code, the data, the infrastructure. No vendor lock-in. No ongoing fees unless you want continued development.

### 6. BEFORE / AFTER
- Two-column layout (or sliding comparison)
- Left (muted/red tones): "Before StackFast"
  - Running your business on spreadsheets and email
  - Paying staff to do data entry a computer should handle
  - Off-the-shelf software that doesn't fit how you work
  - Quoted $80K+ by dev agencies (and 6 months to deliver)
  - Tried no-code but hit the wall on customisation
- Right (bright/green tones): "After StackFast"
  - Custom software built around YOUR workflows
  - Live and deployed in 1-2 weeks
  - Full source code you own — no lock-in
  - Staff freed up to do actual valuable work
  - A system that grows with your business

### 7. RESULTS / CASE STUDIES
- Section headline: "Real Business Results"
- Grid of 3 case study cards (expandable or linking to detail)
- Each card: hero screenshot + app name + one-line description + industry tag + timeline tag ("Built in X days") + "View case study" link
- Use placeholder/mockup screenshots if real ones aren't available yet

**Case study mockup image prompts (generate these as placeholder screenshots):**

> Mockup 1 — Operations Dashboard: Screenshot of a modern web application dashboard for a construction/trades business, showing job list with status badges, weekly schedule calendar, quote amounts, and sidebar navigation. Clean design using navy, white, and blue accent colours. Realistic SaaS UI, Tailwind CSS aesthetic, light mode. 1920x1080.

> Mockup 2 — Client Portal: Screenshot of a modern client portal web application, showing a project timeline, uploaded documents section, message thread, and progress percentage bar. Clean professional design, branded in navy and blue. Realistic SaaS UI with sidebar navigation, light mode. 1920x1080.

> Mockup 3 — AI Document Tool: Screenshot of a web application for document processing, showing an uploaded invoice on the left and extracted data fields on the right with confidence scores. Clean modern UI with navy and blue accents. Realistic SaaS design, light mode. 1920x1080.

### 8. PRICING
- 3-column pricing table with subtle card design
- Highlight middle tier ("Full Build") as recommended

| | Quick Build | Full Build (recommended) | Growth Partner |
|---|------------|--------------------------|----------------|
| Best for | Single tool or feature | Complete business app | Ongoing development |
| Timeline | 3-7 days | 1-3 weeks | Monthly |
| Includes | Core features, deployment | + Admin panel, APIs, integrations | + Priority support, roadmap |
| Code ownership | Yes | Yes | Yes |
| Post-launch fixes | 2 weeks | 2 weeks | Ongoing |
| Price | $5K-$15K | $15K-$40K | $5K-$8K/mo |
| CTA | "Book a Call" | "Book a Call" (amber) | "Book a Call" |

Below pricing: comparison table (StackFast vs Dev Agency vs Hiring vs No-Code vs Off-the-Shelf)

### 9. TESTIMONIALS
- Alternating quote cards with name, title, company
- Or video embed thumbnails if available
- Placeholder quotes:
  - "StackFast built us a job tracking system in 6 days. My team stopped losing quotes the same week."
  - "We went from idea to live customer portal faster than it took to get a quote from the last agency."
  - "I didn't think we could afford custom software. StackFast showed me we couldn't afford NOT to have it."

### 10. FAQ
- Accordion-style expandable questions:
  - "What kind of businesses do you work with?"
  - "How much does it cost?"
  - "Do I own the code?"
  - "What tech stack do you use?"
  - "What happens after launch?"
  - "How is this different from no-code tools like Bubble?"
  - "Can you work with my existing systems?"

### 11. FINAL CTA
- Dark navy background section
- Headline: "Ready to stop running your business on spreadsheets?"
- Subline: "Book a free scope call. We'll tell you exactly what we'd build, how long it takes, and what it costs. No obligation."
- CTA button: "Book Your Free Call" (amber, large)
- Below: "Or email us at hello@stackfast.com.au"

**CTA background image prompt:**
> Dark navy (#0F172A) background with subtle gradient to slightly lighter navy, faint glowing dots or particles in electric blue creating depth and energy, suitable for website call-to-action section with white text, minimal and modern. 1920x600.

### 12. FOOTER
- Logo + tagline
- Navigation links
- Social links (LinkedIn, Twitter/X, GitHub)
- "Powered by AI-accelerated development"
- ABN number (when registered)
- Copyright 2026 StackFast

## Images Required

Generate these images for the site. Use a consistent style across all illustrations.

**Favicon / App Icon:**
> Minimal geometric icon of three stacked horizontal bars with a slight forward lean suggesting speed, electric blue (#3B82F6) on dark navy (#0F172A) background, simple enough to be recognisable at 32x32 pixels. Generate at 512x512.

**OG Image (for social sharing):**
> Professional social media preview card, dark navy (#0F172A) background, "StackFast" wordmark in white with "Stack" bold and "Fast" in electric blue (#3B82F6), below it "Custom software for your business — shipped in days, not months." in smaller white text, clean minimal design. 1200x630.

**Logo (wordmark):**
> Clean modern wordmark for "StackFast" — "Stack" in bold/semibold dark navy (#0F172A), "Fast" in regular weight electric blue (#3B82F6), geometric sans-serif typeface like Space Grotesk, on transparent/white background. Include a small icon of three stacked horizontal bars with forward lean to the left of the text.

## Technical Requirements
- Built with Next.js (App Router) or Astro
- Tailwind CSS for styling
- Framer Motion for subtle animations (scroll reveals, hover effects)
- Fully responsive (mobile-first)
- Dark/light sections alternating for visual rhythm
- Page speed: target 95+ Lighthouse score
- SEO: proper meta tags, OG images, structured data
- Analytics: Google Analytics 4 or Plausible
- CTA links to Calendly or Cal.com booking page

PART 2: IMAGE GENERATION PROMPTS

Use these with Midjourney, DALL-E, Flux, or Ideogram. Adjust aspect ratios as needed.

HERO BACKGROUND

Prompt 1 — Abstract tech grid:

Abstract dark navy blue background with subtle glowing grid lines in electric blue (#3B82F6), minimal geometric shapes suggesting speed and technology, soft gradient mesh, no text, no people, clean and modern, suitable for website hero section with white text overlay --ar 16:9 --style raw

Prompt 2 — Gradient mesh alternative:

Dark background gradient from deep navy (#0F172A) to dark blue-gray, with subtle flowing light streaks in electric blue and warm amber, abstract and minimal, evoking speed and modern technology, no text, no objects, website hero background --ar 16:9 --style raw

WHAT WE BUILD — 6 Category Icons/Illustrations

Style direction: Clean line illustrations or flat isometric, electric blue (#3B82F6) on white or very light gray. Consistent style across all 6. Think Linear/Notion illustration style.

1. Business Operations Apps:

Minimal flat illustration of a digital dashboard showing charts, task lists, and a calendar view, electric blue (#3B82F6) and navy (#0F172A) colour scheme on white background, clean lines, modern SaaS style, no text, icon suitable for website card --ar 1:1

2. Customer Portals & Dashboards:

Minimal flat illustration of a user login screen with a branded dashboard behind it, showing document list and progress bars, electric blue (#3B82F6) and navy colour scheme on white background, clean modern style, no text --ar 1:1

3. Internal Tools & Admin Panels:

Minimal flat illustration of an admin control panel with data tables, toggle switches, and a sidebar navigation, electric blue and navy colour scheme on white background, clean modern SaaS aesthetic, no text --ar 1:1

4. AI-Powered Features:

Minimal flat illustration of a document being processed by AI, with sparkle/magic elements and flowing data streams, electric blue and warm amber (#F59E0B) accents on white background, modern and clean, no text --ar 1:1

5. API & Integration Layers:

Minimal flat illustration of connected system blocks with arrows flowing between them, representing API integrations and data sync, electric blue and navy on white background, clean technical diagram style, no text --ar 1:1

6. Mobile-Ready Applications:

Minimal flat illustration of a mobile phone and tablet showing the same responsive application interface, electric blue and navy on white background, clean modern style, no text --ar 1:1

CASE STUDY MOCKUP SCREENSHOTS

These are mockup app screenshots to show in case study cards. Generate dashboard/app UI screenshots that look like real delivered work.

1. Operations Dashboard (Trades/Construction):

Screenshot of a modern web application dashboard for a construction/trades business, showing job list with status badges, a weekly schedule calendar, quote amounts, and a sidebar with navigation. Clean design using navy, white, and blue accent colours. Realistic SaaS UI, Tailwind CSS aesthetic, light mode --ar 16:10

2. Client Portal (Professional Services):

Screenshot of a modern client portal web application, showing a project timeline, uploaded documents section, message thread, and progress percentage bar. Clean professional design, branded in navy and blue. Realistic SaaS UI with sidebar navigation, light mode --ar 16:10

3. AI Document Processing Tool:

Screenshot of a web application for document processing, showing an uploaded invoice on the left and extracted data fields on the right with confidence scores. Clean modern UI with navy and blue accents. Realistic SaaS design, light mode --ar 16:10

HOW IT WORKS — Step Illustrations (Optional)

If you want illustrations instead of just numbered circles:

Step 1 — Scope:

Minimal illustration of two people having a conversation with a clipboard and lightbulb between them, suggesting planning and scoping, electric blue line art on white, clean and simple --ar 1:1

Step 2 — Build:

Minimal illustration of code brackets and UI components being assembled, with a progress bar showing construction, electric blue line art on white, clean and modern --ar 1:1

Step 3 — Ship:

Minimal illustration of a rocket or package being launched upward with a checkmark, suggesting deployment and delivery, electric blue line art on white, clean and simple --ar 1:1

Step 4 — Own:

Minimal illustration of a key being handed over, with a code repository icon, suggesting ownership and handover, electric blue line art on white, clean and simple --ar 1:1

BEFORE/AFTER SECTION

Before (pain state):

Illustration of a stressed business owner surrounded by scattered spreadsheets, sticky notes, multiple browser tabs, and a clock showing late hours. Muted, desaturated colours with red/orange tones. Flat modern illustration style, conveying chaos and frustration --ar 16:9

After (solution state):

Illustration of a calm, confident business owner with a clean laptop showing a single organised dashboard, with charts going up and a coffee cup nearby. Bright, clean colours with blue and green tones. Flat modern illustration style, conveying order and efficiency --ar 16:9

TESTIMONIAL SECTION BACKGROUND

Subtle light gray (#F8FAFC) background with very faint geometric pattern of overlapping circles or dots, minimal and clean, suitable for website testimonial section with text overlay, no strong visual elements --ar 16:9

FINAL CTA SECTION BACKGROUND

Dark navy (#0F172A) background with subtle gradient to slightly lighter navy, with faint glowing dots or particles in electric blue, creating depth and energy, suitable for website call-to-action section with white text, minimal and modern --ar 16:9

OG IMAGE (Social Sharing)

Professional social media preview card, dark navy (#0F172A) background, "StackFast" wordmark in white with "Stack" bold and "Fast" in electric blue (#3B82F6), below it the text "Custom software for your business — shipped in days, not months." in smaller white text, clean minimal design, 1200x630 pixels --ar 1200:630

LINKEDIN BANNER

Professional LinkedIn banner, dark navy background with subtle grid pattern in electric blue, "StackFast" wordmark on the left, "Custom business software in days" text on the right, minimal and clean design, 1584x396 pixels --ar 1584:396

FAVICON / APP ICON

Minimal geometric icon of stacked horizontal bars with a slight forward lean suggesting speed, electric blue (#3B82F6) on dark navy (#0F172A) background, simple enough to be recognisable at 32x32 pixels, suitable for favicon --ar 1:1

IMAGE SUMMARY CHECKLIST

Must-haves: 12 images (hero bg, 6 cards, 3 mockups, OG image, favicon)
Nice-to-haves: 8 images (before/after, 4 steps, CTA bg, testimonial bg)
Total: 20 images

The nice-to-haves can all be replaced with CSS gradients, simple icons, or numbered circles — so you can launch with just the 12 must-haves and add polish later.

PART 3: LOGO PROMPTS

5 different directions. Generate a few from each, then pick your favourite and refine.

Logo 1 — Clean Wordmark (Recommended)

Think: Stripe, Linear, Vercel. The safest, most professional option.

Minimal modern wordmark logo for "StackFast", the word "Stack" in bold semibold weight and "Fast" in regular weight, clean geometric sans-serif typeface similar to Space Grotesk, electric blue (#3B82F6) for "Fast" and dark navy (#0F172A) for "Stack", on white background, no icon, no decoration, high contrast, professional tech company logo, vector clean --ar 3:1

Logo 2 — Wordmark + Stacked Bars Icon

The brand concept: layers (stack) + forward motion (fast). Most versatile for favicon + full logo.

Modern logo for "StackFast" featuring a small geometric icon of three horizontal bars stacked with a slight forward lean suggesting speed and momentum, next to a clean sans-serif wordmark, icon in electric blue (#3B82F6), text in dark navy (#0F172A), minimal and geometric, tech startup aesthetic, on white background, vector clean --ar 3:1

Logo 3 — Monogram + Wordmark

"SF" monogram that works at tiny sizes (favicon, app icon) paired with the full name.

Modern tech logo featuring an "SF" monogram where the S and F share a vertical stroke, geometric and minimal, paired with "StackFast" wordmark to the right, electric blue (#3B82F6) monogram with dark navy (#0F172A) text, clean sans-serif typeface, professional SaaS company aesthetic, on white background, vector clean --ar 3:1

Logo 4 — Speed Stack Icon

More distinctive/bold. An abstract mark that suggests both stacking and velocity.

Abstract geometric logo mark for "StackFast" — three chevron or arrow shapes stacked vertically pointing right, suggesting layers and forward speed, gradient from dark navy (#0F172A) to electric blue (#3B82F6), next to clean sans-serif wordmark "StackFast", minimal modern tech aesthetic, on white background, vector clean --ar 3:1

Logo 5 — Contained Badge

Works great for social avatars, favicons, and merchandise. More compact.

Modern contained logo for "StackFast" — rounded square or circle badge in dark navy (#0F172A) containing a minimal geometric icon of stacked speed lines in electric blue (#3B82F6) and white, next to the wordmark "StackFast" in clean sans-serif, tech company aesthetic, professional and compact, on white background, vector clean --ar 3:1

Logo Colour Variants to Generate

Once you pick your favourite direction, generate these variants:

Logo Tips

• Start with the wordmark (Logo 1 or 2) — it's the safest for a new brand
• Generate at high resolution, then trace to vector in Figma or Illustrator
• Test at small sizes — if it's unreadable at 32px, simplify
• The favicon should be the icon only (no text) or the "SF" monogram
• Make sure it works in both light and dark contexts before committing