mirror of
https://github.com/codebox283/everydayserieswebsite.git
synced 2025-06-19 20:50:54 +00:00
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 Product Management – Build, Iterate, and Deliver with Confidence";
|
||
const description = "Everyday empowers product teams with seamless workflows, centralizing feedback, roadmaps, and sprints. Move beyond rigid tools—gain the flexibility to adapt and innovate faster, all while staying aligned with business objectives.";
|
||
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: "Centralize and analyze customer feedback",
|
||
desc: "Gather insights from various channels and transform raw feedback into actionable data. Keep your team aligned with customer needs and prioritize effectively.",
|
||
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: "Align initiatives and track progress",
|
||
desc: "Ensure every product initiative aligns with company goals. Use dashboards to track KPIs, monitor health, and maintain visibility across projects.",
|
||
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: "Compare planned vs. actual outcomes",
|
||
desc: "Keep your team agile with real-time tracking. Plan sprints, review milestones, and measure impact—all within Everyday’s interconnected workflows.",
|
||
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: "Centralize Product Feedback",
|
||
description:
|
||
"Break down silos by unifying customer feedback from multiple channels. Gain a complete understanding of user needs, feature requests, and pain points in one place.",
|
||
link: "https://stripe.com",
|
||
icon: FaListUl, // Add icon here
|
||
},
|
||
{
|
||
title: "Streamline Product Development",
|
||
description:
|
||
"Automate workflows across your product lifecycle. Connect insights, prioritize roadmaps, and track progress effortlessly—so your team can focus on building impactful features.",
|
||
link: "https://netflix.com",
|
||
icon: FaSearch, // Add icon here
|
||
},
|
||
{
|
||
title: "Align Teams with Shared Goals",
|
||
description:
|
||
"Keep product, engineering, and design teams on the same page. Plan sprints, track key results, and ensure every initiative contributes to your strategic vision.",
|
||
link: "https://enterprise.everydayseries.com/",
|
||
icon: FaArrowsAlt, // Add icon here
|
||
},
|
||
];
|
||
|
||
const words = `“Stay ahead with evolving product workflows—Everyday continuously introduces new features to enhance your development process.”`
|
||
|
||
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>
|
||
);
|
||
}
|
||
|