@appcorp/app-corp-vista 0.2.7 → 0.2.8
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-contact-v1/vista-contact-v1.d.ts +3 -0
- package/molecules/vista-contact-v1/vista-contact-v1.js +98 -0
- package/molecules/vista-contact-v2/vista-contact-v2.d.ts +3 -0
- package/molecules/vista-contact-v2/vista-contact-v2.js +84 -0
- package/molecules/vista-contact-v3/vista-contact-v3.d.ts +3 -0
- package/molecules/vista-contact-v3/vista-contact-v3.js +73 -0
- package/molecules/vista-contact-v4/vista-contact-v4.d.ts +3 -0
- package/molecules/vista-contact-v4/vista-contact-v4.js +76 -0
- package/molecules/vista-contact-v5/vista-contact-v5.d.ts +3 -0
- package/molecules/vista-contact-v5/vista-contact-v5.js +37 -0
- package/molecules/vista-contact-v6/vista-contact-v6.d.ts +3 -0
- package/molecules/vista-contact-v6/vista-contact-v6.js +47 -0
- package/molecules/vista-contact-v7/vista-contact-v7.d.ts +3 -0
- package/molecules/vista-contact-v7/vista-contact-v7.js +62 -0
- package/molecules/vista-contact-v8/vista-contact-v8.d.ts +3 -0
- package/molecules/vista-contact-v8/vista-contact-v8.js +66 -0
- package/package.json +1 -1
- package/type/vista-contact-type.d.ts +24 -0
- package/type/vista-contact-type.js +2 -0
|
@@ -0,0 +1,98 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
"use strict";
|
|
3
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
4
|
+
if (k2 === undefined) k2 = k;
|
|
5
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
6
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
7
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
8
|
+
}
|
|
9
|
+
Object.defineProperty(o, k2, desc);
|
|
10
|
+
}) : (function(o, m, k, k2) {
|
|
11
|
+
if (k2 === undefined) k2 = k;
|
|
12
|
+
o[k2] = m[k];
|
|
13
|
+
}));
|
|
14
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
15
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
16
|
+
}) : function(o, v) {
|
|
17
|
+
o["default"] = v;
|
|
18
|
+
});
|
|
19
|
+
var __importStar = (this && this.__importStar) || (function () {
|
|
20
|
+
var ownKeys = function(o) {
|
|
21
|
+
ownKeys = Object.getOwnPropertyNames || function (o) {
|
|
22
|
+
var ar = [];
|
|
23
|
+
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
|
|
24
|
+
return ar;
|
|
25
|
+
};
|
|
26
|
+
return ownKeys(o);
|
|
27
|
+
};
|
|
28
|
+
return function (mod) {
|
|
29
|
+
if (mod && mod.__esModule) return mod;
|
|
30
|
+
var result = {};
|
|
31
|
+
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
|
|
32
|
+
__setModuleDefault(result, mod);
|
|
33
|
+
return result;
|
|
34
|
+
};
|
|
35
|
+
})();
|
|
36
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
37
|
+
exports.VistaContactV1 = void 0;
|
|
38
|
+
var react_1 = __importStar(require("react"));
|
|
39
|
+
var solid_1 = require("@heroicons/react/16/solid");
|
|
40
|
+
var react_2 = require("@headlessui/react");
|
|
41
|
+
var VistaContactV1 = function (_a) {
|
|
42
|
+
var id = _a.id;
|
|
43
|
+
var _b = (0, react_1.useState)(false), agreed = _b[0], setAgreed = _b[1];
|
|
44
|
+
return (react_1.default.createElement("div", { className: "isolate bg-white px-6 py-24 sm:py-32 lg:px-8" },
|
|
45
|
+
react_1.default.createElement("div", { "aria-hidden": "true", className: "absolute inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-top-80" },
|
|
46
|
+
react_1.default.createElement("div", { style: {
|
|
47
|
+
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%)',
|
|
48
|
+
}, className: "relative left-1/2 -z-10 aspect-1155/678 w-144.5 max-w-none -translate-x-1/2 rotate-30 bg-linear-to-tr from-[#ff80b5] to-[#9089fc] opacity-30 sm:left-[calc(50%-40rem)] sm:w-288.75" })),
|
|
49
|
+
react_1.default.createElement("div", { className: "mx-auto max-w-2xl text-center" },
|
|
50
|
+
react_1.default.createElement("h2", { className: "text-4xl font-semibold tracking-tight text-balance text-gray-900 sm:text-5xl" }, "Contact sales"),
|
|
51
|
+
react_1.default.createElement("p", { className: "mt-2 text-lg/8 text-gray-600" }, "Aute magna irure deserunt veniam aliqua magna enim voluptate.")),
|
|
52
|
+
react_1.default.createElement("form", { action: "#", method: "POST", className: "mx-auto mt-16 max-w-xl sm:mt-20" },
|
|
53
|
+
react_1.default.createElement("div", { className: "grid grid-cols-1 gap-x-8 gap-y-6 sm:grid-cols-2" },
|
|
54
|
+
react_1.default.createElement("div", null,
|
|
55
|
+
react_1.default.createElement("label", { htmlFor: "first-name", className: "block text-sm/6 font-semibold text-gray-900" }, "First name"),
|
|
56
|
+
react_1.default.createElement("div", { className: "mt-2.5" },
|
|
57
|
+
react_1.default.createElement("input", { id: "first-name", name: "first-name", type: "text", autoComplete: "given-name", className: "block w-full rounded-md bg-white px-3.5 py-2 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600" }))),
|
|
58
|
+
react_1.default.createElement("div", null,
|
|
59
|
+
react_1.default.createElement("label", { htmlFor: "last-name", className: "block text-sm/6 font-semibold text-gray-900" }, "Last name"),
|
|
60
|
+
react_1.default.createElement("div", { className: "mt-2.5" },
|
|
61
|
+
react_1.default.createElement("input", { id: "last-name", name: "last-name", type: "text", autoComplete: "family-name", className: "block w-full rounded-md bg-white px-3.5 py-2 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600" }))),
|
|
62
|
+
react_1.default.createElement("div", { className: "sm:col-span-2" },
|
|
63
|
+
react_1.default.createElement("label", { htmlFor: "company", className: "block text-sm/6 font-semibold text-gray-900" }, "Company"),
|
|
64
|
+
react_1.default.createElement("div", { className: "mt-2.5" },
|
|
65
|
+
react_1.default.createElement("input", { id: "company", name: "company", type: "text", autoComplete: "organization", className: "block w-full rounded-md bg-white px-3.5 py-2 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600" }))),
|
|
66
|
+
react_1.default.createElement("div", { className: "sm:col-span-2" },
|
|
67
|
+
react_1.default.createElement("label", { htmlFor: "email", className: "block text-sm/6 font-semibold text-gray-900" }, "Email"),
|
|
68
|
+
react_1.default.createElement("div", { className: "mt-2.5" },
|
|
69
|
+
react_1.default.createElement("input", { id: "email", name: "email", type: "email", autoComplete: "email", className: "block w-full rounded-md bg-white px-3.5 py-2 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600" }))),
|
|
70
|
+
react_1.default.createElement("div", { className: "sm:col-span-2" },
|
|
71
|
+
react_1.default.createElement("label", { htmlFor: "phone-number", className: "block text-sm/6 font-semibold text-gray-900" }, "Phone number"),
|
|
72
|
+
react_1.default.createElement("div", { className: "mt-2.5" },
|
|
73
|
+
react_1.default.createElement("div", { className: "flex rounded-md bg-white outline-1 -outline-offset-1 outline-gray-300 has-[input:focus-within]:outline-2 has-[input:focus-within]:-outline-offset-2 has-[input:focus-within]:outline-indigo-600" },
|
|
74
|
+
react_1.default.createElement("div", { className: "grid shrink-0 grid-cols-1 focus-within:relative" },
|
|
75
|
+
react_1.default.createElement("select", { id: "country", name: "country", autoComplete: "country", "aria-label": "Country", className: "col-start-1 row-start-1 w-full appearance-none rounded-md py-2 pr-7 pl-3.5 text-base text-gray-500 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm/6" },
|
|
76
|
+
react_1.default.createElement("option", null, "US"),
|
|
77
|
+
react_1.default.createElement("option", null, "CA"),
|
|
78
|
+
react_1.default.createElement("option", null, "EU")),
|
|
79
|
+
react_1.default.createElement(solid_1.ChevronDownIcon, { "aria-hidden": "true", className: "pointer-events-none col-start-1 row-start-1 mr-2 size-5 self-center justify-self-end text-gray-500 sm:size-4" })),
|
|
80
|
+
react_1.default.createElement("input", { id: "phone-number", name: "phone-number", type: "text", placeholder: "123-456-7890", className: "block min-w-0 grow py-1.5 pr-3 pl-1 text-base text-gray-900 placeholder:text-gray-400 focus:outline-none sm:text-sm/6" })))),
|
|
81
|
+
react_1.default.createElement("div", { className: "sm:col-span-2" },
|
|
82
|
+
react_1.default.createElement("label", { htmlFor: "message", className: "block text-sm/6 font-semibold text-gray-900" }, "Message"),
|
|
83
|
+
react_1.default.createElement("div", { className: "mt-2.5" },
|
|
84
|
+
react_1.default.createElement("textarea", { id: "message", name: "message", rows: 4, className: "block w-full rounded-md bg-white px-3.5 py-2 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600", defaultValue: '' }))),
|
|
85
|
+
react_1.default.createElement(react_2.Field, { className: "flex gap-x-4 sm:col-span-2" },
|
|
86
|
+
react_1.default.createElement("div", { className: "flex h-6 items-center" },
|
|
87
|
+
react_1.default.createElement(react_2.Switch, { checked: agreed, onChange: setAgreed, className: "group flex w-8 flex-none cursor-pointer rounded-full bg-gray-200 p-px ring-1 ring-gray-900/5 transition-colors duration-200 ease-in-out ring-inset focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 data-checked:bg-indigo-600" },
|
|
88
|
+
react_1.default.createElement("span", { className: "sr-only" }, "Agree to policies"),
|
|
89
|
+
react_1.default.createElement("span", { "aria-hidden": "true", className: "size-4 transform rounded-full bg-white shadow-xs ring-1 ring-gray-900/5 transition duration-200 ease-in-out group-data-checked:translate-x-3.5" }))),
|
|
90
|
+
react_1.default.createElement(react_2.Label, { className: "text-sm/6 text-gray-600" },
|
|
91
|
+
"By selecting this, you agree to our",
|
|
92
|
+
' ',
|
|
93
|
+
react_1.default.createElement("a", { href: "#", className: "font-semibold whitespace-nowrap text-indigo-600" }, "privacy policy"),
|
|
94
|
+
"."))),
|
|
95
|
+
react_1.default.createElement("div", { className: "mt-10" },
|
|
96
|
+
react_1.default.createElement("button", { type: "submit", className: "block w-full rounded-md bg-indigo-600 px-3.5 py-2.5 text-center text-sm font-semibold text-white shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600" }, "Lets talk")))));
|
|
97
|
+
};
|
|
98
|
+
exports.VistaContactV1 = VistaContactV1;
|
|
@@ -0,0 +1,84 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
+
exports.VistaContactV2 = void 0;
|
|
7
|
+
var react_1 = __importDefault(require("react"));
|
|
8
|
+
var VistaContactV2 = function (_a) {
|
|
9
|
+
var id = _a.id;
|
|
10
|
+
return (react_1.default.createElement("div", { className: "bg-white py-8 sm:py-16" },
|
|
11
|
+
react_1.default.createElement("div", { className: "mx-auto max-w-7xl px-6 lg:px-8" },
|
|
12
|
+
react_1.default.createElement("div", { className: "mx-auto max-w-2xl divide-y divide-gray-100 lg:mx-0 lg:max-w-none" },
|
|
13
|
+
react_1.default.createElement("div", { className: "grid grid-cols-1 gap-10 py-16 lg:grid-cols-3" },
|
|
14
|
+
react_1.default.createElement("div", null,
|
|
15
|
+
react_1.default.createElement("h2", { className: "text-4xl font-semibold tracking-tight text-pretty text-gray-900" }, "Get in touch"),
|
|
16
|
+
react_1.default.createElement("p", { className: "mt-4 text-base/7 text-gray-600" }, "Quam nunc nunc eu sed. Sed rhoncus quis ultricies ac pellentesque.")),
|
|
17
|
+
react_1.default.createElement("div", { className: "grid grid-cols-1 gap-6 sm:grid-cols-2 lg:col-span-2 lg:gap-8" },
|
|
18
|
+
react_1.default.createElement("div", { className: "rounded-2xl bg-gray-50 p-10" },
|
|
19
|
+
react_1.default.createElement("h3", { className: "text-base/7 font-semibold text-gray-900" }, "Collaborate"),
|
|
20
|
+
react_1.default.createElement("dl", { className: "mt-3 space-y-1 text-sm/6 text-gray-600" },
|
|
21
|
+
react_1.default.createElement("div", null,
|
|
22
|
+
react_1.default.createElement("dt", { className: "sr-only" }, "Email"),
|
|
23
|
+
react_1.default.createElement("dd", null,
|
|
24
|
+
react_1.default.createElement("a", { href: "mailto:collaborate@example.com", className: "font-semibold text-indigo-600" }, "collaborate@example.com"))),
|
|
25
|
+
react_1.default.createElement("div", { className: "mt-1" },
|
|
26
|
+
react_1.default.createElement("dt", { className: "sr-only" }, "Phone number"),
|
|
27
|
+
react_1.default.createElement("dd", null, "+1 (555) 905-2345")))),
|
|
28
|
+
react_1.default.createElement("div", { className: "rounded-2xl bg-gray-50 p-10" },
|
|
29
|
+
react_1.default.createElement("h3", { className: "text-base/7 font-semibold text-gray-900" }, "Press"),
|
|
30
|
+
react_1.default.createElement("dl", { className: "mt-3 space-y-1 text-sm/6 text-gray-600" },
|
|
31
|
+
react_1.default.createElement("div", null,
|
|
32
|
+
react_1.default.createElement("dt", { className: "sr-only" }, "Email"),
|
|
33
|
+
react_1.default.createElement("dd", null,
|
|
34
|
+
react_1.default.createElement("a", { href: "mailto:press@example.com", className: "font-semibold text-indigo-600" }, "press@example.com"))),
|
|
35
|
+
react_1.default.createElement("div", { className: "mt-1" },
|
|
36
|
+
react_1.default.createElement("dt", { className: "sr-only" }, "Phone number"),
|
|
37
|
+
react_1.default.createElement("dd", null, "+1 (555) 905-3456")))),
|
|
38
|
+
react_1.default.createElement("div", { className: "rounded-2xl bg-gray-50 p-10" },
|
|
39
|
+
react_1.default.createElement("h3", { className: "text-base/7 font-semibold text-gray-900" }, "Join our team"),
|
|
40
|
+
react_1.default.createElement("dl", { className: "mt-3 space-y-1 text-sm/6 text-gray-600" },
|
|
41
|
+
react_1.default.createElement("div", null,
|
|
42
|
+
react_1.default.createElement("dt", { className: "sr-only" }, "Email"),
|
|
43
|
+
react_1.default.createElement("dd", null,
|
|
44
|
+
react_1.default.createElement("a", { href: "mailto:careers@example.com", className: "font-semibold text-indigo-600" }, "careers@example.com"))),
|
|
45
|
+
react_1.default.createElement("div", { className: "mt-1" },
|
|
46
|
+
react_1.default.createElement("dt", { className: "sr-only" }, "Phone number"),
|
|
47
|
+
react_1.default.createElement("dd", null, "+1 (555) 905-4567")))),
|
|
48
|
+
react_1.default.createElement("div", { className: "rounded-2xl bg-gray-50 p-10" },
|
|
49
|
+
react_1.default.createElement("h3", { className: "text-base/7 font-semibold text-gray-900" }, "Say hello"),
|
|
50
|
+
react_1.default.createElement("dl", { className: "mt-3 space-y-1 text-sm/6 text-gray-600" },
|
|
51
|
+
react_1.default.createElement("div", null,
|
|
52
|
+
react_1.default.createElement("dt", { className: "sr-only" }, "Email"),
|
|
53
|
+
react_1.default.createElement("dd", null,
|
|
54
|
+
react_1.default.createElement("a", { href: "mailto:hello@example.com", className: "font-semibold text-indigo-600" }, "hello@example.com"))),
|
|
55
|
+
react_1.default.createElement("div", { className: "mt-1" },
|
|
56
|
+
react_1.default.createElement("dt", { className: "sr-only" }, "Phone number"),
|
|
57
|
+
react_1.default.createElement("dd", null, "+1 (555) 905-5678")))))),
|
|
58
|
+
react_1.default.createElement("div", { className: "grid grid-cols-1 gap-10 py-16 lg:grid-cols-3" },
|
|
59
|
+
react_1.default.createElement("div", null,
|
|
60
|
+
react_1.default.createElement("h2", { className: "text-4xl font-semibold tracking-tight text-pretty text-gray-900" }, "Locations"),
|
|
61
|
+
react_1.default.createElement("p", { className: "mt-4 text-base/7 text-gray-600" }, "Consequat sunt cillum cillum elit sint. Qui occaecat nisi in ipsum commodo.")),
|
|
62
|
+
react_1.default.createElement("div", { className: "grid grid-cols-1 gap-6 sm:grid-cols-2 lg:col-span-2 lg:gap-8" },
|
|
63
|
+
react_1.default.createElement("div", { className: "rounded-2xl bg-gray-50 p-10" },
|
|
64
|
+
react_1.default.createElement("h3", { className: "text-base/7 font-semibold text-gray-900" }, "Los Angeles"),
|
|
65
|
+
react_1.default.createElement("address", { className: "mt-3 space-y-1 text-sm/6 text-gray-600 not-italic" },
|
|
66
|
+
react_1.default.createElement("p", null, "4556 Brendan Ferry"),
|
|
67
|
+
react_1.default.createElement("p", null, "Los Angeles, CA 90210"))),
|
|
68
|
+
react_1.default.createElement("div", { className: "rounded-2xl bg-gray-50 p-10" },
|
|
69
|
+
react_1.default.createElement("h3", { className: "text-base/7 font-semibold text-gray-900" }, "New York"),
|
|
70
|
+
react_1.default.createElement("address", { className: "mt-3 space-y-1 text-sm/6 text-gray-600 not-italic" },
|
|
71
|
+
react_1.default.createElement("p", null, "886 Walter Street"),
|
|
72
|
+
react_1.default.createElement("p", null, "New York, NY 12345"))),
|
|
73
|
+
react_1.default.createElement("div", { className: "rounded-2xl bg-gray-50 p-10" },
|
|
74
|
+
react_1.default.createElement("h3", { className: "text-base/7 font-semibold text-gray-900" }, "Toronto"),
|
|
75
|
+
react_1.default.createElement("address", { className: "mt-3 space-y-1 text-sm/6 text-gray-600 not-italic" },
|
|
76
|
+
react_1.default.createElement("p", null, "7363 Cynthia Pass"),
|
|
77
|
+
react_1.default.createElement("p", null, "Toronto, ON N3Y 4H8"))),
|
|
78
|
+
react_1.default.createElement("div", { className: "rounded-2xl bg-gray-50 p-10" },
|
|
79
|
+
react_1.default.createElement("h3", { className: "text-base/7 font-semibold text-gray-900" }, "Chicago"),
|
|
80
|
+
react_1.default.createElement("address", { className: "mt-3 space-y-1 text-sm/6 text-gray-600 not-italic" },
|
|
81
|
+
react_1.default.createElement("p", null, "726 Mavis Island"),
|
|
82
|
+
react_1.default.createElement("p", null, "Chicago, IL 60601")))))))));
|
|
83
|
+
};
|
|
84
|
+
exports.VistaContactV2 = VistaContactV2;
|
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
+
exports.VistaContactV3 = void 0;
|
|
7
|
+
var react_1 = __importDefault(require("react"));
|
|
8
|
+
var outline_1 = require("@heroicons/react/24/outline");
|
|
9
|
+
var VistaContactV3 = function (_a) {
|
|
10
|
+
var id = _a.id;
|
|
11
|
+
return (react_1.default.createElement("div", { className: "relative isolate bg-white" },
|
|
12
|
+
react_1.default.createElement("div", { className: "mx-auto grid max-w-7xl grid-cols-1 lg:grid-cols-2" },
|
|
13
|
+
react_1.default.createElement("div", { className: "relative px-6 pt-24 pb-20 sm:pt-32 lg:static lg:px-8 lg:py-48" },
|
|
14
|
+
react_1.default.createElement("div", { className: "mx-auto max-w-xl lg:mx-0 lg:max-w-lg" },
|
|
15
|
+
react_1.default.createElement("div", { className: "absolute inset-y-0 left-0 -z-10 w-full overflow-hidden bg-gray-100 ring-1 ring-gray-900/10 lg:w-1/2" },
|
|
16
|
+
react_1.default.createElement("svg", { "aria-hidden": "true", className: "absolute inset-0 size-full mask-[radial-gradient(100%_100%_at_top_right,white,transparent)] stroke-gray-200" },
|
|
17
|
+
react_1.default.createElement("defs", null,
|
|
18
|
+
react_1.default.createElement("pattern", { x: "100%", y: -1, id: "83fd4e5a-9d52-42fc-97b6-718e5d7ee527", width: 200, height: 200, patternUnits: "userSpaceOnUse" },
|
|
19
|
+
react_1.default.createElement("path", { d: "M130 200V.5M.5 .5H200", fill: "none" }))),
|
|
20
|
+
react_1.default.createElement("rect", { fill: "white", width: "100%", height: "100%", strokeWidth: 0 }),
|
|
21
|
+
react_1.default.createElement("svg", { x: "100%", y: -1, className: "overflow-visible fill-gray-50" },
|
|
22
|
+
react_1.default.createElement("path", { d: "M-470.5 0h201v201h-201Z", strokeWidth: 0 })),
|
|
23
|
+
react_1.default.createElement("rect", { fill: "url(#83fd4e5a-9d52-42fc-97b6-718e5d7ee527)", width: "100%", height: "100%", strokeWidth: 0 }))),
|
|
24
|
+
react_1.default.createElement("h2", { className: "text-4xl font-semibold tracking-tight text-pretty text-gray-900 sm:text-5xl" }, "Get in touch"),
|
|
25
|
+
react_1.default.createElement("p", { className: "mt-6 text-lg/8 text-gray-600" }, "Proin volutpat consequat porttitor cras nullam gravida at. Orci molestie a eu arcu. Sed ut tincidunt integer elementum id sem. Arcu sed malesuada et magna."),
|
|
26
|
+
react_1.default.createElement("dl", { className: "mt-10 space-y-4 text-base/7 text-gray-600" },
|
|
27
|
+
react_1.default.createElement("div", { className: "flex gap-x-4" },
|
|
28
|
+
react_1.default.createElement("dt", { className: "flex-none" },
|
|
29
|
+
react_1.default.createElement("span", { className: "sr-only" }, "Address"),
|
|
30
|
+
react_1.default.createElement(outline_1.BuildingOffice2Icon, { "aria-hidden": "true", className: "h-7 w-6 text-gray-400" })),
|
|
31
|
+
react_1.default.createElement("dd", null,
|
|
32
|
+
"545 Mavis Island",
|
|
33
|
+
react_1.default.createElement("br", null),
|
|
34
|
+
"Chicago, IL 99191")),
|
|
35
|
+
react_1.default.createElement("div", { className: "flex gap-x-4" },
|
|
36
|
+
react_1.default.createElement("dt", { className: "flex-none" },
|
|
37
|
+
react_1.default.createElement("span", { className: "sr-only" }, "Telephone"),
|
|
38
|
+
react_1.default.createElement(outline_1.PhoneIcon, { "aria-hidden": "true", className: "h-7 w-6 text-gray-400" })),
|
|
39
|
+
react_1.default.createElement("dd", null,
|
|
40
|
+
react_1.default.createElement("a", { href: "tel:+1 (555) 234-5678", className: "hover:text-gray-900" }, "+1 (555) 234-5678"))),
|
|
41
|
+
react_1.default.createElement("div", { className: "flex gap-x-4" },
|
|
42
|
+
react_1.default.createElement("dt", { className: "flex-none" },
|
|
43
|
+
react_1.default.createElement("span", { className: "sr-only" }, "Email"),
|
|
44
|
+
react_1.default.createElement(outline_1.EnvelopeIcon, { "aria-hidden": "true", className: "h-7 w-6 text-gray-400" })),
|
|
45
|
+
react_1.default.createElement("dd", null,
|
|
46
|
+
react_1.default.createElement("a", { href: "mailto:hello@example.com", className: "hover:text-gray-900" }, "hello@example.com")))))),
|
|
47
|
+
react_1.default.createElement("form", { action: "#", method: "POST", className: "px-6 pt-20 pb-24 sm:pb-32 lg:px-8 lg:py-48" },
|
|
48
|
+
react_1.default.createElement("div", { className: "mx-auto max-w-xl lg:mr-0 lg:max-w-lg" },
|
|
49
|
+
react_1.default.createElement("div", { className: "grid grid-cols-1 gap-x-8 gap-y-6 sm:grid-cols-2" },
|
|
50
|
+
react_1.default.createElement("div", null,
|
|
51
|
+
react_1.default.createElement("label", { htmlFor: "first-name", className: "block text-sm/6 font-semibold text-gray-900" }, "First name"),
|
|
52
|
+
react_1.default.createElement("div", { className: "mt-2.5" },
|
|
53
|
+
react_1.default.createElement("input", { id: "first-name", name: "first-name", type: "text", autoComplete: "given-name", className: "block w-full rounded-md bg-white px-3.5 py-2 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600" }))),
|
|
54
|
+
react_1.default.createElement("div", null,
|
|
55
|
+
react_1.default.createElement("label", { htmlFor: "last-name", className: "block text-sm/6 font-semibold text-gray-900" }, "Last name"),
|
|
56
|
+
react_1.default.createElement("div", { className: "mt-2.5" },
|
|
57
|
+
react_1.default.createElement("input", { id: "last-name", name: "last-name", type: "text", autoComplete: "family-name", className: "block w-full rounded-md bg-white px-3.5 py-2 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600" }))),
|
|
58
|
+
react_1.default.createElement("div", { className: "sm:col-span-2" },
|
|
59
|
+
react_1.default.createElement("label", { htmlFor: "email", className: "block text-sm/6 font-semibold text-gray-900" }, "Email"),
|
|
60
|
+
react_1.default.createElement("div", { className: "mt-2.5" },
|
|
61
|
+
react_1.default.createElement("input", { id: "email", name: "email", type: "email", autoComplete: "email", className: "block w-full rounded-md bg-white px-3.5 py-2 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600" }))),
|
|
62
|
+
react_1.default.createElement("div", { className: "sm:col-span-2" },
|
|
63
|
+
react_1.default.createElement("label", { htmlFor: "phone-number", className: "block text-sm/6 font-semibold text-gray-900" }, "Phone number"),
|
|
64
|
+
react_1.default.createElement("div", { className: "mt-2.5" },
|
|
65
|
+
react_1.default.createElement("input", { id: "phone-number", name: "phone-number", type: "tel", autoComplete: "tel", className: "block w-full rounded-md bg-white px-3.5 py-2 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600" }))),
|
|
66
|
+
react_1.default.createElement("div", { className: "sm:col-span-2" },
|
|
67
|
+
react_1.default.createElement("label", { htmlFor: "message", className: "block text-sm/6 font-semibold text-gray-900" }, "Message"),
|
|
68
|
+
react_1.default.createElement("div", { className: "mt-2.5" },
|
|
69
|
+
react_1.default.createElement("textarea", { id: "message", name: "message", rows: 4, className: "block w-full rounded-md bg-white px-3.5 py-2 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600", defaultValue: '' })))),
|
|
70
|
+
react_1.default.createElement("div", { className: "mt-8 flex justify-end" },
|
|
71
|
+
react_1.default.createElement("button", { type: "submit", className: "rounded-md bg-indigo-600 px-3.5 py-2.5 text-center text-sm font-semibold text-white shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600" }, "Send message")))))));
|
|
72
|
+
};
|
|
73
|
+
exports.VistaContactV3 = VistaContactV3;
|
|
@@ -0,0 +1,76 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
+
exports.VistaContactV4 = void 0;
|
|
7
|
+
var react_1 = __importDefault(require("react"));
|
|
8
|
+
var outline_1 = require("@heroicons/react/24/outline");
|
|
9
|
+
var VistaContactV4 = function (_a) {
|
|
10
|
+
var id = _a.id;
|
|
11
|
+
return (react_1.default.createElement("div", { className: "relative isolate bg-gray-900" },
|
|
12
|
+
react_1.default.createElement("div", { className: "mx-auto grid max-w-7xl grid-cols-1 lg:grid-cols-2" },
|
|
13
|
+
react_1.default.createElement("div", { className: "relative px-6 pt-24 pb-20 sm:pt-32 lg:static lg:px-8 lg:py-48" },
|
|
14
|
+
react_1.default.createElement("div", { className: "mx-auto max-w-xl lg:mx-0 lg:max-w-lg" },
|
|
15
|
+
react_1.default.createElement("div", { className: "absolute inset-y-0 left-0 -z-10 w-full overflow-hidden ring-1 ring-white/5 lg:w-1/2" },
|
|
16
|
+
react_1.default.createElement("svg", { "aria-hidden": "true", className: "absolute inset-0 size-full mask-[radial-gradient(100%_100%_at_top_right,white,transparent)] stroke-gray-700" },
|
|
17
|
+
react_1.default.createElement("defs", null,
|
|
18
|
+
react_1.default.createElement("pattern", { x: "100%", y: -1, id: "54f88622-e7f8-4f1d-aaf9-c2f5e46dd1f2", width: 200, height: 200, patternUnits: "userSpaceOnUse" },
|
|
19
|
+
react_1.default.createElement("path", { d: "M130 200V.5M.5 .5H200", fill: "none" }))),
|
|
20
|
+
react_1.default.createElement("svg", { x: "100%", y: -1, className: "overflow-visible fill-gray-800/20" },
|
|
21
|
+
react_1.default.createElement("path", { d: "M-470.5 0h201v201h-201Z", strokeWidth: 0 })),
|
|
22
|
+
react_1.default.createElement("rect", { fill: "url(#54f88622-e7f8-4f1d-aaf9-c2f5e46dd1f2)", width: "100%", height: "100%", strokeWidth: 0 })),
|
|
23
|
+
react_1.default.createElement("div", { "aria-hidden": "true", className: "absolute top-[calc(100%-13rem)] -left-56 transform-gpu blur-3xl lg:top-[calc(50%-7rem)] lg:left-[max(-14rem,calc(100%-59rem))]" },
|
|
24
|
+
react_1.default.createElement("div", { style: {
|
|
25
|
+
clipPath: 'polygon(74.1% 56.1%, 100% 38.6%, 97.5% 73.3%, 85.5% 100%, 80.7% 98.2%, 72.5% 67.7%, 60.2% 37.8%, 52.4% 32.2%, 47.5% 41.9%, 45.2% 65.8%, 27.5% 23.5%, 0.1% 35.4%, 17.9% 0.1%, 27.6% 23.5%, 76.1% 2.6%, 74.1% 56.1%)',
|
|
26
|
+
}, className: "aspect-1155/678 w-288.75 bg-linear-to-br from-[#80caff] to-[#4f46e5] opacity-20" }))),
|
|
27
|
+
react_1.default.createElement("h2", { className: "text-4xl font-semibold tracking-tight text-pretty text-white sm:text-5xl" }, "Get in touch"),
|
|
28
|
+
react_1.default.createElement("p", { className: "mt-6 text-lg/8 text-gray-300" }, "Proin volutpat consequat porttitor cras nullam gravida at. Orci molestie a eu arcu. Sed ut tincidunt integer elementum id sem. Arcu sed malesuada et magna."),
|
|
29
|
+
react_1.default.createElement("dl", { className: "mt-10 space-y-4 text-base/7 text-gray-300" },
|
|
30
|
+
react_1.default.createElement("div", { className: "flex gap-x-4" },
|
|
31
|
+
react_1.default.createElement("dt", { className: "flex-none" },
|
|
32
|
+
react_1.default.createElement("span", { className: "sr-only" }, "Address"),
|
|
33
|
+
react_1.default.createElement(outline_1.BuildingOffice2Icon, { "aria-hidden": "true", className: "h-7 w-6 text-gray-400" })),
|
|
34
|
+
react_1.default.createElement("dd", null,
|
|
35
|
+
"545 Mavis Island",
|
|
36
|
+
react_1.default.createElement("br", null),
|
|
37
|
+
"Chicago, IL 99191")),
|
|
38
|
+
react_1.default.createElement("div", { className: "flex gap-x-4" },
|
|
39
|
+
react_1.default.createElement("dt", { className: "flex-none" },
|
|
40
|
+
react_1.default.createElement("span", { className: "sr-only" }, "Telephone"),
|
|
41
|
+
react_1.default.createElement(outline_1.PhoneIcon, { "aria-hidden": "true", className: "h-7 w-6 text-gray-400" })),
|
|
42
|
+
react_1.default.createElement("dd", null,
|
|
43
|
+
react_1.default.createElement("a", { href: "tel:+1 (555) 234-5678", className: "hover:text-white" }, "+1 (555) 234-5678"))),
|
|
44
|
+
react_1.default.createElement("div", { className: "flex gap-x-4" },
|
|
45
|
+
react_1.default.createElement("dt", { className: "flex-none" },
|
|
46
|
+
react_1.default.createElement("span", { className: "sr-only" }, "Email"),
|
|
47
|
+
react_1.default.createElement(outline_1.EnvelopeIcon, { "aria-hidden": "true", className: "h-7 w-6 text-gray-400" })),
|
|
48
|
+
react_1.default.createElement("dd", null,
|
|
49
|
+
react_1.default.createElement("a", { href: "mailto:hello@example.com", className: "hover:text-white" }, "hello@example.com")))))),
|
|
50
|
+
react_1.default.createElement("form", { action: "#", method: "POST", className: "px-6 pt-20 pb-24 sm:pb-32 lg:px-8 lg:py-48" },
|
|
51
|
+
react_1.default.createElement("div", { className: "mx-auto max-w-xl lg:mr-0 lg:max-w-lg" },
|
|
52
|
+
react_1.default.createElement("div", { className: "grid grid-cols-1 gap-x-8 gap-y-6 sm:grid-cols-2" },
|
|
53
|
+
react_1.default.createElement("div", null,
|
|
54
|
+
react_1.default.createElement("label", { htmlFor: "first-name", className: "block text-sm/6 font-semibold text-white" }, "First name"),
|
|
55
|
+
react_1.default.createElement("div", { className: "mt-2.5" },
|
|
56
|
+
react_1.default.createElement("input", { id: "first-name", name: "first-name", type: "text", autoComplete: "given-name", className: "block w-full rounded-md bg-white/5 px-3.5 py-2 text-base text-white outline-1 -outline-offset-1 outline-white/10 placeholder:text-gray-500 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-500" }))),
|
|
57
|
+
react_1.default.createElement("div", null,
|
|
58
|
+
react_1.default.createElement("label", { htmlFor: "last-name", className: "block text-sm/6 font-semibold text-white" }, "Last name"),
|
|
59
|
+
react_1.default.createElement("div", { className: "mt-2.5" },
|
|
60
|
+
react_1.default.createElement("input", { id: "last-name", name: "last-name", type: "text", autoComplete: "family-name", className: "block w-full rounded-md bg-white/5 px-3.5 py-2 text-base text-white outline-1 -outline-offset-1 outline-white/10 placeholder:text-gray-500 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-500" }))),
|
|
61
|
+
react_1.default.createElement("div", { className: "sm:col-span-2" },
|
|
62
|
+
react_1.default.createElement("label", { htmlFor: "email", className: "block text-sm/6 font-semibold text-white" }, "Email"),
|
|
63
|
+
react_1.default.createElement("div", { className: "mt-2.5" },
|
|
64
|
+
react_1.default.createElement("input", { id: "email", name: "email", type: "email", autoComplete: "email", className: "block w-full rounded-md bg-white/5 px-3.5 py-2 text-base text-white outline-1 -outline-offset-1 outline-white/10 placeholder:text-gray-500 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-500" }))),
|
|
65
|
+
react_1.default.createElement("div", { className: "sm:col-span-2" },
|
|
66
|
+
react_1.default.createElement("label", { htmlFor: "phone-number", className: "block text-sm/6 font-semibold text-white" }, "Phone number"),
|
|
67
|
+
react_1.default.createElement("div", { className: "mt-2.5" },
|
|
68
|
+
react_1.default.createElement("input", { id: "phone-number", name: "phone-number", type: "tel", autoComplete: "tel", className: "block w-full rounded-md bg-white/5 px-3.5 py-2 text-base text-white outline-1 -outline-offset-1 outline-white/10 placeholder:text-gray-500 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-500" }))),
|
|
69
|
+
react_1.default.createElement("div", { className: "sm:col-span-2" },
|
|
70
|
+
react_1.default.createElement("label", { htmlFor: "message", className: "block text-sm/6 font-semibold text-white" }, "Message"),
|
|
71
|
+
react_1.default.createElement("div", { className: "mt-2.5" },
|
|
72
|
+
react_1.default.createElement("textarea", { id: "message", name: "message", rows: 4, className: "block w-full rounded-md bg-white/5 px-3.5 py-2 text-base text-white outline-1 -outline-offset-1 outline-white/10 placeholder:text-gray-500 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-500", defaultValue: '' })))),
|
|
73
|
+
react_1.default.createElement("div", { className: "mt-8 flex justify-end" },
|
|
74
|
+
react_1.default.createElement("button", { type: "submit", className: "rounded-md bg-indigo-500 px-3.5 py-2.5 text-center text-sm font-semibold text-white shadow-xs hover:bg-indigo-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-500" }, "Send message")))))));
|
|
75
|
+
};
|
|
76
|
+
exports.VistaContactV4 = VistaContactV4;
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
+
exports.VistaContactV5 = void 0;
|
|
7
|
+
var react_1 = __importDefault(require("react"));
|
|
8
|
+
var VistaContactV5 = function (_a) {
|
|
9
|
+
var id = _a.id;
|
|
10
|
+
return (react_1.default.createElement("div", { className: "bg-white py-24 sm:py-32" },
|
|
11
|
+
react_1.default.createElement("div", { className: "mx-auto max-w-7xl px-6 lg:px-8" },
|
|
12
|
+
react_1.default.createElement("div", { className: "mx-auto max-w-2xl lg:mx-0" },
|
|
13
|
+
react_1.default.createElement("h2", { className: "text-4xl font-semibold tracking-tight text-pretty text-gray-900 sm:text-5xl" }, "Our offices"),
|
|
14
|
+
react_1.default.createElement("p", { className: "mt-6 text-lg/8 text-gray-600" }, "Varius facilisi mauris sed sit. Non sed et duis dui leo, vulputate id malesuada non. Cras aliquet purus dui laoreet diam sed lacus, fames.")),
|
|
15
|
+
react_1.default.createElement("div", { className: "mx-auto mt-16 grid max-w-2xl grid-cols-1 gap-8 text-base/7 sm:grid-cols-2 sm:gap-y-16 lg:mx-0 lg:max-w-none lg:grid-cols-4" },
|
|
16
|
+
react_1.default.createElement("div", null,
|
|
17
|
+
react_1.default.createElement("h3", { className: "border-l border-indigo-600 pl-6 font-semibold text-gray-900" }, "Los Angeles"),
|
|
18
|
+
react_1.default.createElement("address", { className: "border-l border-gray-200 pt-2 pl-6 text-gray-600 not-italic" },
|
|
19
|
+
react_1.default.createElement("p", null, "4556 Brendan Ferry"),
|
|
20
|
+
react_1.default.createElement("p", null, "Los Angeles, CA 90210"))),
|
|
21
|
+
react_1.default.createElement("div", null,
|
|
22
|
+
react_1.default.createElement("h3", { className: "border-l border-indigo-600 pl-6 font-semibold text-gray-900" }, "New York"),
|
|
23
|
+
react_1.default.createElement("address", { className: "border-l border-gray-200 pt-2 pl-6 text-gray-600 not-italic" },
|
|
24
|
+
react_1.default.createElement("p", null, "886 Walter Street"),
|
|
25
|
+
react_1.default.createElement("p", null, "New York, NY 12345"))),
|
|
26
|
+
react_1.default.createElement("div", null,
|
|
27
|
+
react_1.default.createElement("h3", { className: "border-l border-indigo-600 pl-6 font-semibold text-gray-900" }, "Toronto"),
|
|
28
|
+
react_1.default.createElement("address", { className: "border-l border-gray-200 pt-2 pl-6 text-gray-600 not-italic" },
|
|
29
|
+
react_1.default.createElement("p", null, "7363 Cynthia Pass"),
|
|
30
|
+
react_1.default.createElement("p", null, "Toronto, ON N3Y 4H8"))),
|
|
31
|
+
react_1.default.createElement("div", null,
|
|
32
|
+
react_1.default.createElement("h3", { className: "border-l border-indigo-600 pl-6 font-semibold text-gray-900" }, "London"),
|
|
33
|
+
react_1.default.createElement("address", { className: "border-l border-gray-200 pt-2 pl-6 text-gray-600 not-italic" },
|
|
34
|
+
react_1.default.createElement("p", null, "114 Cobble Lane"),
|
|
35
|
+
react_1.default.createElement("p", null, "London N1 2EF")))))));
|
|
36
|
+
};
|
|
37
|
+
exports.VistaContactV5 = VistaContactV5;
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
+
exports.VistaContactV6 = void 0;
|
|
7
|
+
var react_1 = __importDefault(require("react"));
|
|
8
|
+
var outline_1 = require("@heroicons/react/24/outline");
|
|
9
|
+
var VistaContactV6 = function (_a) {
|
|
10
|
+
var id = _a.id;
|
|
11
|
+
return (react_1.default.createElement("div", { className: "isolate bg-white px-6 py-24 sm:py-32 lg:px-8" },
|
|
12
|
+
react_1.default.createElement("div", { className: "mx-auto max-w-2xl sm:text-center" },
|
|
13
|
+
react_1.default.createElement("h2", { className: "text-4xl font-semibold tracking-tight text-balance text-gray-900 sm:text-5xl" }, "Contact sales"),
|
|
14
|
+
react_1.default.createElement("p", { className: "mt-2 text-lg/8 text-gray-600" }, "Aute magna irure deserunt veniam aliqua magna enim voluptate.")),
|
|
15
|
+
react_1.default.createElement("div", { className: "mx-auto mt-20 max-w-lg space-y-16" },
|
|
16
|
+
react_1.default.createElement("div", { className: "flex gap-x-6" },
|
|
17
|
+
react_1.default.createElement("div", { className: "flex size-10 shrink-0 items-center justify-center rounded-lg bg-indigo-600" },
|
|
18
|
+
react_1.default.createElement(outline_1.ChatBubbleLeftRightIcon, { "aria-hidden": "true", className: "size-6 text-white" })),
|
|
19
|
+
react_1.default.createElement("div", null,
|
|
20
|
+
react_1.default.createElement("h3", { className: "text-base/7 font-semibold text-gray-900" }, "Sales support"),
|
|
21
|
+
react_1.default.createElement("p", { className: "mt-2 text-base/7 text-gray-600" }, "Ut cursus est ut amet. Lobortis eget egestas leo vitae eget porttitor risus blandit. Nunc a in lorem vel iaculis porttitor."),
|
|
22
|
+
react_1.default.createElement("p", { className: "mt-4 text-sm/6 font-semibold" },
|
|
23
|
+
react_1.default.createElement("a", { href: "#", className: "text-indigo-600" },
|
|
24
|
+
"Contact us ",
|
|
25
|
+
react_1.default.createElement("span", { "aria-hidden": "true" }, "\u2192"))))),
|
|
26
|
+
react_1.default.createElement("div", { className: "flex gap-x-6" },
|
|
27
|
+
react_1.default.createElement("div", { className: "flex size-10 shrink-0 items-center justify-center rounded-lg bg-indigo-600" },
|
|
28
|
+
react_1.default.createElement(outline_1.BugAntIcon, { "aria-hidden": "true", className: "size-6 text-white" })),
|
|
29
|
+
react_1.default.createElement("div", null,
|
|
30
|
+
react_1.default.createElement("h3", { className: "text-base/7 font-semibold text-gray-900" }, "Bug reports"),
|
|
31
|
+
react_1.default.createElement("p", { className: "mt-2 text-base/7 text-gray-600" }, "Expedita qui non ut quia ipsum voluptatum ipsam pariatur. Culpa vitae ipsum minus eius vero quo quibusdam."),
|
|
32
|
+
react_1.default.createElement("p", { className: "mt-4 text-sm/6 font-semibold" },
|
|
33
|
+
react_1.default.createElement("a", { href: "#", className: "text-indigo-600" },
|
|
34
|
+
"Report a bug ",
|
|
35
|
+
react_1.default.createElement("span", { "aria-hidden": "true" }, "\u2192"))))),
|
|
36
|
+
react_1.default.createElement("div", { className: "flex gap-x-6" },
|
|
37
|
+
react_1.default.createElement("div", { className: "flex size-10 shrink-0 items-center justify-center rounded-lg bg-indigo-600" },
|
|
38
|
+
react_1.default.createElement(outline_1.ComputerDesktopIcon, { "aria-hidden": "true", className: "size-6 text-white" })),
|
|
39
|
+
react_1.default.createElement("div", null,
|
|
40
|
+
react_1.default.createElement("h3", { className: "text-base/7 font-semibold text-gray-900" }, "Technical support"),
|
|
41
|
+
react_1.default.createElement("p", { className: "mt-2 text-base/7 text-gray-600" }, "Sint aut modi porro consequatur architecto commodi qui consequatur. Dignissimos adipisci minima."),
|
|
42
|
+
react_1.default.createElement("p", { className: "mt-4 text-sm/6 font-semibold" },
|
|
43
|
+
react_1.default.createElement("a", { href: "#", className: "text-indigo-600" },
|
|
44
|
+
"Join our Discord ",
|
|
45
|
+
react_1.default.createElement("span", { "aria-hidden": "true" }, "\u2192"))))))));
|
|
46
|
+
};
|
|
47
|
+
exports.VistaContactV6 = VistaContactV6;
|
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
+
exports.VistaContactV7 = void 0;
|
|
7
|
+
var react_1 = __importDefault(require("react"));
|
|
8
|
+
var VistaContactV7 = function (_a) {
|
|
9
|
+
var id = _a.id;
|
|
10
|
+
return (react_1.default.createElement("div", { className: "relative isolate bg-white px-6 py-24 sm:py-32 lg:px-8" },
|
|
11
|
+
react_1.default.createElement("svg", { "aria-hidden": "true", className: "absolute inset-0 -z-10 size-full mask-[radial-gradient(100%_100%_at_top_right,white,transparent)] stroke-gray-200" },
|
|
12
|
+
react_1.default.createElement("defs", null,
|
|
13
|
+
react_1.default.createElement("pattern", { x: "50%", y: -64, id: "83fd4e5a-9d52-42fc-97b6-718e5d7ee527", width: 200, height: 200, patternUnits: "userSpaceOnUse" },
|
|
14
|
+
react_1.default.createElement("path", { d: "M100 200V.5M.5 .5H200", fill: "none" }))),
|
|
15
|
+
react_1.default.createElement("svg", { x: "50%", y: -64, className: "overflow-visible fill-gray-50" },
|
|
16
|
+
react_1.default.createElement("path", { d: "M-100.5 0h201v201h-201Z M699.5 0h201v201h-201Z M499.5 400h201v201h-201Z M299.5 800h201v201h-201Z", strokeWidth: 0 })),
|
|
17
|
+
react_1.default.createElement("rect", { fill: "url(#83fd4e5a-9d52-42fc-97b6-718e5d7ee527)", width: "100%", height: "100%", strokeWidth: 0 })),
|
|
18
|
+
react_1.default.createElement("div", { className: "mx-auto max-w-xl lg:max-w-4xl" },
|
|
19
|
+
react_1.default.createElement("h2", { className: "text-4xl font-semibold tracking-tight text-pretty text-gray-900 sm:text-5xl" }, "Let\u2019s talk about your project"),
|
|
20
|
+
react_1.default.createElement("p", { className: "mt-2 text-lg/8 text-gray-600" }, "We help companies and individuals build out their brand guidelines."),
|
|
21
|
+
react_1.default.createElement("div", { className: "mt-16 flex flex-col gap-16 sm:gap-y-20 lg:flex-row" },
|
|
22
|
+
react_1.default.createElement("form", { action: "#", method: "POST", className: "lg:flex-auto" },
|
|
23
|
+
react_1.default.createElement("div", { className: "grid grid-cols-1 gap-x-8 gap-y-6 sm:grid-cols-2" },
|
|
24
|
+
react_1.default.createElement("div", null,
|
|
25
|
+
react_1.default.createElement("label", { htmlFor: "first-name", className: "block text-sm/6 font-semibold text-gray-900" }, "First name"),
|
|
26
|
+
react_1.default.createElement("div", { className: "mt-2.5" },
|
|
27
|
+
react_1.default.createElement("input", { id: "first-name", name: "first-name", type: "text", autoComplete: "given-name", className: "block w-full rounded-md bg-white px-3.5 py-2 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600" }))),
|
|
28
|
+
react_1.default.createElement("div", null,
|
|
29
|
+
react_1.default.createElement("label", { htmlFor: "last-name", className: "block text-sm/6 font-semibold text-gray-900" }, "Last name"),
|
|
30
|
+
react_1.default.createElement("div", { className: "mt-2.5" },
|
|
31
|
+
react_1.default.createElement("input", { id: "last-name", name: "last-name", type: "text", autoComplete: "family-name", className: "block w-full rounded-md bg-white px-3.5 py-2 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600" }))),
|
|
32
|
+
react_1.default.createElement("div", null,
|
|
33
|
+
react_1.default.createElement("label", { htmlFor: "budget", className: "block text-sm/6 font-semibold text-gray-900" }, "Budget"),
|
|
34
|
+
react_1.default.createElement("div", { className: "mt-2.5" },
|
|
35
|
+
react_1.default.createElement("input", { id: "budget", name: "budget", type: "text", className: "block w-full rounded-md bg-white px-3.5 py-2 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600" }))),
|
|
36
|
+
react_1.default.createElement("div", null,
|
|
37
|
+
react_1.default.createElement("label", { htmlFor: "website", className: "block text-sm/6 font-semibold text-gray-900" }, "Website"),
|
|
38
|
+
react_1.default.createElement("div", { className: "mt-2.5" },
|
|
39
|
+
react_1.default.createElement("input", { id: "website", name: "website", type: "url", className: "block w-full rounded-md bg-white px-3.5 py-2 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600" }))),
|
|
40
|
+
react_1.default.createElement("div", { className: "sm:col-span-2" },
|
|
41
|
+
react_1.default.createElement("label", { htmlFor: "message", className: "block text-sm/6 font-semibold text-gray-900" }, "Message"),
|
|
42
|
+
react_1.default.createElement("div", { className: "mt-2.5" },
|
|
43
|
+
react_1.default.createElement("textarea", { id: "message", name: "message", rows: 4, className: "block w-full rounded-md bg-white px-3.5 py-2 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600", defaultValue: '' })))),
|
|
44
|
+
react_1.default.createElement("div", { className: "mt-10" },
|
|
45
|
+
react_1.default.createElement("button", { type: "submit", className: "block w-full rounded-md bg-indigo-600 px-3.5 py-2.5 text-center text-sm font-semibold text-white shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600" }, "Let\u2019s talk")),
|
|
46
|
+
react_1.default.createElement("p", { className: "mt-4 text-sm/6 text-gray-500" },
|
|
47
|
+
"By submitting this form, I agree to the",
|
|
48
|
+
' ',
|
|
49
|
+
react_1.default.createElement("a", { href: "#", className: "font-semibold whitespace-nowrap text-indigo-600" }, "privacy policy"),
|
|
50
|
+
".")),
|
|
51
|
+
react_1.default.createElement("div", { className: "lg:mt-6 lg:w-80 lg:flex-none" },
|
|
52
|
+
react_1.default.createElement("img", { alt: "", src: "https://tailwindcss.com/plus-assets/img/logos/workcation-logo-indigo-600.svg", className: "h-12 w-auto" }),
|
|
53
|
+
react_1.default.createElement("figure", { className: "mt-10" },
|
|
54
|
+
react_1.default.createElement("blockquote", { className: "text-lg/8 font-semibold text-gray-900" },
|
|
55
|
+
react_1.default.createElement("p", null, "\u201CLorem ipsum dolor sit amet consectetur adipisicing elit. Nemo expedita voluptas culpa sapiente alias molestiae. Numquam corrupti in laborum sed rerum et corporis.\u201D")),
|
|
56
|
+
react_1.default.createElement("figcaption", { className: "mt-10 flex gap-x-6" },
|
|
57
|
+
react_1.default.createElement("img", { alt: "", src: "https://images.unsplash.com/photo-1550525811-e5869dd03032?ixlib=rb-=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=96&h=96&q=80", className: "size-12 flex-none rounded-full bg-gray-50" }),
|
|
58
|
+
react_1.default.createElement("div", null,
|
|
59
|
+
react_1.default.createElement("div", { className: "text-base font-semibold text-gray-900" }, "Brenna Goyette"),
|
|
60
|
+
react_1.default.createElement("div", { className: "text-sm/6 text-gray-600" }, "CEO of Workcation")))))))));
|
|
61
|
+
};
|
|
62
|
+
exports.VistaContactV7 = VistaContactV7;
|
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
+
exports.VistaContactV8 = void 0;
|
|
7
|
+
var react_1 = __importDefault(require("react"));
|
|
8
|
+
var VistaContactV8 = function (_a) {
|
|
9
|
+
var id = _a.id;
|
|
10
|
+
return (react_1.default.createElement("div", { className: "relative bg-white" },
|
|
11
|
+
react_1.default.createElement("div", { className: "lg:absolute lg:inset-0 lg:left-1/2" },
|
|
12
|
+
react_1.default.createElement("img", { alt: "", src: "https://images.unsplash.com/photo-1559136555-9303baea8ebd?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&crop=focalpoint&fp-x=.4&w=2560&h=3413&&q=80", className: "h-64 w-full bg-gray-50 object-cover sm:h-80 lg:absolute lg:h-full" })),
|
|
13
|
+
react_1.default.createElement("div", { className: "pt-16 pb-24 sm:pt-24 sm:pb-32 lg:mx-auto lg:grid lg:max-w-7xl lg:grid-cols-2 lg:pt-32" },
|
|
14
|
+
react_1.default.createElement("div", { className: "px-6 lg:px-8" },
|
|
15
|
+
react_1.default.createElement("div", { className: "mx-auto max-w-xl lg:mx-0 lg:max-w-lg" },
|
|
16
|
+
react_1.default.createElement("h2", { className: "text-4xl font-semibold tracking-tight text-pretty text-gray-900 sm:text-5xl" }, "Lets work together"),
|
|
17
|
+
react_1.default.createElement("p", { className: "mt-2 text-lg/8 text-gray-600" }, "Proin volutpat consequat porttitor cras nullam gravida at orci molestie a eu arcu sed ut tincidunt magna."),
|
|
18
|
+
react_1.default.createElement("form", { action: "#", method: "POST", className: "mt-16" },
|
|
19
|
+
react_1.default.createElement("div", { className: "grid grid-cols-1 gap-x-8 gap-y-6 sm:grid-cols-2" },
|
|
20
|
+
react_1.default.createElement("div", null,
|
|
21
|
+
react_1.default.createElement("label", { htmlFor: "first-name", className: "block text-sm/6 font-semibold text-gray-900" }, "First name"),
|
|
22
|
+
react_1.default.createElement("div", { className: "mt-2.5" },
|
|
23
|
+
react_1.default.createElement("input", { id: "first-name", name: "first-name", type: "text", autoComplete: "given-name", className: "block w-full rounded-md bg-white px-3.5 py-2 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600" }))),
|
|
24
|
+
react_1.default.createElement("div", null,
|
|
25
|
+
react_1.default.createElement("label", { htmlFor: "last-name", className: "block text-sm/6 font-semibold text-gray-900" }, "Last name"),
|
|
26
|
+
react_1.default.createElement("div", { className: "mt-2.5" },
|
|
27
|
+
react_1.default.createElement("input", { id: "last-name", name: "last-name", type: "text", autoComplete: "family-name", className: "block w-full rounded-md bg-white px-3.5 py-2 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600" }))),
|
|
28
|
+
react_1.default.createElement("div", { className: "sm:col-span-2" },
|
|
29
|
+
react_1.default.createElement("label", { htmlFor: "email", className: "block text-sm/6 font-semibold text-gray-900" }, "Email"),
|
|
30
|
+
react_1.default.createElement("div", { className: "mt-2.5" },
|
|
31
|
+
react_1.default.createElement("input", { id: "email", name: "email", type: "email", autoComplete: "email", className: "block w-full rounded-md bg-white px-3.5 py-2 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600" }))),
|
|
32
|
+
react_1.default.createElement("div", { className: "sm:col-span-2" },
|
|
33
|
+
react_1.default.createElement("label", { htmlFor: "company", className: "block text-sm/6 font-semibold text-gray-900" }, "Company"),
|
|
34
|
+
react_1.default.createElement("div", { className: "mt-2.5" },
|
|
35
|
+
react_1.default.createElement("input", { id: "company", name: "company", type: "text", autoComplete: "organization", className: "block w-full rounded-md bg-white px-3.5 py-2 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600" }))),
|
|
36
|
+
react_1.default.createElement("div", { className: "sm:col-span-2" },
|
|
37
|
+
react_1.default.createElement("div", { className: "flex justify-between text-sm/6" },
|
|
38
|
+
react_1.default.createElement("label", { htmlFor: "phone", className: "block font-semibold text-gray-900" }, "Phone"),
|
|
39
|
+
react_1.default.createElement("p", { id: "phone-description", className: "text-gray-400" }, "Optional")),
|
|
40
|
+
react_1.default.createElement("div", { className: "mt-2.5" },
|
|
41
|
+
react_1.default.createElement("input", { id: "phone", name: "phone", type: "tel", autoComplete: "tel", "aria-describedby": "phone-description", className: "block w-full rounded-md bg-white px-3.5 py-2 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600" }))),
|
|
42
|
+
react_1.default.createElement("div", { className: "sm:col-span-2" },
|
|
43
|
+
react_1.default.createElement("div", { className: "flex justify-between text-sm/6" },
|
|
44
|
+
react_1.default.createElement("label", { htmlFor: "message", className: "block text-sm/6 font-semibold text-gray-900" }, "How can we help you?"),
|
|
45
|
+
react_1.default.createElement("p", { id: "message-description", className: "text-gray-400" }, "Max 500 characters")),
|
|
46
|
+
react_1.default.createElement("div", { className: "mt-2.5" },
|
|
47
|
+
react_1.default.createElement("textarea", { id: "message", name: "message", rows: 4, "aria-describedby": "message-description", className: "block w-full rounded-md bg-white px-3.5 py-2 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600", defaultValue: '' }))),
|
|
48
|
+
react_1.default.createElement("fieldset", { className: "sm:col-span-2" },
|
|
49
|
+
react_1.default.createElement("legend", { className: "block text-sm/6 font-semibold text-gray-900" }, "Expected budget"),
|
|
50
|
+
react_1.default.createElement("div", { className: "mt-4 space-y-4 text-sm/6 text-gray-600" },
|
|
51
|
+
react_1.default.createElement("div", { className: "flex gap-x-2.5" },
|
|
52
|
+
react_1.default.createElement("input", { defaultValue: "under_25k", id: "budget-under-25k", name: "budget", type: "radio", className: "relative mt-1 size-4 appearance-none rounded-full border border-gray-300 before:absolute before:inset-1 before:rounded-full before:bg-white not-checked:before:hidden checked:border-indigo-600 checked:bg-indigo-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 disabled:border-gray-300 disabled:bg-gray-100 disabled:before:bg-gray-400 forced-colors:appearance-auto forced-colors:before:hidden" }),
|
|
53
|
+
react_1.default.createElement("label", { htmlFor: "budget-under-25k" }, "Less than $25K")),
|
|
54
|
+
react_1.default.createElement("div", { className: "flex gap-x-2.5" },
|
|
55
|
+
react_1.default.createElement("input", { defaultValue: "25k-50k", id: "budget-25k-50k", name: "budget", type: "radio", className: "relative mt-1 size-4 appearance-none rounded-full border border-gray-300 before:absolute before:inset-1 before:rounded-full before:bg-white not-checked:before:hidden checked:border-indigo-600 checked:bg-indigo-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 disabled:border-gray-300 disabled:bg-gray-100 disabled:before:bg-gray-400 forced-colors:appearance-auto forced-colors:before:hidden" }),
|
|
56
|
+
react_1.default.createElement("label", { htmlFor: "budget-25k-50k" }, "$25K \u2013 $50K")),
|
|
57
|
+
react_1.default.createElement("div", { className: "flex gap-x-2.5" },
|
|
58
|
+
react_1.default.createElement("input", { defaultValue: "50k-100k", id: "budget-50k-100k", name: "budget", type: "radio", className: "relative mt-1 size-4 appearance-none rounded-full border border-gray-300 before:absolute before:inset-1 before:rounded-full before:bg-white not-checked:before:hidden checked:border-indigo-600 checked:bg-indigo-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 disabled:border-gray-300 disabled:bg-gray-100 disabled:before:bg-gray-400 forced-colors:appearance-auto forced-colors:before:hidden" }),
|
|
59
|
+
react_1.default.createElement("label", { htmlFor: "budget-50k-100k" }, "$50K \u2013 $100K")),
|
|
60
|
+
react_1.default.createElement("div", { className: "flex gap-x-2.5" },
|
|
61
|
+
react_1.default.createElement("input", { defaultValue: "over_100k", id: "budget-over-100k", name: "budget", type: "radio", className: "relative mt-1 size-4 appearance-none rounded-full border border-gray-300 before:absolute before:inset-1 before:rounded-full before:bg-white not-checked:before:hidden checked:border-indigo-600 checked:bg-indigo-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 disabled:border-gray-300 disabled:bg-gray-100 disabled:before:bg-gray-400 forced-colors:appearance-auto forced-colors:before:hidden" }),
|
|
62
|
+
react_1.default.createElement("label", { htmlFor: "budget-over-100k" }, "$100K+"))))),
|
|
63
|
+
react_1.default.createElement("div", { className: "mt-10 flex justify-end border-t border-gray-900/10 pt-8" },
|
|
64
|
+
react_1.default.createElement("button", { type: "submit", className: "rounded-md bg-indigo-600 px-3.5 py-2.5 text-center text-sm font-semibold text-white shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600" }, "Send message"))))))));
|
|
65
|
+
};
|
|
66
|
+
exports.VistaContactV8 = VistaContactV8;
|
package/package.json
CHANGED
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
export interface VistaContactV1Props {
|
|
2
|
+
id: string;
|
|
3
|
+
}
|
|
4
|
+
export interface VistaContactV2Props {
|
|
5
|
+
id: string;
|
|
6
|
+
}
|
|
7
|
+
export interface VistaContactV3Props {
|
|
8
|
+
id: string;
|
|
9
|
+
}
|
|
10
|
+
export interface VistaContactV4Props {
|
|
11
|
+
id: string;
|
|
12
|
+
}
|
|
13
|
+
export interface VistaContactV5Props {
|
|
14
|
+
id: string;
|
|
15
|
+
}
|
|
16
|
+
export interface VistaContactV6Props {
|
|
17
|
+
id: string;
|
|
18
|
+
}
|
|
19
|
+
export interface VistaContactV7Props {
|
|
20
|
+
id: string;
|
|
21
|
+
}
|
|
22
|
+
export interface VistaContactV8Props {
|
|
23
|
+
id: string;
|
|
24
|
+
}
|