{% extends "base.jinja" %}
{% block main %}
<div>
	<div class="text-center p-6 mt-9">
		<h1 class="text-5xl font-semibold tracking-tight text-balance text-gray-900 sm:text-7xl">
			sogar deine mamer kauft meine geilen {{ context.number }} tomaten
		</h1>
		<p class="mt-8 text-lg font-medium text-pretty text-gray-500 sm:text-xl/8">Anim aute id magna aliqua ad
			ad non deserunt sunt. Qui irure qui lorem cupidatat commodo. Elit sunt amet fugiat veniam occaecat.
		</p>
		<div class="mt-10 flex items-center justify-center gap-x-6">
			<a href="#"
				class="rounded-md bg-indigo-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Get
				started</a>
			<a href="#" class="text-sm/6 font-semibold text-gray-900">Learn more <span aria-hidden="true">→</span></a>
		</div>
	</div>
</div>
<div class="bg-red-400">
	<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
		<div class="mx-auto max-w-2xl py-16 sm:py-24 lg:max-w-none lg:py-32">
			<h2 class="text-2xl font-bold text-gray-900">Collections</h2>

			<div class="mt-6 space-y-12 lg:grid lg:grid-cols-3 lg:gap-x-6 lg:space-y-0">
				<div class="group relative">
					<img src="{{ url_for('static', filename='img/tomatos.jpg') }}"
						alt="Desk with leather desk pad, walnut desk organizer, wireless keyboard and mouse, and porcelain mug."
						class="w-full rounded-lg bg-white object-cover group-hover:opacity-75 max-sm:h-80 sm:aspect-2/1 lg:aspect-square">
					<h3 class="mt-6 text-sm text-gray-500">
						<a href="#">
							<span class="absolute inset-0"></span>
							Desk and Office
						</a>
					</h3>
					<p class="text-base font-semibold text-gray-900">Work from home accessories</p>
				</div>
				<div class="group relative">
					<img src="{{ url_for('static', filename='img/tomatos.jpg') }}"
						alt="Wood table with porcelain mug, leather journal, brass pen, leather key ring, and a houseplant."
						class="w-full rounded-lg bg-white object-cover group-hover:opacity-75 max-sm:h-80 sm:aspect-2/1 lg:aspect-square">
					<h3 class="mt-6 text-sm text-gray-500">
						<a href="#">
							<span class="absolute inset-0"></span>
							Self-Improvement
						</a>
					</h3>
					<p class="text-base font-semibold text-gray-900">Journals and note-taking</p>
				</div>
				<div class="group relative">
					<img src="{{ url_for('static', filename='img/tomatos.jpg') }}"
						alt="Collection of four insulated travel bottles on wooden shelf."
						class="w-full rounded-lg bg-white object-cover group-hover:opacity-75 max-sm:h-80 sm:aspect-2/1 lg:aspect-square">
					<h3 class="mt-6 text-sm text-gray-500">
						<a href="#">
							<span class="absolute inset-0"></span>
							Travel
						</a>
					</h3>
					<p class="text-base font-semibold text-gray-900">Daily commute essentials</p>
				</div>
			</div>
		</div>
	</div>
</div>

{{ number }}
{% endblock %}
