sitemap screen

package.json

@@ -13,6 +13,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-icons": "^4.8.0",
+    "react-router-dom": "^6.10.0",
     "react-scroll-into-view": "^1.12.0",
     "react-spinners": "^0.13.8",
     "react-type-animation": "^3.0.1",
@@ -26,6 +27,6 @@
     "autoprefixer": "^10.4.14",
     "postcss": "^8.4.21",
     "tailwindcss": "^3.2.7",
-    "vite": "^4.2.0"
+    "vite": "^4.3.1"
   }
 }

src/App.jsx

@@ -2,6 +2,10 @@ import "./App.css";
 import Page from "./";
 import { RiseLoader } from "react-spinners";
 import { useState, useEffect } from "react";
+import { Routes, Route, Navigate } from "react-router-dom";
+import SiteMap from "./sitemap";
+import Header from "./header";
+
 function App() {
   const [loading, setLoading] = useState(false);
   const pageLoader = () => {
@@ -22,7 +26,13 @@ function App() {
           <RiseLoader color="#000000" />{" "}
         </div>
       ) : (
-        <Page />
+        <Routes>
+            <Route path="/*" element={<SiteMap />} />
+          <Route path="/" element={<Header />}>
+            <Route path="/" element={<Page />} />
+            {/* <Route path="/map" element={<SiteMap />} exact /> */}
+          </Route>
+        </Routes>
       )}
     </div>
   );

src/header.jsx

@@ -2,13 +2,14 @@ import Logo from "./components/logo";
 import ButtonComponent from "./components/button";
 import { GiCancel } from "react-icons/gi";
 import ScrollIntoView from "react-scroll-into-view";
+import {Outlet} from 'react-router-dom'
 
 import { useState } from "react";
 const Header = () => {
   const [open, setOpen] = useState(false);
   return (
     <>
-      <header className="md:flex hidden items-center justify-between">
+      <header className="md:flex hidden items-center justify-between absolute inset-x-0 text-white px-3 md:px-8 top-4 lg:px-24">
         <div className="flex  z-10 items-center p-2 basis-2/5 justify-between ">
           <Logo />
           <ScrollIntoView selector="#home">
@@ -31,7 +32,7 @@ const Header = () => {
           <ButtonComponent title="Get started" mode="light" />
         </a>
       </header>
-      <header className="md:hidden flex  items-center justify-between">
+      <header className="md:hidden flex  items-center justify-between absolute inset-x-0 px-3 md:px-8 lg:px-24 pt-10">
         <Logo />
         <a href="https://play.google.com/store/apps/details?id=com.africartzstore.com">
           <ButtonComponent title="Get started" mode="light" />
@@ -44,7 +45,7 @@ const Header = () => {
             open ? "mobile-nav__open" : "mobile-nav__close"
           }   z-10  bg-darkest`}
         >
-          <div className="text-xl flex  h-[100vh] leading-loose tracking-widest flex-col items-center justify-center font-black font-rubik">
+          <div className="text-xl flex  h-[100vh] leading-loose tracking-widest flex-col items-center justify-center font-black font-rubik text-white">
             <div onClick={() => setOpen(!open)} className="my-4">
               {" "}
               <ScrollIntoView selector="#home">Home</ScrollIntoView>
@@ -59,6 +60,7 @@ const Header = () => {
           </div>
         </aside>
       </header>
+      <Outlet />
     </>
   );
 };

src/index.jsx

@@ -1,6 +1,7 @@
 import Logo from "./components/logo";
 import Header from "./header";
 import Footer from "./footer";
+import SiteMap from "./sitemap";
 import herobg from "./assets/hero_image.png";
 import blur_light from "./assets/blur_light.png";
 
@@ -10,7 +11,6 @@ import Projects from "./projects";
 import Testimonial from "./testimonial";
 import Faqs from "./faqs";
 import Contact from "./contact";
-
 import { BsApple } from "react-icons/bs";
 import { IoLogoGooglePlaystore } from "react-icons/io5";
 
@@ -32,8 +32,7 @@ const Page = () => {
         id="home"
         className="bg-darkest md:h-fit lg:h-screen py-4 px-3 md:px-8 lg:px-24 text-white"
       >
-        <Header />
-        <section className=" relative block md:flex py-1 justify-between items-center">
+        <section className=" relative block md:flex pt-20 py-1 justify-between items-center">
           <div className="md:max-w-xl w-full mt-10  ">
             <motion.h1
               // style={{ lineHeight: "4.5rem" }}
@@ -95,7 +94,7 @@ const Page = () => {
                   <p className="text-xs">Available Now</p>
                   <h2 className="text-base font-medium">
                     {" "}
-                    <a href="https://play.google.com/store/apps/details?id=com.africartzstore.com">
+                    <a href="https://play.google.com/store/apps/details?id=com.africartzng.com">
                       Play Store
                     </a>
                   </h2>
@@ -229,6 +228,7 @@ const Page = () => {
           </section>
         </motion.div>
       </section>
+      {/* <SiteMap /> */}
       <Footer />
     </main>
   );

src/main.jsx

@@ -1,10 +1,13 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
+import { BrowserRouter as Router} from 'react-router-dom'; 
 import App from './App'
 import './index.css'
 
 ReactDOM.createRoot(document.getElementById('root')).render(
   <React.StrictMode>
-    <App />
+    <Router>
+      <App />
+    </Router>
   </React.StrictMode>,
 )

src/sitemap.jsx

@@ -0,0 +1,18 @@
+const SiteMap = () => {
+    return(
+        <>
+            <urlset
+                xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
+                xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+                xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9
+                        http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd">
+            <url>
+                <loc>https://www.africartz.com/</loc>
+                <lastmod>2023-04-22T15:09:12+00:00</lastmod>
+            </url>
+            </urlset>
+        </>
+    )
+}
+
+export default SiteMap; 

src/sitemap.xml

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<urlset
+      xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
+      xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+      xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9
+            http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd">
+<!-- created with Free Online Sitemap Generator www.xml-sitemaps.com -->
+
+
+<url>
+  <loc>https://www.africartz.com/</loc>
+  <lastmod>2023-04-22T15:09:12+00:00</lastmod>
+</url>
+
+
+</urlset>