@appcorp/app-corp-vista 0.2.39 → 0.2.41
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/molecules/vista-header-v1/nav-bar.d.ts +13 -0
- package/molecules/vista-header-v1/nav-bar.js +85 -0
- package/molecules/vista-header-v1/vista-header-v1.js +6 -123
- package/organisms/vista-hero-v13/vista-hero-v13.d.ts +2 -0
- package/organisms/vista-hero-v13/vista-hero-v13.js +4 -4
- package/package.json +1 -1
- package/type/vista-header-type.d.ts +3 -0
- package/type/vista-hero-type.d.ts +1 -1
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { FC } from "react";
|
|
2
|
+
import { VistaHeaderV1Item } from "../../type/vista-header-type";
|
|
3
|
+
interface Props {
|
|
4
|
+
companyName: string;
|
|
5
|
+
handleMenuOpen: (b: boolean) => void;
|
|
6
|
+
items: VistaHeaderV1Item[];
|
|
7
|
+
loginVisible?: boolean;
|
|
8
|
+
logoAlt: string;
|
|
9
|
+
logoSrc: string;
|
|
10
|
+
menuOpen: boolean;
|
|
11
|
+
}
|
|
12
|
+
export declare const NavBar: FC<Props>;
|
|
13
|
+
export {};
|
|
@@ -0,0 +1,85 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
"use strict";
|
|
3
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
4
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
5
|
+
};
|
|
6
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
7
|
+
exports.NavBar = void 0;
|
|
8
|
+
var react_1 = __importDefault(require("react"));
|
|
9
|
+
var react_2 = require("@headlessui/react");
|
|
10
|
+
var outline_1 = require("@heroicons/react/24/outline");
|
|
11
|
+
var solid_1 = require("@heroicons/react/20/solid");
|
|
12
|
+
var NavBar = function (_a) {
|
|
13
|
+
var companyName = _a.companyName, handleMenuOpen = _a.handleMenuOpen, items = _a.items, _b = _a.loginVisible, loginVisible = _b === void 0 ? false : _b, logoAlt = _a.logoAlt, logoSrc = _a.logoSrc, menuOpen = _a.menuOpen;
|
|
14
|
+
return (react_1.default.createElement(react_1.default.Fragment, null,
|
|
15
|
+
react_1.default.createElement("nav", { "aria-label": "Global", className: "mx-auto flex max-w-7xl items-center justify-between p-6 lg:px-8" },
|
|
16
|
+
react_1.default.createElement("div", { className: "flex lg:flex-1" },
|
|
17
|
+
react_1.default.createElement("a", { href: "#", className: "-m-1.5 p-1.5" },
|
|
18
|
+
react_1.default.createElement("span", { className: "sr-only" }, companyName),
|
|
19
|
+
react_1.default.createElement("img", { alt: logoAlt, className: "h-8 w-auto", src: logoSrc }))),
|
|
20
|
+
react_1.default.createElement("div", { className: "flex lg:hidden" },
|
|
21
|
+
react_1.default.createElement("button", { className: "-m-2.5 inline-flex items-center justify-center rounded-md p-2.5 text-gray-700", onClick: function () { return handleMenuOpen(true); }, type: "button" },
|
|
22
|
+
react_1.default.createElement("span", { className: "sr-only" }, "Open main menu"),
|
|
23
|
+
react_1.default.createElement(outline_1.Bars3Icon, { "aria-hidden": "true", className: "size-6" }))),
|
|
24
|
+
react_1.default.createElement(react_2.PopoverGroup, { className: "hidden lg:flex lg:gap-x-12" }, items.map(function (_a) {
|
|
25
|
+
var name = _a.name, href = _a.href, megaMenu = _a.megaMenu, cta = _a.cta;
|
|
26
|
+
var multiGrid = megaMenu && megaMenu.length > 5 ? true : false;
|
|
27
|
+
if (megaMenu && (megaMenu === null || megaMenu === void 0 ? void 0 : megaMenu.length) > 1) {
|
|
28
|
+
return (react_1.default.createElement(react_2.Popover, { key: name, className: "" },
|
|
29
|
+
react_1.default.createElement(react_2.PopoverButton, { className: "flex items-center gap-x-1 text-sm/6 font-semibold text-gray-900" },
|
|
30
|
+
name,
|
|
31
|
+
react_1.default.createElement(solid_1.ChevronDownIcon, { "aria-hidden": "true", className: "size-5 flex-none text-gray-400" })),
|
|
32
|
+
react_1.default.createElement(react_2.PopoverPanel, { transition: true, className: "absolute left-1/2 z-10 mt-3 w-screen ".concat(multiGrid ? 'max-w-7xl' : 'max-w-md', " -translate-x-1/2 overflow-hidden rounded-3xl bg-white shadow-lg ring-1 ring-gray-900/5 transition data-closed:translate-y-1 data-closed:opacity-0 data-enter:duration-200 data-enter:ease-out data-leave:duration-150 data-leave:ease-in") },
|
|
33
|
+
react_1.default.createElement("div", { className: "".concat(multiGrid ? 'grid grid-cols-2 gap-4' : 'p-4') }, megaMenu.map(function (_a) {
|
|
34
|
+
var name = _a.name, href = _a.href, description = _a.description, icon = _a.icon;
|
|
35
|
+
return (react_1.default.createElement("div", { key: name, className: "group relative flex items-center gap-x-6 rounded-lg p-4 text-sm/6 hover:bg-gray-50" },
|
|
36
|
+
react_1.default.createElement("div", { className: "flex size-11 flex-none items-center justify-center rounded-lg bg-gray-50 group-hover:bg-white" }, icon),
|
|
37
|
+
react_1.default.createElement("div", { className: "flex-auto" },
|
|
38
|
+
react_1.default.createElement("a", { href: href, className: "block font-semibold text-primary" },
|
|
39
|
+
name,
|
|
40
|
+
react_1.default.createElement("span", { className: "absolute inset-0" })),
|
|
41
|
+
react_1.default.createElement("p", { className: "mt-1 text-gray-600" }, description))));
|
|
42
|
+
})),
|
|
43
|
+
react_1.default.createElement("div", { className: "grid grid-cols-2 divide-x divide-gray-900/5 bg-gray-50" }, cta && cta.length > 1 && cta.map(function (_a) {
|
|
44
|
+
var icon = _a.icon, name = _a.name, href = _a.href;
|
|
45
|
+
return (react_1.default.createElement("a", { key: name, href: href, className: "flex items-center justify-center gap-x-2.5 p-3 text-sm/6 font-semibold text-gray-900 hover:bg-gray-100" },
|
|
46
|
+
icon,
|
|
47
|
+
name));
|
|
48
|
+
})))));
|
|
49
|
+
}
|
|
50
|
+
;
|
|
51
|
+
return (react_1.default.createElement("a", { key: name, href: href, className: "text-sm/6 font-semibold text-gray-900" }, name));
|
|
52
|
+
})),
|
|
53
|
+
react_1.default.createElement("div", { className: "hidden lg:flex lg:flex-1 lg:justify-end" }, loginVisible && (react_1.default.createElement("a", { href: "#", className: "text-sm/6 font-semibold text-gray-900" },
|
|
54
|
+
"Log in ",
|
|
55
|
+
react_1.default.createElement("span", { "aria-hidden": "true" }, "\u2192"))))),
|
|
56
|
+
react_1.default.createElement(react_2.Dialog, { open: menuOpen, onClose: handleMenuOpen, className: "lg:hidden" },
|
|
57
|
+
react_1.default.createElement("div", { className: "fixed inset-0 z-50" }),
|
|
58
|
+
react_1.default.createElement(react_2.DialogPanel, { className: "fixed inset-y-0 right-0 z-50 w-full overflow-y-auto bg-white p-6 sm:max-w-sm sm:ring-1 sm:ring-gray-900/10" },
|
|
59
|
+
react_1.default.createElement("div", { className: "flex items-center justify-between" },
|
|
60
|
+
react_1.default.createElement("a", { href: "#", className: "-m-1.5 p-1.5" },
|
|
61
|
+
react_1.default.createElement("span", { className: "sr-only" }, companyName),
|
|
62
|
+
react_1.default.createElement("img", { alt: logoAlt, src: logoSrc, className: "h-8 w-auto" })),
|
|
63
|
+
react_1.default.createElement("button", { type: "button", onClick: function () { return handleMenuOpen(false); }, className: "-m-2.5 rounded-md p-2.5 text-gray-700" },
|
|
64
|
+
react_1.default.createElement("span", { className: "sr-only" }, "Close menu"),
|
|
65
|
+
react_1.default.createElement(outline_1.XMarkIcon, { "aria-hidden": "true", className: "size-6" }))),
|
|
66
|
+
react_1.default.createElement("div", { className: "mt-6 flow-root" },
|
|
67
|
+
react_1.default.createElement("div", { className: "-my-6 divide-y divide-gray-500/10" },
|
|
68
|
+
react_1.default.createElement("div", { className: "space-y-2 py-6" }, items.map(function (item) {
|
|
69
|
+
if (item.megaMenu) {
|
|
70
|
+
return (react_1.default.createElement(react_2.Disclosure, { as: "div", className: "-mx-3", key: item.name },
|
|
71
|
+
react_1.default.createElement(react_2.DisclosureButton, { className: "group flex w-full items-center justify-between rounded-lg py-2 pr-3.5 pl-3 text-base/7 font-semibold text-gray-900 hover:bg-gray-50" },
|
|
72
|
+
item.name,
|
|
73
|
+
react_1.default.createElement(solid_1.ChevronDownIcon, { "aria-hidden": "true", className: "size-5 flex-none group-data-open:rotate-180" })),
|
|
74
|
+
react_1.default.createElement(react_2.DisclosurePanel, { className: "mt-2 space-y-2" }, item.megaMenu.map(function (_a) {
|
|
75
|
+
var name = _a.name, href = _a.href;
|
|
76
|
+
return (react_1.default.createElement(react_2.DisclosureButton, { as: "a", className: "block rounded-lg py-2 pr-3 pl-6 text-sm/7 font-semibold text-gray-900 hover:bg-gray-50", href: href, key: name }, name));
|
|
77
|
+
}))));
|
|
78
|
+
}
|
|
79
|
+
;
|
|
80
|
+
return (react_1.default.createElement("a", { href: "#", className: "-mx-3 block rounded-lg px-3 py-2 text-base/7 font-semibold text-gray-900 hover:bg-gray-50", key: item.name }, item.name));
|
|
81
|
+
})),
|
|
82
|
+
loginVisible && (react_1.default.createElement("div", { className: "py-6" },
|
|
83
|
+
react_1.default.createElement("a", { href: "#", className: "-mx-3 block rounded-lg px-3 py-2.5 text-base/7 font-semibold text-gray-900 hover:bg-gray-50" }, "Log in")))))))));
|
|
84
|
+
};
|
|
85
|
+
exports.NavBar = NavBar;
|
|
@@ -1,131 +1,14 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
var
|
|
3
|
-
|
|
4
|
-
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
-
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
-
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
-
}
|
|
8
|
-
Object.defineProperty(o, k2, desc);
|
|
9
|
-
}) : (function(o, m, k, k2) {
|
|
10
|
-
if (k2 === undefined) k2 = k;
|
|
11
|
-
o[k2] = m[k];
|
|
12
|
-
}));
|
|
13
|
-
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
14
|
-
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
15
|
-
}) : function(o, v) {
|
|
16
|
-
o["default"] = v;
|
|
17
|
-
});
|
|
18
|
-
var __importStar = (this && this.__importStar) || (function () {
|
|
19
|
-
var ownKeys = function(o) {
|
|
20
|
-
ownKeys = Object.getOwnPropertyNames || function (o) {
|
|
21
|
-
var ar = [];
|
|
22
|
-
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
|
|
23
|
-
return ar;
|
|
24
|
-
};
|
|
25
|
-
return ownKeys(o);
|
|
26
|
-
};
|
|
27
|
-
return function (mod) {
|
|
28
|
-
if (mod && mod.__esModule) return mod;
|
|
29
|
-
var result = {};
|
|
30
|
-
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
|
|
31
|
-
__setModuleDefault(result, mod);
|
|
32
|
-
return result;
|
|
33
|
-
};
|
|
34
|
-
})();
|
|
35
|
-
var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
|
|
36
|
-
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
|
|
37
|
-
if (ar || !(i in from)) {
|
|
38
|
-
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
|
|
39
|
-
ar[i] = from[i];
|
|
40
|
-
}
|
|
41
|
-
}
|
|
42
|
-
return to.concat(ar || Array.prototype.slice.call(from));
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
43
4
|
};
|
|
44
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
45
6
|
exports.VistaHeaderV1 = void 0;
|
|
46
|
-
var react_1 =
|
|
47
|
-
var
|
|
48
|
-
var outline_1 = require("@heroicons/react/24/outline");
|
|
49
|
-
var solid_1 = require("@heroicons/react/20/solid");
|
|
50
|
-
var products = [
|
|
51
|
-
{ name: 'Analytics', description: 'Get a better understanding of your traffic', href: '#', icon: outline_1.ChartPieIcon },
|
|
52
|
-
{ name: 'Engagement', description: 'Speak directly to your customers', href: '#', icon: outline_1.CursorArrowRaysIcon },
|
|
53
|
-
{ name: 'Security', description: 'Your customers’ data will be safe and secure', href: '#', icon: outline_1.FingerPrintIcon },
|
|
54
|
-
{ name: 'Integrations', description: 'Connect with third-party tools', href: '#', icon: outline_1.SquaresPlusIcon },
|
|
55
|
-
{ name: 'Automations', description: 'Build strategic funnels that will convert', href: '#', icon: outline_1.ArrowPathIcon },
|
|
56
|
-
];
|
|
57
|
-
var callsToAction = [
|
|
58
|
-
{ name: 'Watch demo', href: '#', icon: solid_1.PlayCircleIcon },
|
|
59
|
-
{ name: 'Contact sales', href: '#', icon: solid_1.PhoneIcon },
|
|
60
|
-
];
|
|
7
|
+
var react_1 = __importDefault(require("react"));
|
|
8
|
+
var nav_bar_1 = require("./nav-bar");
|
|
61
9
|
var VistaHeaderV1 = function (_a) {
|
|
62
|
-
var
|
|
63
|
-
var _b = (0, react_1.useState)(false), mobileMenuOpen = _b[0], setMobileMenuOpen = _b[1];
|
|
10
|
+
var companyName = _a.companyName, handleMenuOpen = _a.handleMenuOpen, items = _a.items, _b = _a.loginVisible, loginVisible = _b === void 0 ? false : _b, logoAlt = _a.logoAlt, logoSrc = _a.logoSrc, menuOpen = _a.menuOpen;
|
|
64
11
|
return (react_1.default.createElement("header", { className: "bg-white" },
|
|
65
|
-
react_1.default.createElement(
|
|
66
|
-
react_1.default.createElement("div", { className: "flex lg:flex-1" },
|
|
67
|
-
react_1.default.createElement("a", { href: "#", className: "-m-1.5 p-1.5" },
|
|
68
|
-
react_1.default.createElement("span", { className: "sr-only" }, companyName),
|
|
69
|
-
react_1.default.createElement("img", { alt: logoAlt, className: "h-8 w-auto", src: logoSrc }))),
|
|
70
|
-
react_1.default.createElement("div", { className: "flex lg:hidden" },
|
|
71
|
-
react_1.default.createElement("button", { className: "-m-2.5 inline-flex items-center justify-center rounded-md p-2.5 text-gray-700", onClick: function () { return setMobileMenuOpen(true); }, type: "button" },
|
|
72
|
-
react_1.default.createElement("span", { className: "sr-only" }, "Open main menu"),
|
|
73
|
-
react_1.default.createElement(outline_1.Bars3Icon, { "aria-hidden": "true", className: "size-6" }))),
|
|
74
|
-
react_1.default.createElement(react_2.PopoverGroup, { className: "hidden lg:flex lg:gap-x-12" }, items.map(function (_a) {
|
|
75
|
-
var name = _a.name, href = _a.href, megaMenu = _a.megaMenu, cta = _a.cta;
|
|
76
|
-
var multiGrid = megaMenu && megaMenu.length > 5 ? true : false;
|
|
77
|
-
if (megaMenu && (megaMenu === null || megaMenu === void 0 ? void 0 : megaMenu.length) > 1) {
|
|
78
|
-
return (react_1.default.createElement(react_2.Popover, { key: name, className: "" },
|
|
79
|
-
react_1.default.createElement(react_2.PopoverButton, { className: "flex items-center gap-x-1 text-sm/6 font-semibold text-gray-900" },
|
|
80
|
-
name,
|
|
81
|
-
react_1.default.createElement(solid_1.ChevronDownIcon, { "aria-hidden": "true", className: "size-5 flex-none text-gray-400" })),
|
|
82
|
-
react_1.default.createElement(react_2.PopoverPanel, { transition: true, className: "absolute left-1/2 z-10 mt-3 w-screen ".concat(multiGrid ? 'max-w-7xl' : 'max-w-md', " -translate-x-1/2 overflow-hidden rounded-3xl bg-white shadow-lg ring-1 ring-gray-900/5 transition data-closed:translate-y-1 data-closed:opacity-0 data-enter:duration-200 data-enter:ease-out data-leave:duration-150 data-leave:ease-in") },
|
|
83
|
-
react_1.default.createElement("div", { className: "".concat(multiGrid ? 'grid grid-cols-2 gap-4' : 'p-4') }, megaMenu.map(function (_a) {
|
|
84
|
-
var name = _a.name, href = _a.href, description = _a.description, icon = _a.icon;
|
|
85
|
-
return (react_1.default.createElement("div", { key: name, className: "group relative flex items-center gap-x-6 rounded-lg p-4 text-sm/6 hover:bg-gray-50" },
|
|
86
|
-
react_1.default.createElement("div", { className: "flex size-11 flex-none items-center justify-center rounded-lg bg-gray-50 group-hover:bg-white" }, icon),
|
|
87
|
-
react_1.default.createElement("div", { className: "flex-auto" },
|
|
88
|
-
react_1.default.createElement("a", { href: href, className: "block font-semibold text-primary" },
|
|
89
|
-
name,
|
|
90
|
-
react_1.default.createElement("span", { className: "absolute inset-0" })),
|
|
91
|
-
react_1.default.createElement("p", { className: "mt-1 text-gray-600" }, description))));
|
|
92
|
-
})),
|
|
93
|
-
react_1.default.createElement("div", { className: "grid grid-cols-2 divide-x divide-gray-900/5 bg-gray-50" }, cta && cta.length > 1 && cta.map(function (_a) {
|
|
94
|
-
var icon = _a.icon, name = _a.name, href = _a.href;
|
|
95
|
-
return (react_1.default.createElement("a", { key: name, href: href, className: "flex items-center justify-center gap-x-2.5 p-3 text-sm/6 font-semibold text-gray-900 hover:bg-gray-100" },
|
|
96
|
-
icon,
|
|
97
|
-
name));
|
|
98
|
-
})))));
|
|
99
|
-
}
|
|
100
|
-
;
|
|
101
|
-
return (react_1.default.createElement("a", { key: name, href: href, className: "text-sm/6 font-semibold text-gray-900" }, name));
|
|
102
|
-
})),
|
|
103
|
-
react_1.default.createElement("div", { className: "hidden lg:flex lg:flex-1 lg:justify-end" },
|
|
104
|
-
react_1.default.createElement("a", { href: "#", className: "text-sm/6 font-semibold text-gray-900" },
|
|
105
|
-
"Log in ",
|
|
106
|
-
react_1.default.createElement("span", { "aria-hidden": "true" }, "\u2192")))),
|
|
107
|
-
react_1.default.createElement(react_2.Dialog, { open: mobileMenuOpen, onClose: setMobileMenuOpen, className: "lg:hidden" },
|
|
108
|
-
react_1.default.createElement("div", { className: "fixed inset-0 z-50" }),
|
|
109
|
-
react_1.default.createElement(react_2.DialogPanel, { className: "fixed inset-y-0 right-0 z-50 w-full overflow-y-auto bg-white p-6 sm:max-w-sm sm:ring-1 sm:ring-gray-900/10" },
|
|
110
|
-
react_1.default.createElement("div", { className: "flex items-center justify-between" },
|
|
111
|
-
react_1.default.createElement("a", { href: "#", className: "-m-1.5 p-1.5" },
|
|
112
|
-
react_1.default.createElement("span", { className: "sr-only" }, companyName),
|
|
113
|
-
react_1.default.createElement("img", { alt: logoAlt, src: logoSrc, className: "h-8 w-auto" })),
|
|
114
|
-
react_1.default.createElement("button", { type: "button", onClick: function () { return setMobileMenuOpen(false); }, className: "-m-2.5 rounded-md p-2.5 text-gray-700" },
|
|
115
|
-
react_1.default.createElement("span", { className: "sr-only" }, "Close menu"),
|
|
116
|
-
react_1.default.createElement(outline_1.XMarkIcon, { "aria-hidden": "true", className: "size-6" }))),
|
|
117
|
-
react_1.default.createElement("div", { className: "mt-6 flow-root" },
|
|
118
|
-
react_1.default.createElement("div", { className: "-my-6 divide-y divide-gray-500/10" },
|
|
119
|
-
react_1.default.createElement("div", { className: "space-y-2 py-6" },
|
|
120
|
-
react_1.default.createElement(react_2.Disclosure, { as: "div", className: "-mx-3" },
|
|
121
|
-
react_1.default.createElement(react_2.DisclosureButton, { className: "group flex w-full items-center justify-between rounded-lg py-2 pr-3.5 pl-3 text-base/7 font-semibold text-gray-900 hover:bg-gray-50" },
|
|
122
|
-
"Product",
|
|
123
|
-
react_1.default.createElement(solid_1.ChevronDownIcon, { "aria-hidden": "true", className: "size-5 flex-none group-data-open:rotate-180" })),
|
|
124
|
-
react_1.default.createElement(react_2.DisclosurePanel, { className: "mt-2 space-y-2" }, __spreadArray(__spreadArray([], products, true), callsToAction, true).map(function (item) { return (react_1.default.createElement(react_2.DisclosureButton, { key: item.name, as: "a", href: item.href, className: "block rounded-lg py-2 pr-3 pl-6 text-sm/7 font-semibold text-gray-900 hover:bg-gray-50" }, item.name)); }))),
|
|
125
|
-
react_1.default.createElement("a", { href: "#", className: "-mx-3 block rounded-lg px-3 py-2 text-base/7 font-semibold text-gray-900 hover:bg-gray-50" }, "Features"),
|
|
126
|
-
react_1.default.createElement("a", { href: "#", className: "-mx-3 block rounded-lg px-3 py-2 text-base/7 font-semibold text-gray-900 hover:bg-gray-50" }, "Marketplace"),
|
|
127
|
-
react_1.default.createElement("a", { href: "#", className: "-mx-3 block rounded-lg px-3 py-2 text-base/7 font-semibold text-gray-900 hover:bg-gray-50" }, "Company")),
|
|
128
|
-
react_1.default.createElement("div", { className: "py-6" },
|
|
129
|
-
react_1.default.createElement("a", { href: "#", className: "-mx-3 block rounded-lg px-3 py-2.5 text-base/7 font-semibold text-gray-900 hover:bg-gray-50" }, "Log in"))))))));
|
|
12
|
+
react_1.default.createElement(nav_bar_1.NavBar, { companyName: companyName, handleMenuOpen: handleMenuOpen, items: items, loginVisible: loginVisible, logoAlt: logoAlt, logoSrc: logoSrc, menuOpen: menuOpen })));
|
|
130
13
|
};
|
|
131
14
|
exports.VistaHeaderV1 = VistaHeaderV1;
|
|
@@ -53,8 +53,8 @@ var dynamic_1 = __importDefault(require("next/dynamic"));
|
|
|
53
53
|
var react_1 = __importDefault(require("react"));
|
|
54
54
|
var vista_button_v1_1 = require("../../molecules/vista-button-v1/vista-button-v1");
|
|
55
55
|
var vista_button_type_1 = require("../../type/vista-button-type");
|
|
56
|
-
|
|
57
|
-
|
|
56
|
+
require("slick-carousel/slick/slick.css");
|
|
57
|
+
require("slick-carousel/slick/slick-theme.css");
|
|
58
58
|
var DynamicReactSlick = (0, dynamic_1.default)(function () { return Promise.resolve().then(function () { return __importStar(require('react-slick')); }); }, {
|
|
59
59
|
loading: function () { return react_1.default.createElement("p", null, "Loading..."); },
|
|
60
60
|
ssr: false,
|
|
@@ -80,7 +80,7 @@ var VistaHeroV13 = function (_a) {
|
|
|
80
80
|
clipPath: 'polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)',
|
|
81
81
|
}, className: "relative left-[calc(50%-11rem)] aspect-1155/678 w-144.5 -translate-x-1/2 rotate-30 bg-linear-to-tr from-primary to-secondary opacity-20 sm:left-[calc(50%-30rem)] sm:w-288.75" })),
|
|
82
82
|
react_1.default.createElement("div", { className: "mx-auto max-w-7xl px-6 lg:px-8 z-10" },
|
|
83
|
-
react_1.default.createElement("div", { className: "mx-auto max-w-2xl py-32
|
|
83
|
+
react_1.default.createElement("div", { className: "mx-auto max-w-2xl py-32" },
|
|
84
84
|
item.subTitle && item.subTitleUrl ? (react_1.default.createElement("div", { className: "hidden sm:mb-8 sm:flex sm:justify-center" },
|
|
85
85
|
react_1.default.createElement("div", { className: "relative rounded-full px-3 py-1 text-sm/6 text-gray-400 ring-1 ring-white/10 hover:ring-white/20" },
|
|
86
86
|
item.subTitle,
|
|
@@ -92,7 +92,7 @@ var VistaHeroV13 = function (_a) {
|
|
|
92
92
|
react_1.default.createElement("span", { "aria-hidden": "true" }, "\u2192"))))) : (react_1.default.createElement("div", { className: 'min-h-16' })),
|
|
93
93
|
react_1.default.createElement("div", { className: "text-center" },
|
|
94
94
|
react_1.default.createElement("h1", { className: "text-5xl font-semibold tracking-tight text-balance text-white sm:text-7xl" }, item.heading),
|
|
95
|
-
react_1.default.createElement("p", { className: "mt-8 text-lg font-medium text-pretty text-white sm:text-xl/8" }, item.description),
|
|
95
|
+
item.description && (react_1.default.createElement("p", { className: "mt-8 text-lg font-medium text-pretty text-white sm:text-xl/8" }, item.description)),
|
|
96
96
|
react_1.default.createElement("div", { className: "mt-10 flex items-center justify-center gap-x-6" }, item.ctas.map(function (cta) { return (react_1.default.createElement(vista_button_v1_1.VistaButtonV1, { handleOnClick: cta.handleOnClick, key: cta.order, label: cta.label, size: vista_button_type_1.VISTA_BUTTON_SIZE.XL, variant: cta.variant })); }))))),
|
|
97
97
|
react_1.default.createElement("div", { "aria-hidden": "true", className: "absolute inset-x-0 top-[calc(100%-13rem)] -z-10 transform-gpu overflow-hidden blur-3xl sm:top-[calc(100%-30rem)]" },
|
|
98
98
|
react_1.default.createElement("div", { style: {
|
package/package.json
CHANGED
|
@@ -18,9 +18,12 @@ export interface VistaHeaderV1Item {
|
|
|
18
18
|
}
|
|
19
19
|
export interface VistaHeaderV1Props {
|
|
20
20
|
companyName: string;
|
|
21
|
+
handleMenuOpen: () => void;
|
|
21
22
|
items: VistaHeaderV1Item[];
|
|
23
|
+
loginVisible?: boolean;
|
|
22
24
|
logoAlt: string;
|
|
23
25
|
logoSrc: string;
|
|
26
|
+
menuOpen: boolean;
|
|
24
27
|
}
|
|
25
28
|
export interface VistaHeaderV2Props {
|
|
26
29
|
id: string;
|