> ## Documentation Index
> Fetch the complete documentation index at: https://docs.promowise.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Welcome to Promowise

> Lead generation and marketing automation platform

export const HeroBackground = () => {
  const getGlobalState = () => {
    if (typeof window === 'undefined') return null;
    if (!window.heroBackgroundState) {
      window.heroBackgroundState = {
        particles: [],
        activePulses: [],
        mousePosition: {
          x: 0,
          y: 0
        },
        systemStartTime: 0,
        isInitialized: false,
        canvasWidth: 0,
        canvasHeight: 0
      };
    }
    return window.heroBackgroundState;
  };
  const globalState = getGlobalState();
  const PARTICLE_CONFIG = {
    CIRCLE_RADIUS: 3,
    MAX_OPACITY: 0.05,
    ORANGE_COLOR: '#ff6b35',
    GRID_SPACING: 40,
    PATH_FORCE_RADIUS: 200,
    BASE_PUSH_FORCE: 0.3,
    MOVEMENT_FORCE_MULTIPLIER: 4.0,
    MAX_MOUSE_VELOCITY: 5000,
    DAMPING: 0.975,
    SPRING_STRENGTH: 0.05,
    TARGET_FPS: 60,
    MAX_FRAME_TIME: 0.1,
    PULSE_SPEED: 150,
    PULSE_PEAK_OPACITY: 0.15,
    PULSE_LOOP_INTERVAL: 8000,
    PULSE_DURATION: 1500,
    INTRO_PULSE_SPEED: 1200,
    CLICK_PULSE_SPEED: 1600,
    CLICK_PULSE_PEAK_OPACITY: 0.2,
    CLICK_PULSE_DURATION: 800,
    DEBUG_MOUSE_TRACKING: false,
    DEBUG_DOT_RADIUS: 2,
    DEBUG_MAX_DOTS: 100
  };
  class Particle {
    constructor(x, y) {
      this.x = x;
      this.y = y;
      this.baseOpacity = 0;
      this.hasBeenRevealed = false;
      this.distanceFromCenter = 0;
      this.pulseOpacity = 0;
    }
    draw(ctx, config) {
      let totalOpacity = this.baseOpacity + this.pulseOpacity;
      const mouseDistance = Math.sqrt((this.x - this.mouseX) ** 2 + (this.y - this.mouseY) ** 2);
      if (mouseDistance < config.PATH_FORCE_RADIUS) {
        const proximityFactor = 1 - mouseDistance / config.PATH_FORCE_RADIUS;
        totalOpacity += proximityFactor * 0.07;
      }
      if (totalOpacity <= 0) return;
      const isDarkMode = typeof document !== 'undefined' && (document.documentElement.classList.contains('dark') || document.body.classList.contains('dark'));
      ctx.save();
      ctx.globalAlpha = Math.min(1, totalOpacity);
      ctx.fillStyle = isDarkMode ? 'white' : '#374151';
      ctx.beginPath();
      ctx.arc(this.x, this.y, config.CIRCLE_RADIUS, 0, Math.PI * 2);
      ctx.fill();
      ctx.restore();
    }
    update(activePulses, mouseX, mouseY, config) {
      this.mouseX = mouseX;
      this.mouseY = mouseY;
      this.updatePulse(activePulses, config);
    }
    updatePulse(activePulses, config) {
      const currentTime = performance.now();
      this.pulseOpacity = 0;
      activePulses.forEach(pulse => {
        const timeSincePulseStart = currentTime - pulse.startTime;
        let pulseSpeed, pulseDuration, peakOpacity;
        if (pulse.isIntro) {
          pulseSpeed = config.INTRO_PULSE_SPEED;
          pulseDuration = config.PULSE_DURATION;
          peakOpacity = config.PULSE_PEAK_OPACITY;
        } else if (pulse.isClick) {
          pulseSpeed = config.CLICK_PULSE_SPEED;
          pulseDuration = config.CLICK_PULSE_DURATION;
          peakOpacity = config.CLICK_PULSE_PEAK_OPACITY;
        } else {
          pulseSpeed = config.PULSE_SPEED;
          pulseDuration = config.PULSE_DURATION;
          peakOpacity = config.PULSE_PEAK_OPACITY;
        }
        const waveRadius = timeSincePulseStart / 1000 * pulseSpeed;
        const particleDistance = Math.sqrt((this.x - pulse.centerX) ** 2 + (this.y - pulse.centerY) ** 2);
        if (waveRadius >= particleDistance) {
          if (pulse.isIntro && !this.hasBeenRevealed) {
            this.baseOpacity = config.MAX_OPACITY;
            this.hasBeenRevealed = true;
          }
          const timeAtParticle = timeSincePulseStart - particleDistance / pulseSpeed * 1000;
          if (timeAtParticle >= 0 && timeAtParticle < pulseDuration) {
            const pulsePhase = timeAtParticle / pulseDuration;
            let pulseContribution = 0;
            if (pulse.isIntro) {
              if (pulsePhase < 0.3) {
                const riseProgress = pulsePhase / 0.3;
                pulseContribution = riseProgress * peakOpacity;
              } else {
                const fallProgress = (pulsePhase - 0.3) / 0.7;
                pulseContribution = peakOpacity * (1 - fallProgress);
              }
            } else {
              if (pulsePhase < 0.3) {
                pulseContribution = pulsePhase / 0.3 * peakOpacity;
              } else if (pulsePhase < 1) {
                const fallProgress = (pulsePhase - 0.3) / 0.7;
                pulseContribution = peakOpacity * (1 - fallProgress);
              }
            }
            this.pulseOpacity += pulseContribution;
          }
        }
      });
      this.pulseOpacity = Math.min(this.pulseOpacity, config.PULSE_PEAK_OPACITY * 2);
    }
  }
  const canvasRef = useRef(null);
  const wrapperRef = useRef(null);
  const [particles, setParticles] = useState(globalState?.particles || []);
  const [activePulses, setActivePulses] = useState(globalState?.activePulses || []);
  const [mousePosition, setMousePosition] = useState(globalState?.mousePosition || ({
    x: 0,
    y: 0
  }));
  const [systemStartTime, setSystemStartTime] = useState(globalState?.systemStartTime || 0);
  const [isVisible, setIsVisible] = useState(typeof window !== 'undefined' ? window.innerWidth >= 750 : true);
  const animationFrameRef = useRef(null);
  const lastFrameTimeRef = useRef(0);
  useEffect(() => {
    const state = getGlobalState();
    if (state?.isInitialized) {
      setParticles(state.particles);
      setActivePulses(state.activePulses);
      setMousePosition(state.mousePosition);
      setSystemStartTime(state.systemStartTime);
    }
  }, []);
  useEffect(() => {
    const canvas = canvasRef.current;
    const wrapper = wrapperRef.current;
    if (!canvas || !wrapper) return;
    const landingRoot = document.querySelector('.landing-root');
    const landingHero = document.querySelector('.landing-hero');
    let leftPadding = 56;
    let rightPadding = 56;
    let containerHeight = window.innerHeight;
    if (landingRoot) {
      const rootStyles = window.getComputedStyle(landingRoot);
      leftPadding = parseInt(rootStyles.paddingLeft) || 56;
      rightPadding = parseInt(rootStyles.paddingRight) || 56;
    }
    if (landingHero) {
      containerHeight = landingHero.offsetHeight;
    }
    canvas.width = window.innerWidth - leftPadding - rightPadding;
    canvas.height = containerHeight;
    const state = getGlobalState();
    const dimensionsChanged = state ? state.canvasWidth !== canvas.width || state.canvasHeight !== canvas.height : true;
    if (!state?.isInitialized || dimensionsChanged) {
      const newParticles = createGridParticles(canvas, leftPadding, rightPadding);
      setParticles(newParticles);
      if (state) state.particles = newParticles;
      const startTime = performance.now();
      setSystemStartTime(startTime);
      if (state) state.systemStartTime = startTime;
      const initialPulses = [{
        startTime: startTime,
        centerX: canvas.width / 2,
        centerY: canvas.height / 2,
        isIntro: true
      }];
      setActivePulses(initialPulses);
      if (state) state.activePulses = initialPulses;
      const initialMousePos = {
        x: canvas.width / 2,
        y: canvas.height / 2
      };
      setMousePosition(initialMousePos);
      if (state) state.mousePosition = initialMousePos;
      if (state) {
        state.isInitialized = true;
        state.canvasWidth = canvas.width;
        state.canvasHeight = canvas.height;
      }
    }
    lastFrameTimeRef.current = performance.now();
    return () => {
      if (animationFrameRef.current) {
        cancelAnimationFrame(animationFrameRef.current);
      }
    };
  }, []);
  const createGridParticles = (canvas, leftPadding, rightPadding) => {
    if (!canvas) return [];
    const newParticles = [];
    const baseSpacing = PARTICLE_CONFIG.GRID_SPACING;
    const edgeMargin = 40;
    const exclusionZones = getExclusionZones(wrapperRef.current);
    const availableWidth = canvas.width - 2 * edgeMargin;
    const availableHeight = canvas.height - 2 * edgeMargin;
    const maxCols = Math.floor(availableWidth / baseSpacing);
    const maxRows = Math.floor(availableHeight / baseSpacing);
    const actualSpacingX = maxCols > 0 ? availableWidth / maxCols : baseSpacing;
    const actualSpacingY = maxRows > 0 ? availableHeight / maxRows : baseSpacing;
    const centerX = canvas.width / 2;
    const centerY = canvas.height / 2;
    for (let row = 0; row <= maxRows; row++) {
      for (let col = 0; col <= maxCols; col++) {
        const x = edgeMargin + col * actualSpacingX;
        const y = edgeMargin + row * actualSpacingY;
        if (isPointInExclusionZones(x, y, exclusionZones)) continue;
        const particle = new Particle(x, y);
        particle.distanceFromCenter = Math.sqrt((x - centerX) ** 2 + (y - centerY) ** 2);
        particle.baseOpacity = 0;
        newParticles.push(particle);
      }
    }
    return newParticles;
  };
  const getExclusionZones = wrapper => {
    if (!wrapper) return [];
    const wrapperRect = wrapper.getBoundingClientRect();
    const exclusionZones = [];
    const margin = 25;
    const selectors = ['.landing-title', '.landing-subtitle', '.libraries-grid', '.landing-buttons', '.platform-icons-label', '.platform-icons-row'];
    selectors.forEach(selector => {
      const element = document.querySelector(selector);
      if (!element) return;
      const rect = element.getBoundingClientRect();
      const canvasRect = {
        left: rect.left - wrapperRect.left - margin,
        top: rect.top - wrapperRect.top - margin,
        right: rect.right - wrapperRect.left + margin,
        bottom: rect.bottom - wrapperRect.top + margin
      };
      const canvas = canvasRef.current;
      if (canvas && canvasRect.right > 0 && canvasRect.left < canvas.width && canvasRect.bottom > 0 && canvasRect.top < canvas.height) {
        exclusionZones.push(canvasRect);
      }
    });
    return exclusionZones;
  };
  const isPointInExclusionZones = (x, y, exclusionZones) => {
    const radius = PARTICLE_CONFIG.CIRCLE_RADIUS;
    for (const zone of exclusionZones) {
      const closestX = Math.max(zone.left, Math.min(x, zone.right));
      const closestY = Math.max(zone.top, Math.min(y, zone.bottom));
      const distanceX = x - closestX;
      const distanceY = y - closestY;
      const distanceSq = distanceX * distanceX + distanceY * distanceY;
      if (distanceSq <= radius * radius) {
        return true;
      }
    }
    return false;
  };
  const managePulses = currentTime => {
    const timeSinceSystemStart = currentTime - systemStartTime;
    const regularPulseStartDelay = 2000;
    if (timeSinceSystemStart < regularPulseStartDelay) {
      return;
    }
    const adjustedTime = timeSinceSystemStart - regularPulseStartDelay;
    const shouldHaveRegularPulseCount = Math.floor(adjustedTime / PARTICLE_CONFIG.PULSE_LOOP_INTERVAL) + 1;
    const currentRegularPulseCount = activePulses.filter(p => !p.isIntro).length;
    if (currentRegularPulseCount < shouldHaveRegularPulseCount) {
      const regularPulseIndex = currentRegularPulseCount;
      const pulseStartTime = systemStartTime + regularPulseStartDelay + regularPulseIndex * PARTICLE_CONFIG.PULSE_LOOP_INTERVAL;
      const canvas = canvasRef.current;
      const newPulse = {
        startTime: pulseStartTime,
        centerX: canvas ? canvas.width / 2 : 0,
        centerY: canvas ? canvas.height / 2 : 0,
        isIntro: false
      };
      setActivePulses(prev => {
        const updated = [...prev, newPulse];
        const state = getGlobalState();
        if (state) state.activePulses = updated;
        return updated;
      });
    }
    const canvas = canvasRef.current;
    const maxCanvasDiagonal = canvas ? Math.sqrt(canvas.width ** 2 + canvas.height ** 2) : 1000;
    setActivePulses(prev => {
      const filtered = prev.filter(pulse => {
        let pulseSpeed, pulseDuration;
        if (pulse.isIntro) {
          pulseSpeed = PARTICLE_CONFIG.INTRO_PULSE_SPEED;
          pulseDuration = PARTICLE_CONFIG.PULSE_DURATION;
        } else if (pulse.isClick) {
          pulseSpeed = PARTICLE_CONFIG.CLICK_PULSE_SPEED;
          pulseDuration = PARTICLE_CONFIG.CLICK_PULSE_DURATION;
        } else {
          pulseSpeed = PARTICLE_CONFIG.PULSE_SPEED;
          pulseDuration = PARTICLE_CONFIG.PULSE_DURATION;
        }
        const maxPulseLifetime = maxCanvasDiagonal / pulseSpeed * 1000 + pulseDuration;
        return currentTime - pulse.startTime < maxPulseLifetime;
      });
      const state = getGlobalState();
      if (state) state.activePulses = filtered;
      return filtered;
    });
  };
  useEffect(() => {
    const TARGET_FPS = PARTICLE_CONFIG.TARGET_FPS;
    const FRAME_TIME = 1000 / TARGET_FPS;
    const animate = () => {
      const currentTime = performance.now();
      const timeSinceLastFrame = currentTime - lastFrameTimeRef.current;
      if (timeSinceLastFrame >= FRAME_TIME) {
        lastFrameTimeRef.current = currentTime;
        managePulses(currentTime);
        particles.forEach(particle => {
          particle.update(activePulses, mousePosition.x, mousePosition.y, PARTICLE_CONFIG);
        });
        const canvas = canvasRef.current;
        const ctx = canvas?.getContext('2d');
        if (canvas && ctx) {
          ctx.clearRect(0, 0, canvas.width, canvas.height);
          particles.forEach(particle => {
            particle.draw(ctx, PARTICLE_CONFIG);
          });
        }
      }
      animationFrameRef.current = requestAnimationFrame(animate);
    };
    if (particles.length > 0) {
      animationFrameRef.current = requestAnimationFrame(animate);
    }
    return () => {
      if (animationFrameRef.current) {
        cancelAnimationFrame(animationFrameRef.current);
      }
    };
  }, [particles, activePulses, mousePosition, systemStartTime]);
  const handleMouseMove = e => {
    if (wrapperRef.current) {
      const wrapperRect = wrapperRef.current.getBoundingClientRect();
      const newMousePos = {
        x: e.clientX - wrapperRect.left,
        y: e.clientY - wrapperRect.top
      };
      setMousePosition(newMousePos);
      const state = getGlobalState();
      if (state) state.mousePosition = newMousePos;
    }
  };
  const handleMouseDown = e => {
    let clickX, clickY;
    if (wrapperRef.current) {
      const wrapperRect = wrapperRef.current.getBoundingClientRect();
      clickX = e.clientX - wrapperRect.left;
      clickY = e.clientY - wrapperRect.top;
    } else {
      clickX = e.pageX;
      clickY = e.pageY;
    }
    const newClickPulse = {
      startTime: performance.now(),
      centerX: clickX,
      centerY: clickY,
      isClick: true
    };
    setActivePulses(prev => {
      const updated = [...prev, newClickPulse];
      const state = getGlobalState();
      if (state) state.activePulses = updated;
      return updated;
    });
  };
  useEffect(() => {
    document.addEventListener('mousemove', handleMouseMove);
    document.addEventListener('mousedown', handleMouseDown);
    return () => {
      document.removeEventListener('mousemove', handleMouseMove);
      document.removeEventListener('mousedown', handleMouseDown);
    };
  }, []);
  useEffect(() => {
    const handleResize = () => {
      const canvas = canvasRef.current;
      const wrapper = wrapperRef.current;
      setIsVisible(window.innerWidth >= 750);
      if (!canvas || !wrapper) return;
      const landingRoot = document.querySelector('.landing-root');
      const landingHero = document.querySelector('.landing-hero');
      const rootRect = landingRoot?.getBoundingClientRect();
      const heroRect = landingHero?.getBoundingClientRect();
      if (rootRect && heroRect) {
        const canvasWidth = rootRect.width;
        const canvasHeight = heroRect.height;
        canvas.width = canvasWidth;
        canvas.height = canvasHeight;
        const newParticles = createGridParticles(canvas, rootRect.left, window.innerWidth - rootRect.right);
        setParticles(newParticles);
        const state = getGlobalState();
        if (state) {
          state.particles = newParticles;
          state.canvasWidth = canvasWidth;
          state.canvasHeight = canvasHeight;
        }
      }
    };
    window.addEventListener('resize', handleResize);
    setTimeout(handleResize, 0);
    return () => {
      window.removeEventListener('resize', handleResize);
    };
  }, []);
  return <div ref={wrapperRef} style={{
    position: 'absolute',
    top: 0,
    left: 0,
    width: '100%',
    height: '100vh',
    overflow: 'hidden',
    pointerEvents: 'none',
    zIndex: -1,
    display: isVisible ? 'block' : 'none'
  }}>
      <canvas ref={canvasRef} style={{
    position: 'absolute',
    top: 0,
    left: 0,
    width: '100%',
    height: '100%',
    pointerEvents: 'none',
    zIndex: -1
  }} />
    </div>;
};

