first

src/components/header.tsx

@@ -0,0 +1,17 @@
+import { Box, Flex, Image, Text, } from '@chakra-ui/react';
+import {colors} from '../colors';
+
+function Header() {
+    return (
+        <Box bg={colors.topBarColor} py={4} w="full">
+            <Flex alignItems={'center'} justifyContent={'center'} direction="column">
+                <Image src="/images/headerlogo.png" alt="Logo" width="150px" />
+                <Text textAlign={'center'} marginLeft={3} marginTop={2} className="font-melle font-medium" color={'#075C39'}>
+                    {"【積極求變 健康向前】"}
+                </Text>
+            </Flex>
+        </Box>
+    );
+}
+
+export default Header;