{{ define "main" }}
<nav class="bg-gray-800 fixed w-full top-0 z-1">
    <div class="mx-auto px-4">
        <div class="flex items-center justify-between h-16">
            <div class="flex items-center">
                <a href="/" class="text-white font-bold text-xl"
                    >Fede Landing Site</a
                >
            </div>
            <!-- Desktop Menu -->
            <div class="hidden md:flex">
                <a
                    href="/Blog"
                    target="_blank"
                    class="text-gray-300 hover:text-white px-3 py-2"
                    >Blog</a
                >
                <a
                    class="text-gray-300 hover:text-white px-3 py-2 muted"
                    title="Under Construction 🚧👷‍♂️🏗️"
                    target="_blank"
                    >CV</a
                >
                <a
                    href="https://github.com/fedpo2"
                    target="_blank"
                    class="text-gray-300 hover:text-white px-3 py-2"
                    >GitHub</a
                >
                <a
                    href="mailto:federico.nicolas.polidoro@gmail.com"
                    target="_blank"
                    class="text-gray-300 hover:text-white px-3 py-2"
                    >Email</a
                >
                <a
                    href="https://www.linkedin.com/in/federico-polidoro-40137a25b/"
                    target="_blank"
                    class="text-gray-300 hover:text-white px-3 py-2"
                    >LinkedIn</a
                >
            </div>
            <!-- Mobile Menu Button -->
            <div class="md:hidden">
                <button
                    onclick="toggleOffCanvas()"
                    class="border px-2 py-1 rounded text-white"
                >
                    <svg
                        class="h-6 w-6"
                        fill="none"
                        viewBox="0 0 24 24"
                        stroke="currentColor"
                    >
                        <path
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            stroke-width="2"
                            d="M0 6h25M0 12h25M0 18h25"
                        />
                    </svg>
                </button>
            </div>
        </div>
    </div>
    <!-- Off-canvas Menu -->
    <div
        id="offCanvas"
        class="fixed top-16 right-0 w-64 h-screen bg-gray-800 transform translate-x-full transition-transform duration-200 ease-in-out"
    >
        <div class="flex flex-col p-4">
            <a
                href="/Blog"
                target="_blank"
                class="text-gray-300 hover:text-white px-3 py-2"
                >Blog</a
            >
            <a
                class="text-gray-300 hover:text-white px-3 py-2 muted"
                title="Under Construction 🚧👷‍♂️🏗️"
                target="_blank"
                >CV</a
            >
            <a
                href="https://github.com/fedpo2"
                target="_blank"
                class="text-gray-300 hover:text-white px-3 py-2"
                >GitHub</a
            >
            <a
                href="mailto:federico.nicolas.polidoro@gmail.com"
                target="_blank"
                class="text-gray-300 hover:text-white px-3 py-2"
                >Email</a
            >
            <a
                href="https://www.linkedin.com/in/federico-polidoro-40137a25b/"
                target="_blank"
                class="text-gray-300 hover:text-white px-3 py-2"
                >LinkedIn</a
            >
        </div>
    </div>
</nav>
<script>
    function toggleOffCanvas() {
        const offCanvas = document.getElementById("offCanvas");
        offCanvas.classList.toggle("translate-x-full");
    }
</script>
<div
    class="rounded flex dark:bg-black justify-center items-center h-screen w-screen bg-[repeating-linear-gradient(transparent,transparent_27px,#333_28px)] dark:bg-[repeating-linear-gradient(transparent,transparent_27px,#aaa_28px)] bg-[size:100%_28px] shadow-[0_4px_6px_-1px_rgb(107,114,128)]"
>
    <div
        class="bg-cyan-200 dark:bg-emerald-500 border-2 dark:border-white rounded-lg p-2"
    >
        <div class="flex flex-col sm:flex-row items-center">
            <img
                src="fede.jpg"
                class="w-22 object-cover rounded-lg border-4 border-gray-400 grayscale hover:grayscale-0 z-0"
            />

            <div class="hidden sm:flex flex-col items-center p-2">
                <div class="w-[2px] h-16 bg-black"></div>
            </div>
            <p
                class="underline font-serif font-bold text-2xl md:text-4xl lg:text-5xl self-center"
            >
                {{ .Site.Params.author }}
            </p>
        </div>
        <p class="font-mono font-light">
            {{ if .Site.Params.leyenda }} {{ .Site.Params.leyenda }} {{ end }}
        </p>
    </div>
    <div class="absolute bottom-8 flex justify-center w-full animate-bounce">
        <svg width="40" height="20" viewBox="0 0 40 20">
            <defs>
                <linearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="100%">
                    <stop offset="0%" style="stop-color: #ff0000" />
                    <stop offset="100%" style="stop-color: #ffff00" />
                </linearGradient>
            </defs>
            <path d="M0 0 L20 20 L40 0 Z" fill="url(#grad)" />
        </svg>
    </div>
