page-white-label/src/lib/components/Services.svelte

<script>
	import { reveal } from 'svelte-reveal';
	import { t, isLoading } from 'svelte-i18n';
	import { imagesconfig } from '$lib/config';

	const tool = imagesconfig.service_item_1image;
	const castle = imagesconfig.service_item_2image;
	const rocket = imagesconfig.service_item_3image;
	const code = imagesconfig.service_item_4image;
	const encrypted = imagesconfig.service_item_5image;
	const merge = imagesconfig.service_item_6image;
</script>

<section
	id="services"
	class="bg-gradient-to-br from-bg1_services to-bg2_services py-24 text-tx_services"
>
	<div class="mx-auto max-w-7xl px-4">
		<h2
			class="mb-12 text-center text-4xl font-bold"
			use:reveal={{ transition: 'fade', y: 50, duration: 800 }}
		>
			{$t('serviceTitle')}
		</h2>

		<div class="grid gap-8 md:grid-cols-3">
			{#if imagesconfig.service_box_1}
				<div
					class="rounded-xl border border-border1_services/10 bg-border2_services/5 p-8 transition hover:scale-105 hover:shadow-xl"
					use:reveal={{ transition: 'fade', y: 50, duration: 800, delay: 100 }}
				>
					<div class="mb-4">
						<img src={tool} alt="Icone de ferramenta" class="h-10 w-10" />
					</div>
					<h3 class="mb-2 text-2xl font-semibold">{$t('service1BlockTitle')}</h3>
					<p>{$t('service1BlockSubTitle')}</p>
				</div>
			{/if}

			{#if imagesconfig.service_box_2}
				<div
					class="rounded-xl border border-border1_services/10 bg-border2_services/5 p-8 transition hover:scale-105 hover:shadow-xl"
					use:reveal={{ transition: 'fade', y: 50, duration: 800, delay: 200 }}
				>
					<img src={castle} alt="Icone de ferramenta" class="h-10 w-10" />
					<h3 class="mb-2 text-2xl font-semibold">{$t('service2BlockTitle')}</h3>
					<p>{$t('service2BlockSubTitle')}</p>
				</div>
			{/if}

			{#if imagesconfig.service_box_3}
				<div
					class="rounded-xl border border-border1_services/10 bg-border2_services/5 p-8 transition hover:scale-105 hover:shadow-xl"
					use:reveal={{ transition: 'fade', y: 50, duration: 800, delay: 300 }}
				>
					<img src={code} alt="Icone de ferramenta" class="h-10 w-10" />
					<h3 class="mb-2 text-2xl font-semibold">{$t('service3BlockTitle')}</h3>
					<p>{$t('service3BlockSubTitle')}</p>
				</div>
			{/if}

			{#if imagesconfig.service_box_4}
				<div
					class="rounded-xl border border-border1_services/10 bg-border2_services/5 p-8 transition hover:scale-105 hover:shadow-xl"
					use:reveal={{ transition: 'fade', y: 50, duration: 800, delay: 400 }}
				>
					<img src={encrypted} alt="Icone de ferramenta" class="h-10 w-10" />
					<h3 class="mb-2 text-2xl font-semibold">{$t('service4BlockTitle')}</h3>
					<p>{$t('service4BlockSubTitle')}</p>
				</div>
			{/if}

			{#if imagesconfig.service_box_5}
				<div
					class="rounded-xl border border-border1_services/10 bg-border2_services/5 p-8 transition hover:scale-105 hover:shadow-xl"
					use:reveal={{ transition: 'fade', y: 50, duration: 800, delay: 500 }}
				>
					<img src={merge} alt="Icone de ferramenta" class="h-10 w-10" />
					<h3 class="mb-2 text-2xl font-semibold">{$t('service5BlockTitle')}</h3>
					<p>{$t('service5BlockSubTitle')}</p>
				</div>
			{/if}

			{#if imagesconfig.service_box_6}
				<div
					class="rounded-xl border border-border1_services/10 bg-border2_services/5 p-8 transition hover:scale-105 hover:shadow-xl"
					use:reveal={{ transition: 'fade', y: 50, duration: 800, delay: 600 }}
				>
					<img src={rocket} alt="Icone de ferramenta" class="h-10 w-10" />
					<h3 class="mb-2 text-2xl font-semibold">{$t('service6BlockTitle')}</h3>
					<p>{$t('service6BlockSubTitle')}</p>
				</div>
			{/if}
		</div>
	</div>
</section>