fireclint · BezzB · Feb 4, 2024 · Feb 5, 2024 · Feb 5, 2024
diff --git a/components/AboutUs.jsx b/components/AboutUs.jsx
@@ -0,0 +1,94 @@
+import React from "react";
+import Head from "next/head";
+import Image from "next/image";
+
+const AboutUsPage = () => {
+  // Define primary color
+  const primaryColor = "#336699"; // Change to your preferred primary color
+
+  return (
+    <div className="max-container py-12" style={{ background: "linear-gradient(to right, #FFD700, #001F3F)" }}>
+      {/* Head section ... */}
+      <Head>
+        <title>Bay Multistruct - About Us</title>
+        <meta
+          name="description"
+          content="Learn more about Bay Multistruct, our vision, mission, and core values."
+        />
+        {/* Add more SEO metadata as needed */}
+      </Head>
+
+      {/* About Us Section */}
+      <section className="p-8 bg-white rounded-md shadow-md md:flex items-center justify-center">
+        {/* Image to the left for larger screens */}
+        <div className="mr-8 hidden md:block">
+          <Image src="/hero2.jpg" alt="About Us Image" width={900} height={500} />
+        </div>
+
+        {/* Text content */}
+        <div>
+          <h1 className="text-4xl font-bold mb-4 text-primary">About Bay Multistruct</h1>
+          <p className="text-xl text-gray-700">
+            Bay Multistruct is a respected contractor committed to delivering beyond expectations.
+            With a focus on quality, value, and efficiency, we strive to achieve excellence
+            in every project we undertake.
+          </p>
+        </div>
+
+        {/* Image as a background for smaller screens */}
+        <div className="md:hidden">
+          <div
+            className="bg-cover bg-center w-full h-40 mb-4"
+            style={{ backgroundImage: `url('/hero2.jpg')` }}
+          />
+        </div>
+      </section>
+
+      {/* Container for Vision, Mission, Core Values */}
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-8 p-8 bg-white rounded-md shadow-md mb-8">
+        {/* Vision Section */}
+        <div className="border border-primary rounded-md overflow-hidden transition duration-300 transform hover:scale-105 hover:shadow-lg hover:border-opacity-0">
+          <div className="p-4 flex flex-col items-center">
+            <Image src="/vision-1.png" alt="Vision Image" width={80} height={80} />
+            <h2 className="text-3xl font-bold mb-4 text-primary">Vision</h2>
+            <p className="text-xl text-gray-700 text-center">
+              To be a respectable contractor delivering beyond expectation, always.
+            </p>
+          </div>
+        </div>
+
+        {/* Mission Section */}
+        <div className="border border-primary rounded-md overflow-hidden transition duration-300 transform hover:scale-105 hover:shadow-lg hover:border-opacity-0">
+          <div className="p-4 flex flex-col items-center">
+            <Image src="/mission.png" alt="Mission Image" width={80} height={80} />
+            <h2 className="text-3xl font-bold mb-4 text-primary">Mission</h2>
+            <p className="text-xl text-gray-700 text-center">
+              To procure projects at competitive pricing, provide safe working conditions,
+              and deliver quality work within a reasonable time frame.
+            </p>
+          </div>
+        </div>
+
+        {/* Core Values Section */}
+        <div className="border border-primary rounded-md overflow-hidden transition duration-300 transform hover:scale-105 hover:shadow-lg hover:border-opacity-0">
+          <div className="p-4 flex flex-col items-center">
+            <Image src="/corevalues.jpg" alt="Core Values Image" width={80} height={80} />
+            <h2 className="text-3xl font-bold mb-4 text-primary">Core Values</h2>
+            <ul className="list-inside text-gray-700 text-center">
+            <li>Accountability</li>
+            <li>Discipline</li>
+              <li>Quality</li>
+              <li>Value</li>              
+              <li>Integrity</li>              
+              <li>Delivery</li>
+
+              <li>Efficiency</li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default AboutUsPage;
diff --git a/components/Button.jsx b/components/Button.jsx
@@ -0,0 +1,16 @@
+import Image from "next/image";
+import React from "react";
+
+const Button = ({ type, title, icon, variant, full }) => {
+  return (
+    <button
+      className={`flexCenter gap-2 rounded-full border ${variant} ${full && 'w-full'}`}
+      type={type}
+    >
+      {icon && <Image src={icon} alt={title} width={18} height={20} />}
+      <label className="bold-16 whitespace-nowrap cursor-pointer">{title}</label>
+    </button>
+  );
+}
+
+export default Button;
diff --git a/components/Contact.jsx b/components/Contact.jsx
@@ -1,9 +1,9 @@
-import React from 'react'
+import React from 'react';
 
 const Contact = () => {
   return (
     <div className='max-w-[1240px] m-auto p-4 h-screen'>
-        <h1 className='text-2xl font-bold text-center p-4'>Let's work together</h1>
+        <h1 className='text-2xl font-bold text-center p-4'>Let&rsquo;s work together</h1>
         <form className='max-w-[600px] m-auto'>
             <div className='grid grid-cols-2 gap-2'>
                 <input className='border shadow-lg p-3' type="text" placeholder='Name' />
@@ -14,7 +14,7 @@ const Contact = () => {
             <button className='border shadow-lg p-3 w-full mt-2'>Submit</button>
         </form>
     </div>
-  )
-}
+  );
+};
 
-export default Contact
+export default Contact;
diff --git a/components/Hero.jsx b/components/Hero.jsx
@@ -1,16 +1,35 @@
 import React from 'react';
+import Image from 'next/image';
+import Link from 'next/link'; // Import Link from 'next/link' directly
 
-const Hero = ({heading, message}) => {
+const Hero = () => {
   return (
-    <div className='flex items-center justify-center h-screen mb-12 bg-fixed bg-center bg-cover custom-img'>
-      {/* Overlay */}
-      <div className='absolute top-0 left-0 right-0 bottom-0 bg-black/70 z-[2]' />
-      <div className='p-5 text-white z-[2] mt-[-10rem]'>
-        <h2 className='text-5xl font-bold'>{heading}</h2>
-        <p className='py-5 text-xl'>{message}</p>
-        <button className='px-8 py-2 border'>Book</button>
+    <section className="hero-section relative flex flex-col items-center justify-center h-screen overflow-hidden">
+      <Image
+        src="/hero1.png" // Replace with your actual hero image
+        alt="Hero image"
+        layout="fill"
+        objectFit="cover"
+        objectPosition="center bottom" // Adjust this line to position the image at the lower quarter
+      />
+      <div className="hero-content absolute top-0 left-0 right-0 bottom-0 flex flex-col items-center justify-center px-4 py-8 text-center">
+        {/* Add your logo or text here */}
+        <h1 className="text-4xl font-bold mb-4">Professional Construction Services</h1>
+        <h2 className="text-2xl font-bold mb-4">Building Your Success, Brick By Brick</h2>
+        <p className="text-base text-gray-300 mb-8">
+          Your trusted construction partner for quality projects and client satisfaction.
+        </p>
+        {/* Replace with your desired buttons */}
+        <div className="flex items-center justify-center gap-4">
+          <Link href="/services">
+            <a className="btn btn-primary py-5">Explore Services</a>
+          </Link>
+          <Link href="/contact">
+            <a className="btn btn-outline py-5">Get a Quote</a>
+          </Link>
+        </div>
       </div>
-    </div>
+    </section>
   );
 };
 

diff --git a/components/Instagram.jsx b/components/Instagram.jsx
diff --git a/components/InstagramImg.jsx b/components/InstagramImg.jsx
diff --git a/components/Navbar.jsx b/components/Navbar.jsx
@@ -1,6 +1,7 @@
 import Link from 'next/link';
 import React, { useState, useEffect } from 'react';
 import { AiOutlineMenu, AiOutlineClose } from 'react-icons/ai';
+import Image from 'next/image'
 
 const Navbar = () => {
   const [nav, setNav] = useState(false);
@@ -30,20 +31,25 @@ const Navbar = () => {
       className='fixed left-0 top-0 w-full z-10 ease-in duration-300'
     >
       <div className='max-w-[1240px] m-auto flex justify-between items-center p-4 text-white'>
-        <Link href='/'>
-          <h1 style={{ color: `${textColor}` }} className='font-bold text-4xl'>
-            Captur
-          </h1>
-        </Link>
+      <Link href='/'>
+  <Image
+    src="/image001.png"
+    alt="logo"
+    height={40} // Adjust the height to fit your design
+    width={140}  // Adjust the width to fit your design
+    className="logo-image" // Add your custom class here
+  />
+</Link>
+
         <ul style={{ color: `${textColor}` }} className='hidden sm:flex'>
           <li className='p-4'>
             <Link href='/'>Home</Link>
           </li>
           <li className='p-4'>
-            <Link href='/#gallery'>Gallery</Link>
+            <Link href='/aboutus'>AboutUs </Link>
           </li>
           <li className='p-4'>
-            <Link href='/work'>Work</Link>
+            <Link href='/services'>Services</Link>
           </li>
           <li className='p-4'>
             <Link href='/contact'>Contact</Link>