Migrate features page to Nuxt at /product, extract security component

nuxt/components/EnterpriseSecurity.vue

@@ -0,0 +1,74 @@
+<script setup lang="ts">
+// "Built for Enterprise Manufacturing" SOC2/security block, shared between
+// the product page and the pricing page. Ported from the enterprise: data
+// block + <section class="comparison-section-bg"> markup previously
+// duplicated in src/platform/features.njk and src/industries/automotive.njk
+// (11ty).
+interface SecurityItem {
+    icon: 'single-sign-on' | 'audit-logs' | 'role-based-access' | 'air-gapped-deployment'
+    label: string
+}
+
+const ICONS = {
+    'single-sign-on': resolveComponent('IconsSingleSignOnIcon'),
+    'audit-logs': resolveComponent('IconsAuditLogsIcon'),
+    'role-based-access': resolveComponent('IconsRoleBasedAccessIcon'),
+    'air-gapped-deployment': resolveComponent('IconsAirGappedDeploymentIcon'),
+}
+
+withDefaults(defineProps<{
+    heading?: string
+    description?: string
+    badgeLabel?: string
+    linkText?: string
+    linkHref?: string
+    items?: SecurityItem[]
+}>(), {
+    heading: 'Built for <span class="text-indigo-600">Enterprise Manufacturing</span>',
+    description: 'FlowFuse is SOC 2 Type I and Type II certified, with role-based access control, single sign-on, audit logging, and air-gapped, self-hosted deployment options, built for the security and compliance requirements of large-scale manufacturing organizations.',
+    badgeLabel: 'SOC 2 Type II',
+    linkText: 'Review our security and compliance details',
+    linkHref: '/platform/security/',
+    items: () => [
+        { icon: 'single-sign-on', label: 'Single Sign-On' },
+        { icon: 'audit-logs', label: 'Audit Logs' },
+        { icon: 'role-based-access', label: 'Role-Based Access Control' },
+        { icon: 'air-gapped-deployment', label: 'Air-Gapped / Self-Hosted Deployment' },
+    ],
+})
+</script>
+
+<template>
+  <section class="enterprise-security-bg w-full py-20 px-6">
+    <div class="max-w-screen-lg mx-auto flex flex-col md:flex-row gap-12 items-center justify-between">
+      <div class="shrink md:shrink md:basis-2/5 md:min-w-0 max-md:text-center">
+        <h2 class="m-0" v-html="heading" />
+        <p class="text-gray-600">{{ description }}</p>
+        <a :href="linkHref" class="flex items-center gap-1.5 text-blue-600 hover:underline max-md:justify-center">
+          {{ linkText }}
+          <UIcon name="i-lucide-arrow-right" class="size-4 shrink-0" />
+        </a>
+      </div>
+      <div class="grid grid-cols-2 md:grid-cols-7 gap-4 w-full max-w-md md:max-w-[646px] md:shrink md:basis-3/5 md:min-w-0">
+        <div class="col-span-2 md:col-span-3 md:row-span-2 flex flex-col items-center justify-between gap-4 rounded-xl border border-white p-5 bg-[linear-gradient(135deg,_theme(colors.white)_0%,_theme(colors.white/10%)_100%)]">
+          <div class="w-full max-w-[220px] aspect-square m-auto">
+            <IconsSoc2BadgeIcon />
+          </div>
+          <p class="text-gray-500 text-sm m-0">{{ badgeLabel }}</p>
+        </div>
+        <div v-for="item in items" :key="item.label" class="md:col-span-2 flex flex-col gap-2 items-center justify-center text-center rounded-xl border border-white p-3 bg-[linear-gradient(135deg,_theme(colors.white)_0%,_theme(colors.white/10%)_100%)]">
+          <div class="w-full max-w-14 aspect-square">
+            <component :is="ICONS[item.icon]" />
+          </div>
+          <p class="text-gray-600 text-sm m-0">{{ item.label }}</p>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<style scoped>
+.enterprise-security-bg {
+    background: radial-gradient(circle at 100% 100%, #FFE8E5, #EEF2FF);
+}
+</style>

nuxt/components/icons/AirGappedDeploymentIcon.vue

@@ -0,0 +1,13 @@
+<template>
+<svg width="100%" height="100%" viewBox="0 0 88 80" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.5196 24.692L3.5402 66.8586L36.2937 66.886C36.9455 66.886 38.0158 67.7299 38.2353 68.2856C38.4549 68.8413 37.3846 70.433 36.6367 70.4399L15.1761 70.5016L15.2859 76.0109C15.2996 76.5598 14.4146 77.63 13.8931 77.7947C13.2688 77.9868 11.9035 76.8822 11.8967 76.1961L11.8143 70.5085L4.54872 70.4742C1.52996 70.4605 0 68.5258 0 65.6511L0.013735 4.03416C0.013735 1.98278 1.99652 0.0137141 4.10279 0.0137141L56.931 0C59.5107 0 61.3082 2.13371 61.3013 4.54185L61.2602 23.0043C61.2602 23.6149 60.1556 24.7607 59.6067 24.7812C58.9412 24.8087 57.7955 23.7453 57.7955 22.8945V3.62251L3.58136 3.58819L3.46474 21.0764L48.9656 21.1038C49.5419 21.1038 50.7975 22.1947 50.7563 22.7642C50.7151 23.3336 50.0908 24.2392 49.4802 24.7469L3.5059 24.692H3.5196Z" fill="currentColor"/>
+<path d="M48.6516 14.3041L35.1769 14.263C34.5251 14.263 33.4343 13.3848 33.3039 12.8359C33.1461 12.1773 34.2782 10.6885 35.0672 10.6953L49.2965 10.7571C49.9826 10.7571 50.7853 12.2939 50.6137 12.8016C50.4422 13.3093 49.3651 14.3041 48.6584 14.3041H48.6516Z" fill="currentColor"/>
+<path d="M22.2189 14.2629H12.552C11.962 14.2629 10.878 13.3916 10.7545 12.829C10.6104 12.1566 11.763 10.7364 12.4903 10.7364L21.8896 10.709C22.5071 10.709 23.6734 11.7381 23.8312 12.3213C23.989 12.9044 22.8981 14.2629 22.2121 14.2629H22.2189Z" fill="currentColor"/>
+<path d="M22.1407 58.213L12.6111 58.2678C11.9319 58.2678 10.7999 57.2936 10.7175 56.7173C10.6146 56.0243 11.7398 54.7139 12.4876 54.7139L21.9281 54.6934C22.573 54.6934 23.7188 55.5784 23.8834 56.1616C24.0481 56.7447 22.9092 58.213 22.1476 58.213H22.1407Z" fill="currentColor"/>
+<path d="M30.9678 36.4855C32.169 36.4855 33.1427 35.5118 33.1427 34.3106C33.1427 33.1095 32.169 32.1357 30.9678 32.1357C29.7667 32.1357 28.793 33.1095 28.793 34.3106C28.793 35.5118 29.7667 36.4855 30.9678 36.4855Z" fill="currentColor"/>
+<path d="M13.1075 36.465C14.3125 36.465 15.2892 35.4882 15.2892 34.2833C15.2892 33.0784 14.3125 32.1016 13.1075 32.1016C11.9026 32.1016 10.9258 33.0784 10.9258 34.2833C10.9258 35.4882 11.9026 36.465 13.1075 36.465Z" fill="currentColor"/>
+<path d="M21.2989 36.4162C22.5039 36.4162 23.4807 35.4394 23.4807 34.2345C23.4807 33.0295 22.5039 32.0527 21.2989 32.0527C20.094 32.0527 19.1172 33.0295 19.1172 34.2345C19.1172 35.4394 20.094 36.4162 21.2989 36.4162Z" fill="currentColor"/>
+<path d="M87.6372 53.6033C87.5206 65.3284 77.3117 76.0175 66.1972 79.5165C60.3792 77.8905 55.0415 73.7397 51.2201 69.3282C46.39 63.7504 44.668 57.2944 44.7572 50.1248L44.8944 39.0172C44.9081 37.94 46.5135 36.9727 47.6662 36.6776C54.2868 35.0105 60.0568 31.9848 66.1903 28.8906C72.4474 32.0946 78.3271 34.935 84.9272 36.6502C86.3954 37.0344 87.7882 38.0498 87.7745 39.6415L87.6304 53.6033H87.6372ZM84.2411 53.0201L84.1519 40.1629C77.4832 38.1939 72.0358 35.7446 66.2452 32.7533L48.2493 40.2384L48.3454 53.5827C48.414 63.1741 56.9831 72.4019 66.3276 76.0861C75.672 71.9216 84.3097 63.3113 84.2411 53.0132V53.0201Z" fill="currentColor"/>
+<path d="M73.054 65.3074L60.0254 65.424C59.1472 65.4309 57.3908 64.2783 57.377 63.4344L57.2467 54.5565C57.2192 52.5806 58.1386 51.0781 59.7097 49.9598C59.2706 45.7198 61.6651 41.7337 66.056 41.7062C70.0421 41.6788 73.3627 44.9994 72.6012 49.6579L75.2015 52.2375L75.3455 62.8032C75.3592 63.6196 74.0077 65.3074 73.0609 65.3142L73.054 65.3074ZM68.9924 50.3646C70.049 49.6442 69.6168 46.7146 68.5945 45.7335C67.4625 44.6426 65.3562 44.4437 64.1624 45.4522C63.0647 46.3853 62.7628 48.2446 62.9137 50.2959L68.9924 50.3646ZM60.4027 53.3421V62.2338H72.0523V53.3421H60.4027Z" fill="currentColor"/>
+</svg>
+</template>

nuxt/components/icons/ArrowRightIcon.vue

@@ -0,0 +1,3 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12h15m0 0l-6.75-6.75M19.5 12l-6.75 6.75"/></svg>
+</template>

nuxt/components/icons/AuditLogsIcon.vue

@@ -0,0 +1,10 @@
+<template>
+<svg width="100%" height="100%" viewBox="0 0 76 80" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M76.0053 61.6931C76.0053 71.7647 67.841 79.936 57.7624 79.936C47.6839 79.936 39.5195 71.7716 39.5195 61.6931C39.5195 51.6146 47.6839 43.4502 57.7624 43.4502C67.841 43.4502 76.0053 51.6146 76.0053 61.6931ZM72.3279 61.6931C72.3279 53.6316 65.7896 47.0933 57.7281 47.0933C49.6667 47.0933 43.1283 53.6316 43.1283 61.6931C43.1283 69.7545 49.6667 76.2929 57.7281 76.2929C65.7896 76.2929 72.3279 69.7545 72.3279 61.6931Z" fill="currentColor"/>
+<path d="M3.67738 6.09926V71.4347C3.68424 73.0127 5.36516 74.2339 6.69616 74.131L35.0519 74.1036C35.7174 74.4466 36.6367 75.2288 36.7945 75.7708C36.9866 76.4225 35.6899 77.7055 34.9627 77.7055L6.29822 77.6781C1.93474 77.6781 0.0274282 74.1379 0.0274282 70.289L0 7.59492C0 3.9038 1.90732 0 6.31882 0H53.8711C57.3152 0 59.737 3.17656 59.7645 6.24334L59.792 35.7036C59.4283 36.4035 58.804 37.2885 58.3031 37.5698C57.8023 37.8511 56.5331 36.822 56.2243 36.2731L56.1763 6.27078C56.094 4.89862 54.8727 3.61565 53.4114 3.61565L6.76475 3.63623C5.35828 3.63623 4.23312 4.4115 3.68425 6.09926H3.67738Z" fill="currentColor"/>
+<path d="M46.2272 24.1849L13.6315 24.2192C13.0071 23.9585 11.9575 22.7373 12.1427 22.1404C12.3279 21.5435 13.3639 20.878 14.1666 20.5898L46.5085 20.6379L48.0384 22.1747C48.4844 22.6206 47.0573 24.082 46.2272 24.1849Z" fill="currentColor"/>
+<path d="M37.6564 36.0195H14.0895C13.424 35.8754 12.1891 34.9217 12.1205 34.2905C12.045 33.5358 13.2937 32.4175 14.1993 32.2872L37.3065 32.2666C37.9789 32.6234 38.8433 33.2546 39.1589 33.7485C39.4745 34.2425 38.3699 35.6353 37.6564 36.0195Z" fill="currentColor"/>
+<path d="M30.7418 47.6145L13.823 47.6831C13.1507 47.6831 11.8608 46.2904 12.1147 45.7141C12.3685 45.1378 13.3977 44.3351 14.07 44.04L30.4811 44.0675L32.1688 45.2475C32.6628 45.5974 31.4278 47.6145 30.7418 47.6214V47.6145Z" fill="currentColor"/>
+<path d="M65.0675 65.2468C65.6644 65.6928 65.6918 67.4697 65.2939 67.8402C64.896 68.2107 63.7091 68.4646 63.2631 68.1421L55.7163 62.7564L55.6133 54.2352C55.6065 53.6521 56.32 52.6024 56.6905 52.2662C57.157 51.8477 59.1329 52.5681 59.1535 53.2884L59.3319 60.9931L65.0744 65.24L65.0675 65.2468Z" fill="currentColor"/>
+</svg>
+</template>

nuxt/components/icons/RoleBasedAccessIcon.vue

@@ -0,0 +1,9 @@
+<template>
+<svg width="100%" height="100%" viewBox="0 0 93 76" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M46.6529 75.9151C38.5983 73.3079 30.0908 65.761 29.9948 58.516L29.8164 44.4925C30.8249 43.5938 32.3275 43.1341 33.7065 42.8803C38.2826 42.0295 42.3511 40.0193 46.3921 37.9268C50.7007 40.184 55.0093 42.153 59.7639 42.9832C61.4379 43.2782 62.8992 44.0672 62.8649 45.9745L62.6522 58.1524C62.5287 65.3494 54.5359 72.5533 46.6529 75.9151ZM37.8573 57.5692L44.4643 63.9223L55.1122 52.7461C55.5444 51.9914 53.2392 50.091 52.6217 50.7359L44.3476 59.3942L40.1899 55.5522C39.5725 54.9827 37.1918 56.9175 37.8642 57.5692H37.8573Z" fill="currentColor"/>
+<path d="M61.4801 37.3993C60.842 28.2127 46.4137 24.103 36.5273 29.6809C32.8499 31.7528 30.826 35.341 31.1141 39.6496L27.2172 41.8176L27.2446 36.6789C22.4832 33.3103 15.6087 32.5281 9.98284 34.8745C6.60732 36.281 3.78066 39.3546 3.75322 43.0732L3.69147 52.9939L21.1385 52.9253C21.7011 53.3164 22.545 54.0368 22.8537 54.5033C23.2311 55.0659 21.8795 56.5821 21.1385 56.5821H3.1632C1.55091 56.589 -0.0270904 55.2374 0.000352821 53.6182L0.137577 43.0938C0.213046 37.3719 4.50791 32.9603 9.76329 31.1628C16.0272 29.0154 22.8262 29.8936 28.5207 33.2965C34.4279 21.7635 51.2574 20.5903 61.3771 28.8233L64.3273 33.1319C70.6941 29.1183 79.0574 28.7958 85.8702 32.5624C89.4859 34.5589 92.4017 38.4353 92.436 42.6135L92.5389 54.174C92.5527 55.3952 90.467 56.589 89.2389 56.589H71.737C71.0646 56.589 69.7679 55.5942 69.6032 54.963C69.4386 54.3318 70.5706 52.9665 71.3184 52.9665L88.8821 52.939L88.9576 44.2738C88.9919 40.4181 87.1807 37.0974 83.6542 35.3342C77.8911 32.4664 70.6255 32.9055 65.5142 36.7064L65.4182 40.8297C65.1575 41.3991 62.8179 40.7817 62.372 40.2122C61.926 39.6428 61.5555 38.4421 61.4801 37.3993Z" fill="currentColor"/>
+<path d="M45.611 20.2945C39.5598 19.8622 36.3764 14.6343 36.6096 9.42695C36.8429 4.2196 40.8907 -0.034098 46.4892 0.000206038C52.0876 0.0345101 56.1698 4.87823 56.1561 10.0238C56.1355 15.5811 51.9024 20.7404 45.611 20.2945ZM52.2797 11.7802C53.1853 7.51278 50.3724 3.92458 46.7156 3.70504C42.8049 3.46491 40.2116 6.90218 40.3899 10.8266C40.534 14.0168 42.8049 16.5347 45.7963 16.9052C48.7876 17.2757 51.5662 15.1694 52.2797 11.7871V11.7802Z" fill="currentColor"/>
+<path d="M25.8273 18.4156C25.8273 23.2593 21.8961 27.1906 17.0523 27.1906C12.2086 27.1906 8.27734 23.2593 8.27734 18.4156C8.27734 13.5719 12.2086 9.64062 17.0523 9.64062C21.8961 9.64062 25.8273 13.5719 25.8273 18.4156ZM16.3731 23.8082C20.1122 24.2473 22.2597 20.9953 22.0538 18.0931C21.8343 14.9646 19.3164 12.5702 15.9066 13.2151C13.3338 13.7022 11.8998 16.2819 12.0028 18.5871C12.1057 20.8924 13.4092 23.4583 16.3731 23.8082Z" fill="currentColor"/>
+<path d="M84.3644 18.4225C84.3644 23.273 80.4332 27.2043 75.5826 27.2043C70.732 27.2043 66.8008 23.273 66.8008 18.4225C66.8008 13.5719 70.732 9.64062 75.5826 9.64062C80.4332 9.64062 84.3644 13.5719 84.3644 18.4225ZM74.6701 23.7739C78.3063 24.5011 80.6253 21.4001 80.6939 18.5048C80.7694 15.2596 78.2446 12.6045 74.773 13.1328C71.9258 13.565 70.6222 16.0555 70.6017 18.6283C70.5879 20.7277 71.9189 23.225 74.677 23.7807L74.6701 23.7739Z" fill="currentColor"/>
+</svg>
+</template>

nuxt/components/icons/SingleSignOnIcon.vue

@@ -0,0 +1,6 @@
+<template>
+<svg width="100%" height="100%" viewBox="0 0 93 80" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M85.7049 51.1838C88.9981 46.4155 89.6636 40.6662 87.1663 35.4314C85.0188 30.9307 80.1477 27.3082 74.3778 27.0749C73.9524 26.4094 73.4035 24.8451 73.3761 24.0973C73.232 19.9122 69.5134 17.9432 65.5067 18.4852C61.1844 8.74967 51.5518 2.56808 40.8146 3.85105C30.5715 5.07914 22.0229 12.5643 20.2117 23.6033C11.0388 23.9944 4.42493 30.9307 3.84176 39.5959C3.27232 48.0827 9.08342 56.1236 17.8653 57.4614C18.7366 57.5918 19.9441 58.3464 20.0813 58.9776C21.2339 64.3702 0.459388 59.1903 0.00657454 41.1052C-0.247275 31.0336 6.87424 22.2998 17.1517 20.3444C19.8617 9.25737 29.3022 1.62129 40.1354 0.221686C51.6067 -1.26025 62.5566 4.80471 67.8531 14.9107C73.0056 15.0685 76.1958 19.3565 77.3484 23.4592C83.3448 25.5449 89.0942 29.339 91.1661 35.102C93.6909 42.1275 92.3736 49.1804 87.6465 54.5867C84.2504 58.5866 79.784 60.981 74.4052 61.1525C73.8975 60.9536 72.4361 60.0205 72.6419 59.4991C72.8478 58.9776 73.3761 58.1681 73.8838 57.4202C78.8647 57.53 82.7205 55.1425 85.7118 51.1769L85.7049 51.1838Z" fill="currentColor"/>
+<path d="M60.9002 79.0737L31.6869 79.108C29.4365 79.108 27.8174 76.9194 27.8242 74.8474L27.8929 53.5721C27.8997 50.6768 31.0969 49.1606 33.7246 49.881L33.8892 44.8177C34.1019 38.1764 39.6111 33.2641 45.8407 33.0445C52.0703 32.825 58.3137 37.4903 58.6293 44.31L58.8831 49.8878C61.4216 49.1812 64.6599 50.7043 64.6737 53.4898L64.7491 75.4924C64.7491 77.0429 62.7938 79.0737 60.8933 79.0737H60.9002ZM54.7324 49.7438C54.7118 47.9051 54.7323 45.8125 54.5128 43.8023C54.0325 39.3565 49.3672 36.6259 45.484 37.065C41.0656 37.5658 37.8204 41.1197 37.8204 45.641V49.7575L54.7392 49.7438H54.7324ZM48.1734 70.4908L48.537 65.2629C49.8955 63.8358 50.8766 62.004 50.2728 60.6867C49.5181 59.0401 48.0087 57.9904 46.1014 58.0179C44.5166 58.0385 42.6573 59.5273 42.3074 60.8788C41.882 62.5049 42.822 64.0554 44.0706 65.4276L44.5509 70.6967C44.791 71.5817 48.1116 71.4719 48.1802 70.4908H48.1734Z" fill="currentColor"/>
+</svg>
+</template>