@stackshift-ui/contact 6.0.3 → 6.0.4

package/package.json

@@ -1,14 +1,15 @@
 {
   "name": "@stackshift-ui/contact",
   "description": "",
-  "version": "6.0.3",
+  "version": "6.0.4",
   "private": false,
   "sideEffects": false,
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
   "files": [
-    "dist/**"
+    "dist/**",
+    "src"
   ],
   "author": "WebriQ <info@webriq.com>",
   "devDependencies": {
@@ -34,20 +35,20 @@
   "dependencies": {
     "@portabletext/react": "^3.1.0",
     "classnames": "^2.5.1",
-    "@stackshift-ui/button": "6.0.2",
-    "@stackshift-ui/card": "6.0.2",
-    "@stackshift-ui/flex": "6.0.2",
-    "@stackshift-ui/container": "6.0.2",
-    "@stackshift-ui/form-field": "6.0.3",
-    "@stackshift-ui/heading": "6.0.2",
-    "@stackshift-ui/image": "6.0.2",
-    "@stackshift-ui/link": "6.0.2",
-    "@stackshift-ui/social-icons": "6.0.2",
-    "@stackshift-ui/section": "6.0.2",
-    "@stackshift-ui/form": "6.0.2",
-    "@stackshift-ui/text": "6.0.2",
+    "@stackshift-ui/button": "6.0.3",
+    "@stackshift-ui/card": "6.0.3",
+    "@stackshift-ui/container": "6.0.3",
+    "@stackshift-ui/flex": "6.0.3",
+    "@stackshift-ui/form": "6.0.3",
+    "@stackshift-ui/image": "6.0.3",
+    "@stackshift-ui/link": "6.0.3",
     "@stackshift-ui/scripts": "6.0.2",
-    "@stackshift-ui/system": "6.0.2"
+    "@stackshift-ui/heading": "6.0.3",
+    "@stackshift-ui/section": "6.0.3",
+    "@stackshift-ui/system": "6.0.3",
+    "@stackshift-ui/social-icons": "6.0.3",
+    "@stackshift-ui/text": "6.0.3",
+    "@stackshift-ui/form-field": "6.0.4"
   },
   "peerDependencies": {
     "@stackshift-ui/system": ">=0.0.0",

package/src/contact.test.tsx

@@ -0,0 +1,13 @@
+import { cleanup, render, screen } from "@testing-library/react";
+import { afterEach, describe, test } from "vitest";
+import { Contact } from "./contact";
+
+describe.concurrent("contact", () => {
+  afterEach(cleanup);
+
+  test.skip("Dummy test - test if renders without errors", ({ expect }) => {
+    const clx = "my-class";
+    render(<Contact />);
+    expect(screen.getByTestId("{ kebabCase name }}").classList).toContain(clx);
+  });
+});

package/src/contact.tsx

@@ -0,0 +1,40 @@
+import { lazy } from "react";
+import { SectionsProps, SocialLink, Form } from "./types";
+
+const Variants = {
+  variant_a: lazy(() => import("./contact_a")),
+  variant_b: lazy(() => import("./contact_b")),
+};
+
+export interface ContactProps {
+  title?: string;
+  contactDescription?: string;
+  officeInformation?: string;
+  contactEmail?: string;
+  contactNumber?: string;
+  socialLinks?: SocialLink[];
+  form?: Form;
+  block?: any;
+}
+
+const displayName = "Contact";
+
+export const Contact: React.FC<SectionsProps> = ({ data }) => {
+  const variant = data?.variant;
+  const Variant = variant && Variants[variant as keyof typeof Variants];
+
+  const props = {
+    title: data?.variants?.title ?? undefined,
+    contactDescription: data?.variants?.contactDescription ?? undefined,
+    officeInformation: data?.variants?.officeInformation ?? undefined,
+    contactEmail: data?.variants?.contactEmail ?? undefined,
+    contactNumber: data?.variants?.contactNumber ?? undefined,
+    socialLinks: data?.variants?.socialLinks ?? undefined,
+    form: data?.variants?.form ?? undefined,
+    block: data?.variants?.block ?? undefined,
+  };
+
+  return Variant ? <Variant {...props} /> : null;
+};
+
+Contact.displayName = displayName;

package/src/contact_a.tsx

@@ -0,0 +1,253 @@
+import { PortableText, PortableTextComponents } from "@portabletext/react";
+import { Button } from "@stackshift-ui/button";
+import { Container } from "@stackshift-ui/container";
+import { Flex } from "@stackshift-ui/flex";
+import { Form } from "@stackshift-ui/form";
+import { FormField } from "@stackshift-ui/form-field";
+import { Heading } from "@stackshift-ui/heading";
+import { Link } from "@stackshift-ui/link";
+import { Section } from "@stackshift-ui/section";
+import { SocialIcons } from "@stackshift-ui/social-icons";
+import { Text } from "@stackshift-ui/text";
+import React from "react";
+
+import { ContactProps } from ".";
+import { thankYouPageLink } from "./helper";
+import { SocialLink, Form as iForm, Socials as iSocials } from "./types";
+
+export default function Contact_A({
+  contactDescription,
+  officeInformation,
+  contactEmail,
+  contactNumber,
+  socialLinks,
+  form,
+  block,
+  title,
+}: ContactProps) {
+  return (
+    <Section className="py-20 bg-background">
+      <Container maxWidth={1280}>
+        <Flex direction="col" gap={8} justify="between" className="lg:flex-row">
+          <Flex direction="col" gap={8} className="px-10 w-full basis-1/2">
+            <ContactTitleAndDescription
+              form={form}
+              title={title}
+              contactDescription={contactDescription}
+            />
+            <OfficeInformation
+              officeInformation={officeInformation}
+              contactEmail={contactEmail}
+              contactNumber={contactNumber}
+            />
+            <SocialLinksCard socialLinks={socialLinks} />
+          </Flex>
+          <FormFields form={form} block={block} blockCustomization={blockCustomization} />
+        </Flex>
+      </Container>
+    </Section>
+  );
+}
+
+function ContactTitleAndDescription({
+  form,
+  title,
+  contactDescription,
+}: {
+  form?: iForm;
+  title?: string;
+  contactDescription?: string;
+}) {
+  return (
+    <div>
+      {(form?.name || title) && <Heading>{form?.name || title}</Heading>}
+      {contactDescription && (
+        <Text muted className="mt-5 leading-loose text-gray-700">
+          {contactDescription}
+        </Text>
+      )}
+    </div>
+  );
+}
+
+function OfficeInformation({
+  officeInformation,
+  contactEmail,
+  contactNumber,
+}: {
+  officeInformation?: string;
+  contactEmail?: string;
+  contactNumber?: string;
+}) {
+  if (!officeInformation) return null;
+
+  return (
+    <Flex gap={8} justify="between" className="flex-col w-full md:flex-row">
+      <div>
+        <Heading type="h2">{"Office"}</Heading>
+        {officeInformation && (
+          <Text className="mt-3" muted>
+            {officeInformation}
+          </Text>
+        )}
+      </div>
+      <div>
+        <Heading type="h2">{"Contacts"}</Heading>
+        <Text className="my-3" muted>
+          {contactEmail && <Link href={`mailto:${contactEmail}`}>{contactEmail}</Link>}
+        </Text>
+        <Text muted>
+          {contactNumber && <Link href={`tel:${contactNumber}`}>{contactNumber}</Link>}
+        </Text>
+      </div>
+    </Flex>
+  );
+}
+
+function SocialLinksCard({ socialLinks }: { socialLinks?: SocialLink[] }) {
+  if (!socialLinks) return null;
+  return (
+    <div className="w-full md:w-1/3 lg:w-full">
+      <Heading type="h2" fontSize="2xl" className="mb-2">
+        Socials
+      </Heading>
+      <Flex gap={4}>
+        <SocialLinks socialLinks={socialLinks} />
+      </Flex>
+    </div>
+  );
+}
+
+function SocialLinks({ socialLinks }: { socialLinks?: SocialLink[] }) {
+  if (!socialLinks) return null;
+
+  return (
+    <React.Fragment>
+      {socialLinks?.map(social => (
+        <Link
+          aria-label={social?.socialMedia || social?.socialMediaPlatform || ""}
+          className="inline-block mr-4 rounded hover:bg-gray-100"
+          target="_blank"
+          rel="noopener noreferrer"
+          href={social?.socialMediaLink ?? "/page-not-found"}
+          key={social?._key}>
+          {social?.socialMediaLink && <SocialIcons social={social.socialMedia as iSocials} />}
+        </Link>
+      ))}
+    </React.Fragment>
+  );
+}
+
+function FormFields({
+  form,
+  block,
+  blockCustomization,
+}: {
+  form?: iForm;
+  block: any;
+  blockCustomization: PortableTextComponents;
+}) {
+  if (!form) return null;
+
+  return (
+    <div className="w-full px-5 sm:px-10 lg:w-1/2 lg:px-0 lg:pl-10 lg:pt-10">
+      {form?.fields && (
+        <Form
+          id={form?.id ?? undefined}
+          name="Contact-VariantA-Form"
+          className="lg:mx-auto lg:max-w-md text-xs space-y-3 font-semibold"
+          thankyouPage={thankYouPageLink(form?.thankYouPage)}>
+          {form?.fields?.map((formFields, index) => (
+            <div key={index}>
+              {formFields?.type === "inputCheckbox" ? (
+                <FormField
+                  noLabel
+                  name={formFields?.name ?? ""}
+                  placeholder={formFields?.placeholder}
+                  required={formFields?.isRequired}
+                  {...formFields}
+                />
+              ) : (
+                <FormField
+                  noLabel
+                  variant="primary"
+                  name={formFields?.name ?? ""}
+                  placeholder={formFields?.name}
+                  required={formFields?.isRequired}
+                  {...formFields}
+                />
+              )}
+            </div>
+          ))}
+          <div className="items-center sm:flex sm:justify-between">
+            {block && (
+              <div className="inline-flex mt-2">
+                <input
+                  aria-label="Agree to terms"
+                  className="mt-1 mr-2"
+                  type="checkbox"
+                  id="terms"
+                  name="terms"
+                  defaultValue={1}
+                  required
+                />
+                <span className="text-sm text-gray-500 font-semibold">
+                  <PortableText
+                    value={block}
+                    components={blockCustomization}
+                    onMissingComponent={false} // Disabling warnings / handling unknown types
+                  />
+                </span>
+              </div>
+            )}
+            <div>
+              <div className="webriq-recaptcha" />
+            </div>
+            {form?.buttonLabel && (
+              <Button
+                as="button"
+                ariaLabel={form?.buttonLabel ?? "Contact form submit button"}
+                className="inline-block px-6 py-2 mt-5 font-bold leading-loose text-white transition duration-200 rounded-global bg-primary hover:bg-primary-foreground sm:mt-0"
+                type="submit">
+                {form?.buttonLabel}
+              </Button>
+            )}
+          </div>
+        </Form>
+      )}
+    </div>
+  );
+}
+
+// block styling as props to `components` of the PortableText component
+const blockCustomization: PortableTextComponents = {
+  marks: {
+    internalLink: ({ children, value }) => (
+      <Link
+        aria-label={value.href ?? "internal link"}
+        style={{ color: "red" }}
+        href={value.slug.current}>
+        {children}
+      </Link>
+    ),
+    link: ({ children, value }) =>
+      value.blank ? (
+        <Link
+          aria-label={value.href ?? "external link"}
+          href={value.href}
+          target="_blank"
+          rel="noopener noreferrer">
+          {children}
+        </Link>
+      ) : (
+        <Link
+          aria-label={value.href ?? "external link"}
+          style={{ color: "blue" }}
+          href={value.href}>
+          {children}
+        </Link>
+      ),
+  },
+};
+
+export { Contact_A };

package/src/contact_b.tsx

@@ -0,0 +1,149 @@
+import { Card } from "@stackshift-ui/card";
+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 { Link } from "@stackshift-ui/link";
+import { Section } from "@stackshift-ui/section";
+import { SocialIcons } from "@stackshift-ui/social-icons";
+import { Text } from "@stackshift-ui/text";
+import React from "react";
+import { ContactProps } from ".";
+import { Socials } from "./types";
+
+export default function Contact_B({
+  title,
+  contactDescription,
+  officeInformation,
+  contactNumber,
+  contactEmail,
+  socialLinks,
+}: ContactProps) {
+  return (
+    <Section className="py-20 bg-background">
+      <Container maxWidth={1280}>
+        <ContactHeader title={title} description={contactDescription} />
+        <Container maxWidth={960}>
+          <ContactDetails
+            officeInformation={officeInformation}
+            contactNumber={contactNumber}
+            contactEmail={contactEmail}
+            socialLinks={socialLinks}
+          />
+        </Container>
+      </Container>
+    </Section>
+  );
+}
+
+function ContactHeader({ title, description }: { title?: string; description?: string }) {
+  return (
+    <div className="mb-16 text-center">
+      {title ? (
+        <Heading type="h1" fontSize="3xl">
+          {title}
+        </Heading>
+      ) : null}
+      {description ? <Text muted>{description}</Text> : null}
+    </div>
+  );
+}
+
+function ContactDetails({
+  officeInformation,
+  contactEmail,
+  contactNumber,
+  socialLinks,
+}: {
+  officeInformation?: string;
+  contactEmail?: string;
+  contactNumber?: string;
+  socialLinks?: any;
+}) {
+  return (
+    <Flex className="flex-col lg:flex-row" gap={4} justify="between" align="stretch">
+      {officeInformation ? <OfficeInformationCard officeInformation={officeInformation} /> : null}
+
+      {contactEmail || contactNumber ? (
+        <ContactsCard contactEmail={contactEmail} contactNumber={contactNumber} />
+      ) : null}
+
+      {socialLinks ? <SocialLinksCard socialLinks={socialLinks} /> : null}
+    </Flex>
+  );
+}
+
+function OfficeInformationCard({ officeInformation }: { officeInformation: string }) {
+  return (
+    <Card className="w-full p-12 text-center bg-white md:p-16 lg:p-20">
+      <Heading type="h2" fontSize="2xl" className="mb-16">
+        Office
+      </Heading>
+      <Text muted>{officeInformation}</Text>
+    </Card>
+  );
+}
+
+function ContactsCard({
+  contactEmail,
+  contactNumber,
+}: {
+  contactEmail?: string;
+  contactNumber?: string;
+}) {
+  return (
+    <Card className="w-full p-12 bg-white md:p-16 lg:p-20 text-center">
+      <Heading type="h2" fontSize="2xl" className="mb-16 ">
+        Contacts
+      </Heading>
+      <Text className="mb-2" muted>
+        {contactEmail ? <Link href={`mailto:${contactEmail}`}>{contactEmail}</Link> : null}
+      </Text>
+      <Text muted>
+        {contactNumber ? <Link href={`tel:${contactNumber}`}>{contactNumber}</Link> : null}
+      </Text>
+    </Card>
+  );
+}
+
+function SocialLinksCard({ socialLinks }: any) {
+  return (
+    <Card className="w-full p-12 text-center bg-white md:p-16 lg:p-20">
+      <Heading className="mb-16" fontSize="2xl" type="h2">
+        Socials
+      </Heading>
+      <Flex justify="center">
+        <SocialLinks socialLinks={socialLinks} />
+      </Flex>
+    </Card>
+  );
+}
+
+function SocialLinks({ socialLinks }: any) {
+  return (
+    <React.Fragment>
+      {socialLinks?.map((social: any) => (
+        <Link
+          aria-label={social?.socialMedia || social?.socialMediaPlatform}
+          className="inline-block mr-4"
+          target="_blank"
+          rel="noopener noreferrer"
+          href={social?.socialMediaLink}
+          key={social?._key}>
+          {social?.socialMediaIcon?.image ? (
+            <Image
+              src={social?.socialMediaIcon?.image}
+              width={24}
+              height={24}
+              alt={social?.socialMediaIcon?.alt ?? "contact-socialMedia-icon"}
+            />
+          ) : (
+            <SocialIcons social={social.socialMedia as Socials} />
+          )}
+        </Link>
+      ))}
+    </React.Fragment>
+  );
+}
+
+export { Contact_B };

package/src/helper/index.ts

@@ -0,0 +1,12 @@
+// WebriQ form redirect thank you page on successful submission
+export const thankYouPageLink = (link: any) => {
+  if (!link) {
+    return "/thank-you";
+  } else {
+    if (link?.linkType === "linkInternal") {
+      return `/${link?.internalLink}`;
+    } else {
+      return link?.externalLink;
+    }
+  }
+};

package/src/index.ts

@@ -0,0 +1,6 @@
+"use client";
+
+// component exports
+export * from "./contact";
+export * from "./contact_a";
+export * from "./contact_b";

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>;
+    };
+  };
+}