@stackshift-ui/features 6.0.2 → 6.0.4

package/src/features_g.tsx

@@ -0,0 +1,138 @@
+import { Container } from "@stackshift-ui/container";
+import { Flex } from "@stackshift-ui/flex";
+import { Heading } from "@stackshift-ui/heading";
+import { Image } from "@stackshift-ui/image";
+import { Section } from "@stackshift-ui/section";
+import { Text } from "@stackshift-ui/text";
+import React from "react";
+import { FeaturesProps } from ".";
+
+export default function Features_G({ caption, title, description, images, tags }: FeaturesProps) {
+  return (
+    <Section className="py-20 bg-background">
+      <Container maxWidth={1280}>
+        <Flex wrap align="center">
+          <div className="w-full px-4 mb-12 lg:mb-0 lg:w-1/2">
+            <Container maxWidth={448}>
+              <FeaturesInfo caption={caption} title={title} description={description} />
+              <TagList tags={tags} />
+            </Container>
+          </div>
+          <ImageGallery images={images} />
+        </Flex>
+      </Container>
+    </Section>
+  );
+}
+
+function FeaturesInfo({
+  caption,
+  title,
+  description,
+}: {
+  caption?: string;
+  title?: string;
+  description?: string;
+}) {
+  return (
+    <React.Fragment>
+      {caption && (
+        <Text weight="bold" className="text-secondary">
+          {caption}
+        </Text>
+      )}
+      {title && (
+        <Heading fontSize="3xl" className="mb-3">
+          {title}
+        </Heading>
+      )}
+      {description && (
+        <Text muted className="mb-6 leading-loose ">
+          {description}
+        </Text>
+      )}
+    </React.Fragment>
+  );
+}
+
+function TagList({ tags }: { tags?: string[] }) {
+  if (!tags) return null;
+
+  return (
+    <ul className="font-bold text-gray-500">
+      {tags.map(item => (
+        <FeatureItem item={item} />
+      ))}
+    </ul>
+  );
+}
+
+function FeatureItem({ item }: { item?: string }) {
+  if (!item) return null;
+
+  return (
+    <Flex as="li" align="center" className="mb-2 ">
+      <svg
+        className="w-5 h-5 mr-2 text-primary-foreground"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 20 20"
+        fill="currentColor">
+        <path
+          fillRule="evenodd"
+          d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
+          clipRule="evenodd"
+        />
+      </svg>
+      <span>{item}</span>
+    </Flex>
+  );
+}
+
+function ImageGallery({ images }: { images?: any[] }) {
+  if (!images || images?.length === 0) return null;
+
+  function renderImage(
+    image?: string,
+    alt?: string,
+    width?: number,
+    height?: number,
+    className?: string,
+  ) {
+    return (
+      <div className={`overflow-hidden ${className}`}>
+        <Image
+          className="object-cover w-full h-auto rounded-global"
+          src={image}
+          sizes="100vw"
+          width={width}
+          height={height}
+          alt={alt ?? "feature-image"}
+        />
+      </div>
+    );
+  }
+
+  return (
+    <div className="w-full lg:w-1/2">
+      <div className="items-end mb-4 lg:flex lg:flex-wrap">
+        <div className="h-full px-3 mb-4 lg:mb-0 lg:w-2/3">
+          {images[0]?.image && renderImage(images[0].image, images[0].alt, 356, 192, "h-[269px]")}
+        </div>
+        <div className="h-full px-3 lg:w-1/3">
+          {images[1]?.image && renderImage(images[1].image, images[1].alt, 166, 128, "")}
+        </div>
+      </div>
+      <div className="items-start mb-4 lg:flex lg:flex-wrap">
+        <div className="h-full px-3 mb-4 lg:mb-0 lg:w-1/3">
+          {images[2]?.image &&
+            renderImage(images[2].image, images[2].alt, 166, 128, "h-[269px] lg:h-[126px]")}
+        </div>
+        <div className="h-full px-3 lg:w-2/3">
+          {images[3]?.image && renderImage(images[3].image, images[3].alt, 356, 192, "")}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export { Features_G };

package/src/features_h.tsx

@@ -0,0 +1,135 @@
+import { Container } from "@stackshift-ui/container";
+import { Flex } from "@stackshift-ui/flex";
+import { Heading } from "@stackshift-ui/heading";
+import { Image } from "@stackshift-ui/image";
+import { Section } from "@stackshift-ui/section";
+import { Text } from "@stackshift-ui/text";
+import React from "react";
+import { FeaturesProps } from ".";
+import { ArrayOfImageTitleAndText } from "./types";
+
+export default function Features_H({ caption, title, features, images }: FeaturesProps) {
+  return (
+    <Section className="py-20 bg-background">
+      <Container maxWidth={1280}>
+        <Flex wrap align="center">
+          <div className="w-full mb-12 lg:mb-0 lg:w-1/2">
+            <Container maxWidth={448}>
+              <CaptionAndTitleSection caption={caption} title={title} />
+              <FeaturesList features={features} />
+            </Container>
+          </div>
+          <ImageGallery images={images} />
+        </Flex>
+      </Container>
+    </Section>
+  );
+}
+
+function CaptionAndTitleSection({ caption, title }: { caption?: string; title?: string }) {
+  return (
+    <React.Fragment>
+      {caption && (
+        <Text weight="bold" className="text-secondary">
+          {caption}
+        </Text>
+      )}
+      {title && (
+        <Heading fontSize="3xl" className="mb-6">
+          {title}
+        </Heading>
+      )}
+    </React.Fragment>
+  );
+}
+
+function FeaturesList({ features }: { features?: ArrayOfImageTitleAndText[] }) {
+  if (!features || features?.length <= 0) return null;
+
+  return (
+    <ul>
+      {features.map(feature => {
+        return <FeatureItem feature={feature} key={feature._key} />;
+      })}
+    </ul>
+  );
+}
+
+function FeatureItem({ feature }: { feature?: ArrayOfImageTitleAndText }) {
+  if (!feature) return null;
+
+  return (
+    <Flex as="li">
+      <FeatureIcon />
+      <div className="max-w-xs">
+        <Text weight="bold" className="text-gray-500">
+          {feature?.title}
+        </Text>
+        <Text muted className="leading-loose">
+          {feature?.plainText}
+        </Text>
+      </div>
+    </Flex>
+  );
+}
+
+function FeatureIcon() {
+  return (
+    <svg
+      className="w-8 h-8 mr-3 text-primary"
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke="currentColor">
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={2}
+        d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"
+      />
+    </svg>
+  );
+}
+
+function ImageGallery({ images }: { images?: any[] }) {
+  if (!images || images?.length === 0) return null;
+
+  return (
+    <div className="items-center w-full px-4 sm:flex md:px-0 lg:w-1/2">
+      <div className="mb-5 sm:mb-0 sm:w-1/2">
+        {images?.[0]?.image && (
+          <Image
+            className="object-cover overflow-hidden rounded-global"
+            src={`${images?.[0]?.image}`}
+            width={640}
+            height={800}
+            sizes="(max-width: 639px) 100vw, (min-width: 640px) 30vw"
+            alt={images?.[0]?.alt ?? "features-image-1"}
+          />
+        )}
+        {images?.[1]?.image && (
+          <Image
+            className="object-cover mt-6 overflow-hidden rounded-global"
+            src={`${images?.[1]?.image}`}
+            width={640}
+            height={800}
+            sizes="(max-width: 639px) 100vw, (min-width: 640px) 30vw"
+            alt={images?.[1]?.alt ?? "features-image-2"}
+          />
+        )}
+      </div>
+      {images?.[2]?.image && (
+        <Image
+          className="object-cover overflow-hidden rounded-global sm:ml-6 sm:w-1/2"
+          src={`${images?.[2]?.image}`}
+          width={640}
+          height={800}
+          sizes="(max-width: 639px) 100vw, (min-width: 640px) 30vw"
+          alt={images?.[2]?.alt ?? "features-image-3"}
+        />
+      )}
+    </div>
+  );
+}
+
+export { Features_H };

package/src/index.ts

@@ -0,0 +1,12 @@
+"use client";
+
+// component exports
+export * from "./features";
+export * from "./features_a";
+export * from "./features_b";
+export * from "./features_c";
+export * from "./features_d";
+export * from "./features_e";
+export * from "./features_f";
+export * from "./features_g";
+export * from "./features_h";

package/src/types.ts

@@ -0,0 +1,412 @@
+export type StyleVariants<T extends string> = Record<T, string>;
+
+export type Socials = "facebook" | "instagram" | "youtube" | "linkedin" | "twitter";
+export interface MainImage {
+  image: string;
+  alt?: string;
+}
+
+export interface LabeledRoute extends ConditionalLink {
+  ariaLabel?: string;
+  label?: string;
+  linkTarget?: string;
+  linkType?: string;
+  _type?: string;
+  linkInternal?: any;
+}
+export interface ConditionalLink {
+  type?: string;
+  internalLink?: string | null;
+  externalLink?: string | null;
+}
+
+export interface StatItems {
+  label?: string;
+  mainImage?: MainImage;
+  value?: string;
+  _key?: string;
+  _type?: string;
+}
+
+export interface Logo extends ConditionalLink {
+  alt?: string;
+  linkTarget?: string;
+  image?: string;
+}
+
+export interface Images {
+  image?: string;
+  _key?: string;
+  _type?: string;
+  alt?: string;
+}
+
+export interface ContactDetails {
+  addressInfo?: string;
+  contactInfo?: string;
+  emailInfo?: string;
+  _key?: string;
+}
+
+export interface SocialLink {
+  socialMedia?: string | null;
+  socialMediaLink?: string | null;
+  _key?: string | null;
+  _type?: string | null;
+  socialMediaIcon?: {
+    alt?: string;
+    image?: string;
+  } | null;
+  socialMediaPlatform?: string | null;
+}
+
+export interface LabeledRouteWithKey extends LabeledRoute {
+  _key?: string;
+}
+
+export interface ArrayOfImageTitleAndText {
+  mainImage?: {
+    alt?: string;
+    image?: string;
+  };
+  plainText?: string;
+  title?: string;
+  _key?: string;
+  _type?: string;
+}
+
+export interface FeaturedItem {
+  description?: string;
+  mainImage?: MainImage;
+  title?: string;
+  subtitle?: string;
+  _key?: string;
+  _type?: string;
+}
+
+export interface ArrayOfTitleAndText {
+  _key?: string;
+  plainText?: string;
+  title?: string;
+}
+
+export interface BlogPost extends SanityBody {
+  authors?: Author[] | null;
+  body?: any;
+  categories?: Category[] | null;
+  excerpt?: string | null;
+  link?: string | null;
+  mainImage?: string | null;
+  publishedAt?: string;
+  seo?: Seo | null;
+  slug?: SanitySlug | null;
+  title?: string;
+}
+
+export interface Seo {
+  _type?: string;
+  seoTitle?: string;
+  seoDescription?: string;
+  seoImage?: string;
+  seoKeywords?: string;
+  seoSynonyms?: string;
+}
+
+export interface SanitySlug {
+  current?: string;
+  _type?: "slug";
+}
+
+export interface SanityBody {
+  _createdAt?: string;
+  _id?: string;
+  _rev?: string;
+  _type?: string;
+  _updatedAt?: string;
+}
+
+export interface Author extends SanityBody {
+  link?: string | null;
+  bio?: string | null;
+  name?: string | null;
+  slug?: SanitySlug | null;
+  image?: string | null;
+  profile?: {
+    alt: string;
+    image: string;
+  } | null;
+}
+
+export interface Category extends SanityBody {
+  title?: string;
+}
+
+export interface Form {
+  id?: string | null;
+  buttonLabel?: string | null;
+  name?: string | null;
+  subtitle?: string | null;
+  fields?: FormFields[] | null;
+  thankYouPage?: ThankYouPage | null;
+}
+
+export interface FormFields {
+  name?: string;
+  placeholder?: string;
+  pricingType?: string;
+  type?: FormTypes;
+  _key?: string;
+  _type?: string;
+  isRequired?: boolean;
+  label?: string;
+  items?: string[];
+}
+
+export type FormTypes =
+  | "inputText"
+  | "inputEmail"
+  | "inputPassword"
+  | "inputNumber"
+  | "textarea"
+  | "inputFile"
+  | "inputRadio"
+  | "inputCheckbox"
+  | "inputSelect";
+
+export interface ThankYouPage {
+  externalLink?: string | null;
+  internalLink?: string | null;
+  linkInternal?: any;
+  linkTarget?: string;
+  linkType?: string;
+  type?: string;
+}
+
+//Used on different sections
+export interface SectionsProps {
+  template?: Template;
+  data?: Sections;
+  variant?: string | null | undefined;
+  schema?: Variants;
+}
+
+export interface Sections extends SanityBody {
+  label?: string;
+  variant?: string;
+  variants?: Variants;
+  _key?: string;
+}
+
+//*EDIT THIS SECTION WHEN CREATING/UPDATING SCHEMAS ON STUDIO */
+export interface Variants {
+  template?: Template;
+  multipleMenus?: any;
+  arrayOfTitleAndText?: ArrayOfTitleAndText[] | null;
+  logo?: Logo | null;
+  primaryButton?: LabeledRoute | null;
+  secondaryButton?: LabeledRoute | null;
+  routes?: LabeledRouteWithKey[] | null;
+  menu?: LabeledRouteWithKey[] | null;
+  plans?: Plans[] | null;
+  formLinks?: LabeledRouteWithKey[] | null;
+  portfolios?: Portfolios[] | null;
+  portfoliosWithCategories?: PortfoliosWithCategories[] | null;
+  length?: number;
+  signInLink?: LabeledRoute | null;
+  signinLink?: LabeledRoute | null;
+  tags?: string[] | null;
+  posts?: BlogPost[] | null;
+  blogsPerPage?: number | null;
+  form?: Form | null;
+  collections?: Collection | null;
+  products?: CollectionProduct | null;
+  allProducts?: Collection[];
+  subtitle?: string | null;
+  caption?: string | null;
+  title?: string | null;
+  plainText?: string | null;
+  contactDescription?: string | null;
+  officeInformation?: string | null;
+  contactEmail?: string | null;
+  contactNumber?: string | null;
+  socialLinks?: SocialLink[] | null;
+  block?: any;
+  heading?: string | null;
+  acceptButtonLabel?: string | null;
+  declineButtonLabel?: string | null;
+  faqsWithCategories?: FaqsWithCategory[] | null;
+  faqs?: AskedQuestion[] | null;
+  arrayOfImageTitleAndText?: ArrayOfImageTitleAndText[] | null;
+  description?: string | null;
+  featuredItems?: FeaturedItem[] | null;
+  images?: Images[] | null;
+  contactDetails?: ContactDetails[] | null;
+  copyright?: string | null;
+  mainImage?: MainImage | null;
+  youtubeLink?: string | null;
+  banner?: any;
+  stats?: StatItems[] | null;
+  teams?: Team[] | null;
+  testimonials?: Testimonial[] | null;
+  selectStripeAccount?: string;
+  annualBilling?: string;
+  monthlyBilling?: string;
+  productDetails?: ProductDetail[];
+  btnLabel?: string;
+  selectAccount?: string;
+  hashtags?: string[];
+  numberOfPosts?: number;
+  text?: string;
+  button?: LabeledRoute;
+  features?: string[];
+  config?: {
+    enableAnalytics: boolean;
+    cookiePolicy?: {
+      siteName: string;
+      cookiePolicyPage: Reference;
+    };
+    consentModalPosition?: string;
+  };
+  contactLink?: LabeledRoute;
+}
+
+export interface Template {
+  bg?: string;
+  color?: string;
+}
+
+export type Plans = {
+  _key?: string | null;
+  _type?: "planItems" | null;
+  checkoutButtonName?: string | null;
+  description?: string | null;
+  monthlyPrice?: string | null;
+  planType?: string | null;
+  yearlyPrice?: string | null;
+  planIncludes?: string[] | null;
+  primaryButton?: LabeledRoute | null;
+} & Record<string, string>;
+
+export interface Portfolios {
+  dateAdded?: string | null;
+  mainImage?: {
+    image?: string | null;
+    alt?: string | null;
+  } | null;
+  primaryButton?: LabeledRoute | null;
+  title?: string | null;
+  _key?: string | null;
+  _type?: string | null;
+}
+
+export interface PortfoliosWithCategories {
+  category?: string | null;
+  content?: Content[] | null;
+  primaryButton?: LabeledRoute | null;
+  _key?: string | null;
+  _type?: string | null;
+}
+
+export interface Content extends Portfolios {
+  description?: string | null;
+  subtitle?: string | null;
+}
+
+export interface Collection extends SanityBody {
+  collectionInfoVariant?: {
+    variant?: string;
+  } | null;
+  name?: string | null;
+  products?: CollectionProduct[] | null;
+  sections?: any; //todo
+  seo?: Seo | null;
+  slug?: SanitySlug | null;
+}
+
+export interface CollectionProduct extends SanityBody {
+  compareToPrice?: number | null;
+  description?: string | null;
+  ecwidProductId?: number | null;
+  name?: string | null;
+  price?: number | null;
+  productInfo?: ProductInfo | null;
+  productInfoVariant?: {
+    variant?: string;
+  } | null;
+  sections?: any; //todo
+  seo?: Seo | null;
+  slug?: SanitySlug | null;
+}
+
+//TODO, RECHECK PRODUCT INFO DATA FROM SANITY
+interface ProductInfo {
+  btnLabel?: string | null;
+  images?: ProductInfoImage[] | null;
+  productDetails?: ProductDetail[] | null;
+  socialLinks?: SocialLink[] | null;
+  subtitle?: string | null;
+}
+
+//TODO, RECHECK PRODUCT INFO DATA FROM SANITY
+export interface ProductDetail {
+  blockContent?: any;
+  contentType?: string;
+  tabName?: string;
+  _key?: string;
+  [key: string]: any;
+}
+interface ProductInfoImage {
+  alt?: string | null;
+  _key: string;
+  _type: string;
+  image?: string | null;
+}
+
+export interface FaqsWithCategory {
+  askedQuestions?: AskedQuestion[] | null;
+  category?: string | null;
+  _key?: string;
+  _type?: string;
+}
+
+export interface AskedQuestion {
+  answer?: string | null;
+  question?: string | null;
+  hidden?: boolean;
+  _key?: string;
+  _type?: string;
+}
+
+export interface Team {
+  jobTitle?: string;
+  mainImage?: MainImage;
+  name?: string;
+  plainText?: string;
+  _key?: string;
+  _type?: string;
+}
+
+export interface Testimonial {
+  jobTitle?: string;
+  mainImage?: MainImage;
+  name?: string;
+  rating?: string;
+  testimony?: string;
+  _key?: string;
+  _type?: string;
+}
+
+export declare interface Reference {
+  _type: string;
+  _ref: string;
+  _key?: string;
+  _weak?: boolean;
+  _strengthenOnPublish?: {
+    type: string;
+    weak?: boolean;
+    template?: {
+      id: string;
+      params: Record<string, string | number | boolean>;
+    };
+  };
+}

package/dist/chunk-CUE2SXLU.mjs

@@ -1 +0,0 @@
-import h from"react";import{Heading as w}from"@stackshift-ui/heading";import{Text as p}from"@stackshift-ui/text";import{Card as v}from"@stackshift-ui/card";import{Button as s}from"@stackshift-ui/button";import{Image as b}from"@stackshift-ui/image";import{Section as N}from"@stackshift-ui/section";import{Container as e}from"@stackshift-ui/container";import{Flex as F}from"@stackshift-ui/flex";import{jsx as l,jsxs as a}from"react/jsx-runtime";function k({featuredItems:o}){let[i,n]=h.useState(0);return l(N,{className:"py-20 overflow-x-auto bg-background",children:l(e,{maxWidth:1280,children:l(F,{className:"relative",children:l(d,{featuredItems:o,slider:r=>{o&&(r==="next"?i!==o.length-1?n(t=>t+1):n(0):i>=1?n(t=>t-1):n(o.length-1))},children:a("div",{className:"order-1 w-full ml-auto xl:w-4/5",children:[l(C,{featuredItems:o,item:i}),l(S,{featuredItems:o,item:i})]})})})})})}function C({featuredItems:o,item:i}){var n,x,r,t,m,c,g;return(x=(n=o==null?void 0:o[i])==null?void 0:n.mainImage)!=null&&x.image?l("div",{className:"mx-auto overflow-hidden rounded-md md:max-w-xl xl:max-w-4xl",children:l(b,{className:"relative object-cover",src:`${(t=(r=o==null?void 0:o[i])==null?void 0:r.mainImage)==null?void 0:t.image}`,sizes:"100vw",width:896,height:575,alt:(g=(c=(m=o==null?void 0:o[i])==null?void 0:m.mainImage)==null?void 0:c.alt)!=null?g:`features-image-${i}`})}):null}function S({featuredItems:o,item:i}){var n,x,r,t,m,c;return o?a(v,{className:"top-0 left-0 max-w-xl p-6 mx-auto text-center bg-white md:mt-12 md:p-10 lg:mt-12 lg:p-10 xl:absolute xl:mx-0 xl:mt-20 xl:py-24",children:[l(p,{weight:"bold",className:"text-xs lg:text-md md:text-sm xl:text-lg text-secondary",children:((n=o==null?void 0:o[i])==null?void 0:n.subtitle)&&((x=o==null?void 0:o[i])==null?void 0:x.subtitle)}),l(w,{fontSize:"3xl",children:((r=o==null?void 0:o[i])==null?void 0:r.title)&&((t=o==null?void 0:o[i])==null?void 0:t.title)}),l(p,{muted:!0,className:"text-xs leading-loose text-center md:mt-5 md:text-sm lg:mt-5 lg:text-sm",children:((m=o==null?void 0:o[i])==null?void 0:m.description)&&((c=o==null?void 0:o[i])==null?void 0:c.description)})]}):null}function d({featuredItems:o,children:i,slider:n}){return o?a(h.Fragment,{children:[l("div",{className:"absolute left-0 z-40 items-center mt-20 -mx-3 order-0 md:mt-40 lg:mt-60 xl:-mx-6 xl:flex",children:(o==null?void 0:o.length)>=2&&l(s,{as:"button",ariaLabel:"Show Previous Feature",className:"z-10 p-4 text-white ",onClick:()=>n("prev"),children:l("svg",{className:"w-4 h-4",xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",children:l("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"2",d:"M10 19l-7-7m0 0l7-7m-7 7h18"})})})}),i,l("div",{className:"absolute right-0 z-40 items-center order-2 mt-20 -mx-3 md:mt-40 lg:mt-60 xl:-mx-6 xl:flex",children:(o==null?void 0:o.length)>=2&&l(s,{as:"button",ariaLabel:"Show Next Feature",className:"p-4 text-white ",onClick:()=>n("next"),children:l("svg",{className:"w-4 h-4",xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",children:l("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"2",d:"M14 5l7 7m0 0l-7 7m7-7H3"})})})})]}):null}export{k as a};

