product filter part

app/page.tsx

@@ -1,12 +1,16 @@
 import Image from "next/image";
 import Header from "../components/nav_foot/header";
 import Navbar from "@/components/nav_foot/navbar";
+import Products from "@/components/pageParts/products";
 
 export default function Home() {
   return (
     <div >
       <Header/>
       <Navbar/>
+      <section id="products" className="mt-50">  
+        <Products/>
+      </section>
     </div>
   );
 }

components/nav_foot/navbar.tsx

@@ -163,7 +163,7 @@ function LinkGroup({ togle_func }: { togle_func: () => void }) {
       </Link>
 
       <Link
-        to="home"
+        to="products"
         smooth={true}
         duration={500}
         offset={-200}

components/pageParts/products.tsx

@@ -1,15 +1,51 @@
-'use client'
+"use client";
 
-import React from 'react'
+import React, { useState } from "react";
-import Title from '../tools/title'
+import Title from "../tools/title";
-import { useTranslation } from 'react-i18next';
+import Text from "../text";
 
+const productsTypes: string[] = [
+  "trucks",
+  "cranes",
+  "forklift-trucks",
+  "excavators",
+  "road-repairs",
+];
 
 export default function Products() {
-    const {t} = useTranslation("common");
+
+  //product type togle states
+  const [productFilter,setProductFilter] = useState<string|null>(null);
   return (
     <div>
-        <Title text={t('pricing-h2')} />
+      {/* title part */}
+      <div className="flex flex-col md:gap-8 gap-4">
+        <div className="flex items-center justify-center w-full ">
+          <div className="text-secondary px-2  py-1 text-[18px] font-semibold ">
+            <Text txt="equipment" />
+          </div>
+          <div className="bg-primary text-secondary px-3 py-1 text-[18px] font-semibold ">
+            <Text txt="amazing" />
+          </div>
+        </div>
+        <Title text="pricing-h2" />
+      </div>
+
+      {/* product filters */}
+      <div className="flex flex-wrap gap-3 items-center justify-center">
+        {productsTypes.map((item, index) => (
+          <button
+            key={index}
+            onClick={()=>setProductFilter(item)}
+            className={`${productFilter === item ?'bg-secondary' : ''} hover:bg-secondary border-gray-300 hover:border-secondary border-[1px] px-10 py-3 text-2xl rounded-tr-full rounded-bl-full `}
+          >
+            <Text txt={item} />
+          </button>
+        ))}
+      </div>
+
+      {/* products */}
+      <div></div>
     </div>
-  )
+  );
 }

components/tools/title.tsx

@@ -1,8 +1,9 @@
 import { TitleType } from '@/types'
 import React from 'react'
+import Text from '../text'
 
 export default function Title({text}:TitleType) {
   return (
-    <div className='text-primary text-3xl ' >{text}</div>
+    <div className='text-primary md:text-[45px] text-[25px] w-full text-center font-bold '><Text txt={text} /></div>
   )
 }