@ttoss/landing-pages 0.1.6 → 0.1.7

package/dist/esm/index.js

@@ -164,7 +164,213 @@ var HeroCarousel = ({ images = [] }) => {
     })
   });
 };
+
+// src/Footer/Footer.tsx
+import { Flex as Flex3, Grid, Icon as Icon2, Image as Image3, Link, Text as Text2 } from "@ttoss/ui";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var Footer = ({ links, logo, socialMedia, reserved }) => {
+  return /* @__PURE__ */ jsxs3(Flex3, {
+    sx: { flexDirection: "column", paddingY: "40px" },
+    children: [
+      /* @__PURE__ */ jsx3(Image3, {
+        sx: {
+          maxWidth: ["90px", "212px"],
+          alignSelf: "center",
+          marginBottom: [3, 4]
+        },
+        src: logo
+      }),
+      /* @__PURE__ */ jsxs3(Flex3, {
+        sx: {
+          flexDirection: ["column", "row"],
+          justifyContent: ["unset", "center"],
+          paddingX: 3
+        },
+        children: [
+          /* @__PURE__ */ jsx3(Grid, {
+            sx: {
+              justifyContent: "center",
+              gridTemplateColumns: ["6fr 3fr 3fr", "1fr 1fr 1fr"]
+            },
+            children: links.map((link, idx) => {
+              return /* @__PURE__ */ jsx3(Link, {
+                sx: {
+                  fontSize: "xs",
+                  fontFamily: "body",
+                  textDecorationLine: "none"
+                },
+                href: link.href,
+                children: link.label
+              }, `link-${link.label}-${idx}`);
+            })
+          }),
+          /* @__PURE__ */ jsx3(Flex3, {
+            sx: {
+              marginTop: [3],
+              gap: [4],
+              justifyContent: "center"
+            },
+            children: socialMedia.map((social) => {
+              return /* @__PURE__ */ jsx3(Link, {
+                href: social.href,
+                children: /* @__PURE__ */ jsx3(Icon2, {
+                  icon: social.icon
+                })
+              }, `social-media-${social.icon}`);
+            })
+          })
+        ]
+      }),
+      /* @__PURE__ */ jsx3(Text2, {
+        sx: {
+          fontSize: "xxs",
+          color: "gray",
+          fontFamily: "heading",
+          textAlign: "center",
+          lineHeight: "1.5",
+          marginTop: [3, 4]
+        },
+        children: reserved
+      })
+    ]
+  });
+};
+
+// src/Navbar/Navbar.tsx
+import { Collapse } from "react-collapse";
+import { Flex as Flex4, Grid as Grid2, Icon as Icon3, Image as Image4, Link as Link2 } from "@ttoss/ui";
+import React3 from "react";
+import { Fragment, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+var Navbar = ({ links, logo, cta, type = "1" }) => {
+  const [isMenuOpen, setIsMenuOpen] = React3.useState(false);
+  const {
+    gridTemplateAreas,
+    heightLogo,
+    gridTemplateColumns,
+    justifySelfLogo
+  } = React3.useMemo(() => {
+    if (type === "1") {
+      return {
+        gridTemplateAreas: '"logo links cta"',
+        gridTemplateColumns: "2fr 5fr 2fr",
+        heightLogo: "42px",
+        justifySelfLogo: "unset"
+      };
+    }
+    return {
+      gridTemplateAreas: '"links logo cta"',
+      gridTemplateColumns: "1fr 1fr 1fr",
+      heightLogo: "54px",
+      justifySelfLogo: "center"
+    };
+  }, [type]);
+  return /* @__PURE__ */ jsxs4(Fragment, {
+    children: [
+      /* @__PURE__ */ jsxs4(Flex4, {
+        sx: { flexDirection: "column", display: ["flex", "none"] },
+        children: [
+          /* @__PURE__ */ jsxs4(Grid2, {
+            sx: {
+              justifyContent: "space-between",
+              alignItems: "center",
+              gridTemplateColumns: "1fr 1fr 1fr"
+            },
+            children: [
+              /* @__PURE__ */ jsx4(Icon3, {
+                sx: { cursor: "pointer", justifySelf: "start", fontSize: "3xl" },
+                onClick: () => setIsMenuOpen((prev) => !prev),
+                icon: isMenuOpen ? "ic:outline-menu-open" : "ic:outline-menu"
+              }),
+              /* @__PURE__ */ jsx4(Image4, {
+                src: logo,
+                sx: { maxWidth: "112px" }
+              }),
+              /* @__PURE__ */ jsx4(Flex4, {
+                sx: { justifyContent: "end", width: "100%", alignItems: "center" },
+                children: cta && /* @__PURE__ */ jsx4(Link2, {
+                  sx: { fontSize: "xs" },
+                  href: cta.href,
+                  children: cta.label
+                })
+              })
+            ]
+          }),
+          /* @__PURE__ */ jsx4(Collapse, {
+            isOpened: isMenuOpen,
+            initialStyle: { height: 0, overflow: "hidden" },
+            children: /* @__PURE__ */ jsx4(Flex4, {
+              sx: {
+                flexDirection: "column",
+                width: "100%",
+                gap: 3,
+                paddingY: 3,
+                paddingLeft: 3
+              },
+              children: links.map((link) => {
+                return /* @__PURE__ */ jsx4(Link2, {
+                  sx: { fontSize: "xs" },
+                  href: link.href,
+                  children: link.label
+                }, link.label);
+              })
+            })
+          })
+        ]
+      }),
+      /* @__PURE__ */ jsxs4(Grid2, {
+        sx: {
+          display: ["none", "grid"],
+          gridTemplateAreas,
+          gridTemplateColumns,
+          alignItems: "center",
+          paddingX: 6,
+          paddingY: 4
+        },
+        children: [
+          /* @__PURE__ */ jsx4(Image4, {
+            sx: {
+              gridArea: "logo",
+              height: heightLogo,
+              justifySelf: justifySelfLogo
+            },
+            src: logo
+          }),
+          /* @__PURE__ */ jsx4(Flex4, {
+            sx: { gridArea: "links", justifyContent: "space-around" },
+            children: links.map((link) => {
+              return /* @__PURE__ */ jsx4(Link2, {
+                sx: { fontSize: "2xl" },
+                href: link.href,
+                children: link.label
+              }, link.label);
+            })
+          }),
+          /* @__PURE__ */ jsx4(Flex4, {
+            sx: { gridArea: "cta", justifyContent: "end" },
+            children: cta && /* @__PURE__ */ jsx4(Link2, {
+              href: cta.href,
+              sx: {
+                backgroundColor: "background",
+                borderColor: "text",
+                color: "text",
+                borderRadius: "10px",
+                fontSize: "base",
+                textDecorationLine: "none",
+                paddingX: 3,
+                paddingY: 2
+              },
+              as: "button",
+              children: cta.label
+            })
+          })
+        ]
+      })
+    ]
+  });
+};
 export {
+  Footer,
   Hero,
-  HeroCarousel
+  HeroCarousel,
+  Navbar
 };

package/dist/index.d.ts

@@ -17,4 +17,35 @@ declare type HeroCarouselProps = {
 };
 declare const HeroCarousel: ({ images }: HeroCarouselProps) => JSX.Element;
 
-export { Hero, HeroCarousel, HeroCarouselProps, HeroProps };
+declare type FooterLink = {
+    label: string;
+    href: string;
+};
+declare type SocialMedia = {
+    icon: string;
+    href: string;
+};
+declare type FooterProps = {
+    links: FooterLink[];
+    logo: string;
+    socialMedia: SocialMedia[];
+    reserved: string;
+};
+declare const Footer: ({ links, logo, socialMedia, reserved }: FooterProps) => JSX.Element;
+
+declare type NavbarLink = {
+    label: string;
+    href: string;
+};
+declare type NavbarProps = {
+    type?: '1' | '2';
+    logo: string;
+    cta?: {
+        label: string;
+        href: string;
+    };
+    links: NavbarLink[];
+};
+declare const Navbar: ({ links, logo, cta, type }: NavbarProps) => JSX.Element;
+
+export { Footer, FooterProps, Hero, HeroCarousel, HeroCarouselProps, HeroProps, Navbar, NavbarProps };

package/dist/index.js

@@ -27,8 +27,10 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var src_exports = {};
 __export(src_exports, {
+  Footer: () => Footer,
   Hero: () => Hero,
-  HeroCarousel: () => HeroCarousel
+  HeroCarousel: () => HeroCarousel,
+  Navbar: () => Navbar
 });
 module.exports = __toCommonJS(src_exports);
 
@@ -196,8 +198,214 @@ var HeroCarousel = ({ images = [] }) => {
     })
   });
 };
