add seaction our-teams, about-us, submit-contact-us

src/app/globals.css

@@ -42,6 +42,12 @@ body {
   .home-sec-2 {
     @apply border pt-16 sm:pt-24 pb-16 px-5 sm:px-10;
   }
+  .about-us {
+    @apply border pt-16 sm:pt-24 pb-16;
+  }
+  .our-teams {
+    @apply border pt-16 sm:pt-24 pb-16;
+  }
   .home-sec-3 {
     @apply border pt-16 sm:pt-24 pb-16 px-5 sm:px-10 bg-[#F8FBFF];
   }
@@ -99,3 +105,11 @@ body {
 .swiper-custome-btn-nav button.custom-nav-btn:disabled svg path {
   fill: #0077ff !important;
 }
+
+
+/* .ant-notification-notice-wrapper{
+  position: fixed !important;
+  left: 50% !important;
+  top: 50% !important;
+  transform: translate(-50%, -50%) !important;
+} */

src/app/page.tsx

@@ -4,20 +4,19 @@ import WhyChooseUs from "./ui/section/why-choose-us";
 import Blog from "./ui/section/blog";
 import OurClients from "./ui/section/out-clients";
 import Skills from "./ui/section/skills";
+import AboutUs from './ui/section/about-us';
+import OurTeams from './ui/section/our-teams';
 
 export default function Home() {
   return (
     <>
-      {/* sec 1 */}
       <Hero />
-      {/* sec 2 */}
       <WhyChooseUs />
-      {/* sec 3 */}
-      <Blog />
-      {/* sec 4 */}
+      {/* <Blog /> */}
       <OurClients />
-      {/* sec 5 */}
       <Skills />
+      <AboutUs />
+      <OurTeams />
     </>
   );
 }

src/app/ui/section/about-us.tsx

@@ -0,0 +1,96 @@
+import Image from "next/image";
+import React from "react";
+
+const AboutUs = () => {
+  const data = [
+    {
+      id: 1,
+      title: "Who We Are",
+      desc: "Welcome to Innovation Mader, your premier partner in digital innovation. Our mission is to empower businesses to thrive in the digital age through cutting-edge technology and innovative solutions. As a leading provider of digital services, we specialize in transforming your business ideas into reality, leveraging the latest advancements in technology to drive growth and success.",
+      img: "/images/about-us/image 9.png",
+      position: "left",
+    },
+    {
+      id: 2,
+      title: "Our Vision",
+      desc: "At Innovation Mader, we envision a world where businesses of all sizes can harness the power of digital innovation to achieve unprecedented levels of success. Our goal is to be the catalyst that helps you navigate the complexities of the digital landscape, providing the tools and expertise needed to stay ahead of the competition.",
+      img: "/images/about-us/icons8-eye 1.png",
+      position: "right",
+    },
+    {
+      id: 3,
+      title: "Our Mission",
+      desc: "Our mission is simple: to be the Digital Innovation Mader For Your Business. We are committed to delivering exceptional digital solutions that are tailored to meet your unique business needs. Whether you are a startup looking to make your mark or an established enterprise aiming to innovate, we are here to help you every step of the way.",
+      img: "/images/about-us/icons8-goal 1.png",
+      position: "left",
+    },
+  ];
+  return (
+    <div id="about-us" className="about-us">
+      <h2 className="text-[#217BF4] text-xl sm:text-3xl font-bold text-center">
+        ABOUT US
+      </h2>
+
+      <div className="grid grid-cols-1 gap-5 mt-5 sm:mt-14">
+        {data.map(
+          (item: {
+            id: number;
+            title: string;
+            desc: string;
+            img: string;
+            position: string;
+          }) => {
+            return (
+              <div className="col-span-1" key={item.id}>
+                <div
+                  className={`grid grid-cols-1 sm:grid-cols-2 ${
+                    item.position === "right"
+                      ? "bg-gradient-to-l from-[#0A65E4]"
+                      : "bg-gradient-to-r from-[#0A65E4]"
+                  }  px-5 sm:px-10 pt-16 pb-16`}
+                >
+                  <div
+                    className={`col-span-1 ${
+                      item.position === "right" ? "order-1" : ""
+                    }`}
+                  >
+                    <h3
+                      className={`text-white text-lg sm:text-2xl font-bold mt-5 sm:mt-0 ${
+                        item.position === "right" ? "text-right" : "text-left"
+                      }`}
+                    >
+                      {item.title}
+                    </h3>
+                    <p
+                      className={`text-white text-sm sm:text-base mt-3 ${
+                        item.position === "right" ? "text-right" : "text-left"
+                      }`}
+                    >
+                      {item.desc}
+                    </p>
+                  </div>
+                  <div
+                    className={`col-span-1 -order-1 sm:order-none flex ${
+                      item.position === "right"
+                        ? "justify-center sm:justify-start"
+                        : "justify-center sm:justify-end"
+                    }`}
+                  >
+                    <Image
+                      src={item.img}
+                      alt={`img-${item.id}`}
+                      width={200}
+                      height={200}
+                    />
+                  </div>
+                </div>
+              </div>
+            );
+          }
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default AboutUs;

src/app/ui/section/our-teams.tsx

@@ -0,0 +1,91 @@
+import Image from "next/image";
+import React from "react";
+
+const OurTeams = () => {
+  const data = [
+    {
+      id: 1,
+      name: "Rahmat Hidayatullah",
+      position: "Frontend Lead",
+      img: "/images/founder/Ellipse 30.png",
+    },
+    {
+      id: 2,
+      name: "Egi Chandra",
+      position: "Backend Lead",
+      img: "/images/founder/Ellipse 30 (3).png",
+    },
+    {
+      id: 3,
+      name: "Martin Yonatan P",
+      position: "Technical Architect",
+      img: "/images/founder/Ellipse 30 (4).png",
+    },
+    {
+      id: 2,
+      name: "Bachtiar Firdaus",
+      position: "System Analyst",
+      img: "/images/founder/Ellipse 30 (5).png",
+    },
+    {
+      id: 2,
+      name: "Deby Prasetyo",
+      position: "Business Development Lead",
+      img: "/images/founder/Ellipse 30 (1).png",
+    },
+    {
+      id: 2,
+      name: "Rifqi Bagus",
+      position: "Product Manager Lead",
+      img: "/images/founder/Ellipse 30 (2).png",
+    },
+  ];
+  return (
+    <div id="our-teams" className="home-sec-5">
+      <h2 className="text-[#217BF4] text-3xl font-bold text-center">
+        Our Teams
+      </h2>
+      <p className="text-center mt-5 max-w-xl mx-auto text-sm sm:text-base">
+        Our team is composed of passionate innovators, experienced developers,
+        creative designers, and strategic thinkers. We are united by our shared
+        commitment to excellence and our drive to deliver transformative results
+        for our clients. Each member of our team brings a unique set of skills
+        and expertise, ensuring that we can tackle any challenge and deliver
+        exceptional value.
+      </p>
+      <div className="grid grid-cols-4 sm:grid-cols-12 gap-y-10 mt-5 sm:mt-14">
+        {data.map(
+          (item: {
+            id: number;
+            name: string;
+            position: string;
+            img: string;
+          }) => {
+            return (
+              <div className="col-span-4">
+                <div className="flex flex-col items-center justify-center">
+                  <div className="w-[160px] h-[160px] rounded-full overflow-hidden flex items-center justify-center">
+                    <Image
+                      src={item.img}
+                      alt={`img-${item.id}`}
+                      width={160}
+                      height={160}
+                    />
+                  </div>
+                  <h4 className="mt-3 text-center text-base sm:text-xl font-semibold">
+                    {item.name}
+                  </h4>
+                  <h5 className="mt-1 text-center text-base font-medium">
+                    {item.position}
+                  </h5>
+                </div>
+              </div>
+            );
+          }
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default OurTeams;