Update src/app/tool/[id]/page.tsx
This commit is contained in:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user