projects mobile version + clients section

src/Projects/MobileProjects.tsx

@@ -50,7 +50,8 @@ const MobileProjects = ({ sortedProjects }: IProjectsProps) => {
           previosLabel = label;
           return (
             <>
-              {/* <div className="basis-full h-0 bg-black w-full"></div> */}
+              <div className="col-span-full h-0 border-b border-b-[#3D425C] pt-4"></div>
+              <div className="col-span-full"></div>
               <LabelCard key={project.id} label={label} />
               <ProjectCard key={project.id} {...project} />
             </>

src/app/page.tsx

@@ -36,6 +36,7 @@ import { Video } from "../types/Video";
 import Reviews from "@components/Reviews";
 import Histories from "@components/Histories";
 import Projects from "../Projects/Projects";
+import Clients from "@components/Clients";
 
 const VIDEOS_FEATURES: Video[] = [
   {
@@ -614,25 +615,7 @@ export default function App() {
           <Reviews />
           <Projects />
 
-          <div className="relative flex flex-col 2xl:gap-16 xl:gap-10 gap-8 2xl:mb-[200px] sm:mb-[120px] mb-20">
-            <Heading2>
-              Наши клиенты{" "}
-              <span className="text-gradient-none">в девелопменте</span>
-            </Heading2>
-            <img
-              src="/images/clients-logos.png"
-              alt=""
-              className="sm:block hidden"
-            />
-            <img
-              src="/images/clients-logos-mobile.png"
-              alt=""
-              className="sm:hidden block"
-            />
-            <div className="absolute top-0 right-0 blur-[34px] -z-10">
-              <img src="/images/blendings/6.svg" alt="" />
-            </div>
-          </div>
+          <Clients />
 
           <div className="relative overflow-hidden pb-[50px]">
             <div className="grid lg:grid-cols-4 grid-cols-1 lg:gap-4 gap-6">

src/components/Clients.tsx

@@ -0,0 +1,67 @@
+import Image from "next/image";
+import Heading2 from "./Headings/Heading2";
+
+interface IClient {
+  id: string;
+  src: string;
+}
+
+const clients: IClient[] = [
+  { id: "1", src: "/images/clients/1.png" },
+  { id: "2", src: "/images/clients/2.png" },
+  { id: "3", src: "/images/clients/3.png" },
+  { id: "4", src: "/images/clients/4.png" },
+  { id: "5", src: "/images/clients/5.png" },
+  { id: "6", src: "/images/clients/6.png" },
+  { id: "7", src: "/images/clients/7.png" },
+  { id: "8", src: "/images/clients/8.png" },
+  { id: "9", src: "/images/clients/9.png" },
+  { id: "10", src: "/images/clients/10.png" },
+  { id: "11", src: "/images/clients/11.png" },
+  { id: "12", src: "/images/clients/12.png" },
+  { id: "13", src: "/images/clients/13.png" },
+  { id: "31", src: "/images/clients/14.png" },
+  { id: "14", src: "/images/clients/15.png" },
+  { id: "15", src: "/images/clients/16.png" },
+  { id: "16", src: "/images/clients/17.png" },
+  { id: "17", src: "/images/clients/18.png" },
+  { id: "18", src: "/images/clients/19.png" },
+  { id: "19", src: "/images/clients/20.png" },
+  { id: "20", src: "/images/clients/21.png" },
+  { id: "21", src: "/images/clients/22.png" },
+  { id: "22", src: "/images/clients/23.png" },
+  { id: "23", src: "/images/clients/24.png" },
+  { id: "24", src: "/images/clients/25.png" },
+  { id: "25", src: "/images/clients/26.png" },
+  { id: "26", src: "/images/clients/27.png" },
+  { id: "27", src: "/images/clients/28.png" },
+  { id: "28", src: "/images/clients/29.png" },
+  { id: "29", src: "/images/clients/30.png" },
+  { id: "30", src: "/images/clients/31.png" },
+];
+
+const Clients = () => {
+  return (
+    <div className="relative flex flex-col 2xl:gap-16 xl:gap-10 gap-8 2xl:mb-[200px] sm:mb-[120px] mb-20">
+      <div className="grid sm:grid-cols-4 grid-cols-2">
+        <Heading2 className="col-span-2 min-h-[104px]">
+          Наши клиенты{" "}
+          <span className="text-gradient-none">в девелопменте</span>
+        </Heading2>
+
+        {clients.map((client) => (
+          <Image
+            key={client.id}
+            width={380}
+            height={380}
+            src={client.src}
+            alt=""
+          />
+        ))}
+      </div>
+      <div className="absolute top-0 right-0 blur-[34px] -z-10"></div>
+    </div>
+  );
+};
+
+export default Clients;

src/components/MoreProjectButton.tsx

@@ -13,7 +13,7 @@ function MoreProjectButton({ onClick }: IMoreProjectButtonProps) {
       whileInView={{ opacity: 1 }}
       viewport={{ once: true, margin: "-100px" }}
       transition={{ duration: 1, ease: [0.58, 0.12, 0.27, 0.98], delay: 0.2 }}
-      className="border border-[#3D425C] p-4 flex sm:flex-col sm:justify-end items-end gap-2 sm:rounded-none rounded-full aspect-square"
+      className="border border-[#3D425C] p-4 flex sm:flex-col sm:justify-end items-end gap-2 sm:rounded-none rounded-full sm:aspect-square hover:border-[#3D425C] active:border-[#3d425cc4] active:text-[#ffffffc4] duration-150 ease-in-out transition-all"
       onClick={onClick}
     >
       <div className="flex gap-2 items-center justify-between sm:justify-end w-full">

src/components/icons/ArrowIcon.tsx

@@ -16,7 +16,7 @@ function ArrowIcon({ className }: IArrowIconProps) {
         fillRule="evenodd"
         clipRule="evenodd"
         d="M5 12C5 12.5523 5.44771 13 6 13L15.4817 13L10.9504 17.2724C10.5485 17.6513 10.5299 18.2842 10.9088 18.686C11.2876 19.0879 11.9205 19.1065 12.3224 18.7276L18.686 12.7276C18.8864 12.5387 19 12.2754 19 12C19 11.7246 18.8864 11.4614 18.686 11.2724L12.3224 5.27241C11.9205 4.89354 11.2876 4.91215 10.9088 5.31399C10.5299 5.71583 10.5485 6.34872 10.9504 6.72759L15.4817 11L6 11C5.44772 11 5 11.4477 5 12Z"
-        fill="white"
+        fill="currentColor"
       />
     </svg>
   );