# Guide: Adding Gradients to Existing Wave Transitions
## Overview
Your preview.php file has 3 existing wave transitions that need gradient effects added. This guide shows you exactly how to update each one.
## How to Find the Waves
Search for "wave" or "svg" in preview.php to locate the transitions. They typically appear between major sections.
## Wave Transition Pattern
Each wave transition has this structure:
```html
Content
```
## Standard Wave Gradient Template
### Top Wave (Transitioning INTO colored section)
```html
```
### Bottom Wave (Transitioning OUT of colored section)
```html
```
## Key Points
1. **Unique IDs**: Each gradient needs a unique ID (wave-top-section1, wave-bottom-section1, etc.)
2. **Top Wave**: Gradient goes from background → section color, no rotation
3. **Bottom Wave**: Gradient goes from background → section color, WITH rotate(180deg)
4. **Section Color**: Replace "SECTION-COLOR-HERE" with the PHP variable for that section's color
5. **No Gaps**: Remove any transform: translateY() that might create gaps
6. **Margins**: Set margin: 0; padding: 0; on all SVGs
## Example: Updating a "Services" Section Wave
### BEFORE (Solid Color Wave)
```html
Our Services
```
### AFTER (Gradient Wave)
```html
Our Services
```
## Finding Your 3 Existing Waves
Look for these common section patterns in preview.php:
### Pattern 1: Look for existing SVG paths with solid fills
```bash
# Search command
grep -n "svg.*viewBox.*1200" preview.php
grep -n "path.*fill=" preview.php
```
### Pattern 2: Look for sections with colored backgrounds
Common sections that have waves:
- "Our Services" section
- "Why Choose Us" section
- "Our Process" section
- Brand/Partner section
- Testimonials/Reviews section
### Pattern 3: Find by line numbers
Based on typical HSLG templates, waves often appear around:
- Lines 800-1200 (Hero/Services transition)
- Lines 2000-2500 (Mid-page transition)
- Lines 3200-3600 (Before Reviews)
## Quick Checklist for Each Wave
For each wave transition you update:
**Top Wave:**
- [ ] Add `` with ``
- [ ] Set gradient from `$color_background` to section color
- [ ] Use unique ID (e.g., `services-top`, `process-top`)
- [ ] Change fill from solid color to `url(#gradient-id)`
- [ ] NO rotate transform
- [ ] Set margin/padding to 0
**Bottom Wave:**
- [ ] Add `` with ``
- [ ] Set gradient from `$color_background` to section color (SAME as top)
- [ ] Use unique ID (e.g., `services-bottom`, `process-bottom`)
- [ ] Change fill from solid color to `url(#gradient-id)`
- [ ] Add `transform: rotate(180deg)`
- [ ] Set margin/padding to 0
**Middle Section:**
- [ ] Keep background color as-is
- [ ] No changes needed to content
## Common Mistakes to Avoid
1. ❌ Using same gradient ID for multiple waves → IDs must be unique
2. ❌ Rotating top wave → Only bottom wave gets rotation
3. ❌ Gradient in wrong direction on bottom → Both use same gradient colors
4. ❌ Leaving translateY transforms → Causes white gaps
5. ❌ Forgetting to close `` tag → Breaks SVG rendering
## Testing Your Changes
After updating each wave:
1. **Visual Test**: Refresh page and check for:
- Smooth gradient from light to dark
- No white gaps between wave and sections
- Top wave fades down into color
- Bottom wave fades up from color to background
2. **Responsive Test**: Check on mobile (767px width)
- Waves should still render properly
- No horizontal scrolling
- Gradients still smooth
3. **Color Test**: View with different campaigns
- Gradients should use campaign colors
- Each niche's colors should work
## Color Variables Reference
Use these PHP variables for section colors:
```php
$color_background // Light background (usually #F8FAFC or white)
$color_primary // Main brand color
$color_secondary // Secondary brand color
$color_accent // Accent color
```
Example gradient combinations:
- Background → Primary (most common)
- Background → Secondary
- Primary → Secondary (for multi-color sections)
## Complete Example for Copy/Paste
Here's a complete wave transition you can use as a template:
```html
Section Title
```
## Need Help?
If you can't find a specific wave, send me:
1. Screenshot of the section
2. Line numbers around that area
3. The current SVG code
I'll provide the exact replacement code.