54 lines
No EOL
2.5 KiB
Svelte
54 lines
No EOL
2.5 KiB
Svelte
<div class="relative">
|
|
<!-- Gradient fade transition - adjusted for light theme -->
|
|
<div class="absolute top-0 left-0 w-full h-32 -translate-y-full"></div>
|
|
|
|
<section class="relative py-20 bg-base-100">
|
|
<div class="container mx-auto px-4">
|
|
<h2 class="text-4xl font-display font-bold text-center mb-12">Our Services</h2>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
|
<!-- Marine Engineering Card -->
|
|
<div class="card bg-base-200 shadow-xl">
|
|
<div class="card-body">
|
|
<h3 class="card-title font-display text-xl">Marine Engineering</h3>
|
|
<p class="font-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Ship Management Card -->
|
|
<div class="card bg-base-200 shadow-xl">
|
|
<div class="card-body">
|
|
<h3 class="card-title font-display text-xl">Ship Management</h3>
|
|
<p class="font-body">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Maritime Consulting Card -->
|
|
<div class="card bg-base-200 shadow-xl">
|
|
<div class="card-body">
|
|
<h3 class="card-title font-display text-xl">Maritime Consulting</h3>
|
|
<p class="font-body">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-20 text-center">
|
|
<h2 class="text-4xl font-display font-bold mb-8">Why Choose Us?</h2>
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-4xl mx-auto">
|
|
<div class="card bg-base-200 shadow-xl">
|
|
<div class="card-body">
|
|
<h3 class="card-title font-display text-xl">Experience</h3>
|
|
<p class="font-body">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
|
</div>
|
|
</div>
|
|
<div class="card bg-base-200 shadow-xl">
|
|
<div class="card-body">
|
|
<h3 class="card-title font-display text-xl">Excellence</h3>
|
|
<p class="font-body">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div> |