mirror of
https://github.com/Dokploy/dokploy
synced 2025-06-26 18:27:59 +00:00
405 lines
22 KiB
XML
405 lines
22 KiB
XML
"use client";
|
|
|
|
import { cn } from "@/lib/utils";
|
|
import { Tab } from "@headlessui/react";
|
|
import { motion } from "framer-motion";
|
|
import { Layers, Terminal, Users } from "lucide-react";
|
|
import { useTranslations } from "next-intl";
|
|
import { Container } from "./Container";
|
|
interface Feature {
|
|
name: React.ReactNode;
|
|
summary: string;
|
|
description: string;
|
|
image: string;
|
|
icon: React.ComponentType;
|
|
}
|
|
|
|
const features: Array<Feature> = [
|
|
{
|
|
name: "secondaryFeatures.templates",
|
|
summary: "secondaryFeatures.templatesSummary",
|
|
description: "secondaryFeatures.templatesDes",
|
|
image: "/secondary/templates.png",
|
|
icon: function ReportingIcon() {
|
|
return (
|
|
<>
|
|
<Layers className="size-5 text-primary" />
|
|
</>
|
|
);
|
|
},
|
|
},
|
|
{
|
|
name: "secondaryFeatures.traefik",
|
|
summary: "secondaryFeatures.traefikSummary",
|
|
description: "secondaryFeatures.traefikDes",
|
|
image: "/secondary/traefik.png",
|
|
icon: function ReportingIcon() {
|
|
return (
|
|
<>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 340 456"
|
|
className="size-6"
|
|
>
|
|
<path
|
|
d="M65.412 155.072s24.668-21.474 97.677-21.474c66.978 0 85.8 15.194 104.918 21.474l-99.736 48.735-102.859-48.735z"
|
|
fill="#c9781f"
|
|
/>
|
|
<g transform="matrix(.639262 0 0 .639262 -21.039129 -84.874827)">
|
|
<path
|
|
d="M118.946 476.458c.707 14.572 15.264 7.83 21.858 3.274 6.259-4.325 8.089-.73 8.638-9.266.36-5.61 1.007-11.22.688-16.853-9.464-.858-19.759 1.396-27.518 7.033-3.996 2.905-11.49 12.174-3.666 15.812"
|
|
fill="#f6d2a2"
|
|
/>
|
|
<path
|
|
d="M118.946 476.458c2.119-.788 4.364-1.348 5.802-3.264"
|
|
fill="#c6b198"
|
|
/>
|
|
<path
|
|
d="M152.588 302.861c-55.784-15.687-14.304-86.654 30.492-57.464l-30.492 57.464zm247.848-62.79c44.155-31.014 84.056 38.959 32.74 56.565l-32.74-56.565z"
|
|
fill="#37abc8"
|
|
/>
|
|
<path
|
|
d="M409.934 655.8c11.216 6.94 31.716 27.923 14.891 38.098-16.166 14.802-25.214-16.247-39.403-20.549 6.111-8.298 13.856-15.865 24.512-17.549zm-200.373 23.714c-13.164 2.037-20.574 13.914-31.548 19.945-10.341 6.166-14.297-1.974-15.229-3.627-1.621-.739-1.485.688-3.987-1.831-9.587-15.13 9.989-26.189 20.182-33.705 14.198-2.871 23.096 9.438 30.582 19.218z"
|
|
fill="#f6d2a2"
|
|
/>
|
|
<path
|
|
d="M154.916 283.26c-7.36-3.893-12.759-9.18-8.257-17.693 4.168-7.88 11.911-7.025 19.271-3.132l-11.014 20.825zm266.633-7.401c7.36-3.893 12.759-9.18 8.257-17.693-4.168-7.881-11.91-7.025-19.271-3.132l11.014 20.825z"
|
|
fill="#077e91"
|
|
/>
|
|
<path
|
|
d="M472.21 474.607c-.707 14.572-15.264 7.83-21.858 3.274-6.259-4.325-8.089-.73-8.638-9.265-.36-5.61-1.007-11.22-.688-16.853 9.464-.858 19.759 1.396 27.518 7.033 3.996 2.904 11.49 12.174 3.666 15.811"
|
|
fill="#f6d2a2"
|
|
/>
|
|
<path
|
|
d="M472.21 474.607c-2.119-.788-4.364-1.348-5.802-3.264"
|
|
fill="#c6b198"
|
|
/>
|
|
<path
|
|
d="M289.988 210.595c55.847 0 108.2 7.987 135.492 61.642 24.496 60.141 15.785 124.993 19.521 188.553 3.208 54.577 10.322 117.629-14.997 168.205-26.635 53.21-93.191 66.595-148.026 64.634-43.071-1.541-95.101-15.593-119.409-54.944-28.519-46.165-15.017-114.81-12.946-166.179 2.454-60.849-16.482-121.882 3.508-181.425 20.737-61.765 76.665-75.724 136.857-80.486"
|
|
fill="#37abc8"
|
|
/>
|
|
<path
|
|
d="M299.847 285.567c10.027 58.288 105.304 42.877 91.619-15.91-12.271-52.716-94.951-38.124-91.619 15.91m-113.855 9.427c12.996 50.745 94.24 37.753 91.178-13.149-3.669-60.964-103.603-49.2-91.178 13.149m132.351 58.517c.044 7.79 1.843 15.403.289 24.148-1.935 3.656-5.729 4.043-9.001 5.52-4.524-.71-8.328-3.68-10.143-7.912-1.161-9.202.433-18.111.726-27.316l18.129 5.56z"
|
|
fill="#fff"
|
|
/>
|
|
<ellipse cx="208.4" cy="286.718" rx="13.719" ry="14.86" />
|
|
<ellipse
|
|
cx="214.64"
|
|
cy="290.071"
|
|
rx="3.234"
|
|
ry="3.777"
|
|
fill="#fff"
|
|
/>
|
|
<ellipse cx="323.348" cy="283.017" rx="13.491" ry="14.86" />
|
|
<g fill="#fff">
|
|
<ellipse cx="329.485" cy="286.371" rx="3.181" ry="3.777" />
|
|
<path d="M279.137 354.685c-5.986 14.507 3.338 43.515 19.579 22.119-1.161-9.202.433-18.111.726-27.316l-20.305 5.197z" />
|
|
</g>
|
|
<path
|
|
d="M278.185 326.748c-11.156.951-20.276 14.216-14.475 24.71 7.682 13.9 24.828-1.23 35.507.188 12.291.252 22.361 12.996 32.233 2.304 10.979-11.892-4.727-23.474-17.002-28.652l-36.263 1.45z"
|
|
fill="#f6d2a2"
|
|
/>
|
|
</g>
|
|
<path
|
|
d="M65.412 155.072s2.258 24.459 2.103 35.002 9.947 3.886 10.471 20.467-6.119 13.436-9.619 21.551-5.879 46.12-5.879 46.12 3.591 7.101 14.809 13.495 29.256 9.985 44.875 9.278 26.775-4.054 29.565-5.904 7.419-7.703 9.16-12.23 5.379-41.809 5.126-63.143-3.779-41.019-3.779-41.019l-96.833-23.616z"
|
|
fill="#ef9325"
|
|
/>
|
|
<path
|
|
d="M164.351 258.946c-45.996 5.135-99.366-9.06-99.366-9.06s.784-14.397 4.236-19.464c47.838 14.821 96.1 10.122 96.1 10.122.716 6.721.212 12.064-.969 18.401zm-5.789 28.375c-45.996 5.135-96.073-9.63-96.073-9.63s-.16-13.828 1.667-19.9c47.838 14.821 98.934 11.128 98.934 11.128-.43 7.296-1.456 14.477-4.528 18.402z"
|
|
fill="#e5e5e5"
|
|
/>
|
|
<path
|
|
d="M268.007 155.072l-.155 35.002c.157 10.543-6.123 3.886-6.654 20.467s6.196 13.436 9.74 21.551 5.953 46.12 5.953 46.12-3.637 7.101-14.995 13.495-29.623 9.985-45.439 9.278-27.112-4.054-29.937-5.904-7.512-7.703-9.275-12.23-5.447-41.809-5.19-63.143 3.826-41.019 3.826-41.019l92.127-23.616z"
|
|
fill="#ef9325"
|
|
/>
|
|
<path
|
|
d="M173.748 258.946c46.574 5.135 100.615-9.06 100.615-9.06s-.794-14.397-4.289-19.464c-48.439 14.821-97.307 10.122-97.307 10.122-.725 6.721-.214 12.064.981 18.401zm5.862 28.375c46.574 5.135 97.28-9.63 97.28-9.63s.162-13.828-1.688-19.9c-48.439 14.821-100.177 11.128-100.177 11.128.436 7.296 1.475 14.477 4.585 18.402z"
|
|
fill="#e5e5e5"
|
|
/>
|
|
<path
|
|
d="M286.587 199.932c-1.447 2.731-4.312 4.049-6.398 2.943l-1.672-.885c-2.087-1.105-2.606-4.216-1.158-6.947l32.593-61.519c1.447-2.731 4.312-4.049 6.398-2.943l1.672.885c2.087 1.105 2.606 4.216 1.158 6.947l-32.593 61.519z"
|
|
fill="#d2e261"
|
|
/>
|
|
<path d="M271.195 228.985c-.843 1.591-3.218 1.985-5.305.879l-1.672-.885c-2.087-1.105-3.095-3.292-2.252-4.883l15.291-28.862c.843-1.591 3.218-1.985 5.305-.879l1.672.885c2.087 1.105 3.095 3.292 2.252 4.883l-15.291 28.862z" />
|
|
<path
|
|
d="M284.791 194.189l-1.672-.885c-2.087-1.105-4.222-1.165-4.768-.134l-.977 1.845c.547-1.032 2.681-.972 4.768.134l1.672.885c2.087 1.105 3.336 2.838 2.789 3.869l.977-1.845c.547-1.031-.703-2.764-2.789-3.869z"
|
|
fill="#9b9b9b"
|
|
/>
|
|
<ellipse
|
|
transform="matrix(.599116 .222975 -.222975 .599116 100.48325 -168.1724)"
|
|
cx="456.838"
|
|
cy="462.661"
|
|
rx="11.224"
|
|
ry="8.683"
|
|
fill="#f6d2a2"
|
|
/>
|
|
<path
|
|
d="M50.417 200.925c1.32 2.795 4.121 4.243 6.256 3.234l1.71-.808c2.135-1.009 2.796-4.092 1.476-6.887l-29.737-62.949c-1.32-2.795-4.121-4.243-6.256-3.234l-1.71.808c-2.135 1.009-2.796 4.092-1.476 6.887l29.737 62.949z"
|
|
fill="#d2e261"
|
|
/>
|
|
<path d="M64.461 230.653c.769 1.628 3.123 2.13 5.259 1.122l1.71-.808c2.135-1.009 3.243-3.146 2.473-4.775l-13.952-29.533c-.769-1.628-3.123-2.13-5.259-1.122l-1.71.808c-2.135 1.009-3.243 3.146-2.473 4.775l13.952 29.533z" />
|
|
<path
|
|
d="M52.475 195.27l1.71-.808c2.135-1.009 4.27-.971 4.769.084l.892 1.888c-.499-1.055-2.634-1.093-4.769-.085l-1.71.808c-2.135 1.009-3.462 2.682-2.964 3.738l-.892-1.888c-.498-1.055.828-2.728 2.964-3.737z"
|
|
fill="#9b9b9b"
|
|
/>
|
|
<ellipse
|
|
transform="matrix(-.599116 .222975 -.222975 -.599116 252.76813 458.95304)"
|
|
cx="137.56"
|
|
cy="463.922"
|
|
rx="11.224"
|
|
ry="8.683"
|
|
fill="#f6d2a2"
|
|
/>
|
|
<g transform="matrix(.639262 0 0 .639262 -21.039129 -84.874827)">
|
|
<path
|
|
d="M159.132 324.732c-2.218 4.033-7.45 5.414-11.687 3.084l-4.873-2.679c-4.237-2.33-5.873-7.488-3.656-11.521l50.714-92.23c2.218-4.033 7.45-5.414 11.687-3.084l4.873 2.679c4.237 2.33 5.33 6.689 3.656 11.521-17.765 51.258-50.714 92.23-50.714 92.23z"
|
|
fill="#960000"
|
|
/>
|
|
<path
|
|
d="M172.547 272.051c15.422-28.047 25.555-52.169 23.141-54.905l.057-.103c-.066-.036-.136-.06-.202-.096-.008-.005-.01-.021-.019-.026l-.007.014c-23.699-12.841-55.583-.124-71.334 28.522s-9.41 62.381 14.128 75.514l-.007.014c.009.005.023-.002.032.002.066.037.123.083.189.119l.057-.103c3.602.573 18.543-20.905 33.965-48.952z"
|
|
fill="#595959"
|
|
/>
|
|
<path
|
|
d="M426.693 324.925c2.1 4.095 7.291 5.627 11.593 3.42l4.948-2.538c4.302-2.206 6.087-7.315 3.987-11.41l-48.031-93.655c-2.1-4.095-7.291-5.627-11.593-3.42l-4.948 2.538c-4.302 2.206-5.521 6.533-3.987 11.41 16.279 51.749 48.031 93.655 48.031 93.655z"
|
|
fill="#960000"
|
|
/>
|
|
<path
|
|
d="M414.804 271.879c-14.606-28.48-24.039-52.885-21.547-55.55l-.054-.105c.067-.034.138-.056.205-.09.009-.005.011-.021.02-.025l.007.014c24.059-12.152 55.563 1.48 70.481 30.569s7.606 62.627-16.301 75.075l.007.014c-.009.004-.023-.003-.032.001-.067.035-.125.08-.192.114l-.054-.105c-3.618.468-17.934-21.432-32.54-49.912z"
|
|
fill="#595959"
|
|
/>
|
|
<path
|
|
d="M462.36 259.869s-17.746-44.446-38.326-67.945-221.937-31.512-255.003 0-45.533 67.945-45.533 67.945v-9.844s15.295-43.268 45.533-67.945 228.946-23.378 254.582 0 38.747 67.945 38.747 67.945v9.844z"
|
|
fill="#353535"
|
|
/>
|
|
<g fill="#960000">
|
|
<ellipse
|
|
transform="matrix(-.8898 .4563 -.4563 -.8898 986.5333 258.1984)"
|
|
cx="462.092"
|
|
cy="248.211"
|
|
rx="6.949"
|
|
ry="16.975"
|
|
/>
|
|
<ellipse
|
|
transform="matrix(.8763 .4818 -.4818 .8763 134.6121 -30.1261)"
|
|
cx="125.962"
|
|
cy="247.029"
|
|
rx="6.949"
|
|
ry="16.975"
|
|
/>
|
|
</g>
|
|
</g>
|
|
<g fill="#fff">
|
|
<path
|
|
d="M226.029 75.255h-23.784-18.854-28.918-16.336-32.168c-21.556 0-21.482 57.282-1.243 60.583l41.85-2.691c5.06 0 15.163-19.597 17.058-21.137s8.137-1.729 10.596 0 8.05 19.163 13.109 19.163l41.85 4.665c19.548-8.996 14.62-60.583-3.16-60.583z"
|
|
opacity=".6"
|
|
/>
|
|
<path
|
|
d="M137.846 87.099c-13.223-.295-33.913-.175-45.214-.083-1.895 6.213-4.008 14.079-2.96 21.717l48.445.05c9.554 0 17.587 1.803 25.058 3.756.184-.235.339-.408.46-.506 1.895-1.541 8.137-1.729 10.596 0 .636.447 1.485 1.955 2.477 3.931 3.814.804 7.635 1.36 11.605 1.41l52.462.047c2.077-6.94.545-14.38.08-21.372-15.921 0-41.224-.359-53.355-.359-17.093-.001-32.016-8.196-49.651-8.59z"
|
|
opacity=".5"
|
|
/>
|
|
</g>
|
|
<path d="M155.896 123.631c-.528-12.356 23.029-13.9 25.811-3.558 2.775 10.318-24.651 12.715-25.811 3.558-.926-7.311 0 0 0 0z" />
|
|
<g transform="matrix(.163636 0 0 .163636 2.866751 26.432443)">
|
|
<path
|
|
d="M380.282 2504.931h17.342c7.054 0 12.737-.196 17.048-.588a60.88 60.88 0 0 0 13.227-2.645c4.507-1.372 7.838-3.527 9.994-6.466 2.155-3.135 3.233-7.152 3.233-12.051 0-5.487-1.862-10.288-5.585-14.403s-8.818-6.173-15.284-6.173h-1.764l-19.987.882h-3.233c-12.345 0-21.359-4.409-27.042-13.227-5.683-9.014-8.524-23.612-8.524-43.796v-160.193h54.083c12.933 0 19.399-5.584 19.399-16.754 0-5.29-1.666-9.601-4.997-12.933-3.135-3.331-7.936-4.997-14.403-4.997h-54.083v-85.24c0-6.858-1.96-12.051-5.879-15.578-3.919-3.723-8.818-5.584-14.697-5.585-6.271 0-12.051 2.254-17.342 6.76-5.095 4.507-7.838 9.896-8.23 16.166l-7.054 83.477H270.35c-6.467 0-11.365 1.666-14.697 4.997-3.331 3.136-4.997 7.251-4.997 12.345 0 5.291 1.666 9.504 4.997 12.639 3.527 3.136 8.524 4.703 14.991 4.703h35.86v169.305c0 30.373 6.662 52.908 19.987 67.604 13.325 14.501 31.255 21.751 53.79 21.751m149.319-4.115c7.25 0 13.521-2.155 18.812-6.466 5.487-4.311 8.23-10.386 8.23-18.224v-151.375c0-22.927 7.25-41.248 21.751-54.965 14.696-13.717 35.272-20.575 61.726-20.575 6.27 0 11.071-2.057 14.403-6.173 3.331-4.311 4.997-9.406 4.997-15.284 0-6.27-1.862-11.757-5.585-16.46-3.527-4.703-8.426-7.054-14.697-7.054-20.771 0-38.603 6.173-53.496 18.518-14.697 12.149-24.494 27.336-29.393 45.559l.294-35.272c0-7.446-2.645-13.227-7.936-17.342-5.095-4.311-11.268-6.466-18.518-6.467s-13.521 2.156-18.812 6.467c-5.291 4.115-7.936 10.092-7.936 17.93v242.494c0 7.838 2.547 13.913 7.642 18.224s11.267 6.466 18.518 6.466m719.005-.001c7.25 0 13.521-2.253 18.812-6.76 5.291-4.703 7.936-11.169 7.936-19.4v-228.385h49.674c12.541 0 18.811-5.682 18.812-17.048 0-5.095-1.568-9.308-4.703-12.639-2.94-3.331-7.642-4.997-14.109-4.997h-49.674v-22.927c0-15.872.588-28.413 1.764-37.623 1.372-9.405 3.821-16.558 7.348-21.457 3.723-5.094 7.936-8.328 12.639-9.7 4.703-1.567 11.267-2.351 19.693-2.351h24.984c5.878 0 10.385-1.959 13.521-5.879 3.331-3.919 4.997-8.622 4.997-14.109s-1.666-10.189-4.997-14.109c-3.135-4.115-7.544-6.172-13.227-6.173h-35.86c-26.258 0-46.833 7.447-61.726 22.339-14.893 14.697-22.339 39.583-22.339 74.659v37.329h-38.505c-6.467 0-11.267 1.666-14.403 4.997s-4.703 7.545-4.703 12.639c0 4.899 1.568 9.014 4.703 12.345 3.135 3.136 7.936 4.703 14.403 4.703h38.505v228.385c0 8.23 2.547 14.697 7.642 19.4 5.291 4.507 11.561 6.76 18.812 6.76m185.472-360.065c10.385 0 18.714-2.939 24.984-8.818 6.27-6.074 9.406-13.912 9.406-23.515 0-9.797-3.135-17.636-9.406-23.515-6.271-6.074-14.501-9.111-24.69-9.112-10.386 0-18.812 3.038-25.278 9.112-6.271 6.075-9.406 13.913-9.406 23.515s3.135 17.44 9.406 23.515c6.27 5.879 14.599 8.818 24.984 8.818m-.294 360.067c7.25 0 13.521-2.351 18.812-7.054 5.487-4.899 8.23-11.463 8.23-19.693v-238.967c0-8.23-2.646-14.696-7.936-19.4-5.095-4.703-11.17-7.054-18.224-7.054-7.25 0-13.619 2.352-19.106 7.054-5.291 4.703-7.936 11.17-7.936 19.4v238.967c0 8.622 2.547 15.284 7.642 19.987 5.095 4.507 11.267 6.76 18.518 6.76m141.382-.001c7.25 0 13.521-2.351 18.812-7.054 5.487-4.703 8.23-11.267 8.23-19.693v-128.154l138.148 146.966c4.899 5.487 10.777 8.23 17.636 8.23 6.466 0 12.149-2.449 17.048-7.348 5.095-4.899 7.642-10.484 7.642-16.754 0-5.683-2.156-10.777-6.466-15.284l-116.691-122.864 106.697-95.528c4.703-4.507 7.054-9.504 7.054-14.991 0-6.074-2.45-11.561-7.348-16.46-4.703-4.899-10.19-7.348-16.46-7.348-4.899 0-9.504 1.862-13.815 5.585l-133.445 122.276v-224.858c0-8.23-2.646-14.696-7.936-19.4-5.095-4.702-11.169-7.054-18.224-7.054-7.25 0-13.619 2.352-19.106 7.054-5.291 4.703-7.936 11.17-7.936 19.4v366.533c0 8.622 2.547 15.284 7.642 19.987 5.095 4.507 11.267 6.76 18.518 6.76"
|
|
fill="#333"
|
|
/>
|
|
<path
|
|
d="M776.626 2500.717c-33.865-2.92-59.743-13.135-78.565-31.014-19.15-18.191-27.367-41.907-24.124-69.629 3.732-31.901 18.891-54.429 45.47-67.572 20.485-10.129 40.921-13.983 74.202-13.99 23.646-.01 43.459 1.926 73.679 7.184l14.376 2.365c.632 0 1.133-2.378 2.505-11.887 2.481-17.203 2.925-23.14 2.249-30.031-.787-8.022-1.813-11.843-4.852-18.059-7.841-16.039-26.454-25.853-56.343-29.706-8.548-1.102-28.276-1.256-36.839-.288-14.347 1.622-22.352 3.689-40.207 10.379-10.446 3.914-10.494 3.926-14.66 3.682-7.163-.42-12.053-3.663-15.189-10.073-1.292-2.64-1.519-3.73-1.519-7.287 0-5.34 1.391-8.175 6.233-12.704 10.859-10.158 29.133-18.809 47.576-22.523 11.809-2.378 17.623-2.878 33.182-2.854 16.1.042 26.394.934 40.701 3.594 23.797 4.425 41.866 12.223 55.492 23.95 4.043 3.479 10.139 10.328 12.751 14.324.798 1.222 1.621 2.221 1.828 2.221s1.528-1.468 2.935-3.261c20.632-26.29 55.381-41.171 96.092-41.15 28.795 0 55.56 7.299 75.511 20.553 15.825 10.512 28.68 26.706 33.874 42.67 2.982 9.166 3.435 12.553 3.463 25.866.016 8.284-.212 13.871-.674 16.46-4.669 26.166-15.791 44.293-35.095 57.201-15.53 10.384-35.034 16.46-60.543 18.86-12.841 1.208-36.328 1.094-51.543-.251-12.913-1.141-28.769-3.149-35.533-4.499-5.662-1.13-25.051-4.368-25.21-4.209-.07.071-.993 5.869-2.05 12.888-1.688 11.207-1.927 14.003-1.962 22.951-.038 9.098.091 10.694 1.189 14.892 3.53 13.501 11.308 22.533 25.42 29.515 13.883 6.868 28.436 9.841 50.426 10.299 9.735.205 14.721.062 20.812-.583 14.765-1.566 21.493-3.283 41.11-10.495 4.886-1.796 9.872-3.431 11.081-3.632 2.59-.432 7.42.46 10.235 1.89 5.081 2.581 9.35 9.463 9.323 15.03-.029 6.504-2.223 10.444-8.663 15.567-15.397 12.25-35.056 19.763-58.523 22.365-8.368.928-27.474 1.065-36.702.263-25.989-2.257-44.033-6.702-60.523-14.909-12.867-6.403-22.683-14.347-30.015-24.289l-3.401-4.578c-.069-.075-1.266 1.336-2.661 3.135-6.166 7.954-15.595 16.503-24.809 22.494-13.302 8.649-32.399 15.247-51.722 17.872-5.763.782-24.882 1.428-29.785 1.005zm33.182-37.232c15.776-3.496 29.835-11.377 40.042-22.445 9.31-10.095 16.946-25.219 21.148-41.885 2.369-9.395 6.307-35.543 5.434-36.082-.344-.213-2.425-.55-4.624-.749s-8.465-.939-13.926-1.645c-32.435-4.195-52.334-5.825-63.489-5.2-21.208 1.188-29.854 3.039-42.587 9.121-6.523 3.115-11.026 6.496-14.588 10.953-5.111 6.395-8.196 12.75-10.346 21.313-1.565 6.231-1.724 22.547-.272 27.804 2.447 8.855 5.351 13.867 11.881 20.503 8.943 9.087 20.731 15.149 35.354 18.18 7.477 1.55 7.256 1.535 19.775 1.347 9.084-.138 12.483-.393 16.199-1.216h0zm206.667-122.602c13.194-1.164 21.307-3.213 31.275-7.896 8.29-3.895 13.109-7.876 17.669-14.598 6.713-9.896 9.327-19.261 9.26-33.176-.048-9.918-.889-14.043-4.312-21.163-7.65-15.908-25.62-27.303-49.189-31.19-5.881-.97-21.667-.798-27.695.301-11.597 2.116-21.4 5.973-30.046 11.821-15.974 10.804-26.998 27.09-33.136 48.954-2.411 8.588-3.054 11.884-5.204 26.687l-1.983 13.655 2.656.293 36.622 4.435c6.61.852 14.723 1.761 18.028 2.021 9.555.75 26.685.68 36.056-.146h0z"
|
|
fill="#37abc8"
|
|
/>
|
|
</g>
|
|
</svg>
|
|
</>
|
|
);
|
|
},
|
|
},
|
|
{
|
|
name: "secondaryFeatures.users",
|
|
summary: "secondaryFeatures.usersSummary",
|
|
description: "secondaryFeatures.usersDes",
|
|
image: "/secondary/users.png",
|
|
icon: function InventoryIcon() {
|
|
return (
|
|
<>
|
|
<Users className="size-5 text-primary" />
|
|
</>
|
|
);
|
|
},
|
|
},
|
|
{
|
|
name: "secondaryFeatures.terminal",
|
|
summary: "secondaryFeatures.terminalSummary",
|
|
description: "secondaryFeatures.terminalDes",
|
|
image: "/secondary/terminal.png",
|
|
icon: function ContactsIcon() {
|
|
return (
|
|
<>
|
|
<Terminal className="size-5 text-primary" />
|
|
</>
|
|
);
|
|
},
|
|
},
|
|
];
|
|
|
|
function Feature({
|
|
feature,
|
|
isActive,
|
|
className,
|
|
...props
|
|
}: React.ComponentPropsWithoutRef<"div"> & {
|
|
feature: Feature;
|
|
isActive: boolean;
|
|
}) {
|
|
const t = useTranslations("HomePage");
|
|
return (
|
|
<div
|
|
className={cn(
|
|
className,
|
|
!isActive ? "opacity-75 hover:opacity-100 " : "rounded-xl",
|
|
" relative p-4",
|
|
)}
|
|
{...props}
|
|
>
|
|
<div
|
|
className={cn(
|
|
"flex size-9 items-center justify-center rounded-lg",
|
|
isActive ? "bg-border" : "bg-muted",
|
|
)}
|
|
>
|
|
<feature.icon />
|
|
</div>
|
|
{isActive && (
|
|
<motion.span
|
|
layoutId="bubble"
|
|
className="absolute inset-0 z-10 rounded-xl bg-white/5 mix-blend-difference"
|
|
transition={{
|
|
type: "spring",
|
|
bounce: 0.2,
|
|
duration: 0.6,
|
|
}}
|
|
/>
|
|
)}
|
|
<h3
|
|
className={cn(
|
|
"mt-6 text-sm font-medium",
|
|
isActive ? "text-primary" : "text-primary/85",
|
|
)}
|
|
>
|
|
{feature.name}
|
|
</h3>
|
|
<p className="mt-2 font-display text-xl text-foreground">
|
|
{t(feature.summary)}
|
|
</p>
|
|
<p className="mt-4 text-sm text-muted-foreground">
|
|
{t(feature.description)}
|
|
</p>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function FeaturesMobile() {
|
|
return (
|
|
<div className="-mx-4 mt-20 flex flex-col gap-y-10 overflow-hidden px-4 sm:-mx-6 sm:px-6 lg:hidden">
|
|
{features.map((feature) => (
|
|
<div key={feature.summary}>
|
|
<Feature feature={feature} className="mx-auto max-w-2xl" isActive />
|
|
<div className="relative mt-10 pb-10">
|
|
<div className="absolute -inset-x-4 bottom-0 top-8 bg-muted sm:-inset-x-6" />
|
|
<div className="relative mx-auto w-[52.75rem] overflow-hidden rounded-xl bg-white shadow-lg shadow-slate-900/5 ring-1 ring-slate-500/10">
|
|
<img
|
|
className="w-full"
|
|
src={feature.image}
|
|
alt=""
|
|
sizes="52.75rem"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function FeaturesDesktop() {
|
|
const t = useTranslations("HomePage");
|
|
return (
|
|
<Tab.Group as="div" className="hidden lg:mt-20 lg:block">
|
|
{({ selectedIndex }) => (
|
|
<>
|
|
<Tab.List className="grid grid-cols-4 gap-x-8">
|
|
{features.map((feature, featureIndex) => (
|
|
<Feature
|
|
key={feature.summary}
|
|
feature={{
|
|
...feature,
|
|
name: (
|
|
<Tab className="ui-not-focus-visible:outline-none">
|
|
<span className="absolute inset-0" />
|
|
{t(feature.name)}
|
|
</Tab>
|
|
),
|
|
}}
|
|
isActive={featureIndex === selectedIndex}
|
|
className="relative"
|
|
/>
|
|
))}
|
|
</Tab.List>
|
|
<Tab.Panels className="relative mt-20 overflow-hidden rounded-4xl bg-muted px-14 py-16 xl:px-16">
|
|
<div className="-mx-5 flex">
|
|
{features.map((feature, featureIndex) => (
|
|
<Tab.Panel
|
|
static
|
|
key={feature.summary}
|
|
className={cn(
|
|
"px-5 transition duration-500 ease-in-out ui-not-focus-visible:outline-none",
|
|
featureIndex !== selectedIndex && "opacity-60",
|
|
)}
|
|
style={{
|
|
transform: `translateX(-${selectedIndex * 100}%)`,
|
|
}}
|
|
aria-hidden={featureIndex !== selectedIndex}
|
|
>
|
|
<div className="w-[52.75rem] overflow-hidden rounded-xl bg-red-500 shadow-lg shadow-slate-900/5 ring-1 ring-slate-500/10">
|
|
<img
|
|
className="w-full"
|
|
src={feature.image}
|
|
alt=""
|
|
sizes="52.75rem"
|
|
/>
|
|
</div>
|
|
</Tab.Panel>
|
|
))}
|
|
</div>
|
|
<div className="pointer-events-none absolute inset-0 rounded-4xl ring-1 ring-inset ring-slate-900/10" />
|
|
</Tab.Panels>
|
|
</>
|
|
)}
|
|
</Tab.Group>
|
|
);
|
|
}
|
|
|
|
export function SecondaryFeatures() {
|
|
const t = useTranslations("HomePage");
|
|
return (
|
|
<section
|
|
id="secondary-features"
|
|
aria-label="Features for simplifying everyday business tasks"
|
|
className="bg-black pb-14 pt-20 sm:pb-20 sm:pt-32 lg:pb-32"
|
|
>
|
|
<Container className="max-w-[95rem]">
|
|
<div className="mx-auto max-w-2xl md:text-center">
|
|
<h2 className="font-display text-3xl tracking-tight text-primary sm:text-4xl">
|
|
{t("secondaryFeatures.title")}
|
|
</h2>
|
|
<p className="mt-4 text-lg tracking-tight text-muted-foreground">
|
|
{t("secondaryFeatures.des")}
|
|
</p>
|
|
</div>
|
|
<FeaturesMobile />
|
|
<FeaturesDesktop />
|
|
</Container>
|
|
</section>
|
|
);
|
|
}
|