<style jsx>
  {`
      /* Promowise Design System - Inspired by Anthropic */

      /* Color Variables */
      :root {
        --primary: 218 27 92;
        --primary-light: 218 27 92;
        --primary-dark: 218 27 92;
        --background-light: 253 253 247;
        --background-dark: 9 9 11;
        --gray-50: 249 250 251;
        --gray-100: 243 244 246;
        --gray-200: 229 231 235;
        --gray-300: 209 213 219;
        --gray-400: 156 163 175;
        --gray-500: 107 114 128;
        --gray-600: 75 85 99;
        --gray-700: 55 65 81;
        --gray-800: 31 41 55;
        --gray-900: 17 24 39;
        --gray-950: 3 7 18;
      }

      /* Typography */
      .promowise-heading {
        font-family: "Plus Jakarta Sans", sans-serif;
        font-weight: 600;
        letter-spacing: -0.025em;
      }

      .promowise-body {
        font-family: "Plus Jakarta Sans", sans-serif;
        font-weight: 400;
        line-height: 1.65;
      }

      /* Custom Button Styles */
      .btn-promowise {
        position: relative;
        display: inline-flex;
        gap: 0.5rem;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        min-width: 5rem;
        height: 2.5rem;
        padding: 0.625rem 1.25rem;
        white-space: nowrap;
        font-family: "Plus Jakarta Sans", sans-serif;
        font-weight: 600;
        border-radius: 0.75rem;
        transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
        cursor: pointer;
        text-decoration: none;
      }

      .btn-promowise:active {
        transform: scale(0.98);
      }

      .btn-promowise.primary {
        color: white;
        background: linear-gradient(
          135deg,
          hsl(var(--primary)) 0%,
          hsl(var(--primary) / 0.9) 50%,
          hsl(var(--primary) / 0.8) 100%
        );
        box-shadow: 0 4px 14px 0 hsl(var(--primary) / 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.1);
        border: 1px solid hsl(var(--primary));
      }

      .btn-promowise.primary:hover {
        background: linear-gradient(
          135deg,
          hsl(var(--primary) / 0.9) 0%,
          hsl(var(--primary) / 0.8) 50%,
          hsl(var(--primary) / 0.7) 100%
        );
        box-shadow: 0 6px 20px 0 hsl(var(--primary) / 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.15);
        transform: translateY(-1px);
      }

      .btn-promowise.secondary {
        color: hsl(var(--gray-700));
        background: rgba(255, 255, 255, 0.8);
        backdrop-filter: blur(10px);
        border: 1px solid hsl(var(--gray-200));
        box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.05);
      }

      .btn-promowise.secondary:hover {
        color: hsl(var(--gray-900));
        background: rgba(255, 255, 255, 0.95);
        border-color: hsl(var(--gray-300));
        box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.1);
        transform: translateY(-1px);
      }

      .dark .btn-promowise.secondary {
        color: hsl(var(--gray-200));
        background: rgba(255, 255, 255, 0.1);
        border-color: hsl(var(--gray-700));
      }

      .dark .btn-promowise.secondary:hover {
        color: white;
        background: rgba(255, 255, 255, 0.15);
        border-color: hsl(var(--gray-600));
      }

      /* Card Styles */
      .promowise-card {
        background: rgba(255, 255, 255, 0.7);
        backdrop-filter: blur(20px);
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 16px;
        padding: 2rem;
        transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
      }

      .promowise-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        border-color: rgba(255, 255, 255, 0.3);
      }

      .dark .promowise-card {
        background: rgba(255, 255, 255, 0.05);
        border-color: rgba(255, 255, 255, 0.1);
      }

      .dark .promowise-card:hover {
        background: rgba(255, 255, 255, 0.08);
        border-color: rgba(255, 255, 255, 0.15);
      }

      /* Feature Icons */
      .feature-icon {
        width: 3rem;
        height: 3rem;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(
          135deg,
          hsl(var(--primary) / 0.1) 0%,
          hsl(var(--primary) / 0.05) 100%
        );
        border: 1px solid hsl(var(--primary) / 0.1);
        margin-bottom: 1rem;
      }

      .dark .feature-icon {
        background: linear-gradient(
          135deg,
          hsl(var(--primary) / 0.15) 0%,
          hsl(var(--primary) / 0.08) 100%
        );
        border-color: hsl(var(--primary) / 0.2);
      }

      /* Platform Icons */
      .platform-icons-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
        gap: 1.5rem;
        margin-top: 2rem;
      }

      .platform-icon-card {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 1.5rem 1rem;
        background: rgba(255, 255, 255, 0.6);
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 12px;
        transition: all 200ms ease;
        text-decoration: none;
        color: inherit;
      }

      .platform-icon-card:hover {
        transform: translateY(-2px);
        background: rgba(255, 255, 255, 0.8);
        border-color: rgba(255, 255, 255, 0.4);
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
      }

      .dark .platform-icon-card {
        background: rgba(255, 255, 255, 0.05);
        border-color: rgba(255, 255, 255, 0.1);
      }

      .dark .platform-icon-card:hover {
        background: rgba(255, 255, 255, 0.1);
        border-color: rgba(255, 255, 255, 0.15);
      }

      .platform-icon-card img {
        width: 32px;
        height: 32px;
        margin-bottom: 0.5rem;
      }

      .platform-icon-card span {
        font-size: 0.875rem;
        font-weight: 500;
        text-align: center;
      }

      /* Tech button center positioning */
      .tech-button-center {
        grid-column: 2;
      }

      /* Updated Tab Content Styles */
      .tab-content {
        padding: 2rem 0;
      }

      .tab-content h3 {
        font-size: 1.75rem;
        font-weight: 700;
        margin-bottom: 1rem;
        color: hsl(var(--gray-900));
        letter-spacing: -0.025em;
      }

      .dark .tab-content h3 {
        color: hsl(var(--gray-100));
      }

      .tab-content > p {
        font-size: 1.125rem;
        color: hsl(var(--gray-600));
        margin-bottom: 2.5rem;
        line-height: 1.7;
      }

      .dark .tab-content > p {
        color: hsl(var(--gray-400));
      }

      .feature-cards {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
        gap: 2rem;
        margin-top: 2rem;
      }

      .feature-card {
        background: rgba(255, 255, 255, 0.7);
        backdrop-filter: blur(20px);
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 16px;
        padding: 2rem;
        transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
        position: relative;
        overflow: hidden;
      }

      .feature-card:before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: linear-gradient(
          90deg,
          hsl(var(--primary)) 0%,
          hsl(var(--primary) / 0.7) 100%
        );
        opacity: 0;
        transition: opacity 300ms ease;
      }

      .feature-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        border-color: rgba(255, 255, 255, 0.3);
      }

      .feature-card:hover:before {
        opacity: 1;
      }

      .dark .feature-card {
        background: rgba(255, 255, 255, 0.05);
        border-color: rgba(255, 255, 255, 0.1);
      }

      .dark .feature-card:hover {
        background: rgba(255, 255, 255, 0.08);
        border-color: rgba(255, 255, 255, 0.15);
      }

      .feature-card h4 {
        font-size: 1.25rem;
        font-weight: 600;
        margin: 1rem 0 0.75rem 0;
        color: hsl(var(--gray-900));
      }

      .dark .feature-card h4 {
        color: hsl(var(--gray-100));
      }

      .feature-card p {
        color: hsl(var(--gray-600));
        line-height: 1.6;
        margin-bottom: 1.5rem;
      }

      .dark .feature-card p {
        color: hsl(var(--gray-400));
      }

      .card-link {
        color: hsl(var(--primary));
        text-decoration: none;
        font-weight: 600;
        font-size: 0.95rem;
        transition: all 200ms ease;
        display: inline-flex;
        align-items: center;
        gap: 0.375rem;
      }

      .card-link:hover {
        color: hsl(var(--primary) / 0.8);
        transform: translateX(4px);
      }

      .card-link:after {
        content: "→";
        transition: transform 200ms ease;
      }

      .card-link:hover:after {
        transform: translateX(2px);
      }

      /* Responsive adjustments */
      @media (max-width: 768px) {
        .feature-cards {
          grid-template-columns: 1fr;
          gap: 1.5rem;
        }

        .feature-card {
          padding: 1.5rem;
        }

        .tab-content h3 {
          font-size: 1.5rem;
        }

        .tab-content > p {
          font-size: 1rem;
        }

        .platform-icons-grid {
          grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
          gap: 1rem;
        }

        .btn-promowise {
          height: 2.25rem;
          padding: 0.5rem 1rem;
          font-size: 0.875rem;
        }
      }

      /* Landing page specific styles */
      .landing-title {
        background: linear-gradient(
          135deg,
          hsl(var(--gray-900)) 0%,
          hsl(var(--primary)) 50%,
          hsl(var(--gray-700)) 100%
        );
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
      }

      .dark .landing-title {
        background: linear-gradient(
          135deg,
          hsl(var(--gray-100)) 0%,
          hsl(var(--primary-light)) 50%,
          hsl(var(--gray-300)) 100%
        );
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
      }

      .library-box {
        background: rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(20px);
        border: 1px solid rgba(255, 255, 255, 0.2);
        transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
      }

      .library-box:hover {
        background: rgba(255, 255, 255, 0.15);
        border-color: rgba(255, 255, 255, 0.3);
        transform: translateY(-2px);
      }

      /* Smooth scrolling for all devices */
      .landing-root {
        scroll-behavior: smooth;
      }

      /* Section styling */
      .landing-section {
        overflow-x: hidden;
      }
    `}
