From 5cd4cb5f434666d56080480459cef863d9b63176 Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Tue, 10 Mar 2026 16:12:40 +0000
Subject: [PATCH] Update src/app/tool/[id]/page.tsx

---
 src/app/tool/[id]/page.tsx | 280 ++-----------------------------------
 1 file changed, 14 insertions(+), 266 deletions(-)

diff --git a/src/app/tool/[id]/page.tsx b/src/app/tool/[id]/page.tsx
index 6d2c381..035b174 100644
--- a/src/app/tool/[id]/page.tsx
+++ b/src/app/tool/[id]/page.tsx
@@ -1,117 +1,13 @@
 "use client";
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
-import Link from "next/link";
-import { useParams } from "next/navigation";
 import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
 import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
-import { ArrowLeft, ExternalLink, Star, Check } from "lucide-react";
-
-// Mock tool database
-const toolsDatabase: Record<string, any> = {
-  "chat-gpt": {
-    name: "ChatGPT",
-    category: "Chatbots & AI Chat",
-    description: "ChatGPT is an AI-powered conversational model that can help you with writing, coding, math, creative projects, and much more. The free version provides access to GPT-3.5 with a web interface.",
-    image: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Al7jyxM8sHalQ2EcbERIFxTIFv/free-ai-chatbot-interface-showing-conver-1773157941901-6080a83c.png",
-    url: "https://chat.openai.com",
-    tags: ["No Credit Card", "100% Free", "Browser Based", "No Login Required"],
-    rating: 4.9,
-    reviews: 2847,
-    features: [
-      "Conversational AI responses",
-      "Code generation and debugging",
-      "Essay writing assistance",
-      "Math problem solving",
-      "Creative writing help",
-      "Research and brainstorming"
-    ],
-    verified: true,
-    updatedDate: "2025-01-08",
-    pros: [
-      "Highly capable language model",
-      "User-friendly interface",
-      "Fast response times",
-      "Supports multiple languages"
-    ],
-    cons: [
-      "Limited free access during peak hours",
-      "Sometimes provides inaccurate information"
-    ]
-  },
-  "midjourney": {
-    name: "Midjourney",
-    category: "Image Generation",
-    description: "Midjourney is an AI image generator that creates high-quality images from text prompts. The free trial provides a limited number of generations to try the service.",
-    image: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Al7jyxM8sHalQ2EcbERIFxTIFv/category-image-generation.png",
-    url: "https://www.midjourney.com",
-    tags: ["Free Trial", "Image Generation", "Discord Based", "AI Art"],
-    rating: 4.8,
-    reviews: 3241,
-    features: [
-      "Text-to-image generation",
-      "Style customization",
-      "Upscaling and variations",
-      "Multiple art styles",
-      "Batch processing",
-      "Community showcase"
-    ],
-    verified: true,
-    updatedDate: "2025-01-08",
-    pros: [
-      "Produces high-quality images",
-      "Intuitive prompt system",
-      "Active community",
-      "Regular model updates"
-    ],
-    cons: [
-      "Free trial limited to 25 images",
-      "Requires Discord access",
-      "Steep learning curve for advanced features"
-    ]
-  },
-  "copilot": {
-    name: "GitHub Copilot",
-    category: "Coding Assistants",
-    description: "GitHub Copilot is an AI-powered code assistant that helps you write code faster. Students and educators can use it free, and there's a 60-day free trial for others.",
-    image: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Al7jyxM8sHalQ2EcbERIFxTIFv/free-ai-coding-assistant-interface-showi-1773157942636-e83a2185.png",
-    url: "https://github.com/features/copilot",
-    tags: ["Coding", "Free for Students", "IDE Integration", "Open Source"],
-    rating: 4.7,
-    reviews: 2156,
-    features: [
-      "Code completion suggestions",
-      "Function generation",
-      "Test writing assistance",
-      "Multiple language support",
-      "Context-aware suggestions",
-      "Documentation generation"
-    ],
-    verified: true,
-    updatedDate: "2025-01-08",
-    pros: [
-      "Accelerates coding workflow",
-      "Works with popular IDEs",
-      "Free for students",
-      "Supports 14+ programming languages"
-    ],
-    cons: [
-      "Paid subscription required for individuals",
-      "May suggest suboptimal code",
-      "Requires careful review of suggestions"
-    ]
-  }
-};
-
-export default function ToolDetailPage() {
-  const params = useParams();
-  const toolId = params.id as string;
-  
-  const tool = toolsDatabase[toolId] || toolsDatabase["chat-gpt"];
 
+export default function ToolDetailPage({ params }: { params: { id: string } }) {
   const navItems = [
     { name: "Explore", id: "tools" },
-    { name: "Categories", id: "/categories" },
+    { name: "Categories", id: "categories" },
     { name: "How It Works", id: "features" },
     { name: "Suggest Tool", id: "contact" },
     { name: "Blog", id: "https://blog.example.com" },
@@ -131,173 +27,25 @@ export default function ToolDetailPage() {
       headingFontWeight="medium"
     >
       <div id="nav" data-section="nav">
-        <NavbarStyleApple
-          brandName="FreeAI Hub"
-          navItems={navItems}
-        />
+        <NavbarStyleApple brandName="FreeAI Hub" navItems={navItems} />
       </div>
 
-      <div id="tool-header" data-section="tool-header" className="w-full">
-        <section className="mx-auto px-4 md:px-6 py-8">
-          <Link href="/categories" className="flex items-center text-primary-cta hover:text-orange-600 mb-8 font-semibold">
-            <ArrowLeft className="w-4 h-4 mr-2" />
-            Back to Categories
-          </Link>
-        </section>
-      </div>
-
-      <div id="tool-detail" data-section="tool-detail" className="w-full">
-        <section className="mx-auto px-4 md:px-6 py-12">
-          <div className="grid grid-cols-1 lg:grid-cols-3 gap-12">
-            {/* Main Content */}
-            <div className="lg:col-span-2">
-              {/* Tool Header */}
-              <div className="mb-12">
-                <div className="flex items-start gap-6 mb-8">
-                  <div className="w-24 h-24 bg-gradient-to-br from-orange-100 to-orange-50 rounded-xl overflow-hidden flex-shrink-0">
-                    <img 
-                      src={tool.image} 
-                      alt={tool.name}
-                      className="w-full h-full object-cover"
-                    />
-                  </div>
-                  <div className="flex-1">
-                    <div className="flex items-center gap-3 mb-2">
-                      <h1 className="text-4xl font-bold text-foreground">{tool.name}</h1>
-                      {tool.verified && (
-                        <div className="flex items-center gap-1 bg-green-100 text-green-700 px-3 py-1 rounded-full text-sm font-semibold">
-                          <Check className="w-4 h-4" />
-                          Verified
-                        </div>
-                      )}
-                    </div>
-                    <p className="text-foreground/60 mb-4">{tool.category}</p>
-                    <div className="flex items-center gap-2">
-                      <div className="flex items-center">
-                        {[...Array(5)].map((_, i) => (
-                          <Star 
-                            key={i}
-                            className={`w-4 h-4 ${i < Math.floor(tool.rating) ? 'fill-yellow-400 text-yellow-400' : 'text-gray-300'}`}
-                          />
-                        ))}
-                      </div>
-                      <span className="text-foreground font-semibold">{tool.rating}</span>
-                      <span className="text-foreground/60">({tool.reviews.toLocaleString()} reviews)</span>
-                    </div>
-                  </div>
-                </div>
-
-                {/* Tags */}
-                <div className="flex flex-wrap gap-3 mb-8">
-                  {tool.tags.map((tag: string, idx: number) => (
-                    <span 
-                      key={idx}
-                      className="bg-orange-100 text-primary-cta px-4 py-2 rounded-full text-sm font-semibold"
-                    >
-                      {tag}
-                    </span>
-                  ))}
-                </div>
-
-                {/* Main CTA Button */}
-                <a 
-                  href={tool.url}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="inline-flex items-center gap-2 bg-primary-cta text-primary-cta-text px-8 py-4 rounded-lg font-bold hover:bg-orange-600 transition-colors mb-12"
-                >
-                  Visit {tool.name}
-                  <ExternalLink className="w-5 h-5" />
-                </a>
-              </div>
-
-              {/* Description */}
-              <div className="mb-12">
-                <h2 className="text-2xl font-bold text-foreground mb-4">About This Tool</h2>
-                <p className="text-foreground/70 text-lg leading-relaxed">
-                  {tool.description}
-                </p>
-              </div>
-
-              {/* Features */}
-              <div className="mb-12">
-                <h2 className="text-2xl font-bold text-foreground mb-6">Key Features</h2>
-                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-                  {tool.features.map((feature: string, idx: number) => (
-                    <div key={idx} className="flex gap-3 items-start p-4 bg-card rounded-lg">
-                      <Check className="w-5 h-5 text-primary-cta flex-shrink-0 mt-0.5" />
-                      <span className="text-foreground">{feature}</span>
-                    </div>
-                  ))}
-                </div>
-              </div>
-
-              {/* Pros and Cons */}
-              <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
-                <div>
-                  <h3 className="text-xl font-bold text-foreground mb-4">Pros</h3>
-                  <ul className="space-y-3">
-                    {tool.pros.map((pro: string, idx: number) => (
-                      <li key={idx} className="flex gap-3 items-start">
-                        <Check className="w-5 h-5 text-green-600 flex-shrink-0 mt-0.5" />
-                        <span className="text-foreground/70">{pro}</span>
-                      </li>
-                    ))}
-                  </ul>
-                </div>
-                <div>
-                  <h3 className="text-xl font-bold text-foreground mb-4">Cons</h3>
-                  <ul className="space-y-3">
-                    {tool.cons.map((con: string, idx: number) => (
-                      <li key={idx} className="flex gap-3 items-start">
-                        <div className="w-5 h-5 text-red-600 flex-shrink-0 mt-0.5">−</div>
-                        <span className="text-foreground/70">{con}</span>
-                      </li>
-                    ))}
-                  </ul>
-                </div>
-              </div>
-            </div>
-
-            {/* Sidebar */}
-            <div className="lg:col-span-1">
-              <div className="bg-card rounded-xl p-6 sticky top-24">
-                <h3 className="text-xl font-bold text-foreground mb-6">Quick Info</h3>
-                
-                <div className="mb-8 pb-8 border-b border-accent">
-                  <p className="text-foreground/60 text-sm mb-2">Verified on:</p>
-                  <p className="text-foreground font-semibold">{tool.updatedDate}</p>
-                </div>
-
-                <div className="mb-8 pb-8 border-b border-accent">
-                  <p className="text-foreground/60 text-sm mb-3">Pricing:</p>
-                  <div className="inline-block bg-green-100 text-green-700 px-4 py-2 rounded-lg font-bold text-sm">
-                    100% Free
-                  </div>
-                </div>
-
-                <div>
-                  <p className="text-foreground/60 text-sm mb-3">Visit:</p>
-                  <a 
-                    href={tool.url}
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    className="text-primary-cta font-semibold hover:text-orange-600 break-all text-sm"
-                  >
-                    {tool.url.replace('https://', '')}
-                  </a>
-                </div>
-              </div>
-            </div>
-          </div>
-        </section>
+      <div id="tool-detail" data-section="tool-detail" className="mx-auto px-4 md:px-6 py-16 md:py-24">
+        <div className="max-w-4xl mx-auto">
+          <h1 className="text-4xl md:text-5xl font-bold text-foreground mb-6">
+            Tool Details
+          </h1>
+          <p className="text-xl text-foreground/70 mb-8">
+            Loading tool information for ID: {params.id}
+          </p>
+        </div>
       </div>
 
       <div id="footer" data-section="footer">
         <FooterLogoReveal
           logoText="FreeAI Hub"
-          leftLink={{ label: "Privacy Policy", href: "/privacy" }}
-          rightLink={{ label: "Terms of Service", href: "/terms" }}
+          leftLink={{ text: "Privacy Policy", href: "/privacy" }}
+          rightLink={{ text: "Terms of Service", href: "/terms" }}
         />
       </div>
     </ThemeProvider>