From 408ec04a5893a4cd5e73a52a54b01d7df5f8fd0d Mon Sep 17 00:00:00 2001 From: Lucid Kobold <72232219+LucidKobold@users.noreply.github.com> Date: Mon, 11 Mar 2024 18:04:28 -0400 Subject: [PATCH] Added hero with temp placeholder --- src/components/hero/WhatIMakeBanner.tsx | 82 +++++++++++++++++++++++++ src/components/hero/index.tsx | 30 +++++++++ src/pages/index.tsx | 5 +- src/theme/components/BrandText.tsx | 29 +++++++++ 4 files changed, 143 insertions(+), 3 deletions(-) create mode 100644 src/components/hero/WhatIMakeBanner.tsx create mode 100644 src/components/hero/index.tsx create mode 100644 src/theme/components/BrandText.tsx diff --git a/src/components/hero/WhatIMakeBanner.tsx b/src/components/hero/WhatIMakeBanner.tsx new file mode 100644 index 0000000..b756d0c --- /dev/null +++ b/src/components/hero/WhatIMakeBanner.tsx @@ -0,0 +1,82 @@ +import React from "react"; +import { Flex, HStack, Text, VStack } from "@chakra-ui/react"; +import BrandText from "../../theme/components/BrandText"; +import { Icon } from "@iconify/react"; + +const WhatIMakeBanner = (): JSX.Element => { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +}; + +export default WhatIMakeBanner; diff --git a/src/components/hero/index.tsx b/src/components/hero/index.tsx new file mode 100644 index 0000000..835a8f2 --- /dev/null +++ b/src/components/hero/index.tsx @@ -0,0 +1,30 @@ +import { Heading, VStack } from "@chakra-ui/react"; +import React from "react"; +import WhatIMakeBanner from "./WhatIMakeBanner"; + +const TempHero = (): JSX.Element => { + return ( + + + + + {"Placeholder section"} + + + + ); +}; + +export default TempHero; diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 9b2d53b..0a6bbe6 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -2,14 +2,13 @@ import React from "react"; import { Provider } from "react-redux"; import { store } from "../redux/store"; import { Box } from "@chakra-ui/react"; - +import TempHero from "../components/hero"; const IndexPage = (): JSX.Element => { - return ( - + ); diff --git a/src/theme/components/BrandText.tsx b/src/theme/components/BrandText.tsx new file mode 100644 index 0000000..5eef939 --- /dev/null +++ b/src/theme/components/BrandText.tsx @@ -0,0 +1,29 @@ +import { Heading, Text } from "@chakra-ui/react"; +import React from "react"; +import { fonts } from "../AppTheme"; + +interface BrandTextProps { + type: "Heading" | "Text"; + text: string; + headerLevel?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6"; + size?: string; +} + +const BrandText = ({ + type, + text, + headerLevel, + size +}: BrandTextProps): JSX.Element => { + return type === "Heading" ? ( + + {text} + + ) : ( + + {text} + + ); +}; + +export default BrandText;