about banner

src/App.jsx

@@ -1,3 +1,4 @@
+import React from 'react'
 import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
 import Home from "./Pages/Home";
 import { useEffect, useState } from "react";

src/Components/HeroHeader.jsx

@@ -0,0 +1,16 @@
+import { Box, Heading, Stack, Text } from '@chakra-ui/react'
+import React from 'react'
+
+
+
+const HeroHeader = ({title,content}) => {
+
+  return (
+    <Box backgroundColor={'#0041180D'} h={'360px'} display={'flex'} justifyContent={'center'} alignContent={'center'} flexDirection={'column'} textAlign={'center'}>
+        <Heading as='h2' mb={'14px'} fontSize={'52px'} color={'#000'}>{title}</Heading>
+        <Text fontFamily={'DM sans'} fontSize={'20px'} mb={'0'} fontWeight={'500'}>{content}</Text>
+    </Box>
+  )
+}
+
+export default HeroHeader

src/Pages/AboutUs.jsx

@@ -0,0 +1,15 @@
+import React from 'react'
+import HeroHeader from '../Components/HeroHeader'
+
+const AboutUs = () => {
+  return (
+    <>
+        <HeroHeader 
+          title='About Us'
+          content='Our innovative investments drive growth and secure futures.'
+         />
+    </>
+  )
+}
+
+export default AboutUs

src/Routes/RoutLink.jsx

@@ -1,5 +1,7 @@
+import AboutUs from "../Pages/AboutUs";
 import Home from "../Pages/Home";
 
 export const RouteLink = [
     { path: "/", Component: Home },
+    { path: "/aboutus", Component: AboutUs },
 ]  

src/index.css

@@ -1,5 +1,13 @@
+
+@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap');
+
 *{
   margin: 0;
   padding: 0;
   box-sizing: border-box;
+}
+
+
+h2{
+  font-family: Roca Two !important;
 }