</style>

<div className="landing-root h-screen overflow-y-scroll scroll-smooth">
  <HeroBackground />

  <div className="min-h-screen w-full max-w-7xl mx-auto flex flex-col items-center justify-center text-center px-8 transition-all duration-700 ease-in-out">
    <div className="flex-grow" />

    <h1 className="text-3xl md:text-5xl font-semibold mb-4 bg-gradient-to-br from-gray-900 via-primary to-gray-700 dark:from-gray-100 dark:via-primary dark:to-gray-300 bg-clip-text text-transparent relative z-10 pb-2 leading-relaxed">
      Lead the Pack, the Promowise Way
    </h1>

    <p className="text-sm md:text-base text-gray-600 dark:text-gray-400 leading-relaxed mb-6 max-w-2xl">
      Your complete guide to lead generation and marketing automation.{" "}
      <span className="text-primary font-medium">Build, capture, convert.</span>
    </p>

    <div className="grid grid-cols-1 md:grid-cols-3 gap-4 max-w-3xl w-full mb-6 relative z-10">
      <a href="/getting-started" className="group bg-white/70 dark:bg-black/10 backdrop-blur-2xl border border-gray-200/50 dark:border-white/10 rounded-2xl p-4 transition-all duration-500 hover:bg-white/90 dark:hover:bg-black/15 hover:border-gray-300/70 dark:hover:border-white/15 hover:-translate-y-2 hover:shadow-2xl hover:shadow-primary/10 dark:hover:shadow-primary/20 no-underline relative overflow-hidden opacity-90 dark:opacity-80 group-hover:opacity-100 shadow-sm shadow-gray-200/40 dark:shadow-none">
        <div className="absolute inset-0 bg-gradient-to-br from-white/20 via-transparent to-primary/5 dark:from-white/10 dark:to-primary/10 opacity-0 group-hover:opacity-100 transition-opacity duration-500" />

        <div className="relative z-10">
          <div className="flex items-start justify-between mb-4">
            <div className="flex items-center gap-3">
              <div className="p-2 bg-primary/10 rounded-lg flex items-center justify-center">
                <Icon icon="rocket" color="#da1b5c" size={16} />
              </div>

              <h3 className="text-md font-semibold text-gray-900 dark:text-white m-0">Getting Started</h3>
            </div>

            <div className="opacity-80 group-hover:opacity-100 transition-opacity">
              <Icon icon="arrow-right" color="#6B7280" size={20} />
            </div>
          </div>

          <div>
            <p className="text-gray-700 dark:text-white/90 mb-2 leading-relaxed">
              Set up your account and launch your first lead generation campaign
            </p>

            <p className="text-gray-600 dark:text-white/70 text-sm">
              Quick setup in <span className="text-primary font-medium">5 minutes</span> or
              less
            </p>
          </div>
        </div>
      </a>

      <a href="/lead-management" className="group bg-white/70 dark:bg-black/10 backdrop-blur-2xl border border-gray-200/50 dark:border-white/10 rounded-2xl p-4 transition-all duration-500 hover:bg-white/90 dark:hover:bg-black/15 hover:border-gray-300/70 dark:hover:border-white/15 hover:-translate-y-2 hover:shadow-2xl hover:shadow-primary/10 dark:hover:shadow-primary/20 no-underline relative overflow-hidden opacity-90 dark:opacity-80 group-hover:opacity-100 shadow-sm shadow-gray-200/40 dark:shadow-none">
        <div className="absolute inset-0 bg-gradient-to-br from-white/20 via-transparent to-primary/5 dark:from-white/10 dark:to-primary/10 opacity-0 group-hover:opacity-100 transition-opacity duration-500" />

        <div className="relative z-10">
          <div className="flex items-start justify-between mb-4">
            <div className="flex items-center gap-3">
              <div className="p-2 bg-primary/10 rounded-lg flex items-center justify-center">
                <Icon icon="users" color="#da1b5c" size={16} />
              </div>

              <h3 className="text-md font-semibold text-gray-900 dark:text-white m-0">
                Lead Management
              </h3>
            </div>

            <div className="opacity-80 group-hover:opacity-100 transition-opacity">
              <Icon icon="arrow-right" color="#6B7280" size={20} />
            </div>
          </div>

          <div>
            <p className="text-gray-700 dark:text-white/90 mb-2 leading-relaxed">
              Capture, organize, and nurture leads with intelligent automation
            </p>

            <p className="text-gray-600 dark:text-white/70 text-sm">
              Replaces <span className="text-primary font-medium">HubSpot</span>, <span className="text-primary font-medium">Salesforce</span>, or <span className="text-primary font-medium">Pipedrive</span>
            </p>
          </div>
        </div>
      </a>

      <a href="/campaigns" className="group bg-white/70 dark:bg-black/10 backdrop-blur-2xl border border-gray-200/50 dark:border-white/10 rounded-2xl p-4 transition-all duration-500 hover:bg-white/90 dark:hover:bg-black/15 hover:border-gray-300/70 dark:hover:border-white/15 hover:-translate-y-2 hover:shadow-2xl hover:shadow-primary/10 dark:hover:shadow-primary/20 no-underline relative overflow-hidden opacity-90 dark:opacity-80 group-hover:opacity-100 shadow-sm shadow-gray-200/40 dark:shadow-none">
        <div className="absolute inset-0 bg-gradient-to-br from-white/20 via-transparent to-primary/5 dark:from-white/10 dark:to-primary/10 opacity-0 group-hover:opacity-100 transition-opacity duration-500" />

        <div className="relative z-10">
          <div className="flex items-start justify-between mb-4">
            <div className="flex items-center gap-3">
              <div className="p-2 bg-primary/10 rounded-lg flex items-center justify-center">
                <Icon icon="envelope" color="#da1b5c" size={16} />
              </div>

              <h3 className="text-md font-semibold text-gray-900 dark:text-white m-0">
                Campaign Builder
              </h3>
            </div>

            <div className="opacity-80 group-hover:opacity-100 transition-opacity">
              <Icon icon="arrow-right" color="#6B7280" size={20} />
            </div>
          </div>

          <div>
            <p className="text-gray-700 dark:text-white/90 mb-2 leading-relaxed">
              Create targeted email campaigns with drag-and-drop simplicity
            </p>

            <p className="text-gray-600 dark:text-white/70 text-sm">
              Replaces <span className="text-primary font-medium">Mailchimp</span>, <span className="text-primary font-medium">Constant Contact</span>, or <span className="text-primary font-medium">SendGrid</span>
            </p>
          </div>
        </div>
      </a>
    </div>

    <div className="flex flex-col sm:flex-row gap-4 justify-center items-center relative z-10">
      <a href="/getting-started" className="inline-flex items-center justify-center px-8 py-4 rounded-2xl font-semibold transition-all duration-300 bg-primary text-white shadow-xl shadow-primary/30 hover:shadow-2xl hover:shadow-primary/40 hover:-translate-y-1 hover:scale-105 active:scale-95 min-w-44 relative overflow-hidden">
        <div className="absolute inset-0 bg-gradient-to-r from-white/10 via-transparent to-white/5 opacity-0 hover:opacity-100 transition-opacity duration-300" />

        <span className="relative z-10">Get Started</span>
      </a>

      <a href="/api-reference" className="inline-flex items-center justify-center px-8 py-4 rounded-2xl font-semibold transition-all duration-300 bg-white/70 dark:bg-black/10 text-gray-700 dark:text-gray-200 border border-gray-200/60 dark:border-white/20 backdrop-blur-2xl hover:bg-white/85 dark:hover:bg-black/15 hover:border-gray-300/70 dark:hover:border-white/30 hover:-translate-y-1 hover:scale-105 active:scale-95 min-w-44 relative overflow-hidden shadow-sm shadow-gray-200/50 dark:shadow-black/20 opacity-90 dark:opacity-80 hover:opacity-100">
        <div className="absolute inset-0 bg-gradient-to-r from-primary/5 via-transparent to-primary/10 opacity-0 hover:opacity-100 transition-opacity duration-300" />

        <span className="relative z-10">View API Docs</span>
      </a>
    </div>

    <div className="flex-grow" />

    <div className="h-16" />
  </div>

  <div className="absolute inset-0 bg-gradient-to-b from-transparent via-primary/5 to-transparent dark:via-primary/10 pointer-events-none" style={{ top: "100vh", height: "100px" }} />

  <div className="w-full max-w-7xl mx-auto px-8 relative z-10 min-h-screen flex flex-col justify-center transition-all duration-700 ease-in-out">
    <h2 className="text-xl md:text-2xl font-semibold text-gray-900 dark:text-gray-100 text-center mb-6 tracking-tight">
      Explore Our Services
    </h2>

    <Tabs>
      <Tab title="Getting Started">
        <div className="py-2">
          <h3 className="text-xl font-bold mb-2 text-gray-900 dark:text-gray-100 tracking-tight">
            Quick Setup Guide
          </h3>

          <p className="text-sm text-gray-600 dark:text-gray-400 mb-6 leading-relaxed">
            Get your Promowise account up and running in minutes with our streamlined onboarding process.
          </p>

          <div className="grid grid-cols-1 lg:grid-cols-3 gap-4 mt-4">
            <div className="group relative bg-white/70 dark:bg-black/10 backdrop-blur-xl border border-gray-200/60 dark:border-white/10 rounded-2xl p-6 transition-all duration-300 hover:-translate-y-1 hover:shadow-xl hover:shadow-black/10 dark:hover:shadow-black/20 hover:border-gray-300/70 dark:hover:border-white/15 opacity-90 dark:opacity-80 hover:opacity-100 overflow-hidden shadow-sm shadow-gray-200/50 dark:shadow-none">
              <div className="absolute top-0 left-0 right-0 h-1 bg-gradient-to-r from-primary to-primary/70 opacity-0 group-hover:opacity-100 transition-opacity duration-300" />

              <div className="w-12 h-12 bg-gradient-to-br from-primary/10 to-primary/5 dark:from-primary/15 dark:to-primary/8 rounded-xl flex items-center justify-center border border-primary/10 dark:border-primary/20 mb-4 mx-auto">
                <Icon icon="user-plus" color="#da1b5c" size={24} />
              </div>

              <h4 className="text-base font-semibold mb-1 text-gray-900 dark:text-gray-100">
                Account Setup
              </h4>

              <p className="text-gray-600 dark:text-gray-400 leading-relaxed mb-6">
                Create your account and configure your workspace settings
              </p>

              <a href="/account-setup" className="inline-flex items-center text-primary font-semibold text-[15px] transition-all duration-200 hover:translate-x-1 group-hover:translate-x-1">
                Setup Guide <span className="ml-1.5 transition-transform duration-200 group-hover:translate-x-0.5">
                →</span>
              </a>
            </div>

            <div className="group relative bg-white/70 dark:bg-black/10 backdrop-blur-xl border border-gray-200/60 dark:border-white/10 rounded-2xl p-6 transition-all duration-300 hover:-translate-y-1 hover:shadow-xl hover:shadow-black/10 dark:hover:shadow-black/20 hover:border-gray-300/70 dark:hover:border-white/15 opacity-90 dark:opacity-80 hover:opacity-100 overflow-hidden shadow-sm shadow-gray-200/50 dark:shadow-none">
              <div className="absolute top-0 left-0 right-0 h-1 bg-gradient-to-r from-primary to-primary/70 opacity-0 group-hover:opacity-100 transition-opacity duration-300" />

              <div className="w-12 h-12 bg-gradient-to-br from-primary/10 to-primary/5 dark:from-primary/15 dark:to-primary/8 rounded-xl flex items-center justify-center border border-primary/10 dark:border-primary/20 mb-4 mx-auto">
                <Icon icon="bullseye" color="#da1b5c" size={24} />
              </div>

              <h4 className="text-base font-semibold mb-1 text-gray-900 dark:text-gray-100">
                First Campaign
              </h4>

              <p className="text-gray-600 dark:text-gray-400 leading-relaxed mb-6">
                Launch your first lead generation campaign in under 5 minutes
              </p>

              <a href="/first-campaign" className="inline-flex items-center text-primary font-semibold text-[15px] transition-all duration-200 hover:translate-x-1 group-hover:translate-x-1">
                Create Campaign <span className="ml-1.5 transition-transform duration-200 group-hover:translate-x-0.5">
                →</span>
              </a>
            </div>

            <div className="group relative bg-white/70 dark:bg-black/10 backdrop-blur-xl border border-gray-200/60 dark:border-white/10 rounded-2xl p-6 transition-all duration-300 hover:-translate-y-1 hover:shadow-xl hover:shadow-black/10 dark:hover:shadow-black/20 hover:border-gray-300/70 dark:hover:border-white/15 opacity-90 dark:opacity-80 hover:opacity-100 overflow-hidden shadow-sm shadow-gray-200/50 dark:shadow-none">
              <div className="absolute top-0 left-0 right-0 h-1 bg-gradient-to-r from-primary to-primary/70 opacity-0 group-hover:opacity-100 transition-opacity duration-300" />

              <div className="w-12 h-12 bg-gradient-to-br from-primary/10 to-primary/5 dark:from-primary/15 dark:to-primary/8 rounded-xl flex items-center justify-center border border-primary/10 dark:border-primary/20 mb-4 mx-auto">
                <Icon icon="chart-line" color="#da1b5c" size={24} />
              </div>

              <h4 className="text-base font-semibold mb-1 text-gray-900 dark:text-gray-100">
                Track Results
              </h4>

              <p className="text-gray-600 dark:text-gray-400 leading-relaxed mb-6">
                Monitor your campaign performance with real-time analytics
              </p>

              <a href="/analytics" className="inline-flex items-center text-primary font-semibold text-[15px] transition-all duration-200 hover:translate-x-1 group-hover:translate-x-1">
                View Analytics <span className="ml-1.5 transition-transform duration-200 group-hover:translate-x-0.5">
                →</span>
              </a>
            </div>
          </div>
        </div>
      </Tab>

      <Tab title="Lead Management">
        <div className="py-2">
          <h3 className="text-xl font-bold mb-2 text-gray-900 dark:text-gray-100 tracking-tight">
            Comprehensive CRM
          </h3>

          <p className="text-sm text-gray-600 dark:text-gray-400 mb-6 leading-relaxed">
            Capture, organize, and nurture leads with our intelligent automation platform.
          </p>

          <div className="grid grid-cols-1 lg:grid-cols-3 gap-4 mt-4">
            <div className="group relative bg-white/70 dark:bg-black/10 backdrop-blur-xl border border-gray-200/60 dark:border-white/10 rounded-2xl p-6 transition-all duration-300 hover:-translate-y-1 hover:shadow-xl hover:shadow-black/10 dark:hover:shadow-black/20 hover:border-gray-300/70 dark:hover:border-white/15 opacity-90 dark:opacity-80 hover:opacity-100 overflow-hidden shadow-sm shadow-gray-200/50 dark:shadow-none">
              <div className="absolute top-0 left-0 right-0 h-1 bg-gradient-to-r from-primary to-primary/70 opacity-0 group-hover:opacity-100 transition-opacity duration-300" />

              <div className="w-12 h-12 bg-gradient-to-br from-primary/10 to-primary/5 dark:from-primary/15 dark:to-primary/8 rounded-xl flex items-center justify-center border border-primary/10 dark:border-primary/20 mb-4 mx-auto">
                <Icon icon="download" color="#da1b5c" size={24} />
              </div>

              <h4 className="text-base font-semibold mb-1 text-gray-900 dark:text-gray-100">
                Lead Capture
              </h4>

              <p className="text-gray-600 dark:text-gray-400 leading-relaxed mb-6">
                Automatically capture leads from forms, landing pages, and integrations
              </p>

              <a href="/lead-capture" className="inline-flex items-center text-primary font-semibold text-[15px] transition-all duration-200 hover:translate-x-1 group-hover:translate-x-1">
                Learn More <span className="ml-1.5 transition-transform duration-200 group-hover:translate-x-0.5">
                →</span>
              </a>
            </div>

            <div className="group relative bg-white/70 dark:bg-black/10 backdrop-blur-xl border border-gray-200/60 dark:border-white/10 rounded-2xl p-6 transition-all duration-300 hover:-translate-y-1 hover:shadow-xl hover:shadow-black/10 dark:hover:shadow-black/20 hover:border-gray-300/70 dark:hover:border-white/15 opacity-90 dark:opacity-80 hover:opacity-100 overflow-hidden shadow-sm shadow-gray-200/50 dark:shadow-none">
              <div className="absolute top-0 left-0 right-0 h-1 bg-gradient-to-r from-primary to-primary/70 opacity-0 group-hover:opacity-100 transition-opacity duration-300" />

              <div className="w-12 h-12 bg-gradient-to-br from-primary/10 to-primary/5 dark:from-primary/15 dark:to-primary/8 rounded-xl flex items-center justify-center border border-primary/10 dark:border-primary/20 mb-4 mx-auto">
                <Icon icon="diagram-project" color="#da1b5c" size={24} />
              </div>

              <h4 className="text-base font-semibold mb-1 text-gray-900 dark:text-gray-100">
                Automation
              </h4>

              <p className="text-gray-600 dark:text-gray-400 leading-relaxed mb-6">
                Set up automated workflows to nurture leads through your sales funnel
              </p>

              <a href="/automation" className="inline-flex items-center text-primary font-semibold text-[15px] transition-all duration-200 hover:translate-x-1 group-hover:translate-x-1">
                Build Workflows <span className="ml-1.5 transition-transform duration-200 group-hover:translate-x-0.5">
                →</span>
              </a>
            </div>

            <div className="group relative bg-white/70 dark:bg-black/10 backdrop-blur-xl border border-gray-200/60 dark:border-white/10 rounded-2xl p-6 transition-all duration-300 hover:-translate-y-1 hover:shadow-xl hover:shadow-black/10 dark:hover:shadow-black/20 hover:border-gray-300/70 dark:hover:border-white/15 opacity-90 dark:opacity-80 hover:opacity-100 overflow-hidden shadow-sm shadow-gray-200/50 dark:shadow-none">
              <div className="absolute top-0 left-0 right-0 h-1 bg-gradient-to-r from-primary to-primary/70 opacity-0 group-hover:opacity-100 transition-opacity duration-300" />

              <div className="w-12 h-12 bg-gradient-to-br from-primary/10 to-primary/5 dark:from-primary/15 dark:to-primary/8 rounded-xl flex items-center justify-center border border-primary/10 dark:border-primary/20 mb-4 mx-auto">
                <Icon icon="tags" color="#da1b5c" size={24} />
              </div>

              <h4 className="text-base font-semibold mb-1 text-gray-900 dark:text-gray-100">
                Lead Scoring
              </h4>

              <p className="text-gray-600 dark:text-gray-400 leading-relaxed mb-6">
                Prioritize your hottest leads with intelligent scoring algorithms
              </p>

              <a href="/lead-scoring" className="inline-flex items-center text-primary font-semibold text-[15px] transition-all duration-200 hover:translate-x-1 group-hover:translate-x-1">
                Setup Scoring <span className="ml-1.5 transition-transform duration-200 group-hover:translate-x-0.5">
                →</span>
              </a>
            </div>
          </div>
        </div>
      </Tab>

      <Tab title="Campaigns">
        <div className="py-2">
          <h3 className="text-xl font-bold mb-2 text-gray-900 dark:text-gray-100 tracking-tight">
            Email Marketing Made Simple
          </h3>

          <p className="text-sm text-gray-600 dark:text-gray-400 mb-6 leading-relaxed">
            Create beautiful, responsive email campaigns with our drag-and-drop builder.
          </p>

          <div className="grid grid-cols-1 lg:grid-cols-3 gap-4 mt-4">
            <div className="group relative bg-white/70 dark:bg-black/10 backdrop-blur-xl border border-gray-200/60 dark:border-white/10 rounded-2xl p-6 transition-all duration-300 hover:-translate-y-1 hover:shadow-xl hover:shadow-black/10 dark:hover:shadow-black/20 hover:border-gray-300/70 dark:hover:border-white/15 opacity-90 dark:opacity-80 hover:opacity-100 overflow-hidden shadow-sm shadow-gray-200/50 dark:shadow-none">
              <div className="absolute top-0 left-0 right-0 h-1 bg-gradient-to-r from-primary to-primary/70 opacity-0 group-hover:opacity-100 transition-opacity duration-300" />

              <div className="w-12 h-12 bg-gradient-to-br from-primary/10 to-primary/5 dark:from-primary/15 dark:to-primary/8 rounded-xl flex items-center justify-center border border-primary/10 dark:border-primary/20 mb-4 mx-auto">
                <Icon icon="palette" color="#da1b5c" size={24} />
              </div>

              <h4 className="text-base font-semibold mb-1 text-gray-900 dark:text-gray-100">
                Template Library
              </h4>

              <p className="text-gray-600 dark:text-gray-400 leading-relaxed mb-6">
                Choose from hundreds of professionally designed email templates
              </p>

              <a href="/templates" className="inline-flex items-center text-primary font-semibold text-[15px] transition-all duration-200 hover:translate-x-1 group-hover:translate-x-1">
                Browse Templates <span className="ml-1.5 transition-transform duration-200 group-hover:translate-x-0.5">
                →</span>
              </a>
            </div>

            <div className="group relative bg-white/70 dark:bg-black/10 backdrop-blur-xl border border-gray-200/60 dark:border-white/10 rounded-2xl p-6 transition-all duration-300 hover:-translate-y-1 hover:shadow-xl hover:shadow-black/10 dark:hover:shadow-black/20 hover:border-gray-300/70 dark:hover:border-white/15 opacity-90 dark:opacity-80 hover:opacity-100 overflow-hidden shadow-sm shadow-gray-200/50 dark:shadow-none">
              <div className="absolute top-0 left-0 right-0 h-1 bg-gradient-to-r from-primary to-primary/70 opacity-0 group-hover:opacity-100 transition-opacity duration-300" />

              <div className="w-12 h-12 bg-gradient-to-br from-primary/10 to-primary/5 dark:from-primary/15 dark:to-primary/8 rounded-xl flex items-center justify-center border border-primary/10 dark:border-primary/20 mb-4 mx-auto">
                <Icon icon="split" color="#da1b5c" size={24} />
              </div>

              <h4 className="text-base font-semibold mb-1 text-gray-900 dark:text-gray-100">
                A/B Testing
              </h4>

              <p className="text-gray-600 dark:text-gray-400 leading-relaxed mb-6">
                Optimize your campaigns with built-in split testing capabilities
              </p>

              <a href="/ab-testing" className="inline-flex items-center text-primary font-semibold text-[15px] transition-all duration-200 hover:translate-x-1 group-hover:translate-x-1">
                Start Testing <span className="ml-1.5 transition-transform duration-200 group-hover:translate-x-0.5">
                →</span>
              </a>
            </div>

            <div className="group relative bg-white/70 dark:bg-black/10 backdrop-blur-xl border border-gray-200/60 dark:border-white/10 rounded-2xl p-6 transition-all duration-300 hover:-translate-y-1 hover:shadow-xl hover:shadow-black/10 dark:hover:shadow-black/20 hover:border-gray-300/70 dark:hover:border-white/15 opacity-90 dark:opacity-80 hover:opacity-100 overflow-hidden shadow-sm shadow-gray-200/50 dark:shadow-none">
              <div className="absolute top-0 left-0 right-0 h-1 bg-gradient-to-r from-primary to-primary/70 opacity-0 group-hover:opacity-100 transition-opacity duration-300" />

              <div className="w-12 h-12 bg-gradient-to-br from-primary/10 to-primary/5 dark:from-primary/15 dark:to-primary/8 rounded-xl flex items-center justify-center border border-primary/10 dark:border-primary/20 mb-4 mx-auto">
                <Icon icon="clock" color="#da1b5c" size={24} />
              </div>

              <h4 className="text-base font-semibold mb-1 text-gray-900 dark:text-gray-100">
                Scheduling
              </h4>

              <p className="text-gray-600 dark:text-gray-400 leading-relaxed mb-6">
                Schedule campaigns and set up automated drip sequences
              </p>

              <a href="/scheduling" className="inline-flex items-center text-primary font-semibold text-[15px] transition-all duration-200 hover:translate-x-1 group-hover:translate-x-1">
                Schedule Campaigns <span className="ml-1.5 transition-transform duration-200 group-hover:translate-x-0.5">
                →</span>
              </a>
            </div>
          </div>
        </div>
      </Tab>

      <Tab title="API Reference">
        <div className="py-2">
          <h3 className="text-xl font-bold mb-2 text-gray-900 dark:text-gray-100 tracking-tight">
            Developer Resources
          </h3>

          <p className="text-sm text-gray-600 dark:text-gray-400 mb-6 leading-relaxed">
            Integrate Promowise with your existing systems using our comprehensive REST API.
          </p>

          <div className="grid grid-cols-1 lg:grid-cols-3 gap-4 mt-4">
            <div className="group relative bg-white/70 dark:bg-black/10 backdrop-blur-xl border border-gray-200/60 dark:border-white/10 rounded-2xl p-6 transition-all duration-300 hover:-translate-y-1 hover:shadow-xl hover:shadow-black/10 dark:hover:shadow-black/20 hover:border-gray-300/70 dark:hover:border-white/15 opacity-90 dark:opacity-80 hover:opacity-100 overflow-hidden shadow-sm shadow-gray-200/50 dark:shadow-none">
              <div className="absolute top-0 left-0 right-0 h-1 bg-gradient-to-r from-primary to-primary/70 opacity-0 group-hover:opacity-100 transition-opacity duration-300" />

              <div className="w-12 h-12 bg-gradient-to-br from-primary/10 to-primary/5 dark:from-primary/15 dark:to-primary/8 rounded-xl flex items-center justify-center border border-primary/10 dark:border-primary/20 mb-4 mx-auto">
                <Icon icon="book" color="#da1b5c" size={24} />
              </div>

              <h4 className="text-base font-semibold mb-1 text-gray-900 dark:text-gray-100">
                API Documentation
              </h4>

              <p className="text-gray-600 dark:text-gray-400 leading-relaxed mb-6">
                Complete reference for all API endpoints and authentication methods
              </p>

              <a href="/api-reference" className="inline-flex items-center text-primary font-semibold text-[15px] transition-all duration-200 hover:translate-x-1 group-hover:translate-x-1">
                View Docs <span className="ml-1.5 transition-transform duration-200 group-hover:translate-x-0.5">
                →</span>
              </a>
            </div>

            <div className="group relative bg-white/70 dark:bg-black/10 backdrop-blur-xl border border-gray-200/60 dark:border-white/10 rounded-2xl p-6 transition-all duration-300 hover:-translate-y-1 hover:shadow-xl hover:shadow-black/10 dark:hover:shadow-black/20 hover:border-gray-300/70 dark:hover:border-white/15 opacity-90 dark:opacity-80 hover:opacity-100 overflow-hidden shadow-sm shadow-gray-200/50 dark:shadow-none">
              <div className="absolute top-0 left-0 right-0 h-1 bg-gradient-to-r from-primary to-primary/70 opacity-0 group-hover:opacity-100 transition-opacity duration-300" />

              <div className="w-12 h-12 bg-gradient-to-br from-primary/10 to-primary/5 dark:from-primary/15 dark:to-primary/8 rounded-xl flex items-center justify-center border border-primary/10 dark:border-primary/20 mb-4 mx-auto">
                <Icon icon="webhook" color="#da1b5c" size={24} />
              </div>

              <h4 className="text-base font-semibold mb-1 text-gray-900 dark:text-gray-100">
                Webhooks
              </h4>

              <p className="text-gray-600 dark:text-gray-400 leading-relaxed mb-6">
                Receive real-time notifications about leads, campaigns, and events
              </p>

              <a href="/webhooks" className="inline-flex items-center text-primary font-semibold text-[15px] transition-all duration-200 hover:translate-x-1 group-hover:translate-x-1">
                Setup Webhooks <span className="ml-1.5 transition-transform duration-200 group-hover:translate-x-0.5">
                →</span>
              </a>
            </div>

            <div className="group relative bg-white/70 dark:bg-black/10 backdrop-blur-xl border border-gray-200/60 dark:border-white/10 rounded-2xl p-6 transition-all duration-300 hover:-translate-y-1 hover:shadow-xl hover:shadow-black/10 dark:hover:shadow-black/20 hover:border-gray-300/70 dark:hover:border-white/15 opacity-90 dark:opacity-80 hover:opacity-100 overflow-hidden shadow-sm shadow-gray-200/50 dark:shadow-none">
              <div className="absolute top-0 left-0 right-0 h-1 bg-gradient-to-r from-primary to-primary/70 opacity-0 group-hover:opacity-100 transition-opacity duration-300" />

              <div className="w-12 h-12 bg-gradient-to-br from-primary/10 to-primary/5 dark:from-primary/15 dark:to-primary/8 rounded-xl flex items-center justify-center border border-primary/10 dark:border-primary/20 mb-4 mx-auto">
                <Icon icon="code-merge" color="#da1b5c" size={24} />
              </div>

              <h4 className="text-base font-semibold mb-1 text-gray-900 dark:text-gray-100">
                SDKs
              </h4>

              <p className="text-gray-600 dark:text-gray-400 leading-relaxed mb-6">
                Official libraries for JavaScript, Python, PHP, and more
              </p>

              <a href="/sdks" className="inline-flex items-center text-primary font-semibold text-[15px] transition-all duration-200 hover:translate-x-1 group-hover:translate-x-1">
                Download SDKs <span className="ml-1.5 transition-transform duration-200 group-hover:translate-x-0.5">
                →</span>
              </a>
            </div>
          </div>
        </div>
      </Tab>

      <Tab title="Integrations">
        <div className="py-2">
          <h3 className="text-xl font-bold mb-2 text-gray-900 dark:text-gray-100 tracking-tight">
            Connect Everything
          </h3>

          <p className="text-sm text-gray-600 dark:text-gray-400 mb-6 leading-relaxed">
            Seamlessly integrate with your favorite tools and platforms.
          </p>

          <div className="grid grid-cols-1 lg:grid-cols-3 gap-4 mt-4">
            <div className="group relative bg-white/70 dark:bg-black/10 backdrop-blur-xl border border-gray-200/60 dark:border-white/10 rounded-2xl p-6 transition-all duration-300 hover:-translate-y-1 hover:shadow-xl hover:shadow-black/10 dark:hover:shadow-black/20 hover:border-gray-300/70 dark:hover:border-white/15 opacity-90 dark:opacity-80 hover:opacity-100 overflow-hidden shadow-sm shadow-gray-200/50 dark:shadow-none">
              <div className="absolute top-0 left-0 right-0 h-1 bg-gradient-to-r from-primary to-primary/70 opacity-0 group-hover:opacity-100 transition-opacity duration-300" />

              <div className="w-12 h-12 bg-gradient-to-br from-primary/10 to-primary/5 dark:from-primary/15 dark:to-primary/8 rounded-xl flex items-center justify-center border border-primary/10 dark:border-primary/20 mb-4 mx-auto">
                <Icon icon="database" color="#da1b5c" size={24} />
              </div>

              <h4 className="text-base font-semibold mb-1 text-gray-900 dark:text-gray-100">
                CRM Integration
              </h4>

              <p className="text-gray-600 dark:text-gray-400 leading-relaxed mb-6">
                Sync with HubSpot, Salesforce, Pipedrive, and more
              </p>

              <a href="/crm-integrations" className="inline-flex items-center text-primary font-semibold text-[15px] transition-all duration-200 hover:translate-x-1 group-hover:translate-x-1">
                Connect CRM <span className="ml-1.5 transition-transform duration-200 group-hover:translate-x-0.5">
                →</span>
              </a>
            </div>

            <div className="group relative bg-white/70 dark:bg-black/10 backdrop-blur-xl border border-gray-200/60 dark:border-white/10 rounded-2xl p-6 transition-all duration-300 hover:-translate-y-1 hover:shadow-xl hover:shadow-black/10 dark:hover:shadow-black/20 hover:border-gray-300/70 dark:hover:border-white/15 opacity-90 dark:opacity-80 hover:opacity-100 overflow-hidden shadow-sm shadow-gray-200/50 dark:shadow-none">
              <div className="absolute top-0 left-0 right-0 h-1 bg-gradient-to-r from-primary to-primary/70 opacity-0 group-hover:opacity-100 transition-opacity duration-300" />

              <div className="w-12 h-12 bg-gradient-to-br from-primary/10 to-primary/5 dark:from-primary/15 dark:to-primary/8 rounded-xl flex items-center justify-center border border-primary/10 dark:border-primary/20 mb-4 mx-auto">
                <Icon icon="bolt-auto" color="#da1b5c" size={24} />
              </div>

              <h4 className="text-base font-semibold mb-1 text-gray-900 dark:text-gray-100">
                Zapier
              </h4>

              <p className="text-gray-600 dark:text-gray-400 leading-relaxed mb-6">
                Connect to thousands of apps through our Zapier integration
              </p>

              <a href="/zapier" className="inline-flex items-center text-primary font-semibold text-[15px] transition-all duration-200 hover:translate-x-1 group-hover:translate-x-1">
                Setup Zapier <span className="ml-1.5 transition-transform duration-200 group-hover:translate-x-0.5">
                →</span>
              </a>
            </div>
          </div>
        </div>
      </Tab>

      <Tab title="Analytics">
        <div className="py-2">
          <h3 className="text-xl font-bold mb-2 text-gray-900 dark:text-gray-100 tracking-tight">
            Data-Driven Insights
          </h3>

          <p className="text-sm text-gray-600 dark:text-gray-400 mb-6 leading-relaxed">
            Track performance and make data-driven decisions with comprehensive analytics.
          </p>

          <div className="grid grid-cols-1 lg:grid-cols-3 gap-4 mt-4">
            <div className="group relative bg-white/70 dark:bg-black/10 backdrop-blur-xl border border-gray-200/60 dark:border-white/10 rounded-2xl p-6 transition-all duration-300 hover:-translate-y-1 hover:shadow-xl hover:shadow-black/10 dark:hover:shadow-black/20 hover:border-gray-300/70 dark:hover:border-white/15 opacity-90 dark:opacity-80 hover:opacity-100 overflow-hidden shadow-sm shadow-gray-200/50 dark:shadow-none">
              <div className="absolute top-0 left-0 right-0 h-1 bg-gradient-to-r from-primary to-primary/70 opacity-0 group-hover:opacity-100 transition-opacity duration-300" />

              <div className="w-12 h-12 bg-gradient-to-br from-primary/10 to-primary/5 dark:from-primary/15 dark:to-primary/8 rounded-xl flex items-center justify-center border border-primary/10 dark:border-primary/20 mb-4 mx-auto">
                <Icon icon="chart-mixed" color="#da1b5c" size={24} />
              </div>

              <h4 className="text-base font-semibold mb-1 text-gray-900 dark:text-gray-100">
                Performance Metric
              </h4>

              <p className="text-gray-600 dark:text-gray-400 leading-relaxed mb-6">
                Monitor open rates, click rates, conversions, and ROI
              </p>

              <a href="/metrics" className="inline-flex items-center text-primary font-semibold text-[15px] transition-all duration-200 hover:translate-x-1 group-hover:translate-x-1">
                View Metrics <span className="ml-1.5 transition-transform duration-200 group-hover:translate-x-0.5">
                →</span>
              </a>
            </div>

            <div className="group relative bg-white/70 dark:bg-black/10 backdrop-blur-xl border border-gray-200/60 dark:border-white/10 rounded-2xl p-6 transition-all duration-300 hover:-translate-y-1 hover:shadow-xl hover:shadow-black/10 dark:hover:shadow-black/20 hover:border-gray-300/70 dark:hover:border-white/15 opacity-90 dark:opacity-80 hover:opacity-100 overflow-hidden shadow-sm shadow-gray-200/50 dark:shadow-none">
              <div className="absolute top-0 left-0 right-0 h-1 bg-gradient-to-r from-primary to-primary/70 opacity-0 group-hover:opacity-100 transition-opacity duration-300" />

              <div className="w-12 h-12 bg-gradient-to-br from-primary/10 to-primary/5 dark:from-primary/15 dark:to-primary/8 rounded-xl flex items-center justify-center border border-primary/10 dark:border-primary/20 mb-4 mx-auto">
                <Icon icon="chart-pie-simple-circle-currency" color="#da1b5c" size={24} />
              </div>

              <h4 className="text-base font-semibold mb-1 text-gray-900 dark:text-gray-100">
                Custom Reports
              </h4>

              <p className="text-gray-600 dark:text-gray-400 leading-relaxed mb-6">
                Create custom dashboards and automated reporting
              </p>

              <a href="/reports" className="inline-flex items-center text-primary font-semibold text-[15px] transition-all duration-200 hover:translate-x-1 group-hover:translate-x-1">
                Build Reports <span className="ml-1.5 transition-transform duration-200 group-hover:translate-x-0.5">
                →</span>
              </a>
            </div>

            <div className="group relative bg-white/70 dark:bg-black/10 backdrop-blur-xl border border-gray-200/60 dark:border-white/10 rounded-2xl p-6 transition-all duration-300 hover:-translate-y-1 hover:shadow-xl hover:shadow-black/10 dark:hover:shadow-black/20 hover:border-gray-300/70 dark:hover:border-white/15 opacity-90 dark:opacity-80 hover:opacity-100 overflow-hidden shadow-sm shadow-gray-200/50 dark:shadow-none">
              <div className="absolute top-0 left-0 right-0 h-1 bg-gradient-to-r from-primary to-primary/70 opacity-0 group-hover:opacity-100 transition-opacity duration-300" />

              <div className="w-12 h-12 bg-gradient-to-br from-primary/10 to-primary/5 dark:from-primary/15 dark:to-primary/8 rounded-xl flex items-center justify-center border border-primary/10 dark:border-primary/20 mb-4 mx-auto">
                <Icon icon="eye" color="#da1b5c" size={24} />
              </div>

              <h4 className="text-base font-semibold mb-1 text-gray-900 dark:text-gray-100">
                Attribution
              </h4>

              <p className="text-gray-600 dark:text-gray-400 leading-relaxed mb-6">
                Track lead sources and campaign attribution across channels
              </p>

              <a href="/attribution" className="inline-flex items-center text-primary font-semibold text-[15px] transition-all duration-200 hover:translate-x-1 group-hover:translate-x-1">
                Setup Tracking <span className="ml-1.5 transition-transform duration-200 group-hover:translate-x-0.5">
                →</span>
              </a>
            </div>
          </div>
        </div>
      </Tab>
    </Tabs>
  </div>

  <div className="h-4 transition-all duration-700 ease-in-out" />

  <div className="w-full max-w-7xl mx-auto px-8 md:snap-start min-h-screen flex flex-col justify-center transition-all duration-700 ease-in-out">
    <h2 className="text-xl md:text-2xl font-semibold text-gray-900 dark:text-gray-100 text-center mb-6 tracking-tight">
      Explore Our Platform
    </h2>

    <Tabs>
      <Tab title="Getting Started">
        <div className="py-2">
          <h3 className="text-xl font-bold mb-2 text-gray-900 dark:text-gray-100 tracking-tight">
            Quick Setup Guide
          </h3>

          <p className="text-lg text-gray-600 dark:text-gray-400 leading-relaxed">
            Get your Promowise account up and running in minutes with our streamlined onboarding process.
          </p>

          <div className="grid grid-cols-1 lg:grid-cols-3 gap-4 mt-4">
            <div className="group relative bg-white/70 dark:bg-black/10 backdrop-blur-xl border border-gray-200/60 dark:border-white/10 rounded-2xl p-6 transition-all duration-300 hover:-translate-y-1 hover:shadow-xl hover:shadow-black/10 dark:hover:shadow-black/20 hover:border-gray-300/70 dark:hover:border-white/15 opacity-90 dark:opacity-80 hover:opacity-100 overflow-hidden shadow-sm shadow-gray-200/50 dark:shadow-none">
              <div className="w-12 h-12 bg-gradient-to-br from-primary/10 to-primary/5 dark:from-primary/15 dark:to-primary/8 rounded-xl flex items-center justify-center border border-primary/10 dark:border-primary/20 mb-4 mx-auto mx-auto">
                <Icon icon="user-plus" color="#da1b5c" size={24} />
              </div>

              <h4 className="text-base font-semibold mb-1 text-gray-900 dark:text-gray-100">
                Account Setup
              </h4>

              <p className="text-xs text-gray-600 dark:text-gray-400 leading-relaxed">
                Get your Promowise account up and running in minutes with our streamlined onboarding process.
              </p>

              <a href="/account-setup" className="inline-flex items-center text-primary font-semibold text-[15px] transition-all duration-200 hover:translate-x-1 group-hover:translate-x-1">
                Setup Guide <span className="ml-1.5 transition-transform duration-200 group-hover:translate-x-0.5">
                →</span>
              </a>
            </div>

            <div className="group relative bg-white/70 dark:bg-black/10 backdrop-blur-xl border border-gray-200/60 dark:border-white/10 rounded-2xl p-6 transition-all duration-300 hover:-translate-y-1 hover:shadow-xl hover:shadow-black/10 dark:hover:shadow-black/20 hover:border-gray-300/70 dark:hover:border-white/15 opacity-90 dark:opacity-80 hover:opacity-100 overflow-hidden shadow-sm shadow-gray-200/50 dark:shadow-none">
              <div className="w-12 h-12 bg-gradient-to-br from-primary/10 to-primary/5 dark:from-primary/15 dark:to-primary/8 rounded-xl flex items-center justify-center border border-primary/10 dark:border-primary/20 mb-4 mx-auto">
                <Icon icon="bullseye" color="#da1b5c" size={24} />
              </div>

              <h4 className="text-base font-semibold mb-1 text-gray-900 dark:text-gray-100">
                First Campaign
              </h4>

              <p className="text-xs text-gray-600 dark:text-gray-400 leading-relaxed">
                Launch your first lead generation campaign in under 5 minutes
              </p>

              <a href="/first-campaign" className="inline-flex items-center text-primary font-semibold text-[15px] transition-all duration-200 hover:translate-x-1 group-hover:translate-x-1">
                Create Campaign
              </a>
            </div>

            <div className="group relative bg-white/70 dark:bg-black/10 backdrop-blur-xl border border-gray-200/60 dark:border-white/10 rounded-2xl p-6 transition-all duration-300 hover:-translate-y-1 hover:shadow-xl hover:shadow-black/10 dark:hover:shadow-black/20 hover:border-gray-300/70 dark:hover:border-white/15 opacity-90 dark:opacity-80 hover:opacity-100 overflow-hidden shadow-sm shadow-gray-200/50 dark:shadow-none">
              <div className="w-12 h-12 bg-gradient-to-br from-primary/10 to-primary/5 dark:from-primary/15 dark:to-primary/8 rounded-xl flex items-center justify-center border border-primary/10 dark:border-primary/20 mb-4 mx-auto">
                <Icon icon="chart-line" color="#da1b5c" size={24} />
              </div>

              <h4 className="text-base font-semibold mb-1 text-gray-900 dark:text-gray-100">
                Track Results
              </h4>

              <p className="text-xs text-gray-600 dark:text-gray-400 leading-relaxed">
                Monitor your campaign performance with real-time analytics
              </p>

              <a href="/analytics" className="inline-flex items-center text-primary font-semibold text-[15px] transition-all duration-200 hover:translate-x-1 group-hover:translate-x-1">
                View Analytics
              </a>
            </div>
          </div>
        </div>
      </Tab>

      <Tab title="Lead Management">
        <div className="tab-content">
          <h3 className="text-xl font-semibold mb-3 text-gray-900 dark:text-gray-100">
            Comprehensive CRM
          </h3>

          <p className="text-lg text-gray-600 dark:text-gray-400 leading-relaxed">
            Capture, organize, and nurture leads with our intelligent automation platform.
          </p>

          <div className="grid grid-cols-1 lg:grid-cols-3 gap-4 mt-4">
            <div className="group relative bg-white/70 dark:bg-black/10 backdrop-blur-xl border border-gray-200/60 dark:border-white/10 rounded-2xl p-6 transition-all duration-300 hover:-translate-y-1 hover:shadow-xl hover:shadow-black/10 dark:hover:shadow-black/20 hover:border-gray-300/70 dark:hover:border-white/15 opacity-90 dark:opacity-80 hover:opacity-100 overflow-hidden shadow-sm shadow-gray-200/50 dark:shadow-none">
              <div className="w-12 h-12 bg-gradient-to-br from-primary/10 to-primary/5 dark:from-primary/15 dark:to-primary/8 rounded-xl flex items-center justify-center border border-primary/10 dark:border-primary/20 mb-4 mx-auto">
                <Icon icon="download" color="#da1b5c" size={24} />
              </div>

              <h4 className="text-base font-semibold mb-1 text-gray-900 dark:text-gray-100">
                Lead Capture
              </h4>

              <p className="text-xs text-gray-600 dark:text-gray-400 leading-relaxed">
                Automatically capture leads from forms, landing pages, and integrations
              </p>

              <a href="/lead-capture" className="inline-flex items-center text-primary font-semibold text-[15px] transition-all duration-200 hover:translate-x-1 group-hover:translate-x-1">
                Learn More
              </a>
            </div>

            <div className="group relative bg-white/70 dark:bg-black/10 backdrop-blur-xl border border-gray-200/60 dark:border-white/10 rounded-2xl p-6 transition-all duration-300 hover:-translate-y-1 hover:shadow-xl hover:shadow-black/10 dark:hover:shadow-black/20 hover:border-gray-300/70 dark:hover:border-white/15 opacity-90 dark:opacity-80 hover:opacity-100 overflow-hidden shadow-sm shadow-gray-200/50 dark:shadow-none">
              <div className="w-12 h-12 bg-gradient-to-br from-primary/10 to-primary/5 dark:from-primary/15 dark:to-primary/8 rounded-xl flex items-center justify-center border border-primary/10 dark:border-primary/20 mb-4 mx-auto">
                <Icon icon="diagram-project" color="#da1b5c" size={24} />
              </div>

              <h4 className="text-base font-semibold mb-1 text-gray-900 dark:text-gray-100">
                Automation
              </h4>

              <p className="text-xs text-gray-600 dark:text-gray-400 leading-relaxed">
                Set up automated workflows to nurture leads through your sales funnel
              </p>

              <a href="/automation" className="inline-flex items-center text-primary font-semibold text-[15px] transition-all duration-200 hover:translate-x-1 group-hover:translate-x-1">
                Build Workflows
              </a>
            </div>

            <div className="group relative bg-white/70 dark:bg-black/10 backdrop-blur-xl border border-gray-200/60 dark:border-white/10 rounded-2xl p-6 transition-all duration-300 hover:-translate-y-1 hover:shadow-xl hover:shadow-black/10 dark:hover:shadow-black/20 hover:border-gray-300/70 dark:hover:border-white/15 opacity-90 dark:opacity-80 hover:opacity-100 overflow-hidden shadow-sm shadow-gray-200/50 dark:shadow-none">
              <div className="w-12 h-12 bg-gradient-to-br from-primary/10 to-primary/5 dark:from-primary/15 dark:to-primary/8 rounded-xl flex items-center justify-center border border-primary/10 dark:border-primary/20 mb-4 mx-auto">
                <Icon icon="tags" color="#da1b5c" size={24} />
              </div>

              <h4 className="text-base font-semibold mb-1 text-gray-900 dark:text-gray-100">
                Lead Scoring
              </h4>

              <p className="text-xs text-gray-600 dark:text-gray-400 leading-relaxed">
                Prioritize your hottest leads with intelligent scoring algorithms
              </p>

              <a href="/lead-scoring" className="inline-flex items-center text-primary font-semibold text-[15px] transition-all duration-200 hover:translate-x-1 group-hover:translate-x-1">
                Setup Scoring
              </a>
            </div>
          </div>
        </div>
      </Tab>

      <Tab title="Campaigns">
        <div className="tab-content">
          <h3 className="text-xl font-semibold mb-3 text-gray-900 dark:text-gray-100">
            Email Marketing Made Simple
          </h3>

          <p className="text-lg text-gray-600 dark:text-gray-400 leading-relaxed">
            Create beautiful, responsive email campaigns with our drag-and-drop builder.
          </p>

          <div className="grid grid-cols-1 lg:grid-cols-3 gap-4 mt-4">
            <div className="group relative bg-white/70 dark:bg-black/10 backdrop-blur-xl border border-gray-200/60 dark:border-white/10 rounded-2xl p-6 transition-all duration-300 hover:-translate-y-1 hover:shadow-xl hover:shadow-black/10 dark:hover:shadow-black/20 hover:border-gray-300/70 dark:hover:border-white/15 opacity-90 dark:opacity-80 hover:opacity-100 overflow-hidden shadow-sm shadow-gray-200/50 dark:shadow-none">
              <div className="w-12 h-12 bg-gradient-to-br from-primary/10 to-primary/5 dark:from-primary/15 dark:to-primary/8 rounded-xl flex items-center justify-center border border-primary/10 dark:border-primary/20 mb-4 mx-auto">
                <Icon icon="palette" color="#da1b5c" size={24} />
              </div>

              <h4 className="text-base font-semibold mb-1 text-gray-900 dark:text-gray-100">
                Template Library
              </h4>

              <p className="text-xs text-gray-600 dark:text-gray-400 leading-relaxed">
                Choose from hundreds of professionally designed email templates
              </p>

              <a href="/templates" className="inline-flex items-center text-primary font-semibold text-[15px] transition-all duration-200 hover:translate-x-1 group-hover:translate-x-1">
                Browse Templates
              </a>
            </div>

            <div className="group relative bg-white/70 dark:bg-black/10 backdrop-blur-xl border border-gray-200/60 dark:border-white/10 rounded-2xl p-6 transition-all duration-300 hover:-translate-y-1 hover:shadow-xl hover:shadow-black/10 dark:hover:shadow-black/20 hover:border-gray-300/70 dark:hover:border-white/15 opacity-90 dark:opacity-80 hover:opacity-100 overflow-hidden shadow-sm shadow-gray-200/50 dark:shadow-none">
              <div className="w-12 h-12 bg-gradient-to-br from-primary/10 to-primary/5 dark:from-primary/15 dark:to-primary/8 rounded-xl flex items-center justify-center border border-primary/10 dark:border-primary/20 mb-4 mx-auto">
                <Icon icon="split" color="#da1b5c" size={24} />
              </div>

              <h4 className="text-base font-semibold mb-1 text-gray-900 dark:text-gray-100">
                A/B Testing
              </h4>

              <p className="text-xs text-gray-600 dark:text-gray-400 leading-relaxed">
                Optimize your campaigns with built-in split testing capabilities
              </p>

              <a href="/ab-testing" className="inline-flex items-center text-primary font-semibold text-[15px] transition-all duration-200 hover:translate-x-1 group-hover:translate-x-1">
                Start Testing
              </a>
            </div>

            <div className="group relative bg-white/70 dark:bg-black/10 backdrop-blur-xl border border-gray-200/60 dark:border-white/10 rounded-2xl p-6 transition-all duration-300 hover:-translate-y-1 hover:shadow-xl hover:shadow-black/10 dark:hover:shadow-black/20 hover:border-gray-300/70 dark:hover:border-white/15 opacity-90 dark:opacity-80 hover:opacity-100 overflow-hidden shadow-sm shadow-gray-200/50 dark:shadow-none">
              <div className="w-12 h-12 bg-gradient-to-br from-primary/10 to-primary/5 dark:from-primary/15 dark:to-primary/8 rounded-xl flex items-center justify-center border border-primary/10 dark:border-primary/20 mb-4 mx-auto">
                <Icon icon="clock" color="#da1b5c" size={24} />
              </div>

              <h4 className="text-base font-semibold mb-1 text-gray-900 dark:text-gray-100">
                Scheduling
              </h4>

              <p className="text-xs text-gray-600 dark:text-gray-400 leading-relaxed">
                Schedule campaigns and set up automated drip sequences
              </p>

              <a href="/scheduling" className="inline-flex items-center text-primary font-semibold text-[15px] transition-all duration-200 hover:translate-x-1 group-hover:translate-x-1">
                Schedule Campaigns
              </a>
            </div>
          </div>
        </div>
      </Tab>

      <Tab title="API Reference">
        <div className="tab-content">
          <h3 className="text-xl font-semibold mb-3 text-gray-900 dark:text-gray-100">
            Developer Resources
          </h3>

          <p className="text-lg text-gray-600 dark:text-gray-400 leading-relaxed">
            Integrate Promowise with your existing systems using our comprehensive REST API.
          </p>

          <div className="grid grid-cols-1 lg:grid-cols-3 gap-4 mt-4">
            <div className="group relative bg-white/70 dark:bg-black/10 backdrop-blur-xl border border-gray-200/60 dark:border-white/10 rounded-2xl p-6 transition-all duration-300 hover:-translate-y-1 hover:shadow-xl hover:shadow-black/10 dark:hover:shadow-black/20 hover:border-gray-300/70 dark:hover:border-white/15 opacity-90 dark:opacity-80 hover:opacity-100 overflow-hidden shadow-sm shadow-gray-200/50 dark:shadow-none">
              <div className="w-12 h-12 bg-gradient-to-br from-primary/10 to-primary/5 dark:from-primary/15 dark:to-primary/8 rounded-xl flex items-center justify-center border border-primary/10 dark:border-primary/20 mb-4 mx-auto">
                <Icon icon="book" color="#da1b5c" size={24} />
              </div>

              <h4 className="text-base font-semibold mb-1 text-gray-900 dark:text-gray-100">
                API Documentation
              </h4>

              <p className="text-xs text-gray-600 dark:text-gray-400 leading-relaxed">
                Complete reference for all API endpoints and authentication methods
              </p>

              <a href="/api-reference" className="inline-flex items-center text-primary font-semibold text-[15px] transition-all duration-200 hover:translate-x-1 group-hover:translate-x-1">
                View Docs
              </a>
            </div>

            <div className="group relative bg-white/70 dark:bg-black/10 backdrop-blur-xl border border-gray-200/60 dark:border-white/10 rounded-2xl p-6 transition-all duration-300 hover:-translate-y-1 hover:shadow-xl hover:shadow-black/10 dark:hover:shadow-black/20 hover:border-gray-300/70 dark:hover:border-white/15 opacity-90 dark:opacity-80 hover:opacity-100 overflow-hidden shadow-sm shadow-gray-200/50 dark:shadow-none">
              <div className="w-12 h-12 bg-gradient-to-br from-primary/10 to-primary/5 dark:from-primary/15 dark:to-primary/8 rounded-xl flex items-center justify-center border border-primary/10 dark:border-primary/20 mb-4 mx-auto">
                <Icon icon="webhook" color="#da1b5c" size={24} />
              </div>

              <h4 className="text-base font-semibold mb-1 text-gray-900 dark:text-gray-100">
                Webhooks
              </h4>

              <p className="text-xs text-gray-600 dark:text-gray-400 leading-relaxed">
                Receive real-time notifications about leads, campaigns, and events
              </p>

              <a href="/webhooks" className="inline-flex items-center text-primary font-semibold text-[15px] transition-all duration-200 hover:translate-x-1 group-hover:translate-x-1">
                Setup Webhooks
              </a>
            </div>

            <div className="group relative bg-white/70 dark:bg-black/10 backdrop-blur-xl border border-gray-200/60 dark:border-white/10 rounded-2xl p-6 transition-all duration-300 hover:-translate-y-1 hover:shadow-xl hover:shadow-black/10 dark:hover:shadow-black/20 hover:border-gray-300/70 dark:hover:border-white/15 opacity-90 dark:opacity-80 hover:opacity-100 overflow-hidden shadow-sm shadow-gray-200/50 dark:shadow-none">
              <div className="w-12 h-12 bg-gradient-to-br from-primary/10 to-primary/5 dark:from-primary/15 dark:to-primary/8 rounded-xl flex items-center justify-center border border-primary/10 dark:border-primary/20 mb-4 mx-auto">
                <Icon icon="code-merge" color="#da1b5c" size={24} />
              </div>

              <h4 className="text-base font-semibold mb-1 text-gray-900 dark:text-gray-100">
                SDKs
              </h4>

              <p className="text-xs text-gray-600 dark:text-gray-400 leading-relaxed">
                Official libraries for JavaScript, Python, PHP, and more
              </p>

              <a href="/sdks" className="inline-flex items-center text-primary font-semibold text-[15px] transition-all duration-200 hover:translate-x-1 group-hover:translate-x-1">
                Download SDKs
              </a>
            </div>
          </div>
        </div>
      </Tab>

      <Tab title="Integrations">
        <div className="tab-content">
          <h3 className="text-xl font-semibold mb-3 text-gray-900 dark:text-gray-100">
            Connect Everything
          </h3>

          <p className="text-lg text-gray-600 dark:text-gray-400 leading-relaxed">
            Seamlessly integrate with your favorite tools and platforms.
          </p>

          <div className="grid grid-cols-1 lg:grid-cols-3 gap-4 mt-4">
            <div className="group relative bg-white/70 dark:bg-black/10 backdrop-blur-xl border border-gray-200/60 dark:border-white/10 rounded-2xl p-6 transition-all duration-300 hover:-translate-y-1 hover:shadow-xl hover:shadow-black/10 dark:hover:shadow-black/20 hover:border-gray-300/70 dark:hover:border-white/15 opacity-90 dark:opacity-80 hover:opacity-100 overflow-hidden shadow-sm shadow-gray-200/50 dark:shadow-none">
              <div className="w-12 h-12 bg-gradient-to-br from-primary/10 to-primary/5 dark:from-primary/15 dark:to-primary/8 rounded-xl flex items-center justify-center border border-primary/10 dark:border-primary/20 mb-4 mx-auto">
                <Icon icon="database" color="#da1b5c" size={24} />
              </div>

              <h4 className="text-base font-semibold mb-1 text-gray-900 dark:text-gray-100">
                CRM Integration
              </h4>

              <p className="text-xs text-gray-600 dark:text-gray-400 leading-relaxed">
                Sync with HubSpot, Salesforce, Pipedrive, and more
              </p>

              <a href="/crm-integrations" className="inline-flex items-center text-primary font-semibold text-[15px] transition-all duration-200 hover:translate-x-1 group-hover:translate-x-1">
                Connect CRM
              </a>
            </div>

            <div className="group relative bg-white/70 dark:bg-black/10 backdrop-blur-xl border border-gray-200/60 dark:border-white/10 rounded-2xl p-6 transition-all duration-300 hover:-translate-y-1 hover:shadow-xl hover:shadow-black/10 dark:hover:shadow-black/20 hover:border-gray-300/70 dark:hover:border-white/15 opacity-90 dark:opacity-80 hover:opacity-100 overflow-hidden shadow-sm shadow-gray-200/50 dark:shadow-none">
              <div className="w-12 h-12 bg-gradient-to-br from-primary/10 to-primary/5 dark:from-primary/15 dark:to-primary/8 rounded-xl flex items-center justify-center border border-primary/10 dark:border-primary/20 mb-4 mx-auto">
                <Icon icon="bolt-auto" color="#da1b5c" size={24} />
              </div>

              <h4 className="text-base font-semibold mb-1 text-gray-900 dark:text-gray-100">
                Zapier
              </h4>

              <p className="text-xs text-gray-600 dark:text-gray-400 leading-relaxed">
                Connect to thousands of apps through our Zapier integration
              </p>

              <a href="/zapier" className="inline-flex items-center text-primary font-semibold text-[15px] transition-all duration-200 hover:translate-x-1 group-hover:translate-x-1">
                Setup Zapier
              </a>
            </div>
          </div>
        </div>
      </Tab>

      <Tab title="Analytics">
        <div className="tab-content">
          <h3 className="text-xl font-semibold mb-3 text-gray-900 dark:text-gray-100">
            Data-Driven Insights
          </h3>

          <p className="text-lg text-gray-600 dark:text-gray-400 leading-relaxed">
            Track performance and make data-driven decisions with comprehensive analytics.
          </p>

          <div className="grid grid-cols-1 lg:grid-cols-3 gap-4 mt-4">
            <div className="group relative bg-white/70 dark:bg-black/10 backdrop-blur-xl border border-gray-200/60 dark:border-white/10 rounded-2xl p-6 transition-all duration-300 hover:-translate-y-1 hover:shadow-xl hover:shadow-black/10 dark:hover:shadow-black/20 hover:border-gray-300/70 dark:hover:border-white/15 opacity-90 dark:opacity-80 hover:opacity-100 overflow-hidden shadow-sm shadow-gray-200/50 dark:shadow-none">
              <div className="w-12 h-12 bg-gradient-to-br from-primary/10 to-primary/5 dark:from-primary/15 dark:to-primary/8 rounded-xl flex items-center justify-center border border-primary/10 dark:border-primary/20 mb-4 mx-auto">
                <Icon icon="chart-mixed" color="#da1b5c" size={24} />
              </div>

              <h4 className="text-base font-semibold mb-1 text-gray-900 dark:text-gray-100">
                Performance Metrics
              </h4>

              <p className="text-xs text-gray-600 dark:text-gray-400 leading-relaxed">
                Monitor open rates, click rates, conversions, and ROI
              </p>

              <a href="/metrics" className="inline-flex items-center text-primary font-semibold text-[15px] transition-all duration-200 hover:translate-x-1 group-hover:translate-x-1">
                View Metrics
              </a>
            </div>

            <div className="group relative bg-white/70 dark:bg-black/10 backdrop-blur-xl border border-gray-200/60 dark:border-white/10 rounded-2xl p-6 transition-all duration-300 hover:-translate-y-1 hover:shadow-xl hover:shadow-black/10 dark:hover:shadow-black/20 hover:border-gray-300/70 dark:hover:border-white/15 opacity-90 dark:opacity-80 hover:opacity-100 overflow-hidden shadow-sm shadow-gray-200/50 dark:shadow-none">
              <div className="w-12 h-12 bg-gradient-to-br from-primary/10 to-primary/5 dark:from-primary/15 dark:to-primary/8 rounded-xl flex items-center justify-center border border-primary/10 dark:border-primary/20 mb-4 mx-auto">
                <Icon icon="chart-pie-simple-circle-currency" color="#da1b5c" size={24} />
              </div>

              <h4 className="text-base font-semibold mb-1 text-gray-900 dark:text-gray-100">
                Custom Reports
              </h4>

              <p className="text-xs text-gray-600 dark:text-gray-400 leading-relaxed">
                Create custom dashboards and automated reporting
              </p>

              <a href="/reports" className="inline-flex items-center text-primary font-semibold text-[15px] transition-all duration-200 hover:translate-x-1 group-hover:translate-x-1">
                Build Reports
              </a>
            </div>

            <div className="group relative bg-white/70 dark:bg-black/10 backdrop-blur-xl border border-gray-200/60 dark:border-white/10 rounded-2xl p-6 transition-all duration-300 hover:-translate-y-1 hover:shadow-xl hover:shadow-black/10 dark:hover:shadow-black/20 hover:border-gray-300/70 dark:hover:border-white/15 opacity-90 dark:opacity-80 hover:opacity-100 overflow-hidden shadow-sm shadow-gray-200/50 dark:shadow-none">
              <div className="w-12 h-12 bg-gradient-to-br from-primary/10 to-primary/5 dark:from-primary/15 dark:to-primary/8 rounded-xl flex items-center justify-center border border-primary/10 dark:border-primary/20 mb-4 mx-auto">
                <Icon icon="eye" color="#da1b5c" size={24} />
              </div>

              <h4 className="text-base font-semibold mb-1 text-gray-900 dark:text-gray-100">
                Attribution
              </h4>

              <p className="text-xs text-gray-600 dark:text-gray-400 leading-relaxed">
                Track lead sources and campaign attribution across channels
              </p>

              <a href="/attribution" className="inline-flex items-center text-primary font-semibold text-[15px] transition-all duration-200 hover:translate-x-1 group-hover:translate-x-1">
                Setup Tracking
              </a>
            </div>
          </div>
        </div>
      </Tab>
    </Tabs>
  </div>

  <div className="h-16 transition-all duration-700 ease-in-out" />

  <div className="text-center w-full max-w-5xl mx-auto px-8 min-h-screen flex flex-col justify-center transition-all duration-700 ease-in-out">
    <h2 className="text-3xl md:text-4xl font-semibold text-gray-900 dark:text-gray-100 mb-4">
      Join the fastest growing Partner Network in B2B
    </h2>

    <p className="text-lg text-gray-600 dark:text-gray-400 leading-relaxed mb-10">
      Spread your knowledge, and help drive business for the greatest products and
      companies across the world.
    </p>

    <div className="grid grid-cols-2 md:grid-cols-3 gap-4 max-w-2xl mx-auto">
      <a href="https://promowise.com/discord" className="flex flex-col items-center justify-center p-4 bg-white/80 dark:bg-white/10 backdrop-blur-sm border border-gray-200 dark:border-gray-700 rounded-xl hover:bg-white/95 dark:hover:bg-white/15 hover:border-gray-300 dark:hover:border-gray-600 transition-all duration-200 hover:-translate-y-0.5 no-underline" target="_blank" rel="noopener noreferrer">
        <Icon icon="discord" color="#5865F2" />

        <span className="text-sm font-medium text-gray-700 dark:text-gray-200">
          Discord
        </span>
      </a>

      <a href="https://twitter.com/PromoWise" className="flex flex-col items-center justify-center p-4 bg-white/80 dark:bg-white/10 backdrop-blur-sm border border-gray-200 dark:border-gray-700 rounded-xl hover:bg-white/95 dark:hover:bg-white/15 hover:border-gray-300 dark:hover:border-gray-600 transition-all duration-200 hover:-translate-y-0.5 no-underline" target="_blank" rel="noopener noreferrer">
        <Icon icon="x-twitter" color="#1DA1F2" />

        <span className="text-sm font-medium text-gray-700 dark:text-gray-200">
          Twitter
        </span>
      </a>

      <a href="https://linkedin.com/company/promowise" className="flex flex-col items-center justify-center p-4 bg-white/80 dark:bg-white/10 backdrop-blur-sm border border-gray-200 dark:border-gray-700 rounded-xl hover:bg-white/95 dark:hover:bg-white/15 hover:border-gray-300 dark:hover:border-gray-600 transition-all duration-200 hover:-translate-y-0.5 no-underline" target="_blank" rel="noopener noreferrer">
        <Icon icon="linkedin" color="#0077B5" />

        <span className="text-sm font-medium text-gray-700 dark:text-gray-200">
          LinkedIn
        </span>
      </a>

      <a href="/support" className="flex flex-col items-center justify-center p-4 bg-white/80 dark:bg-white/10 backdrop-blur-sm border border-gray-200 dark:border-gray-700 rounded-xl hover:bg-white/95 dark:hover:bg-white/15 hover:border-gray-300 dark:hover:border-gray-600 transition-all duration-200 hover:-translate-y-0.5 no-underline" target="_blank" rel="noopener noreferrer">
        <Icon icon="headset" color="#6B7280" />

        <span className="text-sm font-medium text-gray-700 dark:text-gray-200">
          Support
        </span>
      </a>

      <a href="/community" className="md:col-span-1 flex flex-col items-center justify-center p-4 bg-white/80 dark:bg-white/10 backdrop-blur-sm border border-gray-200 dark:border-gray-700 rounded-xl hover:bg-white/95 dark:hover:bg-white/15 hover:border-gray-300 dark:hover:border-gray-600 transition-all duration-200 hover:-translate-y-0.5 no-underline" target="_blank" rel="noopener noreferrer">
        <Icon icon="users" color="#6B7280" />

        <span className="text-sm font-medium text-gray-700 dark:text-gray-200">
          Community
        </span>
      </a>
    </div>
  </div>

  <div className="h-16 transition-all duration-700 ease-in-out" />

  <div className="text-center w-full max-w-5xl mx-auto px-8 min-h-screen flex flex-col justify-center transition-all duration-700 ease-in-out">
    <h2 className="text-3xl md:text-4xl font-semibold text-gray-900 dark:text-gray-100 mb-6">
      Ready to transform your lead generation?
    </h2>

    <div className="flex flex-col sm:flex-row gap-4 justify-center items-center mb-4">
      <a href="/getting-started" className="inline-flex items-center justify-center px-6 py-3 rounded-xl font-semibold transition-all duration-200 bg-primary text-white shadow-lg shadow-primary/25 hover:shadow-xl hover:shadow-primary/35 hover:-translate-y-0.5 active:scale-95 min-w-40">
        Start Free Trial
      </a>

      <a href="/demo" className="inline-flex items-center justify-center px-6 py-3 rounded-xl font-semibold transition-all duration-200 bg-white/80 dark:bg-black/10 text-gray-700 dark:text-gray-200 border border-gray-200/60 dark:border-gray-700 backdrop-blur-sm hover:bg-white/95 dark:hover:bg-black/15 hover:border-gray-300/70 dark:hover:border-gray-600 hover:-translate-y-0.5 active:scale-95 min-w-40 opacity-90 dark:opacity-80 hover:opacity-100 shadow-sm shadow-gray-200/40 dark:shadow-none">
        Book a Demo
      </a>
    </div>

    <p className="text-gray-600 dark:text-gray-400">
      Questions?

      <a href="/support" className="text-primary hover:text-primary/80 underline">
        Contact our support team
      </a>
    </p>
  </div>
</div>