@ttoss/landing-pages 0.0.2 → 0.1.1

package/README.md

@@ -14,4 +14,4 @@ TODO
 
 ## Components
 
-You can check all the components of the library `@ttoss/ui` on the [Storybook](https://storybook.ttoss.dev/?path=/story/landing-pages).
+You can check all the components of the library `@ttoss/landing-pages` on the [Storybook](https://storybook.ttoss.dev/?path=/story/landing-pages).

package/dist/esm/index.js

@@ -4,15 +4,167 @@
 import * as React from "react";
 
 // src/Hero/Hero.tsx
-import { Box } from "@ttoss/ui";
-import { jsx } from "react/jsx-runtime";
-var Hero = () => {
-  return /* @__PURE__ */ jsx(Box, {
-    children: /* @__PURE__ */ jsx("h1", {
-      children: "Hero"
+import { Button, Flex, Heading, Image, Text } from "@ttoss/ui";
+import { jsx, jsxs } from "react/jsx-runtime";
+var Hero = ({
+  alignment,
+  headerText,
+  subHeaderText,
+  imageSrc,
+  imageAlt,
+  ctaLabel
+}) => {
+  const isCentered = alignment === "center";
+  return /* @__PURE__ */ jsxs(Flex, {
+    sx: {
+      justifyContent: "space-between",
+      paddingY: "10vh",
+      paddingX: "186px"
+    },
+    children: [
+      /* @__PURE__ */ jsxs(Flex, {
+        sx: {
+          flexDirection: "column",
+          alignItems: isCentered ? "center" : "start",
+          backgroundImage: isCentered ? `url(${imageSrc})` : void 0,
+          width: isCentered ? "100%" : void 0,
+          minHeight: isCentered ? "80vh" : void 0,
+          justifyContent: isCentered ? "center" : void 0
+        },
+        children: [
+          /* @__PURE__ */ jsx(Heading, {
+            sx: { fontSize: "48px", color: isCentered ? "white" : void 0 },
+            as: "h1",
+            children: headerText
+          }),
+          /* @__PURE__ */ jsx(Text, {
+            sx: {
+              fontSize: "24px",
+              color: isCentered ? "white" : void 0,
+              marginTop: "54px",
+              marginBottom: "71px"
+            },
+            as: "h2",
+            children: subHeaderText
+          }),
+          /* @__PURE__ */ jsx(Button, {
+            sx: {
+              background: isCentered ? "white" : "black",
+              color: isCentered ? "black" : void 0,
+              borderRadius: "10px",
+              fontSize: "16px"
+            },
+            children: ctaLabel
+          })
+        ]
+      }),
+      !isCentered && /* @__PURE__ */ jsx(Flex, {
+        children: /* @__PURE__ */ jsx(Image, {
+          sx: {
+            maxWidth: "60vw",
+            maxHeight: "623px"
+          },
+          src: imageSrc,
+          alt: imageAlt
+        })
+      })
+    ]
+  });
+};
+
+// src/HeroCarousel/HeroCarousel.tsx
+import { Box, Flex as Flex2, Image as Image2 } from "@ttoss/ui";
+import { Icon } from "@iconify/react";
+import React2 from "react";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var HeroCarousel = ({ images = [] }) => {
+  const [selectedImage, setSelectedImage] = React2.useState(images[0].id);
+  const handleRight = () => {
+    const currentIndex = images.findIndex((item) => item.id === selectedImage);
+    const isLast = currentIndex === images.length - 1;
+    if (isLast) {
+      return setSelectedImage(images[0].id);
+    }
+    setSelectedImage(images[currentIndex + 1].id);
+  };
+  const handleLeft = () => {
+    const currentIndex = images.findIndex((item) => item.id === selectedImage);
+    const isFirst = currentIndex === 0;
+    if (isFirst) {
+      return setSelectedImage(images[images.length - 1].id);
+    }
+    setSelectedImage(images[currentIndex - 1].id);
+  };
+  const image = React2.useMemo(() => {
+    const result = images.find((item) => item.id === selectedImage);
+    return result;
+  }, [selectedImage, images]);
+  return /* @__PURE__ */ jsx2(Flex2, {
+    sx: { width: "100%", height: "100%", maxHeight: "70vh", paddingX: 5 },
+    children: /* @__PURE__ */ jsxs2(Flex2, {
+      sx: {
+        width: "100%",
+        height: "50vw",
+        position: "relative",
+        flexDirection: "column"
+      },
+      children: [
+        /* @__PURE__ */ jsxs2(Flex2, {
+          sx: { height: "100%", alignItems: "center", gap: 3 },
+          children: [
+            /* @__PURE__ */ jsx2(Flex2, {
+              sx: {
+                cursor: "pointer",
+                height: "100%",
+                alignItems: "center"
+              },
+              onClick: handleLeft,
+              children: /* @__PURE__ */ jsx2(Icon, {
+                icon: "akar-icons:chevron-left"
+              })
+            }),
+            image && /* @__PURE__ */ jsx2(Image2, {
+              sx: { height: "100%", width: "100%" },
+              src: image.src
+            }),
+            /* @__PURE__ */ jsx2(Flex2, {
+              sx: {
+                cursor: "pointer",
+                height: "100%",
+                alignItems: "center"
+              },
+              onClick: handleRight,
+              children: /* @__PURE__ */ jsx2(Icon, {
+                icon: "akar-icons:chevron-right"
+              })
+            })
+          ]
+        }),
+        /* @__PURE__ */ jsx2(Flex2, {
+          sx: {
+            marginTop: 2,
+            alignSelf: "center",
+            gap: 3
+          },
+          children: images.map((image2) => {
+            return /* @__PURE__ */ jsx2(Box, {
+              role: "button",
+              onClick: () => setSelectedImage(image2.id),
+              sx: {
+                background: image2.id === selectedImage ? "gray" : "black",
+                width: 10,
+                height: 10,
+                borderRadius: "50%",
+                cursor: "pointer"
+              }
+            }, image2.id);
+          })
+        })
+      ]
     })
   });
 };
 export {
-  Hero
+  Hero,
+  HeroCarousel
 };

package/dist/index.d.ts

@@ -1,3 +1,20 @@
-declare const Hero: () => JSX.Element;
+declare type HeroProps = {
+    headerText: string;
+    subHeaderText: string;
+    alignment: 'left' | 'center';
+    imageSrc: string;
+    imageAlt?: string;
+    ctaLabel?: string;
+};
+declare const Hero: ({ alignment, headerText, subHeaderText, imageSrc, imageAlt, ctaLabel, }: HeroProps) => JSX.Element;
 
-export { Hero };
+declare type HeroCarouselProps = {
+    images: {
+        id: string;
+        alt: string;
+        src: string;
+    }[];
+};
+declare const HeroCarousel: ({ images }: HeroCarouselProps) => JSX.Element;
+
+export { Hero, HeroCarousel, HeroCarouselProps, HeroProps };

package/dist/index.js

@@ -27,7 +27,8 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var src_exports = {};
 __export(src_exports, {
-  Hero: () => Hero
+  Hero: () => Hero,
+  HeroCarousel: () => HeroCarousel
 });
 module.exports = __toCommonJS(src_exports);
 
@@ -37,14 +38,166 @@ var React = __toESM(require("react"));
 // src/Hero/Hero.tsx
 var import_ui = require("@ttoss/ui");
 var import_jsx_runtime = require("react/jsx-runtime");
-var Hero = () => {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui.Box, {
-    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h1", {
-      children: "Hero"
+var Hero = ({
+  alignment,
+  headerText,
+  subHeaderText,
+  imageSrc,
+  imageAlt,
+  ctaLabel
+}) => {
+  const isCentered = alignment === "center";
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ui.Flex, {
+    sx: {
+      justifyContent: "space-between",
+      paddingY: "10vh",
+      paddingX: "186px"
+    },
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ui.Flex, {
+        sx: {
+          flexDirection: "column",
+          alignItems: isCentered ? "center" : "start",
+          backgroundImage: isCentered ? `url(${imageSrc})` : void 0,
+          width: isCentered ? "100%" : void 0,
+          minHeight: isCentered ? "80vh" : void 0,
+          justifyContent: isCentered ? "center" : void 0
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui.Heading, {
+            sx: { fontSize: "48px", color: isCentered ? "white" : void 0 },
+            as: "h1",
+            children: headerText
+          }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui.Text, {
+            sx: {
+              fontSize: "24px",
+              color: isCentered ? "white" : void 0,
+              marginTop: "54px",
+              marginBottom: "71px"
+            },
+            as: "h2",
+            children: subHeaderText
+          }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui.Button, {
+            sx: {
+              background: isCentered ? "white" : "black",
+              color: isCentered ? "black" : void 0,
+              borderRadius: "10px",
+              fontSize: "16px"
+            },
+            children: ctaLabel
+          })
+        ]
+      }),
+      !isCentered && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui.Flex, {
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui.Image, {
+          sx: {
+            maxWidth: "60vw",
+            maxHeight: "623px"
+          },
+          src: imageSrc,
+          alt: imageAlt
+        })
+      })
+    ]
+  });
+};
+
+// src/HeroCarousel/HeroCarousel.tsx
+var import_ui2 = require("@ttoss/ui");
+var import_react = require("@iconify/react");
+var import_react2 = __toESM(require("react"));
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var HeroCarousel = ({ images = [] }) => {
+  const [selectedImage, setSelectedImage] = import_react2.default.useState(images[0].id);
+  const handleRight = () => {
+    const currentIndex = images.findIndex((item) => item.id === selectedImage);
+    const isLast = currentIndex === images.length - 1;
+    if (isLast) {
+      return setSelectedImage(images[0].id);
+    }
+    setSelectedImage(images[currentIndex + 1].id);
+  };
+  const handleLeft = () => {
+    const currentIndex = images.findIndex((item) => item.id === selectedImage);
+    const isFirst = currentIndex === 0;
+    if (isFirst) {
+      return setSelectedImage(images[images.length - 1].id);
+    }
+    setSelectedImage(images[currentIndex - 1].id);
+  };
+  const image = import_react2.default.useMemo(() => {
+    const result = images.find((item) => item.id === selectedImage);
+    return result;
+  }, [selectedImage, images]);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_ui2.Flex, {
+    sx: { width: "100%", height: "100%", maxHeight: "70vh", paddingX: 5 },
+    children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_ui2.Flex, {
+      sx: {
+        width: "100%",
+        height: "50vw",
+        position: "relative",
+        flexDirection: "column"
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_ui2.Flex, {
+          sx: { height: "100%", alignItems: "center", gap: 3 },
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_ui2.Flex, {
+              sx: {
+                cursor: "pointer",
+                height: "100%",
+                alignItems: "center"
+              },
+              onClick: handleLeft,
+              children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react.Icon, {
+                icon: "akar-icons:chevron-left"
+              })
+            }),
+            image && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_ui2.Image, {
+              sx: { height: "100%", width: "100%" },
+              src: image.src
+            }),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_ui2.Flex, {
+              sx: {
+                cursor: "pointer",
+                height: "100%",
+                alignItems: "center"
+              },
+              onClick: handleRight,
+              children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react.Icon, {
+                icon: "akar-icons:chevron-right"
+              })
+            })
+          ]
+        }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_ui2.Flex, {
+          sx: {
+            marginTop: 2,
+            alignSelf: "center",
+            gap: 3
+          },
+          children: images.map((image2) => {
+            return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_ui2.Box, {
+              role: "button",
+              onClick: () => setSelectedImage(image2.id),
+              sx: {
+                background: image2.id === selectedImage ? "gray" : "black",
+                width: 10,
+                height: 10,
+                borderRadius: "50%",
+                cursor: "pointer"
+              }
+            }, image2.id);
+          })
+        })
+      ]
     })
   });
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  Hero
+  Hero,
+  HeroCarousel
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/landing-pages",
-  "version": "0.0.2",
+  "version": "0.1.1",
   "description": "Package for creating landing pages.",
   "license": "UNLICENSED",
   "author": "ttoss",
