Mission Blocks

<!-- Classic Mission Statement -->
<div class="mission-classic">
  <h2>Our Mission</h2>
  <p>
    To empower individuals and organizations through innovative solutions that create lasting value, 
    foster sustainable growth, and make a positive impact on our global community.
  </p>
  <div class="mission-stats">
    <div class="stat">
      <div class="stat-number">15+</div>
      <div class="stat-label">Years Experience</div>
    </div>
    <div class="stat">
      <div class="stat-number">500+</div>
      <div class="stat-label">Projects Completed</div>
    </div>
    <div class="stat">
      <div class="stat-number">98%</div>
      <div class="stat-label">Client Satisfaction</div>
    </div>
  </div>
</div>

<style>
.mission-classic {
  text-align: center;
  padding: 40px 30px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border-radius: 10px;
  max-width: 1000px;
  margin: 0 auto;
}

.mission-classic h2 {
  font-size: 2.2rem;
  margin-bottom: 15px;
}

.mission-classic p {
  font-size: 1.3rem;
  line-height: 1.6;
  max-width: 800px;
  margin: 0 auto 30px;
}

.mission-stats {
  display: flex;
  justify-content: center;
  gap: 30px;
  flex-wrap: wrap;
}

.stat {
  text-align: center;
}

.stat-number {
  font-size: 2rem;
  font-weight: bold;
  margin-bottom: 5px;
}

.stat-label {
  font-size: 1rem;
}

@media (max-width: 768px) {
  .mission-stats {
    gap: 20px;
  }
  
  .stat-number {
    font-size: 1.7rem;
  }
}
</style>

<script>
// Add any interactive functionality here if needed
console.log('Classic Mission Block Loaded');
</script>

<!-- Modern Mission Cards -->
<div class="mission-cards">
  <div class="mission-card vision">
    <div class="card-icon">
      <i class="fas fa-eye"></i>
    </div>
    <h3>Our Vision</h3>
    <p>
      To be the global leader in innovative solutions that transform industries and improve lives.
    </p>
  </div>
  
  <div class="mission-card mission">
    <div class="card-icon">
      <i class="fas fa-bullseye"></i>
    </div>
    <h3>Our Mission</h3>
    <p>
      To deliver exceptional value through cutting-edge solutions, unwavering integrity, and passionate service.
    </p>
  </div>
  
  <div class="mission-card values">
    <div class="card-icon">
      <i class="fas fa-heart"></i>
    </div>
    <h3>Our Values</h3>
    <p>
      Integrity, innovation, collaboration, and customer-centricity guide everything we do.
    </p>
  </div>
</div>

<style>
.mission-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 25px;
  max-width: 1200px;
  margin: 0 auto;
}

