# Website Enhancement Testing Guide

## Quick Start Testing

Follow these steps to verify all enhancements are working correctly.

---

## Prerequisites

1. Ensure XAMPP is running
2. Apache service is started
3. Browser is open (Chrome, Firefox, or Safari recommended)
4. Navigate to: `http://localhost/kofi-farms/`

---

## Test Checklist

### 1. Homepage (index.php) ✓

#### Hero Slider
- [ ] Page loads with first hero slide visible
- [ ] After 5 seconds, slides automatically transition to slide 2
- [ ] After another 5 seconds, transitions to slide 3
- [ ] Fade transition is smooth (no jarring movements)
- [ ] Text slides in from left with smooth animation
- [ ] All three slides show different background images
- [ ] Text is clearly readable over images
- [ ] Buttons are clickable and styled correctly

#### Services Section
- [ ] All 6 service cards display properly
- [ ] Icons appear correctly (not emojis)
- [ ] Icons are green and properly sized
- [ ] Hover effect works (cards lift slightly)
- [ ] "Learn more" links are styled correctly

#### Video Tour Section
- [ ] Section heading displays correctly
- [ ] Three video cards are visible
- [ ] Video iframes load (even if placeholder)
- [ ] 16:9 aspect ratio is maintained
- [ ] Hover effect on cards works
- [ ] Cards are responsive

#### Blog Preview Section
- [ ] Three blog cards display
- [ ] Icons appear in card headers (not emojis)
- [ ] Icons are different colours based on category
- [ ] Card hover effects work
- [ ] Text is readable and properly aligned

---

### 2. About Page (about.php) ✓

#### Page Hero
- [ ] Background image loads
- [ ] Dark green overlay is visible
- [ ] Breadcrumb is visible and styled
- [ ] "Home" link in breadcrumb works
- [ ] Text is clearly readable
- [ ] Parallax effect works when scrolling

#### Team Section
- [ ] Three team member cards display
- [ ] User icons appear (not emojis)
- [ ] Icons are centred in circular avatars
- [ ] Names and roles are visible

#### Values Section
- [ ] Four value cards display
- [ ] Icons are visible and properly sized
- [ ] Grid layout is even
- [ ] Text is centred and readable

---

### 3. Services Page (services.php) ✓

#### Page Hero
- [ ] Background image with overlay loads
- [ ] Breadcrumb works correctly
- [ ] Text is readable
- [ ] Parallax scrolling works

