WB Solutions

Professional Web Development & AI Automation

A modern, lightning-fast static website built with HTML5, Tailwind CSS, and vanilla JavaScript. Designed for small businesses seeking professional web presence with AI-powered features.

View Live Site · Report Bug · Request Feature

---

✨ Features

🎨 Design Glassmorphism UI - Frosted glass effects Gold & Charcoal - Premium color palette Smooth Animations - CSS transitions & transforms Custom Typography - Professional font stack	📱 Responsive Mobile-First - 320px to 4K+ support Fluid Layouts - Flexbox & CSS Grid Touch Friendly - Optimized for all devices Adaptive Images - Performance optimized
🤖 AI Integration Chatbot Widget - n8n powered assistant Smart Forms - Webhook integration ROI Calculator - Interactive estimates Auto Responses - Instant engagement	⚡ Performance < 1.5s Load - Optimized assets GZIP Enabled - Compressed delivery Minified CSS - Production ready No Frameworks - Pure vanilla JS

---

🛠️ Tech Stack

Category	Technology
	Semantic markup, accessibility features
	Tailwind CSS v4, custom properties
	ES6+, no dependencies
	Template includes, dynamic content
	Chatbot & form webhooks

---

📁 Project Structure

wb-solutions-html/
│
├── 📄 index.php                    # Homepage
├── 📄 about.php                    # Company info
├── 📄 services.php                 # Services overview
├── 📄 portfolio.php                # Case studies
├── 📄 contact.php                  # Contact form
│
├── 📂 services/
│   ├── static-websites.php         # Web development
│   ├── ai-chat-agents.php          # AI chatbots
│   ├── business-automation.php     # Workflow automation
│   └── custom-branding.php         # Brand design
│
├── 📂 includes/
│   ├── header.php                  # Navigation bar
│   ├── footer.php                  # Site footer
│   └── chatbot.php                 # Chat widget
│
├── 📂 css/
│   └── styles.css                  # Compiled Tailwind
│
├── 📂 js/
│   ├── main.js                     # Core functionality
│   ├── forms.js                    # Form validation
│   ├── chatbot.js                  # Chat logic
│   └── calculator.js               # ROI calculator
│
├── 📂 assets/
│   ├── logo.png                    # Brand logo
│   ├── favicon-16x16.png           # Favicon
│   ├── favicon-32x32.png           # Favicon @2x
│   └── apple-touch-icon.png        # iOS icon
│
├── 📂 src/
│   └── input.css                   # Tailwind source
│
├── ⚙️ package.json                 # npm scripts
├── ⚙️ tailwind.config.js           # Tailwind config
├── ⚙️ .htaccess                    # Apache rules
├── 🤖 robots.txt                   # SEO directives
└── 🗺️ sitemap.xml                  # XML sitemap

---

🚀 Quick Start

Prerequisites

node -v  # v18 or higher
npm -v   # v9 or higher

Installation

# Clone the repository
git clone https://github.com/yourusername/wb-solutions-html.git

# Navigate to project
cd wb-solutions-html

# Install dependencies
npm install

# Build CSS
npm run build:css

Development

# Watch for CSS changes
npm run watch:css

# Start PHP server (in another terminal)
php -S localhost:8000

# Open in browser
open http://localhost:8000

---

🎨 Color Palette

Gold #D4AF37

Gold Light #E5C158

Gold Dark #B8962E

Charcoal #1A1A1A

Charcoal Dark #121212

---

📦 Deployment

DirectAdmin / cPanel

1. Upload Files

   Upload entire directory to public_html/
   

2. Delete Default Index

   Remove index.html if present (PHP priority issue)
   

3. Verify Hidden Files

   Ensure .htaccess is uploaded
   

4. Set Permissions

   Files: 644 | Directories: 755
   

Checklist

• All .php files uploaded
• includes/ directory complete
• css/styles.css present
• js/ directory complete
• assets/ with images
• .htaccess configured
• robots.txt & sitemap.xml

---

⚙️ Configuration

Webhook Setup

Contact Form

Edit js/forms.js:

const WEBHOOK_URL = 'https://your-n8n-instance.com/webhook/contact';

Chatbot

Edit js/chatbot.js:

const CHATBOT_URL = 'https://your-n8n-instance.com/webhook/chat';

---

📊 Performance

Metric	Score
🟢 Performance	95+
🟢 Accessibility	100
🟢 Best Practices	100
🟢 SEO	100

Tested with Google Lighthouse

---

🌐 Browser Support

Browser	Support
	✅ 90+
	✅ 88+
	✅ 14+
	✅ 90+

---

📄 Pages

Page	Route	Description
🏠 Home	/	Hero, services, testimonials, FAQ
👥 About	/about.php	Company story, team, values
💼 Services	/services.php	Service tiers, comparison
📁 Portfolio	/portfolio.php	Case studies, projects
📧 Contact	/contact.php	Contact form, info
🔒 Privacy	/privacy-policy.php	Privacy policy
📜 Terms	/terms-of-service.php	Terms of service
♿ Accessibility	/accessibility.php	A11y statement

---

💼 Services

Static Websites Fast, responsive sites

AI Chat Agents 24/7 customer support

Automation Workflow optimization

Custom Branding Visual identity design

---

📞 Contact

---

Built with ❤️ by WB Solutions