@appcorp/app-corp-vista 0.2.79 → 0.2.81

package/organisms/vista-feature-v1/vista-feature-v1.d.ts

@@ -1,2 +1,3 @@
-import React from 'react';
-export declare const VistaFeatureV1: () => React.JSX.Element;
+import { FC } from 'react';
+import { VistaFeatureV1Props } from '../../type/vista-feature-type';
+export declare const VistaFeatureV1: FC<VistaFeatureV1Props>;

package/organisms/vista-feature-v1/vista-feature-v1.js

@@ -5,39 +5,28 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.VistaFeatureV1 = void 0;
 var react_1 = __importDefault(require("react"));
-var solid_1 = require("@heroicons/react/20/solid");
-var features = [
-    {
-        name: 'Push to deploy.',
-        description: 'Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.',
-        icon: solid_1.CloudArrowUpIcon,
-    },
-    {
-        name: 'SSL certificates.',
-        description: 'Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo.',
-        icon: solid_1.LockClosedIcon,
-    },
-    {
-        name: 'Database backups.',
-        description: 'Ac tincidunt sapien vehicula erat auctor pellentesque rhoncus. Et magna sit morbi lobortis.',
-        icon: solid_1.ServerIcon,
-    },
-];
-var VistaFeatureV1 = function () {
+var image_1 = __importDefault(require("next/image"));
+var VistaFeatureV1 = function (_a) {
+    var description = _a.description, imageAlt = _a.imageAlt, imageSrc = _a.imageSrc, items = _a.items, _b = _a.revert, revert = _b === void 0 ? false : _b, subTitle = _a.subTitle, title = _a.title;
     return (react_1.default.createElement("div", { className: "overflow-hidden bg-gray-900 py-24 sm:py-32" },
         react_1.default.createElement("div", { className: "mx-auto max-w-7xl px-6 lg:px-8" },
             react_1.default.createElement("div", { className: "mx-auto grid max-w-2xl grid-cols-1 gap-x-8 gap-y-16 sm:gap-y-20 lg:mx-0 lg:max-w-none lg:grid-cols-2" },
-                react_1.default.createElement("div", { className: "lg:pt-4 lg:pr-8" },
+                react_1.default.createElement("div", { className: "lg:pt-4 lg:pr-8 w-full ".concat(revert ? 'order-2' : 'order-1') },
                     react_1.default.createElement("div", { className: "lg:max-w-lg" },
-                        react_1.default.createElement("h2", { className: "text-base/7 font-semibold text-indigo-400" }, "Deploy faster"),
-                        react_1.default.createElement("p", { className: "mt-2 text-4xl font-semibold tracking-tight text-pretty text-white sm:text-5xl" }, "A better workflow"),
-                        react_1.default.createElement("p", { className: "mt-6 text-lg/8 text-gray-300" }, "Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione."),
-                        react_1.default.createElement("dl", { className: "mt-10 max-w-xl space-y-8 text-base/7 text-gray-400 lg:max-w-none" }, features.map(function (feature) { return (react_1.default.createElement("div", { key: feature.name, className: "relative pl-9" },
+                        react_1.default.createElement("h2", { className: "text-base/7 font-semibold text-primary" }, subTitle),
+                        react_1.default.createElement("p", { className: "mt-2 text-4xl font-semibold tracking-tight text-pretty text-white sm:text-5xl" }, title),
+                        react_1.default.createElement("p", { className: "mt-6 text-lg/8 text-gray-300" }, description),
+                        react_1.default.createElement("dl", { className: "mt-10 max-w-xl space-y-8 text-base/7 text-gray-400 lg:max-w-none" }, items
+                            .filter(function (_a) {
+                            var enabled = _a.enabled;
+                            return enabled;
+                        })
+                            .map(function (item) { return (react_1.default.createElement("div", { key: item.name, className: "relative pl-9" },
                             react_1.default.createElement("dt", { className: "inline font-semibold text-white" },
-                                react_1.default.createElement(feature.icon, { "aria-hidden": "true", className: "absolute top-1 left-1 size-5 text-indigo-400" }),
-                                feature.name),
+                                react_1.default.createElement(item.icon, { "aria-hidden": "true", className: "absolute top-1 left-1 size-5 text-primary" }),
+                                item.name),
                             ' ',
-                            react_1.default.createElement("dd", { className: "inline" }, feature.description))); })))),
-                react_1.default.createElement("img", { alt: "Product screenshot", src: "https://tailwindcss.com/plus-assets/img/component-images/dark-project-app-screenshot.png", width: 2432, height: 1442, className: "w-3xl max-w-none rounded-xl shadow-xl ring-1 ring-white/10 sm:w-228 md:-ml-4 lg:-ml-0" })))));
+                            react_1.default.createElement("dd", { className: "inline" }, item.description))); })))),
+                react_1.default.createElement(image_1.default, { alt: imageAlt, className: "w-3xl max-w-none rounded-xl shadow-xl ring-1 ring-gray-400/10 sm:w-228 md:-ml-4 lg:-ml-0 ".concat(revert ? 'order-1 lg:-ml-80' : 'order-2'), height: 1442, src: imageSrc, width: 232 })))));
 };
 exports.VistaFeatureV1 = VistaFeatureV1;

