75 lines
2.7 KiB
PHP
75 lines
2.7 KiB
PHP
<?php
|
|
$steps = get_sub_field('steps');
|
|
$total = is_array($steps) ? count($steps) : 0;
|
|
?>
|
|
|
|
<section id="collaboration" class="section-boxes-repeater">
|
|
<div class="wrapper wrapper--inner">
|
|
<h2 class="section-heading heading--md"><?php the_sub_field('section_heading'); ?></h2>
|
|
<?php if ($total > 0) : ?>
|
|
<div class="collaboration-steps" style="max-width: 900px; margin: 0 auto; padding: 20px 0;">
|
|
<?php $index = 0; ?>
|
|
<?php while (have_rows('steps')) : the_row(); ?>
|
|
<div class="collaboration-step" style="display: flex; align-items: flex-start; gap: 20px; margin-bottom: <?= ($index < $total - 1) ? '40px' : '0' ?>; position: relative;">
|
|
<div class="step-number" style="flex-shrink: 0; width: 60px; height: 60px; background: linear-gradient(135deg, #88b14b 0%, #6a8f3a 100%); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 700; box-shadow: 0 4px 8px rgba(136, 177, 75, 0.3); position: relative; z-index: 2;">
|
|
<?= $index + 1 ?>
|
|
</div>
|
|
|
|
<?php if ($index < $total - 1) : ?>
|
|
<div class="step-connector" style="position: absolute; left: 30px; top: 60px; width: 2px; height: 40px; background: linear-gradient(to bottom, #88b14b, #e0e0e0); z-index: 1;"></div>
|
|
<?php endif; ?>
|
|
|
|
<div class="step-content" style="flex: 1; background-color: #f8f9fa; padding: 20px 25px; border-radius: 8px; border-left: 4px solid #88b14b; box-shadow: 0 2px 4px rgba(0,0,0,0.05); transition: all 0.3s ease;">
|
|
<h3 class="step-title" style="margin: 0; font-size: 18px; font-weight: 600; color: #333; line-height: 1.4;">
|
|
<?php the_sub_field('step_title'); ?>
|
|
</h3>
|
|
</div>
|
|
</div>
|
|
<?php $index++; ?>
|
|
<?php endwhile; ?>
|
|
</div>
|
|
<?php endif; ?>
|
|
<?php if (get_sub_field('bottom_text')) : ?>
|
|
<div class="col-text-content mt-4 text-center">
|
|
<p><?php the_sub_field('bottom_text'); ?></p>
|
|
</div>
|
|
<?php endif; ?>
|
|
</div>
|
|
</section>
|
|
|
|
<style>
|
|
.collaboration-step:hover .step-content {
|
|
transform: translateX(5px);
|
|
box-shadow: 0 4px 12px rgba(136, 177, 75, 0.15);
|
|
}
|
|
|
|
.collaboration-step:hover .step-number {
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.collaboration-step {
|
|
gap: 15px !important;
|
|
}
|
|
|
|
.step-number {
|
|
width: 50px !important;
|
|
height: 50px !important;
|
|
font-size: 20px !important;
|
|
}
|
|
|
|
.step-connector {
|
|
left: 25px !important;
|
|
top: 50px !important;
|
|
}
|
|
|
|
.step-content {
|
|
padding: 15px 20px !important;
|
|
}
|
|
|
|
.step-title {
|
|
font-size: 16px !important;
|
|
}
|
|
}
|
|
</style>
|