package/dist/chunk-LXDA6H5R.mjs

@@ -1 +0,0 @@
-import{Heading as x}from"@stackshift-ui/heading";import{Text as s}from"@stackshift-ui/text";import{Button as v}from"@stackshift-ui/button";import{Image as h}from"@stackshift-ui/image";import{Section as w}from"@stackshift-ui/section";import{Container as f}from"@stackshift-ui/container";import{Flex as m}from"@stackshift-ui/flex";import{jsx as l,jsxs as i}from"react/jsx-runtime";function N({caption:e,title:a,description:t,images:n,primaryButton:o}){return l(w,{className:"py-20 bg-background",children:l(f,{maxWidth:1280,children:i(m,{wrap:!0,align:"center",children:[i(m,{direction:"col",className:"w-full mb-12 lg:mb-0 lg:w-1/2",children:[l(p,{caption:e,title:a,description:t}),l(F,{primaryButton:o})]}),l(C,{images:n})]})})})}function p({caption:e,title:a,description:t}){return i(f,{maxWidth:448,className:"ml-0",children:[e&&l(s,{weight:"bold",className:"font-bold text-secondary",children:e}),a&&l(x,{fontSize:"3xl",className:"mb-6",children:a}),t&&l(s,{muted:!0,className:"mb-6 leading-loose",children:t})]})}function F({primaryButton:e}){return e!=null&&e.label?l(v,{as:"link",link:e,ariaLabel:e==null?void 0:e.label,children:e==null?void 0:e.label}):null}function C({images:e}){var t,n,o,d;if(!e||(e==null?void 0:e.length)===0)return null;function a(c,r,g,u,b){return l("div",{className:`overflow-hidden rounded ${b}`,children:l(h,{className:"object-cover w-full h-auto",src:c,sizes:"100vw",width:g,height:u,alt:r!=null?r:"feature-image"})})}return i("div",{className:"w-full lg:w-1/2",children:[i("div",{className:"items-end mb-4 lg:flex lg:flex-wrap",children:[l("div",{className:"h-full px-3 mb-4 lg:mb-0 lg:w-2/3",children:((t=e[0])==null?void 0:t.image)&&a(e[0].image,e[0].alt,356,192,"h-[269px]")}),l("div",{className:"h-full px-3 lg:w-1/3",children:((n=e[1])==null?void 0:n.image)&&a(e[1].image,e[1].alt,166,128,"")})]}),i("div",{className:"items-start mb-4 lg:flex lg:flex-wrap",children:[l("div",{className:"h-full px-3 mb-4 lg:mb-0 lg:w-1/3",children:((o=e[2])==null?void 0:o.image)&&a(e[2].image,e[2].alt,166,128,"h-[269px] lg:h-[126px]")}),l("div",{className:"h-full px-3 lg:w-2/3",children:((d=e[3])==null?void 0:d.image)&&a(e[3].image,e[3].alt,356,192,"")})]})]})}export{N as a};