package/organisms/vista-hero-v5/vista-hero-v5.js

@@ -1,4 +1,3 @@
-'use client';
 "use strict";
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
@@ -6,32 +5,34 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.VistaHeroV5 = void 0;
 var react_1 = __importDefault(require("react"));
-var VistaHeroV5 = function () {
+var vista_button_v1_1 = require("../../molecules/vista-button-v1/vista-button-v1");
+var vista_button_type_1 = require("../../type/vista-button-type");
+var VistaHeroV5 = function (_a) {
+    var bannerAlt = _a.bannerAlt, bannerSrc = _a.bannerSrc, ctas = _a.ctas, description = _a.description, subTitle = _a.subTitle, subTitleCta = _a.subTitleCta, title = _a.title;
     return (react_1.default.createElement("div", { className: "bg-gray-900" },
         react_1.default.createElement("div", { className: "relative isolate overflow-hidden pt-14" },
-            react_1.default.createElement("img", { alt: "", src: "https://images.unsplash.com/photo-1521737604893-d14cc237f11d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2830&q=80&blend=111827&sat=-100&exp=15&blend-mode=multiply", className: "absolute inset-0 -z-10 size-full object-cover" }),
+            react_1.default.createElement("img", { alt: bannerAlt, src: bannerSrc, className: "absolute inset-0 -z-10 size-full object-cover" }),
             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" },
                 react_1.default.createElement("div", { style: {
                         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%)',
                     }, className: "relative left-[calc(50%-11rem)] aspect-1155/678 w-144.5 -translate-x-1/2 rotate-30 bg-linear-to-tr from-[#ff80b5] to-[#9089fc] opacity-20 sm:left-[calc(50%-30rem)] sm:w-288.75" })),
             react_1.default.createElement("div", { className: "mx-auto max-w-7xl px-6 lg:px-8" },
                 react_1.default.createElement("div", { className: "mx-auto max-w-2xl py-32 sm:py-48 lg:py-56" },
-                    react_1.default.createElement("div", { className: "hidden sm:mb-8 sm:flex sm:justify-center" },
-                        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" },
-                            "Announcing our next round of funding.",
-                            ' ',
-                            react_1.default.createElement("a", { href: "#", className: "font-semibold text-indigo-400" },
-                                react_1.default.createElement("span", { "aria-hidden": "true", className: "absolute inset-0" }),
-                                "Read more ",
-                                react_1.default.createElement("span", { "aria-hidden": "true" }, "\u2192")))),
+                    react_1.default.createElement("div", { className: "hidden sm:mb-8 sm:flex sm:justify-center" }, subTitle && subTitleCta && (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" },
+                        subTitle,
+                        ' ',
+                        react_1.default.createElement("a", { href: "#", className: "font-semibold text-primary" },
+                            react_1.default.createElement("span", { "aria-hidden": "true", className: "absolute inset-0" }),
+                            subTitleCta,
+                            " ",
+                            react_1.default.createElement("span", { "aria-hidden": "true" }, "\u2192"))))),
                     react_1.default.createElement("div", { className: "text-center" },
-                        react_1.default.createElement("h1", { className: "text-5xl font-semibold tracking-tight text-balance text-white sm:text-7xl" }, "Data to enrich your online business"),
-                        react_1.default.createElement("p", { className: "mt-8 text-lg font-medium text-pretty text-gray-400 sm:text-xl/8" }, "Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo. Elit sunt amet fugiat veniam occaecat."),
-                        react_1.default.createElement("div", { className: "mt-10 flex items-center justify-center gap-x-6" },
-                            react_1.default.createElement("a", { href: "#", className: "rounded-md bg-indigo-500 px-3.5 py-2.5 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" }, "Get started"),
-                            react_1.default.createElement("a", { href: "#", className: "text-sm/6 font-semibold text-white" },
-                                "Learn more ",
-                                react_1.default.createElement("span", { "aria-hidden": "true" }, "\u2192")))))),
+                        react_1.default.createElement("h1", { className: "text-5xl font-semibold tracking-tight text-balance text-white sm:text-7xl" }, title),
+                        react_1.default.createElement("p", { className: "mt-8 text-lg font-medium text-pretty text-gray-400 sm:text-xl/8" }, description),
+                        react_1.default.createElement("div", { className: "mt-10 flex items-center justify-center gap-x-6" }, ctas.map(function (_a) {
+                            var handleOnClick = _a.handleOnClick, label = _a.label, variant = _a.variant;
+                            return (react_1.default.createElement(vista_button_v1_1.VistaButtonV1, { key: label, handleOnClick: handleOnClick, label: label, variant: variant, size: vista_button_type_1.VISTA_BUTTON_SIZE.LG }));
+                        }))))),
             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)]" },
                 react_1.default.createElement("div", { style: {
                         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%)',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@appcorp/app-corp-vista",
-  "version": "0.2.79",
+  "version": "0.2.81",
   "scripts": {
     "build": "yarn clean && yarn build:ts && cp package.json lib && cp README.md lib && cp yarn.lock lib",
     "build:next": "next build",

package/type/vista-feature-type.d.ts

@@ -1,6 +1,19 @@
 import { ForwardRefExoticComponent, SVGProps } from "react";
+export interface VistaFeatureV1Item {
+    description: string;
+    enabled: boolean;
+    icon: ForwardRefExoticComponent<Omit<SVGProps<SVGSVGElement>, "ref">>;
+    name: string;
+    order: number;
+}
 export interface VistaFeatureV1Props {
-    id: string;
+    description: string;
+    imageAlt: string;
+    imageSrc: string;
+    items: VistaFeatureV1Item[];
+    revert?: boolean;
+    subTitle: string;
+    title: string;
 }
 export interface VistaFeatureV2Item {
     name: string;

package/type/vista-hero-type.d.ts

@@ -1,4 +1,4 @@
-import { VISTA_BUTTON_VARIANT } from "./vista-button-type";
+import { VISTA_BUTTON_VARIANT, VistaButtonV1Props } from "./vista-button-type";
 export interface VistaHeroV13CtaItem {
     className?: string;
     enabled: boolean;
@@ -17,6 +17,13 @@ export interface VistaHeroV13Item {
     subTitleUrl?: string;
 }
 export interface VistaHeroV5Props {
+    bannerAlt: string;
+    bannerSrc: string;
+    ctas: VistaButtonV1Props[];
+    description: string;
+    subTitle?: string;
+    subTitleCta?: string;
+    title: string;
 }
 export interface VistaHeroV13Props {
     containerClassName?: string;