diff --git a/public/assets/icons/discord-fill.svg b/public/assets/icons/discord-fill.svg new file mode 100644 index 0000000..604eac0 --- /dev/null +++ b/public/assets/icons/discord-fill.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/public/assets/icons/github-fill.svg b/public/assets/icons/github-fill.svg new file mode 100644 index 0000000..09995bd --- /dev/null +++ b/public/assets/icons/github-fill.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/public/assets/icons/product-hunt-fill.svg b/public/assets/icons/product-hunt-fill.svg new file mode 100644 index 0000000..2e096cb --- /dev/null +++ b/public/assets/icons/product-hunt-fill.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/src/modules/LandingPage/Hero.tsx b/src/modules/LandingPage/Hero.tsx new file mode 100644 index 0000000..a904faa --- /dev/null +++ b/src/modules/LandingPage/Hero.tsx @@ -0,0 +1,100 @@ +import { + Button, + HStack, + IconButton, + Image, + Text, + VStack, +} from '@chakra-ui/react'; + +export function Hero() { + return ( + + + + Drink mocha with people accross the universe + + + Mocha is a Discord bot for multi-chat cross-server, that allows you to + send messages to multiple channels at once.{' '} + + + + + + + + + + } + /> + + } + /> + + } + /> + + + + ); +} diff --git a/src/modules/LandingPage/LandingPageContainer.tsx b/src/modules/LandingPage/LandingPageContainer.tsx index 6f15deb..f6b7910 100644 --- a/src/modules/LandingPage/LandingPageContainer.tsx +++ b/src/modules/LandingPage/LandingPageContainer.tsx @@ -1,11 +1,11 @@ -import { Box } from '@chakra-ui/react'; - import Layout from '@/uikit/Layout'; +import { Hero } from './Hero'; + export function LandingPageContainer() { return ( - + ); } diff --git a/src/uikit/Layout.tsx b/src/uikit/Layout.tsx index 4d86b65..5f0d904 100644 --- a/src/uikit/Layout.tsx +++ b/src/uikit/Layout.tsx @@ -15,7 +15,7 @@ function Layout({ children }: LayoutProps) { backgroundRepeat='no-repeat' backgroundSize='cover'>
- + {children}