.mission-card {
  background: white;
  border-radius: 10px;
  padding: 25px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.mission-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

.vision {
  border-top: 4px solid #ff6b6b;
}

.mission {
  border-top: 4px solid #4ecdc4;
}

.values {
  border-top: 4px solid #45b7d1;
}

.card-icon {
  font-size: 2.5rem;
  margin-bottom: 15px;
}

.vision .card-icon {
  color: #ff6b6b;
}

.mission .card-icon {
  color: #4ecdc4;
}

.values .card-icon {
  color: #45b7d1;
}

.mission-card h3 {
  color: #2c3e50;
  margin-bottom: 15px;
  font-size: 1.5rem;
}

.mission-card p {
  color: #7f8c8d;
  line-height: 1.6;
}

@media (max-width: 768px) {
  .mission-cards {
    grid-template-columns: 1fr;
  }
}
</style>

<script>
// Add any interactive functionality here if needed
document.addEventListener('DOMContentLoaded', function() {
  const cards = document.querySelectorAll('.mission-card');
  
  cards.forEach(card => {
    card.addEventListener('mouseenter', function() {
      this.style.transform = 'translateY(-5px)';
    });
    
    card.addEventListener('mouseleave', function() {
      this.style.transform = 'translateY(0)';
    });
  });
});
</script>

<!-- Mission Timeline -->
<div class="mission-timeline">
  <div class="timeline-line"></div>
  
  <div class="timeline-item">
    <div class="timeline-dot dot-1"></div>
    <h4>Founded in 2010</h4>
    <p>Started with a vision to revolutionize the industry with innovative solutions.</p>
  </div>
  
  <div class="timeline-item">
    <div class="timeline-dot dot-2"></div>
    <h4>Global Expansion (2015)</h4>
    <p>Expanded operations to three continents, serving clients worldwide.</p>
  </div>
  
  <div class="timeline-item">
    <div class="timeline-dot dot-3"></div>
    <h4>Industry Recognition (2020)</h4>
    <p>Received multiple awards for innovation and customer satisfaction.</p>
  </div>
  
  <div class="timeline-item">
    <div class="timeline-dot dot-4"></div>
    <h4>Future Vision (2025+)</h4>
    <p>Expanding into new markets with sustainable and AI-driven solutions.</p>
  </div>
</div>

<style>
.mission-timeline {
  max-width: 800px;
  margin: 0 auto;
  position: relative;
  padding: 20px 0;
}

.timeline-line {
  position: absolute;
  left: 30px;
  top: 0;
  bottom: 0;
  width: 4px;
  background: #ff6b6b;
  border-radius: 2px;
}

.timeline-item {
  position: relative;
  margin-bottom: 40px;
  padding-left: 70px;
}

.timeline-dot {
  position: absolute;
  left: 20px;
  top: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 4px solid white;
  box-shadow: 0 0 0 3px #ff6b6b;
}

.dot-1 {
  background: #ff6b6b;
  box-shadow: 0 0 0 3px #ff6b6b;
}

.dot-2 {
  background: #4ecdc4;
  box-shadow: 0 0 0 3px #4ecdc4;
}

.dot-3 {
  background: #45b7d1;
  box-shadow: 0 0 0 3px #45b7d1;
}

.dot-4 {
  background: #96ceb4;
  box-shadow: 0 0 0 3px #96ceb4;
}

.timeline-item h4 {
  color: #2c3e50;
  margin-bottom: 10px;
  font-size: 1.2rem;
}

.timeline-item p {
  color: #7f8c8d;
  line-height: 1.6;
}

@media (max-width: 768px) {
  .mission-timeline {
    padding-left: 20px;
  }
  
  .timeline-line {
    left: 20px;
  }
  
  .timeline-item {
    padding-left: 50px;
  }
  
  .timeline-dot {
    left: 10px;
  }
}
</style>

<script>
// Animation for timeline items
document.addEventListener('DOMContentLoaded', function() {
  const timelineItems = document.querySelectorAll('.timeline-item');
  
  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        entry.target.style.opacity = '1';
        entry.target.style.transform = 'translateX(0)';
      }
    });
  }, { threshold: 0.1 });
  
  timelineItems.forEach(item => {
    item.style.opacity = '0';
    item.style.transform = 'translateX(-20px)';
    item.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
    observer.observe(item);
  });
});
</script>

<!-- Minimalist Mission -->
<div class="mission-minimalist">
  <div class="minimalist-content">
    <h2>Our Purpose</h2>
    <p>
      To create meaningful impact through simplicity, clarity, and purpose-driven solutions.
    </p>
    <button class="cta-button">Learn More About Us</button>
  </div>
</div>

<style>
.mission-minimalist {
  text-align: center;
  padding: 50px 30px;
  background: #f8f9fa;
  border-radius: 10px;
  border-left: 5px solid #ff6b6b;
  max-width: 1000px;
  margin: 0 auto;
}

.minimalist-content {
  max-width: 700px;
  margin: 0 auto;
}

.mission-minimalist h2 {
  color: #2c3e50;
  margin-bottom: 20px;
  font-size: 2rem;
}

.mission-minimalist p {
  color: #7f8c8d;
  font-size: 1.4rem;
  line-height: 1.6;
  margin-bottom: 30px;
}

.cta-button {
  display: inline-block;
  padding: 12px 30px;
  background: #ff6b6b;
  color: white;
  border: none;
  border-radius: 30px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.3s ease, transform 0.2s ease;
}

.cta-button:hover {
  background: #ff5252;
  transform: translateY(-2px);
}

@media (max-width: 768px) {
  .mission-minimalist {
    padding: 40px 20px;
  }
  
  .mission-minimalist h2 {
    font-size: 1.7rem;
  }
  
  .mission-minimalist p {
    font-size: 1.2rem;
  }
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
  const ctaButton = document.querySelector('.cta-button');
  
  ctaButton.addEventListener('click', function() {
    alert('Redirecting to about page...');
    // In a real application, you would redirect to the about page
    // window.location.href = '/about';
  });
});
</script>

