<script setup>
import FrontLayout from "@/Layouts/FrontLayout.vue";
import PageHeader from "@/Components/FrontEnd/PageHeader.vue";
import {Head} from "@inertiajs/vue3";
import Pagination from "@/Components/FrontEnd/Pagination.vue";
const projects = [
    {
        id:1,
        title:'Workspace Collection',
        description:'Upgrade your desk with objects that keep you organized and clear-minded.',
        image:'https://tailwindui.com/plus-assets/img/ecommerce-images/category-page-01-featured-collection.jpg',
        link:'#',
        features:{}
    },
    {
        id:2,
        title:'Workspace Collection',
        description:'Upgrade your desk with objects that keep you organized and clear-minded.',
        image:'https://tailwindui.com/plus-assets/img/ecommerce-images/category-page-01-featured-collection.jpg',
        link:'#',
        features:{}
    },
]
</script>
<template>

    <Head title="Services"/>

<FrontLayout>
    <template #pageHeader>
        <PageHeader page-link="Services"/>
    </template>

    <div class="mx-auto max-w-7xl px-6 pb-8 pt-16 sm:pt-24 lg:px-8 lg:py-14">
        <!-- Blog section -->
        <div class="mx-auto my-6 max-w-7xl px-6 sm:my-6 lg:px-8">
            <div class="mx-auto max-w-2xl lg:mx-0 lg:max-w-none text-center">
                <h2 class="text-balance text-4xl font-semibold tracking-tight text-gray-900 sm:text-4xl">Latest Projects</h2>
                <p class="mt-2 text-lg/8 text-gray-600">You can go through our latest projects</p>
            </div>
<!--            <div class="mx-auto mt-16 grid max-w-2xl auto-rows-fr grid-cols-1 gap-8 sm:mt-10 lg:mx-0 lg:max-w-none lg:grid-cols-3"></div>-->

            <div class="mx-auto max-w-2xl px-4 pt-16 sm:px-6 sm:pt-16 lg:max-w-7xl" v-for="(project,key) in projects">
                <div class="relative overflow-hidden rounded-lg lg:h-96">
                    <div class="absolute inset-0">
                        <img src="https://tailwindui.com/plus-assets/img/ecommerce-images/category-page-01-featured-collection.jpg" alt="" class="size-full object-cover" />
                    </div>
                    <div aria-hidden="true" class="relative h-96 w-full lg:hidden" />
                    <div aria-hidden="true" class="relative h-32 w-full lg:hidden" />
                    <div class="absolute inset-x-0 bottom-0 rounded-bl-lg rounded-br-lg bg-black/75 p-6 backdrop-blur backdrop-filter sm:flex sm:items-center sm:justify-between lg:inset-x-auto lg:inset-y-0 lg:w-96 lg:flex-col lg:items-start lg:rounded-br-none lg:rounded-tl-lg">
                        <div>
                            <h2 class="text-xl font-bold text-white">Workspace Collection</h2>
                            <p class="mt-1 text-sm text-gray-300">Upgrade your desk with objects that keep you organized and clear-minded.</p>
                        </div>
                        <a href="#" class="mt-6 flex shrink-0 items-center justify-center rounded-md border border-white/25 px-4 py-3 text-base font-medium text-white hover:bg-white/10 sm:ml-8 sm:mt-0 lg:ml-0 lg:w-full">View the collection</a>
                    </div>
                </div>
            </div>
        </div>

        <Pagination/>
    </div>
</FrontLayout>
</template>

<style scoped>

</style>


