everydayserieswebsite/app/tools/page.tsx

"use client";

import React from 'react';
import Navbar from '@/components/Navbar/navbar';
import Footer from "@/components/footer";
import { HoverEffect } from '@/components/ui/card-hover-effect';
import { motion } from 'framer-motion';
import { FaMagic, FaRobot, FaChartLine, FaCog, FaListUl, FaSearch, FaArrowsAlt, FaPlug, FaPaste, FaRegFileAlt } from 'react-icons/fa';

const heading = "Tools - Empower Non-Coders to Create and Use AI Workflows"
const description = "Easily create and use AI-powered workflows without writing a single line of code. Input your data and get the desired output effortlessly."

const tools = [
  {
    title: "Text Summarizer",
    description: "Summarize long articles or documents into concise summaries.",
    imgSrc: "https://plus.unsplash.com/premium_photo-1683880731792-39c07ceea617?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NXx8b2ZmaWNlfGVufDB8fDB8fHww",
    link: "#"
  },
  {
    title: "Sentiment Analysis",
    description: "Analyze the sentiment of customer reviews or social media posts.",
    imgSrc: "https://images.unsplash.com/photo-1568992687947-868a62a9f521?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NHx8b2ZmaWNlfGVufDB8fDB8fHww",
    link: "#"
  },
  {
    title: "Image Recognition",
    description: "Identify objects and scenes in images with high accuracy.",
    imgSrc: "data:image/jpeg;base64,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",
    link: "#"
  },
  {
    title: "Chatbot Builder",
    description: "Create and deploy chatbots for customer support and engagement.",
    imgSrc: "https://images.unsplash.com/photo-1556157382-4e063bb26661?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Nnx8Y2hhdHxlbnwwfHwwfHx8MA%3D%3D",
    link: "#"
  }
];

const features = [
  {
    title: "Magic Button",
    description: "Automate complex tasks with a single click using our Magic Button feature.",
    icon: <FaMagic className="w-6 h-6 text-white" />,
    color: "from-purple-500 to-indigo-500"
  },
  {
    title: "AI-Powered Automation",
    description: "Leverage AI to automate repetitive tasks and improve efficiency.",
    icon: <FaRobot className="w-6 h-6 text-white" />,
    color: "from-green-500 to-teal-500"
  },
  {
    title: "Advanced Analytics",
    description: "Gain insights from your data with advanced analytics and reporting tools.",
    icon: <FaChartLine className="w-6 h-6 text-white" />,
    color: "from-blue-500 to-cyan-500"
  },
  {
    title: "Custom Workflows",
    description: "Create custom workflows tailored to your specific business needs.",
    icon: <FaCog className="w-6 h-6 text-white" />,
    color: "from-yellow-500 to-orange-500"
  }
];

const contents = [
  {
    title: "List",
    description:
      "With our drag and drop feature, anyone in your enterprise can build AI products effortlessly. Make AI an integral part of your business operations, irrespective of technical expertise.",
    link: "#", // Leave as #
    icon: FaListUl,
  },
  {
    title: "Search and Discovery",
    description:
      "Users can search for series based on keywords, categories, or tags making it way easier to manage all your creations and looking for them is not a hassle at all.",
    link: "#", // Leave as #
    icon: FaSearch,
  },
  {
    title: "Drag and drop",
    description:
      "Certainly! 'Drag and drop' refers to a user interface interaction where a person can click on an item, drag it to a different location, and then release it to drop it there. This action is commonly used in various applications and websites to allow users to rearrange or manipulate content more intuitively.",
    link: "#", // Leave as #
    icon: FaArrowsAlt,
  },
  {
    title: "Integration",
    description:
      "User can integrate own apis. When we talk about users integrating their own APIs, we're referring to the ability for users to incorporate their own custom Application Programming Interfaces (APIs) into a software application or system.",
    link: "#", // Leave as #
    icon: FaPlug,
  },
  {
    title: "Copy and Paste",
    description:
      "Users have the capability to duplicate the flow or item and then paste it elsewhere within the system. No need to create the same thing twice",
    link: "#", // Leave as #
    icon: FaPaste,
  },
  {
    title: "Template",
    description:
      "User can save any flow as template and can reuse it later. Don't be limited by your series. this feature enables users to save a sequence of actions or steps as a template for future use.",
    link: "#", // Leave as #
    icon: FaRegFileAlt,
  },
];

