about page structure updated

app/(contact)/contact/page.jsx

@@ -70,9 +70,9 @@ export default function page() {
       <ContactInfo />
       <ContactForm />
       <Map />
-      <div className="brand-section fix section-padding">
+      {/* <div className="brand-section fix section-padding">
         <Brands />
-      </div>
+      </div> */}
       <Footer1 />
     </>
   );

app/(products)/product/page.jsx

@@ -0,0 +1,76 @@
+import Brands from "@/components/common/Brands";
+import Footer1 from "@/components/footers/Footer1";
+import Header2 from "@/components/headers/Header2";
+import Products from "@/components/homes/home-1/Products/product";
+import Image from "next/image";
+import Link from "next/link";
+export const metadata = {
+  title: "Products || Xbuild - Constriction nextjs Template",
+  description: "Xbuild - Constriction nextjs Template",
+};
+
+export default function page() {
+  return (
+    <>
+      <Header2 />
+      <div
+        className="breadcrumb-wrapper bg-cover"
+        style={{ backgroundImage: 'url("/assets/img/breadcrumb-bg.jpg")' }}
+      >
+        <div className="shape-image float-bob-y">
+          <Image
+            src="/assets/img/vector.png"
+            width={84}
+            height={186}
+            alt="img"
+          />
+        </div>
+        <div className="container">
+          <div className="breadcrumb-wrapper-items">
+            <div className="page-heading">
+              <div className="breadcrumb-sub-title">
+                <h1 className="wow fadeInUp" data-wow-delay=".3s">
+                  Products
+                </h1>
+              </div>
+              <ul
+                className="breadcrumb-items wow fadeInUp"
+                data-wow-delay=".5s"
+              >
+                <li>
+                  <Link href={`/`}> Home </Link>
+                </li>
+                <li>
+                  <i className="fa-sharp fa-solid fa-slash-forward" />
+                </li>
+                <li>Products</li>
+              </ul>
+            </div>
+            <div className="breadcrumb-image">
+              <Image
+                src="/assets/img/breadcrumb-image.png"
+                width={540}
+                height={450}
+                alt="img"
+                className="float-bob-x"
+              />
+              <div className="bar-shape">
+                <Image
+                  src="/assets/img/breadcrumb-bar.png"
+                  width={631}
+                  height={604}
+                  alt="img"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <Products/>
+      {/* <div className="brand-section fix section-padding pt-0">
+        <Brands />
+      </div> */}
+      <Footer1 />
+    </>
+  );
+}

components/contact/Map.jsx

@@ -2,7 +2,7 @@ import React from "react";
 
 export default function Map() {
   return (
-    <div className="office-google-map-wrapper">
+    <div className="office-google-map-wrapper section-padding">
       <iframe
         src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d6678.7619084840835!2d144.9618311901502!3d-37.81450084255415!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6ad642b4758afc1d%3A0x3119cc820fdfc62e!2sEnvato!5e0!3m2!1sen!2sbd!4v1641984054261!5m2!1sen!2sbd"
         style={{ border: 0 }}

components/homes/home-1/Products/product.jsx

@@ -0,0 +1,76 @@
+import React from "react";
+import Pagination from "@/components/common/Pagination";
+import { services } from "@/data/services";
+import { products } from "@/data/services";
+import Link from "next/link";
+import Image from "next/image";
+import AnimatedText from "@/components/common/AnimatedText";
+export default function Products() {
+  return (
+    <section className="service-section fix section-padding">
+      <div className="container">
+        <div className="section-title text-center">
+          <h6 className="wow fadeInUp">
+            <i className="fa-regular fa-arrow-left-long"></i>Products
+            <i className="fa-regular fa-arrow-right-long"></i>
+          </h6>
+          <h2 className="splt-txt wow">
+            <AnimatedText text="Our Products" /> <br />
+            {/* <AnimatedText text="You Want Here" /> */}
+          </h2>
+        </div>
+        <div className="row">
+          {products.map((product) => (
+            <div
+              key={product.id}
+              className="col-xl-4 col-lg-6 col-md-6 wow fadeInUp"
+              data-wow-delay={product.delay}
+            >
+              <div className="service-box-items items-bg">
+                <div className="service-thumb">
+                  <Image
+                    src={product.image}
+                    width={346}
+                    height={236}
+                    alt="img"
+                  />
+                  <div className="icon">
+                    <Image
+                      src={product.icon}
+                      width={32}
+                      height={32}
+                      alt="img"
+                    />
+                  </div>
+                </div>
+                <div className="service-content">
+                  <h2 className="number">{product.number}</h2>
+                  <h3>
+                    <Link href={`/service-details/${product.id}`}>
+                      {product.title}
+                    </Link>
+                  </h3>
+                  <p>{product.description}</p>
+                  <Link
+                    href={`/service-details/${product.id}`}
+                    className="link-btn"
+                  >
+                    Explore More <i className="fa-solid fa-arrow-right" />
+                  </Link>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+        <div
+          className="page-nav-wrap pt-5 text-center wow fadeInUp"
+          data-wow-delay=".3s"
+        >
+          <ul>
+            <Pagination />
+          </ul>
+        </div>
+      </div>
+    </section>
+  );
+}

data/menu.js

@@ -59,6 +59,10 @@ export const menuData = [
       { label: "Services", href: "/service" },
       { label: "Service Details", href: "/service-details/1" },
     ],
+  },
+    {
+    label: "Products",
+    href: "/product",
   },
   {
     label: "Projects",

data/services.js

@@ -228,9 +228,71 @@ export const services2 = [
   },
 ];
 
+
+export const products = [
+  {
+    id: 28,
+    image: "/assets/img/service/01.jpg",
+    icon: "/assets/img/icon/01.svg",
+    number: "01",
+    title: "Building Construction",
+    description: "Consectetur Phasellus a odio vel sapien pharetra placerat.",
+    delay: ".2s",
+  },
+  {
+    id: 29,
+    image: "/assets/img/service/02.jpg",
+    icon: "/assets/img/icon/02.svg",
+    number: "02",
+    title: "Architecture Design",
+    description: "Consectetur Phasellus a odio vel sapien pharetra placerat.",
+    delay: ".4s",
+  },
+  {
+    id: 30,
+    image: "/assets/img/service/03.jpg",
+    icon: "/assets/img/icon/03.svg",
+    number: "03",
+    title: "Building Renovation",
+    description: "Consectetur Phasellus a odio vel sapien pharetra placerat.",
+    delay: ".6s",
+  },
+  {
+    id: 31,
+    image: "/assets/img/service/06.jpg",
+    icon: "/assets/img/icon/07.svg",
+    number: "04",
+    title: "Smart Technology",
+    description: "Consectetur Phasellus a odio vel sapien pharetra placerat.",
+    delay: ".2s",
+  },
+  {
+    id: 32,
+    image: "/assets/img/service/07.jpg",
+    icon: "/assets/img/icon/08.svg",
+    number: "05",
+    title: "Best Engineering",
+    description: "Consectetur Phasellus a odio vel sapien pharetra placerat.",
+    delay: ".4s",
+  },
+  {
+    id: 33,
+    image: "/assets/img/service/08.jpg",
+    icon: "/assets/img/icon/09.svg",
+    number: "06",
+    title: "Chemical Research",
+    description: "Consectetur Phasellus a odio vel sapien pharetra placerat.",
+    delay: ".6s",
+  },
+];
+
+
 export const allServices = [
   ...serviceItems,
   ...serviceItems2,
   ...services,
   ...services2,
+  ...products,
 ];
+
+