huanld/ghost-theme
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: pricing page fiddles

Browse Source
This commit is contained in:
Dimitrie Stefanescu
2021-07-15 15:44:14 +01:00
parent 7743b78b71
commit cc4c7ced7a
11 changed files with 345 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/built/screen.css
+144
View File
@@ -555,6 +555,150 @@ video {
border-color: rgba(229, 231, 235, var(--tw-border-opacity));
}
[type='text'],[type='email'],[type='url'],[type='password'],[type='number'],[type='date'],[type='datetime-local'],[type='month'],[type='search'],[type='tel'],[type='time'],[type='week'],[multiple],textarea,select {
appearance: none;
background-color: #fff;
border-color: #6b7280;
border-width: 1px;
border-radius: 0px;
padding-top: 0.5rem;
padding-right: 0.75rem;
padding-bottom: 0.5rem;
padding-left: 0.75rem;
font-size: 1rem;
line-height: 1.5rem;
}
[type='text']:focus, [type='email']:focus, [type='url']:focus, [type='password']:focus, [type='number']:focus, [type='date']:focus, [type='datetime-local']:focus, [type='month']:focus, [type='search']:focus, [type='tel']:focus, [type='time']:focus, [type='week']:focus, [multiple]:focus, textarea:focus, select:focus {
outline: 2px solid transparent;
outline-offset: 2px;
--tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-color: #2563eb;
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
border-color: #2563eb;
}
input::placeholder,textarea::placeholder {
color: #6b7280;
opacity: 1;
}
::-webkit-datetime-edit-fields-wrapper {
padding: 0;
}
::-webkit-date-and-time-value {
min-height: 1.5em;
}
select {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
background-position: right 0.5rem center;
background-repeat: no-repeat;
background-size: 1.5em 1.5em;
padding-right: 2.5rem;
color-adjust: exact;
}
[multiple] {
background-image: initial;
background-position: initial;
background-repeat: unset;
background-size: initial;
padding-right: 0.75rem;
color-adjust: unset;
}
[type='checkbox'],[type='radio'] {
appearance: none;
padding: 0;
color-adjust: exact;
display: inline-block;
vertical-align: middle;
background-origin: border-box;
user-select: none;
flex-shrink: 0;
height: 1rem;
width: 1rem;
color: #2563eb;
background-color: #fff;
border-color: #6b7280;
border-width: 1px;
}
[type='checkbox'] {
border-radius: 0px;
}
[type='radio'] {
border-radius: 100%;
}
[type='checkbox']:focus,[type='radio']:focus {
outline: 2px solid transparent;
outline-offset: 2px;
--tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
--tw-ring-offset-width: 2px;
--tw-ring-offset-color: #fff;
--tw-ring-color: #2563eb;
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
[type='checkbox']:checked,[type='radio']:checked {
border-color: transparent;
background-color: currentColor;
background-size: 100% 100%;
background-position: center;
background-repeat: no-repeat;
}
[type='checkbox']:checked {
background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
}
[type='radio']:checked {
background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
}
[type='checkbox']:checked:hover,[type='checkbox']:checked:focus,[type='radio']:checked:hover,[type='radio']:checked:focus {
border-color: transparent;
background-color: currentColor;
}
[type='checkbox']:indeterminate {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e");
border-color: transparent;
background-color: currentColor;
background-size: 100% 100%;
background-position: center;
background-repeat: no-repeat;
}
[type='checkbox']:indeterminate:hover,[type='checkbox']:indeterminate:focus {
border-color: transparent;
background-color: currentColor;
}
[type='file'] {
background: unset;
border-color: inherit;
border-width: 0;
border-radius: 0;
padding: 0;
font-size: unset;
line-height: inherit;
}
[type='file']:focus {
outline: 1px auto -webkit-focus-ring-color;
}
.container {
width: 100%;
}
custom-interop-post.hbs
+15
View File
@@ -17,6 +17,21 @@
{{> 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}}
custom-tutorial-post.hbs
+20 -5
View File
@@ -25,8 +25,7 @@
</div>
<div class="max-w-prose mx-auto my-4">
{{#foreach tags}}
{{!-- <a x-cloak x-show="'{{slug}}'!=='tutorials'" --}}
<a
{{!-- <a x-cloak x-show="'{{slug}}'!=='tutorials'" --}} <a
class="rounded-full py-1 px-3 bg-blue-500 text-white mr-2 inline-block transform scale-90 hover:scale-100 transition-transform"
href="{{url}}">
{{name}}
@@ -95,8 +94,7 @@
<p class="border-t dark:border-gray-800 mt-2 pt-2"></p>
<div>
{{#foreach tags}}
{{!-- <a x-cloak x-show="'{{slug}}'!=='tutorials'" --}}
<a
{{!-- <a x-cloak x-show="'{{slug}}'!=='tutorials'" --}} <a
class="rounded-full py-1 px-3 bg-blue-500 text-white mr-2 inline-block transform scale-90 hover:scale-100 transition-transform"
href="{{url}}">
{{name}}
@@ -121,10 +119,25 @@
</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}}" limit="3" as |related_posts|}}
{{#get "posts" filter="tags:{{primary_tag.slug}}+id:-{{id}}" limit="6" as |related_posts|}}
{{#if related_posts}}
<article class="read-next-card">
<header class="read-next-card-header">
@@ -146,6 +159,8 @@
</aside>
{{/post}}
<script>
package.json
+1
View File
@@ -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",
page-getstarted.hbs
+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:
partials/cardSm.hbs
+1 -1
View File
@@ -1,4 +1,4 @@
<div class="flex flex-col rounded-lg transition shadow hover:shadow-2xl overflow-hidden w-full">
<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">
partials/footer.hbs
+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>
partials/pricing.hbs
+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>
partials/pricingRegister.hbs
+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>
tailwind.config.js
+1
View File
@@ -96,5 +96,6 @@ module.exports = {
require("@tailwindcss/line-clamp"),
require("@tailwindcss/aspect-ratio"),
require("@tailwindcss/typography"),
require("@tailwindcss/forms"),
],
};
tutorials.hbs
+9 -7
View File
@@ -2,9 +2,11 @@
<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">
<span class="inline-block xl:inline text-gradient text-gradient bg-gradient-to-r from-blue-500 to-blue-700">
{{name}}
</span>
<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}}
@@ -18,15 +20,15 @@
{{!-- <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">
<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="shadow-xl sm:px-2 px-5 pt-8 pb-10 rounded-lg mt-10 bg-white dark:bg-gray-900">
<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>
@@ -35,7 +37,7 @@
<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:bg-blue-400 transition p-4 flex text-white text-center justify-center">
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>