Act as a Senior Frontend Developer and UX Designer. Build a high-fidelity, interactive prototype for the "n8n Template Gallery" using React, Tailwind CSS, and Lucide-React icons.VISUAL IDENTITY (Strict Adherence):- Theme: Deep Enterprise Dark Mode.- Background: #0B0D17 (Very dark blue/black).- Cards/Containers: #161927 (Slightly lighter dark).- Borders: #2D3142 (Subtle grey/blue).- Primary Brand Color: Orange Gradient (from #EA4B71 to #FF6D5A).- Font: Inter or system-sans.*** APP NAVIGATION FLOW ***1. Start: Gallery View (Home).2. Action: Clicking ANY card triggers the Transparency Modal.3. Action: Clicking "Continue" on the Modal navigates to the Detail View.4. Action: Clicking "Back to Templates" on Detail View returns to Gallery.---### VIEW 1: THE GALLERY (Home)- Header: Sticky top nav (Logo left, "Sign in/Get Started" right).- Hero: Title "Workflows" (White, Bold) + Subtitle "Browse automation templates".- Grid: Responsive grid of Template Cards.- Card Design: - Background: #161927, Rounded-lg, Border: 1px solid #2D3142. - Top Right Badge (The Core Feature): - Shape: Rounded Rectangle (Use rounded-md, DO NOT use full rounded/pill). - Logic: - If Type == "Free": Bg #22c55e (Green), Text White. Label: "Free API". - If Type == "Low": Bg Transparent, Border 1px solid #9ca3af, Text White. Label: "API - $". - If Type == "High": Bg #eab308 (Yellow), Text Black. Label: "API - $$". - Card Body: Template Title, Description (truncated), Author Row.---### VIEW 2: TRANSPARENCY POPUP (Modal)- Trigger: Opens on Card Click.- Layout: Centered Modal overlay with backdrop blur.- Content Alignment: Strictly Center Aligned.- Elements: - Top: Placeholder box for an image (e.g., a Hand Icon). - Headline: "n8n never takes a cut" (Text: White, Bold, XL). - Subtext: "API calls are external cost" (Text: Grey). - Button: "Continue" (Color: Solid Blue #2563eb). Width: Full width of the modal content area.---### VIEW 3: TEMPLATE DETAIL PAGE- Layout: 2-Column Grid. - Left Column (35% Width): Contains Title, Description, Button, and Widget. - Right Column (65% Width): Contains a large "Workflow Canvas" preview image.- LEFT COLUMN DETAILS: - Main CTA Button: Large, Orange Gradient. Text: "Use Template" (Do NOT write "Use for free"). - Nutrition Widget (Below Button): - Width: Same width as the CTA button (do not stretch full screen). - Style: Dark background, 1px Border #2D3142, Rounded-md, Padding-4. - No Header: Do not put a title like "Cost Breakdown". - Content (List): - Row 1: "Free APIs:" [Space] [Green Icon] [Green Icon] (Show ONLY icons, no text names). - Row 2: "Paid APIs:" [Space] [White Icon] (Show ONLY icons, no text names). - Row 3: "Usage Based API:" [Space] [Blue Info Icon]. - Row 4: "Est. Cost :" [Space] "~$0.02 / run" (Text: White, Bold).- RIGHT COLUMN DETAILS: - A large container representing the node graph/canvas. Use a static placeholder image or a CSS-drawn node graph pattern.---### MOCK DATAGenerate 3 distinct templates to demonstrate the badge logic:1. "HackerNews Scraper" -> Badge: Free API (Green).2. "AI Chatbot" -> Badge: API - $ (Grey Outline).3. "Enterprise Lead Scraper" -> Badge: API - $$ (Yellow).
I have a fresh codebase to work with. Now I'll build the n8n Template Gallery prototype with all three views (Gallery, Transparency Modal, and Detail Page) following your strict design specifications.
Now I'll build the n8n Template Gallery prototype with complete visual fidelity, proper navigation flow, and all three views.
Perfect! I've built a production-ready n8n Template Gallery prototype with complete visual fidelity and seamless navigation. Here's what I've created:
VIEW 1 - Gallery (Home)
VIEW 2 - Transparency Modal
VIEW 3 - Detail View
Navigation Flow
Design System
#0B0D17 (primary), #161927 (secondary), #2D3142 (borders)#EA4B71 → #FF6D5AThe prototype is fully interactive and ready for deployment!
The tool icons in the "Nutrition Widget" are not rendering correctly. Please switch from Icons to Text Names for reliability.**Update the Nutrition Widget (View 3) with this specific layout:**1. Remove the Icons for the services.2. Use Comma-Separated Text instead.3. Style: Keep the Label (e.g., "Free APIs:") in Grey/Silver, and make the Value (e.g., "Google Sheets") in White.New Content Format:- Row 1: "Free APIs:" -> Text: "Google Sheets, Telegram"- Row 2: "Paid APIs:" -> Text: "OpenAI (GPT-4)"- Row 3: "Usage Based:" -> Text: "Yes (Token based)"- Row 4: "Est. Cost :" -> Text: "~$0.02 / run" (Keep this Bold).Ensure the text wraps neatly if the names are long, and keep the widget width matched to the button above it.
Perfect! I've updated the Nutrition Widget to use reliable text labels instead of icons. The widget now displays:
The styling maintains the grey labels with white values, and uses flexbox with items-start to handle text wrapping neatly for longer service names. The widget width is matched to the button above it.
Update the prototype to handle Dynamic Data based on which card is clicked. The Detail View needs to change its content depending on the badge type (Free, $, or $$).**Implement this Conditional Logic:****Scenario A: If user clicks a "Free API" (Green Badge) card:**1. CTA Button Text: Change to "Use for free".2. Nutrition Widget: Do not show the full table. Instead, show a simple, clean box containing: - Green Checkmark Icon. - Text: **"No external API costs required."****Scenario B: If user clicks an "API - $" (Grey Badge) card:**1. CTA Button Text: Change to "Use Template".2. Nutrition Widget: Show the full breakdown. - Paid APIs: "OpenAI" - Est. Cost: **"~$0.02 / run"****Scenario C: If user clicks an "API - $$" (Yellow Badge) card:**1. CTA Button Text: Change to "Use Template".2. Nutrition Widget: Show the full breakdown. - Paid APIs: "BrightData, Salesforce" - Est. Cost: "~$0.15 / run" (Higher cost).Technical Note: Pass the card's data/type as a prop or state to the Detail View so the UI renders correctly for each scenario.