iPower

The Intention.

iPower is Lebanon's leading electrical engineering solutions provider, specializing in solar power and electrical systems. They needed a digital presence that communicated trust, expertise, and reliability—essential qualities for a company that powers homes, businesses, and industries across Lebanon.

The Discipline.

We approached this as a strategic brand transformation. Our process involved deep research into Lebanon's electrical engineering landscape and iPower's diverse client base—from residential homes to industrial facilities. We created a design system that balanced technical credibility with approachability, ensuring the site could speak to both homeowners seeking solar solutions and industrial clients requiring complex electrical systems.

“Every decision was made with intention and purpose.”

The Craft.

The technical challenge was creating a performant, content-rich experience that showcased iPower's extensive project portfolio while maintaining clarity and ease of navigation. We built a flexible component system that could handle diverse content types—from project case studies to solution pages—while ensuring the site remained fast and accessible across Lebanon's varying internet conditions.

const [sliderPosition, setSliderPosition] = useState(25);
const [isDragging, setIsDragging] = useState(false);
const sliderRef = useRef<HTMLDivElement>(null);

const handleSliderMove = (e: MouseEvent | TouchEvent) => {
  if (!sliderRef.current || !isDragging) return;
  
  const rect = sliderRef.current.getBoundingClientRect();
  const clientX = 'touches' in e ? e.touches[0].clientX : e.clientX;
  const percentage = Math.max(0, Math.min(100, 
    ((clientX - rect.left) / rect.width) * 100
  ));
  setSliderPosition(percentage);
};

useEffect(() => {
  if (isDragging) {
    document.addEventListener('mousemove', handleSliderMove);
    document.addEventListener('touchmove', handleSliderMove);
    document.addEventListener('mouseup', () => setIsDragging(false));
    document.addEventListener('touchend', () => setIsDragging(false));
  }
  return () => {
    document.removeEventListener('mousemove', handleSliderMove);
    document.removeEventListener('touchmove', handleSliderMove);
  };
}, [isDragging]);