# Vertex Consulting - B2B Consulting Website Template

A professional, modern B2B consulting website template built with the RSL (Responsive Slot Layout) framework. Features a sophisticated purple gradient design perfect for consulting firms, professional services, and strategic advisory businesses.

## Features

### RSL Components Used
- ✅ **Navigation** - Sticky navbar with mega menu and mobile toggle
- ✅ **Scroll Progress** - Purple gradient progress indicator
- ✅ **Grid System** - Responsive slot-based layouts
- ✅ **Cards** - Service cards, case studies, pricing packages
- ✅ **Carousel** - Client success stories showcase
- ✅ **Tabs** - Organized content presentation
- ✅ **Accordion** - FAQ section
- ✅ **Modal** - Demo request form
- ✅ **Off-Canvas** - Mobile menu drawer
- ✅ **Toast Notifications** - Welcome messages and alerts
- ✅ **Inlay Alerts** - Certification badges
- ✅ **Buttons** - Multiple variants with gradient effects
- ✅ **Forms** - Contact and demo request forms
- ✅ **Theme Toggle** - Light/dark mode support

### Design Highlights
- 🎨 **Color Palette** - Purple gradient brand (#667eea → #764ba2)
- 📱 **Multi-Page** - Homepage, Solutions, Case Studies, Packages
- 🌓 **Dark Mode** - Full light/dark theme support with localStorage persistence
- 📊 **Professional** - B2B-focused content and messaging
- ♿ **Accessible** - WCAG AA compliant, semantic HTML, keyboard navigation
- 🎯 **Conversion Focused** - Strategic CTAs and trust indicators

## File Structure

```
techlaunch-landing/
├── index.html              # Main homepage
├── solutions.html          # Industry solutions page
├── case-studies.html       # Client success stories
├── packages.html           # Service packages & pricing
├── techlaunch-style.css    # Custom styles with purple gradient theme
├── techlaunch-script.js    # Interactive features & form handling
└── README.md              # This file
```

## How to Use

### Quick Start

1. **Copy the template folder** to your project
2. **Open `index.html`** in a web browser
3. **Customize** the content with your company information

### Customization Guide

#### 1. Company Branding

Replace Vertex Consulting branding in all HTML files:

- **Brand Name**: Search and replace "Vertex Consulting" (appears in navbar, footer, page titles)
- **Brand Icon**: Change `fa-briefcase` to your preferred icon
- **Tagline**: Update "Strategic Business Consulting & Advisory Services"

#### 2. Color Scheme

Edit CSS custom properties in `techlaunch-style.css` (lines 1-20):

```css
:root {
    --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    /* Update to your brand gradient */
}
```

Also update in each page's `<style>` section:
- Scroll progress gradient
- Page headers
- Button gradients

#### 3. Content Updates

**Homepage (index.html)**
- Hero section: Lines 106-120
- Services: Lines 170-251
- Case studies carousel: Lines 260-400
- FAQ accordion: Lines 585-650
- Footer: Lines 675-765

**Solutions (solutions.html)**
- Update 6 industry solution cards
- Customize icons, descriptions, features

**Case Studies (case-studies.html)**
- Replace 4 case study examples
- Update metrics, results, client info

**Packages (packages.html)**
- Modify 3 pricing tiers
- Update pricing, features, CTAs
- Customize sidebar content

#### 4. Images

Replace placeholder images throughout:

- Hero background/image
- Service icons (currently using Font Awesome)
- Case study images
- Carousel images
- Favicon (lines 22-24 in each HTML file)

#### 5. Navigation Structure

Update navigation links in all files:

```html
<ul class="rsl-navbar-menu">
    <li><a href="index.html#services">Services</a></li>
    <li><a href="solutions.html">Solutions</a></li>
    <li><a href="case-studies.html">Case Studies</a></li>
    <li><a href="packages.html">Packages</a></li>
    <!-- Add your pages -->
</ul>
```

#### 6. Form Integration

Update form handlers in `techlaunch-script.js`:

**Demo Request Form** (lines 10-110):
```javascript
// Replace with your backend endpoint
fetch('/api/demo-request', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(data)
})
.then(response => response.json())
.then(result => {
    showToast({
        type: 'success',
        title: 'Request Received',
        message: 'We\'ll be in touch soon!'
    });
})
.catch(error => {
    showToast({
        type: 'error',
        title: 'Error',
        message: 'Please try again later.'
    });
});
```

**Newsletter Form** (footer on all pages):
- Currently uses `alert()` placeholder
- Connect to your email marketing service (Mailchimp, ConvertKit, etc.)

## Page Structure

### Homepage (index.html)
- Hero with gradient background and CTA
- Services grid (6 core services)
- Case studies carousel
- Sidebar with trust indicators
- FAQ accordion
- Newsletter signup
- Full footer

### Solutions (solutions.html)
- Page header with gradient
- 6 industry-specific solution cards
- Full footer with navigation

### Case Studies (case-studies.html)
- Page header with gradient
- 4 detailed case study cards with:
  - Company metadata
  - Challenge description
  - Approach overview
  - Results metrics
- Full footer

### Packages (packages.html)
- Page header with gradient
- Sidebar with custom solutions info
- 3 pricing tiers:
  - Strategic Assessment ($50K)
  - Transformation Program ($500K, featured)
  - Strategic Partnership (Custom)
- Full footer

## Theme Toggle Functionality

The template includes dual theme toggle buttons:

1. **Navbar Button** - Top right (moon/sun icon)
2. **Floating Button** - Bottom right corner

Both sync via localStorage (`rsl-theme` key) and update together.

### Icon Logic
- Light mode: Shows sun ☀️
- Dark mode: Shows moon 🌙

## Scroll Progress Bar

Purple gradient bar appears at top of all pages:
- Fills left to right as user scrolls
- Matches brand gradient
- 4px height, smooth animation

## Accessibility Features

- ✅ Semantic HTML5 structure
- ✅ Proper heading hierarchy
- ✅ ARIA labels on all interactive elements
- ✅ Keyboard navigation (Tab, Enter, Escape)
- ✅ Focus indicators
- ✅ Alt text on images
- ✅ Form labels and validation
- ✅ Color contrast WCAG AA compliant
- ✅ Reduced motion support
- ✅ Screen reader friendly

## Browser Support

- ✅ Chrome (latest)
- ✅ Firefox (latest)
- ✅ Safari (latest)
- ✅ Edge (latest)
- ⚠️ IE11 (partial support)

## 🎯 Icons

This template uses **Font Awesome 6** icons for easy local preview. Icons work immediately when you open the HTML file directly in your browser.

### Why Font Awesome?

RSL includes its own zero-dependency icon system (300+ SVG icons), but SVG sprite icons require a web server to work due to browser security restrictions. Font Awesome works without a server, making it easier for you to preview and customize templates locally.

### Migrating to RSL Icons (Optional)

For true zero-dependency deployment, you can convert to RSL Icons:

**1. Include RSL Icons CSS:**
```html
<link rel="stylesheet" href="styles/rsl-icons.css">
```

**2. Replace Font Awesome icons:**
```html
<!-- Before (Font Awesome) -->
<i class="fas fa-check"></i>

<!-- After (RSL Icons) -->
<svg class="rsl-icon" aria-hidden="true">
    <use href="images/rsl-icons.svg#rsl-icon-check"></use>
</svg>
```

**3. Common icon mappings:**
| Font Awesome | RSL Icon |
|--------------|----------|
| `fa-check` | `rsl-icon-check` |
| `fa-times` | `rsl-icon-times` |
| `fa-chevron-down` | `rsl-icon-chevron-down` |
| `fa-briefcase` | `rsl-icon-briefcase` |
| `fa-chart-line` | `rsl-icon-chart-line` |
| `fa-users` | `rsl-icon-users` |
| `fa-cog` | `rsl-icon-cog` |
| `fa-envelope` | `rsl-icon-envelope` |
| `fa-phone` | `rsl-icon-phone` |
| `fa-arrow-right` | `rsl-icon-arrow-right` |

**4. Run a local server** (required for RSL Icons):
```bash
python3 -m http.server 8000
# Then visit http://localhost:8000
```

**Note:** RSL Icons work perfectly on any web hosting - the server requirement is only for local development.

See the [RSL Icons Documentation](../../docs/components/icons/index.html) for the full icon list and API reference.

## Performance Optimization

### Current Optimizations
- CSS/JS loaded in optimal order
- Font Awesome from CDN
- Minimal external dependencies
- localStorage for theme persistence
- Efficient DOM manipulation

### Recommended Improvements
1. **Image Optimization**
   - Convert to WebP format
   - Implement lazy loading
   - Use responsive images with srcset

2. **Asset Minification**
   - Minify techlaunch-style.css
   - Minify techlaunch-script.js
   - Remove unused CSS

3. **Caching Strategy**
   - Set cache headers for static assets
   - Implement service worker

4. **CDN Deployment**
   - Host on CDN for global distribution
   - Use CDN for images and assets

## SEO Optimization

Update meta tags in all HTML files:

```html
<meta name="description" content="Your custom description">
<meta name="keywords" content="consulting, B2B, strategy">
<meta property="og:title" content="Your Company Name">
<meta property="og:description" content="Your description">
<meta property="og:image" content="your-social-image.jpg">
<meta name="twitter:card" content="summary_large_image">
```

## Deployment

### GitHub Pages
1. Push to GitHub repository
2. Settings → Pages → Select branch
3. Live at `https://username.github.io/repo-name`

### Netlify
1. Connect GitHub repo
2. Build command: (none for static)
3. Publish directory: `/`
4. Deploy!

### Vercel
1. Import project
2. Auto-detected settings
3. Deploy!

## Customization Ideas

- ✨ Add **Team Page** with leadership bios
- 📝 Add **Blog Section** for thought leadership
- 📊 Add **ROI Calculator** interactive tool
- 🎥 Add **Video Testimonials**
- 📅 Integrate **Calendar Booking** (Calendly, Cal.com)
- 💬 Add **Live Chat** widget (Intercom, Drift)
- 📈 Add **Analytics** (Google Analytics, Plausible)
- 🔒 Add **Client Portal** login
- 📚 Add **Resources Library** (whitepapers, case studies)
- 🌍 Add **Multi-language Support**

## Code Optimization Tasks

### CSS Optimization
- [ ] Consolidate duplicate styles
- [ ] Remove unused CSS rules
- [ ] Optimize CSS custom properties
- [ ] Minify for production

### JavaScript Optimization
- [ ] Combine inline scripts into techlaunch-script.js
- [ ] Remove console.log statements
- [ ] Add error handling
- [ ] Minify for production

### HTML Optimization
- [ ] Add structured data (JSON-LD)
- [ ] Optimize meta tags
- [ ] Add preload hints for critical assets
- [ ] Implement lazy loading for images

### Performance
- [ ] Reduce FontAwesome bundle (use subset)
- [ ] Implement critical CSS
- [ ] Add service worker for offline support
- [ ] Optimize third-party scripts

## Support & Documentation

RSL Framework Resources:
- [RSL Overview](../../docs/overview.html)
- [Components](../../docs/components/index.html)
- [Layouts](../../docs/layout/index.html)
- [Utility Classes](../../docs/reference/utility-classes.html)

## Credits

- **Framework**: RSL (Responsive Slot Layout)
- **Icons**: Font Awesome
- **Design**: Modern B2B consulting aesthetic
- **Color Scheme**: Purple gradient (#667eea → #764ba2)
- **Built with**: Semantic HTML5, CSS3, Vanilla JavaScript

## License

This template is part of the RSL framework. Free to use for personal or commercial projects.

---

**Built with RSL Framework**

Questions? Refer to RSL documentation or create an issue in the repository.
