200 lines
8.8 KiB
TypeScript
200 lines
8.8 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 { FaListUl, FaSearch, FaArrowsAlt, FaPlug, FaPaste, FaRegFileAlt } from 'react-icons/fa';
|
|
import { TextGenerateEffect } from '@/components/ui/text-generate-effect';
|
|
|
|
const heading = "Templates - Predesigned Workflows to Streamline Processes and Connect with AI Effortlessly"
|
|
const description = "Simplify process management with customizable templates that help automate tasks, improve efficiency, and unlock AI-powered innovations for any type of workflow."
|
|
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: "Series Template",
|
|
description:
|
|
"It serves as pre-designed series of steps or processes that can be saved and reused multiple times. Users can make a list of own series template or can browse through a list of templates created by other users and can use them directly from the Series Template Marketplace.",
|
|
link: "https://stripe.com",
|
|
icon: FaListUl, // Add icon here
|
|
},
|
|
{
|
|
title: "Diverse Templates",
|
|
description:
|
|
"The marketplace offers a wide range of series templates across industries and functions, including sales, marketing, customer support, and operations, to streamline workflows and boost efficiency.",
|
|
link: "https://netflix.com",
|
|
icon: FaSearch, // Add icon here
|
|
},
|
|
{
|
|
title: "Search and Discovery",
|
|
description:
|
|
"Accelerate your operations with our pre-built AI workflows tailored for various business functions, from sales to marketing, operations, and more. <br />Users can search for templates based on keywords, categories, or tags.",
|
|
link: "https://enterprise.everydayseries.com/",
|
|
icon: FaSearch, // Add icon here
|
|
},
|
|
{
|
|
title: "Template Customization",
|
|
description:
|
|
"Users can customize templates to fit their specific requirements or preferences by modifying steps, adding new components, or integrating AI features to create tailored workflows that meet unique business needs.",
|
|
link: "https://meta.com",
|
|
icon: FaPlug, // Add icon here
|
|
},
|
|
{
|
|
title: "Unity In Workflows",
|
|
description:
|
|
"Eliminate silos with a powerful platform that harmoniously connects every aspect of your work, enabling seamless collaboration, streamlined communication, and unified processes across teams and departments.",
|
|
link: "https://amazon.com",
|
|
icon: FaPaste, // Add icon here
|
|
},
|
|
{
|
|
title: "Marketplace",
|
|
description:
|
|
"Improve your productivity with our smart automations, transforming repetitive tasks into streamlined processes.User can browse through a list of series templates created by other users and can use it.",
|
|
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 = `"Discover the future of AI-integrated workflow management with Everyday. Transform your enterprise operations today."`
|
|
|
|
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>
|
|
|
|
<Features />
|
|
|
|
<div className="max-w-7xl mx-auto px-8">
|
|
<HoverEffect items={contents} />
|
|
</div>
|
|
|
|
{/* FEATURES */}
|
|
<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="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>
|
|
);
|
|
}
|