# Quick Find & Replace for Wave Gradients

## How to Use This File

1. Open preview.php in your code editor
2. Use Find (Ctrl+F or Cmd+F) to search for the "FIND THIS" patterns below
3. Replace with the corresponding "REPLACE WITH" code
4. Make sure to update gradient IDs to be unique for each wave

---

## Pattern 1: Simple Solid Color Wave

### FIND THIS:
```html
<svg
```

Then look for patterns like:
```html
<path fill="#1E40AF" d="M0,60
```
or
```html
<path fill="<?php echo $color_primary; ?>" d="M0,60
```

### REPLACE WITH:

**For TOP waves (going INTO colored section):**
```html
<svg class="wave-svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none" 
     style="display: block; width: 100%; height: 80px; margin: 0; padding: 0;">
    <defs>
        <linearGradient id="UNIQUE-NAME-top" x1="0%" y1="0%" x2="0%" y2="100%">
            <stop offset="0%" style="stop-color:<?php echo $color_background; ?>;stop-opacity:1" />
            <stop offset="100%" style="stop-color:<?php echo $color_primary; ?>;stop-opacity:1" />
        </linearGradient>
    </defs>
    <path d="M0,60 C300,100 600,20 900,60 C1050,80 1200,40 1200,40 L1200,120 L0,120 Z" 
          fill="url(#UNIQUE-NAME-top)">
    </path>
</svg>
```

**For BOTTOM waves (coming OUT of colored section):**
```html
<svg class="wave-svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none" 
     style="display: block; width: 100%; height: 80px; margin: 0; padding: 0; transform: rotate(180deg);">
    <defs>
        <linearGradient id="UNIQUE-NAME-bottom" x1="0%" y1="0%" x2="0%" y2="100%">
            <stop offset="0%" style="stop-color:<?php echo $color_background; ?>;stop-opacity:1" />
            <stop offset="100%" style="stop-color:<?php echo $color_primary; ?>;stop-opacity:1" />
        </linearGradient>
    </defs>
    <path d="M0,60 C300,100 600,20 900,60 C1050,80 1200,40 1200,40 L1200,120 L0,120 Z" 
          fill="url(#UNIQUE-NAME-bottom)">
    </path>
</svg>
```

---

## Pattern 2: Wave with translateY (causing white gaps)

### FIND THIS:
```html
style="transform: translateY(-1px);"
```
or
```html
style="transform: translateY(1px);"
```

### REPLACE WITH:
```html
[REMOVE - these cause gaps]
```

Change the style to:
```html
style="display: block; width: 100%; height: 80px; margin: 0; padding: 0;"
```

---

## Pattern 3: Identifying Which Wave is Top vs Bottom

### Top Wave Indicators:
- Appears BEFORE the colored section content
- Usually has NO transform: rotate
- May have viewBox facing normal direction

### Bottom Wave Indicators:  
- Appears AFTER the colored section content
- Usually has transform: rotate(180deg)
- Flipped upside down

### To Identify Visually:
Look at the section structure:
```html
<!-- TOP WAVE -->
<svg>...</svg>

<!-- COLORED SECTION CONTENT -->
<div style="background: color">
    Content here
</div>

<!-- BOTTOM WAVE -->  
<svg transform="rotate(180deg)">...</svg>
```

---

## Specific Line Number Hints

Based on typical HSLG structure, look at these approximate line ranges:

### Wave Set #1: After Hero/Before Services (~line 800-1200)
- Top wave: ~line 950
- Middle section: ~line 960-1100  
- Bottom wave: ~line 1110

### Wave Set #2: Services or Why Choose Us (~line 1800-2300)
- Top wave: ~line 1950
- Middle section: ~line 1960-2200
- Bottom wave: ~line 2210

### Wave Set #3: Process or Brands Section (~line 2800-3400)
- Top wave: ~line 3050
- Middle section: ~line 3060-3300
- Bottom wave: ~line 3310

**Note:** Your line numbers may vary. Use these as starting points.

---

## Search Strategy

### Step 1: Count Total SVG Elements
```bash
grep -c "<svg" preview.php
```
This tells you how many SVGs exist (waves, icons, etc.)

### Step 2: Find Wave SVGs Specifically
```bash
grep -n "viewBox.*1200.*120" preview.php
```
Waves typically use viewBox="0 0 1200 120"

### Step 3: Check Each SVG Context
For each line number found, look at surrounding 10 lines:
```bash
# Replace 1234 with actual line number
sed -n '1224,1244p' preview.php
```

### Step 4: Identify Section Purpose
Look for section headings near the wave:
```bash
grep -B5 -A5 "viewBox.*1200" preview.php | grep -i "services\|process\|why\|about"
```

---

## Color Combinations for Different Sections

### Services Section
```php
// Top wave
stop offset="0%": $color_background
stop offset="100%": $color_primary

// Bottom wave (same colors)
stop offset="0%": $color_background  
stop offset="100%": $color_primary
```