#### Service Blocks
- [ ] All 5 service sections display
- [ ] Visual blocks on right/left alternate
- [ ] Badges show correct information
- [ ] No emojis visible (they've been removed)
- [ ] Buttons work and are styled correctly

#### Pricing Section
- [ ] Three pricing cards display
- [ ] Icons appear correctly
- [ ] Middle card has highlighted border
- [ ] Text is readable

---

### 4. Training Page (training.php) ✓

#### Page Hero
- [ ] Background image loads properly
- [ ] Breadcrumb is styled correctly
- [ ] Text overlay is readable

#### Feature Cards
- [ ] Three feature cards in grid
- [ ] Icons appear correctly (zap, search, phone-call)
- [ ] Cards are properly aligned
- [ ] Text is readable

#### Training Tracks
- [ ] Three numbered tracks display
- [ ] Numbers are in coloured circles
- [ ] Tag lists are readable
- [ ] Layout is clean and organised

---

### 5. Contact Page (contact.php) ✓

#### Page Hero
- [ ] Background with overlay loads
- [ ] Breadcrumb functions correctly
- [ ] Text is clearly visible

#### Contact Info
- [ ] Four contact detail items display
- [ ] Icons show correctly (map-pin, mail, phone, clock)
- [ ] Icons are in green circles
- [ ] Text is aligned properly

#### Social Media Links
- [ ] Three social buttons display
- [ ] Icons appear with text
- [ ] Buttons have hover effects
- [ ] Links open in new tabs

#### Contact Form
- [ ] Form displays correctly
- [ ] All fields are styled properly
- [ ] Submit button is styled
- [ ] Form is functional

---

### 6. Blog Page (blog.php) ✓

#### Page Hero
- [ ] Background image loads
- [ ] Breadcrumb works
- [ ] Text is visible

#### Featured Post
- [ ] Large post card displays
- [ ] Icon shows (not emoji)
- [ ] Layout is attractive
- [ ] Text is readable

#### Blog Grid
- [ ] Blog cards in 3-column grid
- [ ] Each card has correct icon
- [ ] Icons are colour-coded correctly
- [ ] Dates display properly
- [ ] "Read more" links work

#### Social Platform Cards
- [ ] Three platform cards at bottom
- [ ] Icons display (facebook, youtube, instagram)
- [ ] Cards are clickable
- [ ] Links open in new tabs

---

## Mobile Responsive Testing

### Breakpoints to Test

#### Tablet (960px)
- [ ] Hero slider adjusts to single column
- [ ] Service grids become 2 columns
- [ ] Navigation remains functional
- [ ] All text remains readable

#### Mobile (640px)
- [ ] Navigation becomes hamburger menu
- [ ] All content stacks vertically
- [ ] Hero slider text resizes appropriately
- [ ] Cards are full-width
- [ ] Video section is single column
- [ ] Touch targets are large enough

---

## Performance Testing

### Page Load
- [ ] Homepage loads in under 3 seconds
- [ ] Images load progressively
- [ ] No console errors in browser DevTools
- [ ] Feather Icons script loads successfully

### Interactions
- [ ] Hero slider transitions smoothly
- [ ] No lag when hovering over cards
- [ ] Smooth scrolling for anchor links
- [ ] Forms submit without errors

---

## Browser Compatibility

Test in these browsers:

- [ ] Google Chrome (latest)
- [ ] Mozilla Firefox (latest)
- [ ] Microsoft Edge (latest)
- [ ] Safari (if on Mac)
- [ ] Mobile Safari (iOS)
- [ ] Chrome Mobile (Android)

---

## Common Issues & Solutions

### Icons Not Showing
**Problem**: Emoji characters visible instead of icons
**Solution**: 
1. Check browser console for Feather Icons script errors
2. Verify internet connection (CDN resources need to load)
3. Clear browser cache and reload

### Hero Slider Not Animating
**Problem**: Only first slide shows, no transitions
**Solution**:
1. Check browser console for JavaScript errors
2. Verify footer.php has Feather Icons script
3. Ensure JavaScript is enabled in browser

### Background Images Not Loading
**Problem**: Solid colour instead of images
**Solution**:
1. Check internet connection (images from Unsplash CDN)
2. Verify CSS file is loading correctly
3. Check browser DevTools Network tab for failed requests

### Videos Not Loading
**Problem**: Grey boxes or error messages in video section
**Solution**:
1. Videos are placeholders - replace with actual Kofi Farms videos
2. See `docs/youtube-video-setup.md` for instructions
3. Verify YouTube URLs are correct

### Text Not Readable on Hero
**Problem**: Can't read white text over background
**Solution**:
1. Check that overlay gradient is applying
2. Verify CSS for `.hero-slide::before` is present
3. Background images may need adjustment

---

## DevTools Console Check

Open browser DevTools (F12) and check:

### Should See:
- No red error messages
- Feather Icons initialised
- All resources loaded (green status codes)

### Should NOT See:
- 404 errors for missing files
- CORS errors
- JavaScript errors
- Missing CSS warnings

---

## Accessibility Testing

### Keyboard Navigation
- [ ] Tab key navigates through all interactive elements
- [ ] Enter key activates buttons and links
- [ ] Focus indicators are visible
- [ ] No keyboard traps

### Screen Reader Testing
- [ ] Images have alt text (if actual farm photos added)
- [ ] Icons are supplemented with text labels
- [ ] Form labels are associated with inputs
- [ ] Heading hierarchy is logical

---

## Final Sign-Off Checklist

Before considering testing complete:

- [ ] All pages load without errors
- [ ] All icons display correctly (no emojis)
- [ ] Hero slider works automatically
- [ ] Video section displays (even with placeholders)
- [ ] Breadcrumbs have background images
- [ ] Colour scheme matches logo
- [ ] Mobile responsive design works
- [ ] All links function correctly
- [ ] Forms submit successfully
- [ ] No console errors in DevTools

---

## Reporting Issues

If you find any issues:

1. **Note the page** where issue occurs
2. **Note the browser** and version
3. **Check browser console** for errors
4. **Take a screenshot** if visual issue
5. **Document steps** to reproduce
6. **Check this guide** for solutions first

---

## Next Steps After Testing

Once all tests pass:

1. Update video section with real YouTube videos
2. Consider replacing Unsplash images with actual farm photos
3. Test with real users
4. Monitor site performance
5. Gather feedback

---

## Contact

For technical questions about these enhancements, refer to:
- `docs/enhancement-summary.md` - Complete change documentation
- `docs/colour-palette.md` - Colour reference
- `docs/youtube-video-setup.md` - Video setup instructions

---

**Testing Completed By**: _________________

**Date**: _________________

**Result**: Pass / Fail / Needs Revision

**Notes**:
_____________________________________________
_____________________________________________
_____________________________________________