</div>
<hr class="m-4" />
<div class="flex justify-center p-8">
    <div
        class="w-[80%] rounded-lg overflow-hidden border-2 shadow-2xl bg-[radial-gradient(circle,rgba(0,0,0,0)_0%,rgba(0,0,0,0.5)_70%,#ffffff_100%),repeating-linear-gradient(45deg,#000000,#000000_10px,#ffffff_10px,#ffffff_20px)]"
    >
        <div class="px-6 py-4 flex flex-col sm:flex-row justify-between">
            <span
                class="inline-block bg-gray-200 border rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2 sm:mb-0"
            >
                <div class="font-bold text-black text-xl">Portfolio</div>
            </span>
            <span
                class="inline-block bg-gray-200 border rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2"
            >
                <p class="text-black text-sm md:text-xl">
                    Algunos proyectos que he estado haciendo
                </p>
            </span>
        </div>
    </div>
</div>
<div class="container mx-auto px-4 py-8">
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        {{ range first 3 (where .Site.RegularPages "Section" "proyectos") }}
        <div
            class="bg-white rounded-lg shadow-md overflow-hidden border hover:shadow-xl transition-shadow duration-300"
        >
            {{ if .Params.image }}
            <img
                src="{{ .Params.image }}"
                alt="{{ .Title }}"
                class="w-full h-48 object-cover"
            />
            {{ else }}
            <div
                class="w-full h-48 bg-gray-200 flex items-center justify-center"
            >
                <span class="text-gray-500">No image</span>
            </div>
            {{ end }}

            <div class="p-4">
                <h2 class="text-xl font-bold mb-2">{{ .Title }}</h2>
                <p class="text-gray-700 mb-4">
                    {{ with .Params.description }}{{ . | truncate 150 }}{{ else
                    }}{{ .Summary | truncate 150 }}{{ end }}
                </p>

                <div class="flex justify-between items-center">
                    <a
                        href="{{ .Permalink }}"
                        class="text-blue-500 hover:text-blue-700"
                        >Ver más</a
                    >

                    {{ with .Params.tags }}
                    <div class="flex flex-wrap">
                        {{ range first 2 . }}
                        <span
                            class="text-xs bg-gray-200 rounded-full px-2 py-1 mr-1 mb-1"
                        >
                            {{ . }}
                        </span>
                        {{ end }}
                    </div>
                    {{ end }}
                </div>
            </div>
        </div>
        {{ end }}
    </div>
</div>
<div class="container mx-auto px-4 py-8">
    <h2 class="text-2xl font-bold mb-6 text-center">Todos los Posts</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        {{ range first 6 (where .Site.RegularPages "Section" "posts") }}
        <div
            class="bg-white rounded-lg shadow-md overflow-hidden border hover:shadow-xl transition-shadow duration-300"
        >
            {{ if .Params.image }}
            <img
                src="{{ .Params.image }}"
                alt="{{ .Title }}"
                class="w-full h-48 object-cover"
            />
            {{ else }}
            <div
                class="w-full h-48 bg-gray-200 flex items-center justify-center"
            >
                <span class="text-gray-500">No image</span>
            </div>
            {{ end }}

            <div class="p-4">
                <h2 class="text-xl font-bold mb-2">{{ .Title }}</h2>
                <p class="text-gray-700 mb-4">
                    {{ with .Params.description }}{{ . | truncate 150 }}{{ else
                    }}{{ .Summary | truncate 150 }}{{ end }}
                </p>

                <div class="flex justify-between items-center">
                    <a
                        href="{{ .Permalink }}"
                        class="text-blue-500 hover:text-blue-700"
                        >Leer más</a
                    >

                    <span class="text-sm text-gray-500"
                        >{{ .Date.Format "Jan 2, 2006" }}</span
                    >
                </div>
            </div>
        </div>
        {{ end }}
    </div>
</div>
{{ end }}