diff --git a/src/components/AppNav.js b/src/components/AppNav.js
new file mode 100644
index 0000000..7ed290d
--- /dev/null
+++ b/src/components/AppNav.js
@@ -0,0 +1,21 @@
+import React, { Component } from 'react'
+
+export class AppNav extends Component {
+    render() {
+        return (
+            <nav id="mobile-menu">
+                <ul>
+                    <li>
+                        <a href="index.php">home</a>
+                    </li>
+
+                    <li>
+                        <a href="contact.php">contact us</a>
+                    </li>
+                </ul>
+            </nav>
+        )
+    }
+}
+
+export default AppNav
diff --git a/src/components/footer.js b/src/components/footer.js
new file mode 100644
index 0000000..3bdea14
--- /dev/null
+++ b/src/components/footer.js
@@ -0,0 +1,73 @@
+import React from "react"
+
+const Footer = () => (
+
+    <section id="footer-fixed">
+        <div className="big-footer">
+            <div className="container">
+                <div className="row">
+                    <div className="col-xl-3 col-lg-3 col-md-3 col-sm-6">
+                        <div className="footer-logo">
+                            <a href="index.php">
+                                <img src="img/footer-logo.png" alt="" />
+                            </a>
+                            <p>
+                                Our success is measured by your success.
+                            For us it’s not just creating something that looks great, it needs <br />to deliver results
+                                for you.
+                        </p>
+                        </div>
+                        <div className="social">
+                            <ul>
+                                <li><a className="footer-socials" href="#"><i className="fa fa-instagram"></i></a></li>
+                                <li><a className="footer-socials" href="#"><i className="fa fa-twitter"></i></a></li>
+                                <li><a className="footer-socials" href="#"><i className="fa fa-linkedin"></i></a></li>
+                            </ul>
+                        </div>
+                    </div>
+                    <div className="col-xl-3 col-lg-3 col-md-3 col-sm-6">
+                        <div className="footer-heading">
+                            <h3>quick links</h3>
+                        </div>
+                        <div className="footer-content">
+                            <ul>
+                                <li><a href="about-us.php">about us</a></li>
+                                <li><a href="contact.php">contact us</a></li>
+                                <li><a href="#">privacy policy</a></li>
+                            </ul>
+                        </div>
+                    </div>
+                    <div className="col-xl-3 col-lg-3 col-md-3 col-sm-6">
+                        <div className="footer-heading">
+                            <h3>Latest works</h3>
+                        </div>
+                        <div className="footer-content">
+                            <ul>
+                                <li><a href="http://csmarttravel.com">C Smart Website</a></li>
+                                <li><a href="http://mbashaholdings.com/all">Mbasha Holdings Ltd</a></li>
+                                <li><a href="http://expectinafricasafari.com/">Expect In Africa Safari</a></li>
+                            </ul>
+                        </div>
+                    </div>
+                    <div className="col-xl-3 col-lg-3 col-md-3 col-sm-6">
+                        <div className="footer-heading">
+                            <h3>Let us know you were here</h3>
+                        </div>
+                        <div className="footer-content footer-cont-mar-40">
+                            <form action="#">
+                                <input id="leadgenaration" type="email" placeholder="Enter your email" />
+                                <input id="subscribe" type="submit" value="send" />
+                            </form>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <footer>
+            <p>All rights reserved @ Emanate {new Date().getFullYear()}.</p>
+        </footer>
+    </section>
+)
+
+
+export default Footer
diff --git a/src/components/header.js b/src/components/header.js
index 8990b7e..eead936 100644
--- a/src/components/header.js
+++ b/src/components/header.js
@@ -1,34 +1,29 @@
-import { Link } from "gatsby"
+import AppNav from "./AppNav"
 import PropTypes from "prop-types"
 import React from "react"
 
 const Header = ({ siteTitle }) => (
-  <header
-    style={{
-      background: `rebeccapurple`,
-      marginBottom: `1.45rem`,
-    }}
-  >
-    <div
-      style={{
-        margin: `0 auto`,
-        maxWidth: 960,
-        padding: `1.45rem 1.0875rem`,
-      }}
-    >
-      <h1 style={{ margin: 0 }}>
-        <Link
-          to="/"
-          style={{
-            color: `white`,
-            textDecoration: `none`,
-          }}
-        >
-          {siteTitle}
-        </Link>
-      </h1>
+  <header id="home">
+    <div class="main-navigation">
+      <div class="container">
+        <div class="row">
+          <div class="col-xl-2 col-lg-3 col-md-3">
+            <div class="logo-area">
+              <a href="/"><img src="img/logo.png" alt="enventer" /></a>
+            </div>
+          </div>
+          <div class="col-xl-10 col-lg-9 col-md-9">
+            <div class="main-menu f-right">
+              <AppNav />
+            </div>
+            <div class="mobile-menu"></div>
+          </div>
+        </div>
+      </div>
     </div>
   </header>
+
+
 )
 
 Header.propTypes = {
diff --git a/src/components/layout.css b/src/components/layout.css
index b6f6332..e69de29 100644
--- a/src/components/layout.css
+++ b/src/components/layout.css
@@ -1,622 +0,0 @@
-html {
-  font-family: sans-serif;
-  -ms-text-size-adjust: 100%;
-  -webkit-text-size-adjust: 100%;
-}
-body {
-  margin: 0;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-article,
-aside,
-details,
-figcaption,
-figure,
-footer,
-header,
-main,
-menu,
-nav,
-section,
-summary {
-  display: block;
-}
-audio,
-canvas,
-progress,
-video {
-  display: inline-block;
-}
-audio:not([controls]) {
-  display: none;
-  height: 0;
-}
-progress {
-  vertical-align: baseline;
-}
-[hidden],
-template {
-  display: none;
-}
-a {
-  background-color: transparent;
-  -webkit-text-decoration-skip: objects;
-}
-a:active,
-a:hover {
-  outline-width: 0;
-}
-abbr[title] {
-  border-bottom: none;
-  text-decoration: underline;
-  text-decoration: underline dotted;
-}
-b,
-strong {
-  font-weight: inherit;
-  font-weight: bolder;
-}
-dfn {
-  font-style: italic;
-}
-h1 {
-  font-size: 2em;
-  margin: 0.67em 0;
-}
-mark {
-  background-color: #ff0;
-  color: #000;
-}
-small {
-  font-size: 80%;
-}
-sub,
-sup {
-  font-size: 75%;
-  line-height: 0;
-  position: relative;
-  vertical-align: baseline;
-}
-sub {
-  bottom: -0.25em;
-}
-sup {
-  top: -0.5em;
-}
-img {
-  border-style: none;
-}
-svg:not(:root) {
-  overflow: hidden;
-}
-code,
-kbd,
-pre,
-samp {
-  font-family: monospace, monospace;
-  font-size: 1em;
-}
-figure {
-  margin: 1em 40px;
-}
-hr {
-  box-sizing: content-box;
-  height: 0;
-  overflow: visible;
-}
-button,
-input,
-optgroup,
-select,
-textarea {
-  font: inherit;
-  margin: 0;
-}
-optgroup {
-  font-weight: 700;
-}
-button,
-input {
-  overflow: visible;
-}
-button,
-select {
-  text-transform: none;
-}
-[type="reset"],
-[type="submit"],
-button,
-html [type="button"] {
-  -webkit-appearance: button;
-}
-[type="button"]::-moz-focus-inner,
-[type="reset"]::-moz-focus-inner,
-[type="submit"]::-moz-focus-inner,
-button::-moz-focus-inner {
-  border-style: none;
-  padding: 0;
-}
-[type="button"]:-moz-focusring,
-[type="reset"]:-moz-focusring,
-[type="submit"]:-moz-focusring,
-button:-moz-focusring {
-  outline: 1px dotted ButtonText;
-}
-fieldset {
-  border: 1px solid silver;
-  margin: 0 2px;
-  padding: 0.35em 0.625em 0.75em;
-}
-legend {
-  box-sizing: border-box;
-  color: inherit;
-  display: table;
-  max-width: 100%;
-  padding: 0;
-  white-space: normal;
-}
-textarea {
-  overflow: auto;
-}
-[type="checkbox"],
-[type="radio"] {
-  box-sizing: border-box;
-  padding: 0;
-}
-[type="number"]::-webkit-inner-spin-button,
-[type="number"]::-webkit-outer-spin-button {
-  height: auto;
-}
-[type="search"] {
-  -webkit-appearance: textfield;
-  outline-offset: -2px;
-}
-[type="search"]::-webkit-search-cancel-button,
-[type="search"]::-webkit-search-decoration {
-  -webkit-appearance: none;
-}
-::-webkit-input-placeholder {
-  color: inherit;
-  opacity: 0.54;
-}
-::-webkit-file-upload-button {
-  -webkit-appearance: button;
-  font: inherit;
-}
-html {
-  font: 112.5%/1.45em georgia, serif;
-  box-sizing: border-box;
-  overflow-y: scroll;
-}
-* {
-  box-sizing: inherit;
-}
-*:before {
-  box-sizing: inherit;
-}
-*:after {
-  box-sizing: inherit;
-}
-body {
-  color: hsla(0, 0%, 0%, 0.8);
-  font-family: georgia, serif;
-  font-weight: normal;
-  word-wrap: break-word;
-  font-kerning: normal;
-  -moz-font-feature-settings: "kern", "liga", "clig", "calt";
-  -ms-font-feature-settings: "kern", "liga", "clig", "calt";
-  -webkit-font-feature-settings: "kern", "liga", "clig", "calt";
-  font-feature-settings: "kern", "liga", "clig", "calt";
-}
-img {
-  max-width: 100%;
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-}
-h1 {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-  color: inherit;
-  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
-    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
-  font-weight: bold;
-  text-rendering: optimizeLegibility;
-  font-size: 2.25rem;
-  line-height: 1.1;
-}
-h2 {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-  color: inherit;
-  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
-    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
-  font-weight: bold;
-  text-rendering: optimizeLegibility;
-  font-size: 1.62671rem;
-  line-height: 1.1;
-}
-h3 {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-  color: inherit;
-  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
-    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
-  font-weight: bold;
-  text-rendering: optimizeLegibility;
-  font-size: 1.38316rem;
-  line-height: 1.1;
-}
-h4 {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-  color: inherit;
-  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
-    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
-  font-weight: bold;
-  text-rendering: optimizeLegibility;
-  font-size: 1rem;
-  line-height: 1.1;
-}
-h5 {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-  color: inherit;
-  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
-    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
-  font-weight: bold;
-  text-rendering: optimizeLegibility;
-  font-size: 0.85028rem;
-  line-height: 1.1;
-}
-h6 {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-  color: inherit;
-  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
-    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
-  font-weight: bold;
-  text-rendering: optimizeLegibility;
-  font-size: 0.78405rem;
-  line-height: 1.1;
-}
-hgroup {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-}
-ul {
-  margin-left: 1.45rem;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-  list-style-position: outside;
-  list-style-image: none;
-}
-ol {
-  margin-left: 1.45rem;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-  list-style-position: outside;
-  list-style-image: none;
-}
-dl {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-}
-dd {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-}
-p {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-}
-figure {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-}
-pre {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  margin-bottom: 1.45rem;
-  font-size: 0.85rem;
-  line-height: 1.42;
-  background: hsla(0, 0%, 0%, 0.04);
-  border-radius: 3px;
-  overflow: auto;
-  word-wrap: normal;
-  padding: 1.45rem;
-}
-table {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-  font-size: 1rem;
-  line-height: 1.45rem;
-  border-collapse: collapse;
-  width: 100%;
-}
-fieldset {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-}
-blockquote {
-  margin-left: 1.45rem;
-  margin-right: 1.45rem;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-}
-form {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-}
-noscript {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-}
-iframe {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-}
-hr {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: calc(1.45rem - 1px);
-  background: hsla(0, 0%, 0%, 0.2);
-  border: none;
-  height: 1px;
-}
-address {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-}
-b {
-  font-weight: bold;
-}
-strong {
-  font-weight: bold;
-}
-dt {
-  font-weight: bold;
-}
-th {
-  font-weight: bold;
-}
-li {
-  margin-bottom: calc(1.45rem / 2);
-}
-ol li {
-  padding-left: 0;
-}
-ul li {
-  padding-left: 0;
-}
-li > ol {
-  margin-left: 1.45rem;
-  margin-bottom: calc(1.45rem / 2);
-  margin-top: calc(1.45rem / 2);
-}
-li > ul {
-  margin-left: 1.45rem;
-  margin-bottom: calc(1.45rem / 2);
-  margin-top: calc(1.45rem / 2);
-}
-blockquote *:last-child {
-  margin-bottom: 0;
-}
-li *:last-child {
-  margin-bottom: 0;
-}
-p *:last-child {
-  margin-bottom: 0;
-}
-li > p {
-  margin-bottom: calc(1.45rem / 2);
-}
-code {
-  font-size: 0.85rem;
-  line-height: 1.45rem;
-}
-kbd {
-  font-size: 0.85rem;
-  line-height: 1.45rem;
-}
-samp {
-  font-size: 0.85rem;
-  line-height: 1.45rem;
-}
-abbr {
-  border-bottom: 1px dotted hsla(0, 0%, 0%, 0.5);
-  cursor: help;
-}
-acronym {
-  border-bottom: 1px dotted hsla(0, 0%, 0%, 0.5);
-  cursor: help;
-}
-abbr[title] {
-  border-bottom: 1px dotted hsla(0, 0%, 0%, 0.5);
-  cursor: help;
-  text-decoration: none;
-}
-thead {
-  text-align: left;
-}
-td,
-th {
-  text-align: left;
-  border-bottom: 1px solid hsla(0, 0%, 0%, 0.12);
-  font-feature-settings: "tnum";
-  -moz-font-feature-settings: "tnum";
-  -ms-font-feature-settings: "tnum";
-  -webkit-font-feature-settings: "tnum";
-  padding-left: 0.96667rem;
-  padding-right: 0.96667rem;
-  padding-top: 0.725rem;
-  padding-bottom: calc(0.725rem - 1px);
-}
-th:first-child,
-td:first-child {
-  padding-left: 0;
-}
-th:last-child,
-td:last-child {
-  padding-right: 0;
-}
-tt,
-code {
-  background-color: hsla(0, 0%, 0%, 0.04);
-  border-radius: 3px;
-  font-family: "SFMono-Regular", Consolas, "Roboto Mono", "Droid Sans Mono",
-    "Liberation Mono", Menlo, Courier, monospace;
-  padding: 0;
-  padding-top: 0.2em;
-  padding-bottom: 0.2em;
-}
-pre code {
-  background: none;
-  line-height: 1.42;
-}
-code:before,
-code:after,
-tt:before,
-tt:after {
-  letter-spacing: -0.2em;
-  content: " ";
-}
-pre code:before,
-pre code:after,
-pre tt:before,
-pre tt:after {
-  content: "";
-}
-@media only screen and (max-width: 480px) {
-  html {
-    font-size: 100%;
-  }
-}
diff --git a/src/components/layout.js b/src/components/layout.js
index 8d55987..5d87632 100644
--- a/src/components/layout.js
+++ b/src/components/layout.js
@@ -10,6 +10,7 @@ import PropTypes from "prop-types"
 import { useStaticQuery, graphql } from "gatsby"
 
 import Header from "./header"
+import Footer from "./footer"
 import "./layout.css"
 
 const Layout = ({ children }) => {
@@ -35,11 +36,8 @@ const Layout = ({ children }) => {
         }}
       >
         <main>{children}</main>
-        <footer>
-          © {new Date().getFullYear()}, Built with
-          {` `}
-          <a href="https://www.gatsbyjs.org">Gatsby</a>
-        </footer>
+       
+      <Footer />
       </div>
     </>
   )
diff --git a/src/pages/page-2.js b/src/pages/contact.js
similarity index 63%
rename from src/pages/page-2.js
rename to src/pages/contact.js
index 666c23e..167ccaf 100644
--- a/src/pages/page-2.js
+++ b/src/pages/contact.js
@@ -4,13 +4,13 @@ import { Link } from "gatsby"
 import Layout from "../components/layout"
 import SEO from "../components/seo"
 
-const SecondPage = () => (
+const ContactPage = () => (
   <Layout>
-    <SEO title="Page two" />
+    <SEO title="Contact" />
     <h1>Hi from the second page</h1>
     <p>Welcome to page 2</p>
-    <Link to="/">Go back to the homepage</Link>
+    <Link to="/">Go back to home</Link>
   </Layout>
 )
 
-export default SecondPage
+export default ContactPage
diff --git a/src/pages/index.js b/src/pages/index.js
index 7eb6257..dd7c82d 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -2,20 +2,303 @@ import React from "react"
 import { Link } from "gatsby"
 
 import Layout from "../components/layout"
-import Image from "../components/image"
 import SEO from "../components/seo"
 
 const IndexPage = () => (
   <Layout>
     <SEO title="Home" />
-    <h1>Hi people</h1>
-    <p>Welcome to your new Gatsby site.</p>
-    <p>Now go build something great.</p>
-    <div style={{ maxWidth: `300px`, marginBottom: `1.45rem` }}>
-      <Image />
+
+    <div>
+      <section>
+        <div class="header-content-area">
+          <div class="container">
+            <div class="header-pattern-1">
+              <img src="img/header-pattern-1.png" alt="" />
+            </div>
+            <div class="header-pattern-2">
+              <img src="img/header-pattern2.png" alt="" />
+            </div>
+            <div class="header-animation-area">
+              <div class="row">
+                <div class="col-xl-12 col-lg-12 col-md-12">
+                  <div class="intro-text">
+                    <h1 data-aos="slide-right" data-aos-anchor-placement="top-bottom" data-aos-delay="700"
+                      data-aos-duration="1200">Creativity is a most <br /> valuable asset</h1>
+                    <p data-aos="fade-in" data-aos-anchor-placement="top-bottom" data-aos-delay="1500"
+                      data-aos-duration="1200">Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+									<br />
+                      Quod ab tenetur itaque ullam repellendus ipsum! Nesciunt, <br /> deserunt porro nihil
+									culpa illo deleniti.</p>
+                    <div class="learnmore" data-aos="fade-in" data-aos-anchor-placement="top-bottom"
+                      data-aos-delay="1500" data-aos-duration="1200">
+                      <a href="contact.php" class="skill-btn">hire us</a>
+                    </div>
+                  </div>
+                </div>
+                <div class="header-1-artwork">
+                  <div class="layer">
+                  </div><img src="img/header-1-artwork.png" alt="" />
+                  <div class="layer-1" data-aos="fade-up" data-aos-anchor-placement="top-bottom"
+                    data-aos-delay="800" data-aos-duration="1000">
+                    <img src="img/man-in-board.png" alt="" />
+                  </div>
+                  <div class="layer-2" data-aos="fade-up" data-aos-anchor-placement="top-bottom"
+                    data-aos-delay="800" data-aos-duration="1000">
+                    <img src="img/man-in-pc.png" alt="" />
+                  </div>
+                  <div class="layer-3">
+                    <img src="img/spin.png" alt="" />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+
+      <section>
+        <div class="home-about-area">
+          <div class="container">
+            <div class="row">
+              <div class="col-xl-6 col-lg-6 col-md-6">
+                <div class="home-about-image">
+                  <img src="img/home-about.jpg" alt="" />
+                </div>
+              </div>
+              <div class="col-xl-6 col-lg-6 col-md-6">
+                <div class="section-heading-1 home-about-text">
+                  <h4>About US</h4>
+                  <h3>Know interesting things</h3>
+                  <p>At Emanate, we all come to work every day because we want to solve the biggest problem in Tanzania. Everyone is guessing. Developers don’t know what apps to build, how to monetize them, or even what to price them at. Advertisers & brands don’t know where their target users are, how to reach them, or even how much they need to spend in order to do so</p>
+                  <div class="section-button">
+                    <a href="about-us.php">Read More</a>
+                  </div>
+                  <div class="e-pattern">
+                    <img src="img/expertise/e-pattern.png" alt="" />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+
+      <section>
+        <div class="services-area">
+          <svg id="curve" data-name="layer 1" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 1416.99 174.01">
+            <path class="cls-1" d="M0,280.8S283.66,59,608.94,163.56s437.93,150.57,808,10.34V309.54H0V280.8Z"
+              transform="translate(0 -135.53)" />
+          </svg>
+          <div class="container">
+            <div class="row">
+              <div class="col-xl-6 col-lg-6 col-md-5 d-flex align-items-center">
+                <div class="section-heading-2 section-heading-2-p">
+                  <h4>our services</h4>
+                  <h3>Services We provides</h3>
+                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam placerat rutrum turpis,
+                    sit amet hendrerit metus vulputate id. Nulla laoreet maximus feugiat. Nullam rhoncus,
+                    orci vitae convallis venenatis Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+								Nullam placerat rutrum turpis, sit amet hendrerit metus.</p>
+                  <div class="section-button">
+                    <a href="contact.php">get service</a>
+                  </div>
+                </div>
+              </div>
+              <div class="col-xl-6 col-lg-6 col-md-7">
+                <div class="row">
+                  <div class="col-xl-6 col-lg-6 col-md-6 col-sm-6 d-flex align-items-center">
+                    <div class="single-service" data-aos="fadein" data-aos-anchor-placement="top-bottom"
+                      data-aos-delay="100" data-aos-duration="1000">
+                      <div class="service-icon">
+                        <img src="img/service/1.png" alt="" />
+                      </div>
+                      <div class="service-text">
+                        <h3>Website Design and Development</h3>
+                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam placerat
+											rutrum turpis.</p>
+                      </div>
+                      <div class="servive-p-1">
+                        <img src="img/service/service-p-1.png" alt="" />
+                      </div>
+                    </div>
+                  </div>
+                  <div class="col-xl-6 col-lg-6 col-md-6 col-sm-6 margin-top-sb-30">
+                    <div class="row">
+                      <div class="col-xl-12">
+                        <div class="single-service">
+                          <div class="service-icon">
+                            <img src="img/service/3.png" alt="" />
+                          </div>
+                          <div class="service-text">
+                            <h3>Web App Development</h3>
+                            <p>We build cloud data driven systems using the best web technologies ensuring security, integrety and reliability.</p>
+                          </div>
+                        </div>
+                      </div>
+                      <div class="col-xl-12">
+                        <div class="single-service service-mt-30" data-aos="fadein"
+                          data-aos-anchor-placement="top-bottom" data-aos-delay="300"
+                          data-aos-duration="1000">
+                          <div class="service-icon">
+                            <img src="img/service/2.png" alt="" />
+                          </div>
+                          <div class="service-text">
+                            <h3>UI/UX Design</h3>
+                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam
+													placerat rutrum turpis.</p>
+                          </div>
+                          <div class="servive-p-2">
+                            <img src="img/service/service-p-3.png" alt="" />
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+
+      <section>
+        <div class="portfolio-area">
+          <div class="container">
+            <div class="row">
+              <div class="col-xl-6 col-lg-6 col-md-6">
+                <div class="section-heading-2 portfolio-pattern">
+                  <h4>Case Study</h4>
+                  <h3>Our Recent Work</h3>
+                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam placerat rutrum turpis,
+								sit amet hendrerit metus vulputate id.</p>
+                  <div class="p-pattern">
+                    <img src="img/portfolio/p-pattern.png" alt="" />
+                  </div>
+                </div>
+              </div>
+              <div class="col-xl-6 col-lg-6 col-md-6">
+                <div class="portfolio-button-area">
+                  <div class="section-button">
+                    <a href="portfolio.php">view more</a>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="row portfolio-item-slider">
+              <div class="single-portfolio-item">
+                <img src="img/portfolio/p1.png" alt="" />
+                <div class="portfolio-item-content">
+                  <div class="item-icon">
+                    <a href="http://mbashaholdings.com/"><i class="fa fa-link"></i></a>
+                  </div>
+                  <div class="item-text">
+                    <h5>Mbasha Holdings Ltd</h5>
+                    <p>A full tailor made website for Mbasha Holdings Ltd  Arusha Leading Furniture Company.</p>
+                  </div>
+                </div>
+              </div>
+              <div class="single-portfolio-item">
+                <img src="img/portfolio/p1.png" alt="" />
+                <div class="portfolio-item-content">
+                  <div class="item-icon">
+                    <a href="#"><i class="fa fa-link"></i></a>
+                  </div>
+                  <div class="item-text">
+                    <h5>Expect In Africa Safari Tour Company</h5>
+                    <p>Website Designing for Expect In Africa Safari Tour company.</p>
+                  </div>
+                </div>
+              </div>
+              <div class="single-portfolio-item">
+                <img src="img/portfolio/p1.png" alt="" />
+                <div class="portfolio-item-content">
+                  <div class="item-icon">
+                    <a href="#"><i class="fa fa-link"></i></a>
+                  </div>
+                  <div class="item-text">
+                    <h5>Optimax Motors Company Tz</h5>
+                    <p>Website for Optimax Motors Tz a company which imports cars from Japan and UK.</p>
+                  </div>
+                </div>
+              </div>
+              <div class="single-portfolio-item">
+                <img src="img/portfolio/p1.png" alt="" />
+                <div class="portfolio-item-content">
+                  <div class="item-icon">
+                    <a href="http://c-smart.jamesemanuel.me/"><i class="fa fa-link"></i></a>
+                  </div>
+                  <div class="item-text">
+                    <h5>C-Smart Travel Company Ltd.</h5>
+                    <p>Website for C-Smart Travel company which provide meet & assist service in Kilimanjaro International Airport (JRO) & Arusha Airport (ARK).</p>
+                  </div>
+                </div>
+              </div>
+              <div class="single-portfolio-item">
+                <img src="img/portfolio/p1.png" alt="" />
+                <div class="portfolio-item-content">
+                  <div class="item-icon">
+                    <a href="http://fmf.astatine.co.tz/"><i class="fa fa-link"></i></a>
+                  </div>
+                  <div class="item-text">
+                    <h5>Flaviana Matata Foundation</h5>
+                    <p>Flaviana Matata Foundation Website Redesigning.</p>
+                  </div>
+                </div>
+              </div>
+
+
+
+              <div class="single-portfolio-item">
+                <img src="img/portfolio/p1.png" alt="" />
+                <div class="portfolio-item-content">
+                  <div class="item-icon">
+                    <a href="http://ihi.or.tz"><i class="fa fa-link"></i></a>
+                  </div>
+                  <div class="item-text">
+                    <h5>Ifakara Health Institute (IHI)</h5>
+                    <p>A system that assists Ifakara Health Institute (IHI) in administering and automating the Contract process. Functions can include grant discovery, budget planning, peer collaboration, regulatory compliance, proposal submission, administrative reporting and project tracking.</p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+
+      <section>
+        <div class="expertise-area">
+          <div class="container">
+            <div class="row">
+              <div class="col-xl-6 col-lg-6 col-md-6">
+                <div class="expertise-image">
+                  <img src="img/expertise/expertise.png" alt="" />
+                </div>
+              </div>
+              <div class="col-xl-6 col-lg-6 col-md-6 d-flex align-items-center">
+                <div class="section-heading-1 home-expertise-text">
+                  <h4>Experties</h4>
+                  <h3>Design & Developing</h3>
+                  <p>We believe in the power of open source software; We are committed to creating it, refining it, certifying it for reliability and promoting its use. As well as launching and running our own projects, we contribute staff, code and funding to many more.</p>
+                  <div class="section-button">
+                    <a href="contact.php">get quote</a>
+                  </div>
+                  <div class="e-pattern">
+                    <img src="img/expertise/e-pattern.png" alt="" />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
     </div>
-    <Link to="/page-2/">Go to page 2</Link>
-  </Layout>
+
+  </Layout >
 )
 
 export default IndexPage