const featuresData = [
  {
    title: "Create Series using Drag and Drop",
    description: "Easily create and manage your series with our intuitive drag and drop interface. Stay organized and streamline your workflow.",
    imgSrc: "https://res.cloudinary.com/dezd109fz/image/upload/v1737595526/Screenshot_2025-01-23_065418_xo3ezn.png",
    direction: "left"
  },
];

export default function Tools() {
  return (
    <div className="min-h-screen bg-[#080E12] dark text-white overflow-x-hidden">
      <Navbar />
      
      {/* Hero Section */}
      <div className='h-screen py-10 px-24 flex flex-col items-start justify-center'>
        <h1 className="text-8xl mb-10">{heading}</h1>
        <h2 className='text-4xl'>{description}</h2>
      </div>
      <div className="max-w-7xl mx-auto">
      
      {/* Tools Section */}
      <section className="py-16 px-4 md:px-8">
        <motion.div
          initial={{ opacity: 0, y: 30 }}
          whileInView={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.6 }}
          viewport={{ once: true }}
          className="max-w-7xl mx-auto"
        >
          <h2 className="text-3xl md:text-4xl mb-12 text-center bg-clip-text text-transparent bg-gradient-to-r from-white to-violet-300">
            Available Tools
          </h2>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            {tools.map((tool, index) => (
              <motion.div
                key={index}
                initial={{ opacity: 0, y: 30 }}
                whileInView={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.6, delay: index * 0.2 }}
                viewport={{ once: true }}
                className="bg-[#121212] border border-gray-800 rounded-xl p-6 text-center"
              >
                <img src={tool.imgSrc} alt={tool.title} className="w-full h-40 object-cover rounded-lg mb-4" />
                <h3 className="text-xl text-white font-medium mb-2">{tool.title}</h3>
                <p className="text-gray-400 mb-4">{tool.description}</p>
                <a href={tool.link} className="bg-violet-600 hover:bg-violet-500 font-medium px-6 py-3 rounded-lg inline-block transition-all shadow-lg hover:shadow-violet-500/40">
                  Use Tool
                </a>
              </motion.div>
            ))}
          </div>
        </motion.div>
      </section>

      {/* Features Section */}
      <section className="py-16 h-screen px-4 md:px-8">
        <motion.div
          initial={{ opacity: 0, y: 30 }}
          whileInView={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.6 }}
          viewport={{ once: true }}
          className="max-w-7xl mx-auto"
        >
          <h2 className="text-3xl md:text-4xl mb-12 text-center bg-clip-text text-transparent bg-gradient-to-r from-white to-violet-300">
            Key Features
          </h2>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
            {features.map((feature, index) => (
              <motion.div
                key={index}
                initial={{ opacity: 0, y: 30 }}
                whileInView={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.6, delay: index * 0.2 }}
                viewport={{ once: true }}
                className="relative group bg-[#121212] border border-gray-800 rounded-xl p-6 transition-all duration-500 overflow-hidden"
              >
                <div className="flex items-center gap-4 mb-2">
                  <div className="p-3 bg-gray-900 rounded-lg">{feature.icon}</div>
                  <h3 className="text-xl text-white font-medium">{feature.title}</h3>
                </div>
                <p className="text-gray-400">{feature.description}</p>
                <div
                  className={`absolute inset-0 rounded-xl bg-gradient-to-br ${feature.color} opacity-0 blur-3xl scale-125 transition-opacity duration-500 group-hover:opacity-20`}
                />
              </motion.div>
            ))}
          </div>
        </motion.div>
      </section>

      </div>
      <Footer />
    </div>
  );
}