Enhance AI Tools Hub with new AI tools and dark theme

package.json

@@ -28,7 +28,7 @@
     "react-helmet": "^6.1.0",
     "react-icons": "^5.5.0",
     "react-router-dom": "^7.8.1",
-    "react-scripts": "5.0.1",
+    "react-scripts": "^5.0.1",
     "react-vertical-timeline-component": "^3.5.3",
     "sitemap": "^8.0.0",
     "styled-components": "^6.1.15",

public/data/sonali131.json

@@ -0,0 +1,13 @@
+{
+  "name": "Sonali Mishra",
+  "location": "Prayagraj, India",
+  "bio": "AI and software developer passionate about building smart applications, web platforms, and innovative solutions.",
+  "avatar": "https://github.com/sonali131.png",
+  "portfolio": "https://sonali131.github.io/portfolio",
+  "skills": ["React", "Node.js", "AI/ML", "Python", "Tailwind CSS","Java","SQL","Angular","git","github","HTML","CSS",],
+  "social": {
+    "GitHub": "https://github.com/sonali131",
+    "LinkedIn": "https://www.linkedin.com/in/sonali-mishra-4239aa250/",
+    "Email": "mishrasonali1198@gmail.com"
+  }
+}

src/AiToolsHub/AITools.jsx

@@ -66,6 +66,54 @@ const aiTools = [
     ],
     url: 'https://www.deepseek.com',
   },
