docqube_lp/src/app/(features)/ProductPage/AllPdfToolsPage.tsx

"use client";
import React from "react";
import Navbar from "../Components/Navbar";
import Footer from "../Components/Footer";
import ProductHeroSection from "../Components/CustomHeroSection";
import { allPdfToolsData } from "./data/productData";
const dotBg = "/landing/DotBg.png";


const freetools1 = "/landing/productsPage/freetools1.png";
const freetools2 = "/landing/productsPage/freetools2.png";
const freetools3 = "/landing/productsPage/freetools3.png";
const freetools4 = "/landing/productsPage/freetools4.png";
const freetools5 = "/landing/productsPage/freetools5.png";
const freetools6 = "/landing/productsPage/freetools6.png";
const freetools7 = "/landing/productsPage/freetools7.png";
const freetools8 = "/landing/productsPage/freetools8.png";
const freetools9 = "/landing/productsPage/freetools9.png";
const freetools10 = "/landing/productsPage/freetools10.png";
const freetools11 = "/landing/productsPage/freetools11.png";
const freetools12 = "/landing/productsPage/freetools12.png";
const freetools13 = "/landing/productsPage/freetools13.png";
const freetools14 = "/landing/productsPage/freetools14.png";
const freetools15 = "/landing/productsPage/freetools15.png";
const freetools16 = "/landing/productsPage/freetools16.png";
const freetools17 = "/landing/productsPage/freetools17.png";

const categories = [
  {
    title: "Edit",
    tools: [
      {
        title: "Edit PDF",
        description: "Edit a PDF directly, free",
        icon: freetools1,
      },
      {
        title: "OCR PDF",
        description: "Make scanned PDF searchable",
        icon: freetools2,
      },
      {
        title: "Watermark PDF",
        description: "Add a watermark to your PDF free",
        icon: freetools3,
      },
    ],
  },
  {
    title: "Organize",
    tools: [
      {
        title: "Rotate PDF",
        description: "Rotate PDF pages, free",
        icon: freetools4,
      },
      {
        title: "Delete PDF pages",
        description: "Delete specific pages from PDF, free",
        icon: freetools5,
      },
      {
        title: "Extract PDF pages",
        description: "Extract pages from a PDF, free",
        icon: freetools6,
      },
      {
        title: "Merge PDF",
        description: "Combine PDFs into one, free",
        icon: freetools7,
      },
      {
        title: "Split PDF",
        description: "Split PDF into multiple, free",
        icon: freetools8,
      },
    ],
  },
  {
    title: "Convert",
    tools: [
      {
        title: "PDF to Word",
        description: "Convert PDF to Word, free",
        icon: freetools9,
      },
      {
        title: "PDF to Excel",
        description: "Convert PDF to Excel, free",
        icon: freetools10,
      },
      {
        title: "PDF to PowerPoint",
        description: "Convert PDF to PowerPoint, free",
        icon: freetools11,
      },
      {
        title: "PDF to JPG",
        description: "Convert PDF to JPG, free",
        icon: freetools13,
      },
      {
        title: "JPG to PDF",
        description: "Convert JPG to PDF, free",
        icon: freetools12,
      },
    ],
  },
  {
    title: "Optimize",
    tools: [
      {
        title: "Compress PDF",
        description: "Compress PDF sizes, free",
        icon: freetools14,
      },
    ],
  },
  {
    title: "Secure",
    tools: [
      {
        title: "Protect PDF",
        description: "Add password to PDF, free",
        icon: freetools15,
      },
      {
        title: "Unlock PDF",
        description: "Remove PDF password, free",
        icon: freetools16,
      },
    ],
  },
  {
    title: "Sign",
    tools: [
      {
        title: "Sign PDF",
        description: "Sign a PDF online, free",
        icon: freetools17,
      },
    ],
  },
];

const AllPdfToolsPage: React.FC = () => {
  return (
    <div className="min-h-screen flex flex-col bg-white selection:bg-blue-100 selection:text-blue-900 font-albert-sans">
      <Navbar />
      <main className="flex-grow pt-[80px]">
        {/* Hero Section */}
        <ProductHeroSection {...allPdfToolsData.hero} />

        {/* Tools Section with Dot Background */}
        <section
          className="relative py-24 border-t border-gray-100 bg-[#FCFCFC]"
          style={{
            backgroundImage: `url(${dotBg})`,
            backgroundSize: "contain",
            backgroundPosition: "center",
            backgroundRepeat: "repeat",
          }}
        >
          <div className="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 space-y-16">
            {categories.map((category, catIdx) => (
              <div key={catIdx}>
                <h3 className="text-[22px] font-medium text-[#0a1236] tracking-tight mb-8">
                  {category.title}
                </h3>

                {/* Tools Grid for this category */}
                <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
                  {category.tools.map((tool, idx) => {
                    const Icon = tool.icon;
                    return (
                      <div
                        key={idx}
                        className="bg-white rounded-[16px] p-6 border border-gray-100 hover:-translate-y-1 transition-all duration-300 cursor-pointer flex flex-col items-start group"
                      >
                        <div className="w-20 h-20 rounded-xl text-[#444CE7] flex items-center justify-center mb-4 group-hover:scale-105 transition-transform duration-300 overflow-hidden">
                          {typeof Icon === 'string' ? (
                            <img src={Icon} alt="" className="w-full h-full object-contain" />
                          ) : (
                            // @ts-ignore
                            <Icon className="w-6 h-6" strokeWidth={1.5} />
                          )}
                        </div>
                        <h4 className="text-[17px] font-bold text-gray-900 ">
                          {tool.title}
                        </h4>
                        <p className="text-[13px] text-gray-500 leading-relaxed font-medium">
                          {tool.description}
                        </p>
                      </div>
                    );
                  })}
                </div>
              </div>
            ))}
          </div>
        </section>
      </main>
      <Footer />
    </div>
  );
};

export default AllPdfToolsPage;