mirror of
https://github.com/codebox283/everydayserieswebsite.git
synced 2025-06-19 20:30:53 +00:00
added pages changed ui and added images
Co-Authored-By: Nakshatra <87943295+codebox283@users.noreply.github.com>
This commit is contained in:
codebox283
parent
e32f4efa58
commit
587ecddaed
@ -63,22 +63,26 @@ const ConversationalAIAgents = () => {
|
||||
{
|
||||
title: "Customer Support",
|
||||
desc: "Convert FAQs and troubleshooting guides into interactive chat agents that assist customers 24/7.",
|
||||
icon: <MessageCircle className="w-6 h-6 text-white" />
|
||||
icon: <MessageCircle className="w-6 h-6 text-white" />,
|
||||
image: "https://images.unsplash.com/photo-1525182008055-f88b95ff7980?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NHx8Y2FsbCUyMHN1cHBvcnR8ZW58MHx8MHx8fDA%3D"
|
||||
},
|
||||
{
|
||||
title: "Sales & Marketing",
|
||||
desc: "Engage prospects through conversational agents that guide them through product features and answer inquiries in real time.",
|
||||
icon: <Lightbulb className="w-6 h-6 text-white" />
|
||||
icon: <Lightbulb className="w-6 h-6 text-white" />,
|
||||
image: "https://images.unsplash.com/photo-1560250056-07ba64664864?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8c2FsZXN8ZW58MHx8MHx8fDA%3D"
|
||||
},
|
||||
{
|
||||
title: "HR & Administration",
|
||||
desc: "Streamline internal processes by turning routine HR queries and administrative tasks into dynamic, chat-driven workflows.",
|
||||
icon: <Users className="w-6 h-6 text-white" />
|
||||
icon: <Users className="w-6 h-6 text-white" />,
|
||||
image: "https://images.unsplash.com/photo-1629904853716-f0bc54eea481?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTV8fG9mZmljZSUyMHdvcmt8ZW58MHx8MHx8fDA%3D"
|
||||
},
|
||||
{
|
||||
title: "Project Management",
|
||||
desc: "Enhance team collaboration by using agents to manage tasks, gather feedback, and update project statuses interactively.",
|
||||
icon: <Settings className="w-6 h-6 text-white" />
|
||||
icon: <Settings className="w-6 h-6 text-white" />,
|
||||
image: "https://plus.unsplash.com/premium_photo-1661277697952-0cacde72c755?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTN8fHByb2plY3QlMjBtYW5hZ2VtZW50fGVufDB8fDB8fHww"
|
||||
}
|
||||
];
|
||||
|
||||
@ -184,29 +188,37 @@ const ConversationalAIAgents = () => {
|
||||
</div>
|
||||
</motion.section>
|
||||
|
||||
{/* Key Features Section */}
|
||||
{/* Use Cases Section */}
|
||||
<motion.section
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
className="max-w-6xl mx-auto py-20"
|
||||
>
|
||||
<h2 className="text-5xl text-white mb-8">Key Features</h2>
|
||||
<div className="flex flex-col gap-4">
|
||||
{keyFeatures.map((feature, index) => (
|
||||
<h2 className="text-5xl text-white mb-8">Use Cases</h2>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||
{useCases.map((useCase, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="relative group bg-[#121212] border border-gray-800 rounded-xl p-6 transition-all duration-500 overflow-hidden flex items-start gap-8"
|
||||
className="relative group bg-[#121212] border border-gray-800 rounded-xl p-6 transition-all duration-500 overflow-hidden"
|
||||
>
|
||||
<div className="p-4 bg-gray-900 rounded-lg flex items-center justify-center">
|
||||
{feature.icon}
|
||||
{/* Image */}
|
||||
<div className="mb-4 rounded-lg h-64 overflow-hidden"><img src={useCase.image} alt={useCase.title} className="w-full h-full object-cover rounded-lg" /></div>
|
||||
<div className="flex items-center gap-4 mb-2">
|
||||
<div className="p-3 bg-gray-900 rounded-lg">{useCase.icon}</div>
|
||||
<h3 className="text-xl text-white font-medium">{useCase.title}</h3>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-xl text-white font-medium mb-2">{feature.title}</h3>
|
||||
<p className="text-gray-400">{feature.desc}</p>
|
||||
</div>
|
||||
{/* Soft Glow Effect */}
|
||||
<p className="text-gray-400">{useCase.desc}</p>
|
||||
|
||||
{/* Soft Glow Effect with Different Colors */}
|
||||
<div
|
||||
className="absolute inset-0 rounded-xl bg-gradient-to-br from-blue-500 to-cyan-500 opacity-0 blur-3xl scale-125 transition-opacity duration-500 group-hover:opacity-20"
|
||||
className={`absolute inset-0 rounded-xl opacity-0 blur-3xl scale-125 transition-opacity duration-500 group-hover:opacity-20 ${index % 4 === 0
|
||||
? "bg-gradient-to-br from-purple-500 to-indigo-500"
|
||||
: index % 4 === 1
|
||||
? "bg-gradient-to-br from-pink-500 to-red-500"
|
||||
: index % 4 === 2
|
||||
? "bg-gradient-to-br from-green-500 to-teal-500"
|
||||
: "bg-gradient-to-br from-yellow-500 to-orange-500"
|
||||
}`}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
@ -241,35 +253,29 @@ const ConversationalAIAgents = () => {
|
||||
</div>
|
||||
</motion.section>
|
||||
|
||||
{/* Use Cases Section */}
|
||||
{/* Key Features Section */}
|
||||
<motion.section
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
className="max-w-6xl mx-auto py-20"
|
||||
>
|
||||
<h2 className="text-5xl text-white mb-8">Use Cases</h2>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||
{useCases.map((useCase, index) => (
|
||||
<h2 className="text-5xl text-white mb-8">Key Features</h2>
|
||||
<div className="flex flex-col gap-4">
|
||||
{keyFeatures.map((feature, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="relative group bg-[#121212] border border-gray-800 rounded-xl p-6 transition-all duration-500 overflow-hidden"
|
||||
className="relative group bg-[#121212] border border-gray-800 rounded-xl p-6 transition-all duration-500 overflow-hidden flex items-start gap-8"
|
||||
>
|
||||
<div className="flex items-center gap-4 mb-2">
|
||||
<div className="p-3 bg-gray-900 rounded-lg">{useCase.icon}</div>
|
||||
<h3 className="text-xl text-white font-medium">{useCase.title}</h3>
|
||||
<div className="p-4 bg-gray-900 rounded-lg flex items-center justify-center">
|
||||
{feature.icon}
|
||||
</div>
|
||||
<p className="text-gray-400">{useCase.desc}</p>
|
||||
|
||||
{/* Soft Glow Effect with Different Colors */}
|
||||
<div>
|
||||
<h3 className="text-xl text-white font-medium mb-2">{feature.title}</h3>
|
||||
<p className="text-gray-400">{feature.desc}</p>
|
||||
</div>
|
||||
{/* Soft Glow Effect */}
|
||||
<div
|
||||
className={`absolute inset-0 rounded-xl opacity-0 blur-3xl scale-125 transition-opacity duration-500 group-hover:opacity-20 ${index % 4 === 0
|
||||
? "bg-gradient-to-br from-purple-500 to-indigo-500"
|
||||
: index % 4 === 1
|
||||
? "bg-gradient-to-br from-pink-500 to-red-500"
|
||||
: index % 4 === 2
|
||||
? "bg-gradient-to-br from-green-500 to-teal-500"
|
||||
: "bg-gradient-to-br from-yellow-500 to-orange-500"
|
||||
}`}
|
||||
className="absolute inset-0 rounded-xl bg-gradient-to-br from-blue-500 to-cyan-500 opacity-0 blur-3xl scale-125 transition-opacity duration-500 group-hover:opacity-20"
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
|
||||
@ -1,116 +0,0 @@
|
||||
"use client";
|
||||
import Link from 'next/link';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { Home, Search, MoveLeft } from 'lucide-react';
|
||||
|
||||
export default function NotFound() {
|
||||
const [isLoaded, setIsLoaded] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
setIsLoaded(true);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="bg-[#080E12] min-h-screen flex flex-col items-center justify-center px-4 py-12">
|
||||
<div className={`text-center transition-all duration-1000 transform ${isLoaded ? 'translate-y-0 opacity-100' : 'translate-y-10 opacity-0'}`}>
|
||||
{/* Animated 404 number */}
|
||||
<div className="relative mb-8">
|
||||
<h1 className="text-9xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-indigo-400 to-purple-500">
|
||||
404
|
||||
</h1>
|
||||
<div className="absolute -top-6 -right-6">
|
||||
<div className="h-12 w-12 rounded-full border-4 border-indigo-900 border-t-indigo-400 animate-spin" />
|
||||
</div>
|
||||
<div className="absolute -bottom-4 -left-4">
|
||||
<Search className="h-8 w-8 text-purple-300 animate-bounce" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Page not found message */}
|
||||
<h2 className={`text-2xl font-semibold text-indigo-200 mb-4 transition-all delay-300 duration-1000 ${isLoaded ? 'opacity-100' : 'opacity-0'}`}>
|
||||
Oops! Page Not Found
|
||||
</h2>
|
||||
|
||||
<p className={`text-indigo-300/80 max-w-md mx-auto mb-8 transition-all delay-500 duration-1000 ${isLoaded ? 'opacity-100' : 'opacity-0'}`}>
|
||||
The page you are looking for seems to have wandered off into the digital void. Let's guide you back to reality.
|
||||
</p>
|
||||
|
||||
{/* Animated dots - glowing effect */}
|
||||
<div className="flex justify-center mb-8">
|
||||
{[0, 1, 2, 3, 4].map((dot) => (
|
||||
<div
|
||||
key={dot}
|
||||
className="h-2 w-2 mx-1 rounded-full bg-purple-400"
|
||||
style={{
|
||||
animation: "pulse 1.5s infinite",
|
||||
animationDelay: `${dot * 0.2}s`,
|
||||
boxShadow: "0 0 8px 2px rgba(167, 139, 250, 0.3)"
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Home link button - glowing effect */}
|
||||
<Link
|
||||
href="/"
|
||||
className={`inline-flex items-center bg-gradient-to-r from-indigo-600 to-purple-600 text-white font-medium py-3 px-6 rounded-full hover:from-indigo-500 hover:to-purple-500 transition-all duration-300 transform hover:scale-105 hover:shadow-lg delay-700 ${isLoaded ? 'opacity-100' : 'opacity-0'}`}
|
||||
style={{
|
||||
boxShadow: "0 0 15px rgba(129, 140, 248, 0.5)"
|
||||
}}
|
||||
>
|
||||
<MoveLeft className="mr-2 h-5 w-5" />
|
||||
Return to Home
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{/* Floating particles for atmosphere */}
|
||||
<div className="absolute inset-0 overflow-hidden pointer-events-none">
|
||||
{[...Array(20)].map((_, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="absolute rounded-full bg-indigo-500/10"
|
||||
style={{
|
||||
width: `${Math.random() * 6 + 2}px`,
|
||||
height: `${Math.random() * 6 + 2}px`,
|
||||
top: `${Math.random() * 100}%`,
|
||||
left: `${Math.random() * 100}%`,
|
||||
animation: `float ${Math.random() * 10 + 10}s linear infinite`,
|
||||
animationDelay: `${Math.random() * 5}s`,
|
||||
opacity: Math.random() * 0.5 + 0.2
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Add keyframes for floating animation */}
|
||||
<style jsx global>{`
|
||||
@keyframes float {
|
||||
0% {
|
||||
transform: translateY(0) translateX(0);
|
||||
opacity: 0;
|
||||
}
|
||||
10% {
|
||||
opacity: 0.5;
|
||||
}
|
||||
90% {
|
||||
opacity: 0.5;
|
||||
}
|
||||
100% {
|
||||
transform: translateY(-100vh) translateX(20px);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
@keyframes pulse {
|
||||
0%, 100% {
|
||||
opacity: 0.6;
|
||||
transform: scale(1);
|
||||
}
|
||||
50% {
|
||||
opacity: 1;
|
||||
transform: scale(1.3);
|
||||
}
|
||||
}
|
||||
`}</style>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
172
app/not-found.tsx
Normal file
172
app/not-found.tsx
Normal file
@ -0,0 +1,172 @@
|
||||
import React from 'react';
|
||||
import Navbar from '@/components/Navbar/navbar';
|
||||
import { Sparkles, Rocket, Clock } from 'lucide-react';
|
||||
|
||||
export default function NotFound() {
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-br from-indigo-50 to-purple-50 flex items-center justify-center">
|
||||
{/* Coming Soon Message */}
|
||||
<Navbar />
|
||||
<div className="text-center px-4 py-16 max-w-xl">
|
||||
<div className="mb-6 relative">
|
||||
<Rocket className="h-16 w-16 text-indigo-600 mx-auto animate-bounce" />
|
||||
<div className="absolute top-0 left-1/2 transform -translate-x-1/2">
|
||||
<Sparkles className="h-6 w-6 text-purple-400 animate-pulse" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h1 className="text-4xl font-bold text-indigo-800 mb-4 tracking-tight">
|
||||
Something Awesome is Coming Soon!
|
||||
</h1>
|
||||
|
||||
<p className="text-xl text-indigo-600 mb-8">
|
||||
We're building something magical for you. Stay tuned!
|
||||
</p>
|
||||
|
||||
<div className="flex items-center justify-center space-x-2 mb-10">
|
||||
<Clock className="h-5 w-5 text-purple-500" />
|
||||
<div className="flex space-x-1">
|
||||
{[0, 1, 2, 3].map((dot) => (
|
||||
<div
|
||||
key={dot}
|
||||
className="h-2 w-2 rounded-full bg-purple-500"
|
||||
style={{
|
||||
animation: "pulse 1.5s infinite",
|
||||
animationDelay: `${dot * 0.3}s`
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="relative">
|
||||
<button className="bg-indigo-600 hover:bg-indigo-700 text-white font-medium py-3 px-8 rounded-full transition-all duration-300 transform hover:scale-105 hover:shadow-lg">
|
||||
Notify Me
|
||||
</button>
|
||||
<div className="absolute -top-2 -right-2">
|
||||
<div className="h-4 w-4 bg-purple-400 rounded-full animate-ping" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// THis is the not found page and above is the coming soon
|
||||
|
||||
// "use client";
|
||||
// import Link from 'next/link';
|
||||
// import { useEffect, useState } from 'react';
|
||||
// import { Home, Search, MoveLeft } from 'lucide-react';
|
||||
|
||||
// export default function NotFound() {
|
||||
// const [isLoaded, setIsLoaded] = useState(false);
|
||||
|
||||
// useEffect(() => {
|
||||
// setIsLoaded(true);
|
||||
// }, []);
|
||||
|
||||
// return (
|
||||
// <div className="bg-[#080E12] min-h-screen flex flex-col items-center justify-center px-4 py-12">
|
||||
// <div className={`text-center transition-all duration-1000 transform ${isLoaded ? 'translate-y-0 opacity-100' : 'translate-y-10 opacity-0'}`}>
|
||||
// {/* Animated 404 number */}
|
||||
// <div className="relative mb-8">
|
||||
// <h1 className="text-9xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-indigo-400 to-purple-500">
|
||||
// 404
|
||||
// </h1>
|
||||
// <div className="absolute -top-6 -right-6">
|
||||
// <div className="h-12 w-12 rounded-full border-4 border-indigo-900 border-t-indigo-400 animate-spin" />
|
||||
// </div>
|
||||
// <div className="absolute -bottom-4 -left-4">
|
||||
// <Search className="h-8 w-8 text-purple-300 animate-bounce" />
|
||||
// </div>
|
||||
// </div>
|
||||
|
||||
// {/* Page not found message */}
|
||||
// <h2 className={`text-2xl font-semibold text-indigo-200 mb-4 transition-all delay-300 duration-1000 ${isLoaded ? 'opacity-100' : 'opacity-0'}`}>
|
||||
// Oops! Page Not Found
|
||||
// </h2>
|
||||
|
||||
// <p className={`text-indigo-300/80 max-w-md mx-auto mb-8 transition-all delay-500 duration-1000 ${isLoaded ? 'opacity-100' : 'opacity-0'}`}>
|
||||
// The page you are looking for seems to have wandered off into the digital void. Let's guide you back to reality.
|
||||
// </p>
|
||||
|
||||
// {/* Animated dots - glowing effect */}
|
||||
// <div className="flex justify-center mb-8">
|
||||
// {[0, 1, 2, 3, 4].map((dot) => (
|
||||
// <div
|
||||
// key={dot}
|
||||
// className="h-2 w-2 mx-1 rounded-full bg-purple-400"
|
||||
// style={{
|
||||
// animation: "pulse 1.5s infinite",
|
||||
// animationDelay: `${dot * 0.2}s`,
|
||||
// boxShadow: "0 0 8px 2px rgba(167, 139, 250, 0.3)"
|
||||
// }}
|
||||
// />
|
||||
// ))}
|
||||
// </div>
|
||||
|
||||
// {/* Home link button - glowing effect */}
|
||||
// <Link
|
||||
// href="/"
|
||||
// className={`inline-flex items-center bg-gradient-to-r from-indigo-600 to-purple-600 text-white font-medium py-3 px-6 rounded-full hover:from-indigo-500 hover:to-purple-500 transition-all duration-300 transform hover:scale-105 hover:shadow-lg delay-700 ${isLoaded ? 'opacity-100' : 'opacity-0'}`}
|
||||
// style={{
|
||||
// boxShadow: "0 0 15px rgba(129, 140, 248, 0.5)"
|
||||
// }}
|
||||
// >
|
||||
// <MoveLeft className="mr-2 h-5 w-5" />
|
||||
// Return to Home
|
||||
// </Link>
|
||||
// </div>
|
||||
|
||||
// {/* Floating particles for atmosphere */}
|
||||
// <div className="absolute inset-0 overflow-hidden pointer-events-none">
|
||||
// {[...Array(20)].map((_, i) => (
|
||||
// <div
|
||||
// key={i}
|
||||
// className="absolute rounded-full bg-indigo-500/10"
|
||||
// style={{
|
||||
// width: `${Math.random() * 6 + 2}px`,
|
||||
// height: `${Math.random() * 6 + 2}px`,
|
||||
// top: `${Math.random() * 100}%`,
|
||||
// left: `${Math.random() * 100}%`,
|
||||
// animation: `float ${Math.random() * 10 + 10}s linear infinite`,
|
||||
// animationDelay: `${Math.random() * 5}s`,
|
||||
// opacity: Math.random() * 0.5 + 0.2
|
||||
// }}
|
||||
// />
|
||||
// ))}
|
||||
// </div>
|
||||
|
||||
// {/* Add keyframes for floating animation */}
|
||||
// <style jsx global>{`
|
||||
// @keyframes float {
|
||||
// 0% {
|
||||
// transform: translateY(0) translateX(0);
|
||||
// opacity: 0;
|
||||
// }
|
||||
// 10% {
|
||||
// opacity: 0.5;
|
||||
// }
|
||||
// 90% {
|
||||
// opacity: 0.5;
|
||||
// }
|
||||
// 100% {
|
||||
// transform: translateY(-100vh) translateX(20px);
|
||||
// opacity: 0;
|
||||
// }
|
||||
// }
|
||||
// @keyframes pulse {
|
||||
// 0%, 100% {
|
||||
// opacity: 0.6;
|
||||
// transform: scale(1);
|
||||
// }
|
||||
// 50% {
|
||||
// opacity: 1;
|
||||
// transform: scale(1.3);
|
||||
// }
|
||||
// }
|
||||
// `}</style>
|
||||
// </div>
|
||||
// );
|
||||
// }
|
||||
@ -3,130 +3,87 @@
|
||||
import React from 'react';
|
||||
import Navbar from '@/components/Navbar/navbar';
|
||||
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, FaRegFileAlt, FaCalendarAlt, FaChartLine,
|
||||
FaTasks, FaUsers, FaCog, FaRocket, FaLightbulb, FaDatabase } from 'react-icons/fa';
|
||||
import { OrbitingCircles } from '@/components/magicui/orbiting-circles';
|
||||
import { FaHandshake, FaLightbulb, FaChartLine, FaCogs, FaRocket } from 'react-icons/fa';
|
||||
|
||||
const heading = "Everyday Sales - Optimize and Automate Your Sales Workflows";
|
||||
const description = "Bid farewell to inflexible systems. Everyday equips you with everything needed to power your sales engine, offering you full control to navigate it as you wish.";
|
||||
const heading = "Our Team is Your Team";
|
||||
const description = "Achieve results quicker with support and collaboration from the Everyday Enterprise Services team.";
|
||||
|
||||
const features = [
|
||||
const servicesOverview = [
|
||||
{
|
||||
head: "Centralize and Analyze All Your Customer Feedback",
|
||||
desc: "Accumulating your customers' insights in one platform ensures you're steering development in the right direction.",
|
||||
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: "#",
|
||||
icon: <FaUsers className="text-sky-400 text-2xl" />
|
||||
title: "Our Established Approach for Transformation at Scale",
|
||||
description: "Our Enterprise plan gives you exclusive access to services led by our experienced team. Our proven approach enhances operational efficiency, delivers faster results, and keeps your team ahead of the curve.",
|
||||
icon: <FaRocket className="text-4xl text-indigo-400" />
|
||||
},
|
||||
{
|
||||
head: "Set Key Objectives and Align Teams",
|
||||
desc: "An executive dashboard allows you to delve into Key Results. Monitor health, status, and related information like objectives or 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: "#",
|
||||
icon: <FaTasks className="text-purple-400 text-2xl" />
|
||||
title: "Transactions",
|
||||
description: "Use and re-use responsive sections to create the perfect layout.",
|
||||
icon: <FaChartLine className="text-4xl text-blue-400" />
|
||||
},
|
||||
{
|
||||
head: "Craft a Dynamic Sales Roadmap",
|
||||
desc: "Create, manage, and deliver a sales roadmap that energizes your entire organization, yet is adaptable enough to adjust to unforeseen circumstances.",
|
||||
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: "#",
|
||||
icon: <FaRocket className="text-amber-400 text-2xl" />
|
||||
},
|
||||
{
|
||||
head: "Visualize and Interpret Trends",
|
||||
desc: "Built-in reporting swiftly uncovers key insights and best practices, expediting action and elevating your processes.",
|
||||
button: "See demo",
|
||||
buttonColor: "emerald-200",
|
||||
image: "https://res.cloudinary.com/zapier-media/image/upload/q_auto/f_auto/v1727809091/Solutions/Marketing/marketing-lp_04_liatuw.png",
|
||||
link: "#",
|
||||
icon: <FaChartLine className="text-emerald-400 text-2xl" />
|
||||
},
|
||||
{
|
||||
head: "Manage Sales Cycles and Delivery",
|
||||
desc: "Draw together product insights by consolidating all feedback—from every tool and source—into a single, accessible location.",
|
||||
button: "Learn more",
|
||||
buttonColor: "rose-200",
|
||||
image: "https://res.cloudinary.com/zapier-media/image/upload/q_auto/f_auto/v1727809087/Solutions/Marketing/marketing-lp_02_ivu6pd.png",
|
||||
link: "#",
|
||||
icon: <FaCalendarAlt className="text-rose-400 text-2xl" />
|
||||
},
|
||||
{
|
||||
head: "Establish a Unified Sales Roadmap",
|
||||
desc: "Synchronize around a flexible, organization-wide roadmap. Customizable views allow every department to see their role.",
|
||||
button: "View details",
|
||||
buttonColor: "blue-200",
|
||||
image: "https://res.cloudinary.com/zapier-media/image/upload/q_auto/f_auto/v1727809087/Solutions/Marketing/marketing-lp_01_slh5ws.png",
|
||||
link: "#",
|
||||
icon: <FaRegFileAlt className="text-blue-400 text-2xl" />
|
||||
title: "Summaries",
|
||||
description: "Use and re-use responsive sections to create the perfect layout.",
|
||||
icon: <FaCogs className="text-4xl text-green-400" />
|
||||
}
|
||||
];
|
||||
|
||||
const whyEveryday = [
|
||||
const howItWorks = [
|
||||
{
|
||||
title: "Perfect Fit for Sales Teams",
|
||||
description: "Everyday seamlessly integrates your sales roadmaps, customer feedback, and target schedules, keeping them perfectly aligned. With the right data at their fingertips, teams can concentrate on delivering exceptional sales results, quicker.",
|
||||
icon: <FaUsers className="text-4xl text-indigo-400" />
|
||||
},
|
||||
{
|
||||
title: "Set Key Objectives and Align Teams",
|
||||
description: "An executive dashboard allows you to delve into Key Results. Monitor health, status, and related information like objectives or projects.",
|
||||
icon: <FaTasks className="text-4xl text-blue-400" />
|
||||
},
|
||||
{
|
||||
title: "Craft a Dynamic Sales Roadmap",
|
||||
description: "Create, manage, and deliver a sales roadmap that energizes your entire organization, yet is adaptable enough to adjust to unforeseen circumstances.",
|
||||
icon: <FaRocket className="text-4xl text-green-400" />
|
||||
},
|
||||
{
|
||||
title: "Establish a Unified Sales Roadmap",
|
||||
description: "Synchronize around a flexible, organization-wide roadmap. Customizable views allow every department to see their role, and plan accordingly.",
|
||||
icon: <FaRegFileAlt className="text-4xl text-amber-400" />
|
||||
}
|
||||
];
|
||||
|
||||
const detailedFeatures = [
|
||||
{
|
||||
title: "Built-in Reporting for Key Insights",
|
||||
description: "Built-in reporting swiftly uncovers key insights and best practices, expediting action and elevating your processes.",
|
||||
subFeature: "Consolidate All Essential Data in One Place Integrate your crucial tools to bring more context into the sales process.",
|
||||
icon: <FaChartLine className="text-4xl text-sky-400" />
|
||||
},
|
||||
{
|
||||
title: "Manage Sales Cycles and Delivery",
|
||||
description: "Draw together product insights by consolidating all feedback—from every tool and source—into a single, accessible location.",
|
||||
subFeature: "Ensure launches stay on course with comprehensive tracking and management.",
|
||||
icon: <FaCalendarAlt className="text-4xl text-purple-400" />
|
||||
},
|
||||
{
|
||||
title: "Centralize Customer Feedback",
|
||||
description: "Accumulating your customers' insights in one platform ensures you're steering development in the right direction.",
|
||||
subFeature: "Develop a feedback repository from every tool and source into a single, accessible location.",
|
||||
icon: <FaDatabase className="text-4xl text-rose-400" />
|
||||
},
|
||||
{
|
||||
title: "Visualize and Interpret Trends",
|
||||
description: "Plan and Prioritize as a Team. Stay on track with every initiative while maintaining a detailed view into OKRs.",
|
||||
subFeature: "Interconnect across all teams with comprehensive data visualization tools.",
|
||||
title: "Realize Your Vision",
|
||||
description: "Design new solutions, or optimize existing ones, with our expertise. To help you deploy faster, our Enterprise plan gives you access to professional services like consultations and builds.",
|
||||
button: "Explore Snippets",
|
||||
link: "#",
|
||||
icon: <FaLightbulb className="text-4xl text-amber-400" />
|
||||
}
|
||||
];
|
||||
|
||||
const words = `"Experience true versatility for sales teams. Everyday seamlessly integrates your sales roadmaps, customer feedback, and target schedules, keeping them perfectly aligned."`;
|
||||
const addOnServices = [
|
||||
{
|
||||
title: "Implementation Specialist",
|
||||
description: "Customer base trainings and base build services only available to qualified customers as set forth on an applicable order form",
|
||||
button: "Explore Free Trial",
|
||||
link: "#",
|
||||
image: "https://via.placeholder.com/400x300"
|
||||
},
|
||||
{
|
||||
title: "Foundation",
|
||||
description: "A quick start for teams who have an established workflow. We'll work with you to create a prototype within 2 to 3 weeks.",
|
||||
subFeatures: [
|
||||
"Discovery",
|
||||
"Handoff training"
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Standard Build",
|
||||
description: "For teams who have an established workflow, and want to invest 3+ weeks to design an Everyday solution.",
|
||||
subFeatures: [
|
||||
"Everything in Foundation",
|
||||
"Solution design",
|
||||
"Feedback sessions"
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Advanced Build",
|
||||
description: "Perfect for teams who want assistance defining their existing workflow and translating it into an Everyday solution.",
|
||||
subFeatures: [
|
||||
"Everything in Standard",
|
||||
"Workflow mapping"
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Custom Build",
|
||||
description: "Offered to teams who want to collaborate on defining a more complex workflow and developing an integrated Everyday solution.",
|
||||
subFeatures: [
|
||||
"Everything in Advanced",
|
||||
"Tailored sessions"
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
export default function SalesHub() {
|
||||
export default function ServicesPage() {
|
||||
return (
|
||||
<div className="bg-[#080E12] dark text-white">
|
||||
<Navbar />
|
||||
|
||||
|
||||
{/* Hero Section */}
|
||||
<div className="min-h-screen flex flex-col justify-center p-6 md:p-12 lg:p-24 relative overflow-hidden">
|
||||
<div className="max-w-7xl mx-auto w-full z-10">
|
||||
@ -138,10 +95,7 @@ export default function SalesHub() {
|
||||
</h2>
|
||||
<div className="flex flex-wrap gap-4">
|
||||
<button className="px-8 py-3 bg-gradient-to-r from-sky-500 to-indigo-600 rounded-lg text-lg font-medium hover:from-sky-600 hover:to-indigo-700 transition-all">
|
||||
Get Started
|
||||
</button>
|
||||
<button className="px-8 py-3 bg-gray-800 rounded-lg text-lg font-medium hover:bg-gray-700 transition-all border border-gray-700">
|
||||
Book Demo
|
||||
Contact Sales
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@ -150,46 +104,14 @@ export default function SalesHub() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Integration Hub */}
|
||||
<div className="py-24 px-6 md:px-12">
|
||||
<div className="max-w-7xl mx-auto flex flex-col md:flex-row gap-12 items-center">
|
||||
<div className="relative flex h-[400px] w-full md:w-1/2 flex-col items-center justify-center overflow-hidden">
|
||||
<OrbitingCircles iconSize={50} radius={180}>
|
||||
<Icons.salesforce />
|
||||
<Icons.hubspot />
|
||||
<Icons.slack />
|
||||
<Icons.zoom />
|
||||
<Icons.linkedin />
|
||||
</OrbitingCircles>
|
||||
<OrbitingCircles iconSize={40} radius={120} reverse speed={2}>
|
||||
<Icons.salesforce />
|
||||
<Icons.hubspot />
|
||||
<Icons.slack />
|
||||
<Icons.zoom />
|
||||
</OrbitingCircles>
|
||||
</div>
|
||||
<div className="flex flex-col w-full md:w-1/2 gap-6">
|
||||
<h2 className="text-4xl md:text-5xl lg:text-6xl font-medium tracking-wide">
|
||||
Bring Your Sales Tools Together
|
||||
</h2>
|
||||
<p className="text-lg md:text-xl text-gray-300">
|
||||
With Everyday, you can easily connect and synchronize data from your CRM, email marketing platforms, sales enablement tools, and more, creating a comprehensive and efficient workflow tailored to your sales team's needs.
|
||||
</p>
|
||||
<button className="px-6 py-3 bg-gray-800 rounded-lg w-fit hover:bg-gray-700 transition-all border border-gray-700 mt-4">
|
||||
Discover Integrations
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Why Everyday Section */}
|
||||
{/* Services Overview Section */}
|
||||
<div className="py-24 px-6 md:px-12 bg-gradient-to-b from-[#0A1218] to-[#080E12]">
|
||||
<div className="max-w-7xl mx-auto">
|
||||
<h2 className="text-4xl md:text-5xl mb-16 text-center">
|
||||
Why Everyday is the <span className="text-indigo-400">Perfect Fit</span> for Sales Teams
|
||||
Our <span className="text-indigo-400">Enterprise Services</span> at a Glance
|
||||
</h2>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-10">
|
||||
{whyEveryday.map((item, index) => (
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-10">
|
||||
{servicesOverview.map((item, index) => (
|
||||
<div key={index} className="bg-gray-900/50 backdrop-blur-sm p-8 rounded-xl border border-gray-800 hover:border-gray-700 transition-all">
|
||||
<div className="mb-6">{item.icon}</div>
|
||||
<h3 className="text-2xl mb-4">{item.title}</h3>
|
||||
@ -200,20 +122,20 @@ export default function SalesHub() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Features Grid */}
|
||||
{/* How Everyday Enterprise Services Works Section */}
|
||||
<div className="py-24 px-6 md:px-12">
|
||||
<div className="max-w-7xl mx-auto">
|
||||
<h2 className="text-4xl md:text-5xl mb-4 text-center">All Features</h2>
|
||||
<h2 className="text-4xl md:text-5xl mb-4 text-center">How Everyday Enterprise Services Works</h2>
|
||||
<p className="text-xl text-gray-300 text-center mb-16 max-w-3xl mx-auto">
|
||||
Everything you need to optimize your sales workflows in one powerful platform
|
||||
Some of our services are included with your Enterprise plan. You may also purchase add-on Professional Services as needed.
|
||||
</p>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
{features.map((feature, index) => (
|
||||
<div className="grid grid-cols-1 md:grid-cols-1 lg:grid-cols-1 gap-8">
|
||||
{howItWorks.map((feature, index) => (
|
||||
<div key={index} className="bg-gray-900/50 backdrop-blur-sm rounded-xl p-8 hover:shadow-lg hover:shadow-indigo-900/20 transition-all border border-gray-800 hover:border-gray-700">
|
||||
<div className="mb-6">{feature.icon}</div>
|
||||
<h3 className="text-2xl mb-4">{feature.head}</h3>
|
||||
<p className="text-gray-300 mb-6">{feature.desc}</p>
|
||||
<a href={feature.link} className={`inline-block px-6 py-2 rounded-md bg-${feature.buttonColor} text-gray-900 font-medium hover:opacity-90 transition-opacity`}>
|
||||
<h3 className="text-2xl mb-4">{feature.title}</h3>
|
||||
<p className="text-gray-300 mb-6">{feature.description}</p>
|
||||
<a href={feature.link} className="inline-block px-6 py-2 rounded-md bg-sky-200 text-gray-900 font-medium hover:opacity-90 transition-opacity">
|
||||
{feature.button}
|
||||
</a>
|
||||
</div>
|
||||
@ -222,132 +144,40 @@ export default function SalesHub() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Testimonial */}
|
||||
<div className="py-24 px-6 md:px-12">
|
||||
<div className="max-w-4xl mx-auto bg-gradient-to-r from-gray-900 to-gray-800 rounded-2xl shadow-xl p-10 md:p-16 border border-gray-700">
|
||||
<div className="text-amber-400 text-center text-2xl mb-10">
|
||||
★★★★★
|
||||
</div>
|
||||
<TextGenerateEffect words={words} className="text-xl md:text-2xl font-medium italic text-center" />
|
||||
<p className="text-center mt-10 text-gray-400">— Michael Scott, Regional Manager</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Detailed Features */}
|
||||
{/* Add-On Professional Services Section */}
|
||||
<div className="py-24 px-6 md:px-12 bg-gradient-to-b from-[#0A1218] to-[#080E12]">
|
||||
<div className="max-w-7xl mx-auto">
|
||||
<h2 className="text-4xl md:text-5xl mb-16 text-center">
|
||||
Powerful <span className="text-sky-400">Features</span> for Modern Sales Teams
|
||||
</h2>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-12">
|
||||
{detailedFeatures.map((feature, index) => (
|
||||
<div key={index} className="flex gap-6">
|
||||
<div className="flex-shrink-0">{feature.icon}</div>
|
||||
<div>
|
||||
<h3 className="text-2xl mb-3">{feature.title}</h3>
|
||||
<p className="text-gray-300 mb-4">{feature.description}</p>
|
||||
<div className="bg-gray-800/50 p-4 rounded-lg border-l-4 border-indigo-500">
|
||||
<p className="text-gray-200">{feature.subFeature}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Marketplace Section */}
|
||||
<div className="py-24 px-6 md:px-12">
|
||||
<div className="max-w-7xl mx-auto">
|
||||
<h2 className="text-4xl md:text-5xl mb-6 text-center">
|
||||
Start Swiftly with Everyday Marketplace
|
||||
Add-On Professional Services
|
||||
</h2>
|
||||
<p className="text-xl text-gray-300 text-center mb-16 max-w-3xl mx-auto">
|
||||
Our ready-to-use sales workflows and tools assist in building workflows that link across your team and organization. Now, you can centralize customer feedback, track work to goals, plan sales cycles, and more.
|
||||
Require a little more? We offer optional add-on services for developing even more solutions. Providing the best solution.
|
||||
</p>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
{features.slice(0, 3).map((feature, index) => (
|
||||
<div key={index} className="bg-gradient-to-br from-gray-800 to-gray-900 rounded-xl p-8 hover:shadow-lg hover:shadow-indigo-900/20 transition-all border border-gray-700">
|
||||
<h3 className="text-2xl mb-4">{feature.head}</h3>
|
||||
<p className="text-gray-300 mb-6">{feature.desc}</p>
|
||||
<a href={feature.link} className={`inline-block px-6 py-2 rounded-md bg-${feature.buttonColor} text-gray-100 font-medium hover:opacity-90 transition-opacity`}>
|
||||
{feature.button}
|
||||
</a>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
{addOnServices.map((service, index) => (
|
||||
<div key={index} className="bg-gray-900/50 backdrop-blur-sm rounded-xl p-8 hover:shadow-lg hover:shadow-indigo-900/20 transition-all border border-gray-800 hover:border-gray-700">
|
||||
{service.image && <img src={service.image} alt={service.title} className="mb-4 rounded-md" />}
|
||||
<h3 className="text-2xl mb-4">{service.title}</h3>
|
||||
<p className="text-gray-300 mb-6">{service.description}</p>
|
||||
{service.subFeatures && (
|
||||
<ul className="list-disc text-gray-300 pl-6 mb-6">
|
||||
{service.subFeatures.map((feature, idx) => (
|
||||
<li key={idx}>{feature}</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
{service.button && (
|
||||
<a href={service.link} className="inline-block px-6 py-2 rounded-md bg-sky-200 text-gray-900 font-medium hover:opacity-90 transition-opacity">
|
||||
{service.button}
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* CTA Section */}
|
||||
<div className="py-24 px-6 md:px-12 bg-gradient-to-r from-indigo-900/20 to-purple-900/20">
|
||||
<div className="max-w-4xl mx-auto text-center">
|
||||
<h2 className="text-4xl md:text-5xl mb-6">
|
||||
Ready to Transform Your Sales Workflow?
|
||||
</h2>
|
||||
<p className="text-xl text-gray-300 mb-10">
|
||||
Join thousands of sales teams who have revolutionized their processes with Everyday.
|
||||
</p>
|
||||
<div className="flex flex-wrap gap-4 justify-center">
|
||||
<button className="px-8 py-4 bg-gradient-to-r from-sky-500 to-indigo-600 rounded-lg text-lg font-medium hover:from-sky-600 hover:to-indigo-700 transition-all">
|
||||
Get Started Today
|
||||
</button>
|
||||
<button className="px-8 py-4 bg-gray-800 rounded-lg text-lg font-medium hover:bg-gray-700 transition-all border border-gray-700">
|
||||
Schedule a Demo
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Footer />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const Icons = {
|
||||
salesforce: () => (
|
||||
<svg width="100" height="100" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M10.4 23C10.4 21.3 10.7 19.8 11.4 18.4C12.1 17 13 15.8 14.2 14.9C15.4 13.9 16.8 13.1 18.3 12.6C19.9 12.1 21.5 11.8 23.2 11.8C25 11.8 26.6 12.1 28.1 12.6C29.6 13.1 31 13.9 32.2 14.9C33.4 15.9 34.3 17.1 35 18.4C35.7 19.8 36 21.3 36 23C36 24.7 35.7 26.2 35 27.6C34.3 29 33.4 30.2 32.2 31.1C31 32.1 29.6 32.9 28.1 33.4C26.6 33.9 25 34.2 23.2 34.2C21.5 34.2 19.9 33.9 18.3 33.4C16.8 32.9 15.4 32.1 14.2 31.1C13 30.1 12.1 28.9 11.4 27.6C10.7 26.2 10.4 24.7 10.4 23Z" fill="#00A1E0"/>
|
||||
<path d="M26.5 20C26.5 19.4 26.3 18.9 26 18.5C25.7 18.1 25.2 17.9 24.6 17.9C24 17.9 23.5 18.1 23.2 18.5C22.9 18.9 22.7 19.4 22.7 20C22.7 20.6 22.9 21.1 23.2 21.5C23.5 21.9 24 22.1 24.6 22.1C25.2 22.1 25.7 21.9 26 21.5C26.3 21.1 26.5 20.6 26.5 20Z" fill="white"/>
|
||||
<path d="M19.8 24.2C19.8 23.6 19.6 23.1 19.3 22.7C19 22.3 18.5 22.1 17.9 22.1C17.3 22.1 16.8 22.3 16.5 22.7C16.2 23.1 16 23.6 16 24.2C16 24.8 16.2 25.3 16.5 25.7C16.8 26.1 17.3 26.3 17.9 26.3C18.5 26.3 19 26.1 19.3 25.7C19.6 25.3 19.8 24.8 19.8 24.2Z" fill="white"/>
|
||||
<path d="M33.3 24.2C33.3 23.6 33.1 23.1 32.8 22.7C32.5 22.3 32 22.1 31.4 22.1C30.8 22.1 30.3 22.3 30 22.7C29.7 23.1 29.5 23.6 29.5 24.2C29.5 24.8 29.7 25.3 30 25.7C30.3 26.1 30.8 26.3 31.4 26.3C32 26.3 32.5 26.1 32.8 25.7C33.1 25.3 33.3 24.8 33.3 24.2Z" fill="white"/>
|
||||
<path d="M26.5 28.4C26.5 27.8 26.3 27.3 26 26.9C25.7 26.5 25.2 26.3 24.6 26.3C24 26.3 23.5 26.5 23.2 26.9C22.9 27.3 22.7 27.8 22.7 28.4C22.7 29 22.9 29.5 23.2 29.9C23.5 30.3 24 30.5 24.6 30.5C25.2 30.5 25.7 30.3 26 29.9C26.3 29.5 26.5 29 26.5 28.4Z" fill="white"/>
|
||||
</svg>
|
||||
),
|
||||
hubspot: () => (
|
||||
<svg width="100" height="100" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M245.333 140.667H266.667V226.667H352.667V248H266.667V334H245.333V248H159.333V226.667H245.333V140.667Z" fill="white"/>
|
||||
<path d="M394.667 202.667C394.667 190.333 384.667 180.333 372.333 180.333C360 180.333 350 190.333 350 202.667C350 215 360 225 372.333 225C384.667 225 394.667 215 394.667 202.667Z" fill="white"/>
|
||||
<path d="M162 202.667C162 190.333 152 180.333 139.667 180.333C127.333 180.333 117.333 190.333 117.333 202.667C117.333 215 127.333 225 139.667 225C152 225 162 215 162 202.667Z" fill="white"/>
|
||||
<path d="M394.667 309.333C394.667 297 384.667 287 372.333 287C360 287 350 297 350 309.333C350 321.667 360 331.667 372.333 331.667C384.667 331.667 394.667 321.667 394.667 309.333Z" fill="white"/>
|
||||
<path d="M162 309.333C162 297 152 287 139.667 287C127.333 287 117.333 297 117.333 309.333C117.333 321.667 127.333 331.667 139.667 331.667C152 331.667 162 321.667 162 309.333Z" fill="white"/>
|
||||
<path d="M256 117.333C176.76 117.333 112.667 181.427 112.667 260.667C112.667 339.907 176.76 404 256 404C335.24 404 399.333 339.907 399.333 260.667C399.333 181.427 335.24 117.333 256 117.333ZM256 382.667C188.52 382.667 134 328.147 134 260.667C134 193.187 188.52 138.667 256 138.667C323.48 138.667 378 193.187 378 260.667C378 328.147 323.48 382.667 256 382.667Z" fill="#FF7A59"/>
|
||||
</svg>
|
||||
),
|
||||
slack: () => (
|
||||
<svg width="100" height="100" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M14.5 10C13.672 10 13 9.328 13 8.5V3.5C13 2.672 13.672 2 14.5 2C15.328 2 16 2.672 16 3.5V8.5C16 9.328 15.328 10 14.5 10Z" fill="#E01E5A"/>
|
||||
<path d="M20.5 10H19V8.5C19 7.672 19.672 7 20.5 7C21.328 7 22 7.672 22 8.5C22 9.328 21.328 10 20.5 10Z" fill="#E01E5A"/>
|
||||
<path d="M9.5 14C10.328 14 11 14.672 11 15.5V20.5C11 21.328 10.328 22 9.5 22C8.672 22 8 21.328 8 20.5V15.5C8 14.672 8.672 14 9.5 14Z" fill="#2EB67D"/>
|
||||
<path d="M3.5 14H5V15.5C5 16.328 4.328 17 3.5 17C2.672 17 2 16.328 2 15.5C2 14.672 2.672 14 3.5 14Z" fill="#2EB67D"/>
|
||||
<path d="M14 9.5C14 10.328 13.328 11 12.5 11H7.5C6.672 11 6 10.328 6 9.5C6 8.672 6.672 8 7.5 8H12.5C13.328 8 14 8.672 14 9.5Z" fill="#ECB22E"/>
|
||||
<path d="M7.5 5H9V3.5C9 2.672 8.328 2 7.5 2C6.672 2 6 2.672 6 3.5C6 4.328 6.672 5 7.5 5Z" fill="#ECB22E"/>
|
||||
<path d="M10 14.5C10 13.672 10.672 13 11.5 13H16.5C17.328 13 18 13.672 18 14.5C18 15.328 17.328 16 16.5 16H11.5C10.672 16 10 15.328 10 14.5Z" fill="#36C5F0"/>
|
||||
<path d="M16.5 19H15V20.5C15 21.328 15.672 22 16.5 22C17.328 22 18 21.328 18 20.5C18 19.672 17.328 19 16.5 19Z" fill="#36C5F0"/>
|
||||
</svg>
|
||||
),
|
||||
zoom: () => (
|
||||
<svg width="100" height="100" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M28 46.667C38.2173 46.667 46.6667 38.2177 46.6667 28.0003C46.6667 17.783 38.2173 9.33366 28 9.33366C17.7826 9.33366 9.33331 17.783 9.33331 28.0003C9.33331 38.2177 17.7826 46.667 28 46.667Z" fill="#4A8CFF"/>
|
||||
<path d="M22.6667 21V35L35 28L22.6667 21Z" fill="white"/>
|
||||
</svg>
|
||||
),
|
||||
linkedin: () => (
|
||||
<svg width="100" height="100" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M19 3H5C3.895 3 3 3.895 3 5V19C3 20.105 3.895 21 5 21H19C20.105 21 21 20.105 21 19V5C21 3.895 20.105 3 19 3Z" fill="#0077B5"/>
|
||||
<path d="M8.5 10.5V16.5H6.5V10.5H8.5Z" fill="white"/>
|
||||
<path d="M7.5 7.5C8.32843 7.5 9 8.17157 9 9C9 9.82843 8.32843 10.5 7.5 10.5C6.67157 10.5 6 9.82843 6 9C6 8.17157 6.67157 7.5 7.5 7.5Z" fill="white"/>
|
||||
<path d="M13 10.5C13 10.5 13 12.5 13 13.5C13 14.5 13.5 15.5 14.5 15.5C15.5 15.5 16 14.5 16 13.5V10.5H18V16.5H16V15.5C16 15.5 15.5 16.5 14 16.5C12.5 16.5 11 15.5 11 13.5V10.5H13Z" fill="white"/>
|
||||
</svg>
|
||||
),
|
||||
};
|
||||
|
||||
165
app/videos/page.tsx
Normal file
165
app/videos/page.tsx
Normal file
@ -0,0 +1,165 @@
|
||||
import React from 'react';
|
||||
import Navbar from '@/components/Navbar/navbar';
|
||||
import Footer from "@/components/footer";
|
||||
import {
|
||||
FaVideo,
|
||||
FaChalkboardTeacher,
|
||||
FaUsers,
|
||||
FaNewspaper,
|
||||
FaPlayCircle
|
||||
} from 'react-icons/fa';
|
||||
|
||||
const heading = "Videos: Your Hub for AI Insights & Education";
|
||||
const description = "Explore in-depth tutorials, engaging panel discussions, and insightful conversations about our AI innovations.";
|
||||
|
||||
const videoCategories = [
|
||||
{
|
||||
title: "Tutorials & How-Tos",
|
||||
description: "Learn how to convert your expertise into intelligent AI agents with our easy-to-follow video tutorials.",
|
||||
icon: <FaChalkboardTeacher className="text-4xl text-green-400" />
|
||||
},
|
||||
{
|
||||
title: "Expert Conversations & Panels",
|
||||
description: "Gain insights into emerging trends, strategic approaches, and the future of AI technology.",
|
||||
icon: <FaUsers className="text-4xl text-blue-400" />
|
||||
},
|
||||
{
|
||||
title: "Learning Resources",
|
||||
description: "Access comprehensive videos documenting our product features, case studies, and success stories.",
|
||||
icon: <FaNewspaper className="text-4xl text-indigo-400" />
|
||||
}
|
||||
];
|
||||
|
||||
const featuredContent = [
|
||||
{
|
||||
title: "Webinars & Live Sessions",
|
||||
description: "Join our live webinars to interact with experts, ask questions in real time, and explore deep dives into specific topics.",
|
||||
button: "Upcoming Events",
|
||||
link: "#",
|
||||
icon: <FaPlayCircle className="text-4xl text-amber-400" />
|
||||
}
|
||||
];
|
||||
|
||||
const subscriptionOptions = [
|
||||
{
|
||||
title: "Stay Connected",
|
||||
description: "Subscribe to our video updates and marketing insights.",
|
||||
button: "Subscribe Now",
|
||||
link: "/pricing",
|
||||
image: "https://via.placeholder.com/400x300"
|
||||
},
|
||||
{
|
||||
title: "Explore & Engage",
|
||||
description: "Dive into our video content and unlock a world of knowledge.",
|
||||
subFeatures: [
|
||||
"Build intelligent AI agents",
|
||||
"Learn industry best practices",
|
||||
"Stay ahead of AI trends"
|
||||
],
|
||||
button: "Browse Videos",
|
||||
link: "#"
|
||||
}
|
||||
];
|
||||
|
||||
export default function VideosPage() {
|
||||
return (
|
||||
<div className="bg-[#080E12] dark text-white">
|
||||
<Navbar />
|
||||
|
||||
{/* Hero Section */}
|
||||
<div className="min-h-screen flex flex-col justify-center p-6 md:p-12 lg:p-24 relative overflow-hidden">
|
||||
<div className="max-w-7xl mx-auto w-full z-10">
|
||||
<h1 className="text-5xl md:text-7xl lg:text-8xl mb-6 bg-clip-text text-transparent bg-gradient-to-r from-white to-gray-400">
|
||||
{heading}
|
||||
</h1>
|
||||
<h2 className="text-2xl md:text-3xl lg:text-4xl max-w-4xl mb-12">
|
||||
{description}
|
||||
</h2>
|
||||
<div className="flex flex-wrap gap-4">
|
||||
<button className="px-8 py-3 bg-gradient-to-r from-sky-500 to-indigo-600 rounded-lg text-lg font-medium hover:from-sky-600 hover:to-indigo-700 transition-all">
|
||||
Browse Videos
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="absolute right-0 bottom-0 w-full md:w-1/2 h-1/2 opacity-20 md:opacity-30">
|
||||
<div className="w-full h-full bg-gradient-to-tr from-indigo-500 via-purple-500 to-pink-500 rounded-full blur-3xl"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Video Categories Section */}
|
||||
<div className="py-24 px-6 md:px-12 bg-gradient-to-b from-[#0A1218] to-[#080E12]">
|
||||
<div className="max-w-7xl mx-auto">
|
||||
<h2 className="text-4xl md:text-5xl mb-16 text-center">
|
||||
What <span className="text-indigo-400">You'll Find</span>
|
||||
</h2>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-10">
|
||||
{videoCategories.map((category, index) => (
|
||||
<div key={index} className="bg-gray-900/50 backdrop-blur-sm p-8 rounded-xl border border-gray-800 hover:border-gray-700 transition-all">
|
||||
<div className="mb-6">{category.icon}</div>
|
||||
<h3 className="text-2xl mb-4">{category.title}</h3>
|
||||
<p className="text-gray-300">{category.description}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Featured Content Section */}
|
||||
<div className="py-24 px-6 md:px-12">
|
||||
<div className="max-w-7xl mx-auto">
|
||||
<h2 className="text-4xl md:text-5xl mb-4 text-center">Live & Interactive Content</h2>
|
||||
<p className="text-xl text-gray-300 text-center mb-16 max-w-3xl mx-auto">
|
||||
Engage directly with AI experts and stay updated with the latest insights and trends.
|
||||
</p>
|
||||
<div className="grid grid-cols-1 md:grid-cols-1 lg:grid-cols-1 gap-8">
|
||||
{featuredContent.map((feature, index) => (
|
||||
<div key={index} className="bg-gray-900/50 backdrop-blur-sm rounded-xl p-8 hover:shadow-lg hover:shadow-indigo-900/20 transition-all border border-gray-800 hover:border-gray-700">
|
||||
<div className="mb-6">{feature.icon}</div>
|
||||
<h3 className="text-2xl mb-4">{feature.title}</h3>
|
||||
<p className="text-gray-300 mb-6">{feature.description}</p>
|
||||
<a href={feature.link} className="inline-block px-6 py-2 rounded-md bg-sky-200 text-gray-900 font-medium hover:opacity-90 transition-opacity">
|
||||
{feature.button}
|
||||
</a>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Subscription & Engagement Section */}
|
||||
<div className="py-24 px-6 md:px-12 bg-gradient-to-b from-[#0A1218] to-[#080E12]">
|
||||
<div className="max-w-7xl mx-auto">
|
||||
<h2 className="text-4xl md:text-5xl mb-16 text-center">
|
||||
Stay <span className="text-indigo-400">Connected & Informed</span>
|
||||
</h2>
|
||||
<p className="text-xl text-gray-300 text-center mb-16 max-w-3xl mx-auto">
|
||||
Transform your expertise into intelligent AI agents with Everyday Series video resources.
|
||||
</p>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||
{subscriptionOptions.map((option, index) => (
|
||||
<div key={index} className="flex flex-col justify-between bg-gray-900/50 backdrop-blur-sm rounded-xl p-8 hover:shadow-lg hover:shadow-indigo-900/20 transition-all border border-gray-800 hover:border-gray-700">
|
||||
{/* {option.image && <img src={option.image} alt={option.title} className="mb-4 rounded-md" />} */}
|
||||
<div>
|
||||
<h3 className="text-2xl mb-4">{option.title}</h3>
|
||||
<p className="text-gray-300 mb-6">{option.description}</p>
|
||||
{option.subFeatures && (
|
||||
<ul className="list-disc text-gray-300 pl-6 mb-6">
|
||||
{option.subFeatures.map((feature, idx) => (
|
||||
<li key={idx}>{feature}</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
<a href={option.link} className="inline-blockn w-fit px-6 py-2 rounded-md bg-sky-200 text-gray-900 font-medium hover:opacity-90 transition-opacity">
|
||||
{option.button}
|
||||
</a>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Footer />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -56,7 +56,7 @@ export function Partners() {
|
||||
key={index}
|
||||
src={img}
|
||||
alt={`Avatar ${index + 1}`}
|
||||
className="h-32 w-32 rounded-full object-cover"
|
||||
className="h-32 w-32 rounded-md object-scale-down"
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
@ -78,7 +78,7 @@ export function Partners() {
|
||||
key={index}
|
||||
src={img}
|
||||
alt={`Avatar ${index + 1}`}
|
||||
className="h-32 w-32 rounded-full object-cover"
|
||||
className="h-32 w-32 rounded-md object-scale-down"
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
@ -4,8 +4,10 @@ import React, { useState, useEffect } from "react";
|
||||
import { BentoGrid, BentoGridItem } from "../ui/bento-grid";
|
||||
import {
|
||||
IconBoxAlignRightFilled,
|
||||
IconChartBar,
|
||||
IconClipboardCopy,
|
||||
IconFileBroken,
|
||||
IconPencil,
|
||||
IconSignature,
|
||||
IconTableColumn,
|
||||
} from "@tabler/icons-react";
|
||||
@ -94,86 +96,26 @@ const SkeletonOne = () => {
|
||||
className="h-2 w-32 bg-gradient-to-r from-blue-500 to-purple-500 rounded-full mt-4"
|
||||
animate={{ width: isHovered ? "40%" : "8rem" }}
|
||||
/>
|
||||
<motion.p
|
||||
className="text-neutral-300 mt-2 flex items-center gap-2"
|
||||
animate={{ x: isHovered ? 10 : 0 }}
|
||||
>
|
||||
Learn more
|
||||
<motion.span
|
||||
animate={{ x: isHovered ? 5 : 0 }}
|
||||
transition={{ repeat: isHovered ? Infinity : 0, duration: 0.6 }}
|
||||
<a href="/series" className="mouse-pointer">
|
||||
<motion.p
|
||||
className="text-neutral-300 mt-2 flex items-center gap-2 mouse-pointer"
|
||||
animate={{ x: isHovered ? 10 : 0 }}
|
||||
>
|
||||
→
|
||||
</motion.span>
|
||||
</motion.p>
|
||||
Learn more
|
||||
<motion.span
|
||||
animate={{ x: isHovered ? 5 : 0 }}
|
||||
transition={{ repeat: isHovered ? Infinity : 0, duration: 0.6 }}
|
||||
>
|
||||
→
|
||||
</motion.span>
|
||||
</motion.p>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{/* Drag and drop animation container */}
|
||||
<div className="relative p-6 h-64 flex items-center justify-center">
|
||||
{/* Drop zone */}
|
||||
<motion.div
|
||||
className="absolute w-36 h-36 rounded-lg border-2 border-dashed border-indigo-400/50 flex items-center justify-center"
|
||||
style={{ right: '20%', bottom: '20%' }}
|
||||
animate={{
|
||||
borderColor: animationState === 'drag' ? 'rgba(129, 140, 248, 0.8)' : 'rgba(129, 140, 248, 0.5)',
|
||||
scale: animationState === 'drag' ? 1.05 : 1,
|
||||
backgroundColor: animationState === 'complete' ? 'rgba(129, 140, 248, 0.15)' : 'rgba(129, 140, 248, 0.05)'
|
||||
}}
|
||||
>
|
||||
<motion.div
|
||||
className="text-indigo-300 text-sm font-medium"
|
||||
animate={{ opacity: animationState === 'complete' ? 0 : 0.8 }}
|
||||
>
|
||||
Drop here
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
|
||||
{/* File being dragged */}
|
||||
<motion.div
|
||||
className="absolute flex flex-col items-center justify-center gap-1"
|
||||
style={{ left: '20%', top: '20%' }}
|
||||
animate={{
|
||||
x: animationState === 'idle' ? 0 : animationState === 'drag' ? 100 : animationState === 'drop' || animationState === 'complete' ? 130 : 0,
|
||||
y: animationState === 'idle' ? 0 : animationState === 'drag' ? 80 : animationState === 'drop' || animationState === 'complete' ? 100 : 0,
|
||||
opacity: animationState === 'complete' ? 0 : 1,
|
||||
scale: animationState === 'drag' ? 1.1 : animationState === 'drop' ? 0.95 : 1,
|
||||
rotate: animationState === 'drag' ? 2 : 0,
|
||||
}}
|
||||
transition={{
|
||||
type: animationState === 'drop' ? 'spring' : 'tween',
|
||||
stiffness: 200,
|
||||
damping: 15
|
||||
}}
|
||||
>
|
||||
{/* File icon */}
|
||||
<div className="w-16 h-20 bg-gradient-to-br from-indigo-500 to-purple-500 rounded-lg shadow-lg flex flex-col overflow-hidden">
|
||||
<div className="h-3 w-full bg-white/20"></div>
|
||||
<div className="flex-1 flex items-center justify-center text-white font-bold text-xs">
|
||||
WORKFLOW
|
||||
</div>
|
||||
</div>
|
||||
<motion.div
|
||||
className="text-indigo-200 text-xs"
|
||||
animate={{ opacity: animationState === 'idle' ? 1 : 0 }}
|
||||
>
|
||||
Drag me
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
|
||||
{/* Success checkmark that appears after drop */}
|
||||
<motion.div
|
||||
className="absolute text-green-400 text-2xl"
|
||||
style={{ right: '20%', bottom: '20%' }}
|
||||
animate={{
|
||||
opacity: animationState === 'complete' ? 1 : 0,
|
||||
scale: animationState === 'complete' ? [0, 1.2, 1] : 0,
|
||||
}}
|
||||
transition={{ duration: 0.3 }}
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" className="h-10 w-10" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
|
||||
</svg>
|
||||
</motion.div>
|
||||
<img src="https://everydayse-9255d3654d3ea492188c-endpoint.azureedge.net/blobeverydayse8906e17f60/wp-content/uploads/2023/07/Intuitive-user-friendly.png" className="w-full h-full object-cover" />
|
||||
</div>
|
||||
</motion.div>
|
||||
);
|
||||
@ -212,51 +154,94 @@ const SkeletonThree = () => {
|
||||
};
|
||||
|
||||
const SkeletonFour = () => {
|
||||
return (
|
||||
<motion.div
|
||||
className="flex flex-1 w-full h-full min-h-[6rem] bg-gradient-to-br from-purple-900/20 to-blue-900/20 flex-col items-center justify-center p-8 rounded-xl"
|
||||
>
|
||||
<div className="flex flex-col space-y-4 w-full">
|
||||
<motion.div
|
||||
className="bg-purple-500/20 p-4 rounded-xl cursor-pointer group relative overflow-hidden"
|
||||
whileHover={{ scale: 1.02 }}
|
||||
>
|
||||
<motion.div
|
||||
className="absolute inset-0 bg-purple-500/20 translate-x-[-100%] group-hover:translate-x-0 transition-transform duration-300"
|
||||
/>
|
||||
<div className="relative flex items-center space-x-4">
|
||||
<motion.div
|
||||
className="p-2 bg-purple-500/40 rounded-lg"
|
||||
whileHover={{ rotate: 360 }}
|
||||
transition={{ duration: 0.4 }}
|
||||
>
|
||||
<IconBoxAlignRightFilled className="h-6 w-6 text-purple-200" />
|
||||
</motion.div>
|
||||
<span className="text-white font-medium">Form Builder</span>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
className="bg-white/10 p-4 rounded-xl cursor-pointer group relative overflow-hidden"
|
||||
whileHover={{ scale: 1.02 }}
|
||||
>
|
||||
<motion.div
|
||||
className="absolute inset-0 bg-white/10 translate-x-[-100%] group-hover:translate-x-0 transition-transform duration-300"
|
||||
/>
|
||||
<div className="relative flex items-center space-x-4">
|
||||
<motion.div
|
||||
className="p-2 bg-white/20 rounded-lg"
|
||||
whileHover={{ rotate: 360 }}
|
||||
transition={{ duration: 0.4 }}
|
||||
>
|
||||
<IconClipboardCopy className="h-6 w-6 text-white" />
|
||||
</motion.div>
|
||||
<span className="text-white font-medium">Newsletter Creator</span>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</motion.div>
|
||||
);
|
||||
return (
|
||||
<motion.div
|
||||
className="flex flex-1 w-full h-full min-h-[12rem] bg-gradient-to-br from-purple-900/20 to-blue-900/20 flex-col items-center justify-center p-4 rounded-xl overflow-hidden"
|
||||
>
|
||||
<motion.div
|
||||
className="flex flex-col space-y-4 w-full"
|
||||
initial={{ y: 0 }}
|
||||
whileHover={{ y: "-25%" }}
|
||||
transition={{ duration: 0.6, ease: "easeInOut" }}
|
||||
>
|
||||
{/* First item - initially visible */}
|
||||
<motion.div
|
||||
className="bg-purple-500/20 p-4 rounded-xl cursor-pointer group relative overflow-hidden"
|
||||
>
|
||||
<motion.div
|
||||
className="absolute inset-0 bg-purple-500/20 translate-x-[-100%] group-hover:translate-x-0 transition-transform duration-300"
|
||||
/>
|
||||
<div className="relative flex items-center space-x-4">
|
||||
<motion.div
|
||||
className="p-2 bg-purple-500/40 rounded-lg"
|
||||
whileHover={{ rotate: 360 }}
|
||||
transition={{ duration: 0.4 }}
|
||||
>
|
||||
<IconBoxAlignRightFilled className="h-6 w-6 text-purple-200" />
|
||||
</motion.div>
|
||||
<span className="text-white font-medium">Form Builder</span>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* Second item - initially visible */}
|
||||
<motion.div
|
||||
className="bg-white/10 p-4 rounded-xl cursor-pointer group relative overflow-hidden"
|
||||
>
|
||||
<motion.div
|
||||
className="absolute inset-0 bg-white/10 translate-x-[-100%] group-hover:translate-x-0 transition-transform duration-300"
|
||||
/>
|
||||
<div className="relative flex items-center space-x-4">
|
||||
<motion.div
|
||||
className="p-2 bg-white/20 rounded-lg"
|
||||
whileHover={{ rotate: 360 }}
|
||||
transition={{ duration: 0.4 }}
|
||||
>
|
||||
<IconClipboardCopy className="h-6 w-6 text-white" />
|
||||
</motion.div>
|
||||
<span className="text-white font-medium">Newsletter Creator</span>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* Third item - revealed on hover */}
|
||||
<motion.div
|
||||
className="bg-blue-500/20 p-4 rounded-xl cursor-pointer group relative overflow-hidden"
|
||||
>
|
||||
<motion.div
|
||||
className="absolute inset-0 bg-blue-500/20 translate-x-[-100%] group-hover:translate-x-0 transition-transform duration-300"
|
||||
/>
|
||||
<div className="relative flex items-center space-x-4">
|
||||
<motion.div
|
||||
className="p-2 bg-blue-500/40 rounded-lg"
|
||||
whileHover={{ rotate: 360 }}
|
||||
transition={{ duration: 0.4 }}
|
||||
>
|
||||
<IconPencil className="h-6 w-6 text-blue-200" />
|
||||
</motion.div>
|
||||
<span className="text-white font-medium">Content Editor</span>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* Fourth item - revealed on hover */}
|
||||
<motion.div
|
||||
className="bg-emerald-500/20 p-4 rounded-xl cursor-pointer group relative overflow-hidden"
|
||||
>
|
||||
<motion.div
|
||||
className="absolute inset-0 bg-emerald-500/20 translate-x-[-100%] group-hover:translate-x-0 transition-transform duration-300"
|
||||
/>
|
||||
<div className="relative flex items-center space-x-4">
|
||||
<motion.div
|
||||
className="p-2 bg-emerald-500/40 rounded-lg"
|
||||
whileHover={{ rotate: 360 }}
|
||||
transition={{ duration: 0.4 }}
|
||||
>
|
||||
<IconChartBar className="h-6 w-6 text-emerald-200" />
|
||||
</motion.div>
|
||||
<span className="text-white font-medium">Analytics Dashboard</span>
|
||||
</div>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
|
||||
@ -431,21 +431,25 @@ const defaultFeaturesData = [
|
||||
{
|
||||
title: "No-Code AI Builder",
|
||||
description: "Design, test, and deploy AI agents effortlessly. Create powerful AI applications without any coding knowledge required.",
|
||||
link: "/series",
|
||||
vector: <VectorNoCode />,
|
||||
},
|
||||
{
|
||||
title: "Creative Suite",
|
||||
description: "Access powerful forms, video editing, and content creation tools to bring your vision to life. Transform your ideas into polished, professional content.",
|
||||
link: "/tools",
|
||||
vector: <VectorCreativeSuite />,
|
||||
},
|
||||
{
|
||||
title: "Community & Marketplace",
|
||||
description: "Grow your audience on your own platform or join our marketplace to reach thousands of SMBs. Build and nurture your community while expanding your reach.",
|
||||
link: "/marketplace",
|
||||
vector: <VectorCommunity />,
|
||||
},
|
||||
{
|
||||
title: "Subscription-Based Monetization",
|
||||
description: "Generate recurring revenue with our seamless subscription integration. Turn your AI solutions into a sustainable business model.",
|
||||
link: "/pricing",
|
||||
vector: <VectorMonetization />,
|
||||
},
|
||||
];
|
||||
@ -453,6 +457,7 @@ const defaultFeaturesData = [
|
||||
interface Feature {
|
||||
title: string;
|
||||
description: string;
|
||||
link: string;
|
||||
vector: React.ReactNode;
|
||||
}
|
||||
|
||||
@ -485,13 +490,15 @@ export default function Features({ featuresData }: { featuresData?: Feature[] })
|
||||
<div className={`space-y-6 ${index % 2 === 0 ? '' : 'text-right'}`}>
|
||||
<h3 className="text-3xl md:text-5xl">{feature.title}</h3>
|
||||
<p className="text-gray-400 text-lg">{feature.description}</p>
|
||||
<motion.button
|
||||
className="bg-purple-600 px-6 py-3 rounded-full hover:bg-purple-700 transition-colors"
|
||||
whileHover={{ scale: 1.05 }}
|
||||
whileTap={{ scale: 0.95 }}
|
||||
>
|
||||
Learn More
|
||||
</motion.button>
|
||||
<a href={feature.link}>
|
||||
<motion.button
|
||||
className="bg-purple-600 px-6 py-3 rounded-full hover:bg-purple-700 transition-colors"
|
||||
whileHover={{ scale: 1.05 }}
|
||||
whileTap={{ scale: 0.95 }}
|
||||
>
|
||||
Learn More
|
||||
</motion.button>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full md:w-1/2">
|
||||
|
||||
@ -8,7 +8,7 @@ const slides = [
|
||||
title: "Turn Your Expertise into Intelligent AI Agents",
|
||||
description: "Effortlessly convert your existing services into AI-powered agents. Empower your business with innovative, interactive tools that open new revenue streams.",
|
||||
buttonText: "Get Started Today",
|
||||
buttonLink: "#",
|
||||
buttonLink: "/ai-agents",
|
||||
image: "https://images.unsplash.com/photo-1600880292203-757bb62b4baf?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
|
||||
overlayClass: "bg-black/60" // Semi-transparent overlay for better text readability
|
||||
},
|
||||
@ -16,7 +16,7 @@ const slides = [
|
||||
title: "Design Without Coding",
|
||||
description: "Leverage our drag-and-drop builder to create custom AI solutions—no programming skills required. Your ideas, our platform, endless possibilities.",
|
||||
buttonText: "Explore the Builder",
|
||||
buttonLink: "#",
|
||||
buttonLink: "/series",
|
||||
image: "https://images.unsplash.com/photo-1531497865144-0464ef8fb9a9?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
|
||||
overlayClass: "bg-black/60"
|
||||
},
|
||||
@ -24,7 +24,7 @@ const slides = [
|
||||
title: "Unleash Your Creative Potentialr",
|
||||
description: "From forms and video editing to AI writing and newsletters, our fully integrated creative suite brings your vision to life with the power of AI.",
|
||||
buttonText: "Discover Our Tools",
|
||||
buttonLink: "#",
|
||||
buttonLink: "/tools",
|
||||
image: "https://images.unsplash.com/photo-1603201667141-5a2d4c673378?q=80&w=1796&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
|
||||
overlayClass: "bg-black/60"
|
||||
},
|
||||
@ -32,7 +32,7 @@ const slides = [
|
||||
title: "Monetize Your Skills & Services",
|
||||
description: "Build your own community or tap into our marketplace to sell AI-powered subscriptions to SMBs. Turn your expertise into a recurring revenue engine.",
|
||||
buttonText: "Learn How to Monetize",
|
||||
buttonLink: "#",
|
||||
buttonLink: "/marketplace",
|
||||
image: "https://plus.unsplash.com/premium_photo-1661338826350-49e4fd1b004e?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
|
||||
overlayClass: "bg-black/60"
|
||||
},
|
||||
@ -40,7 +40,7 @@ const slides = [
|
||||
title: "Step Into the Future of Business",
|
||||
description: "Embrace the next era of innovation. Transform, scale, and thrive with our AI-powered platform that adapts to your business needs.",
|
||||
buttonText: "Start Your Free Trial",
|
||||
buttonLink: "#",
|
||||
buttonLink: "/pricing",
|
||||
image: "https://plus.unsplash.com/premium_photo-1661425631372-6f9530fc211f?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
|
||||
overlayClass: "bg-black/60"
|
||||
}
|
||||
|
||||
@ -3,7 +3,7 @@ import { Faces } from './faces';
|
||||
|
||||
export function Newsletter() {
|
||||
return (
|
||||
<div className="flex items-center justify-center h-screen p-10 md:p-40">
|
||||
<div className="flex items-center justify-center h-screen p-10 md:p-40 mt-40">
|
||||
<div className="flex flex-col md:flex-row w-full rounded-lg overflow-hidden">
|
||||
<div className="w-full md:w-1/2">
|
||||
{/* <img
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user