feat: ourblock section

app/layout.tsx

@@ -4,6 +4,7 @@ import "styles/custom.css"
 import Navbar from "components/Navbar/Navbar"
 
 import Footer from "components/Footer/Footer"
+import { FloatingWhatsApp } from "react-floating-whatsapp"
 
 // import SmoothScroll from "utils/ScrollAnimations/SmoothScroll"
 
@@ -13,7 +14,15 @@ export default function RootLayout({ children }: { children: React.ReactNode })
       <body className="bg-[#0f172a] ">
         {/* <SmoothScroll> */}
         <Navbar logoSrc="/images/logo.webp" />
-        {children}
+        {children}{" "}
+        <FloatingWhatsApp
+          phoneNumber="0704235666"
+          accountName="Vizole Labs"
+          allowEsc
+          allowClickAway
+          notification
+          notificationSound
+        />
         <Footer />
         {/* </SmoothScroll> */}
       </body>

app/page.tsx

@@ -6,6 +6,7 @@ import Hero01 from "components/Hero01/Hero01"
 import OurServices from "components/OurServices/OurServices"
 import Portfolio from "components/Portfolio/Portfolio"
 import ContactUs from "components/ContactUs/ContactUs"
+import OurBlog from "components/ourblog/OurBlog"
 
 export default function Web() {
   return (
@@ -31,6 +32,11 @@ export default function Web() {
           <ContactUs />
         </section>
       </div>
+      <div>
+        <section id="contactUs" className="bg-[#0f172a] max-md:p-4 md:pl-0 md:pr-0 lg:pl-[10%] lg:pr-[10%]">
+          <OurBlog />
+        </section>
+      </div>
     </div>
   )
 }

components/Navbar/Navbar.tsx

@@ -12,6 +12,15 @@ const Navbar: React.FC<NavbarProps> = ({ logoSrc }) => {
   const [showBackground, setShowBackground] = useState(false)
   const TOP_OFFSET = 50
 
+  const navLinks = {
+    home: "#home",
+    services: "#services",
+    portfolio: "#portfolio",
+    aboutUs: "#aboutUs",
+    signIn: "/auth/SignIn",
+    signUp: "/auth/SignUp",
+  }
+
   useEffect(() => {
     const handleScroll = () => {
       if (window.scrollY >= TOP_OFFSET) {

components/ourblog/OurBlog.tsx

@@ -0,0 +1,95 @@
+export default function OurBlog() {
+  return (
+    <div className="mx-auto max-w-screen-xl px-4 py-8 lg:px-6 lg:py-16">
+      <div className="mx-auto mb-8 max-w-screen-sm text-center lg:mb-16">
+        <h2 className="mb-4 text-3xl font-extrabold tracking-tight text-white lg:text-4xl">Our Blog</h2>
+        <p className="font-light text-gray-400 sm:text-xl">
+          We use an agile approach to test assumptions and connect with the needs of your audience early and often.
+        </p>
+      </div>
+      <div className="grid gap-8 lg:grid-cols-2">
+        <article className="rounded-lg border border-gray-700 bg-gray-800 p-6 shadow-md">
+          <div className="mb-5 flex items-center justify-between text-gray-500">
+            <span className="inline-flex items-center rounded  bg-primary-200 px-2.5 py-0.5 text-xs  font-medium text-primary-800">
+              <svg className="mr-1 h-3 w-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+                <path d="M2 6a2 2 0 012-2h6a2 2 0 012 2v8a2 2 0 01-2 2H4a2 2 0 01-2-2V6zM14.553 7.106A1 1 0 0014 8v4a1 1 0 00.553.894l2 1A1 1 0 0018 13V7a1 1 0 00-1.447-.894l-2 1z"></path>
+              </svg>
+              Tutorial
+            </span>
+            <span className="text-sm">14 days ago</span>
+          </div>
+          <h2 className="mb-2 text-2xl font-bold tracking-tight text-white">
+            <a href="#">How to quickly deploy a static website</a>
+          </h2>
+          <p className="mb-5 font-light text-gray-400">
+            Static websites are now used to bootstrap lots of websites and are becoming the basis for a variety of tools
+            that even influence both web designers and developers influence both web designers and developers.
+          </p>
+          <div className="flex items-center justify-between">
+            <div className="flex items-center space-x-4">
+              <img
+                className="h-7 w-7 rounded-full"
+                src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/avatars/jese-leos.png"
+                alt="Jese Leos avatar"
+              />
+              <span className="font-medium text-white">Jese Leos</span>
+            </div>
+            <a href="#" className="inline-flex items-center font-medium  text-[#F5887A] hover:underline">
+              Read more
+              <svg className="ml-2 h-4 w-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+                <path
+                  fill-rule="evenodd"
+                  d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
+                  clip-rule="evenodd"
+                ></path>
+              </svg>
+            </a>
+          </div>
+        </article>
+        <article className="rounded-lg border border-gray-700 bg-gray-800 p-6 shadow-md">
+          <div className="mb-5 flex items-center justify-between text-gray-500">
+            <span className="inline-flex items-center rounded  bg-primary-200 px-2.5 py-0.5 text-xs font-medium text-primary-800 dark:text-primary-800">
+              <svg className="mr-1 h-3 w-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+                <path
+                  fill-rule="evenodd"
+                  d="M2 5a2 2 0 012-2h8a2 2 0 012 2v10a2 2 0 002 2H4a2 2 0 01-2-2V5zm3 1h6v4H5V6zm6 6H5v2h6v-2z"
+                  clip-rule="evenodd"
+                ></path>
+                <path d="M15 7h1a2 2 0 012 2v5.5a1.5 1.5 0 01-3 0V7z"></path>
+              </svg>
+              Article
+            </span>
+            <span className="text-sm">14 days ago</span>
+          </div>
+          <h2 className="mb-2 text-2xl font-bold tracking-tight text-white">
+            <a href="#">Our first project with React</a>
+          </h2>
+          <p className="mb-5 font-light text-gray-400">
+            Static websites are now used to bootstrap lots of websites and are becoming the basis for a variety of tools
+            that even influence both web designers and developers influence both web designers and developers.
+          </p>
+          <div className="flex items-center justify-between">
+            <div className="flex items-center space-x-4">
+              <img
+                className="h-7 w-7 rounded-full"
+                src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/avatars/bonnie-green.png"
+                alt="Bonnie Green avatar"
+              />
+              <span className="font-medium text-white">Bonnie Green</span>
+            </div>
+            <a href="#" className="inline-flex items-center font-medium text-[#F5887A] hover:underline ">
+              Read more
+              <svg className="ml-2 h-4 w-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+                <path
+                  fill-rule="evenodd"
+                  d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
+                  clip-rule="evenodd"
+                ></path>
+              </svg>
+            </a>
+          </div>
+        </article>
+      </div>
+    </div>
+  )
+}

package.json

@@ -68,6 +68,7 @@
     "nodemailer": "^6.9.13",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-floating-whatsapp": "^5.0.8",
     "react-hook-form": "^7.51.3",
     "react-icons": "^5.0.1",
     "react-intersection-observer": "^9.8.2",