+
+// src/Footer/Footer.tsx
+var import_ui3 = require("@ttoss/ui");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var Footer = ({ links, logo, socialMedia, reserved }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_ui3.Flex, {
+    sx: { flexDirection: "column", paddingY: "40px" },
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_ui3.Image, {
+        sx: {
+          maxWidth: ["90px", "212px"],
+          alignSelf: "center",
+          marginBottom: [3, 4]
+        },
+        src: logo
+      }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_ui3.Flex, {
+        sx: {
+          flexDirection: ["column", "row"],
+          justifyContent: ["unset", "center"],
+          paddingX: 3
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_ui3.Grid, {
+            sx: {
+              justifyContent: "center",
+              gridTemplateColumns: ["6fr 3fr 3fr", "1fr 1fr 1fr"]
+            },
+            children: links.map((link, idx) => {
+              return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_ui3.Link, {
+                sx: {
+                  fontSize: "xs",
+                  fontFamily: "body",
+                  textDecorationLine: "none"
+                },
+                href: link.href,
+                children: link.label
+              }, `link-${link.label}-${idx}`);
+            })
+          }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_ui3.Flex, {
+            sx: {
+              marginTop: [3],
+              gap: [4],
+              justifyContent: "center"
+            },
+            children: socialMedia.map((social) => {
+              return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_ui3.Link, {
+                href: social.href,
+                children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_ui3.Icon, {
+                  icon: social.icon
+                })
+              }, `social-media-${social.icon}`);
+            })
+          })
+        ]
+      }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_ui3.Text, {
+        sx: {
+          fontSize: "xxs",
+          color: "gray",
+          fontFamily: "heading",
+          textAlign: "center",
+          lineHeight: "1.5",
+          marginTop: [3, 4]
+        },
+        children: reserved
+      })
+    ]
+  });
+};
+
+// src/Navbar/Navbar.tsx
+var import_react_collapse = require("react-collapse");
+var import_ui4 = require("@ttoss/ui");
+var import_react3 = __toESM(require("react"));
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var Navbar = ({ links, logo, cta, type = "1" }) => {
+  const [isMenuOpen, setIsMenuOpen] = import_react3.default.useState(false);
+  const {
+    gridTemplateAreas,
+    heightLogo,
+    gridTemplateColumns,
+    justifySelfLogo
+  } = import_react3.default.useMemo(() => {
+    if (type === "1") {
+      return {
+        gridTemplateAreas: '"logo links cta"',
+        gridTemplateColumns: "2fr 5fr 2fr",
+        heightLogo: "42px",
+        justifySelfLogo: "unset"
+      };
+    }
+    return {
+      gridTemplateAreas: '"links logo cta"',
+      gridTemplateColumns: "1fr 1fr 1fr",
+      heightLogo: "54px",
+      justifySelfLogo: "center"
+    };
+  }, [type]);
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, {
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_ui4.Flex, {
+        sx: { flexDirection: "column", display: ["flex", "none"] },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_ui4.Grid, {
+            sx: {
+              justifyContent: "space-between",
+              alignItems: "center",
+              gridTemplateColumns: "1fr 1fr 1fr"
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_ui4.Icon, {
+                sx: { cursor: "pointer", justifySelf: "start", fontSize: "3xl" },
+                onClick: () => setIsMenuOpen((prev) => !prev),
+                icon: isMenuOpen ? "ic:outline-menu-open" : "ic:outline-menu"
+              }),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_ui4.Image, {
+                src: logo,
+                sx: { maxWidth: "112px" }
+              }),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_ui4.Flex, {
+                sx: { justifyContent: "end", width: "100%", alignItems: "center" },
+                children: cta && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_ui4.Link, {
+                  sx: { fontSize: "xs" },
+                  href: cta.href,
+                  children: cta.label
+                })
+              })
+            ]
+          }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_collapse.Collapse, {
+            isOpened: isMenuOpen,
+            initialStyle: { height: 0, overflow: "hidden" },
+            children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_ui4.Flex, {
+              sx: {
+                flexDirection: "column",
+                width: "100%",
+                gap: 3,
+                paddingY: 3,
+                paddingLeft: 3
+              },
+              children: links.map((link) => {
+                return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_ui4.Link, {
+                  sx: { fontSize: "xs" },
+                  href: link.href,
+                  children: link.label
+                }, link.label);
+              })
+            })
+          })
+        ]
+      }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_ui4.Grid, {
+        sx: {
+          display: ["none", "grid"],
+          gridTemplateAreas,
+          gridTemplateColumns,
+          alignItems: "center",
+          paddingX: 6,
+          paddingY: 4
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_ui4.Image, {
+            sx: {
+              gridArea: "logo",
+              height: heightLogo,
+              justifySelf: justifySelfLogo
+            },
+            src: logo
+          }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_ui4.Flex, {
+            sx: { gridArea: "links", justifyContent: "space-around" },
+            children: links.map((link) => {
+              return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_ui4.Link, {
+                sx: { fontSize: "2xl" },
+                href: link.href,
+                children: link.label
+              }, link.label);
+            })
+          }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_ui4.Flex, {
+            sx: { gridArea: "cta", justifyContent: "end" },
+            children: cta && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_ui4.Link, {
+              href: cta.href,
+              sx: {
+                backgroundColor: "background",
+                borderColor: "text",
+                color: "text",
+                borderRadius: "10px",
+                fontSize: "base",
+                textDecorationLine: "none",
+                paddingX: 3,
+                paddingY: 2
+              },
+              as: "button",
+              children: cta.label
+            })
+          })
+        ]
+      })
+    ]
+  });
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  Footer,
   Hero,