+  // Added more AI tools here
+  {
+    title: 'ElevenLabs Voice AI',
+    description:
+      'ElevenLabs provides advanced voice synthesis and analysis tools for creating realistic and expressive speech.',
+    features: ['High-quality voice generation', 'Voice cloning and customization', 'Emotion detection in speech'],
+    url: 'https://elevenlabs.io',
+  },
+  {
+    title: 'Memelord Meme Resource',
+    description: 'Memelord offers a collection of AI-generated memes and meme templates for creative expression.',
+    features: ['AI-generated meme suggestions', 'Customizable meme templates', 'Trending meme collections'],
+    url: 'https://memelord.com',
+  },
+  {
+    title: 'Clonify UI Library',
+    description: 'Clonify provides a library of pre-built UI components and templates for rapid web development.',
+    features: ['Responsive UI components', 'Customizable templates', 'Easy integration with frameworks'],
+    url: 'https://clonify.com',
+  },
+  {
+    title: 'Inbound Email Platform',
+    description: 'Inbound offers an AI-powered email platform for personalized marketing and customer engagement.',
+    features: [
+      'Automated email campaigns',
+      'Personalized content recommendations',
+      'Analytics and performance tracking',
+    ],
+    url: 'https://inbound.com',
+  },
+  {
+    title: 'Uncode Framer Components',
+    description: 'Uncode provides a set of components for Framer, enabling designers to create interactive prototypes.',
+    features: ['Pre-built Framer components', 'Interactive animations', 'Customizable design elements'],
+    url: 'https://uncode.com',
+  },
+  {
+    title: 'V30 Social Media Tool',
+    description: 'V30 offers AI tools for social media management, including content scheduling and analytics.',
+    features: ['Automated content scheduling', 'Social media analytics', 'Audience engagement tools'],
+    url: 'https://v30.com',
+  },
+  {
+    title: 'VoiceTypr Voice Dictation',
+    description: 'VoiceTypr provides AI-powered voice dictation tools for transcribing speech to text.',
+    features: ['Real-time voice transcription', 'Multi-language support', 'Customizable voice models'],
+    url: 'https://voicetypr.com',
+  },
 ];
 
 const AITools = () => {

src/Page/AIToolsHub.jsx

@@ -63,67 +63,228 @@ const AIToolsCards = () => {
     {
       title: 'Natural Language Processing',
       description: 'Tools for processing and analyzing human language data.',
-      link: '/NLPTools',
+      // link: '/NLPTools',
+      link: 'https://toolfolio.io/', // Direct tool link
       tags: ['nlp', 'text', 'analysis'],
     },
     {
       title: 'Computer Vision',
       description: 'Tools for analyzing and interpreting visual data.',
-      link: '/ComputerVisionTools',
+      link: 'https://opencv.org/blog/computer-vision-tools-top-10/',
       tags: ['vision', 'image', 'analysis'],
     },
     {
       title: 'Machine Learning Frameworks',
       description: 'Popular frameworks for building machine learning models.',
-      link: '/MLFrameworks',
+      link: 'https://www.openml.org/',
       tags: ['ml', 'frameworks', 'models'],
     },
     {
       title: 'Data Preprocessing',
       description: 'Tools for cleaning and preparing data for analysis.',
-      link: '/DataPreprocessingTools',
+      link: 'https://julius.ai/glossary/data-preprocessing',
       tags: ['data', 'cleaning', 'preprocessing'],
     },
     {
       title: 'AI Model Deployment',
       description: 'Tools for deploying AI models to production.',
-      link: '/ModelDeploymentTools',
+      link: 'https://www.copado.com/',
       tags: ['deployment', 'models', 'production'],
     },
     {
       title: 'AI Ethics and Fairness',
       description: 'Tools for ensuring ethical and fair AI practices.',
-      link: '/AIEthicsTools',
+      link: 'https://www.unesco.org/',
       tags: ['ethics', 'fairness', 'ai'],
     },
     {
       title: 'Reinforcement Learning',
       description: 'Tools for building and training reinforcement learning models.',
-      link: '/ReinforcementLearningTools',
+      link: 'https://huggingface.co/',
       tags: ['rl', 'training', 'models'],
     },
     {
       title: 'AI in Healthcare',
       description: 'Tools for applying AI in healthcare and medical fields.',
-      link: '/HealthcareAITools',
+      link: 'https://www.getprosper.ai/',
       tags: ['healthcare', 'medical', 'ai'],
     },
     {
       title: 'AI in Finance',
       description: 'Tools for applying AI in financial services.',
-      link: '/FinanceAITools',
+      link: 'https://www.stampli.com/',
       tags: ['finance', 'services', 'ai'],
     },
+    //Added more tools of AI here
+    // 🧠 Content Creation & Writing
+    {
+      title: 'Murf AI',
+      description:
+        'An AI-driven voiceover tool that converts text into natural-sounding speech, ideal for creating podcasts, audiobooks, and presentations.',
+      link: 'https://aitrendz.xyz/',
+      tags: ['voice', 'audio', 'content'],
+    },
+    {
+      title: 'AdCreative',
+      description:
+        'Generates high-converting ad creatives using AI, enhancing marketing campaigns with optimized visuals and copy.',
+      link: 'https://aitrendz.xyz/',
+      tags: ['ads', 'marketing', 'creative'],
+    },
+    {
+      title: 'ScribeHow',
+      description:
+        'Automates the creation of step-by-step guides and tutorials by recording user actions, streamlining documentation processes.',
+      link: 'https://toolfolio.io/',
+      tags: ['documentation', 'tutorial', 'automation'],
+    },
+
+    // 🎨 Design & Creativity
+    {
+      title: 'Krea AI',
+      description: 'A generative design tool that assists in creating unique visuals and layouts using AI algorithms.',
+      link: 'https://toolfolio.io/',
+      tags: ['design', 'visual', 'creative'],
+    },
+    {
+      title: 'Runway',
+      description:
+        'Offers AI-powered video editing and content creation tools, enabling creators to produce professional-quality videos efficiently.',
+      link: 'https://toolfolio.io/',
+      tags: ['video', 'editing', 'creative'],
+    },
+    {
+      title: 'SVGMaker',
+      description:
+        'Simplifies the creation of scalable vector graphics, making it accessible for designers and developers alike.',
+      link: 'https://aitoolhub.net/',
+      tags: ['svg', 'graphics', 'design'],
+    },
+
+    // 📊 Business & Productivity
+    {
+      title: 'PressPulse AI',
+      description: 'An AI-powered PR assistant that helps in crafting press releases and managing media outreach.',
+      link: 'https://toolfolio.io/',
+      tags: ['pr', 'marketing', 'business'],
+    },
+    {
+      title: 'Ping AI',
+      description:
+        'A to-do list application that uses AI to prioritize tasks and integrate with calendars for enhanced productivity.',
+      link: 'https://aitoolhub.co/',
+      tags: ['productivity', 'tasks', 'automation'],
+    },
+    {
+      title: 'Comp AI',
+      description:
+        'A compliance platform that leverages AI to ensure businesses adhere to regulatory standards and policies.',
+      link: 'https://toolfolio.io/',
+      tags: ['compliance', 'business', 'regulations'],
+    },
+
+    // 🧑‍💻 Development & Automation
+    {
+      title: 'Trellis AI',
+      description:
+        'A data platform that organizes complex information from various sources into structured, SQL-ready data using AI.',
+      link: 'https://aitoolhub.co/',
+      tags: ['data', 'automation', 'development'],
+    },
+    {
+      title: 'Laxis',
+      description:
+        'An AI-driven sales automation tool that assists in managing customer interactions and streamlining sales processes.',
+      link: 'https://toolfolio.io/',
+      tags: ['sales', 'automation', 'ai'],
+    },
+    {
+      title: 'Zapier Automations',
+      description:
+        'Automates workflows by connecting various apps and services, reducing manual tasks and improving efficiency.',
+      link: 'https://toolfolio.io/',
+      tags: ['workflow', 'automation', 'productivity'],
+    },
+
+    // 🧪 Research & Data Analysis
+    {
+      title: 'Mubert',
+      description:
+        'Generates AI-powered music and soundscapes, useful for content creators and researchers in multimedia projects.',
+      link: 'https://aitrendz.xyz/',
+      tags: ['music', 'ai', 'research'],
+    },
+    {
+      title: 'Looka',
+      description: 'An AI logo maker that helps businesses create brand identities quickly and effectively.',
+      link: 'https://aitrendz.xyz/',
+      tags: ['branding', 'logo', 'design'],
+    },
+    {
+      title: 'Blaze Content Creation',
+      description:
+        'Assists in generating written content using AI, streamlining the content creation process for marketers and writers.',
+      link: 'https://toolfolio.io/',
+      tags: ['content', 'writing', 'ai'],
+    },
   ];
 
+  // const filteredAITools = AITools.filter((tool) => {
+  //   const searchContent = `${tool.title} ${tool.description} ${tool.tags.join(' ')}`.toLowerCase();
+  //   return searchContent.includes(searchTerm.toLowerCase());
+  // });
+
+  // const handleSearch = (value) => {
+  //   setSearchTerm(value);
+  // };
+
+  // return (
+  //   <section className="ai-tools-section mx-auto w-full px-4 py-8 text-white lg:max-w-[80%]">
+  //     <div className="mx-auto mb-8 text-center">
+  //       <h2 className="mb-4 text-4xl font-bold text-[#00a6fb]">Top AI Tools</h2>
+  //       <p className="mx-auto mb-8 max-w-3xl px-4 text-xl">
+  //         Everything you need to grow, learn, and build in the AI industry.
+  //       </p>
+  //       <div className="mx-4">
+  //         <SearchBar onSearch={handleSearch} />
+  //       </div>
+  //     </div>
+
+  //     {filteredAITools.length === 0 ? (
+  //       <div className="py-8 text-center">
+  //         <p className="text-xl text-gray-400">No AI tools found matching your search.</p>
+  //       </div>
+  //     ) : (
+  //       <div className="grid grid-cols-1 gap-4 px-3 sm:gap-4 md:grid-cols-2 lg:grid-cols-3">
+  //         {filteredAITools.map((tool, index) => (
+  //           <a
+  //             key={index}
+  //             href={tool.link}
+  //             className="ai-tool-card flex h-full flex-col rounded-lg bg-gray-800 p-3 shadow-lg transition duration-300 hover:scale-105 hover:transform hover:bg-gray-700 sm:p-4"
+  //           >
+  //             <h3 className="mb-2 text-base font-semibold sm:text-lg">{tool.title}</h3>
+  //             <p className="flex-grow text-xs text-gray-300 sm:text-sm">{tool.description}</p>
+  //             <div className="mt-2 flex flex-wrap justify-center gap-1">
+  //               {tool.tags.slice(0, 2).map((tag, tagIndex) => (
+  //                 <span
+  //                   key={tagIndex}
+  //                   className="rounded-full bg-gray-700 px-1.5 py-0.5 text-[10px] text-gray-300 sm:px-2 sm:py-1 sm:text-xs"
+  //                 >
+  //                   {tag}
+  //                 </span>
+  //               ))}
+  //             </div>
+  //           </a>
+  //         ))}
+  //       </div>
+  //     )}
+  //   </section>
   const filteredAITools = AITools.filter((tool) => {
     const searchContent = `${tool.title} ${tool.description} ${tool.tags.join(' ')}`.toLowerCase();
     return searchContent.includes(searchTerm.toLowerCase());
   });
 
-  const handleSearch = (value) => {
-    setSearchTerm(value);
-  };
+  const handleSearch = (value) => setSearchTerm(value);
 
   return (
     <section className="ai-tools-section mx-auto w-full px-4 py-8 text-white lg:max-w-[80%]">
@@ -142,25 +303,30 @@ const AIToolsCards = () => {
           <p className="text-xl text-gray-400">No AI tools found matching your search.</p>
         </div>
       ) : (
-        <div className="grid grid-cols-1 gap-4 px-3 sm:gap-4 md:grid-cols-2 lg:grid-cols-3">
+        <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
           {filteredAITools.map((tool, index) => (
             <a
               key={index}
               href={tool.link}
-              className="ai-tool-card flex h-full flex-col rounded-lg bg-gray-800 p-3 shadow-lg transition duration-300 hover:scale-105 hover:transform hover:bg-gray-700 sm:p-4"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="relative flex h-full transform flex-col rounded-xl bg-gray-900 p-5 shadow-xl ring-1 ring-gray-700 transition-transform duration-300 hover:scale-105 hover:shadow-2xl hover:ring-[#00a6fb]"
             >
-              <h3 className="mb-2 text-base font-semibold sm:text-lg">{tool.title}</h3>
-              <p className="flex-grow text-xs text-gray-300 sm:text-sm">{tool.description}</p>
-              <div className="mt-2 flex flex-wrap justify-center gap-1">
-                {tool.tags.slice(0, 2).map((tag, tagIndex) => (
+              <h3 className="mb-2 text-lg font-bold text-white">{tool.title}</h3>
+              <p className="flex-grow text-sm text-gray-300">{tool.description}</p>
+              <div className="mt-4 flex flex-wrap gap-2">
+                {tool.tags.map((tag, tagIndex) => (
                   <span
                     key={tagIndex}
-                    className="rounded-full bg-gray-700 px-1.5 py-0.5 text-[10px] text-gray-300 sm:px-2 sm:py-1 sm:text-xs"
+                    className="cursor-pointer rounded-full bg-gradient-to-r from-[#00a6fb] to-[#00ffd5] px-3 py-1 text-xs font-medium text-gray-900 transition-all duration-300 hover:from-[#00ffd5] hover:to-[#00a6fb]"
                   >
                     {tag}
                   </span>
                 ))}
               </div>
+              <button className="mt-4 w-fit rounded-full bg-[#00a6fb] px-4 py-2 text-sm font-semibold text-white transition-colors hover:bg-[#00ffd5] hover:text-gray-900">
+                Visit Tool
+              </button>
             </a>
           ))}
         </div>