everydayserieswebsite/app/series/page.tsx

"use client";

import React, { useEffect, useRef } from 'react';
import Navbar from '@/components/Navbar/navbar';
import Footer from "@/components/footer";
import { HoverEffect } from '@/components/ui/card-hover-effect';
import { Marquee } from '@/components/ui/marquee';
import { TextGenerateEffect } from "@/components/ui/text-generate-effect";
import { FaListUl, FaSearch, FaArrowsAlt, FaPlug, FaPaste, FaRegFileAlt } from 'react-icons/fa';
import { motion } from 'framer-motion';

const heading = "Series - Create awesome workflows and connect them to AI without a single line of code"
const description = "Help in defining, managing, and improving processes. can make any kind of flow"
const videoSrc = "https://res.cloudinary.com/zapier-media/video/upload/q_auto:best/f_auto/v1726860625/Homepage%20%E2%80%94%20Sept%202024/sc03_HP_240917_Power-with-AI_v02_supxar.mp4"

const features = [
  {
    head: "Connect the apps you already love",
    desc: "Everyday supports over 100 apps, so you can tame the chaos and turn your tools into processes all in one place.",
    button: "Explore all apps",
    link: "/tools" // Updated link
  },
  {
    head: "Start quickly with these pre-built templates from other Everyday users",
    desc: "Automate your tasks in just a few minutes to reclaim countless hours of your time.",
    button: "Explore more",
    link: "/template" // Updated link
  }
]

const brandLogos = [
  "data:image/png;base64,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",
  "data:image/png;base64,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",
  "data:image/png;base64,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",
  "data:image/png;base64,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",
  "data:image/png;base64,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",
  "data:image/png;base64,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",
];

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: "https://stripe.com",
    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: "https://netflix.com",
    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: "https://enterprise.everydayseries.com/",
    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: "https://meta.com",
    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: "https://amazon.com",
    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: "https://microsoft.com",
    icon: FaRegFileAlt,
  },
];

const alternatingFeatures = [
  {
    title: "Create Series using Drag and Drop",
    description: "Organize, connect, and track your goals using the GoalGrid. Stay aligned and in sync with your strategic objectives.",
    imgSrc: "https://res.cloudinary.com/dezd109fz/image/upload/v1737595526/Screenshot_2025-01-23_065418_xo3ezn.png",
    direction: "left"
  },
  {
    title: "Built for Enterprises",
    description: "Everyday platform ensures enterprise-grade deployment, security, and data governance, all with the simplicity of one centrally managed platform.",
    imgSrc: "https://res.cloudinary.com/dezd109fz/image/upload/v1737595526/Screenshot_2025-01-23_065356_gbkov8.png",
    direction: "right"
  },
  {
    title: "Integrate your Workflows",
    description: "Connect Everyday to your existing tools, integrate important business processes, and build more powerful applications.",
    imgSrc: "https://res.cloudinary.com/dezd109fz/image/upload/v1737595526/Screenshot_2025-01-23_065455_whfipm.png",
    direction: "left"
  },
];

const testimonialText = `This features allows even non tech guys to figure out the platform and create awesome workflows. Now that's mind-blowing.`