-  HeroCarousel
+  HeroCarousel,
+  Navbar
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/landing-pages",
-  "version": "0.1.6",
+  "version": "0.1.7",
   "description": "Package for creating landing pages.",
   "license": "UNLICENSED",
   "author": "ttoss",
@@ -20,7 +20,8 @@
   },
   "typings": "dist/index.d.ts",
   "dependencies": {
-    "@iconify/react": "^4.0.0"
+    "@iconify/react": "^4.0.0",
+    "react-collapse": "^5.1.1"
   },
   "peerDependencies": {
     "@ttoss/ui": "^1.21.0",
@@ -29,8 +30,9 @@
   "devDependencies": {
     "@ttoss/config": "^1.18.3",
     "@ttoss/test-utils": "^1.16.10",
-    "@ttoss/ui": "^1.23.0",
+    "@ttoss/ui": "^1.23.1",
     "@types/jest": "^29.1.1",
+    "@types/react-collapse": "^5.0.1",
     "jest": "^29.1.2",
     "tsup": "^6.2.3"
   },
@@ -41,5 +43,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "e2b509ee8717f07f7365191b651dcbb5f080e05a"
+  "gitHead": "e9c6b47f9b2ff9a44358a16c9feff84ba9342346"
 }

package/src/Footer/Footer.tsx

