Dimitrie Stefanescu
584a9ccd51
(1) added typography classes & reset layout for post templates based on it; (2) removed landing page illustration and replaced it with the video; (3) removed fancy patterns from post templates (4) some minor cleanup
88 lines
3.6 KiB
Handlebars
88 lines
3.6 KiB
Handlebars
{{#get "posts" filter="primary_tag:features+featured:true" limit="3"}}
|
|
<div class="relative bg-gray-50 dark:bg-gray-900 py-10">
|
|
|
|
<div class="w-default mt-20 my-0 grid grid-cols-1 lg:grid-cols-2 gap-10 mb-10">
|
|
<div class="relative border-l-4 dark:border-gray-700">
|
|
<h2 class="text-4xl pl-5 mb-5 font-bold text-blue-600">Why
|
|
Speckle?</h2>
|
|
<p class=" pl-5 text-lg text-gray-800 dark:text-gray-400">
|
|
Our platform enables AEC companies to evolve
|
|
digitally in a cloud based environment. Speckle
|
|
streamlines collaboration and automation for 3D
|
|
information - <b>CAD & BIM</b>.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{{!-- NOTE: starts from one to leave space for a future "first" image generic --}}
|
|
<div x-data="{ activeSlide: '1', slides: [ '0', '1', '2', '3', '4', '5' ] }"
|
|
class="w-default my-0 mt-5 mb-20 grid grid-cols-1 lg:grid-cols-2 gap-10">
|
|
|
|
<div class="relative grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-1 gap-4 lg:gap-2 grid-flow-row">
|
|
{{#foreach posts}}
|
|
|
|
<div class="rounded-lg transition overflow-hiddenbg-white dark:bg-gray-900 dark:hover:bg-gray-800 shadow hover:shadow-2xl dark:text-gray-200"
|
|
@mouseenter="activeSlide='{{@number}}';">
|
|
<div class="flex-shrink-0 lg:hidden">
|
|
<img class="h-48 w-full object-cover" 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 class="flex-1 px-6 py-4 flex flex-col justify-between">
|
|
<div class="flex-1">
|
|
<a href="{{url}}" class="block mt-1">
|
|
<p class="text-xl font-semibold text-gray-900 dark:text-gray-200">
|
|
{{title}}
|
|
</p>
|
|
<p class="mt-2 text-sm text-gray-500 line-clamp-2">
|
|
{{excerpt}}
|
|
</p>
|
|
<footer class="mt-2">
|
|
<p class="text-base font-semibold text-blue-500">
|
|
Read More
|
|
</p>
|
|
</footer>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{/foreach}}
|
|
|
|
|
|
<div class="relative rounded-xl py-5 hover:rounded-2xl shadow hover:shadow-2xl bg-white dark:bg-gray-900 transition overflow-hidden flex" >
|
|
<a href="/features" class="w-full self-center">
|
|
<div class="relative px-6">
|
|
<div class="text-xl font-semibold text-blue-600">
|
|
All Features →
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="relative hidden lg:flex">
|
|
|
|
{{#foreach posts}}
|
|
<div class="absolute inset-0 h-full w-full flex"
|
|
x-show="activeSlide === '{{@number}}'"
|
|
x-transition:enter="transition ease-out duration-300"
|
|
x-transition:enter-start="opacity-0 -translate-y-1"
|
|
x-transition:enter-end="opacity-100 translate-y-0"
|
|
x-transition:leave="transition ease-in duration-50"
|
|
x-transition:leave-start="opacity-100 translate-y-0"
|
|
x-transition:leave-end="opacity-0 -translate-y-1">
|
|
<img src="{{feature_image}}" class="object-cover self-center">
|
|
</div>
|
|
{{/foreach}}
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
{{/get}} |