172 lines
8.1 KiB
TypeScript
172 lines
8.1 KiB
TypeScript
"use client";
|
||
|
||
import React from 'react';
|
||
import Navbar from '@/components/Navbar/navbar';
|
||
import Hero from '@/components/Hero/hero';
|
||
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';
|
||
import { OrbitingCircles } from '@/components/magicui/orbiting-circles';
|
||
|
||
const heading = "Everyday Marketing - Automate and optimize your marketing workflows";
|
||
const description = "Everyday helps you streamline marketing automation by seamlessly connecting your tools, minimizing errors, and uncovering valuable insights from your data. Free up your team’s time and focus on creating high-impact campaigns.";
|
||
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: "Integrate AI into your marketing",
|
||
desc: "No matter how you use AI, Everyday’s growing app ecosystem makes it easy to incorporate AI into essential workflows like lead generation, marketing automation, and campaign management.",
|
||
button: "Explore tools",
|
||
buttonColor: "sky-200",
|
||
image: "https://res.cloudinary.com/zapier-media/image/upload/q_auto/f_auto/v1727809087/Solutions/Marketing/marketing-lp_01_slh5ws.png",
|
||
link: "#"
|
||
},
|
||
{
|
||
head: "Let AI build your automations",
|
||
desc: "Describe the marketing automation you need—such as lead capture or email nurturing—and Everyday’s AI will generate a workflow tailored to your needs.",
|
||
button: "Get started",
|
||
buttonColor: "purple-300",
|
||
image: "https://res.cloudinary.com/zapier-media/image/upload/q_auto/f_auto/v1727809087/Solutions/Marketing/marketing-lp_02_ivu6pd.png",
|
||
link: "#"
|
||
},
|
||
{
|
||
head: "Enhance workflows with AI-powered customization",
|
||
desc: "Fine-tune your marketing automation with AI-generated code snippets, giving you more control over customization without complex coding.",
|
||
button: "Unlock now",
|
||
buttonColor: "amber-200",
|
||
image: "https://res.cloudinary.com/zapier-media/image/upload/q_auto/f_auto/v1727809091/Solutions/Marketing/marketing-lp_04_liatuw.png",
|
||
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: "Unify Your Marketing Data",
|
||
description:
|
||
"Eliminate data silos by centralizing insights from all your marketing tools. Get a complete view of your campaigns, leads, and performance metrics in one place.",
|
||
link: "https://stripe.com",
|
||
icon: FaListUl, // Add icon here
|
||
},
|
||
{
|
||
title: "Automate Marketing Workflows",
|
||
description:
|
||
"Boost efficiency by automating repetitive marketing tasks. Sync data, trigger personalized campaigns, and schedule actions—so you can focus on strategy and creativity.",
|
||
link: "https://netflix.com",
|
||
icon: FaSearch, // Add icon here
|
||
},
|
||
{
|
||
title: "Enhance Team Collaboration",
|
||
description:
|
||
"Keep your marketing team aligned by integrating communication tools. Share updates, assign tasks, and track campaign progress effortlessly in one connected workspace.",
|
||
link: "https://enterprise.everydayseries.com/",
|
||
icon: FaArrowsAlt, // Add icon here
|
||
},
|
||
];
|
||
|
||
const words = `“Stay ahead with evolving marketing automation—new features and integrations are constantly added to enhance your campaigns.”`
|
||
|
||
export default function Integrations() {
|
||
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>
|
||
|
||
{/* <Hero /> */}
|
||
<div className='flex w-full my-40'>
|
||
<div className="relative flex h-[550px] w-1/2 flex-col items-center justify-center overflow-hidden">
|
||
<img
|
||
src="https://res.cloudinary.com/zapier-media/image/upload/q_auto,f_auto/v1718390031/Solutions/RevOps/revops-ai_jgccpl.png"
|
||
alt="Workflow GIF"
|
||
className="rounded-lg shadow-lg w-[60%] h-1/2 mx-auto"
|
||
/>
|
||
</div>
|
||
<div className='flex flex-col w-1/2 justify-center space-y-10'>
|
||
<h1 className='text-7xl font-medium tracking-wide'>Bring Your Tools Together</h1>
|
||
<p className='text-xl'>With Everyday, you can easily connect and synchronize data from thousands of applications, creating a comprehensive and efficient workflow tailored to your business needs.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="flex flex-col text-white h-fit py-20 space-y-40">
|
||
{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>
|
||
<img className="w-[90%] mx-auto" src={item.image} alt=""></img>
|
||
<a
|
||
href={item.link}
|
||
className={`bg-${item.buttonColor} 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>
|
||
</>
|
||
)}
|
||
</div>
|
||
))}
|
||
</div>
|
||
<div className="max-w-7xl mx-auto px-8 my-20">
|
||
<HoverEffect items={contents} />
|
||
</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>
|
||
);
|
||
}
|
||
|