Design a complete homepage for Bit Flows using only HTML and CSS. Share the full HTML and CSS together in one response. Do not use JavaScript, frameworks, external libraries, or CDN assets.
Brand context:
Bit Flows is a workflow automation tool for WordPress and SaaS platforms. It lets users create unlimited automated workflows with a visual drag-and-drop builder. It supports 300+ integrations, AI tools, webhooks, APIs, routers, repeaters, iterators, delays, conditions, logs, and human review workflows. The homepage should feel modern, clean, trustworthy, and product-led.
Brand colors:
Primary: #FF4F00
Secondary: #FFF0E5
Text: #0D0D0D
White: #FFFFFF
Use close variants only when needed.
Design style:
– Clean SaaS homepage
– Modern but not flashy
– Plenty of spacing and padding
– Soft cards and rounded corners
– Clear visual hierarchy
– No heavy background graphics
– Use simple shapes, cards, badges, lines, and UI mockup-style blocks
– Make it responsive for desktop, tablet, and mobile
– Use semantic HTML
– Use accessible contrast and readable font sizes
– Use CSS variables for colors, spacing, and radius
Page sections to design:
1. Header
– Logo text: Bit Flows
– Navigation: Features, Integrations, AI Agent, Pricing, Docs
– CTA buttons: Login and Get Started
– Sticky or clean top header
2. Hero section
– Strong headline:
“Automate WordPress and SaaS Workflows Without Limits”
– Short subtitle:
“Build advanced workflows with triggers, actions, AI tools, webhooks, conditions, and 300+ integrations. All from a clean visual builder.”
– CTA buttons:
“Start Automating” and “View Integrations”
– Add small trust badges:
“Unlimited workflows”, “300+ integrations”, “Self-hosted control”
– Right side visual:
A clean workflow builder mockup showing:
Trigger → Condition → AI Action → App Action
Use cards and connector lines. Do not use screenshots.
3. Social proof / quick value strip
– Four short stats or value cards:
Unlimited workflows
300+ integrations
Visual workflow builder
Advanced automation tools
4. Problem-solution section
– Show the common problem:
“Too many tools. Too many manual tasks.”
– Explain how Bit Flows solves it with connected workflows.
– Use 3 cards:
Automate form submissions
Sync CRM and email tools
Route data with conditions
5. Feature section
– Title: “Everything You Need to Build Smarter Workflows”
– Create 6 feature cards:
Visual Canvas Builder
300+ Integrations
AI Agent and AI Actions
Webhooks and API Requests
Conditions, Router, Iterator, Repeater
Logs, Reports, and Failure Notifications
– Each card should have a simple icon-style shape made with CSS, not external icons.
6. AI automation section
– Highlight AI features:
OpenAI, Gemini, Claude, Deepseek, Perplexity
AI Agent
MCP Client
Text generation, data structuring, routing, and decision-based workflows
– Add a visual card showing an AI node connected to apps.
7. Workflow examples section
– Add 4 use case cards:
Send WordPress form leads to CRM
Add WooCommerce orders to Google Sheets
Send failed task alerts by email
Review leave requests with Human in the Loop
8. Integrations section
– Show integration categories:
Forms, CRM, Email Marketing, LMS, eCommerce, AI Tools, Webhooks, Google Sheets
– Use clean pill cards or small integration blocks.
– Add CTA: “Explore all integrations”
9. Why Bit Flows section
– Compare value in a simple layout:
No per-task SaaS limits
Full control on your site
Advanced tools in one builder
Built for WordPress and external apps
– Keep the tone helpful, not overly promotional.
10. Pricing CTA section
– Title: “Start Building Workflows Without Usage Limits”
– Short copy about affordable plans and lifetime deal
– CTA buttons:
“See Pricing” and “Read Docs”
11. Footer
– Columns:
Product: Features, Integrations, AI Agent, Pricing
Resources: Docs, Blog, Changelog, Support
Company: About, Contact, Privacy Policy
– Add copyright line.
Content rules:
– Keep copy short and direct.
– Avoid hype, buzzwords, and generic SaaS wording.
– Do not use phrases like “revolutionize”, “unlock”, “seamless”, “robust”, “leverage”, or “empower”.
– Use plain English.
– Make the design look production-ready.
Technical requirements:
– Share one complete HTML file.
– Put CSS inside a