Merge version_1 into main #1
@@ -49,25 +49,13 @@ export default function AdminPage() {
|
||||
description="Real-time statistics and verification metrics"
|
||||
metrics={[
|
||||
{
|
||||
id: "1",
|
||||
value: "500+",
|
||||
description: "Free AI Tools Indexed",
|
||||
},
|
||||
id: "1", value: "500+", description: "Free AI Tools Indexed"},
|
||||
{
|
||||
id: "2",
|
||||
value: "127",
|
||||
description: "Tools Verified This Week",
|
||||
},
|
||||
id: "2", value: "127", description: "Tools Verified This Week"},
|
||||
{
|
||||
id: "3",
|
||||
value: "8",
|
||||
description: "Tools Removed (No Longer Free)",
|
||||
},
|
||||
id: "3", value: "8", description: "Tools Removed (No Longer Free)"},
|
||||
{
|
||||
id: "4",
|
||||
value: "2.4K",
|
||||
description: "Pending Submissions",
|
||||
},
|
||||
id: "4", value: "2.4K", description: "Pending Submissions"},
|
||||
]}
|
||||
gridVariant="uniform-all-items-equal"
|
||||
textboxLayout="default"
|
||||
@@ -82,67 +70,37 @@ export default function AdminPage() {
|
||||
description="Complete tools for managing the FreeAI Hub directory and community submissions"
|
||||
features={[
|
||||
{
|
||||
title: "Verification Dashboard",
|
||||
description: "Monitor and manage tool verification status",
|
||||
bentoComponent: "animated-bar-chart",
|
||||
},
|
||||
title: "Verification Dashboard", description: "Monitor and manage tool verification status", bentoComponent: "animated-bar-chart"},
|
||||
{
|
||||
title: "Submission Review",
|
||||
description: "Review and approve community-submitted tools",
|
||||
bentoComponent: "icon-info-cards",
|
||||
items: [
|
||||
title: "Submission Review", description: "Review and approve community-submitted tools", bentoComponent: "icon-info-cards", items: [
|
||||
{
|
||||
icon: CheckCircle,
|
||||
label: "Pending",
|
||||
value: "2.4K",
|
||||
},
|
||||
label: "Pending", value: "2.4K"},
|
||||
{
|
||||
icon: Users,
|
||||
label: "Reviewers",
|
||||
value: "18",
|
||||
},
|
||||
label: "Reviewers", value: "18"},
|
||||
{
|
||||
icon: Clock,
|
||||
label: "Avg Review",
|
||||
value: "2.5h",
|
||||
},
|
||||
label: "Avg Review", value: "2.5h"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "User Analytics",
|
||||
description: "Track user engagement and platform metrics",
|
||||
bentoComponent: "globe",
|
||||
},
|
||||
title: "User Analytics", description: "Track user engagement and platform metrics", bentoComponent: "globe"},
|
||||
{
|
||||
title: "Tool Management",
|
||||
description: "Edit, archive, and update tool information",
|
||||
bentoComponent: "3d-stack-cards",
|
||||
items: [
|
||||
title: "Tool Management", description: "Edit, archive, and update tool information", bentoComponent: "3d-stack-cards", items: [
|
||||
{
|
||||
icon: Info,
|
||||
title: "Edit Tool Details",
|
||||
subtitle: "Update descriptions and info",
|
||||
detail: "Bulk edit capability",
|
||||
},
|
||||
title: "Edit Tool Details", subtitle: "Update descriptions and info", detail: "Bulk edit capability"},
|
||||
{
|
||||
icon: Image,
|
||||
title: "Manage Screenshots",
|
||||
subtitle: "Upload and organize images",
|
||||
detail: "Auto-optimization",
|
||||
},
|
||||
title: "Manage Screenshots", subtitle: "Upload and organize images", detail: "Auto-optimization"},
|
||||
{
|
||||
icon: CheckCircle,
|
||||
title: "Verify Free Status",
|
||||
subtitle: "Check payment requirements",
|
||||
detail: "Automated checks run weekly",
|
||||
},
|
||||
title: "Verify Free Status", subtitle: "Check payment requirements", detail: "Automated checks run weekly"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Category Organization",
|
||||
description: "Manage and organize tool categories",
|
||||
bentoComponent: "orbiting-icons",
|
||||
centerIcon: BarChart3,
|
||||
title: "Category Organization", description: "Manage and organize tool categories", bentoComponent: "orbiting-icons", centerIcon: BarChart3,
|
||||
items: [
|
||||
{
|
||||
icon: Zap,
|
||||
@@ -163,18 +121,9 @@ export default function AdminPage() {
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Feature Flags",
|
||||
description: "Control and test new features before release",
|
||||
bentoComponent: "marquee",
|
||||
centerIcon: Zap,
|
||||
variant: "text",
|
||||
texts: [
|
||||
"Beta Features",
|
||||
"A/B Testing",
|
||||
"Feature Rollout",
|
||||
"User Segmentation",
|
||||
"Performance Monitoring",
|
||||
],
|
||||
title: "Feature Flags", description: "Control and test new features before release", bentoComponent: "marquee", centerIcon: Zap,
|
||||
variant: "text", texts: [
|
||||
"Beta Features", "A/B Testing", "Feature Rollout", "User Segmentation", "Performance Monitoring"],
|
||||
},
|
||||
]}
|
||||
textboxLayout="default"
|
||||
@@ -190,15 +139,11 @@ export default function AdminPage() {
|
||||
description="Restricted access for administrators and community moderators. For access inquiries or to join the moderation team, please contact our admin team with verification details."
|
||||
buttons={[
|
||||
{
|
||||
text: "Request Access",
|
||||
href: "mailto:admin@freeai-hub.com",
|
||||
},
|
||||
text: "Request Access", href: "mailto:admin@freeai-hub.com"},
|
||||
{
|
||||
text: "Return Home",
|
||||
href: "/",
|
||||
},
|
||||
text: "Return Home", href: "/"},
|
||||
]}
|
||||
background={{ variant: "circleGradient" }}
|
||||
background={{ variant: "plain" }}
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
@@ -207,13 +152,9 @@ export default function AdminPage() {
|
||||
<FooterLogoReveal
|
||||
logoText="FreeAI Hub"
|
||||
leftLink={{
|
||||
text: "Privacy Policy",
|
||||
href: "/privacy",
|
||||
}}
|
||||
text: "Privacy Policy", href: "/privacy"}}
|
||||
rightLink={{
|
||||
text: "Terms of Service",
|
||||
href: "/terms",
|
||||
}}
|
||||
text: "Terms of Service", href: "/terms"}}
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
|
||||
@@ -205,8 +205,8 @@ export default function CategoriesPage() {
|
||||
<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>
|
||||
|
||||
@@ -59,7 +59,7 @@ export default function HomePage() {
|
||||
<HeroLogoBillboardSplit
|
||||
logoText="FreeAI Hub"
|
||||
description="Discover 100% free AI tools verified daily. No credit cards, no hidden fees, no paywalls. Just pure AI power for everyone."
|
||||
background={{ variant: "circleGradient" }}
|
||||
background={{ variant: "plain" }}
|
||||
buttons={[
|
||||
{ text: "Explore Tools", href: "/tools" },
|
||||
{ text: "Suggest Tool", href: "/suggest" },
|
||||
@@ -86,6 +86,7 @@ export default function HomePage() {
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Al7jyxM8sHalQ2EcbERIFxTIFv/vibrant-visual-showing-ai-image-generati-1773157943406-b8141e79.png"
|
||||
imageAlt="AI Generated Images Gallery"
|
||||
mediaAnimation="slide-up"
|
||||
metricsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -96,30 +97,18 @@ export default function HomePage() {
|
||||
description="Smart verification, real-time filtering, and community-powered curation to help you find exactly what you need."
|
||||
features={[
|
||||
{
|
||||
title: "Real-Time Verification",
|
||||
description: "Automatic weekly checks ensure every tool remains completely free",
|
||||
bentoComponent: "globe",
|
||||
},
|
||||
title: "Real-Time Verification", description: "Automatic weekly checks ensure every tool remains completely free", bentoComponent: "globe"},
|
||||
{
|
||||
title: "Intelligent Filtering",
|
||||
description: "Filter by category, features, popularity, and free status badges",
|
||||
bentoComponent: "animated-bar-chart",
|
||||
},
|
||||
title: "Intelligent Filtering", description: "Filter by category, features, popularity, and free status badges", bentoComponent: "animated-bar-chart"},
|
||||
{
|
||||
title: "Smart Categories",
|
||||
description: "Browse by Image Gen, Video, Coding, Writing, Chatbots, Voice, Music, and more",
|
||||
bentoComponent: "icon-info-cards",
|
||||
items: [
|
||||
title: "Smart Categories", description: "Browse by Image Gen, Video, Coding, Writing, Chatbots, Voice, Music, and more", bentoComponent: "icon-info-cards", items: [
|
||||
{ icon: Sparkles, label: "10+ Categories", value: "Organized" },
|
||||
{ icon: Zap, label: "Daily Updates", value: "Fresh" },
|
||||
{ icon: Shield, label: "Verified Safe", value: "Trusted" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Community Powered",
|
||||
description: "Users submit new tools and community verifies before publishing",
|
||||
bentoComponent: "orbiting-icons",
|
||||
centerIcon: Users,
|
||||
title: "Community Powered", description: "Users submit new tools and community verifies before publishing", bentoComponent: "orbiting-icons", centerIcon: Users,
|
||||
items: [
|
||||
{ icon: Heart, ring: 1 },
|
||||
{ icon: MessageSquare, ring: 1 },
|
||||
@@ -128,43 +117,22 @@ export default function HomePage() {
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Detailed Tool Pages",
|
||||
description: "Each tool shows features, direct link, screenshots, and free status verification",
|
||||
bentoComponent: "3d-stack-cards",
|
||||
items: [
|
||||
title: "Detailed Tool Pages", description: "Each tool shows features, direct link, screenshots, and free status verification", bentoComponent: "3d-stack-cards", items: [
|
||||
{
|
||||
icon: Info,
|
||||
title: "Full Description",
|
||||
subtitle: "Learn what the tool does",
|
||||
detail: "Comprehensive feature list",
|
||||
},
|
||||
title: "Full Description", subtitle: "Learn what the tool does", detail: "Comprehensive feature list"},
|
||||
{
|
||||
icon: ImageIcon,
|
||||
title: "Screenshots",
|
||||
subtitle: "See it in action",
|
||||
detail: "Visual interface preview",
|
||||
},
|
||||
title: "Screenshots", subtitle: "See it in action", detail: "Visual interface preview"},
|
||||
{
|
||||
icon: CheckCircle,
|
||||
title: "Free Verified",
|
||||
subtitle: "100% no payment needed",
|
||||
detail: "Weekly auto-verification",
|
||||
},
|
||||
title: "Free Verified", subtitle: "100% no payment needed", detail: "Weekly auto-verification"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Tag System",
|
||||
description: "Quick visual tags: 100% Free, No Login, Open Source, Browser Based, Mobile Friendly",
|
||||
bentoComponent: "marquee",
|
||||
centerIcon: TagIcon,
|
||||
variant: "text",
|
||||
texts: [
|
||||
"100% Free",
|
||||
"No Login Required",
|
||||
"Open Source",
|
||||
"Browser Based",
|
||||
"Mobile Friendly",
|
||||
],
|
||||
title: "Tag System", description: "Quick visual tags: 100% Free, No Login, Open Source, Browser Based, Mobile Friendly", bentoComponent: "marquee", centerIcon: TagIcon,
|
||||
variant: "text", texts: [
|
||||
"100% Free", "No Login Required", "Open Source", "Browser Based", "Mobile Friendly"],
|
||||
},
|
||||
]}
|
||||
textboxLayout="default"
|
||||
@@ -198,25 +166,13 @@ export default function HomePage() {
|
||||
cardTag="Join 50,000+ users saving time and money"
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Sarah Chen",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Al7jyxM8sHalQ2EcbERIFxTIFv/professional-headshot-photo-of-a-softwar-1773157942236-967200be.jpg",
|
||||
},
|
||||
id: "1", name: "Sarah Chen", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Al7jyxM8sHalQ2EcbERIFxTIFv/professional-headshot-photo-of-a-softwar-1773157942236-967200be.jpg"},
|
||||
{
|
||||
id: "2",
|
||||
name: "Michael Rodriguez",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Al7jyxM8sHalQ2EcbERIFxTIFv/professional-headshot-photo-of-a-designe-1773157942605-4a8d8870.png",
|
||||
},
|
||||
id: "2", name: "Michael Rodriguez", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Al7jyxM8sHalQ2EcbERIFxTIFv/professional-headshot-photo-of-a-designe-1773157942605-4a8d8870.png"},
|
||||
{
|
||||
id: "3",
|
||||
name: "Emma Watson",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Al7jyxM8sHalQ2EcbERIFxTIFv/professional-headshot-of-a-male-entrepre-1773157942929-1c263839.png",
|
||||
},
|
||||
id: "3", name: "Emma Watson", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Al7jyxM8sHalQ2EcbERIFxTIFv/professional-headshot-of-a-male-entrepre-1773157942929-1c263839.png"},
|
||||
{
|
||||
id: "4",
|
||||
name: "James Liu",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Al7jyxM8sHalQ2EcbERIFxTIFv/professional-headshot-of-a-female-produc-1773157940387-53ba5cb7.jpg",
|
||||
},
|
||||
id: "4", name: "James Liu", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Al7jyxM8sHalQ2EcbERIFxTIFv/professional-headshot-of-a-female-produc-1773157940387-53ba5cb7.jpg"},
|
||||
]}
|
||||
cardAnimation="slide-up"
|
||||
useInvertedBackground={false}
|
||||
@@ -229,16 +185,8 @@ export default function HomePage() {
|
||||
title="Tools We've Verified & Listed"
|
||||
description="Featuring the best free AI platforms trusted globally"
|
||||
tag="Featured Partners"
|
||||
logos={[
|
||||
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Al7jyxM8sHalQ2EcbERIFxTIFv/openai-company-logo-simple-recognizable--1773157943124-261a6c0d.png",
|
||||
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Al7jyxM8sHalQ2EcbERIFxTIFv/google-company-logo-colorful-recognizabl-1773157942161-8b2adb96.jpg",
|
||||
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Al7jyxM8sHalQ2EcbERIFxTIFv/hugging-face-company-logo-smiling-huggin-1773157943352-8bd2a3bd.jpg",
|
||||
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Al7jyxM8sHalQ2EcbERIFxTIFv/midjourney-company-logo-recognizable-ai--1773157942201-42ba1372.png",
|
||||
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Al7jyxM8sHalQ2EcbERIFxTIFv/anthropic-company-logo-ai-safety-and-res-1773157942988-bc9e4d5e.png",
|
||||
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Al7jyxM8sHalQ2EcbERIFxTIFv/stability-ai-company-logo-ai-image-gener-1773157942920-b2c75344.png",
|
||||
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Al7jyxM8sHalQ2EcbERIFxTIFv/jasper-ai-company-logo-content-creation--1773157942616-a19d50b4.jpg",
|
||||
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Al7jyxM8sHalQ2EcbERIFxTIFv/copy-ai-company-logo-ai-copywriting-tool-1773157941558-776c4a3e.jpg",
|
||||
]}
|
||||
names={[
|
||||
"OpenAI", "Google", "Hugging Face", "Midjourney", "Anthropic", "Stability AI", "Jasper", "Copy.ai"]}
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
speed={40}
|
||||
@@ -256,7 +204,7 @@ export default function HomePage() {
|
||||
{ text: "Browse All Tools", href: "/tools" },
|
||||
{ text: "Suggest a Tool", href: "/suggest" },
|
||||
]}
|
||||
background={{ variant: "circleGradient" }}
|
||||
background={{ variant: "plain" }}
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -39,15 +39,11 @@ export default function SuggestPage() {
|
||||
description="Found an amazing free AI tool that should be on FreeAI Hub? Submit it for community review and verification. We check every submission to ensure it's truly free, safe, and useful for our community."
|
||||
buttons={[
|
||||
{
|
||||
text: "Submit Tool Form",
|
||||
href: "mailto:submit@freeai-hub.com",
|
||||
},
|
||||
text: "Submit Tool Form", href: "mailto:submit@freeai-hub.com"},
|
||||
{
|
||||
text: "Back to Tools",
|
||||
href: "/",
|
||||
},
|
||||
text: "Back to Tools", href: "/"},
|
||||
]}
|
||||
background={{ variant: "circleGradient" }}
|
||||
background={{ variant: "plain" }}
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
@@ -56,13 +52,9 @@ export default function SuggestPage() {
|
||||
<FooterLogoReveal
|
||||
logoText="FreeAI Hub"
|
||||
leftLink={{
|
||||
text: "Privacy Policy",
|
||||
href: "/privacy",
|
||||
}}
|
||||
text: "Privacy Policy", href: "/privacy"}}
|
||||
rightLink={{
|
||||
text: "Terms of Service",
|
||||
href: "/terms",
|
||||
}}
|
||||
text: "Terms of Service", href: "/terms"}}
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -49,7 +49,7 @@ export default function ToolsPage() {
|
||||
<HeroLogoBillboardSplit
|
||||
logoText="Browse All Tools"
|
||||
description="Explore our complete collection of 500+ verified free AI tools across every category. Carefully curated and automatically checked daily to ensure they remain 100% free."
|
||||
background={{ variant: "circleGradient" }}
|
||||
background={{ variant: "plain" }}
|
||||
buttons={[
|
||||
{ text: "View Categories", href: "#categories" },
|
||||
{ text: "Back to Home", href: "/" },
|
||||
@@ -69,25 +69,16 @@ export default function ToolsPage() {
|
||||
description="Find the perfect free AI tool for your needs. Browse through our most popular categories with hand-picked selections."
|
||||
features={[
|
||||
{
|
||||
title: "Image Generation",
|
||||
description: "Create stunning visuals with free AI art generators",
|
||||
bentoComponent: "animated-bar-chart",
|
||||
},
|
||||
title: "Image Generation", description: "Create stunning visuals with free AI art generators", bentoComponent: "animated-bar-chart"},
|
||||
{
|
||||
title: "Writing & Content",
|
||||
description: "Generate blog posts, emails, and social media content",
|
||||
bentoComponent: "icon-info-cards",
|
||||
items: [
|
||||
title: "Writing & Content", description: "Generate blog posts, emails, and social media content", bentoComponent: "icon-info-cards", items: [
|
||||
{ icon: Sparkles, label: "Blog Posts", value: "20+ Tools" },
|
||||
{ icon: Zap, label: "Email Copy", value: "15+ Tools" },
|
||||
{ icon: Shield, label: "SEO Tools", value: "12+ Tools" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Coding Assistants",
|
||||
description: "Free AI coding helpers for developers of all levels",
|
||||
bentoComponent: "orbiting-icons",
|
||||
centerIcon: Users,
|
||||
title: "Coding Assistants", description: "Free AI coding helpers for developers of all levels", bentoComponent: "orbiting-icons", centerIcon: Users,
|
||||
items: [
|
||||
{ icon: Heart, ring: 1 },
|
||||
{ icon: MessageSquare, ring: 1 },
|
||||
@@ -96,41 +87,22 @@ export default function ToolsPage() {
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Video & Audio",
|
||||
description: "Edit videos, create voiceovers, and generate music",
|
||||
bentoComponent: "globe",
|
||||
title: "Video & Audio", description: "Edit videos, create voiceovers, and generate music", bentoComponent: "globe"},
|
||||
{
|
||||
title: "Chatbots & Assistants", description: "Conversational AI tools for productivity and learning", bentoComponent: "marquee", centerIcon: MessageSquare,
|
||||
variant: "text", texts: ["ChatGPT Free", "Claude", "Gemini", "Perplexity", "Others"],
|
||||
},
|
||||
{
|
||||
title: "Chatbots & Assistants",
|
||||
description: "Conversational AI tools for productivity and learning",
|
||||
bentoComponent: "marquee",
|
||||
centerIcon: MessageSquare,
|
||||
variant: "text",
|
||||
texts: ["ChatGPT Free", "Claude", "Gemini", "Perplexity", "Others"],
|
||||
},
|
||||
{
|
||||
title: "Design Tools",
|
||||
description: "Create graphics, logos, and mockups without paying",
|
||||
bentoComponent: "3d-stack-cards",
|
||||
items: [
|
||||
title: "Design Tools", description: "Create graphics, logos, and mockups without paying", bentoComponent: "3d-stack-cards", items: [
|
||||
{
|
||||
icon: Sparkles,
|
||||
title: "Logo Design",
|
||||
subtitle: "AI-powered creators",
|
||||
detail: "8+ free tools",
|
||||
},
|
||||
title: "Logo Design", subtitle: "AI-powered creators", detail: "8+ free tools"},
|
||||
{
|
||||
icon: Zap,
|
||||
title: "Graphics",
|
||||
subtitle: "Design templates",
|
||||
detail: "12+ platforms",
|
||||
},
|
||||
title: "Graphics", subtitle: "Design templates", detail: "12+ platforms"},
|
||||
{
|
||||
icon: Shield,
|
||||
title: "Mockups",
|
||||
subtitle: "Product mockups",
|
||||
detail: "5+ tools",
|
||||
},
|
||||
title: "Mockups", subtitle: "Product mockups", detail: "5+ tools"},
|
||||
],
|
||||
},
|
||||
]}
|
||||
|
||||
Reference in New Issue
Block a user