<!-- Interactive Mission -->
<div class="mission-interactive">
  <h2>Our Commitment</h2>
  
  <div class="interactive-container">
    <div class="interactive-item" data-title="People First" data-text="We believe that our team members and customers are our greatest assets. We invest in their growth, listen to their needs, and create an environment where everyone can thrive and succeed together.">
      <div class="item-icon">
        <i class="fas fa-users"></i>
      </div>
      <h4>People First</h4>
      <p>We prioritize our team and customers above all else</p>
    </div>
    
    <div class="interactive-item" data-title="Innovation" data-text="Innovation is at the core of everything we do. We encourage creative thinking, embrace new technologies, and continuously seek better ways to solve problems and deliver exceptional value to our clients.">
      <div class="item-icon">
        <i class="fas fa-lightbulb"></i>
      </div>
      <h4>Innovation</h4>
      <p>We constantly push boundaries and explore new possibilities</p>
    </div>
    
    <div class="interactive-item" data-title="Global Impact" data-text="Our vision extends beyond borders. We're committed to creating solutions that address global challenges, promote sustainability, and make a positive difference in communities around the world.">
      <div class="item-icon">
        <i class="fas fa-globe"></i>
      </div>
      <h4>Global Impact</h4>
      <p>We strive to make a positive difference worldwide</p>
    </div>
  </div>
  
  <div class="interactive-content" id="interactive-content">
    <h3 id="content-title">Our Values</h3>
    <p id="content-text">Select a value to learn more about our commitment.</p>
  </div>
</div>

<style>
.mission-interactive {
  text-align: center;
  padding: 40px 30px;
  background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
  border-radius: 15px;
  max-width: 1000px;
  margin: 0 auto;
}

.mission-interactive h2 {
  color: #2c3e50;
  margin-bottom: 30px;
  font-size: 2.2rem;
}

.interactive-container {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-bottom: 30px;
  flex-wrap: wrap;
}

.interactive-item {
  padding: 20px;
  background: rgba(255,255,255,0.7);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.3s ease;
  min-width: 150px;
}

.interactive-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.1);
  background: white;
}

.item-icon {
  font-size: 2rem;
  margin-bottom: 10px;
}

.interactive-item:nth-child(1) .item-icon {
  color: #ff6b6b;
}

.interactive-item:nth-child(2) .item-icon {
  color: #4ecdc4;
}

.interactive-item:nth-child(3) .item-icon {
  color: #45b7d1;
}

.interactive-item h4 {
  color: #2c3e50;
  margin-bottom: 10px;
}

.interactive-item p {
  color: #7f8c8d;
  font-size: 0.9rem;
}

.interactive-content {
  max-width: 700px;
  margin: 0 auto;
  padding: 20px;
  background: white;
  border-radius: 10px;
  display: none;
}

.interactive-content h3 {
  color: #2c3e50;
  margin-bottom: 15px;
}

.interactive-content p {
  color: #7f8c8d;
  line-height: 1.6;
}

@media (max-width: 768px) {
  .interactive-container {
    gap: 15px;
  }
  
  .interactive-item {
    min-width: 120px;
    padding: 15px;
  }
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
  const interactiveItems = document.querySelectorAll('.interactive-item');
  const contentElement = document.getElementById('interactive-content');
  const titleElement = document.getElementById('content-title');
  const textElement = document.getElementById('content-text');
  
  interactiveItems.forEach(item => {
    item.addEventListener('click', function() {
      const title = this.getAttribute('data-title');
      const text = this.getAttribute('data-text');
      
      titleElement.textContent = title;
      textElement.textContent = text;
      contentElement.style.display = 'block';
      
      // Reset all items
      interactiveItems.forEach(i => {
        i.style.background = 'rgba(255,255,255,0.7)';
        i.style.transform = 'translateY(0)';
      });
      
      // Highlight selected item
      this.style.background = 'white';
      this.style.transform = 'translateY(-5px)';
      this.style.boxShadow = '0 10px 20px rgba(0,0,0,0.1)';
    });
  });
});
</script>