fix the code and make the one bg image to apply to both Navbar and hero sections

and fix the issues from this code

ane make all the page same style

import Link from "next/link";
import { Button } from "@/components/ui/button";

export default function Component() {
  return (
    <div
      className="flex flex-col min-h-[100dvh] relative"
      style={{
        backgroundImage: "url('/bg3.png')",
        backgroundSize: "cover",
        backgroundPosition: "center",
        backgroundRepeat: "no-repeat",
      }}
    >
      <div className="absolute inset-0 bg-[url('/background.jpg')] bg-cover bg-center opacity-20 z-0" />
      <header className="flex items-center justify-between px-[30px] h-16 mt-[30px] relative z-10">
        <Link href="#" className="flex items-center" prefetch={false}>
          <img
            src="/Logo.png"
            width={48}
            height={48}
            alt="Logo"
            className="h-20 w-20"
          />
          <span className="sr-only">Acme Inc</span>
        </Link>
        <nav className="flex items-center gap-6">
          <Link
            href="#"
            className="hover:underline underline-offset-4"
            prefetch={false}
          >
            <img
              src="/Linkin.png"
              width={32}
              height={32}
              alt="Image 1"
              className="h-8 w-8"
            />
          </Link>
          <Link
            href="#"
            className="hover:underline underline-offset-4"
            prefetch={false}
          >
            <img
              src="/GitHub.png"
              width={32}
              height={32}
              alt="Image 2"
              className="h-8 w-8"
            />
          </Link>
          <Link
            href="#"
            className="hover:underline underline-offset-4"
            prefetch={false}
          >
            <img
              src="/X.png"
              width={32}
              height={32}
              alt="Image 3"
              className="h-8 w-8"
            />
          </Link>
        </nav>
      </header>
      <main className="flex-1 grid grid-cols-1 md:grid-cols-2 gap-8 px-[30px] py-12 md:py-24 relative z-10">
        <div className="space-y-4 flex flex-col items-center justify-center">
          <h1 className="text-4xl font-bold tracking-tight sm:text-5xl md:text-6xl">
            Welcome to Acme Inc
          </h1>
        </div>
        <img
          src="/hero-image2.png"
          width={600}
          height={400}
          alt="Hero"
          className="aspect-[3/2] overflow-hidden rounded-xl object-cover"
        />
      </main>
      <section className="bg-gray-100 py-12 md:py-24 dark:bg-gray-800 relative z-10">
        <div className="container mx-auto px-4 md:px-6">
          <div className="flex flex-col items-center space-y-6">
            <h2 className="text-3xl font-bold tracking-tight sm:text-4xl md:text-5xl">
              Our Projects
            </h2>
            <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
              <div className="bg-white rounded-lg shadow-md overflow-hidden dark:bg-gray-950">
                <img
                  src="/placeholder.svg"
                  width={500}
                  height={300}
                  alt="Project 1"
                  className="w-full h-48 object-cover"
                />
                <div className="p-4">
                  <h3 className="text-lg font-bold mb-2">Project 1</h3>
                  <p className="text-gray-500 dark:text-gray-400">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                  </p>
                </div>
              </div>
              <div className="bg-white rounded-lg shadow-md overflow-hidden dark:bg-gray-950">
                <img
                  src="/placeholder.svg"
                  width={500}
                  height={300}
                  alt="Project 2"
                  className="w-full h-48 object-cover"
                />
                <div className="p-4">
                  <h3 className="text-lg font-bold mb-2">Project 2</h3>
                  <p className="text-gray-500 dark:text-gray-400">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                  </p>
                </div>
              </div>
              <div className="bg-white rounded-lg shadow-md overflow-hidden dark:bg-gray-950">
                <img
                  src="/placeholder.svg"
                  width={500}
                  height={300}
                  alt="Project 3"
                  className="w-full h-48 object-cover"
                />
                <div className="p-4">
                  <h3 className="text-lg font-bold mb-2">Project 3</h3>
                  <p className="text-gray-500 dark:text-gray-400">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                  </p>
                </div>
              </div>
              <div className="bg-white rounded-lg shadow-md overflow-hidden dark:bg-gray-950">
                <img
                  src="/placeholder.svg"
                  width={500}
                  height={300}
                  alt="Project 4"
                  className="w-full h-48 object-cover"
                />
                <div className="p-4">
                  <h3 className="text-lg font-bold mb-2">Project 4</h3>
                  <p className="text-gray-500 dark:text-gray-400">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                  </p>
                </div>
              </div>
              <div className="bg-white rounded-lg shadow-md overflow-hidden dark:bg-gray-950">
                <img
                  src="/placeholder.svg"
                  width={500}
                  height={300}
                  alt="Project 5"
                  className="w-full h-48 object-cover"
                />
                <div className="p-4">
                  <h3 className="text-lg font-bold mb-2">Project 5</h3>
                  <p className="text-gray-500 dark:text-gray-400">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                  </p>
                </div>
              </div>
              <div className="bg-white rounded-lg shadow-md overflow-hidden dark:bg-gray-950">
                <img
                  src="/placeholder.svg"
                  width={500}
                  height={300}
                  alt="Project 6"
                  className="w-full h-48 object-cover"
                />
                <div className="p-4">
                  <h3 className="text-lg font-bold mb-2">Project 6</h3>
                  <p className="text-gray-500 dark:text-gray-400">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
      <section className="bg-gray-100 py-12 md:py-24 dark:bg-gray-800 relative z-10">
        <div className="container mx-auto px-4 md:px-6">
          <div className="flex flex-col items-center space-y-6">
            <h2 className="text-3xl font-bold tracking-tight sm:text-4xl md:text-5xl">
              Our Skills
            </h2>
            <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-6">
              <div className="bg-white rounded-lg shadow-md overflow-hidden dark:bg-gray-950 relative">
                <div className="absolute top-0 left-0 w-full h-full bg-gradient-to-br from-[#ff6b6b] to-[#ffa500] opacity-50 rounded-lg" />
                <div className="relative z-10 p-4 flex flex-col items-center justify-center h-full">
                  <img
                    src="/placeholder.svg"
                    width={64}
                    height={64}
                    alt="Skill 1"
                    className="h-16 w-16 mb-2"
                  />
                  <h3 className="text-lg font-bold mb-1">React</h3>
                  <p className="text-gray-500 dark:text-gray-400 text-center">
                    Build modern, responsive web applications with React.
                  </p>
                </div>
              </div>
              <div className="bg-white rounded-lg shadow-md overflow-hidden dark:bg-gray-950 relative">
                <div className="absolute top-0 left-0 w-full h-full bg-gradient-to-br from-[#9b59b6] to-[#8e44ad] opacity-50 rounded-lg" />
                <div className="relative z-10 p-4 flex flex-col items-center justify-center h-full">
                  <img
                    src="/placeholder.svg"
                    width={64}
                    height={64}
                    alt="Skill 2"
                    className="h-16 w-16 mb-2"
                  />
                  <h3 className="text-lg font-bold mb-1">Node.js</h3>
                  <p className="text-gray-500 dark:text-gray-400 text-center">
                    Develop scalable and efficient server-side applications.
                  </p>
                </div>
              </div>
              <div className="bg-white rounded-lg shadow-md overflow-hidden dark:bg-gray-950 relative">
                <div className="absolute top-0 left-0 w-full h-full bg-gradient-to-br from-[#2980b9] to-[#3498db] opacity-50 rounded-lg" />
                <div className="relative z-10 p-4 flex flex-col items-center justify-center h-full">
                  <img
                    src="/placeholder.svg"
                    width={64}
                    height={64}
                    alt="Skill 3"
                    className="h-16 w-16 mb-2"
                  />
                  <h3 className="text-lg font-bold mb-1">MongoDB</h3>
                  <p className="text-gray-500 dark:text-gray-400 text-center">
                    Store and manage your data with this NoSQL database.
                  </p>
                </div>
              </div>
              <div className="bg-white rounded-lg shadow-md overflow-hidden dark:bg-gray-950 relative">
                <div className="absolute top-0 left-0 w-full h-full bg-gradient-to-br from-[#2ecc71] to-[#27ae60] opacity-50 rounded-lg" />
                <div className="relative z-10 p-4 flex flex-col items-center justify-center h-full">
                  <img
                    src="/placeholder.svg"
                    width={64}
                    height={64}
                    alt="Skill 4"
                    className="h-16 w-16 mb-2"
                  />
                  <h3 className="text-lg font-bold mb-1">Docker</h3>
                  <p className="text-gray-500 dark:text-gray-400 text-center">
                    Package and deploy your applications with ease.
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
      <section className="bg-gray-100 py-12 md:py-24 dark:bg-gray-800 relative z-10">
        <div className="container mx-auto px-4 md:px-6">
          <div className="flex flex-col items-center space-y-6">
            <h2 className="text-3xl font-bold tracking-tight sm:text-4xl md:text-5xl">
              About Us
            </h2>
            <p className="text-gray-500 dark:text-gray-400 max-w-md text-center">
              Acme Inc is a leading provider of innovative solutions for
              businesses of all sizes. Our team of experts is dedicated to
              helping you achieve your goals.
            </p>
            <div className="flex gap-4">
              <Button>Learn More</Button>
              <Button variant="secondary">Contact Us</Button>
            </div>
          </div>
        </div>
      </section>
      <footer className="bg-gray-900 text-white py-6 px-[30px] relative z-10">
        <div className="container mx-auto flex justify-between items-center">
          <p>&copy; 2023 Acme Inc. All rights reserved.</p>
          <nav className="flex items-center gap-6">
            <Link
              href="#"
              className="hover:underline underline-offset-4"
              prefetch={false}
            >
              Privacy Policy
            </Link>
            <Link
              href="#"
              className="hover:underline underline-offset-4"
              prefetch={false}
            >
              Terms of Service
            </Link>
            <Link
              href="#"
              className="hover:underline underline-offset-4"
              prefetch={false}
            >
              Contact Us
            </Link>
          </nav>
        </div>
      </footer>
    </div>
  );
}