Dimitrie Stefanescu
125 lines
5.2 KiB
Handlebars
125 lines
5.2 KiB
Handlebars
<div class="relative perspective-700 overflow-hidden max-w-full w-full z-30">
|
|
<div
|
|
class="relative perspective-transform z-30 w-full md:w-2/3 lg:w-1/2 mx-auto dark:bg-gray-900 border-4 border-blue-500 border-opacity-0 hover:border-opacity-100 bg-gray-200 prose lg:prose-lg dark:prose-dark max-w-none text-center rounded-3xl pt-10 pb-6 mt-10 -mb-8">
|
|
<div class="relative px-4 z-30">
|
|
<a href="/features/connectors" class="no-underline">
|
|
<h1><span class='text-blue-500'>Speckle</span> Connectors</h1>
|
|
{{#get "posts" filter="primary_tag:features+featured:true+title:'Speckle Connectors'" limit="1"}}
|
|
{{#foreach posts}}
|
|
<p class="pb-4">{{excerpt}}</p>
|
|
{{/foreach}}
|
|
{{/get}}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="relative transform perspective-700 dark:bg-gray-900 bg-gray-200 pt-10 z-0 flex">
|
|
<div id="prev"
|
|
class="xxx-swiper-button-next flex-shrink transition text-blue-500 flex bg-none dark:hover:bg-gray-800 hover:bg-gray-100 opacity-10 hover:opacity-100 rounded-full -mt-5 cursor-pointer">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 self-center" fill="none" viewBox="0 0 24 24"
|
|
stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
|
|
</svg>
|
|
</div>
|
|
<div class="swiper-container connector-swiper mx-auto max-w-7xl flex-grow">
|
|
<div class="swiper-wrapper mb-10">
|
|
{{#get "tags" limit="all" include='count.posts' order='count.posts desc'
|
|
filter="slug:[rhino,grasshopper,revit,dynamo,excel,blender,autocad,civil3d,unity,unreal]"}}
|
|
{{#foreach tags }}
|
|
<a href="{{url}}"
|
|
class="swiper-slide group dark:text-gray-200 text-gray-600 p-2 text-center content-center flex flex-wrap justify-center">
|
|
<img class="mx-auto w-32 transition-transform transform group-hover:scale-110" src="{{feature_image}}">
|
|
<p class="w-full mt-4 opacity-0 group-hover:opacity-100 transition-opacity">
|
|
{{name}}
|
|
</p>
|
|
</a>
|
|
{{/foreach}}
|
|
{{/get}}
|
|
</div>
|
|
{{!-- <div class="swiper-pagination mt-10"></div> --}}
|
|
</div>
|
|
<div id="next"
|
|
class="xxx-swiper-button-next flex-shrink transition text-blue-500 flex bg-none dark:hover:bg-gray-800 hover:bg-gray-100 opacity-10 hover:opacity-100 rounded-full -mt-5 cursor-pointer">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 self-center" fill="none" viewBox="0 0 24 24"
|
|
stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
class="group w-full mx-auto prose lg:prose-lg dark:prose-dark max-w-none text-center p-10 bg-gradient-to-b from-gray-200 dark:from-gray-900">
|
|
<div class="w-default px-4">
|
|
Go beyond interoperability and leverage all the potential behind a fully fledged BIM data platform
|
|
</div>
|
|
<div class="flex flex-wrap content-center justify-center">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-500" fill="none" viewBox="0 0 24 24"
|
|
stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="relative">
|
|
<div class="w-default mx-auto pb-10 space space-y-4 mt-20">
|
|
{{#get "posts" filter="primary_tag:features+featured:true+title:-'Speckle Connectors'" limit="5"}}
|
|
{{#foreach posts}}
|
|
<div class="px-4 flex flex-col md:flex-row group">
|
|
<a href="{{url}}"
|
|
class="w-full md:w-1/2 p-4 self-center text-center md:text-left transition group-hover:shadow-xl rounded-xl dark:group-hover:bg-gray-900 group-hover:bg-gray-50">
|
|
<div class="prose dark:prose-dark prose-blue lg:prose-lg group">
|
|
<h2>
|
|
{{title}}
|
|
</h2>
|
|
<p>{{excerpt}}</p>
|
|
<p><button href="{{url}}" class="font-bold group-hover:text-blue-500">Read More</button></p>
|
|
</div>
|
|
</a>
|
|
<div
|
|
class="w-full md:w-1/2 {{#if @even}} md:order-first {{else}}{{/if}} transform group-hover:scale-125 transition-transform pointer-events-none ">
|
|
<img class="object-contain h-60 w-full" srcset="{{img_url feature_image size=" s"}} 300w, {{img_url
|
|
feature_image size="m" }} 600w, {{img_url feature_image size="l" }} 1000w, {{img_url feature_image size="xl"
|
|
}} 2000w" sizes="(max-width: 1000px) 400px, 700px" src="{{img_url feature_image size=" m"}}" alt="{{title}}">
|
|
</div>
|
|
</div>
|
|
{{/foreach}}
|
|
{{/get}}
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
window.addEventListener('load', (event) => {
|
|
let swiper = new Swiper(".connector-swiper", {
|
|
slidesPerView: 3,
|
|
spaceBetween: 20,
|
|
loop: true,
|
|
grabCursor: true,
|
|
autoplay: {
|
|
delay: 2000,
|
|
disableOnInteraction: false,
|
|
pauseOnMouseEnter: true
|
|
},
|
|
breakpoints: {
|
|
768: {
|
|
slidesPerView: 5,
|
|
spaceBetween: 50,
|
|
},
|
|
1280: {
|
|
slidesPerView: 7,
|
|
spaceBetween: 50,
|
|
}
|
|
}
|
|
})
|
|
|
|
swiper.slideTo(6, 1000)
|
|
|
|
document.getElementById('prev').onclick = function () {
|
|
swiper.slidePrev(200)
|
|
}
|
|
|
|
document.getElementById('next').onclick = function () {
|
|
swiper.slideNext(200)
|
|
}
|
|
})
|
|
</script> |