@@ -0,0 +1,93 @@
+import { Flex, Grid, Icon, Image, Link, Text } from '@ttoss/ui';
+
+type FooterLink = {
+  label: string;
+  href: string;
+};
+
+type SocialMedia = {
+  icon: string;
+  href: string;
+};
+
+export type FooterProps = {
+  links: FooterLink[];
+  logo: string;
+  socialMedia: SocialMedia[];
+  reserved: string;
+};
+
+export const Footer = ({ links, logo, socialMedia, reserved }: FooterProps) => {
+  return (
+    <Flex sx={{ flexDirection: 'column', paddingY: '40px' }}>
+      <Image
+        sx={{
+          maxWidth: ['90px', '212px'],
+          alignSelf: 'center',
+          marginBottom: [3, 4],
+        }}
+        src={logo}
+      />
+
+      <Flex
+        sx={{
+          flexDirection: ['column', 'row'],
+          justifyContent: ['unset', 'center'],
+          paddingX: 3,
+        }}
+      >
+        <Grid
+          sx={{
+            justifyContent: 'center',
+            gridTemplateColumns: ['6fr 3fr 3fr', '1fr 1fr 1fr'],
+          }}
+        >
+          {links.map((link, idx) => {
+            return (
+              <Link
+                sx={{
+                  fontSize: 'xs',
+                  fontFamily: 'body',
+                  textDecorationLine: 'none',
+                }}
+                key={`link-${link.label}-${idx}`}
+                href={link.href}
+              >
+                {link.label}
+              </Link>
+            );
+          })}
+        </Grid>
+
+        <Flex
+          sx={{
+            marginTop: [3],
+            gap: [4],
+            justifyContent: 'center',
+          }}
+        >
+          {socialMedia.map((social) => {
+            return (
+              <Link href={social.href} key={`social-media-${social.icon}`}>
+                <Icon icon={social.icon} />
+              </Link>
+            );
+          })}
+        </Flex>
+      </Flex>
+
+      <Text
+        sx={{
+          fontSize: 'xxs',
+          color: 'gray',
+          fontFamily: 'heading',
+          textAlign: 'center',
+          lineHeight: '1.5',
+          marginTop: [3, 4],
+        }}
+      >
+        {reserved}
+      </Text>
+    </Flex>
+  );
+};

package/src/Navbar/Navbar.tsx

