sidakpelem/resources/views/landing/components/features-2.blade.php

74 lines
3.8 KiB
PHP

<section id="features-2" class="features-2 section">
<div class="container" data-aos="fade-up" data-aos-delay="100">
<div class="row align-items-center">
<div class="col-lg-4">
<div class="feature-item text-end mb-5" data-aos="fade-right" data-aos-delay="200">
<div class="d-flex align-items-center justify-content-end gap-4">
<div class="feature-content">
<h3>Use On Any Device</h3>
<p>Vestibulum ante ipsum primis in faucibus...</p>
</div>
<div class="feature-icon flex-shrink-0"><i class="bi bi-display"></i></div>
</div>
</div>
<div class="feature-item text-end mb-5" data-aos="fade-right" data-aos-delay="300">
<div class="d-flex align-items-center justify-content-end gap-4">
<div class="feature-content">
<h3>Feather Icons</h3>
<p>Phasellus ullamcorper ipsum rutrum nunc...</p>
</div>
<div class="feature-icon flex-shrink-0"><i class="bi bi-feather"></i></div>
</div>
</div>
<div class="feature-item text-end" data-aos="fade-right" data-aos-delay="400">
<div class="d-flex align-items-center justify-content-end gap-4">
<div class="feature-content">
<h3>Retina Ready</h3>
<p>Aenean tellus metus bibendum sed posuere...</p>
</div>
<div class="feature-icon flex-shrink-0"><i class="bi bi-eye"></i></div>
</div>
</div>
</div>
<div class="col-lg-4" data-aos="zoom-in" data-aos-delay="200">
<div class="phone-mockup text-center">
<img src="{{ asset('landing/assets/img/phone-app-screen.webp') }}" alt="Phone Mockup"
class="img-fluid">
</div>
</div>
<div class="col-lg-4">
<div class="feature-item mb-5" data-aos="fade-left" data-aos-delay="200">
<div class="d-flex align-items-center gap-4">
<div class="feature-icon flex-shrink-0"><i class="bi bi-code-square"></i></div>
<div class="feature-content">
<h3>W3c Valid Code</h3>
<p>Donec vitae sapien ut libero venenatis...</p>
</div>
</div>
</div>
<div class="feature-item mb-5" data-aos="fade-left" data-aos-delay="300">
<div class="d-flex align-items-center gap-4">
<div class="feature-icon flex-shrink-0"><i class="bi bi-phone"></i></div>
<div class="feature-content">
<h3>Fully Responsive</h3>
<p>Maecenas tempus tellus eget condimentum...</p>
</div>
</div>
</div>
<div class="feature-item" data-aos="fade-left" data-aos-delay="400">
<div class="d-flex align-items-center gap-4">
<div class="feature-icon flex-shrink-0"><i class="bi bi-browser-chrome"></i></div>
<div class="feature-content">
<h3>Browser Compatibility</h3>
<p>Nullam dictum felis eu pede mollis pretium...</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>