@stackshift-ui/header 6.0.3 → 6.0.5

package/package.json

@@ -1,14 +1,15 @@
 {
   "name": "@stackshift-ui/header",
   "description": "",
-  "version": "6.0.3",
+  "version": "6.0.5",
   "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": {
@@ -28,20 +29,20 @@
     "typescript": "^5.6.2",
     "vite-tsconfig-paths": "^5.0.1",
     "vitest": "^2.1.1",
-    "@stackshift-ui/typescript-config": "6.0.2",
-    "@stackshift-ui/eslint-config": "6.0.2"
+    "@stackshift-ui/eslint-config": "6.0.2",
+    "@stackshift-ui/typescript-config": "6.0.2"
   },
   "dependencies": {
-    "@stackshift-ui/text": "6.0.2",
     "@stackshift-ui/scripts": "6.0.2",
-    "@stackshift-ui/system": "6.0.2",
-    "@stackshift-ui/button": "6.0.2",
-    "@stackshift-ui/signin-signup": "6.0.2",
-    "@stackshift-ui/image": "6.0.2",
-    "@stackshift-ui/flex": "6.0.2",
-    "@stackshift-ui/container": "6.0.2",
-    "@stackshift-ui/heading": "6.0.2",
-    "@stackshift-ui/section": "6.0.2"
+    "@stackshift-ui/system": "6.0.3",
+    "@stackshift-ui/text": "6.0.3",
+    "@stackshift-ui/button": "6.0.3",
+    "@stackshift-ui/heading": "6.0.3",
+    "@stackshift-ui/signin-signup": "6.0.4",
+    "@stackshift-ui/section": "6.0.3",
+    "@stackshift-ui/flex": "6.0.3",
+    "@stackshift-ui/container": "6.0.3",
+    "@stackshift-ui/image": "6.0.3"
   },
   "peerDependencies": {
     "@types/react": "16.8 - 19",

package/src/header.test.tsx

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

package/src/header.tsx

@@ -0,0 +1,58 @@
+import { lazy } from "react";
+
+import { SectionsProps, Images, MainImage, LabeledRouteWithKey, Form, Template } from "./types";
+
+const Variants = {
+  variant_a: lazy(() => import("./header_a")),
+  variant_b: lazy(() => import("./header_b")),
+  variant_c: lazy(() => import("./header_c")),
+  variant_d: lazy(() => import("./header_d")),
+  variant_e: lazy(() => import("./header_e")),
+};
+
+export interface ButtonProps {
+  as?: string;
+  label?: string;
+  link?: {
+    target?: string;
+    route?: string;
+  };
+  ariaLabel?: string;
+  variant?: string;
+}
+
+export interface HeaderProps {
+  template?: Template;
+  mainImage?: MainImage;
+  images?: Images[];
+  title?: string;
+  description?: string;
+  primaryButton?: ButtonProps;
+  secondaryButton?: ButtonProps;
+  videoLink?: string;
+  formLinks?: LabeledRouteWithKey[];
+  form?: Form;
+}
+
+const displayName = "Header";
+
+export const Header: React.FC<SectionsProps> = ({ data }) => {
+  const variant = data?.variant;
+  const Variant = variant && Variants[variant as keyof typeof Variants];
+
+  const props = {
+    mainImage: data?.variants?.mainImage ?? undefined,
+    images: data?.variants?.images ?? undefined,
+    title: data?.variants?.title ?? undefined,
+    description: data?.variants?.description ?? undefined,
+    primaryButton: data?.variants?.primaryButton ?? undefined,
+    secondaryButton: data?.variants?.secondaryButton ?? undefined,
+    videoLink: data?.variants?.youtubeLink ?? undefined,
+    formLinks: data?.variants?.formLinks ?? undefined,
+    form: data?.variants?.form ?? undefined,
+  };
+
+  return Variant ? <Variant {...props} /> : null;
+};
+
+Header.displayName = displayName;

package/src/header_a.tsx

@@ -0,0 +1,168 @@
+import { Button } from "@stackshift-ui/button";
+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 { ButtonProps, HeaderProps } from ".";
+
+export default function Header_A({
+  mainImage,
+  title,
+  description,
+  primaryButton,
+  secondaryButton,
+}: HeaderProps) {
+  return (
+    <Section className="py-20 bg-background">
+      <Container maxWidth={1280}>
+        <Flex align="center" gap={4} className="flex-col lg:flex-row">
+          <Flex align="center" direction="col" className="w-full basis-1/2">
+            <div className="max-w-md mx-auto text-center lg:text-left">
+              <TitleAndDescription title={title} description={description} />
+              <Buttons primaryButton={primaryButton} secondaryButton={secondaryButton} />
+            </div>
+          </Flex>
+          <MainImage mainImage={mainImage} />
+        </Flex>
+      </Container>
+    </Section>
+  );
+}
+
+function TitleAndDescription({ title, description }: { title?: string; description?: string }) {
+  return (
+    <React.Fragment>
+      {title && (
+        <Heading fontSize="3xl" className="mb-3">
+          {title}
+        </Heading>
+      )}
+      {description && (
+        <Text muted className="my-6">
+          {description}
+        </Text>
+      )}
+    </React.Fragment>
+  );
+}
+
+function Buttons({
+  primaryButton,
+  secondaryButton,
+}: {
+  primaryButton?: ButtonProps;
+  secondaryButton?: ButtonProps;
+}) {
+  return (
+    <Flex
+      align="center"
+      justify="center"
+      gap={2}
+      direction="col"
+      className="lg:justify-start md:flex-row">
+      {primaryButton?.label && (
+        <Button as="link" link={primaryButton} ariaLabel={primaryButton?.label}>
+          {primaryButton?.label}
+        </Button>
+      )}
+      {secondaryButton?.label && (
+        <Button
+          as="link"
+          link={secondaryButton}
+          className="bg-secondary hover:bg-secondary/50 inline-block rounded-global font-bold transition duration-200 px-3 py-4"
+          ariaLabel={secondaryButton?.label}>
+          {secondaryButton?.label}
+        </Button>
+      )}
+    </Flex>
+  );
+}
+
+interface MainImageProps {
+  mainImage?: {
+    image?: string | any;
+    alt?: string;
+  };
+}
+
+function MainImage({ mainImage }: MainImageProps) {
+  if (!mainImage?.image) return null;
+
+  return (
+    <div className="relative w-full max-w-md">
+      <Image
+        className="overflow-hidden rounded-global object-cover md:rounded-br-none lg:h-[448px] relative z-10"
+        src={`${mainImage.image}`}
+        sizes="(min-width: 520px) 448px, 90vw"
+        width={448}
+        height={448}
+        alt={mainImage.alt ?? "header-main-image"}
+      />
+      <DecorativeImages />
+    </div>
+  );
+}
+
+function DecorativeImages() {
+  return (
+    <>
+      <ImageElement
+        src="/assets/elements/webriq-blue-dark-up.png"
+        alt="webriq-blue-dark-up-mainImage-element"
+        className="absolute hidden md:block"
+        style={{ top: "-2rem", right: "3rem", zIndex: 2 }}
+        width={112}
+        height={112}
+      />
+      <ImageElement
+        src="/assets/elements/wing-webriq-blue-down.png"
+        alt="wing-webriq-blue-down-mainImage-element"
+        className="absolute hidden md:block"
+        style={{ bottom: "-2rem", right: "-2rem", zIndex: 2 }}
+        width={144}
+        height={144}
+      />
+      <ImageElement
+        src="/assets/elements/bullets-gray-right.svg"
+        alt="bullets-gray-right-mainImage-element"
+        className="absolute hidden md:block"
+        style={{ top: "3rem", right: "-3rem", zIndex: 2 }}
+        width={115}
+        height={157}
+      />
+      <ImageElement
+        src="/assets/elements/bullets-gray-left.svg"
+        alt="bullets-gray-left-mainImage-element"
+        className="absolute hidden md:block"
+        style={{ bottom: "2.5rem", left: "-4.5rem", zIndex: 2 }}
+        width={157}
+        height={115}
+      />
+    </>
+  );
+}
+
+function ImageElement({
+  src,
+  alt,
+  className,
+  style,
+  width,
+  height,
+}: {
+  src: string;
+  alt: string;
+  className?: string;
+  style?: React.CSSProperties;
+  width: number;
+  height: number;
+}) {
+  return (
+    <Image src={src} alt={alt} className={className} style={style} width={width} height={height} />
+  );
+}
+
+export { Header_A };

package/src/header_b.tsx

@@ -0,0 +1,136 @@
+import { Button } from "@stackshift-ui/button";
+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 { ButtonProps, HeaderProps } from ".";
+import { Images } from "./types";
+
+export default function Header_B({
+  images,
+  title,
+  description,
+  primaryButton,
+  secondaryButton,
+}: HeaderProps) {
+  return (
+    <Section className="relative z-10 py-20 bg-background">
+      <Container maxWidth={1280}>
+        <Flex align="center" direction="col" gap={4} className="lg:flex-row">
+          <Flex align="center" direction="col" className="w-full basis-1/2">
+            <div className="max-w-md mx-auto text-center lg:text-left">
+              <TitleAndDescription title={title} description={description} />
+              <Buttons primaryButton={primaryButton} secondaryButton={secondaryButton} />
+            </div>
+          </Flex>
+          {images && <ImageGallery images={images} />}
+        </Flex>
+      </Container>
+    </Section>
+  );
+}
+
+function TitleAndDescription({ title, description }: { title?: string; description?: string }) {
+  return (
+    <React.Fragment>
+      {title && (
+        <Heading fontSize="3xl" className="mb-3">
+          {title}
+        </Heading>
+      )}
+      {description && (
+        <Text muted className="my-6">
+          {description}
+        </Text>
+      )}
+    </React.Fragment>
+  );
+}
+
+function Buttons({
+  primaryButton,
+  secondaryButton,
+}: {
+  primaryButton?: ButtonProps;
+  secondaryButton?: ButtonProps;
+}) {
+  return (
+    <Flex
+      align="center"
+      gap={2}
+      className="flex items-center justify-center lg:justify-start gap-2 flex-col md:flex-row">
+      {primaryButton?.label && (
+        <Button as="link" link={primaryButton} ariaLabel={primaryButton?.label}>
+          {primaryButton?.label}
+        </Button>
+      )}
+      {secondaryButton?.label && (
+        <Button
+          as="link"
+          link={secondaryButton}
+          className="bg-secondary hover:bg-secondary/50 inline-block rounded-global font-bold transition duration-200 px-6 py-3"
+          ariaLabel={secondaryButton?.label}>
+          {secondaryButton?.label}
+        </Button>
+      )}
+    </Flex>
+  );
+}
+
+function ImageGallery({ images }: { images: Images[] }) {
+  if (!images) return null;
+
+  return (
+    <div className="w-full px-4 lg:w-1/2">
+      <div className="mb-3 sm:flex lg:mb-4 lg:ml-6">
+        {images?.[0]?.image && (
+          <Image
+            className="relative object-cover mb-3 mr-2 overflow-hidden rounded-xl sm:mb-0 sm:w-1/3 md:rounded-3xl lg:rounded-br-none"
+            sizes="100vw"
+            src={`${images?.[0]?.image}`}
+            width={941}
+            height={734}
+            alt={images?.[0]?.alt ?? "header-image-1"}
+          />
+        )}
+        {images?.[1]?.image && (
+          <Image
+            className="relative object-cover overflow-hidden rounded-xl sm:ml-2 sm:w-2/3 md:rounded-3xl lg:rounded-bl-none"
+            sizes="100vw"
+            src={`${images?.[1]?.image}`}
+            width={1050}
+            height={701}
+            alt={images?.[1]?.alt ?? "header-image-2"}
+          />
+        )}
+      </div>
+      <div className="mb-3 sm:flex lg:mb-4 lg:mr-6">
+        {images?.[2]?.image && (
+          <Image
+            className="object-cover mb-3 mr-2 overflow-hidden rounded-xl sm:w-2/3 md:mb-0 md:rounded-3xl lg:rounded-br-none"
+            sizes="100vw"
+            src={`${images?.[2]?.image}`}
+            width={1050}
+            height={701}
+            alt={images?.[2]?.alt ?? "header-image-3"}
+          />
+        )}
+        {images?.[3]?.image && (
+          <Image
+            className="object-cover overflow-hidden rounded-xl sm:ml-2 sm:w-1/3 md:rounded-3xl lg:rounded-bl-none"
+            sizes="100vw"
+            src={`${images?.[3]?.image}`}
+            width={941}
+            height={734}
+            alt={images?.[3]?.alt ?? "header-image-4"}
+          />
+        )}
+      </div>
+    </div>
+  );
+}
+
+export { Header_B };

package/src/header_c.tsx

@@ -0,0 +1,87 @@
+import { Button } from "@stackshift-ui/button";
+import { Container } from "@stackshift-ui/container";
+import { Flex } from "@stackshift-ui/flex";
+import { Heading } from "@stackshift-ui/heading";
+import { Section } from "@stackshift-ui/section";
+import { ButtonProps, HeaderProps } from ".";
+
+export default function Header_C({
+  videoLink,
+  title,
+  primaryButton,
+  secondaryButton,
+}: HeaderProps) {
+  // get the video link ID
+  let videoLinkId;
+
+  if (videoLink) {
+    if (videoLink.includes("embed")) {
+      videoLinkId = videoLink.split("/")[4];
+    } else {
+      videoLinkId = videoLink.split("/watch?v=")[1] || videoLink.split("/")[3];
+    }
+  }
+
+  return (
+    <Section className="py-20 md:py-52 bg-background">
+      <Container maxWidth={1280}>
+        <div className="max-w-2xl mx-auto mb-12 text-center md:mb-20">
+          {title && (
+            <Heading fontSize="3xl" className="mb-10">
+              {title}
+            </Heading>
+          )}
+          <Buttons primaryButton={primaryButton} secondaryButton={secondaryButton} />
+        </div>
+        <div className="md:mx-20 lg:mx-60 xl:mx-60">
+          {videoLinkId && <VideoPlayer videoLinkId={videoLinkId} title={title} />}
+        </div>
+      </Container>
+    </Section>
+  );
+}
+
+function VideoPlayer({ videoLinkId, title }: { videoLinkId?: string; title?: string }) {
+  return (
+    <div className="aspect-video">
+      <iframe
+        aria-label="Show Video Frame"
+        className="w-full h-full border-4 rounded-3xl border-primary"
+        src={`https://www.youtube.com/embed/${videoLinkId}`}
+        srcDoc={`<style>*{padding:0;margin:0;overflow:hidden;border-radius:24px}html,body{height:100%}img,span{position:absolute;width:100%;top:0;bottom:0;margin:auto}span{height:1.5em;text-align:center;font:48px/1.5 sans-serif;color:white;text-shadow:0 0 0.5em black}</style><a href=${`https://www.youtube.com/embed/${videoLinkId}`}><img src=${`https://i.ytimg.com/vi_webp/${videoLinkId}/maxresdefault.webp`} alt=${title} loading="lazy" /><span>▶</span></a>`}
+        loading="lazy"
+        allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
+        allowFullScreen
+      />
+    </div>
+  );
+}
+
+function Buttons({
+  primaryButton,
+  secondaryButton,
+}: {
+  primaryButton?: ButtonProps;
+  secondaryButton?: ButtonProps;
+}) {
+  return (
+    <Flex align="center" gap={4} justify="center" className="flex-col lg:flex-row">
+      {primaryButton?.label && (
+        <Button as="link" ariaLabel={primaryButton?.label} link={primaryButton}>
+          {primaryButton?.label}
+        </Button>
+      )}
+      {secondaryButton?.label && (
+        <Button
+          as="link"
+          ariaLabel={secondaryButton?.label}
+          link={secondaryButton}
+          className="bg-secondary hover:bg-secondary/50 inline-block rounded-global font-bold transition duration-200 px-3 py-4">
+          {secondaryButton?.label}
+        </Button>
+      )}
+    </Flex>
+  );
+}
+
+export { Header_C };

package/src/header_d.tsx

@@ -0,0 +1,113 @@
+import { Button } from "@stackshift-ui/button";
+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 { ButtonProps, HeaderProps } from ".";
+
+export default function Header_D({
+  title,
+  description,
+  primaryButton,
+  secondaryButton,
+  mainImage,
+}: HeaderProps): JSX.Element {
+  return (
+    <Section className="py-20 bg-background">
+      <Container maxWidth={1280}>
+        <Flex align="center" className="flex-col lg:flex-row" gap={4}>
+          <Flex align="center" className="w-full basis-1/2" direction="col">
+            <Container className="mx-auto items-center text-center lg:text-left" maxWidth="md">
+              <TitleAndDescription title={title} description={description} />
+              <Buttons primaryButton={primaryButton} secondaryButton={secondaryButton} />
+            </Container>
+          </Flex>
+          <MainImage mainImage={mainImage} />
+        </Flex>
+      </Container>
+    </Section>
+  );
+}
+
+function TitleAndDescription({ title, description }: { title?: string; description?: string }) {
+  return (
+    <React.Fragment>
+      {title ? (
+        <Heading fontSize="3xl" className="mb-3" type="h1">
+          {title}
+        </Heading>
+      ) : null}
+      {description ? (
+        <Text className="my-6" muted>
+          {description}
+        </Text>
+      ) : null}
+    </React.Fragment>
+  );
+}
+
+function Buttons({
+  primaryButton,
+  secondaryButton,
+}: {
+  primaryButton?: ButtonProps;
+  secondaryButton?: ButtonProps;
+}) {
+  return (
+    <Flex
+      align="center"
+      className="flex items-center justify-center lg:justify-start gap-2 flex-col md:flex-row"
+      gap={2}>
+      {primaryButton?.label ? (
+        <Button
+          as="link"
+          link={primaryButton}
+          ariaLabel={primaryButton?.ariaLabel ?? primaryButton?.label}
+          variant="solid"
+          className="bg-primary hover:bg-primary/50 rounded-global px-6 py-3 text-white">
+          {primaryButton.label}
+        </Button>
+      ) : null}
+      {secondaryButton?.label ? (
+        <Button
+          as="link"
+          link={secondaryButton}
+          ariaLabel={secondaryButton.ariaLabel ?? secondaryButton?.label}
+          variant="solid"
+          className="bg-secondary hover:bg-secondary/50 rounded-global px-6 py-3">
+          {secondaryButton.label}
+        </Button>
+      ) : null}
+    </Flex>
+  );
+}
+
+interface MainImageProps {
+  mainImage?: {
+    image?: string | any;
+    alt?: string;
+  };
+}
+
+function MainImage({ mainImage }: MainImageProps) {
+  if (!mainImage?.image) return null;
+
+  return (
+    <div className="w-full h-full">
+      <Image
+        alt={mainImage.alt ?? "header-main-image"}
+        className="rounded-global"
+        height={700}
+        sizes="100vw"
+        src={`${mainImage?.image}`}
+        style={{ objectFit: "contain" }}
+        width={1050}
+      />
+    </div>
+  );
+}
+
+export { Header_D };

package/src/header_e.tsx

@@ -0,0 +1,84 @@
+import { Button } from "@stackshift-ui/button";
+import { Container } from "@stackshift-ui/container";
+import { Flex } from "@stackshift-ui/flex";
+import { Heading } from "@stackshift-ui/heading";
+import { Section } from "@stackshift-ui/section";
+import { SigninSignup_A } from "@stackshift-ui/signin-signup";
+import { Text } from "@stackshift-ui/text";
+import React from "react";
+import { ButtonProps, HeaderProps } from ".";
+
+export default function Header_E({
+  title,
+  description,
+  primaryButton,
+  secondaryButton,
+  formLinks,
+  form,
+}: HeaderProps) {
+  return (
+    <Section className="relative py-20 bg-background">
+      <Container maxWidth={1280}>
+        <Flex align="center" className="flex-col lg:flex-row" gap={4}>
+          <Flex align="center" direction="col" className="w-full basis-1/2">
+            <div className="max-w-md mx-auto text-center lg:text-left">
+              <TitleAndDescription title={title} description={description} />
+              <Buttons primaryButton={primaryButton} secondaryButton={secondaryButton} />
+            </div>
+          </Flex>
+          <div className="w-full lg:w-1/2">
+            <div className="max-w-sm mx-auto text-center">
+              <SigninSignup_A form={form} formLinks={formLinks} />
+            </div>
+          </div>
+        </Flex>
+      </Container>
+    </Section>
+  );
+}
+
+function TitleAndDescription({ title, description }: { title?: string; description?: string }) {
+  return (
+    <React.Fragment>
+      {title && (
+        <Heading fontSize="3xl" className="mb-3">
+          {title}
+        </Heading>
+      )}
+      {description && (
+        <Text muted className="my-6">
+          {description}
+        </Text>
+      )}
+    </React.Fragment>
+  );
+}
+
+function Buttons({
+  primaryButton,
+  secondaryButton,
+}: {
+  primaryButton?: ButtonProps;
+  secondaryButton?: ButtonProps;
+}) {
+  return (
+    <Flex align="center" gap={2} className="flex-col md:flex-row justify-center lg:justify-start">
+      {primaryButton?.label && (
+        <Button as="link" link={primaryButton} ariaLabel={primaryButton?.label}>
+          {primaryButton?.label}
+        </Button>
+      )}
+      {secondaryButton?.label && (
+        <Button
+          as="link"
+          link={secondaryButton}
+          className="bg-secondary hover:bg-secondary/50 inline-block rounded-global font-bold transition duration-200 px-6 py-3"
+          ariaLabel={secondaryButton?.label}>
+          {secondaryButton?.label}
+        </Button>
+      )}
+    </Flex>
+  );
+}
+
+export { Header_E };

package/src/index.ts

@@ -0,0 +1,9 @@
+"use client";
+
+// component exports
+export * from "./header";
+export * from "./header_a";
+export * from "./header_b";
+export * from "./header_c";
+export * from "./header_d";
+export * from "./header_e";

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