@@ -0,0 +1,154 @@
+import { Collapse } from 'react-collapse';
+import { Flex, Grid, Icon, Image, Link } from '@ttoss/ui';
+import React from 'react';
+
+type NavbarLink = {
+  label: string;
+  href: string;
+};
+
+export type NavbarProps = {
+  type?: '1' | '2';
+  logo: string;
+  cta?: {
+    label: string;
+    href: string;
+  };
+  links: NavbarLink[];
+};
+
+export const Navbar = ({ links, logo, cta, type = '1' }: NavbarProps) => {
+  const [isMenuOpen, setIsMenuOpen] = React.useState(false);
+
+  const {
+    gridTemplateAreas,
+    heightLogo,
+    gridTemplateColumns,
+    justifySelfLogo,
+  } = React.useMemo(() => {
+    if (type === '1') {
+      return {
+        gridTemplateAreas: '"logo links cta"',
+        gridTemplateColumns: '2fr 5fr 2fr',
+        heightLogo: '42px',
+        justifySelfLogo: 'unset',
+      };
+    }
+
+    return {
+      gridTemplateAreas: '"links logo cta"',
+      gridTemplateColumns: '1fr 1fr 1fr',
+      heightLogo: '54px',
+      justifySelfLogo: 'center',
+    };
+  }, [type]);
+
+  return (
+    <>
+      {/* Layout Mobile */}
+
+      <Flex sx={{ flexDirection: 'column', display: ['flex', 'none'] }}>
+        <Grid
+          sx={{
+            justifyContent: 'space-between',
+            alignItems: 'center',
+            gridTemplateColumns: '1fr 1fr 1fr',
+          }}
+        >
+          <Icon
+            sx={{ cursor: 'pointer', justifySelf: 'start', fontSize: '3xl' }}
+            onClick={() => setIsMenuOpen((prev) => !prev)}
+            icon={isMenuOpen ? 'ic:outline-menu-open' : 'ic:outline-menu'}
+          />
+
+          <Image src={logo} sx={{ maxWidth: '112px' }} />
+
+          <Flex
+            sx={{ justifyContent: 'end', width: '100%', alignItems: 'center' }}
+          >
+            {cta && (
+              <Link sx={{ fontSize: 'xs' }} href={cta.href}>
+                {cta.label}
+              </Link>
+            )}
+          </Flex>
+        </Grid>
+
+        <Collapse
+          isOpened={isMenuOpen}
+          initialStyle={{ height: 0, overflow: 'hidden' }}
+        >
+          <Flex
+            sx={{
+              flexDirection: 'column',
+              width: '100%',
+              gap: 3,
+              paddingY: 3,
+              paddingLeft: 3,
+            }}
+          >
+            {links.map((link) => {
+              return (
+                <Link sx={{ fontSize: 'xs' }} key={link.label} href={link.href}>
+                  {link.label}
+                </Link>
+              );
+            })}
+          </Flex>
+        </Collapse>
+      </Flex>
+
+      {/* Layout Desktop */}
+      <Grid
+        sx={{
+          display: ['none', 'grid'],
+          gridTemplateAreas,
+          gridTemplateColumns,
+          alignItems: 'center',
+          paddingX: 6,
+          paddingY: 4,
+        }}
+      >
+        <Image
+          sx={{
+            gridArea: 'logo',
+            height: heightLogo,
+            justifySelf: justifySelfLogo,
+          }}
+          src={logo}
+        />
+
+        <Flex sx={{ gridArea: 'links', justifyContent: 'space-around' }}>
+          {links.map((link) => {
+            return (
+              <Link sx={{ fontSize: '2xl' }} key={link.label} href={link.href}>
+                {link.label}
+              </Link>
+            );
+          })}
+        </Flex>
+
+        <Flex sx={{ gridArea: 'cta', justifyContent: 'end' }}>
+          {cta && (
+            <Link
+              href={cta.href}
+              sx={{
+                backgroundColor: 'background',
+                borderColor: 'text',
+                color: 'text',
+                borderRadius: '10px',
+                fontSize: 'base',
+                textDecorationLine: 'none',
+                paddingX: 3,
+                paddingY: 2,
+              }}
+              as="button"
+            >
+              {cta.label}
+            </Link>
+          )}
+        </Flex>
+      </Grid>
+    </>
+  );
+};

package/src/index.ts

@@ -1,2 +1,7 @@
-export { Hero, HeroProps } from './Hero/Hero';
-export { HeroCarousel, HeroCarouselProps } from './HeroCarousel/HeroCarousel';
+export { Hero, type HeroProps } from './Hero/Hero';
+export {
+  HeroCarousel,
+  type HeroCarouselProps,
+} from './HeroCarousel/HeroCarousel';
+export { Footer, type FooterProps } from './Footer/Footer';
+export { Navbar, type NavbarProps } from './Navbar/Navbar';