-

package.json

@@ -10,7 +10,9 @@
     "gh-pages": "^4.0.0",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
+    "react-router-dom": "^6.3.0",
     "react-scripts": "^5.0.1",
+    "react-spring": "^9.4.5",
     "styled-components": "^5.3.5",
     "web-vitals": "^2.1.4"
   },

src/App.jsx

@@ -1,9 +1,19 @@
 import React from 'react'
+import BannerHead from './components/BannerHead'
 import Faq from './pages/FAQs/Faq'
+import FAQPage from './pages/FAQs/FAQPage'
+import { BrowserRouter as Router,Routes,Route} from 'react-router-dom'
 
 function App() {
   return (
-    <div ><Faq></Faq></div>
+    <div>
+      <Router>
+        <Routes>
+          <Route path='/' element={<Faq/>} />
+          <Route path='/FAQPage' element={<FAQPage/>} />
+        </Routes>
+      </Router>
+    </div>
 
   )
 }

src/components/BannerHead.jsx

@@ -0,0 +1,36 @@
+import React from 'react'
+import {Spring,animated} from 'react-spring'
+export default function BannerHead({text1,text2}) {
+  return (
+    <div className="  min-h-[420px] py-[100px] px-[3%] bg-[#f5fbfc] ">
+    <Spring 
+            from={{y:200}}
+            to={{y:100}}
+            config={{duration:1000 }}
+        >
+            {props=>(
+                <animated.div style={props} className="flex justify-center items-center">
+                    <img src="https://assets.website-files.com/5e865e09d8efa3310676b585/5e865e09d8efa308a576b613_YumYum.png" alt="" className='absolute w-full max-w-[500px]'/>
+                </animated.div>
+
+            )}
+    </Spring>
+    <Spring 
+            from={{opacity:0,y:120}}
+            to={{opacity:1,y:30}}
+            config={{duration:800 }}
+        >
+            {props=>(
+                <animated.div style={props} className="flex justify-center items-center">
+                <div className='relative flex flex-col max-w-[670px] m-auto justify-center items-center text-center'>
+                        <h1 className='mt-[20px] mb-[10px] md:text-[60px] lg:text-[60px] text-[50px] tracking-[-0.03em] font-bold block leading-none text-[#191b22] '> {text1} <span className='text-[#35b8be]'>{text2}</span>
+                        </h1>
+                  </div>
+                </animated.div>
+
+            )}
+    </Spring>
+    </div>
+  )
+}
+

src/components/Buttons.jsx

@@ -27,6 +27,10 @@ const Button = styled.a`
     font-size: 18px;
     text-align: center;
 }
+a:hover{
+  background-color: #31a7ad;
+  transition: background-color 250ms ease;
+}
 .button.button-space {
     margin-top: 40px;
 }
@@ -40,7 +44,7 @@ const Button = styled.a`
 function Buttonss({children,id}) {
   return (
     <Button>
-    <a id={id&&id} className='button button-space w-button'>{children}</a>
+    <a href={id} className='button button-space w-button'>{children}</a>
     </Button>
   )
 }

src/components/slider.jsx

@@ -0,0 +1,11 @@
+import React from 'react'
+
+function slider() {
+  return (
+    <div>
+
+    </div>
+  )
+}
+
+export default slider

src/pages/FAQs/FAQPage.jsx

@@ -1,8 +1,11 @@
 import React from 'react'
+import BannerHead from '../../components/BannerHead'
 
 function FAQPage() {
   return (
-    <div>FAQPage</div>
+    <div>
+      <BannerHead text1={'Frequently Asked'} text2={'Questions'} ></BannerHead>
+    </div>
   )
 }
 

src/pages/FAQs/FAQdata.jsx

@@ -0,0 +1,5 @@
+export function FAQdata(){
+    [
+
+    ]
+}

src/pages/FAQs/Faq.jsx

@@ -3,17 +3,19 @@ import Buttons from '../../components/Buttons'
 
 function Faq() {
   return (
-    <div className='relative grid lg:grid-cols-2 gap-10 py-[120px] px-[3%] font-sans box-border  '>
-        <div className='flex flex-col relative justify-center items-center'>
-            <img src="https://assets.website-files.com/5e865e09d8efa3310676b585/5e865e09d8efa379a976b602_Phones.png" srcSet='https://assets.website-files.com/5e865e09d8efa3310676b585/5e865e09d8efa379a976b602_Phones-p-500.png 500w, https://assets.website-files.com/5e865e09d8efa3310676b585/5e865e09d8efa379a976b602_Phones-p-800.png 800w, https://assets.website-files.com/5e865e09d8efa3310676b585/5e865e09d8efa379a976b602_Phones.png 2103w' sizes='94vw' alt="Phones" className=' inline-block  top-0 left-0 max-w-full align-middle object-cover lg:w-full md:w-full	' />
-            <img src="https://assets.website-files.com/5e865e09d8efa3310676b585/5e865e09d8efa3241b76b605_Content%20Pattern.svg" alt="Pattern" className='absolute top-0 max-w-full inline-block left-0 right-0 bottom-0  align-middle ' />
+  <div className="relative block py-[120px] px-[3%] font-sans box-border justify-center">
+    <div className=' grid lg:grid-cols-2 gap-10  '>
+        <div className='flex flex-col relative justify-center items-center lg:ml-16'>
+            <img src="https://assets.website-files.com/5e865e09d8efa3310676b585/5e865e09d8efa379a976b602_Phones.png" srcSet='https://assets.website-files.com/5e865e09d8efa3310676b585/5e865e09d8efa379a976b602_Phones-p-500.png 500w, https://assets.website-files.com/5e865e09d8efa3310676b585/5e865e09d8efa379a976b602_Phones-p-800.png 800w, https://assets.website-files.com/5e865e09d8efa3310676b585/5e865e09d8efa379a976b602_Phones.png 2103w' sizes='94vw' alt="Phones" className='inline-block top-0 left-0 max-w-full align-middle object-cover lg:w-full md:w-full	' />
+            <img src="https://assets.website-files.com/5e865e09d8efa3310676b585/5e865e09d8efa3241b76b605_Content%20Pattern.svg" alt="Pattern" className='absolute md:mt-10 md:ml-20 lg:m-0 sm:m-0  top-0 max-w-full inline-block left-0 right-0 bottom-0  align-middle ' />
         </div>
         <div className='flex flex-col lg:items-start md:items-center lg:text-left text-center justify-center'>
             <h1 className=' my-[20px] md:text-[55px] lg:text-[55px] text-[48px] tracking-[-0.03em] font-bold block leading-none text-[#35b8be]  '>Order online with our simple checkout.</h1>
              <p className='mb-[10px] text-[18px] leading-[1.5] tracking-[-0.02em] text-[#546285]'>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500.</p>
-            <Buttons>See your FAQs</Buttons>
+            <Buttons id={'FAQpage'}>See your FAQs</Buttons>
         </div>
     </div>
+  </div>
   )
 }