export default function Series() {
  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 ">
        {/* Video Section */}
        <section className="my-16 md:my-24 lg:my-32 px-6 md:px-16 lg:px-24">
          <div className="relative rounded-2xl overflow-hidden shadow-2xl shadow-violet-700/20 border border-violet-800/30">
            <video
              src={videoSrc}
              autoPlay
              loop
              muted
              className="w-full h-full object-cover rounded-2xl"
            />
            <div className="absolute inset-0 bg-gradient-to-tr from-purple-900/30 to-transparent"></div>
          </div>
        </section>

        {/* Features Section */}
        <div className="flex flex-col text-white pb-20 space-y-32">
          {features.map((item, index) => (
            <div key={index} className="p-6 text-center space-y-10 relative">
              {/* Feature Heading and Description */}
              <motion.h2
                initial={{ opacity: 0, y: 30 }}
                whileInView={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.6 }}
                viewport={{ once: true }}
                className="text-3xl md:text-4xl lg:text-5xl mb-6 mx-auto max-w-3xl bg-clip-text text-transparent bg-gradient-to-r from-white to-violet-300"
              >
                {item.head}
              </motion.h2>

              <motion.p
                initial={{ opacity: 0, y: 30 }}
                whileInView={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.6, delay: 0.2 }}
                viewport={{ once: true }}
                className="md:w-2/3 mx-auto text-gray-300 text-lg"
              >
                {item.desc}
              </motion.p>

              <motion.a
                initial={{ opacity: 0, y: 30 }}
                whileInView={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.6, delay: 0.3 }}
                viewport={{ once: true }}
                href={item.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"
              >
                {item.button}
              </motion.a>

              {/* Conditional Rendering for Marquee After First Feature */}
              {index === 0 && (
                <div className="relative mt-24 overflow-hidden">
                  <Marquee className="[--duration:40s]">
                    <div className="flex space-x-12">
                      {brandLogos.map((img, i) => (
                        <div key={i} className="relative overflow-hidden bg-white/5 p-4 rounded-xl backdrop-blur-sm border border-white/10 transition-all hover:border-violet-500/50 hover:bg-white/10">
                          <img
                            src={img}
                            alt={`Brand logo ${i + 1}`}
                            className="h-20 w-20 object-contain"
                          />
                        </div>
                      ))}
                    </div>
                  </Marquee>
                  <Marquee reverse className="[--duration:30s] mt-6">
                    <div className="flex space-x-12">
                      {brandLogos.reverse().map((img, i) => (
                        <div key={i} className="relative overflow-hidden bg-white/5 p-4 rounded-xl backdrop-blur-sm border border-white/10 transition-all hover:border-violet-500/50 hover:bg-white/10">
                          <img
                            src={img}
                            alt={`Brand logo ${i + 1}`}
                            className="h-20 w-20 object-contain"
                          />
                        </div>
                      ))}
                    </div>
                  </Marquee>
                  {/* Gradient effects */}
                  <div className="pointer-events-none absolute inset-y-0 left-0 w-1/3 bg-gradient-to-r from-[#080E12] to-transparent"></div>
                  <div className="pointer-events-none absolute inset-y-0 right-0 w-1/3 bg-gradient-to-l from-[#080E12] to-transparent"></div>
                </div>
              )}

              {/* Conditional Rendering for GIF After Second Feature */}
              {index === 1 && (
                <motion.div
                  initial={{ opacity: 0, y: 40 }}
                  whileInView={{ opacity: 1, y: 0 }}
                  transition={{ duration: 0.8 }}
                  viewport={{ once: true }}
                  className="mt-20 flex justify-center"
                >
                  <div className="relative rounded-xl overflow-hidden shadow-2xl shadow-violet-700/20 border border-violet-800/30 w-full md:w-[70%] lg:w-[60%]">
                    <img
                      src="https://cdn.dribbble.com/users/695342/screenshots/3782293/dashboard-gif-ok.gif"
                      alt="Workflow GIF"
                      className="w-full object-cover"
                    />
                    <div className="absolute inset-0 bg-gradient-to-tr from-purple-900/30 to-transparent pointer-events-none"></div>
                  </div>
                </motion.div>
              )}
            </div>
          ))}
        </div>

        {/* Hover Cards 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">
              Powerful Features at Your Fingertips
            </h2>
            <HoverEffect items={contents} />
          </motion.div>
        </section>

        {/* Alternating Feature Sections (Replace Features Component) */}
        <section className="py-16 md:py-24 px-6 md:px-10 lg:px-16">
          <h2 className="text-3xl md:text-4xl mb-20 text-center bg-clip-text text-transparent bg-gradient-to-r from-white to-violet-300">
            The All-in-One Workflow Solution
          </h2>

          {alternatingFeatures.map((feature, index) => (
            <motion.div
              key={index}
              initial={{ opacity: 0, x: index % 2 === 0 ? -50 : 50 }}
              whileInView={{ opacity: 1, x: 0 }}
              transition={{ duration: 0.6, type: 'spring', stiffness: 100 }}
              viewport={{ once: true }}
              className={`flex flex-col-reverse md:flex-${index === 1 ? 'row-reverse' : 'row'} items-center gap-10`}
            >
              <div className="w-full md:w-1/2">
                <h3 className="text-2xl md:text-3xl mb-4 text-white">{feature.title}</h3>
                <p className="text-gray-300 text-lg mb-4">{feature.description}</p>
              </div>
              <motion.img
                src={feature.imgSrc}
                alt={feature.title}
                className="w-full md:w-1/2 rounded-lg shadow-lg"
                initial={{ opacity: 0, scale: 0.8 }}
                whileInView={{ opacity: 1, scale: 1 }}
                transition={{ duration: 0.6 }}
              />
            </motion.div>
          ))}

        </section>

        {/* Testimonial Section */}
        <section className="px-6 md:px-10 lg:px-16 my-20">
          <motion.div
            initial={{ opacity: 0, y: 40 }}
            whileInView={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6 }}
            viewport={{ once: true }}
            className="bg-gradient-to-br from-white/5 to-white/2 backdrop-blur-sm rounded-2xl shadow-xl border border-white/10 px-8 md:px-12 py-16 mx-auto max-w-5xl"
          >
            <div className="text-yellow-400 text-center text-2xl mb-8">
              ★★★★★
            </div>

            <p className="text-white text-2xl md:text-3xl lg:text-4xl text-center mb-8 font-light">
              <span className="font-semibold bg-clip-text text-transparent bg-gradient-to-r from-violet-400 to-violet-200">Magic Button:</span> Simply press the magic button to instantly generate your series automatically.
            </p>

            <div className="max-w-3xl mx-auto">
              <TextGenerateEffect words={testimonialText} />
            </div>

            <div className="mt-12 flex justify-center">
              <button className="bg-gradient-to-r from-violet-600 to-purple-600 hover:from-violet-500 hover:to-purple-500 font-medium px-8 py-4 rounded-xl transition-all shadow-lg hover:shadow-violet-500/40 text-lg">
                Try Magic Button
              </button>
            </div>
          </motion.div>
        </section>
      </div>
      <Footer />
    </div>
  );
}