### Process Section  
```php
// Top wave
stop offset="0%": $color_background
stop offset="100%": $color_secondary

// Bottom wave (same colors)
stop offset="0%": $color_background
stop offset="100%": $color_secondary
```

### Multi-Color Section (if middle section has gradient)
```php
// Top wave
stop offset="0%": $color_background
stop offset="100%": $color_secondary

// Middle section
background: linear-gradient(180deg, $color_secondary 0%, $color_primary 100%)

// Bottom wave  
stop offset="0%": $color_background
stop offset="100%": $color_primary
```

---

## Unique ID Naming Convention

Use descriptive, unique IDs for each gradient:

### Format: `sectionname-wave-position`

Examples:
- `services-wave-top`
- `services-wave-bottom`
- `process-wave-top`
- `process-wave-bottom`
- `testimonials-wave-top`
- `testimonials-wave-bottom`
- `brands-wave-top`
- `brands-wave-bottom`
- `faq-wave-top`
- `faq-wave-bottom`

**Never use the same ID twice!**

---

## Quick Visual Check After Changes

After replacing each wave, save and refresh page. Check for:

✅ **Good:**
- Smooth gradient from light (top) to dark (bottom) on top wave
- Smooth gradient from dark (top) to light (bottom) on bottom wave
- No white lines/gaps between wave and section
- Wave flows naturally into colored section

❌ **Bad:**
- Both waves fade in same direction (forgot to rotate bottom)
- White gap between wave and section (remove translateY)
- Harsh color jump (gradient not smooth)
- Same colors on both ends (forgot to change gradient colors)

---

## Emergency Rollback

If something breaks:

1. Keep a backup of original preview.php:
```bash
cp preview.php preview.php.backup
```

2. If you need to restore:
```bash
cp preview.php.backup preview.php
```

3. Or use Git (if you have version control):
```bash
git checkout preview.php
```

---

## Example: Complete Wave Transition Update

### BEFORE (what you currently have):
```html
<svg viewBox="0 0 1200 120" style="transform: translateY(-1px)">
    <path fill="#1E40AF" d="M0,60 C300,100 600,20 900,60 C1050,80 1200,40 1200,40 L1200,120 L0,120 Z"></path>
</svg>

<div style="background: #1E40AF; padding: 40px;">
    <h2 style="color: white;">Our Services</h2>
</div>

<svg viewBox="0 0 1200 120" style="transform: rotate(180deg) translateY(1px)">
    <path fill="#1E40AF" d="M0,60 C300,100 600,20 900,60 C1050,80 1200,40 1200,40 L1200,120 L0,120 Z"></path>
</svg>
```

### AFTER (with gradients, no gaps):
```html
<!-- Top Wave -->
<svg class="wave-svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none" 
     style="display: block; width: 100%; height: 80px; margin: 0; padding: 0;">
    <defs>
        <linearGradient id="services-wave-top" x1="0%" y1="0%" x2="0%" y2="100%">
            <stop offset="0%" style="stop-color:<?php echo $color_background; ?>;stop-opacity:1" />
            <stop offset="100%" style="stop-color:<?php echo $color_primary; ?>;stop-opacity:1" />
        </linearGradient>
    </defs>
    <path d="M0,60 C300,100 600,20 900,60 C1050,80 1200,40 1200,40 L1200,120 L0,120 Z" 
          fill="url(#services-wave-top)">
    </path>
</svg>

<!-- Middle Section -->
<div style="background: <?php echo $color_primary; ?>; padding: 40px; margin: 0;">
    <h2 style="color: white;">Our Services</h2>
</div>

<!-- Bottom Wave -->
<svg class="wave-svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none" 
     style="display: block; width: 100%; height: 80px; margin: 0; padding: 0; transform: rotate(180deg);">
    <defs>
        <linearGradient id="services-wave-bottom" x1="0%" y1="0%" x2="0%" y2="100%">
            <stop offset="0%" style="stop-color:<?php echo $color_background; ?>;stop-opacity:1" />
            <stop offset="100%" style="stop-color:<?php echo $color_primary; ?>;stop-opacity:1" />
        </linearGradient>
    </defs>
    <path d="M0,60 C300,100 600,20 900,60 C1050,80 1200,40 1200,40 L1200,120 L0,120 Z" 
          fill="url(#services-wave-bottom)">
    </path>
</svg>
```

---

## Final Checklist

For EACH wave transition you update:

- [ ] Top wave has gradient from background → section color
- [ ] Top wave has NO rotation
- [ ] Top wave has unique gradient ID
- [ ] Top wave has margin: 0; padding: 0;
- [ ] Bottom wave has gradient from background → section color (SAME as top)
- [ ] Bottom wave has transform: rotate(180deg)
- [ ] Bottom wave has unique gradient ID (different from top)
- [ ] Bottom wave has margin: 0; padding: 0;
- [ ] All translateY removed from both waves
- [ ] Middle section color matches gradient end color
- [ ] Visual check shows no white gaps
- [ ] Visual check shows smooth gradients