w-312356-main/src/components/MissionBlock.tsx

import React from 'react';

const MissionBlock = () => (
  <section className="section-padding bg-gradient-to-r from-brand to-blue-400 text-white relative overflow-hidden">
    <div className="absolute inset-0 pointer-events-none" style={{ background: 'url(/wave.svg) repeat-x bottom' }} />
    <div className="container mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
      <div className="max-w-3xl mx-auto text-center py-12">
        <h2 className="text-4xl font-bold mb-6">Our Mission</h2>
        <p className="text-xl font-semibold mb-4">Advancing Health Equity for Everyone</p>
        <p className="text-lg">
          We aim to end the cycle of misdiagnosis and lack of access by transforming personalized health security for underrepresented, underserved, and neglected communities.
        </p>
      </div>
    </div>
  </section>
);

export default MissionBlock;