Queue-North-Website/src/pages/8x8.jsx

const EightXEight = () => {
  return (
    <div className="container mx-auto px-4 py-16 md:py-24">
      {/* Page Hero */}
      <section className="mb-16">
        <h1 className="text-4xl md:text-5xl font-bold text-primary-navy mb-6">8x8 Certified Partner</h1>
        <p className="text-xl text-soft-text max-w-3xl">
          As an 8x8 Certified Partner, we help organizations implement and manage cloud communications solutions that drive business success.
        </p>
      </section>

      {/* About 8x8 */}
      <section className="grid grid-cols-1 lg:grid-cols-2 gap-12 mb-16">
        <div>
          <h2 className="text-3xl font-bold text-primary-navy mb-4">What is 8x8?</h2>
          <p className="text-lg text-soft-text mb-6 leading-relaxed">
            8x8 is a leading provider of cloud communications and contact center solutions. Their platform combines voice, video, chat, email, and contact center capabilities into a single, unified solution that helps businesses communicate more effectively and serve customers better.
          </p>
          <p className="text-lg text-soft-text leading-relaxed">
            As a certified partner, we have deep expertise in implementing and supporting 8x8 solutions, ensuring our customers get the most value from their investment.
          </p>
        </div>
        <div>
          <div className="rounded-xl overflow-hidden shadow-lg">
            <img 
              src="/assets/8x8_Logo_White.svg" 
              alt="8x8 Logo" 
              className="w-full h-full object-cover"
            />
          </div>
        </div>
      </section>

      {/* Our Expertise */}
      <section className="mb-16">
        <h2 className="text-3xl font-bold text-primary-navy mb-8 text-center">8x8 Expertise</h2>
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
          {[
            'VoIP Implementation',
            'Cloud PBX Migration',
            'Contact Center Setup',
            'Unified Communications',
            'Video Conferencing',
            'Collaboration Tools',
            'System Integration',
            'Ongoing Support',
          ].map((expertise, index) => (
            <div key={index} className="flex items-center gap-2 p-3 rounded-lg border border-border bg-card">
              <div className="h-5 w-5 rounded-full bg-primary-navy text-white flex items-center justify-center flex-shrink-0">
                <svg className="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7" />
                </svg>
              </div>
              <span className="text-sm font-medium text-text">{expertise}</span>
            </div>
          ))}
        </div>
      </section>

      {/* Benefits */}
      <section className="mb-16">
        <h2 className="text-3xl font-bold text-primary-navy mb-8 text-center">Why Choose 8x8</h2>
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          {[
            { title: 'Scalability', desc: 'Easily scale your communications as your business grows' },
            { title: 'Reliability', desc: '99.999% uptime guarantee for mission-critical communications' },
            { title: 'Integration', desc: 'Seamlessly integrate with your favorite business applications' },
            { title: 'Mobility', desc: 'Full-featured mobile apps for remote and traveling employees' },
            { title: 'Analytics', desc: 'Real-time insights and reporting to optimize performance' },
            { title: 'Support', desc: '24/7 expert support to keep your communications running' },
          ].map((benefit, index) => (
            <div key={index} className="p-6 rounded-lg border border-border bg-card shadow-sm hover:shadow-md transition-shadow">
              <h3 className="text-xl font-semibold text-primary-navy mb-3">{benefit.title}</h3>
              <p className="text-soft-text">{benefit.desc}</p>
            </div>
          ))}
        </div>
      </section>

      {/* CTA */}
      <section className="bg-section-alt rounded-xl p-8 md:p-12 text-center">
        <h2 className="text-3xl md:text-4xl font-bold text-primary-navy mb-6">Ready to Explore 8x8 Solutions?</h2>
        <p className="text-xl text-soft-text mb-8 max-w-2xl mx-auto">
          Schedule a free consultation with our 8x8 certified experts.
        </p>
        <a
          href="/contact"
          className="inline-block bg-primary-navy text-white px-8 py-3 rounded-md font-bold text-lg hover:bg-primary-navy-dark transition-colors"
        >
          Request Consultation
        </a>
      </section>
    </div>
  )
}

export default EightXEight