stephen/maverickApplicationsSite
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix WorkflowCarousel layout and add placeholder image system

Browse Source 
Restructure WorkflowCarousel into tab headers + detail panel to eliminate
blank space in inactive cards and jarring height jumps on step change.
Detail panel uses a grid overlay crossfade for smooth transitions.

Add PlaceholderImage component and integrate into Hero, BentoCard,
WorkflowCarousel detail panel, and Contact sections. Include AI generation
prompts (PROMPTS.md) for future image creation with Nano Banana 3.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Stephen Minakian
2026-02-06 00:40:07 -07:00
parent 3f8c807dac
commit 2a59beeac8
11 changed files with 244 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
public/images/PROMPTS.md Normal file
View File

@ -0,0 +1,37 @@
# AI Image Generation Prompts (Nano Banana 3)
## 1. Hero Illustration (`hero-dashboard.webp`)
Isometric 3D illustration of a modern software dashboard floating above a desk workspace. Clean minimal style with soft blue (#2563eb) and amber (#f59e0b) accent colors on a light grey background. Shows a laptop screen with abstract UI components — charts, cards, and navigation elements. Subtle floating code snippets and cloud icons surround it. Professional tech company hero image style. No text. No people. Sharp vector-like rendering with soft shadows. 16:10 aspect ratio.
## 2. Web Applications Service (`service-web-apps.webp`)
Clean flat illustration of a modern web application interface. Shows a browser window with a dashboard containing analytics charts, a sidebar navigation, and data cards. Colour palette: deep blue (#2563eb) primary with white and light grey. Minimal geometric style, no text, no people. Soft drop shadows. 4:3 aspect ratio.
## 3. Mobile Development Service (`service-mobile.webp`)
Flat illustration of two smartphones side by side (iOS and Android) displaying a modern mobile app interface. Screens show a clean onboarding flow with abstract UI elements. Blue (#2563eb) accent colour, white backgrounds, rounded corners. Minimal style, no text, no people. 3:2 aspect ratio.
## 4. DevOps & Infrastructure Service (`service-devops.webp`)
Isometric illustration of cloud infrastructure: server racks, Docker containers as stacked blue cubes, CI/CD pipeline shown as connected conveyor belts with checkmarks. Kubernetes wheel logo subtly integrated. Blue (#2563eb) and slate grey colour scheme on white background. Technical but clean, no text, no people. 4:3 aspect ratio.
## 5. Contact Illustration (`contact-collab.webp`)
Warm minimal illustration of two abstract figures collaborating over a shared digital workspace. One figure gestures toward a floating screen with wireframes. Soft blue (#2563eb) and amber (#f59e0b) highlights on a light background. Friendly, approachable, professional. No realistic faces — abstract/geometric people. 4:3 aspect ratio.
## 6. Workflow: Discovery (`workflow-discovery.webp`)
Minimal illustration of a magnifying glass examining a blueprint/roadmap document. Abstract sticky notes and a checklist float nearby. Blue (#2563eb) tones with amber (#f59e0b) accent on dark slate (#1e293b) background. Clean flat style, no text, no people. Square 1:1 aspect ratio.
## 7. Workflow: Design (`workflow-design.webp`)
Minimal illustration of a design workspace: a colour palette, wireframe sketches, and a pen tool cursor. Geometric UI component shapes float in an organised arrangement. Blue (#2563eb) tones with amber accent on dark slate (#1e293b) background. Flat vector style, no text, no people. Square 1:1 aspect ratio.
## 8. Workflow: Build (`workflow-build.webp`)
Minimal illustration of code editor windows stacked at angles, showing abstract coloured syntax lines. A gear/cog icon and test-tube icon float nearby representing testing and automation. Blue (#2563eb) on dark slate (#1e293b). Clean flat style, no text, no people. Square 1:1 aspect ratio.
## 9. Workflow: Deploy (`workflow-deploy.webp`)
Minimal illustration of a rocket launching from a laptop screen toward abstract cloud shapes. Uptime chart and checkmark shield float alongside. Blue (#2563eb) with amber (#f59e0b) rocket flame on dark slate (#1e293b). Flat style, no text, no people. Square 1:1 aspect ratio.