Merge pull request #21 from specklesystems/interop

CSS ++
This commit is contained in:
Dimitrie Stefanescu
2021-07-24 20:29:58 +01:00
committed by GitHub
36 changed files with 2592 additions and 573 deletions
+1050 -77
View File
File diff suppressed because it is too large Load Diff
+124 -30
View File
@@ -8,6 +8,35 @@
/* Main
/* ---------------------------------------------------------- */
[x-cloak] {
display: none !important;
}
a.no-underline{
text-decoration: none !important;
}
a.no-underline:hover{
text-decoration: none;
}
/* pre{
white-space: pre-wrap;
word-break: break-all;
max-width: 100%;
}
code{
word-break: break-all;
} */
.kg-image-card{
@apply content-center;
}
.kg-image {
@apply mx-auto;
}
.text-gradient {
background-clip: text;
-webkit-background-clip: text;
@@ -19,7 +48,8 @@
@apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
}
.page-about-content h2, .page-about-content h3 {
.page-about-content h2,
.page-about-content h3 {
@apply my-10;
}
@@ -27,65 +57,129 @@
height: auto !important;
}
.perspective-700{
.perspective-700 {
perspective: 750px;
/* z-index: 100; */
}
.perspective-transform {
transform: rotateX(30deg) rotateY(0deg); transform-style: preserve-3d;
transform: rotateX(25deg) rotateY(0deg) translateZ(0px);
transform-style: preserve-3d;
transition: 1s ease all;
}
.perspective-transform:hover{
transform: rotateX(15deg) rotateY(0deg);
.perspective-transform-0 {
transform: rotateX(0deg) rotateY(0deg);
transform-style: preserve-3d;
transition: 1s ease all;
}
/*
.post-body h2 {
@apply text-4xl my-4 px-4 sm:px-2 md:px-0;
.perspective-transform:hover {
transform: rotateX(10deg) rotateY(0deg) translateZ(20px);
}
.post-body h3 {
@apply text-2xl my-4 px-4 sm:px-2 md:px-0;
.no-underline {
text-decoration: none !important;
}
.post-body p{
@apply my-3 mx-auto text-lg max-w-prose mx-auto px-4 sm:px-2 md:px-0;
.medium-zoom-image--opened {
@apply relative z-50;
}
.post-body blockquote {
@apply my-4 pl-2 text-lg border-l-2 mx-auto max-w-prose border-l-4 border-blue-600 pl-5;
.medium-zoom-overlay{
@apply dark:bg-gray-900 bg-gray-200 z-50;
}
.post-body figure {
@apply my-10;
.kg-bookmark-card {
@apply shadow-md hover:shadow-xl transition-shadow dark:bg-gray-900 bg-white rounded-lg overflow-x-hidden;
}
.post-body hr{
@apply my-10;
.kg-bookmark-container {
@apply grid grid-cols-3 content-center dark:text-gray-100 text-gray-800 ;
text-decoration: none !important;
}
.post-body ul{
@apply text-lg my-4 list-inside list-disc my-3 mx-auto text-lg max-w-prose mx-auto px-4 sm:px-2 md:px-0;
.kg-bookmark-content{
@apply px-4 col-span-2 self-center;
}
.post-body li{
@apply text-lg;
.kg-bookmark-description {
@apply line-clamp-1;
}
.kg-bookmark-description {
@apply dark:text-gray-100 text-gray-800 line-clamp-2;
}
.post-body a {
@apply text-blue-500 font-normal;
.kg-bookmark-thumbnail{
@apply col-span-1;
}
.post-body a:hover {
@apply font-bold;
.kg-bookmark-thumbnail img {
@apply object-cover;
margin: 0 !important;
}
.post-body pre {
@apply p-4 px-8 my-10 rounded-xl bg-gray-200 dark:bg-gray-700 shadow-xl;
}*/
.kg-bookmark-metadata {
display: none;
}
figcaption{
.kg-bookmark-title {
@apply text-xl;
}
.kg-bookmark-description {
@apply text-xs line-clamp-3;
}
.kg-gallery-row {
@apply flex space-x-2;
}
.kg-gallery-image {
@apply opacity-100;
}
figcaption {
@apply text-sm text-center;
}
.prose code::after, .prose code::before {
content: "" !important;
}
.prose code {
@apply px-1 rounded-sm text-blue-500 dark:bg-gray-900 bg-white;
}
.prose > h1::before,
.prose > h2::before,
.prose > h3::before,
.prose > h4::before,
.prose > h5::before,
.prose > h6::before {
display: block;
content: " ";
height: 80px;
margin-top: -80px;
visibility: hidden;
pointer-events: none;
}
.is-active-link {
@apply transition-colors text-gray-900 dark:text-gray-100 bg-blue-100 dark:bg-blue-900;
}
.toc-list-item a {
@apply text-sm transition-colors text-gray-600 dark:text-gray-400;
}
.toc-list-item a:hover {
@apply dark:text-blue-500;
}
.toc-list-item {
@apply my-1;
}
.node-name--H3::before {
content: " " !important;
}
+41
View File
@@ -0,0 +1,41 @@
{{!< default}} {{#post}}
{{!-- Header --}}
<main class="relative w-default flex flex-wrap mt-24">
<div class="w-3/3 text-center">
<h1 class="text-4xl tracking-tight font-extrabold text-gray-900 dark:text-gray-100 sm:text-5xl md:text-6xl">
<span class="inline-block xl:inline text-gradient text-gradient bg-gradient-to-r from-blue-500 to-blue-700">
{{title}}
</span>
</h1>
<p class="max-w-prose mx-auto text-base text-gray-500 dark:text-gray-100 sm:text-lg md:text-xl md:max-w-6xl mt-10">
{{excerpt}}
</p>
</div>
</main>
{{> interop/connectorTagCards}}
<div class="shadow-xl sm:px-2 px-5 pt-8 pb-10 rounded-lg mt-10 bg-white dark:bg-gray-900">
<div class="w-default flex content-center space-x-2 flex-wrap justify-around mx-auto ">
<div class="mt-2 text-center sm:text-left dark:text-gray-200">
<h3 class="text-2xl">Are we missing a connector?</h3>
<p>Let us know on the community forum, and we can start a discussion on development.</p>
</div>
<a href="https://speckle.community/new-topic?title=New%20Connector%20Request&category=features"
target="_blank"
class="mt-2 border-2 rounded-lg border-blue-500 bg-blue-500 hover:ring-4 transition p-4 flex text-white text-center justify-center">
<span class="self-center">New connector proposal</span>
</a>
</div>
</div>
<div class="prose prose-blue lg:prose-xl mx-auto dark:prose-dark my-10 px-4 md:px-0">
{{content}}
</div>
{{/post}}
+213
View File
@@ -0,0 +1,213 @@
{{!< default}} {{#post}} <article id="top" class="w-default mx-auto mb-10">
<div class="w-full p-0 mx-auto grid gap-0 md:gap-4 grid-cols-7"
x-data="{ collapseToc: window.innerWidth < 768, isMobile: false, openToc: false }"
@load.window="isMobile = window.innerWidth < 768; collapseToc = isMobile;"
@resize.window="isMobile = window.innerWidth < 768; collapseToc = isMobile;">
{{!-- Header --}}
<figure class="col-span-7 md:col-span-2 flex items-center justify-center rounded-xl overflow-hidden mt-10">
{{#if feature_image}}
<img 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: 800px) 400px,
(max-width: 1170px) 1170px,
2000px" src="{{img_url feature_image size=" xl"}}" alt="{{title}}" />
{{/if}}
</figure>
<header x-ref="header" class="title-wrapper my-10 col-span-7 md:col-span-5 max-w-full">
<div class="prose dark:prose-dark lg:prose-xl mx-auto">
<span class="gh-post-meta text-sm"><time datetime="{{date format=" YYYY-MM-DD"}}">{{date format="D MMM
YYYY"}}</time>
<span class="bull">&bull;</span>
{{reading_time}}
</span>
<h1 class="gh-title">{{title}}</h1>
</div>
<div class="max-w-prose mx-auto my-4">
{{#foreach tags}}
<a class="rounded-full py-1 px-3 bg-blue-500 text-white mr-2 inline-block hover:ring-4 transition"
href="{{url}}">
{{name}}
</a>
{{/foreach}}
</div>
<div class="prose dark:prose-dark lg:prose-xl mx-auto">
{{#if custom_excerpt}}
<p class="italic">{{custom_excerpt}}</p>
{{/if}}
</div>
<div class="authors mt-4 max-w-prose mx-auto grid grid-cols-3 gap-2">
{{#foreach authors}}
<div class="author flex items-center col-span-1">
{{#if profile_image}}
<div class="inline-block rounded-full overflow-hidden">
<img class="h-8 w-8" src="{{img_url profile_image size=" xs"}}" alt="{{name}}" />
</div>
{{else}}
<div class="h-8 w-8 mr-2">{{> "icons/avatar"}}</div>
{{/if}}
<span class="ml-2 text-gray-800 dark:text-gray-200 text-sm">{{name}}</span>
</div>
{{/foreach}}
</div>
</header>
{{!-- TOC --}}
<aside
class="toc-wrapper col-span-7 md:col-span-2 shadow-xl md:shadow-none rounded-lg p-3 md:p-1 bg-gray-50 dark:bg-gray-900 md:bg-transparent sticky top-16 md:relative md:top-0 z-20">
<div class="md:sticky md:top-20">
<div class="">
<div class="font-medium">
<button class="flex font-medium text-blue-500" @click="openToc = !openToc;">
{{!-- <span class="self-center text-blue-500">{{title}}</span> --}}
<span class="text-blue-500">In this page</span>
<svg xmlns="http://www.w3.org/2000/svg"
class="transition transform self-center block md:hidden t-1 h-5 w-5"
:class="{'rotate-180' : (!collapseToc || !isMobile || openToc) }" viewBox="0 0 20 20"
fill="currentColor">
<path fill-rule="evenodd"
d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
clip-rule="evenodd" />
</svg>
</button>
</div>
</div>
<div x-ref="toc" class="origin-top pb-0 md:pb-3 max-h-full" x-show="!collapseToc || !isMobile || openToc"
@click="openToc=false" x-transition:enter="transition ease-out duration-100"
x-transition:enter-start="opacity-0 transform scale-y-0"
x-transition:enter-end="opacity-100 transform scale-y-100"
x-transition:leave="transition ease-in duration-100"
x-transition:leave-start="opacity-100 transform scale-y-100"
x-transition:leave-end="opacity-0 transform scale-y-0">
<div class="toc"></div>
<div class="pt-2 border-t dark:border-gray-800 md:border-t-0">
<a href="" onclick="event.preventDefault(); window.scrollTo({ top: 0, behavior: 'smooth' });"
class="inline-flex -ml-2 pl-2 pr-4 py-1 items-center no-underline text-sm font-medium text-blue-500 transition-shadow shadow-none hover:shadow-lg w-full md:w-auto rounded-xl">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 11l5-5m0 0l5 5m-5-5v12" />
</svg>
Top
</a>
<p class="border-t dark:border-gray-800 mt-2 pt-2"></p>
<div>
{{#foreach tags}}
<a class="rounded-full py-1 px-3 bg-blue-500 text-white mr-2 inline-block hover:ring-4 transition"
href="{{url}}">
{{name}}
</a>
{{/foreach}}
</div>
</div>
</div>
</div>
</aside>
{{!-- Body --}}
<div
class="block post-content prose dark:prose-dark lg:prose-xl prose-blue mx-auto col-span-7 md:col-span-5 mt-4 w-full max-w-prose">
{{content}}
</div>
<div class="post-content mx-auto col-span-7 md:col-span-5 mt-4">
</div>
</div>
</article>
<div class="shadow-xl sm:px-2 px-5 pt-8 pb-10 rounded-lg mt-10 bg-white dark:bg-gray-900">
<div class="w-default flex content-center space-x-2 flex-wrap justify-around mx-auto ">
<div class="mt-2 text-center sm:text-left dark:text-gray-200">
<h3 class="text-2xl">Have a question you need answered?</h3>
<p>Submit your question on the forum and get help from the community.</p>
</div>
<a href="https://speckle.community/new-topic?title=Question:%20How%20can%20I%20...&category=help&tags=v2"
target="_blank"
class="mt-2 border-2 rounded-lg border-blue-500 bg-blue-500 hover:ring-4 transition p-4 flex text-white text-center justify-center">
<span class="self-center">Ask a question</span>
</a>
</div>
</div>
<aside class="w-default mx-auto mb-10 px-3" x-data="{}">
{{#if primary_tag}}
{{#get "posts" filter="tags:{{primary_tag.slug}}+id:-{{id}}" include="authors" limit="6" as |related_posts|}}
{{#if related_posts}}
<article class="read-next-card">
<header class="read-next-card-header">
{{#../primary_tag}}
<h3 class="text-xl dark:text-gray-100 mt-12 mb-4">Get to know Speckle more:</h3>
{{/../primary_tag}}
</header>
<div class="read-next-card-content grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
{{#foreach related_posts}}
<div class="grid-cols-1">
{{> cardTutorialSm }}
</div>
{{/foreach}}
</div>
</article>
{{/if}}
{{/get}}
{{/if}}
</aside>
{{/post}}
<script>
let postContent = Array.from(document.getElementsByClassName('post-content'))[0].innerHTML
let tips = postContent.match(/<p>::: tip(.*?):::<\/\p>/g)
let warnings = postContent.match(/<p>::: warning(.*?):::<\/\p>/g)
let dangers = postContent.match(/<p>::: danger(.*?):::<\/\p>/g)
let details = postContent.match(/<p>::: details([\s\S]+?):::<\/\p>/g)
if (tips)
tips.forEach(tip => {
let result = tip.match(/::: tip(.*?)</)
let tipTitle = result[1] && result[1] !== "" ? result[1] : 'Tip'
let newTip = `<div class="mb-4 border-l-4 border-blue-500 bg-white dark:bg-gray-900 px-4 py-2 rounded-lg transition-shadow shadow-sm hover:shadow-xl">` + tip.replace(`::: tip${result[1]}`, `<div class="font-bold text-blue-500 mb-2">${tipTitle}</div>`) + `</div>`
newTip = newTip.replace(":::", "")
newTip = newTip.replace("<br>", "")
postContent = postContent.replace(tip, newTip)
})
if (warnings)
warnings.forEach(tip => {
let result = tip.match(/::: warning(.*?)</)
let tipTitle = result[1] && result[1] !== "" ? result[1] : 'Warning'
let newTip = `<div class="mb-4 border-l-4 border-yellow-500 bg-white dark:bg-gray-900 px-4 py-2 rounded-lg transition-shadow shadow-sm hover:shadow-xl">` + tip.replace(`::: warning${result[1]}`, `<div class="font-bold text-yellow-500 mb-2">${tipTitle}</div>`) + `</div>`
newTip = newTip.replace(":::", "")
newTip = newTip.replace("<br>", "")
postContent = postContent.replace(tip, newTip)
})
if (dangers)
dangers.forEach(tip => {
let result = tip.match(/::: danger(.*?)</)
let tipTitle = result[1] && result[1] !== "" ? result[1] : 'Danger'
let newTip = `<div class="mb-4 border-l-4 border-red-500 bg-white dark:bg-gray-900 px-4 py-2 rounded-lg transition-shadow shadow-sm hover:shadow-xl">` + tip.replace(`::: danger${result[1]}`, `<div class="font-bold text-red-500 mb-2">${tipTitle}</div>`) + `</div>`
newTip = newTip.replace(":::", "")
newTip = newTip.replace("<br>", "")
postContent = postContent.replace(tip, newTip)
})
if (details)
details.forEach(detail => {
let result = detail.match(/::: details(.*?)</)
let detailTitle = result[1] && result[1] !== "" ? result[1] : 'Details'
let newDetails = `<details class="mb-4 w-full max-w-full bg-white dark:bg-gray-900 px-4 py-2 rounded-lg transition-shadow shadow-sm hover:shadow-xl">` + detail.replace(`::: details${result[1]}`, `<summary class="font-bold text-blue-500 my-2">${detailTitle}</summary>`) + `</details>`
newDetails = newDetails.replace(":::", "")
postContent = postContent.replace(detail, newDetails)
})
Array.from(document.getElementsByClassName('post-content'))[0].innerHTML = postContent
</script>
+39 -9
View File
@@ -15,12 +15,7 @@
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap"
rel="stylesheet">
{{!-- Simple little js lib --}}
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.0/dist/alpine.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
</head>
<body class="{{body_class}} bg-gray-100 dark:bg-gray-800">
@@ -31,14 +26,49 @@
{{> footer }}
{{ghost_foot}}
{{#is "home"}}
{{#is "post, page"}}
<script src="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.10.0/tocbot.min.js"></script>
<script>
tocbot.init({
tocSelector: '.toc',
contentSelector: '.post-content',
hasInnerContainers: true
});
</script>
{{/is}}
{{!-- swiper for connectors (homepage only) --}}
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
{{!-- Simple little js lib --}}
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.0/dist/alpine.min.js"></script>
{{!-- Search Lib --}}
<script src="https://cdn.jsdelivr.net/npm/searchinghost@1.6.0/dist/searchinghost.min.js"></script>
<script>
</script>
{{#is "post, page"}}
{{!-- Zoomable images --}}
<script src="https://cdn.jsdelivr.net/npm/medium-zoom@1.0.6/dist/medium-zoom.min.js"></script>
<script>
let margin = 150;
if(window.innerWidth < 1024) margin = 75
if(window.innerWidth < 768) margin = 20
if(window.innerWidth < 600) margin = 10
mediumZoom('.kg-image, .kg-gallery-image img',
{
margin: margin,
background: '',
scrollOffset: 0
})
</script>
{{/is}}
{{ghost_foot}}
</body>
+3 -3
View File
@@ -48,7 +48,7 @@
</div>
<div class="relative h-36 md:h-24 lg:h-48 rounded-2xl overflow-hidden transition hover:shadow-2xl p-5 flex col-span-2 sm:col-span-1 bg-white dark:bg-gray-900 ">
<a href="https://speckle.guide" class="flex w-full h-full">
<a href="https://speckle.guide/dev" class="flex w-full h-full">
<div class="block self-center w-full">
<div class="text-3xl font-semibold text-blue-600">
Docs →
@@ -75,7 +75,7 @@
{{/foreach}}
<div class="relative py-20 rounded-xl shadow hover:shadow-2xl bg-white dark:bg-gray-800 ring transition overflow-hidden flex col-span-2 md:col-span-1">
{{!-- <div class="relative py-20 rounded-xl shadow hover:shadow-2xl bg-white dark:bg-gray-800 ring transition overflow-hidden flex col-span-2 md:col-span-1">
<a href="/features" class="self-center">
<div class="absolute inset-0 bg-blue-500 opacity-10"
style="mix-blend-mode: multiply;"></div>
@@ -99,7 +99,7 @@
</blockquote>
</div>
</a>
</div>
</div> --}}
</div>
+3 -2
View File
@@ -2,7 +2,7 @@
"name": "speckle-starter-theme",
"description": "A custom theme for speckle",
"demo": "https://starter.ghost.io",
"version": "2.5.1",
"version": "2.4.2",
"engines": {
"ghost": ">=3.0.0",
"ghost-api": "v3"
@@ -65,7 +65,7 @@
"defaults"
],
"config": {
"posts_per_page": 6,
"posts_per_page": 12,
"image_sizes": {
"xxs": {
"width": 30
@@ -89,6 +89,7 @@
},
"dependencies": {
"@tailwindcss/aspect-ratio": "^0.2.1",
"@tailwindcss/forms": "^0.3.3",
"@tailwindcss/line-clamp": "^0.2.0",
"@tailwindcss/typography": "^0.4.1",
"cssnano-preset-advanced": "^4.0.7",
+2 -2
View File
@@ -37,7 +37,7 @@
<div class="w-default grid grid-cols-1 sm:grid-cols-2 gap-5 mb-10">
<div class="relative h-96 rounded-2xl overflow-hidden transition bg-white dark:bg-gray-900 hover:shadow-2xl p-5 flex justify-center text-center">
<div class="relative h-40 rounded-2xl overflow-hidden transition bg-white dark:bg-gray-900 hover:shadow-2xl p-5 flex justify-center text-center">
<a href="/careers" class="flex w-full h-full">
<div class="block self-center w-full">
<div class="text-3xl font-semibold text-blue-600">
@@ -49,7 +49,7 @@
</a>
</div>
<div class="relative h-96 rounded-2xl overflow-hidden transition bg-white dark:bg-gray-900 hover:shadow-2xl p-5 flex justify-center text-center">
<div class="relative h-40 rounded-2xl overflow-hidden transition bg-white dark:bg-gray-900 hover:shadow-2xl p-5 flex justify-center text-center">
<a href="/contact" class="flex w-full h-full">
<div class="block self-center w-full">
<div class="text-3xl font-semibold text-blue-600">
+3 -2
View File
@@ -5,7 +5,7 @@
<article class="relative">
<main class="w-default flex flex-wrap content-center mt-24 mb-10">
<div class="w-3/3">
<div class="w-3/3 text-center">
<h1 class="text-4xl tracking-tight font-extrabold text-gray-900 dark:text-gray-100 sm:text-5xl md:text-6xl">
<span class="inline-block xl:inline text-gradient text-gradient bg-gradient-to-r from-blue-500 to-blue-700">
{{title}}
@@ -18,6 +18,7 @@
</main>
{{!-- {{> pricingWithPro }} --}}
{{!-- {{> pricingRegister }} --}}
{{> pricing }}
<header class="mb-10 mt-24 px-4 lg:px-8 relative sm:px-6 pb-10">
@@ -31,7 +32,7 @@
</div>
</div> --}}
<div class="mx-auto max-w-prose object-center justify-center">
<div class="mx-auto max-w-prose prose dark:prose-dark object-center justify-center">
<h1>
<span class="font-extrabold leading-8 text-4xl text-gray-700 tracking-tight mt-12 dark:text-gray-100 ">
Q&As:
+2 -2
View File
@@ -1,6 +1,6 @@
<div class="flex flex-col rounded-lg transition shadow hover:shadow-2xl overflow-hidden">
<div class="flex-shrink-0 ">
<a href="{{url}}" class="block mt-2">
<div class="flex-shrink-0">
<a href="{{url}}" class="block">
{{#if feature_image}}
<img class="h-48 w-full object-cover" srcset="{{img_url feature_image size="s"}} 300w,
{{img_url feature_image size="m"}} 600w,
+1 -1
View File
@@ -1,6 +1,6 @@
<div class="flex flex-col rounded-lg transition shadow hover:shadow-2xl overflow-hidden">
<div class="flex-shrink-0 ">
<a href="{{url}}" class="block mt-2">
<a href="{{url}}" class="block">
{{#if feature_image}}
<img class="h-32 w-full object-cover" srcset="{{img_url feature_image size="s"}} 300w,
{{img_url feature_image size="m"}} 600w,
+1 -1
View File
@@ -16,7 +16,7 @@
</p>
<div class="rounded-xl shadow-xl mt-5">
<a href="/getstarted"
class="flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white transition-colors bg-blue-600 hover:bg-blue-700 md:py-4 md:text-lg md:px-10">
class="flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white transition bg-blue-500 hover:ring-4 md:py-4 md:text-lg md:px-10">
{{#if buttonText}}
{{buttonText}}
{{else}}
+21
View File
@@ -0,0 +1,21 @@
<div class="flex flex-col rounded-lg transition shadow hover:shadow-2xl overflow-hidden w-full h-60">
<div class="flex-1 bg-white dark:bg-gray-900 dark:text-gray-200 p-6 flex flex-col justify-between">
<div class="flex-1">
<a href="{{url}}" class="block mt-2">
<p class="text-xl font-semibold text-gray-900 dark:text-gray-200">
{{title}}
</p>
<p class="mt-3 text-sm text-gray-500 line-clamp-2">
{{excerpt}}
</p>
</a>
</div>
<div class="mt-6 flex items-center">
<div class="">
<p class="text-sm font-medium text-gray-900 dark:text-gray-200">
<span class="text-gray-500"> <time datetime="{{date format="YYYY-MM-DD"}}">{{date format="D MMM YYYY"}}</time></span>
</p>
</div>
</div>
</div>
</div>
+35
View File
@@ -0,0 +1,35 @@
<div class="flex flex-col rounded-lg transition shadow hover:shadow-2xl overflow-hidden border-solid {{#if featured}}border-8 border-blue-500 border-opacity-50 {{/if}}">
<div class="flex-shrink-0">
<a href="{{url}}" class="block">
{{#if feature_image}}
<img class="h-40 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}}">
{{else}}
<div class="h-40 w-full block bg-gradient-to-r from-blue-400 to-blue-300 dark:from-blue-900 dark:to-blue-700">&nbsp;</div>
{{/if}}
</a>
</div>
<div class="flex-1 bg-white dark:bg-gray-900 dark:text-gray-200 p-6 flex flex-col justify-between">
<div class="flex-1">
<a href="{{url}}" class="block mt-2">
<p class="text-xl font-semibold text-gray-900 dark:text-gray-200">
{{title}}
</p>
<p class="mt-3 text-base text-gray-500 line-clamp-3">
{{excerpt}}
</p>
</a>
</div>
<div class="mt-6 flex items-center">
<div class="">
<p class="text-sm font-medium text-gray-900 dark:text-gray-200">
<span class="text-gray-500"> <time datetime="{{date format="YYYY-MM-DD"}}">{{date format="D MMM YYYY"}}</time></span>
</p>
</div>
</div>
</div>
</div>
+47
View File
@@ -0,0 +1,47 @@
<div class="flex flex-col rounded-lg transition hover:ring-4 shadow hover:shadow-2xl overflow-hidden">
<div class="flex-shrink-0">
<a href="{{url}}" class="block relative">
{{#if feature_image}}
<img class="h-32 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}}">
{{else}}
<div class="h-32 w-full block bg-blue-500">&nbsp;</div>
{{/if}}
{{#if featured}} <span class="absolute bottom-3 left-3 text-white">
<svg xmlns="http://www.w3.org/2000/svg" class="h-7 w-7" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd"
d="M5 2a1 1 0 011 1v1h1a1 1 0 010 2H6v1a1 1 0 01-2 0V6H3a1 1 0 010-2h1V3a1 1 0 011-1zm0 10a1 1 0 011 1v1h1a1 1 0 110 2H6v1a1 1 0 11-2 0v-1H3a1 1 0 110-2h1v-1a1 1 0 011-1zM12 2a1 1 0 01.967.744L14.146 7.2 17.5 9.134a1 1 0 010 1.732l-3.354 1.935-1.18 4.455a1 1 0 01-1.933 0L9.854 12.8 6.5 10.866a1 1 0 010-1.732l3.354-1.935 1.18-4.455A1 1 0 0112 2z"
clip-rule="evenodd" />
</svg>
</span> {{/if}}
</a>
</div>
<div class="flex-1 bg-white dark:bg-gray-900 dark:text-gray-200 p-6 flex flex-col justify-between">
<div class="flex-1">
<a href="{{url}}" class="block mt-2">
<p class="text-xl font-semibold text-gray-900 dark:text-gray-200">
{{title}}
</p>
<p class="mt-3 text-sm text-gray-500 line-clamp-3 md:line-clamp-4">
{{excerpt}}
</p>
</a>
</div>
<div class="mt-6 flex">
<div class="">
<p class="text-sm font-medium text-gray-900 dark:text-gray-200">
{{#foreach authors}}
{{name}}
{{/foreach}}
<span aria-hidden="true">
&middot;
</span>
<span class="text-gray-500"> <time datetime="{{date format=" YYYY-MM-DD"}}">{{date format="D MMM
YYYY"}}</time></span>
</p>
</div>
</div>
</div>
</div>
+4
View File
@@ -0,0 +1,4 @@
<a href="/getstarted"
class="inline-block items-center justify-center px-8 py-3 transition text-base font-medium rounded-md text-white bg-blue-500 hover:ring-4 hover:shadow-3xl md:py-4 md:text-lg">
<span class="text-white no-underline">Get Started</span>
</a>
+2 -18
View File
@@ -35,7 +35,7 @@
</h3>
<ul class="mt-4 space-y-4">
{{#get "posts" filter="tags:features+featured:true" limit="3"}}
{{#get "posts" filter="tags:features+featured:true" limit="4"}}
{{#foreach posts}}
<li>
<a href="{{url}}" class="text-base text-gray-500 hover:text-gray-900 dark:hover:text-gray-100">
@@ -45,14 +45,6 @@
{{/foreach}}
{{/get}}
{{#get "tags" filter="slug:usecases" as |tag|}}
<li>
<a href="/features" class="text-base text-gray-900 dark:text-gray-200 hover:text-gray-900 dark:hover:text-gray-100">
See All
</a>
</li>
{{/get}}
</ul>
</div>
@@ -60,7 +52,7 @@
<div class=" text-center md:text-left pt-4 md:pt-0 w-full md:w-2/6 lg:w-1/6">
<h3 class="text-sm font-semibold text-gray-800 dark:text-gray-200 tracking-wider uppercase">
Developers
<a href="/developers">Developers</a>
</h3>
<ul class="mt-4 space-y-4">
@@ -74,14 +66,6 @@
{{/foreach}}
{{/get}}
{{#get "tags" filter="slug:usecases" as |tag|}}
<li>
<a href="/developers" class="text-base text-gray-900 dark:text-gray-200 hover:text-gray-900 dark:hover:text-gray-100">
See All
</a>
</li>
{{/get}}
</ul>
</div>
+59
View File
@@ -0,0 +1,59 @@
<div class="pt-10 mx-10">
<div class="swiper-container connector-swiper mx-auto">
<div class="swiper-wrapper mb-10">
{{#get "tags" limit="all" filter="slug:-[features,developers,careers,blog,connectors]"}}
{{#foreach tags }}
<div
class="swiper-slide group dark:text-gray-200 text-gray-600 p-2 flex flex-col prose-blue prose dark:prose-dark max-w-none
shadow-lg dark:bg-gray-900 bg-gray-100 rounded-xl
">
<div>
<img class="mx-auto w-32 transition-transform transform group-hover:scale-110 object-contain"
src="{{feature_image}}">
</div>
<div>
<h2 class="w-full mt-4">
{{name}}
</h2>
<p>{{description}}</p>
<h3><a href="{{url}}">Check out</a></h3>
</div>
</div>
{{/foreach}}
{{/get}}
</div>
</div>
</div>
<script>
var swiper = new Swiper(".connector-swiper", {
slidesPerView: 3,
spaceBetween: 20,
loop: true,
grabCursor: true,
pagination: {
el: ".swiper-pagination",
clickable: true
},
breakpoints: {
640: {
slidesPerView: 3,
spaceBetween: 20,
},
768: {
slidesPerView: 3,
spaceBetween: 40,
},
1024: {
slidesPerView: 3,
spaceBetween: 50,
},
1280: {
slidesPerView: 3,
spaceBetween: 50,
}
}
});
</script>
+227
View File
@@ -0,0 +1,227 @@
<div class="hidden sm:block lg:sticky w-default transform z-40 top-20 mt-5">
<div
class="bg-gradient-to-r from-blue-500 to-blue-700 px-5 pt-2 pb-3 flex flex-wrap items-center justify-start rounded-lg w-full text-white">
Send
<select id="from" name="from" class="block inline-block sm:w-auto mt-1 pl-3 mx-3 pr-10 py-2 text-base font-extrabold shadow-lg text-white bg-blue-500 dark:bg-blue-900 border-gray-300 foc
us:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md">
<option value="Select a connector">From</option>
{{#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 }}
<option value="{{name}}">{{name}}</option>
{{/foreach}}
{{/get}}
</select>
to
<select id="to" name="to"
class="block inline-block sm:w-auto mt-1 pl-3 mx-3 pr-10 py-2 text-base font-extrabold shadow-lg text-white bg-blue-500 dark:bg-blue-900 border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md">
<option value="Select a connector">To </option>
{{#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 }}
<option value="{{name}}">{{name}}</option>
{{/foreach}}
{{/get}}
</select>
<button class="mt-1" onclick="clearSelection()" id='clearbutton' style="display: none;">
<svg xmlns="http://www.w3.org/2000/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="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
</div>
<div class="relative flex items-center w-default mt-4 text-white"></div>
<div class="w-default pt-10 grid grid-cols-1 md:grid-cols-2 gap-0 gap-y-2 md:gap-6">
{{#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="group p-2 py-5 flex flex-row
shadow-sm hover:shadow-xl transition-shadow hover:ring dark:bg-gray-900 bg-white rounded-xl col-span-1 connector-card connector-{{name}}
">
<div class="flex flex-shrink-0 items-center justify-center mx-6">
<img class="mx-auto h-32 w-32 transition-transform transform group-hover:scale-110 object-contain"
src="{{feature_image}}">
</div>
<div class="flex flex-grow flex-col justify-center">
<h2 class="text-xl dark:text-gray-50 text-gray-900 font-bold flex items-center group-hover:text-blue-500">
{{name}}
<svg xmlns="http://www.w3.org/2000/svg"
class="ml-2 h-6 w-6 transition-opacity opacity-0 group-hover:opacity-100" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3" />
</svg>
</h2>
<p class="text-sm dark:text-gray-400 text-gray-600 line-clamp-3">{{description}}</p>
</div>
</a>
{{/foreach}}
{{/get}}
<div class="col-span-2" id="tutorial-links">
<input type="text" name="search" id="search-bar"
class="hidden focus:ring-blue-500 focus:border-blue-500 transition w-full pl-10 sm:text-sm border-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:text-white rounded-md h h-12"
placeholder="Search...">
<div id="some-tutorials" class="w-full text-xs text-center dark:text-white hidden">Some tutorials:</div>
<div id="search-results" class="mt-4 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3"></div>
</div>
<div
class="group dark:text-gray-200 text-gray-600 p-2 col-span-2 tip-card flex flex-col justify-center items-center my-10 dark:bg-gray-900 bg-white rounded-xl shadow-xl py-10"
id='tipcontainer' style="display: none;">
<div class="prose-blue prose prose-sm dark:prose-dark max-w-none">
<h3 id="tip-text" class="text-center"></h3>
</div>
<div class="my-4">
{{> ctaButton}}
</div>
<div class="prose prose-sm dark:prose-dark">
<p>For the full details, check our list of <a href="https://speckle.guide/user/support-tables.html">supported
elements</a>.</p>
</div>
</div>
</div>
<script>
document.getElementById('from').addEventListener('change', fromSelect)
document.getElementById('to').addEventListener('change', toSelect)
let selection = [null, null]
function fromSelect(event) {
selection[0] = event.target.value
filterCards()
}
function toSelect(event) {
selection[1] = event.target.value
filterCards()
}
function clearSelection() {
selection[0] = null
selection[1] = null
document.getElementById('from').value = 'Select a connector'
document.getElementById('to').value = 'Select a connector'
filterCards()
document.getElementById('clearbutton').style.display = 'none'
document.getElementById('tipcontainer').style.display = 'none'
document.getElementById('search-bar').value = ''
document.getElementById('search-bar').dispatchEvent(new Event('keyup'))
}
function filterCards() {
console.log(tips[selection[0] + selection[1]])
if (selection[0] === 'Select a connector' || !selection[0]) {
[].forEach.call(document.getElementsByClassName(`connector-card`), el => el.style.display = 'flex')
return
}
document.getElementById('clearbutton').style.display = 'flex'
document.getElementById('search-bar').value = selection[0]
document.getElementById('search-bar').dispatchEvent(new Event('keyup'))
;[].forEach.call(document.getElementsByClassName(`connector-card`), el => el.style.display = 'none')
document.getElementsByClassName(`connector-${selection[0]}`)[0].style.display = 'flex'
if (selection[1] === 'Select a connector' || !selection[1]) return
document.getElementsByClassName(`connector-${selection[1]}`)[0].style.display = 'flex'
if (tips[selection[0] + selection[1]]) {
document.getElementById('tip-text').innerHTML = tips[selection[0] + selection[1]]
} else {
document.getElementById('tip-text').innerHTML = 'Let us know how you use this workflow on the <a href="https://speckle.community">community forum</a>!'
}
document.getElementById('tipcontainer').style.display = 'flex'
document.getElementById('search-bar').value = selection[0] + ' ' + selection[1]
document.getElementById('search-bar').dispatchEvent(new Event('keyup'))
}
const tips = {
'GrasshopperExcel': `Yep, it works nicely - parametric schedules here we come!`,
'GrasshopperRevit': `Using our advanced BIM creation nodes, you generate a full building in Grasshopper and send it to Revit!`,
'RhinoGrasshopper': `Planning to distribute your design tasks across a team? Speckle can help you do that!`,
'GrasshopperRhino': `Planning to distribute your design tasks across a team? Speckle can help you do that!`,
'AutocadGrasshopper': `Turbocharge drafting with some parametric smartness. Defo worth it!`,
'GrasshopperAutocad': `Turbocharge drafting with some parametric smartness. Defo worth it!`,
'Civil3dGrasshopper': `Turbocharge infrastructure design with some parametric smartness. Defo worth it!`,
'GrasshopperCivil3d': `Turbocharge infrastructure design with some parametric smartness. Defo worth it!`,
'DynamoRevit': `Hm... you know you can just open Dynamo up in Revit, right?`,
'RevitDynamo': `Hm... you know you can just open Dynamo up in Revit, right?`,
'RhinoRevit': `Sketch your design in Rhino, and get it into Revit using Speckle's BIM tagging tools!`,
'ExcelRevit': `So you want to control properties of specific Revit elements from Excel? Yes you can.`,
'RevitExcel': `Scheduling much? Let Speckle help!`,
'ExcelExcel': `Excel to Excel workflows work quite well - especially for a distributed team!`,
'ExcelRhino': `You can actually create full on geometry and BIM elements from Excel, send them to Speckle, and receive them in Rhino.`,
'ExcelGrasshopper': `You can actually create full on geometry and BIM elements from Excel, send them to Speckle, and receive in Grasshopper.`,
'ExcelDynamo': `You can actually create full on geometry and BIM elements from Excel, send them to Speckle, and receive them in Dynamo.`,
'ExcelBlender': `You can actually create full on geometry and BIM elements from Excel, send them to Speckle, and receive them in Blender.`,
'ExcelAutocad': `You can actually create full on geometry and BIM elements from Excel, send them to Speckle, and receive them in Autocad.`,
'UnityRhino': `Visualisation has never been easier - combine multiple models, do walkthroughs, send data back to inform your designs!`,
'RhinoUnity': `Visualisation has never been easier - combine multiple models, do walkthroughs, send data back to inform your designs!`,
'UnrealRhino': `Visualisation has never been nicer - combine multiple models in AR/XR, do walkthroughs, send data back to inform your designs!`,
'RhinoUnreal': `Visualisation has never been nicer - combine multiple models in AR/XR, do walkthroughs, send data back to inform your designs!`,
'UnrealRevit': `Visualisation has never been nicer - combine multiple models in AR/XR, do walkthroughs, send data back to inform your designs!`,
'RevitUnreal': `Visualisation has never been nicer - combine multiple models in AR/XR, do walkthroughs, send data back to inform your designs!`,
}
window.addEventListener('load', () => {
const tutorialSearchConnectors = new SearchinGhost({
key: window.searchKey,
loadOn: 'page',
postFields: ['title', 'url', 'excerpt', 'published_at'],
postsExtraFields: ['tags'],
customProcessing: function (post) {
if (post.tags && post.tags.length !== 0) {
post.firstTag = post.tags[0].name.toLowerCase()
post.string_tags = post.string_tags = post.tags.map(o => o.name).join(' ').toLowerCase()
}
else post.firstTag = "no-tag"
return post
},
outputChildsType: '',
limit: 3,
searchOptions: {
where: {
firstTag: "tutorials"
},
},
onSearchEnd: function (posts) {
console.log(posts.length)
if( posts.length !== 0 ) {
document.getElementById('some-tutorials').style.display = 'block'
} else {
document.getElementById('some-tutorials').style.display = 'none'
}
},
template: function (post) {
return `
<div class="flex flex-col rounded-lg transition shadow hover:shadow-2xl overflow-hidden w-full">
<div class="flex-1 bg-white dark:bg-gray-900 dark:text-gray-200 p-6 flex flex-col justify-between">
<div class="flex-1">
<a href="${post.url}" class="block mt-2">
<p class="font-semibold text-gray-900 dark:text-gray-200 line-clamp-2">
<span class="text-xs py-0 px-2 rounded border border-blue-500 text-blue-500">${post.firstTag}</span> ${post.title}
</p>
<p class="mt-3 text-sm text-gray-500 line-clamp-2">
${post.excerpt}
</p>
</a>
</div>
</div>
</div>
`
}
})
window.srch = tutorialSearchConnectors
})
</script>
+2 -2
View File
@@ -6,7 +6,7 @@
<div>
<div class="relative border-l-4 dark:border-gray-700">
<h2 class="text-4xl pl-5 mb-5 font-bold text-blue-600">Blog</h2>
<h2 class="text-4xl pl-5 mb-5 font-bold text-blue-500">Blog</h2>
<p class=" pl-5 text-lg text-gray-800 dark:text-gray-400">
Latest news from Speckle.
</p>
@@ -15,7 +15,7 @@
<div class="relative mt-5 rounded-xl py-5 hover:shadow-2xl transition overflow-hidden flex">
<a href="/blog" class="w-full self-center">
<div class="relative px-5">
<div class="text-lg font-semibold text-blue-600">
<div class="text-lg font-semibold text-blue-500">
Read More →
</div>
</div>
+99 -154
View File
@@ -1,173 +1,107 @@
<div class="perspective-700 overflow-hidden max-w-full w-full">
<div class="relative perspective-700 overflow-hidden max-w-full w-full z-30">
<div
class="perspective-transform w-full md:w-2/3 lg:w-1/2 mx-auto dark:bg-gray-900 bg-gray-200 prose lg:prose-lg dark:prose-dark max-w-none text-center rounded-t-3xl pt-10 pb-6 mt-10 -mb-12">
<div class="px-4">
<h1><span class='text-blue-500'>Speckle</span> Connectors</h1>
{{#get "posts" filter="primary_tag:features+featured:true+title:'Interoperability'" limit="5"}}
{{#foreach posts}}
<p class="pb-4">{{excerpt}}</p>
{{/foreach}}
{{/get}}
{{!-- <h1>Why <span class='text-blue-500'>Speckle?</span></h1> --}}
{{!-- <p>Speckle goes beyond point-to-point interoperability: it's data infrastructure for the built environment.
</p> --}}
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 justify-around">
<div id="prev"
class="px-1 lg:px-4 flex-shrink transition text-blue-500 flex bg-none dark:hover:bg-gray-800 hover:bg-gray-100 opacity-40 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">
<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="px-1 lg:px-4 flex-shrink transition text-blue-500 flex bg-none dark:hover:bg-gray-800 hover:bg-gray-100 opacity-40 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="bg-gradient-to-t from-transparent dark:to-gray-900 to-gray-200 pt-20"> --}}
<div class="dark:bg-gray-900 bg-gray-200 pt-10">
{{!-- <p class="text-gray-500 text-center text-xs w-full">Speckle Connectors</p> --}}
<div class="swiper-container connector-swiper mx-auto">
<div class="swiper-wrapper mb-10">
<div
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="{{asset 'images/rhino.png'}}">
<p class="w-full mt-4 opacity-0 group-hover:opacity-100 transition-opacity">
Rhino
</p>
</div>
<div
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 object-contain"
src="{{asset 'images/gh.png'}}">
<p class="w-full mt-4 opacity-0 group-hover:opacity-100 transition-opacity">
Grasshopper
</p>
</div>
{{!-- unccomment in stage 2 --}}
{{!-- <div
class="swiper-slide group p-2 bg-white h-full rounded-xl text-center content-center flex flex-wrap justify-center h-auto">
<p class="w-full mt-4 opacity-0 group-hover:opacity-100 transition-opacity">
Check out all our connectors!
</p>
</div> --}}
<div
class="swiper-slide group dark:text-gray-200 text-gray-600 p-2 text-center content-center flex flex-wrap justify-center"
style="">
<img class="mx-auto w-32 transition-transform transform group-hover:scale-110"
src="{{asset 'images/revit.png'}}">
<p class="w-full mt-4 opacity-0 group-hover:opacity-100 transition-opacity">
Revit
</p>
</div>
<div
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="{{asset 'images/dyn.png'}}">
<p class="w-full mt-4 opacity-0 group-hover:opacity-100 transition-opacity">
Dynamo
</p>
</div>
<div
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="{{asset 'images/unity.png'}}">
<p class="w-full mt-4 opacity-0 group-hover:opacity-100 transition-opacity">
Unity
</p>
</div>
<div
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="{{asset 'images/blender.png'}}">
<p class="w-full mt-4 opacity-0 group-hover:opacity-100 transition-opacity">
Blender
</p>
</div>
<div
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="{{asset 'images/acad.png'}}">
<p class="w-full mt-4 opacity-0 group-hover:opacity-100 transition-opacity">
Autocad & Civil3D
</p>
</div>
<div
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="{{asset 'images/unreal.png'}}">
<p class="w-full mt-4 opacity-0 group-hover:opacity-100 transition-opacity">
Unreal
</p>
</div>
<div
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="{{asset 'images/excel.png'}}">
<p class="w-full mt-4 opacity-0 group-hover:opacity-100 transition-opacity">
Excel
</p>
<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 class="swiper-pagination"></div>
</div>
{{/foreach}}
{{/get}}
</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:-'Interoperability'" 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>
var swiper = new Swiper(".connector-swiper", {
<script>
window.addEventListener('load', (event) => {
let swiper = new Swiper(".connector-swiper", {
slidesPerView: 3,
spaceBetween: 20,
loop: true,
grabCursor: true,
pagination: {
el: ".swiper-pagination",
clickable: true
autoplay: {
delay: 2000,
disableOnInteraction: false,
pauseOnMouseEnter: true
},
breakpoints: {
640: {
slidesPerView: 3,
spaceBetween: 20,
},
768: {
slidesPerView: 4,
spaceBetween: 40,
},
1024: {
slidesPerView: 5,
spaceBetween: 50,
},
@@ -176,5 +110,16 @@
spaceBetween: 50,
}
}
});
</script>
})
swiper.slideTo(6, 1000)
document.getElementById('prev').onclick = function () {
swiper.slidePrev(200)
}
document.getElementById('next').onclick = function () {
swiper.slideNext(200)
}
})
</script>
+2 -2
View File
@@ -5,7 +5,7 @@
<div class="w-default mt-36 my-0 grid grid-cols-1 lg:grid-cols-2 gap-10 mb-10 ">
<div class="relative">
<div class="border-l-4 dark:border-gray-700">
<h2 class="text-4xl pl-5 mb-5 font-bold text-blue-600">Built
<h2 class="text-4xl pl-5 mb-5 font-bold text-blue-500">Built
for developers</h2>
<p class=" pl-5 text-lg text-gray-800 dark:text-gray-400">
We're building the <code>git</code> of AEC -
@@ -44,7 +44,7 @@
<div class="relative rounded-xl py-5 hover:rounded-2xl shadow hover:shadow-2xl dark:hover:bg-gray-800 bg-white dark:bg-gray-900 transition overflow-hidden flex">
<a href="/developers" class="w-full self-center">
<div class="relative px-8">
<div class="text-xl font-semibold text-blue-600">
<div class="text-xl font-semibold text-blue-500">
Start Developing →
</div>
</div>
-43
View File
@@ -1,43 +0,0 @@
<div class="relative w-default container mb-10 mx-auto mt-4 sm:mt-10 md:mt-5 opacity-75">
<div class="text-gray-500 text-center text-xs w-full mb-10">
Seen in the wild at
</div>
<div class="grid grid-cols-2 sm:grid-cols-4 gap-4 text-gray-500 dark:text-gray-600">
{{!-- Arup --}}
<div class="p-3 h-20 flex items-center justify-center">
<svg viewBox="0 0 1430 496" class="w-24 h-24" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2"><path d="M668.627 0C532.213 0 420.774 111.436 420.774 247.852s111.439 247.854 247.853 247.854c136.416 0 247.854-111.441 247.854-247.854S805.043-.001 668.627-.001zm0 475.212c-125.527 0-227.999-101.832-227.999-228s101.832-227.998 228-227.998c125.528 0 228 101.83 228 227.999 0 126.167-103.114 227.999-228 227.999zm-468.17-251.055c-90.298-16.012-158.825-35.225-158.825-100.55 0-64.045 59.561-103.753 142.18-103.753 69.167 0 125.527 29.46 157.549 71.73l17.292-10.248C323.427 33.303 261.3-.001 184.447-.001 89.663 0 21.776 47.393 21.776 123.606c0 78.135 76.213 102.472 176.762 119.764 91.585 16.012 161.394 40.346 161.394 114.637 0 72.372-67.889 116.564-162.674 116.564-80.056 0-144.74-37.145-179.325-89.662L0 395.794c37.786 58.921 108.236 99.27 195.977 99.27 106.315 0 183.168-51.877 183.168-137.057 0-87.098-76.853-115.918-178.685-133.85h-.003zm800.561-185.73h.642l192.776 451.516h21.775l191.495-451.516h.636v451.516h21.145V5.763h-32.027l-191.494 456h-.64l-194.06-456h-30.1V489.3h19.854V38.427h-.002z" fill="#888" fill-rule="nonzero"/></svg>
</div>
{{!-- Woods B --}}
<div class="p-3 h-20 text-center align-center flex items-center justify-center">
<svg class="w-24 h-24" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" clip-rule="evenodd" viewBox="0 0 1212 503"><defs/><path fill="gray" fill-rule="nonzero" d="M1141.9 76.6h61.7c-.3-53.7-47.8-76.6-95-76.6-44.6 0-96.7 20.5-96.7 72.3 0 43.7 35.7 58.9 69.5 68.5 34.1 9.6 68.2 13.6 68.2 34.4 0 17.7-19.2 24.2-37.8 24.2-26.4 0-43.7-9-45-36.9h-62c.3 60.8 48.7 84.7 103 84.7 52 0 103.5-19.3 103.5-79.4 0-42.8-34.7-59-68.8-68.6-34.7-9.6-68.9-13-68.9-31.3 0-15.5 16.8-20.1 30.1-20.1 19 0 39 7 38.2 28.8m-137.4 46.2C1004.5 49.3 960.8 5 888.2 5h-102v237.5h102c72 0 116.3-41.9 116.3-119.7m-61.7-.3c0 47.4-18.6 65.7-65.5 67h-29.1V58.3h29.1c41.9 0 65.5 20.8 65.5 64.2M779 123.7C779 55 736.8 0 661.8 0c-74.7 0-117.2 54.9-117.2 123.7 0 68.9 42.2 123.8 117.2 123.8S779 192.5 779 123.7m-62 0c0 35.4-15.2 70.4-55.2 70.4s-55.2-35.3-55.2-70.4c0-35.3 15.2-70.4 55.2-70.4s55.2 35 55.2 70.4m-176.8 0C540.2 55 498.1 0 423.3 0c-74.7 0-117.2 54.9-117.2 123.7 0 68.9 42.2 123.8 117.2 123.8 74.8 0 117-55 117-123.8m-62 0c0 35.4-15.3 70.4-55.3 70.4s-55.2-35.3-55.2-70.4c0-35.3 15.2-70.4 55.2-70.4s55.2 35 55.2 70.4M259 242.5L320.4 5h-62l-33.6 173.6h-.6L189.2 5h-58l-35 173.6h-.7L62 5H0l60.2 237.5h63l36.5-163.7h.6L197 242.5h62zm-86.6 17.4H61.1v237.5h114.1c50.9 0 92.4-17.3 92.4-73.8a56 56 0 00-40.9-56.1 53.6 53.6 0 0031.3-48c0-49.7-45-60.2-85.6-59.6m-49.3 133.3h49.6c18.7 0 33.2 6.8 33.2 28 0 19.5-13.6 26.6-33.2 26.6h-49.6v-54.6zm47.8-85.6c13 0 25.4 5.6 25.4 23 0 16.7-14.6 22.6-25.4 22.6H123v-45.6H171zM342.7 260L254 497.4h63.6l14.9-42.5h82.8l14.5 42.5h64.5L405.6 260h-62.9zm4 148.8l27-83h.6l26.4 83h-54zm123.5-30c0 68.8 46.5 123.7 118.4 123.7 22 0 50-8 66-31l3.8 26h40v-130h-99.9v46h43.1c-3.4 21.7-23.8 36-54.5 36-40 0-55.2-35.4-55.2-70.4 0-35.4 15.2-70.4 55.2-70.4 24.8 0 45 12.4 46.8 32.5h61.7c-5.6-59.5-58.3-85.9-107.3-85.9-71.6-.3-118.1 54.6-118.1 123.5m232 0c0 68.8 42.1 123.7 117.1 123.7 74.8 0 117.3-54.9 117.3-123.7 0-68.9-42.2-123.8-117.3-123.8-75 0-117.2 54.9-117.2 123.8m62 0c0-35.4 15.2-70.4 55.2-70.4s55.2 35.3 55.2 70.4c0 35.3-15.1 70.3-55.2 70.3-40 0-55.2-35-55.2-70.3M927 313.2h70.7v184.2h62V313.2h70.7V260H927v53.3zM1128 455h-34.2v4.7h14.3v37.8h5.5v-37.8h14.3v-4.7zm9.5 0h-7.7v42.5h5.2v-35.3l13.4 35.3h5l13.3-35.3v35.3h5.2V455h-7.7l-13.3 35.7-13.4-35.7z"/></svg>
</div>
{{!-- HOK --}}
<div class="p-3 h-20 text-center align-center flex items-center justify-center opacity-75">
<svg class="w-14 h-16" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" clip-rule="evenodd" viewBox="0 0 558 558"><defs/><path fill="gray" fill-rule="nonzero" d="M0 0h557.2v557.2H0z"/><path fill="#fff" fill-rule="nonzero" d="M87.4 11.8h20.3v309.4H87.4V333h83.2v-11.8h-21.7v-91.9c8-12.8 34.2-28.2 50.9-28.2 10.7 0 20.4 8.7 20.4 23.6v96.5H201V333h83.2v-11.8h-22.8V217.4c0-12-8.2-33.1-38.1-34.2-33.5-1.1-62.8 21.8-70 28.5-2.7 2.5-4.4.7-4.4-1.3V0H87.4v11.8zM280.9 245.1h34.8v-34.8h13.5v34.8h34.9v13.6h-34.9v34.7h-13.5v-34.7H281V245z"/><path fill="#fff" fill-rule="nonzero" d="M425 262.2l-.2 59h21.6V333h-83.2v-11.8h20.3V12h-20.3V0h61.6v244.6c0 2.2 2 3.3 4.3 1.4l67.4-54.5h-22.2v-11.8h68.4v11.8h-19c-7.9 0-19.8 6.3-26.4 11.7-8.4 7-15.7 12.8-15.7 12.8l64 105.2h11.6V333h-83v-11.8h21l-47.3-77.7-23 18.7z"/><path fill="#fff" d="M266 161.8c-49.4.1-84.2-34.1-84.2-75 0-40.7 34.8-75 84.3-75 49.4 0 84.2 34.3 84.2 75 0 40.9-34.8 75.1-84.2 75zm-39.5-75c0 56.6 16.6 63.4 39.6 63.7 23-.3 39.7-7.1 39.5-63.7.2-56.5-16.5-63.3-39.5-63.6-23 .3-39.7 7.1-39.6 63.6z"/></svg>
</div>
{{!-- Royal --}}
<div class="p-3 h-20 text-center align-center flex items-center justify-center">
<svg class="w-36 h-36" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" clip-rule="evenodd" viewBox="0 0 1280 469"><defs/><path fill="#848484" fill-rule="nonzero" d="M327.1 205.4h26.7c30.1 0 44.3 8.4 44.3 34.2 0 16-5.6 25.4-17 30.1l21.2 36.3v.4h-10.7c-7.1 0-10 0-13.6-6l-15.6-26.6h-16.9v32.6h-18.4v-101zm27.7 15.2h-9.3v38h9.3c16.4 0 24-3.7 24-19 0-15.4-7.6-19-24-19M445.6 230.9c23 0 34.7 12.1 34.7 38.5s-11.8 38.5-34.7 38.5c-23 0-34.7-12.1-34.7-38.5s11.7-38.5 34.7-38.5m0 63.1c11.4 0 16.6-7.7 16.6-24.6 0-16.9-5.2-24.6-16.6-24.6-11.6 0-16.6 7.7-16.6 24.6 0 16.9 5 24.6 16.6 24.6M503.8 332.5l9.8-26-27.6-73.7v-.5h16.8l12.9 35.8c2.8 7.8 4.6 13.8 6.2 20.6h.3a184 184 0 016.1-20.6l13-35.8h17.4v.5L523 327.7c-2 5.3-6.8 5.3-14 5.3h-5.3v-.5zM630 256v50.4h-4.2a30.2 30.2 0 01-9.7-5c-4.5 3.9-10.9 6.5-22.1 6.5-18.7 0-28.3-7-28.3-24.6 0-17.5 9.6-24.4 28.9-24.4 7 0 13 1.2 18 2.7v-4c0-9.5-3.8-12-16.8-12-8.7 0-16 1.1-24.5 2.8l-1.6-14.3a121 121 0 0129.2-3.2c21.5 0 31 7 31 25.2m-17.4 34.6v-16.6c-4.3-1.1-9-1.9-15.7-1.9-10 0-13 4.6-13 11.1 0 6.7 3 11.3 13 11.3 7.2 0 12-2 15.7-3.9M649.6 290.3v-70.6c0-7 0-11.5 17.5-15.8v81.8c0 4.9 2.2 6.2 5.6 6.2 2 0 3.4-.1 5-.3l.6 14.3c-3.5.8-8.4 1.3-13.6 1.3-9.4 0-15.1-4.9-15.1-16.9M381 398.4h-35.5V442h-18.4V340.9h18.4V383H381V341h18.4v101H381v-43.5zM482 391.6V442H478a31.2 31.2 0 01-9.8-5c-4.4 3.8-10.8 6.4-22 6.4-18.8 0-28.4-7-28.4-24.6 0-17.5 9.6-24.4 29-24.4a61 61 0 0117.8 2.7v-4c0-9.5-3.7-12-16.7-12-8.6 0-15.9 1.1-24.5 2.8l-1.6-14.3c9-1.9 16.2-3.2 29.2-3.2 21.5 0 31.1 7 31.1 25.2m-17.5 34.7v-16.7a57 57 0 00-15.7-1.9c-9.9 0-13 4.6-13 11.1 0 6.7 3.1 11.3 13 11.3 7.3 0 12-2 15.7-3.8M498.7 440.2l1.6-14c8.6 1.7 14.4 2.7 23 2.7 10 0 15.4-2 15.4-7.7 0-6.4-10-7.7-19-9.8-8.7-2-19.9-4.9-19.9-22.2 0-14.7 9-22.8 28.6-22.8 11.3 0 18.1 1.3 25.7 3.2l-1.6 14a86.7 86.7 0 00-21-2.7c-10 0-13.9 2-13.9 7.4 0 6.7 8.5 7.7 17.5 10 8.8 2.4 21.4 5 21.4 21.7 0 15.3-10.4 23.4-30.1 23.4a108 108 0 01-27.7-3.2M574 355.3c0-7 0-11.6 17.5-16V442H574v-86.7zm42.3 12.5h20.2v.5l-23.1 34 23.7 39.2v.5h-11c-4.4 0-9.3 0-13.2-6.4l-19.5-32.2 23-35.6zM679.8 366.4c23 0 34.7 12.1 34.7 38.5s-11.7 38.5-34.7 38.5c-23 0-34.7-12.1-34.7-38.5s11.7-38.5 34.7-38.5m0 63.1c11.4 0 16.6-7.7 16.6-24.6 0-16.9-5.2-24.6-16.6-24.6-11.6 0-16.6 7.7-16.6 24.6 0 16.9 5 24.6 16.6 24.6M731.4 367.8h4.1a34 34 0 017.7 3.6c4.6-3 11.5-5 21-5 19.8 0 29.4 7 29.4 30V442h-17.5v-43c0-14-3.6-17.8-13.6-17.8a30 30 0 00-13.6 3V442h-17.5v-74.2zM813.2 340.9h17.5v17.8h-17.5v-17.8zm0 27h17.5v74h-17.5v-74zM851.2 367.8h4.1c3.4 1.2 5.7 2.3 7.7 3.6 4.6-3 11.4-5 21-5 19.8 0 29.4 7 29.4 30V442H896v-43c0-14-3.7-17.8-13.6-17.8-6.1 0-10.2 1.3-13.6 3V442h-17.5v-74.2zM929.4 403.4c0-29.3 10.7-37 30.4-37 9.7 0 16.5 2 21 5 2.1-1.3 4.4-2.4 7.8-3.6h4.1v75.5c0 18-9.6 25.2-31.1 25.2a120 120 0 01-29.2-3.3L934 451a126 126 0 0024.5 2.7c13 0 16.7-2.4 16.7-11.9v-5.5c-4 2.7-9.2 3.9-15.4 3.9-19.7 0-30.4-7.7-30.4-36.8m45.8 19.1v-38.3c-3.4-1.7-7.7-3-13.6-3-10 0-14 3.8-14 22.2 0 18.1 4 22 14 22 6 0 10.2-1.4 13.6-2.9M1015 340.9h30.5c30 0 45.5 15.8 45.5 50.5 0 34.6-15.4 50.6-45.5 50.6h-30.6V340.9zm31.5 15.2h-13.2v70.6h13.2c16.3 0 25.2-11.1 25.2-35.3 0-24.3-8.9-35.3-25.2-35.3M1163.8 398.4h-35.4V442H1110V340.9h18.4V383h35.4V341h18.4v101h-18.4v-43.5zM1196.5 341.3v-.4h19.2l16 54.5c2.8 9.4 4.9 19.1 6.2 26h.3c1.2-6.9 3.3-16.6 6-26l14.6-48.6c1.6-5.3 7.1-6 14.2-6h6.4v.5L1247.7 442h-19.4l-31.8-100.7zM211.4 217.1l-60 51 17.2-99L79 86.3 178 115C103.8 29.1 0 46.7 0 46.7s25.2 86.9 121.1 126.9c-31.3 54.8-25.8 111.4-3.5 167.3l92-82.6c4 4.8 11.1 12 24.9 17.5a67.2 67.2 0 0050 .3l-73.1-59z"/><path fill="#848484" fill-rule="nonzero" d="M0 46.7s25.2 86.9 121.1 126.9c-31.3 54.8-25.8 111.4-3.5 167.3l92-82.6c4 4.8 11.1 12 24.9 17.5a67.3 67.3 0 0050 .3l-73.1-59-60 51 17.2-99L79 86.3 178 115A202.7 202.7 0 0023 45.2c-14.2 0-23 1.5-23 1.5zM232.4 89.1L243 3.7a59 59 0 00-62.4 13.6 58.4 58.4 0 000 82.7l10.8-62 35.7 91 65.4 18.8-43.8 37.7C335 177.2 370 114.2 370 114.2l-137.5-25z"/><g transform="translate(-2886.4 -1731.7) scale(8.33333)"><clipPath id="a"><path d="M368 209.9a7 7 0 000 10l1.3-7.5 4.3 10.9 7.9 2.2-5.3 4.6c10.4-1 14.6-8.6 14.6-8.6l-16.5-3 1.2-10.3c-.8-.3-1.7-.4-2.5-.4a7 7 0 00-5 2z" clip-rule="nonzero"/></clipPath><g clip-path="url(#a)"><path fill="#848484" d="M365.2 207.2h25.6V230h-25.6z"/></g></g></svg>
</div>
</div>
<div class="grid grid-cols-2 sm:grid-cols-4 gap-4 text-gray-500 dark:text-gray-600">
{{!-- BIG --}}
<div class="p-3 h-20 text-center align-center flex items-center justify-center">
<svg class="w-20 h-20" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" clip-rule="evenodd" viewBox="0 0 1111 504"><defs/><path fill="#8d8d8d" fill-rule="nonzero" d="M705.9 503.5V0h404.8v98.7h-306v306h207.2V301.2h-98.7v-98.7h197.5v301.1H705.9zm-197.5 0V0h93.8v503.5h-93.8zm-306-301.1V98.7H98.7v103.7h103.7zM306 404.8V301H98.7v103.7h207.4zM0 503.5V0h301l1.3 100 1.3 100 50.6 1.3 50.6 1.4v300.8H0z"/></svg>
</div>
{{!-- Sasaki --}}
<div class="p-3 h-20 text-center align-center flex items-center justify-center">
<svg class="w-24 h-36" viewBox="0 0 1756 459" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2"><g fill-rule="nonzero"><g fill="#a7a7a7"><path d="M92.083 177.339l41.86 25.81-32.294 52.822-41.854-25.81c-1.596-.803-3.985-2.404-7.177-4.803-24.713-17.606-40.858-41.615-48.434-72.029-7.97-33.61-2.987-65.021 14.953-94.233 17.935-29.211 43.45-47.82 76.537-55.824 31.491-6.803 60.393-3.003 86.702 11.406l7.172 3.601 46.044 28.813-32.887 52.817-46.044-28.21c-1.192-1.201-3.387-2.603-6.574-4.204-12.758-5.6-26.114-6.803-40.064-3.6-15.945 3.6-28.703 12.807-38.269 27.61-8.767 15.605-11.161 31.41-7.176 47.42 3.191 13.202 10.164 24.409 20.927 33.61.399.4.997.904 1.795 1.502a31.527 31.527 0 002.694 1.8c.992.599 1.69 1.103 2.09 1.502zM572.839 174.94v279.706H510.65V174.94h62.189zM386.872 454.646h-61.586V174.94h61.586v279.706zM845.502 233.762c26.31 18.807 42.653 44.214 49.032 76.228 6.379 32.01 1.197 62.024-15.546 90.033-11.56 18.808-26.807 33.312-45.745 43.516-18.932 10.204-38.967 15.306-60.093 15.306-20.33 0-39.466-4.603-57.401-13.805-1.596-1.202-3.99-2.598-7.177-4.2l-46.044-28.812 32.289-52.822 46.044 28.214c.798.4 3.386 1.8 7.775 4.2 13.551 6.004 27.8 6.703 42.753 2.1 14.947-4.6 26.408-13.507 34.378-26.709 8.374-13.206 11.262-27.41 8.673-42.617-2.593-15.207-9.665-27.61-21.226-37.212-3.192-2.404-5.78-4.204-7.776-5.406l-41.256-25.805 32.289-52.822 41.855 25.81c3.191 2.399 5.58 4 7.176 4.803zM1235.366 174.94v279.706h-62.188V174.94h62.188zM1049.404 454.646h-61.59V174.94h61.59v279.706zM1500.26 149.728l-43.655-43.815L1560.653 1.471l43.65 43.82-104.043 104.437zM1604.303 415.03l-43.65 43.815-104.048-104.437 43.655-43.82 104.043 104.443zM1325.056 455.244V5.072h61.59v450.172h-61.59zM1755.582 454.646h-61.59V229.557h61.59v225.089z"/></g><g fill="#959595"><path d="M182.975 233.762c26.308 18.807 42.652 44.214 49.031 76.228 6.38 32.01 1.197 62.024-15.546 90.033-11.56 18.808-26.812 33.312-45.745 43.516-18.937 10.204-38.967 15.306-60.093 15.306-20.33 0-39.466-4.603-57.406-13.805-1.59-1.202-3.985-2.598-7.172-4.2L0 412.029l32.289-52.822 46.044 28.214c.798.4 3.386 1.8 7.77 4.2 13.556 6.004 27.805 6.703 42.758 2.1 14.947-4.6 26.408-13.507 34.378-26.709 8.374-13.206 11.262-27.41 8.673-42.617-2.593-15.207-9.67-27.61-21.226-37.212-3.192-2.404-5.78-4.204-7.776-5.406l-41.26-25.805 32.293-52.822 41.855 25.81c3.187 2.399 5.58 4 7.177 4.803zM572.839 124.517v50.423H510.65v-50.423c0-17.207-5.98-31.91-17.94-44.114-11.96-12.205-26.508-18.31-43.65-18.31s-31.79 6.105-43.95 18.31c-12.159 12.204-18.238 26.907-18.238 44.114v50.423h-61.586v-50.423c0-34.414 12.055-63.72 36.174-87.93C385.58 12.375 414.776.275 449.06.275c34.284 0 63.485 12.1 87.6 36.314 24.119 24.209 36.179 53.515 36.179 87.929zM510.65 258.37v61.824H386.872V258.37H510.65zM754.611 177.339l41.86 25.81-32.289 52.822-41.86-25.81c-1.59-.803-3.985-2.404-7.172-4.803-24.717-17.606-40.862-41.615-48.438-72.029-7.97-33.61-2.987-65.021 14.953-94.233 17.935-29.211 43.45-47.82 76.537-55.824 31.49-6.803 60.393-3.003 86.702 11.406l7.177 3.601 46.039 28.813-32.887 52.817-46.04-28.21c-1.196-1.201-3.39-2.603-6.578-4.204-12.758-5.6-26.11-6.803-40.064-3.6-15.945 3.6-28.703 12.807-38.269 27.61-8.768 15.605-11.162 31.41-7.177 47.42 3.192 13.202 10.17 24.409 20.933 33.61.399.4.992.904 1.79 1.502a31.527 31.527 0 002.693 1.8c.998.599 1.696 1.103 2.09 1.502zM1235.366 124.517v50.423h-62.188v-50.423c0-17.207-5.98-31.91-17.94-44.114-11.955-12.205-26.508-18.31-43.65-18.31s-31.79 6.105-43.95 18.31c-12.154 12.204-18.234 26.907-18.234 44.114v50.423h-61.59v-50.423c0-34.414 12.06-63.72 36.174-87.93 24.12-24.213 53.321-36.313 87.6-36.313 34.284 0 63.485 12.1 87.6 36.314 24.119 24.209 36.178 53.515 36.178 87.929zM1173.178 258.37v61.824h-123.774V258.37h123.774zM1463.782 186.341c-11.96 12.005-17.94 26.613-17.94 43.82s5.98 31.81 17.94 43.815l36.478 36.612-43.655 43.82-36.473-36.618c-16.743-16.802-27.905-37.012-33.486-60.622v-54.02c5.98-24.408 17.142-44.617 33.486-60.622l36.473-36.613 43.655 43.815-36.478 36.613zM1755.582 229.557h-61.59V4.474h61.59v225.083z"/></g></g></svg>
</div>
{{!-- WSP --}}
<div class="p-3 h-20 mt-3 text-center align-center flex items-center justify-center">
<svg class="w-24 h-24" viewBox="0 0 934 439" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2"><path d="M869.754 119.438c0-49.823-18.238-91.387-42.05-118.618h69.215c22.719 27.682 36.76 74.771 36.76 118.618v.156c0 43.92-14.077 91.084-36.866 118.753h-69.216c23.848-27.232 42.157-68.845 42.157-118.753v-.156zM63.824 0H0l87.594 237.559h33.922l14.953-40.557L63.824 0zm171.229 0h-63.825l87.594 237.559h33.923l14.953-40.557L235.053 0zm487.554 438.944V.01h-61.07v438.934h61.07zM383.094 36.055c.988-12.17 3.21-24.158 8.256-35.235h55.845c-4.657 8.431-9.032 23.795-4.057 39.063 4.515 13.797 14.04 23.21 26.07 30.96 14.288 9.183 30.904 14.295 46.179 21.424 16.051 7.458 31.644 15.269 45.05 26.903 19.473 16.906 31.327 36.961 33.232 62.88.247 3.097.353 6.205.353 9.317 0 16.238-2.576 32.332-9.808 46.98h-57.362c5.645-9.596 10.09-22.677 9.278-34.75-2.01-29.93-38.558-46.288-69.18-59.905-4.656-2.078-9.243-4.117-13.617-6.156-13.441-6.293-26.67-13.518-38.136-23.054-11.853-9.85-20.884-19.713-26.388-34.177-4.868-12.693-6.632-26.455-5.997-39.984.07-1.422.177-2.844.282-4.266" fill="#848484" fill-rule="nonzero"/></svg>
</div>
<div class="p-3 h-20 text-center align-center flex items-center justify-center">
{{!-- Grimshaw --}}
<svg class="w-36 h-36" viewBox="0 0 2212 274" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2"><path d="M154.81 41.668c-31.608.284-55.725 9.417-72.583 27.325C65.21 87.002 56.61 109.802 56.61 137.602c0 27.608 8.175 49.933 24.5 67.083 16 18.017 38.525 27.158 67.45 27.35 14.767 0 26.617-1.225 35.767-3.783v-68.967H126.86v-41.758h109.375v142.591c-28.942 8.567-58.192 13.1-87.675 13.659-44.5 0-80.042-11.017-106.725-32.975C14.193 219.21.227 186.135-.007 141.46 1.802 48.168 51.335 1.052 148.56.002c30.525.3 57.025 3.975 79.533 11.041L224.66 55.81c-22.808-9.442-46.058-14.142-69.85-14.142M1831.75 4.542h57l50.442 211.566h.775l46.2-211.566h73.675l47.758 211.566h.75l50.833-211.566h52.809l-70.659 264.708h-69.8L2022.608 57.6h-.766l-48.075 211.65h-70.259L1831.75 4.542zM358.47 117.528h17.867c6.966 0 13.958-.466 20.958-1.408 6.7-.85 12.8-2.55 18.225-4.992 5.425-2.541 9.975-6.225 13.542-11.041 3.175-5.084 4.7-11.484 4.7-19.209 0-8.208-1.525-14.608-4.7-19.416-3.567-4.525-8.109-8.009-13.542-10.267-5.425-2.258-11.525-3.775-18.225-4.533-7-.284-13.992-.375-20.958-.375H358.47v71.241zM304.178 4.545h58.584c14.966 0 30 .192 44.983.367 15.008.775 28.708 3.308 41.117 7.641 12.716 4.059 22.766 11.117 30.316 21.209 7.217 9.8 11 24.033 11.234 42.5 0 15.65-4.9 29.116-14.767 40.516-9.8 11.409-23.5 18.384-41.092 20.834v.85c7.234.658 13.167 3.858 17.842 9.416 4.675 5.575 8.275 11.517 10.867 17.9l43.45 103.475h-60.509l-32.608-82.75c-3.392-9.791-7.617-16.941-12.825-21.191-5.4-4.042-13.692-6.017-24.833-6.017H358.47v109.958h-54.292V4.545z" fill="gray" fill-rule="nonzero"/><path fill="gray" d="M556.776 4.545h54.3v264.708h-54.3z"/><path d="M692.512 4.542h86.991l64.4 200.633h.734L909.103 4.542h86.867V269.25h-51.933V50.9h-.825l-72.934 218.35H818.27L745.337 50.9l-.767.75v217.6h-52.058V4.542zM1162.84 41.677c-4.683 0-9.325.566-13.992 1.608-4.925 1.025-9.575 2.908-13.991 5.65-4.142 2.525-7.609 6.3-10.5 11.392-2.784 4.8-4.209 10.933-4.209 18.183 0 5.475 1.784 10.183 5.434 14.042 3.633 3.775 8.158 7.266 13.566 10.183a173.914 173.914 0 0019.434 8.383c6.708 2.825 13.8 5.65 21.316 8.675 7.5 2.825 14.75 6.109 21.734 9.884 7.216 4.066 13.566 8.958 19 14.8 5.441 5.558 9.966 12.25 13.583 20.083 3.117 8.1 4.658 17.808 4.658 29.208-.516 28.55-10.466 48.992-29.85 61.442-19.408 12.342-43.3 18.575-71.783 18.575-13.95 0-25.767-1.058-35.325-3.025a898.998 898.998 0 01-34.167-7.25l5.067-47.8c19.142 10.65 39.542 16.125 61.292 16.325 11.108 0 21.875-2.833 32.241-8.292 10.284-5.566 15.592-14.233 15.834-25.825 0-6.241-1.542-11.783-4.584-16.3-3.65-4.533-8.2-8.3-13.608-11.316-11.875-6.142-25.5-11.975-40.708-17.525-7.55-3.025-14.634-6.6-21.367-10.559-7.017-3.766-13.475-8.3-19.367-13.666-5.516-5.559-10.016-12.25-13.616-20.167-3.625-7.825-5.459-16.967-5.459-27.517.542-29.408 10.492-50.416 29.934-63.041 18.541-11.875 40.191-17.825 64.75-17.825 23.275 0 44.875 3.216 64.808 9.533l-5.058 43.533c-17.309-7.341-35.725-11.108-55.067-11.391M1295.89 4.542h54.342v106.95h108.608V4.542h54.35V269.25h-54.35v-116.1h-108.608v116.1h-54.342V4.542zM1693.24 57.598h-.825l-39.175 109.217h79.142L1693.24 57.598zM1663.332 4.54h61.333l106.267 264.708h-60.125l-23.3-60.691h-109.784l-23.666 60.691h-56.234L1663.332 4.54z" fill="gray" fill-rule="nonzero"/></svg>
</div>
</div>
</div>
+1 -1
View File
@@ -13,7 +13,7 @@
</p>
</div>
<div class="mt-5 md:mt-8">
<a href="/getstarted" class="items-center justify-center px-8 py-3 border-4 border-blue-600 transition text-base font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 hover:shadow-3xl md:py-4 md:text-lg md:px-10
<a href="/getstarted" class="items-center justify-center px-8 py-3 transition text-base font-medium rounded-md text-white bg-blue-500 hover:ring-4 hover:shadow-3xl md:py-4 md:text-lg md:px-10
">
<span class="text-white no-underline">Get Started</span>
</a>
+5 -5
View File
@@ -2,7 +2,7 @@
<div class="w-default grid grid-cols-1 lg:grid-cols-2 gap-10">
<div class="relative">
<div class="border-l-4 dark:border-gray-700">
<h2 class="text-4xl pl-5 mb-5 font-bold text-blue-600 ">Open
<h2 class="text-4xl pl-5 mb-5 font-bold text-blue-500 ">Open
Source</h2>
<p class="pl-5 text-lg text-gray-800 dark:text-gray-400">
Our mission is to transform the AEC industry for
@@ -17,17 +17,17 @@
<ul class="pl-5 pt-5 text-lg text-gray-800 dark:text-gray-400 list-inside list-disc">
<li class="mt-2">
<b class="text-blue-600">Independence:</b>
<b class="text-blue-500">Independence:</b>
no vendor or cloud provider lock-in.
</li>
<li class="mt-2">
<b class="text-blue-600">Data sovereignty:</b>
<b class="text-blue-500">Data sovereignty:</b>
choose how and where your data is stored
</li>
<li class="mt-2">
<b class="text-blue-600">Longevity:</b>
<b class="text-blue-500">Longevity:</b>
open source code keeps thriving when business
plans change.
</li>
@@ -44,7 +44,7 @@
<div class="w-full self-center">
<div class="block h-32 w-32 mx-auto">
<svg xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd"
class="fill-current text-blue-600"
class="fill-current text-blue-500"
stroke-linejoin="round" stroke-miterlimit="2"
clip-rule="evenodd" viewBox="0 0 2483 2404">
<path d="M1391.07 1631.92c215.45-82.75 323.06-324.52 240.35-540.05-82.72-215.53-324.44-323.17-539.9-240.43-215.45 82.74-323.04 324.53-240.34 540.06a418.12 418.12 0 00240.35 240.42l-281.47 733.7c-620.53-238.27-930.49-934.6-692.32-1555.32 238.18-620.73 934.28-930.78 1554.8-692.53 620.53 238.25 930.49 934.57 692.3 1555.3a1204.18 1204.18 0 01-692.3 692.52l-281.47-733.68v.01z" />
+1 -3
View File
@@ -44,9 +44,7 @@
</span>Docs
</p>
<p class="mt-1 text-sm font-normal text-gray-900 dark:text-gray-50">
Documentation and step-by-step guides on how
to
get the best of Speckle.
In depth documentation on Speckle.
</p>
</div>
<p class="mt-2 text-sm font-medium text-blue-600 lg:mt-4">Check
+147 -121
View File
@@ -3,17 +3,14 @@
{{!-- Actual navbar --}}
<div
x-data="{ mobileMenuOpen: false, usecasesMenu: false, developersMenu: false, resourcesMenu: false, flyoutMenuOpen: false }"
x-data="{ mobileMenuOpen: false, usecasesMenu: false, developersMenu: false, resourcesMenu: false, flyoutMenuOpen: false, topBanner: null }"
x-init="topBanner = window.topBanner"
class="fixed top-0 shadow mt-0 w-full bg-white dark:bg-gray-900 dark:text-white z-20">
{{#is "home"}}
{{!-- Hiring notice --}}
<a href="/careers"
@mouseenter="usecasesMenu = false; resourcesMenu = false; developersMenu = false; flyoutMenuOpen = false;"
class="py-2 text-center bg-blue-500 text-white block w-full text-sm transition transform origin-top hover:scale-105">
We're hiring! Check out our open positions.
</a>
{{/is}}
<div x-cloak x-show="topBanner" x-html="topBanner" @mouseenter="usecasesMenu = false; resourcesMenu = false; developersMenu = false; flyoutMenuOpen = false;" class=" transition transform origin-top hover:scale-105">
</div>
<div class="relative">
@@ -24,7 +21,7 @@
<div @mouseenter="usecasesMenu = false; resourcesMenu = false; developersMenu = false">
<a href="/" class="flex relative" style="margin-top:-4px;">
<img class="h-8 mr-2 " src="{{@site.logo}}" alt="logo">
<div class="text-2xl text-blue-600 dark:text-blue-500 title-font font-bold mr-5">
<div class="text-2xl text-blue-500 title-font font-bold mr-5">
Speckle
</div>
</a>
@@ -45,92 +42,136 @@
{{!-- Main Menu --}}
<div class="hidden lg:flex-1 lg:flex lg:items-center lg:justify-between">
<nav class="flex space-x-4">
<nav class="flex space-x-2">
{{!-- use cases menu button --}}
<div class="relative">
<button type="button"
@mouseenter="usecasesMenu = true; resourcesMenu = false; developersMenu = false; flyoutMenuOpen = false;"
@click="usecasesMenu = !usecasesMenu;" x-state:on="Item active" x-state:off="Item inactive"
:class="{ 'text-gray-900 dark:text-gray-50': usecasesMenu, 'text-gray-700 dark:text-gray-400': !usecasesMenu }"
class="group bg-white dark:bg-gray-900 rounded-md text-gray-700 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 inline-flex items-center text-base font-medium focus:outline-none outline-none">
<span>Features</span>
<svg x-state:on="Item active" x-state:off="Item inactive"
class="ml-2 h-5 w-5 text-gray-400 group-hover:text-gray-500"
x-bind:class="{ 'text-gray-600': usecasesMenu, 'text-gray-400': !usecasesMenu }"
x-description="Heroicon name: chevron-down" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd"
d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
clip-rule="evenodd"></path>
<a href="/features/connectors"
class="transition hover:bg-blue-100 dark:hover:bg-gray-800 rounded-md px-2 text-gray-700 dark:text-gray-400 hover:text-blue-500 inline-flex items-center text-base font-medium">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4" />
</svg>
</button>
<span>Connectors</span>
</a>
</div>
{{!-- developers menu button --}}
<div class="relative">
<button type="button"
@mouseenter="developersMenu = true; usecasesMenu = false; resourcesMenu = false; flyoutMenuOpen = false;"
@click="developersMenu = !developersMenu;" x-state:on="Item active" x-state:off="Item inactive"
:class="{ 'text-gray-900 dark:text-gray-50': developersMenu, 'text-gray-700 dark:text-gray-400': !developersMenu }"
class="group bg-white dark:bg-gray-900 rounded-md text-gray-700 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 inline-flex items-center text-base font-medium focus:outline-none outline-none">
<span>Developers</span>
<svg x-state:on="Item active" x-state:off="Item inactive"
class="ml-2 h-5 w-5 text-gray-400 group-hover:text-gray-500"
x-bind:class="{ 'text-gray-600': developersMenu, 'text-gray-400': !developersMenu }"
x-description="Heroicon name: chevron-down" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd"
d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
clip-rule="evenodd"></path>
<a href="/tutorials" @mouseenter="resourcesMenu = false; flyoutMenuOpen = false;"
class="transition hover:bg-blue-100 dark:hover:bg-gray-800 rounded-md px-2 text-gray-700 dark:text-gray-400 hover:text-blue-500 inline-flex items-center text-base font-medium">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M11 4a2 2 0 114 0v1a1 1 0 001 1h3a1 1 0 011 1v3a1 1 0 01-1 1h-1a2 2 0 100 4h1a1 1 0 011 1v3a1 1 0 01-1 1h-3a1 1 0 01-1-1v-1a2 2 0 10-4 0v1a1 1 0 01-1 1H7a1 1 0 01-1-1v-3a1 1 0 00-1-1H4a2 2 0 110-4h1a1 1 0 001-1V7a1 1 0 011-1h3a1 1 0 001-1V4z" />
</svg>
</button>
<span>Tutorials</span>
</a>
</div>
{{!-- Learn menu button --}}
<div class="relative" @mouseenter="resourcesMenu = false; flyoutMenuOpen = false;">
<a href="/developers"
class="transition hover:bg-blue-100 dark:hover:bg-gray-800 rounded-md px-2 text-gray-700 dark:text-gray-400 hover:text-blue-500 inline-flex items-center text-base font-medium">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
</svg>
<span>Devs</span>
</a>
</div>
<div class="relative">
<button type="button"
@mouseenter="resourcesMenu = true; usecasesMenu = false; developersMenu = false; flyoutMenuOpen = false;"
{{!-- Resources menu button --}}
<div class="relative ml-1">
<button type="button" @mouseenter="resourcesMenu = true; flyoutMenuOpen = false;"
@click="resourcesMenu = !resourcesMenu;" x-state:on="Item active" x-state:off="Item inactive"
:class="{ 'text-gray-900 dark:text-gray-50': resourcesMenu, 'text-gray-700 dark:text-gray-400': !resourcesMenu }"
class="group bg-white dark:bg-gray-900 rounded-md text-gray-700 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 inline-flex items-center text-base font-medium focus:outline-none outline-none">
<span>Resources</span>
<svg x-state:on="Item active" x-state:off="Item inactive"
class="ml-2 h-5 w-5 text-gray-400 group-hover:text-gray-500"
x-bind:class="{ 'text-gray-600': resourcesMenu, 'text-gray-400': !resourcesMenu }"
x-description="Heroicon name: chevron-down" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd"
d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
clip-rule="evenodd"></path>
class="transition hover:bg-blue-100 dark:hover:bg-gray-800 rounded-md px-2 text-gray-700 dark:text-gray-400 hover:text-blue-500 inline-flex items-center text-base font-medium">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1" />
</svg>
<span>Resources</span>
</button>
<div x-description="'resources' flyout menu, show/hide based on flyout menu state." x-show="resourcesMenu"
@mouseleave="resourcesMenu = false;" x-transition:enter="transition ease-out duration-200"
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-150" x-transition:leave-start="opacity-100 translate-y-0"
x-transition:leave-end="opacity-0 -translate-y-1"
class="absolute z-10 left-1/2 transform -translate-x-1/2 mt-3 px-2 w-screen max-w-xs sm:px-0">
<div class="rounded-lg shadow-lg ring-1 ring-black ring-opacity-5 overflow-hidden">
<div class="relative grid gap-6 bg-white dark:bg-gray-900 px-5 py-6 sm:gap-8 sm:p-8">
<a href="/blog"
class="-m-3 p-3 block rounded-md hover:bg-gray-50 dark:hover:bg-gray-800 transition ease-in-out duration-150">
<p class="text-base font-medium text-gray-900 dark:text-gray-100">
Blog
</p>
<p class="mt-1 text-sm text-gray-500">
Announcements and other musings from the Speckle team.
</p>
</a>
<a href="https://speckle.guide" target="_blank"
class="-m-3 p-3 block rounded-md hover:bg-gray-50 dark:hover:bg-gray-800 transition ease-in-out duration-150">
<p class="text-base font-medium text-gray-900 dark:text-gray-100 flex items-center">
Docs
<svg xmlns="http://www.w3.org/2000/svg" class="ml-3 h-4 w-4" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
</svg>
</p>
<p class="mt-1 text-sm text-gray-500">
The reference manuals for Speckle, both for end users and developers alike.
</p>
</a>
<a href="https://speckle.community" target="_blank"
class="-m-3 p-3 block rounded-md hover:bg-gray-50 dark:hover:bg-gray-800 transition ease-in-out duration-150">
<p class="text-base font-medium text-gray-900 dark:text-gray-100 flex items-center">
Community Forum
<svg xmlns="http://www.w3.org/2000/svg" class="ml-3 h-4 w-4" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
</svg>
</p>
<p class="mt-1 text-sm text-gray-500">
Meet & get help from the Speckle community!
</p>
</a>
</div>
</div>
{{!-- {{> menus/resourcesMenu }} --}}
</div>
</div>
{{!-- About --}}
<div class="relative"
@mouseenter="resourcesMenu = false; usecasesMenu = false; developersMenu = false; flyoutMenuOpen = true"
@mouseleave="">
<div class="relative" @mouseenter="resourcesMenu = false; flyoutMenuOpen = true" @mouseleave="">
<button type="button" @click="flyoutMenuOpen = !flyoutMenuOpen" x-state:on="Item active"
x-state:off="Item inactive" :class="{ 'text-gray-900': flyoutMenuOpen, 'text-gray-500': !flyoutMenuOpen }"
class="group bg-white dark:bg-gray-900 rounded-md text-gray-700 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 inline-flex items-center text-base font-medium focus:outline-none outline-none">
<span>Company</span>
<svg x-state:on="Item active" x-state:off="Item inactive"
class="ml-2 h-5 w-5 text-gray-400 group-hover:text-gray-500"
x-bind:class="{ 'text-gray-600': flyoutMenuOpen, 'text-gray-400': !flyoutMenuOpen }"
x-description="Heroicon name: chevron-down" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd"
d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
clip-rule="evenodd"></path>
class="transition hover:bg-blue-100 dark:hover:bg-gray-800 rounded-md px-2 text-gray-700 dark:text-gray-400 hover:text-blue-500 inline-flex items-center text-base font-medium">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M8 14v3m4-3v3m4-3v3M3 21h18M3 10h18M3 7l9-4 9 4M4 10h16v11H4V10z" />
</svg>
<span>Company</span>
</button>
<div x-description="Flyout menu, show/hide based on flyout menu state."
@mouseleave="flyoutMenuOpen = false;" x-show="flyoutMenuOpen"
<div x-description="Company menu" @mouseleave="flyoutMenuOpen = false;" x-show="flyoutMenuOpen"
x-transition:enter="transition ease-out duration-200" 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-150"
x-transition:leave-start="opacity-100 translate-y-0" x-transition:leave-end="opacity-0 translate-y-1"
@@ -184,7 +225,8 @@
<div class="relative"
@mouseenter="resourcesMenu = false; usecasesMenu = false; developersMenu = false; flyoutMenuOpen = false">
&nbsp;
&nbsp;&nbsp;
</div>
</nav>
@@ -206,41 +248,6 @@
</div>
</div>
<!-- Use cases menu -->
<div x-description="'Solutions' flyout menu, show/hide based on flyout menu state." x-show="usecasesMenu"
@mouseleave="usecasesMenu = false;" x-transition:enter="transition ease-out duration-200"
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-150" x-transition:leave-start="opacity-100 translate-y-0"
x-transition:leave-end="opacity-0 -translate-y-1"
class="hidden md:block absolute z-10 inset-x-0 transform shadow-lg">
{{> menus/tagDropdownMenu tag="features" maxcards="3" large="true" }}
</div>
<!-- Learn menu -->
<div x-description="'Learn' flyout menu, show/hide based on flyout menu state." x-show="resourcesMenu"
@mouseleave="resourcesMenu = false;" x-transition:enter="transition ease-out duration-200"
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-150" x-transition:leave-start="opacity-100 translate-y-0"
x-transition:leave-end="opacity-0 -translate-y-1"
class="hidden md:block absolute z-10 inset-x-0 transform shadow-lg">
{{> menus/resourcesMenu }}
</div>
<!-- Developers menu -->
<div x-description="'Developers' flyout menu, show/hide based on flyout menu state." x-show="developersMenu"
@mouseleave="developersMenu = false;" x-transition:enter="transition ease-out duration-200"
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-150" x-transition:leave-start="opacity-100 translate-y-0"
x-transition:leave-end="opacity-0 -translate-y-1"
class="hidden md:block absolute z-10 inset-x-0 transform shadow-lg">
{{> menus/tagDropdownMenu tag="developers" maxcards="3" large="true" }}
</div>
{{!-- Mobile menu --}}
<div x-description="Mobile menu, show/hide based on mobile menu state." x-show="mobileMenuOpen"
@@ -251,7 +258,7 @@
<div class="rounded-lg shadow-2xl bg-white dark:bg-gray-900">
<div class="pt-5 pb-6 px-5 sm:pb-8">
<div class="flex items-center justify-between">
<a href="/" class="text-2xl text-blue-600 dark:text-blue-500 title-font font-bold mr-5">
<a href="/" class="text-2xl text-blue-500 dark:text-blue-500 title-font font-bold mr-5">
Speckle
</a>
<div class="-mr-2">
@@ -268,17 +275,21 @@
<nav>
<div class="grid gap-7 sm:grid-cols-2 sm:gap-y-8 sm:gap-x-4">
<a href="/features" class="-m-3 flex items-center p-3 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800">
<a href="/features/connectors"
class="-m-3 flex items-center p-3 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800">
<div
class="flex-shrink-0 flex items-center justify-center h-10 w-10 rounded-md bg-blue-500 text-white sm:h-12 sm:w-12">
<svg class="h-6 w-6" x-description="Heroicon name: chart-bar" xmlns="http://www.w3.org/2000/svg"
fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z" />
d="M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4" />
</svg>
</div>
<div class="ml-4 text-base font-medium text-gray-900 dark:text-gray-200">
Features
Connectors
</div>
</a>
@@ -289,7 +300,7 @@
<svg class="h-6 w-6" x-description="Heroicon name: shield-check" xmlns="http://www.w3.org/2000/svg"
fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z" />
d="M13 10V3L4 14h7v7l9-11h-7z" />
</svg>
</div>
<div class="ml-4 text-base font-medium text-gray-900 dark:text-gray-200">
@@ -297,6 +308,22 @@
</div>
</a>
<a href="/tutorials"
class="-m-3 flex items-center p-3 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800">
<div
class="flex-shrink-0 flex items-center justify-center h-10 w-10 rounded-md bg-blue-500 text-white sm:h-12 sm:w-12">
<svg class="h-6 w-6" x-description="Heroicon name: cursor-click" xmlns="http://www.w3.org/2000/svg"
fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M11 4a2 2 0 114 0v1a1 1 0 001 1h3a1 1 0 011 1v3a1 1 0 01-1 1h-1a2 2 0 100 4h1a1 1 0 011 1v3a1 1 0 01-1 1h-3a1 1 0 01-1-1v-1a2 2 0 10-4 0v1a1 1 0 01-1 1H7a1 1 0 01-1-1v-3a1 1 0 00-1-1H4a2 2 0 110-4h1a1 1 0 001-1V7a1 1 0 011-1h3a1 1 0 001-1V4z" />
</path>
</svg>
</div>
<div class="ml-4 text-base font-medium text-gray-900 dark:text-gray-200">
Tutorials
</div>
</a>
<a href="/blog" class="-m-3 flex items-center p-3 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800">
<div
class="flex-shrink-0 flex items-center justify-center h-10 w-10 rounded-md bg-blue-500 text-white sm:h-12 sm:w-12">
@@ -319,30 +346,29 @@
<svg class="h-6 w-6" x-description="Heroicon name: view-grid" xmlns="http://www.w3.org/2000/svg"
fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z">
</path>
d="M8 14v3m4-3v3m4-3v3M3 21h18M3 10h18M3 7l9-4 9 4M4 10h16v11H4V10z" />
</svg>
</div>
<div class="ml-4 text-base font-medium text-gray-900 dark:text-gray-200">
About
About Us
</div>
</a>
<div class="text-base">
<a href="http://speckle.community" target="_blank"
class="font-medium text-blue-600 hover:text-blue-500">
<a href="https://speckle.community" target="_blank"
class="font-medium text-blue-500 hover:text-blue-500">
Community <span aria-hidden="true">→</span></a>
</div>
<div class="text-base">
<a href="http://speckle.guide" target="_blank" class="font-medium text-blue-600 hover:text-blue-500">
<a href="https://speckle.guide" target="_blank" class="font-medium text-blue-500 hover:text-blue-500">
Docs <span aria-hidden="true">→</span></a>
</div>
<div class="text-base">
<a href="http://githhub.com/specklesystems/speckle-server" target="_blank"
class="font-medium text-blue-600 hover:text-blue-500">
<a href="https://github.com/specklesystems/speckle-server" target="_blank"
class="font-medium text-blue-500 hover:text-blue-500">
Github <span aria-hidden="true">→</span></a>
</div>
+2 -1
View File
@@ -1,3 +1,4 @@
<a href="/getstarted" class="inline-flex w-full items-center justify-center px-4 py-2 border border-transparent transition rounded-md shadow-sm text-base font-medium text-white bg-blue-600 hover:bg-blue-700 hover:shadow-xl">
<a href="/getstarted"
class="inline-flex w-full items-center justify-center px-4 py-2 border border-transparent transition rounded-md shadow-sm text-base font-medium text-white bg-blue-500 hover:ring-4 hover:shadow-xl">
Get Started
</a>
+1 -1
View File
@@ -1,4 +1,4 @@
<nav class="pagination text-center text-xl" role="navigation">
<nav class="pagination text-center" role="navigation">
{{#if prev}}
<a class="newer-posts text-blue-600 rounded-full bg-white dark:bg-gray-900 mx-5 py-2 px-5 shadow transition hover:shadow-xl" href="{{page_url prev}}">&larr;
Newer Posts</a>
+7 -11
View File
@@ -4,7 +4,7 @@
{{!-- Standard --}}
<div class="bg-white p-10 col-span-1 lg:col-span-3 shadow-xl rounded-xl dark:bg-gray-900 relative ring dark:ring-blue-700">
<div class="bg-white p-10 col-span-1 lg:col-span-3 shadow-xl rounded-xl dark:bg-gray-900 relative ring dark:ring-blue-700 transition transform scale-95 hover:scale-105">
<div>
<h3 class="bg-blue-100 font-semibold text-base text-blue-600 tracking-wide uppercase px-4 py-1 rounded-full inline-flex">
Standard
@@ -14,11 +14,8 @@
<span class="font-medium text-base text-blue-600">£0/mo</span>
</h2>
<p class="mb-5 mt-5 pt-5 border-t dark:border-gray-600 dark:text-gray-300">
Our free plan is for individuals and small teams
who want to
enjoy Speckle without extra hassle, hosted and
managed by
us.
Enjoy Speckle without extra hassle, hosted and
managed by us.
</p>
{{!-- <ul class="space-y-2 ">
{{> extras/listItem value="Interoperability Suite (Revit, Rhino, Gh, etc.)"}}
@@ -37,7 +34,7 @@
{{!-- <div class="h-16 absolute bottom-0 inset-x-0"> --}}
<div class="self-end mt-10 ">
<a href="https://speckle.xyz/authn/register">
<button class="w-full bg-blue-600 font-medium text-base text-white px-4 py-2 shadow-sm border-transparent rounded-md border hover:bg-blue-700 hover:shadow-xl transition">
<button class="w-full bg-blue-500 hover:bg-blue-600 font-medium text-base text-white px-4 py-4 shadow-sm border-transparent rounded-md border hover:ring-4 hover:shadow-xl transition">
Register Now
</button>
</a>
@@ -47,7 +44,7 @@
{{!-- Managed --}}
<div class="bg-gray-50 dark:bg-gray-900 col-span-1 lg:col-span-2 p-10 flex-wrap rounded-xl flex relative">
<div class="bg-gray-50 dark:bg-gray-900 col-span-1 lg:col-span-2 p-10 flex-wrap rounded-xl flex relative transition transform scale-95 hover:scale-105">
<div class="w-full">
<h3 class="bg-blue-100 font-semibold text-base text-blue-600 tracking-wide uppercase px-4 py-1 rounded-full inline-flex">
Managed / On Prem
@@ -56,8 +53,7 @@
Enterprise
</h2>
<p class="mb-5 mt-5 pt-5 border-t dark:border-gray-600 dark:text-gray-200">
Dedicated solutions for enterprises, large
teams or projects.
Dedicated custom solutions for enterprises.
</p>
<ul class="space-y-2 ">
{{> extras/listItem value="Everything in the Free Plan"}}
@@ -71,7 +67,7 @@
</div>
<div class="self-end mt-10 w-full">
<a href="mailto:office@speckle.systems?subject=Speckle Enterprise Query">
<button class="w-full font-medium text-base dark:text-gray-50 text-gray-900 px-4 py-2 shadow-sm border-transparent rounded-md border ring-0 hover:ring-2 hover:shadow-xl transition">
<button class="w-full font-medium text-base dark:text-gray-50 text-gray-900 px-4 py-4 shadow-sm border-transparent rounded-md border ring-0 hover:ring-2 hover:shadow-xl transition">
Contact Us
</button>
</a>
+142
View File
@@ -0,0 +1,142 @@
{{!-- Plans --}}
<div class="shadow-xl sm:px-2 px-5 pt-8 pb-10 rounded-lg mt-10 mb-10 bg-white dark:bg-gray-900 transition hover:bg-blue-800">
<div class="max-w-4xl mx-auto grid grid-cols-2 gap-10">
<div class="mt-2 text-center sm:text-left dark:text-gray-200">
<h2 class="font-bold text-5xl dark:text-gray-300">
Free
<span class="font-medium text-base text-blue-600">£0/mo</span>
</h2>
<p class="mb-5 mt-5">
Enjoy Speckle without extra hassle, hosted and managed by us. Get started in seconds!
</p>
<ul class="space-y-1 ">
{{> extras/listItem value="Interoperability Suite (Revit, Rhino, Gh, etc.)"}}
{{> extras/listItem value="Version control"}}
{{> extras/listItem value="No limits on data, streams or versions"}}
{{> extras/listItem value="Web based 3D viewer"}}
{{> extras/listItem value="API Access"}}
{{> extras/listItem value="3rd Party App Registration"}}
{{> extras/listItem value="Community support"}}
</ul>
</div>
<div class="flex items-center justify-center">
<a href="https://speckle.xyz/authn/register"
target="_blank"
class="mt-2 border-2 h-32 w-72 rounded-xl border-blue-500 bg-blue-500 hover:ring-4 transition p-4 flex text-white text-center justify-center">
<span class="self-center">Register Now</span>
</a>
</div>
</div>
</div>
<div class="sm:px-2 px-5 pt-8 pb-10 mb-10 rounded-lg mt-10 mx-auto">
<div class="w-default grid grid-cols-2 gap-10">
<div class="mt-2 text-center sm:text-left dark:text-gray-200">
<h2 class="font-bold text-3xl mt-5 dark:text-gray-300">
Enterprise
<span class="font-medium text-base text-blue-600">From £500/mo</span>
</h2>
<p class="mb-5 mt-5 pt-5 border-t dark:border-gray-600 dark:text-gray-300">
Enjoy Speckle without extra hassle, hosted and managed by us. Our free plan will always be free.
</p>
<ul class="space-y-1 ">
{{> extras/listItem value="Everything in the Free Plan"}}
{{> extras/listItem value="On prem or managed deployments"}}
{{> extras/listItem value="Custom subdomain"}}
{{> extras/listItem value="White labelling"}}
{{> extras/listItem value="SSO (Single sign-on)"}}
{{> extras/listItem value="SLA (Service Level Agreement)"}}
{{> extras/listItem value="Dedicated Support"}}
</ul>
</div>
<div class="flex items-center justify-center">
<a href="https://speckle.community/new-topic?title=Question:%20How%20can%20I%20...&category=help&tags=v2"
target="_blank"
class="mt-2 border-2 h-32 w-72 rounded-lg border-blue-500 bg-blue-500 hover:ring-4 transition p-4 flex text-white text-center justify-center">
<span class="self-center">Contact us</span>
</a>
</div>
</div>
</div>
<div class="hidden relative w-default mb-20 gap-4 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5">
{{!-- Standard --}}
<div
class="bg-white p-10 col-span-1 lg:col-span-3 rounded-xl dark:bg-gray-900 relative ring dark:ring-blue-700">
<div>
{{!-- <h3
class="bg-blue-100 font-semibold text-base text-blue-600 tracking-wide uppercase px-4 py-1 rounded-full inline-flex">
Standard
</h3> --}}
<h2 class="font-bold text-4xl mt-5 dark:text-gray-300">
Free
<span class="font-medium text-base text-blue-600">£0/mo</span>
</h2>
<p class="mb-5 mt-5 pt-5 border-t dark:border-gray-600 dark:text-gray-300">
Dedicated custom solutions for enterprises, large teams or projects.
</p>
<ul class="space-y-2 ">
{{> extras/listItem value="Everything in the Free Plan"}}
{{> extras/listItem value="On prem or managed deployments"}}
{{> extras/listItem value="Custom subdomain"}}
{{> extras/listItem value="White labelling"}}
{{> extras/listItem value="SSO (Single sign-on)"}}
{{> extras/listItem value="SLA (Service Level Agreement)"}}
{{> extras/listItem value="Dedicated Support"}}
</ul>
</div>
{{!-- <div class="self-end mt-10 ">
<a href="https://speckle.xyz/authn/register">
<button
class="w-full bg-blue-600 font-medium text-base text-white px-4 py-2 shadow-sm border-transparent rounded-md border hover:bg-blue-700 hover:shadow-xl transition">
Register Now
</button>
</a>
</div> --}}
</div>
{{!-- Managed --}}
<div class="bg-gray-50 dark:bg-gray-900 col-span-1 lg:col-span-2 p-10 flex-wrap rounded-xl flex relative">
<div class="w-full">
<h3
class="bg-blue-100 font-semibold text-base text-blue-600 tracking-wide uppercase px-4 py-1 rounded-full inline-flex">
Managed / On Prem
</h3>
<h2 class="font-bold text-4xl mt-5 dark:text-gray-200">
Enterprise
</h2>
<p class="mb-5 mt-5 pt-5 border-t dark:border-gray-600 dark:text-gray-200">
Dedicated solutions for enterprises, large
teams or projects.
</p>
<ul class="space-y-2 ">
{{> extras/listItem value="Everything in the Free Plan"}}
{{> extras/listItem value="On prem or managed deployments"}}
{{> extras/listItem value="Custom subdomain"}}
{{> extras/listItem value="White labelling"}}
{{> extras/listItem value="SSO (Single sign-on)"}}
{{> extras/listItem value="SLA (Service Level Agreement)"}}
{{> extras/listItem value="Dedicated Support"}}
</ul>
</div>
<div class="self-end mt-10 w-full">
<a href="mailto:office@speckle.systems?subject=Speckle Enterprise Query">
<button
class="w-full font-medium text-base dark:text-gray-50 text-gray-900 px-4 py-2 shadow-sm border-transparent rounded-md border ring-0 hover:ring-2 hover:shadow-xl transition">
Contact Us
</button>
</a>
</div>
</div>
</div>
+74
View File
@@ -0,0 +1,74 @@
<div>
<div>
<div class="mt-1 relative rounded-md shadow-sm">
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor">
<path d="M9 9a2 2 0 114 0 2 2 0 01-4 0z" />
<path fill-rule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-13a4 4 0 00-3.446 6.032l-2.261 2.26a1 1 0 101.414 1.415l2.261-2.261A4 4 0 1011 5z"
clip-rule="evenodd" />
</svg>
</div>
<input type="text" name="search" id="search-bar"
class="focus:ring-blue-500 focus:border-blue-500 transition block w-full pl-10 sm:text-sm border-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:text-white rounded-md h h-12"
placeholder="Search...">
</div>
<div id="search-results" class="mt-4 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3"></div>
</div>
</div>
<script>
window.addEventListener('load', function () {
const tutorialSearch = new SearchinGhost( {
key: window.searchKey,
postFields: ['title', 'url', 'excerpt', 'published_at'],
postsExtraFields: ['tags'],
debug: true,
emptyTemplate: function () {
return `
<p class="text-center text-sm col-span-3 dark:text-white" id='no-results'>No results found.</p>
`},
customProcessing: function (post) {
if (post.tags && post.tags.length !== 0) {
post.firstTag = post.tags[0].name.toLowerCase()
post.string_tags = post.string_tags = post.tags.map(o => o.name).join(' ').toLowerCase()
}
else post.firstTag = "no-tag"
return post
},
outputChildsType: '',
searchOptions: {
where: {
firstTag: "tutorials"
},
limit: 9
},
template: function (post) {
return `
<div class="flex flex-col rounded-lg transition shadow hover:shadow-2xl overflow-hidden w-full">
<div class="flex-1 bg-white dark:bg-gray-900 dark:text-gray-200 p-6 flex flex-col justify-between">
<div class="flex-1">
<a href="${post.url}" class="block mt-2">
<p class="font-semibold text-gray-900 dark:text-gray-200 line-clamp-2">
<span class="text-xs py-0 px-2 rounded border border-blue-500 text-blue-500">${post.firstTag}</span> ${post.title}
</p>
<p class="mt-3 text-sm text-gray-500 line-clamp-2">
${post.excerpt}
</p>
</a>
</div>
</div>
</div>
`
}
})
const el = document.getElementById('search-bar')
el.addEventListener('input', (e) => {
if (e.target.value === '')
setTimeout(() => document.getElementById('no-results').style.display = "none", 250)
})
})
</script>
+6
View File
@@ -29,6 +29,12 @@ collections:
tempate: careers
filter: tag:careers
data: tag.careers
/tutorials/:
permalink: /tutorials/{slug}/
template: tutorials
filter: tag:tutorials
data: tag.tutorials
# Note: root is disabled
# /:
+97 -20
View File
@@ -1,33 +1,110 @@
{{!< default}}
{{!< default}} {{#tag}} <div
x-data="{ docsLink: null, sourceLink: null, videoLink:null, showInstallLink: false, connectorTag:false, installLink: null }" x-init="
docsLink = window.docsLink; sourceLink = window.sourceLink; videoLink = window.videoLink; showInstallLink = window.showInstallLink; connectorTag = window.connectorTag;
if( videoLink ) document.getElementById('tagvideo').src = videoLink; installLink = window.installLink;">
<div>
{{#tag}}
<main class="h-screen/4 flex flex-wrap content-center mx-auto max-w-5xl px-10 lg:px-24 sm:mt-24">
<div class="w-3/3 text-center">
<h1 class="text-4xl tracking-tight font-extrabold text-gray-900 dark:text-gray-100 sm:text-5xl md:text-6xl">
<span class="text-gradient text-gradient bg-gradient-to-r from-blue-500 to-blue-700">
{{name}}
</span>
<main class="w-default lg:my-10 space-x-0 md:space-x-6 space-y-6 flex flex-col md:flex-row items-center">
<div class="w-full md:w-1/2">
<div class="prose lg:prose-xl dark:prose-dark prose-blue max-w-none w-full mb-4">
<h1 class="flex overflow-ellipsis overflow-hidden w-full max-w-full">
<a class="flex items-center justify-center no-underline" href="/features/connectors" x-cloak
x-show="connectorTag">
Connectors
<svg xmlns="http://www.w3.org/2000/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="M9 5l7 7-7 7" />
</svg>
</a>
{{name}}
</h1>
<p class="text-base text-justify text-gray-500 sm:text-lg md:text-xl md:max-w-6xl mt-10">
{{description}}
</p>
<p>{{description}}</p>
</div>
</main>
<a class="py-2 px-4 rounded inline-flex items-center text-white bg-purple-500 dark:bg-purple-800 transition-shadow hover:shadow-xl hover:ring mr-2"
href="#" x-show="installLink" x-cloak x-bind:href="installLink">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-3" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd"
d="M3 17a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm3.293-7.707a1 1 0 011.414 0L9 10.586V3a1 1 0 112 0v7.586l1.293-1.293a1 1 0 111.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z"
clip-rule="evenodd" />
</svg>
<span>Install</span>
</a>
<a class="py-2 px-4 rounded inline-flex items-center text-white bg-blue-500 dark:bg-blue-800 transition-shadow hover:shadow-xl hover:ring mr-2"
x-show="docsLink" href="#" target="_blank" x-cloak x-bind:href="docsLink">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-3" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
</svg>
<span>Docs</span>
</a>
<a class="py-2 px-4 rounded inline-flex items-center text-gray-700 dark:text-gray-300 transition-shadow hover:shadow-xl hover:ring mr-2"
x-show="sourceLink" href="#" target="_blank" x-cloak x-bind:href="sourceLink">
<svg class="h-6 w-6 mr-3" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd"
d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
clip-rule="evenodd"></path>
</svg>
<span>Source</span>
</a>
</div>
<div class="w-full md:w-1/2" x-show="!videoLink">
<img class="mx-auto h-48 w-48 transition-transform transform group-hover:scale-110 object-contain"
src="{{feature_image}}">
</div>
<div class="w-full md:w-1/2" x-show="videoLink">
<div class="overflow-hidden shadow-2xl rounded-2xl mx-auto max-w-xl lg:w-full aspect-w-16 aspect-h-9">
<div class="h-full">
<iframe id='tagvideo' width="100%" height="100%" v-bind:src="videoLink" title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen></iframe>
</div>
</div>
</div>
</main>
{{/tag}}
<div class="mt-12 max-w-lg grid gap-5 md:grid-cols-2 lg:grid-cols-3 mx-auto max-w-5xl px-10 lg:px-12 sm:mt-24">
<div class="w-default my-12 grid grid-cols-1 gap-5 md:grid-cols-2 lg:grid-cols-3 mx-auto">
{{!-- Featured posts first --}}
{{#get "posts" filter="tag:{{slug}}+featured:true" include="authors,tags" order="published_at desc"}}
{{#foreach posts visibility="all"}}
{{> cardTutorial }}
{{/foreach}}
{{/get}}
{{!-- Then all the rest in desc order --}}
{{#get "posts" filter="tag:{{slug}}+featured:false" include="authors,tags" order="published_at desc" limit="50"}}
{{#foreach posts visibility="all"}}
{{> cardSimple}}
{{> cardTutorial }}
{{/foreach}}
{{> cardCTA}}
{{/get}}
</div>
</div>
<div class="shadow-xl sm:px-2 px-5 pt-8 pb-10 my-10 bg-white dark:bg-gray-900" x-cloak x-show="connectorTag">
<div class="w-default flex content-center space-x-2 flex-wrap justify-around mx-auto ">
<div class="mt-2 text-center sm:text-left dark:text-gray-200">
<h3 class="text-2xl">Have a question you need answered?</h3>
<p>Submit your question on the forum and get help from the community.</p>
</div>
<a href="https://speckle.community/new-topic?title=Question:%20How%20can%20I%20...&category=help&tags=v2"
target="_blank"
class="mt-2 border-2 rounded-lg border-blue-500 bg-blue-500 hover:ring-4 transition p-4 flex text-white text-center justify-center">
<span class="self-center">Ask a question</span>
</a>
</div>
</div>
</div>
{{/tag}}
+55 -62
View File
@@ -2,107 +2,100 @@ const colors = require('tailwindcss/colors')
module.exports = {
purge: {
enabled: process.env.NODE_ENV === 'production',
content: [
'./*.hbs',
'./partials/**/*.hbs'
]
enabled: process.env.NODE_ENV === "production",
content: ["./*.hbs", "./partials/**/*.hbs"],
},
darkMode: 'media', // or 'media' or 'class'
darkMode: "media", // or 'media' or 'class'
theme: {
extend: {
maxHeight: {
'1/2': '50%',
'3/4': '75%',
'full': '100%'
"1/2": "50%",
"3/4": "75%",
full: "100%",
},
height: theme => ({
'screen/2': '50vh',
'screen/3': 'calc(100vh / 3)',
'screen/4': 'calc(100vh / 4)',
'screen/5': 'calc(100vh / 5)',
'screen/2-3': 'calc(100vh * 0.66)',
height: (theme) => ({
"screen/2": "50vh",
"screen/3": "calc(100vh / 3)",
"screen/4": "calc(100vh / 4)",
"screen/5": "calc(100vh / 5)",
"screen/2-3": "calc(100vh * 0.66)",
}),
typography: theme => ({
typography: (theme) => ({
dark: {
css: {
color: theme('colors.gray.300'),
color: theme("colors.gray.300"),
a: {
color: theme('colors.blue.500'),
'&:hover': {
color: theme('colors.blue.400'),
color: theme("colors.blue.500"),
"&:hover": {
color: theme("colors.blue.400"),
},
code: { color: theme('colors.blue.400') },
code: { color: theme("colors.blue.400") },
},
h1: {
fontWeight: '700',
letterSpacing: theme(
'letterSpacing.tight'),
color: theme('colors.gray.100'),
fontWeight: "700",
letterSpacing: theme("letterSpacing.tight"),
color: theme("colors.gray.100"),
},
h2: {
fontWeight: '700',
letterSpacing: theme(
'letterSpacing.tight'),
color: theme('colors.gray.100'),
fontWeight: "700",
letterSpacing: theme("letterSpacing.tight"),
color: theme("colors.gray.100"),
},
h3: {
fontWeight: '600',
color: theme('colors.gray.100'),
fontWeight: "600",
color: theme("colors.gray.100"),
},
'h4,h5,h6': {
color: theme('colors.gray.100'),
"h4,h5,h6": {
color: theme("colors.gray.100"),
},
code: {
backgroundColor: theme(
'colors.gray.800'),
backgroundColor: theme("colors.gray.800"),
color: theme("colors.gray.200"),
},
hr: { borderColor: theme(
'colors.gray.700') },
'ol li:before': {
fontWeight: '600',
color: theme('colors.gray.400'),
hr: { borderColor: theme("colors.gray.700") },
"ol li:before": {
fontWeight: "600",
color: theme("colors.gray.400"),
},
'ul li:before': {
backgroundColor: theme(
'colors.gray.400'),
"ul li:before": {
backgroundColor: theme("colors.gray.400"),
},
strong: { color: theme('colors.gray.100') },
strong: { color: theme("colors.gray.100") },
thead: {
color: theme('colors.gray.100'),
color: theme("colors.gray.100"),
},
tbody: {
tr: {
borderBottomColor: theme(
'colors.gray.700'),
borderBottomColor: theme("colors.gray.700"),
},
},
blockquote: {
color: theme('colors.gray.100'),
borderLeftColor: theme(
'colors.gray.700'),
color: theme("colors.gray.100"),
borderLeftColor: theme("colors.gray.700"),
},
},
},
})
}),
},
fontFamily: {
sans: ['Space Grotesk', 'sans-serif'],
serif: ['Merriweather', 'serif'],
sans: ["Space Grotesk", "sans-serif"],
serif: ["Merriweather", "serif"],
},
},
variants: {
typography: ['dark'],
typography: ["dark"],
extend: {
opacity: ['active', 'dark'],
visibility: ['hover', 'dark'],
ringWidth: ['hover', 'active'],
scale: [ 'group-hover' ]
opacity: ["active", "dark"],
visibility: ["hover", "dark"],
ringWidth: ["hover", "active"],
scale: ["group-hover"],
display: ["group-hover"],
},
},
plugins: [
require('@tailwindcss/line-clamp'),
require('@tailwindcss/aspect-ratio'),
require('@tailwindcss/typography')
require("@tailwindcss/line-clamp"),
require("@tailwindcss/aspect-ratio"),
require("@tailwindcss/typography"),
require("@tailwindcss/forms"),
],
}
};
+74
View File
@@ -0,0 +1,74 @@
{{!< default}} {{#tag}} <main class="w-default flex flex-wrap content-center mt-24">
<div class="w-3/3 mx-auto">
<h1
class="text-4xl text-center tracking-tight font-extrabold text-gray-900 dark:text-gray-100 sm:text-5xl md:text-6xl">
<a href="/tutorials">
<span class="inline-block xl:inline text-gradient text-gradient bg-gradient-to-r from-blue-500 to-blue-700">
{{name}}
</span>
</a>
</h1>
<p class="text-base text-center dark:text-gray-200 sm:text-lg md:text-xl md:max-w-6xl mt-10">
{{description}}
</p>
</div>
</main>
{{/tag}}
<div class="w-default flex flex-row space-x-4 flex-wrap content-center justify-center">
{{!-- <p class="text-gray-500 w-full text-center text-sm mt-1">Popular topics:</p> --}}
{{#get "tags" limit="all" filter="slug:-[features,tutorials,careers,developers,blog]"}}
{{#foreach tags}}
<a href="{{url}}"
class="mt-2 px-2 py-1 bg-blue-500 rounded-full inline-block text-white ring-0 hover:ring-4 transition">
{{name}}
</a>
{{/foreach}}
{{/get}}
</div>
<div class="max-w-4xl w-full mx-auto mt-4">
{{> searchLarge}}
</div>
<div class="shadow-xl sm:px-2 px-5 pt-8 pb-10 rounded-lg mt-10 bg-white dark:bg-gray-900">
<div class="w-default flex content-center space-x-2 flex-wrap justify-around mx-auto ">
<div class="mt-2 text-center sm:text-left dark:text-gray-200">
<h3 class="text-2xl">Have a question you need answered?</h3>
<p>Submit your question on the forum and get help from the community.</p>
</div>
<a href="https://speckle.community/new-topic?title=Question:%20How%20can%20I%20...&category=help&tags=v2"
target="_blank"
class="mt-2 border-2 rounded-lg border-blue-500 bg-blue-500 hover:ring-4 transition p-4 flex text-white text-center justify-center">
<span class="self-center">Ask a question</span>
</a>
</div>
</div>
<div class="w-default mt-10 grid gap-8 md:grid-cols-2 lg:grid-cols-3">
{{!-- {{#get "posts" filter="tag:tutorials+featured:true" include="authors,tags" order="published_at desc" as |featured_posts pages|}}
{{#foreach featured_posts visibility="all"}}
{{> cardTutorialSm }}
{{/foreach}}
{{pages.total}}
{{/get}} --}}
{{#foreach posts }}
{{> cardTutorialSm}}
{{/foreach}}
</div>
<aside class="w-default py-10">
{{pagination}}
</aside>