194 lines
8.7 KiB
TypeScript
194 lines
8.7 KiB
TypeScript
"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 = "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 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: "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, // Add icon here
|
||
},
|
||
{
|
||
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, // Add icon here
|
||
},
|
||
{
|
||
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, // Add icon here
|
||
},
|
||
{
|
||
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, // Add icon here
|
||
},
|
||
{
|
||
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, // Add icon here
|
||
},
|
||
{
|
||
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, // Add icon here
|
||
},
|
||
// Add more features as needed
|
||
];
|
||
|
||
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",
|
||
},
|
||
{
|
||
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",
|
||
},
|
||
{
|
||
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",
|
||
},
|
||
];
|
||
|
||
const words = `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="p-6 bg-[#080E12] dark text-white">
|
||
<Navbar />
|
||
<div className='h-screen py-10 px-24 flex flex-col items-start justify-end'>
|
||
<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 featuresData={featuresData} />
|
||
|
||
<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>
|
||
);
|
||
}
|