@@ -19,6 +19,9 @@
     "test": "echo jest"
   },
   "typings": "dist/index.d.ts",
+  "dependencies": {
+    "@iconify/react": "^4.0.0"
+  },
   "peerDependencies": {
     "@ttoss/ui": "^1.21.0",
     "react": ">=18.0.0"
@@ -38,5 +41,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "adca3912e3a374a32cd7b5bd7733d2cdc9cd1a45"
+  "gitHead": "35f6fab94a939017e8ef17b6c29b570bb4f2f258"
 }

package/src/Hero/Hero.tsx

@@ -1,9 +1,83 @@
-import { Box } from '@ttoss/ui';
+import { Button, Flex, Heading, Image, Text } from '@ttoss/ui';
+
+export type HeroProps = {
+  headerText: string;
+  subHeaderText: string;
+  alignment: 'left' | 'center';
+  imageSrc: string;
+  imageAlt?: string;
+  ctaLabel?: string;
+};
+
+export const Hero = ({
+  alignment,
+  headerText,
+  subHeaderText,
+  imageSrc,
+  imageAlt,
+  ctaLabel,
+}: HeroProps) => {
+  const isCentered = alignment === 'center';
 
-export const Hero = () => {
   return (
-    <Box>
-      <h1>Hero</h1>
-    </Box>
+    <Flex
+      sx={{
+        justifyContent: 'space-between',
+        paddingY: '10vh',
+        paddingX: '186px',
+      }}
+    >
+      <Flex
+        sx={{
+          flexDirection: 'column',
+          alignItems: isCentered ? 'center' : 'start',
+          backgroundImage: isCentered ? `url(${imageSrc})` : undefined,
+          width: isCentered ? '100%' : undefined,
+          minHeight: isCentered ? '80vh' : undefined,
+          justifyContent: isCentered ? 'center' : undefined,
+        }}
+      >
+        <Heading
+          sx={{ fontSize: '48px', color: isCentered ? 'white' : undefined }}
+          as="h1"
+        >
+          {headerText}
+        </Heading>
+        <Text
+          sx={{
+            fontSize: '24px',
+            color: isCentered ? 'white' : undefined,
+            marginTop: '54px',
+            marginBottom: '71px',
+          }}
+          as="h2"
+        >
+          {subHeaderText}
+        </Text>
+        <Button
+          sx={{
+            background: isCentered ? 'white' : 'black',
+            color: isCentered ? 'black' : undefined,
+            borderRadius: '10px',
+            fontSize: '16px',
+          }}
+        >
+          {ctaLabel}
+        </Button>
+      </Flex>
+
+      {!isCentered && (
+        <Flex>
+          <Image
+            sx={{
+              maxWidth: '60vw',
+              maxHeight: '623px',
+            }}
+            src={imageSrc}
+            alt={imageAlt}
+          />
+        </Flex>
+      )}
+    </Flex>
   );
 };

package/src/HeroCarousel/HeroCarousel.tsx

@@ -0,0 +1,111 @@
+import { Box, Flex, Image } from '@ttoss/ui';
+import { Icon } from '@iconify/react';
+import React from 'react';
+
+export type HeroCarouselProps = {
+  images: {
+    id: string;
+    alt: string;
+    src: string;
+  }[];
+};
+
+export const HeroCarousel = ({ images = [] }: HeroCarouselProps) => {
+  const [selectedImage, setSelectedImage] = React.useState(images[0].id);
+
+  const handleRight = () => {
+    const currentIndex = images.findIndex((item) => item.id === selectedImage);
+    const isLast = currentIndex === images.length - 1;
+
+    if (isLast) {
+      return setSelectedImage(images[0].id);
+    }
+
+    setSelectedImage(images[currentIndex + 1].id);
+  };
+
+  const handleLeft = () => {
+    const currentIndex = images.findIndex((item) => item.id === selectedImage);
+    const isFirst = currentIndex === 0;
+
+    if (isFirst) {
+      return setSelectedImage(images[images.length - 1].id);
+    }
+
+    setSelectedImage(images[currentIndex - 1].id);
+  };
+
+  const image = React.useMemo(() => {
+    const result = images.find((item) => item.id === selectedImage);
+
+    return result;
+  }, [selectedImage, images]);
+
+  return (
+    <Flex
+      sx={{ width: '100%', height: '100%', maxHeight: '70vh', paddingX: 5 }}
+    >
+      <Flex
+        sx={{
+          width: '100%',
+          height: '50vw',
+          position: 'relative',
+          flexDirection: 'column',
+        }}
+      >
+        <Flex sx={{ height: '100%', alignItems: 'center', gap: 3 }}>
+          <Flex
+            sx={{
+              cursor: 'pointer',
+              height: '100%',
+              alignItems: 'center',
+            }}
+            onClick={handleLeft}
+          >
+            <Icon icon="akar-icons:chevron-left" />
+          </Flex>
+
+          {image && (
+            <Image sx={{ height: '100%', width: '100%' }} src={image.src} />
+          )}
+
+          <Flex
+            sx={{
+              cursor: 'pointer',
+              height: '100%',
+              alignItems: 'center',
+            }}
+            onClick={handleRight}
+          >
+            <Icon icon="akar-icons:chevron-right" />
+          </Flex>
+        </Flex>
+
+        <Flex
+          sx={{
+            marginTop: 2,
+            alignSelf: 'center',
+            gap: 3,
+          }}
+        >
+          {images.map((image) => {
+            return (
+              <Box
+                key={image.id}
+                role="button"
+                onClick={() => setSelectedImage(image.id)}
+                sx={{
+                  background: image.id === selectedImage ? 'gray' : 'black',
+                  width: 10,
+                  height: 10,
+                  borderRadius: '50%',
+                  cursor: 'pointer',
+                }}
+              />
+            );
+          })}
+        </Flex>
+      </Flex>
+    </Flex>
+  );
+};

package/src/index.ts

@@ -1 +1,2 @@
-export { Hero } from './Hero/Hero';
+export { Hero, HeroProps } from './Hero/Hero';
+export { HeroCarousel, HeroCarouselProps } from './HeroCarousel/HeroCarousel';