everydayserieswebsite/app/click-video/page.tsx

"use client";

import React from 'react';
import Navbar from '@/components/Navbar/navbar';
import Features from "@/components/Features/features";
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';

const heading = "Click Video - Interactive Videos with Built-in Q&A functionality for increased engagement";
const description = "Create engaging videos for any task, enhanced with integrated question-and-answer elements for increased interaction, ensuring synchronization between roadmaps, customer feedback, and sprint schedules for smooth delivery.";
const image = "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: "#"
  },
  {
    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: "#"
  }
]

const images = [
  "https://www.zarla.com/images/starbucks-logo-2400x2400-20220513.png?crop=1:1,smart&width=150&dpr=2",
  "https://www.zarla.com/images/apple-logo-2400x2400-20220512-3.png?crop=1:1,smart&width=150&dpr=2",
  "https://www.zarla.com/images/google-logo-2400x2400-20220519.png?crop=1:1,smart&width=150&dpr=2",
  "https://www.zarla.com/images/mercedes-benz-logo-2400x2400-20220513-2.png?crop=1:1,smart&width=150&dpr=2",
  "https://www.zarla.com/images/walmart-logo-2400x2400-20223105.png?crop=1:1,smart&width=150&dpr=2",
  "https://www.zarla.com/images/pepsi-logo-2400x2400-20220513-1.png?crop=1:1,smart&width=150&dpr=2",
];

const contents = [
  {
    title: "Create engaging content",
    description:
      "Within Everyday, your roadmaps, customer feedback, and sprint schedules interconnect, ensuring seamless synchrony. With relevant data at their fingertips, teams can focus on delivering products that customers adore, faster.",
    link: "https://stripe.com",
    icon: FaListUl, // Add icon here
  },
  {
    title: "Questions and Answers",
    description:
      "Embedded Q&A related to your video at any time frame. Just pause and add a question be it a multiple choice question to keep viewers engaged or a feedback form - it's totally upto you.",
    link: "https://netflix.com",
    icon: FaSearch, // Add icon here
  },
  {
    title: "Embedded Code",
    description:
      "An embedded code is generated with the question so users can add it in any web page or application. Get your answers from any platform of your liking and play anywhere.",
    link: "https://enterprise.everydayseries.com/",
    icon: FaArrowsAlt, // Add icon here
  },
];

const featuresData = [
  {
    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",
    vector: null,
  },
  {
    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",
    vector: null,
  },
  {
    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",
    vector: null,
  },
];

const words = `“In the new era of technology we are looking to the future with a certain pride for our company and business. We consider all the drivers of two of main financial change.”`

export default function Series() {
  return (
    <div className="p-6 bg-[#080E12] dark text-white">
      <Navbar />
      <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='p-40'><video src={image} autoPlay className="w-ful border rounded-2xl object" /></div>
      <div className="flex flex-col text-white h-fit py-20 space-y-20">
        {features.map((item, index) => (
          <div key={index} className="p-6 text-center space-y-10 h-fit">
            {/* Feature Heading and Description */}
            <h2 className="text-5xl mb-2 w-2/3 mx-auto">{item.head}</h2>
            <p className="w-2/3 mx-auto -mt-3">{item.desc}</p>
            <a
              href={item.link}
              className="bg-violet-500 hover:bg-violet-300 font-medium px-4 py-2 rounded-lg mt-4 inline-block"
            >
              {item.button}
            </a>

            {/* Conditional Rendering for Marquee After First Feature */}
            {index === 0 && (
              <>
                <Marquee className="[--duration:60s] w-[90%] mx-auto mt-20">
                  <div className="flex space-x-10">
                    {images.map((img, index) => (
                      <img
                        key={index}
                        src={img}
                        alt={`Avatar ${index + 1}`}
                        className="h-24 w-24 border rounded-lg object-cover"
                      />
                    ))}
                  </div>
                </Marquee>
                <Marquee reverse className="[--duration:60s] w-[90%] mx-auto">
                  <div className="flex space-x-10">
                    {images.map((img, index) => (
                      <img
                        key={index}
                        src={img}
                        alt={`Avatar ${index + 1}`}
                        className="h-24 w-24 border rounded-lg object-cover"
                      />
                    ))}
                  </div>
                </Marquee>
                {/* Add gradient effects for marquee */}
                <div className="pointer-events-none absolute inset-y-0 left-0 w-1/3 bg-gradient-to-l from-transparent to-[#080E12]"></div>
                <div className="pointer-events-none absolute inset-y-0 right-0 w-1/3 bg-gradient-to-r from-transparent to-[#080E12]"></div>
              </>
            )}

            {/* Conditional Rendering for GIF After Second Feature */}
            {index === 1 && (
              <div className="mt-20 flex justify-center">
                <img
                  src="https://cdn.dribbble.com/users/695342/screenshots/3782293/dashboard-gif-ok.gif"
                  alt="Workflow GIF"
                  className="rounded-lg shadow-lg w-[60%] h-1/2 mx-auto"
                />
              </div>
            )}
          </div>
        ))}
      </div>
      <div className="max-w-7xl mx-auto px-8">
        <HoverEffect items={contents} />
      </div>
      <Features />

      <div className="bg-white rounded-lg shadow-md px-10 py-20 mx-10 my-20">
        <div className="text-yellow-500 text-center text-2xl mb-10">
          ★★★★★
        </div>
        
        {/* <p className="text-gray-700 leading-relaxed text-4xl">
          <strong className="font-semibold">Magic Button:</strong> Simply press the magic button to instantly generate your series automatically.
        </p> */}
        <TextGenerateEffect words={words} />
      </div>

      <Footer />
    </div>
  );
}