contact

app/globals.css

@@ -32,3 +32,18 @@ body {
   transition: 0.1s ease-in-out all;
   font-family: "Roboto", sans-serif;
 }
+
+/* 🟠 Sariq blok trapezoid shakl */
+.clip-trapezoid {
+  clip-path: polygon(16% 0, 100% 0, 84% 100%, 0% 100%);
+}
+
+/* Input blokining shakli */
+.clip-input {
+  clip-path: polygon(16% 0, 100% 0, 84% 100%, 0% 100%);
+}
+
+/* Tugma blokining shakli */
+.clip-button {
+  clip-path: polygon(16% 0, 100% 0, 84% 100%, 0% 100%);
+}

app/page.tsx

@@ -7,6 +7,8 @@ import Offer from "@/components/pageParts/offer";
 import Faq from "@/components/pageParts/faq";
 import Partners from "@/components/pageParts/partners";
 import Map from "@/components/pageParts/map";
+import Contact from "@/components/pageParts/contact/contact";
+import Footer from "@/components/nav_foot/footer";
 
 export default function Home() {
   return (
@@ -21,6 +23,10 @@ export default function Home() {
       <Faq/>
       <Partners/>
       <Map/>
+      <section id="contact" className="my-20" >
+        <Contact/>
+      </section>
+      <Footer/>
     </div>
   );
 }

components/nav_foot/footer.tsx

@@ -0,0 +1,59 @@
+import Text from "../text";
+import { FaFacebookF , FaTwitter , FaLinkedinIn , FaTelegramPlane } from "react-icons/fa";
+
+export default function Footer() {
+  return (
+    <div dir="ltr" className="bg-primary">
+
+      <div className="max-w-[1200px] w-full mx-auto pt-10 ">
+
+        <div></div>
+        
+        <div className="flex items-center justify-between my-4 mt-10">
+          <div className="flex flex-col items-start gap-4 ">
+            <div className="text-white text-xl font-semibold">
+              <Text txt="subscribe" />
+            </div>
+            <div className="  flex items-center justify-center gap-2">
+              <a
+                href=""
+                className="rounded-[50] hover:bg-secondary bg-gray-500 p-3 text-white hover:cursor-pointer "
+              >
+                <FaFacebookF />
+              </a>
+              <a
+                href=""
+                className="rounded-[50] hover:bg-secondary bg-gray-500 p-3 text-white hover:cursor-pointer "
+              >
+                <FaTwitter />
+              </a>
+              <a
+                href=""
+                className="rounded-[50] hover:bg-secondary bg-gray-500 p-3 text-white hover:cursor-pointer "
+              >
+                <FaLinkedinIn />
+              </a>
+              <a
+                href=""
+                className="rounded-[50] hover:bg-secondary bg-gray-500 p-3 text-white hover:cursor-pointer "
+              >
+                <FaTelegramPlane />
+              </a>
+            </div>
+          </div>
+
+            <div>
+                
+            </div>
+
+        </div>
+
+      </div>
+
+      <div className=" py-5 text-white border-t-[1px] text-center border-gray-500">
+        Ismoiljon Mirabdullayev © 2025. All rights reserved.
+      </div>
+
+    </div>
+  );
+}

components/pageParts/contact.tsx

@@ -0,0 +1,24 @@
+
+export default function Contact() {
+  return (
+    <section dir="ltr" className="relative w-full bg-primary py-10 flex justify-center">
+      <div className=" bg-secondary max-w-[1200px] w-full py-10 flex flex-col items-center clip-trapezoid">
+        <h2 className="text-2xl md:text-3xl font-bold text-primary mb-5 text-center">
+          Qo'ng'iroqni buyurtma qiling
+        </h2>
+
+        {/* Input va Button bloki */}
+        <div className="flex w-full max-w-2xl">
+          <input
+            type="text"
+            placeholder="Your phone number"
+            className="flex-1 py-3 px-5 bg-white text-gray-600 placeholder-gray-400 text-lg clip-input focus:outline-none"
+          />
+          <button className="bg-primary text-white px-6 py-3 text-lg font-medium clip-button">
+            Menga qo'ng'iroq qiling
+          </button>
+        </div>
+      </div>
+    </section>
+  );
+}