From 67e9d6eea756a549496b2ae902cf41d32f523379 Mon Sep 17 00:00:00 2001
From: YasinShaikh123 <123150391+YasinShaikh123@users.noreply.github.com>
Date: Thu, 20 Jun 2024 13:57:57 +0530
Subject: [PATCH] about banner

---
 src/App.jsx                   |  1 +
 src/Components/HeroHeader.jsx | 16 ++++++++++++++++
 src/Pages/AboutUs.jsx         | 15 +++++++++++++++
 src/Routes/RoutLink.jsx       |  2 ++
 src/index.css                 |  8 ++++++++
 5 files changed, 42 insertions(+)
 create mode 100644 src/Components/HeroHeader.jsx
 create mode 100644 src/Pages/AboutUs.jsx

diff --git a/src/App.jsx b/src/App.jsx
index efb4665..f089903 100644
--- a/src/App.jsx
+++ b/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";
diff --git a/src/Components/HeroHeader.jsx b/src/Components/HeroHeader.jsx
new file mode 100644
index 0000000..b3876ee
--- /dev/null
+++ b/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
diff --git a/src/Pages/AboutUs.jsx b/src/Pages/AboutUs.jsx
new file mode 100644
index 0000000..0256135
--- /dev/null
+++ b/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
diff --git a/src/Routes/RoutLink.jsx b/src/Routes/RoutLink.jsx
index b0c5607..8bcaf7c 100644
--- a/src/Routes/RoutLink.jsx
+++ b/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 },
 ]  
\ No newline at end of file
diff --git a/src/index.css b/src/index.css
index f7cbb2c..ddc8fa0 100644
--- a/src/index.css
+++ b/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;
 }
\ No newline at end of file