added pages and updated according to doc
This commit is contained in:
codebox283
parent
8e4f57ddd0
commit
d007d404ef
310
app/ai-agents/page.tsx
Normal file
310
app/ai-agents/page.tsx
Normal file
@ -0,0 +1,310 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import React from 'react';
|
||||||
|
import { motion } from 'framer-motion';
|
||||||
|
import { MessageCircle, CheckCircle, Lightbulb, Code, Users, ArrowRight, Settings, Brain, RefreshCw, UserCheck, ChevronRight } from 'lucide-react';
|
||||||
|
import Navbar from '@/components/Navbar/navbar';
|
||||||
|
import Footer from '@/components/footer';
|
||||||
|
|
||||||
|
const ConversationalAIAgents = () => {
|
||||||
|
|
||||||
|
const keyFeatures = [
|
||||||
|
{
|
||||||
|
title: "Human-Style Chat Interface",
|
||||||
|
desc: "Experience seamless, interactive conversations that mimic real human dialogue.",
|
||||||
|
icon: <MessageCircle className="w-6 h-6 text-white" />
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Semi-Autonomous Agents",
|
||||||
|
desc: "Automate everyday processes while deferring to human judgment for complex decisions.",
|
||||||
|
icon: <Settings className="w-6 h-6 text-white" />
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Adaptive Learning & Optimization",
|
||||||
|
desc: "The agent gathers insights from each engagement, fine-tuning workflows and boosting overall efficiency.",
|
||||||
|
icon: <RefreshCw className="w-6 h-6 text-white" />
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Effortless Integration",
|
||||||
|
desc: "Convert existing Tools or Series workflows to conversational agents with just a few clicks—no coding required.",
|
||||||
|
icon: <Code className="w-6 h-6 text-white" />
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Enhanced User Engagement",
|
||||||
|
desc: "Deliver a personalized, interactive experience that increases user satisfaction and drives better outcomes.",
|
||||||
|
icon: <Users className="w-6 h-6 text-white" />
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
const benefits = [
|
||||||
|
{
|
||||||
|
title: "Streamlined Operations",
|
||||||
|
desc: "Automate routine processes without sacrificing the quality of human judgment where it matters most.",
|
||||||
|
icon: <CheckCircle className="w-6 h-6 text-white" />
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Continuous Improvement",
|
||||||
|
desc: "With adaptive learning, your agents become smarter and more efficient, optimizing workflows over time.",
|
||||||
|
icon: <Brain className="w-6 h-6 text-white" />
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Improved Accessibility",
|
||||||
|
desc: "A conversational interface makes complex workflows accessible to everyone, reducing training time and boosting productivity.",
|
||||||
|
icon: <Lightbulb className="w-6 h-6 text-white" />
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Versatile Applications",
|
||||||
|
desc: "Ideal for customer support, sales, HR, project management, and more—scale your intelligent automation across your organization.",
|
||||||
|
icon: <UserCheck className="w-6 h-6 text-white" />
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
const useCases = [
|
||||||
|
{
|
||||||
|
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" />
|
||||||
|
},
|
||||||
|
{
|
||||||
|
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" />
|
||||||
|
},
|
||||||
|
{
|
||||||
|
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" />
|
||||||
|
},
|
||||||
|
{
|
||||||
|
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" />
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="w-full p-6 bg-[#080E12] min-h-screen space-y-36">
|
||||||
|
<Navbar />
|
||||||
|
|
||||||
|
{/* Hero Section */}
|
||||||
|
<motion.section
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
className="max-w-6xl mx-auto h-screen flex flex-col justify-between relative"
|
||||||
|
>
|
||||||
|
{/* Animated Gradient Background */}
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, scale: 0.9, rotate: 0 }}
|
||||||
|
animate={{ opacity: 0.15, scale: 1.9, rotate: 8 }}
|
||||||
|
transition={{ duration: 2, repeat: Infinity, repeatType: "mirror", ease: "easeInOut" }}
|
||||||
|
className="absolute top-[-100px] right-[-50px] w-96 h-80 bg-gradient-to-br from-[#F472B6] to-[#6366F1] rounded-full opacity-30 blur-[120px] skew-y-6"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div className="max-w-6xl h-fit mt-auto pb-80 relative z-10">
|
||||||
|
<motion.h1
|
||||||
|
initial={{ opacity: 0 }}
|
||||||
|
animate={{ opacity: 1 }}
|
||||||
|
className="text-7xl text-white mb-6"
|
||||||
|
>
|
||||||
|
AI Agents
|
||||||
|
</motion.h1>
|
||||||
|
|
||||||
|
<div className="absolute bottom-0 left-1/2 transform -translate-x-1/2">
|
||||||
|
<div className="w-32 h-px bg-gradient-to-r from-transparent via-blue-500/30 to-transparent" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<motion.div className="text-4xl text-[#ffc1e1] font-medium mb-6">
|
||||||
|
<span className="bg-gradient-to-r from-[#EC4899] to-[#A855F7] text-transparent bg-clip-text">Conversational AI Agents:</span> Transform Your Workflows into Smart, Human-Centric Assistants
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
|
<motion.p
|
||||||
|
initial={{ opacity: 0 }}
|
||||||
|
animate={{ opacity: 1 }}
|
||||||
|
className="text-gray-400 text-2xl mb-8"
|
||||||
|
>
|
||||||
|
Elevate your business operations by converting any workflow—whether it’s a tool or a Series—into an intelligent, conversational AI agent. Our platform empowers you to create semi-autonomous agents that communicate in a human-like manner while keeping human decision-making in the loop.
|
||||||
|
</motion.p>
|
||||||
|
</div>
|
||||||
|
</motion.section>
|
||||||
|
|
||||||
|
{/* How It Works 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">How It Works</h2>
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||||
|
{[
|
||||||
|
{
|
||||||
|
icon: <Code className="w-6 h-6 text-white" />,
|
||||||
|
title: "Convert with a Click",
|
||||||
|
desc: "Easily transform your existing workflows into a chat-based AI agent using our intuitive interface.",
|
||||||
|
color: "from-blue-500 to-cyan-500"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: <MessageCircle className="w-6 h-6 text-white" />,
|
||||||
|
title: "Human-Like Interaction",
|
||||||
|
desc: "The agent engages users through a conversational interface, guiding them through tasks and processes in a natural, friendly manner.",
|
||||||
|
color: "from-pink-500 to-red-500"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: <Settings className="w-6 h-6 text-white" />,
|
||||||
|
title: "Semi-Autonomous Operation",
|
||||||
|
desc: "Routine tasks are automated, while critical decision points trigger human intervention—ensuring that key decisions always benefit from human insight.",
|
||||||
|
color: "from-green-500 to-emerald-500"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: <RefreshCw className="w-6 h-6 text-white" />,
|
||||||
|
title: "Adaptive Learning",
|
||||||
|
desc: "The system learns from every interaction, refining its processes and becoming more efficient over time through continuous feedback.",
|
||||||
|
color: "from-purple-500 to-indigo-500"
|
||||||
|
}
|
||||||
|
].map((item, index) => (
|
||||||
|
<div
|
||||||
|
key={index}
|
||||||
|
className="relative group bg-[#121212] border border-gray-800 rounded-xl p-6 transition-all duration-500 overflow-hidden"
|
||||||
|
>
|
||||||
|
{/* Icon & Title */}
|
||||||
|
<div className="flex items-center gap-4 mb-2">
|
||||||
|
<div className="p-3 bg-gray-900 rounded-lg">{item.icon}</div>
|
||||||
|
<h3 className="text-xl text-white font-medium">{item.title}</h3>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Description */}
|
||||||
|
<p className="text-gray-400">{item.desc}</p>
|
||||||
|
|
||||||
|
{/* Soft Glow Effect */}
|
||||||
|
<div
|
||||||
|
className={`absolute inset-0 rounded-xl bg-gradient-to-br ${item.color} opacity-0 blur-3xl scale-125 transition-opacity duration-500 group-hover:opacity-20`}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</motion.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">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 flex items-start gap-8"
|
||||||
|
>
|
||||||
|
<div className="p-4 bg-gray-900 rounded-lg flex items-center justify-center">
|
||||||
|
{feature.icon}
|
||||||
|
</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 */}
|
||||||
|
<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"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</motion.section>
|
||||||
|
|
||||||
|
{/* Benefits 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">Benefits</h2>
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||||
|
{benefits.map((benefit, index) => (
|
||||||
|
<div
|
||||||
|
key={index}
|
||||||
|
className="relative group bg-[#121212] border border-gray-800 rounded-xl p-6 transition-all duration-500 overflow-hidden"
|
||||||
|
>
|
||||||
|
<div className="flex items-center gap-4 mb-2">
|
||||||
|
<div className="p-3 bg-gray-900 rounded-lg">{benefit.icon}</div>
|
||||||
|
<h3 className="text-xl text-white font-medium">{benefit.title}</h3>
|
||||||
|
</div>
|
||||||
|
<p className="text-gray-400">{benefit.desc}</p>
|
||||||
|
|
||||||
|
{/* Soft Glow Effect */}
|
||||||
|
<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"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</motion.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">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"
|
||||||
|
>
|
||||||
|
<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>
|
||||||
|
<p className="text-gray-400">{useCase.desc}</p>
|
||||||
|
|
||||||
|
{/* Soft Glow Effect with Different Colors */}
|
||||||
|
<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"
|
||||||
|
}`}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</motion.section>
|
||||||
|
|
||||||
|
{/* Get Started Section */}
|
||||||
|
<motion.section
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
className="max-w-6xl mx-auto py-20 text-center"
|
||||||
|
>
|
||||||
|
<h2 className="text-4xl text-white mb-8">Get Started</h2>
|
||||||
|
<p className="text-gray-400 text-xl mb-8">Transform your workflows into intelligent, human-centric AI agents today. Experience the perfect blend of automation and human engagement that evolves with your business needs.</p>
|
||||||
|
<div className="flex justify-center gap-6">
|
||||||
|
<motion.button
|
||||||
|
whileHover={{ scale: 1.05 }}
|
||||||
|
whileTap={{ scale: 0.98 }}
|
||||||
|
className="relative px-8 py-4 rounded-lg text-white font-medium inline-flex items-center gap-2
|
||||||
|
bg-gradient-to-r from-purple-500 via-purple-700 to-indigo-500 shadow-lg transition-all duration-500"
|
||||||
|
>
|
||||||
|
Convert Your Workflow <ChevronRight className="w-4 h-4" /></motion.button>
|
||||||
|
<motion.button
|
||||||
|
whileHover={{ scale: 1.05 }}
|
||||||
|
whileTap={{ scale: 0.98 }}
|
||||||
|
className="relative px-8 py-4 rounded-lg text-white font-medium inline-flex items-center gap-2
|
||||||
|
bg-gradient-to-r from-purple-500 via-purple-700 to-indigo-500 shadow-lg transition-all duration-500"
|
||||||
|
>
|
||||||
|
Learn More <ChevronRight className="w-4 h-4" /></motion.button>
|
||||||
|
</div>
|
||||||
|
</motion.section>
|
||||||
|
|
||||||
|
<Footer />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ConversationalAIAgents;
|
||||||
@ -1,337 +0,0 @@
|
|||||||
"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 = "Integrations - Connect Your Workflows with Everyday Integrations";
|
|
||||||
const description = "Seamlessly unite all your tools and applications with Everyday. Our robust integration capabilities empower you to create an interconnected ecosystem, streamlining your workflows and improving productivity.";
|
|
||||||
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: "Centralize Your Data",
|
|
||||||
description:
|
|
||||||
"No more switching between apps. Gather all your data in one place, simplifying your processes and ensuring you have a single, reliable source of truth.",
|
|
||||||
link: "https://stripe.com",
|
|
||||||
icon: FaListUl, // Add icon here
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Automate Your Processes",
|
|
||||||
description:
|
|
||||||
"Maximize efficiency by automating actions between your integrated apps. Transfer data, trigger actions, and manage notifications effortlessly, allowing you to focus on what matters most.",
|
|
||||||
link: "https://netflix.com",
|
|
||||||
icon: FaSearch, // Add icon here
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Improve Collaboration",
|
|
||||||
description:
|
|
||||||
"By integrating your favorite communication tools, you can enhance teamwork and foster a more collaborative environment. Share updates, delegate tasks, and keep everyone in the loop, all within Everyday.",
|
|
||||||
link: "https://enterprise.everydayseries.com/",
|
|
||||||
icon: FaArrowsAlt, // Add icon here
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
type Feature = {
|
|
||||||
title: string;
|
|
||||||
description: string;
|
|
||||||
imgSrc: string;
|
|
||||||
vector: string;
|
|
||||||
};
|
|
||||||
|
|
||||||
const featuresData: Feature[] = [
|
|
||||||
{
|
|
||||||
title: "Feature 1",
|
|
||||||
description: "Description for Feature 1",
|
|
||||||
imgSrc: "/images/feature1.png",
|
|
||||||
vector: "/vectors/feature1.svg", // Added vector property
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Feature 2",
|
|
||||||
description: "Description for Feature 2",
|
|
||||||
imgSrc: "/images/feature2.png",
|
|
||||||
vector: "/vectors/feature2.svg", // Added vector property
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Feature 3",
|
|
||||||
description: "Description for Feature 3",
|
|
||||||
imgSrc: "/images/feature3.png",
|
|
||||||
vector: "/vectors/feature3.svg", // Added vector property
|
|
||||||
},
|
|
||||||
]
|
|
||||||
|
|
||||||
const words = `“Need more? Our integration capabilities are constantly expanding, with new additions regularly introduced to our platform.”`
|
|
||||||
|
|
||||||
export default function Integrations() {
|
|
||||||
return (
|
|
||||||
<div className="p-6 bg-[#080E12] dark text-white">
|
|
||||||
<Navbar />
|
|
||||||
<Hero />
|
|
||||||
<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='flex w-full my-40'>
|
|
||||||
<div className="relative flex h-[550px] w-1/2 flex-col items-center justify-center overflow-hidden">
|
|
||||||
<OrbitingCircles iconSize={50} radius={240}>
|
|
||||||
<Icons.whatsapp />
|
|
||||||
<Icons.notion />
|
|
||||||
<Icons.openai />
|
|
||||||
<Icons.googleDrive />
|
|
||||||
<Icons.whatsapp />
|
|
||||||
</OrbitingCircles>
|
|
||||||
<OrbitingCircles iconSize={40} radius={160} reverse speed={2}>
|
|
||||||
<Icons.whatsapp />
|
|
||||||
<Icons.notion />
|
|
||||||
<Icons.openai />
|
|
||||||
<Icons.googleDrive />
|
|
||||||
</OrbitingCircles>
|
|
||||||
</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>
|
|
||||||
<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 my-20">
|
|
||||||
<HoverEffect items={contents} />
|
|
||||||
</div>
|
|
||||||
<Features/>
|
|
||||||
|
|
||||||
<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>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
const Icons = {
|
|
||||||
gitHub: () => (
|
|
||||||
<svg width="100" height="100" viewBox="0 0 438.549 438.549">
|
|
||||||
<path
|
|
||||||
fill="currentColor"
|
|
||||||
d="M409.132 114.573c-19.608-33.596-46.205-60.194-79.798-79.8-33.598-19.607-70.277-29.408-110.063-29.408-39.781 0-76.472 9.804-110.063 29.408-33.596 19.605-60.192 46.204-79.8 79.8C9.803 148.168 0 184.854 0 224.63c0 47.78 13.94 90.745 41.827 128.906 27.884 38.164 63.906 64.572 108.063 79.227 5.14.954 8.945.283 11.419-1.996 2.475-2.282 3.711-5.14 3.711-8.562 0-.571-.049-5.708-.144-15.417a2549.81 2549.81 0 01-.144-25.406l-6.567 1.136c-4.187.767-9.469 1.092-15.846 1-6.374-.089-12.991-.757-19.842-1.999-6.854-1.231-13.229-4.086-19.13-8.559-5.898-4.473-10.085-10.328-12.56-17.556l-2.855-6.57c-1.903-4.374-4.899-9.233-8.992-14.559-4.093-5.331-8.232-8.945-12.419-10.848l-1.999-1.431c-1.332-.951-2.568-2.098-3.711-3.429-1.142-1.331-1.997-2.663-2.568-3.997-.572-1.335-.098-2.43 1.427-3.289 1.525-.859 4.281-1.276 8.28-1.276l5.708.853c3.807.763 8.516 3.042 14.133 6.851 5.614 3.806 10.229 8.754 13.846 14.842 4.38 7.806 9.657 13.754 15.846 17.847 6.184 4.093 12.419 6.136 18.699 6.136 6.28 0 11.704-.476 16.274-1.423 4.565-.952 8.848-2.383 12.847-4.285 1.713-12.758 6.377-22.559 13.988-29.41-10.848-1.14-20.601-2.857-29.264-5.14-8.658-2.286-17.605-5.996-26.835-11.14-9.235-5.137-16.896-11.516-22.985-19.126-6.09-7.614-11.088-17.61-14.987-29.979-3.901-12.374-5.852-26.648-5.852-42.826 0-23.035 7.52-42.637 22.557-58.817-7.044-17.318-6.379-36.732 1.997-58.24 5.52-1.715 13.706-.428 24.554 3.853 10.85 4.283 18.794 7.952 23.84 10.994 5.046 3.041 9.089 5.618 12.135 7.708 17.705-4.947 35.976-7.421 54.818-7.421s37.117 2.474 54.823 7.421l10.849-6.849c7.419-4.57 16.18-8.758 26.262-12.565 10.088-3.805 17.802-4.853 23.134-3.138 8.562 21.509 9.325 40.922 2.279 58.24 15.036 16.18 22.559 35.787 22.559 58.817 0 16.178-1.958 30.497-5.853 42.966-3.9 12.471-8.941 22.457-15.125 29.979-6.191 7.521-13.901 13.85-23.131 18.986-9.232 5.14-18.182 8.85-26.84 11.136-8.662 2.286-18.415 4.004-29.263 5.146 9.894 8.562 14.842 22.077 14.842 40.539v60.237c0 3.422 1.19 6.279 3.572 8.562 2.379 2.279 6.136 2.95 11.276 1.995 44.163-14.653 80.185-41.062 108.068-79.226 27.88-38.161 41.825-81.126 41.825-128.906-.01-39.771-9.818-76.454-29.414-110.049z"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
),
|
|
||||||
notion: () => (
|
|
||||||
<svg
|
|
||||||
width="100"
|
|
||||||
height="100"
|
|
||||||
viewBox="0 0 100 100"
|
|
||||||
fill="none"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
d="M6.017 4.313l55.333 -4.087c6.797 -0.583 8.543 -0.19 12.817 2.917l17.663 12.443c2.913 2.14 3.883 2.723 3.883 5.053v68.243c0 4.277 -1.553 6.807 -6.99 7.193L24.467 99.967c-4.08 0.193 -6.023 -0.39 -8.16 -3.113L3.3 79.94c-2.333 -3.113 -3.3 -5.443 -3.3 -8.167V11.113c0 -3.497 1.553 -6.413 6.017 -6.8z"
|
|
||||||
fill="#ffffff"
|
|
||||||
/>
|
|
||||||
<path
|
|
||||||
d="M61.35 0.227l-55.333 4.087C1.553 4.7 0 7.617 0 11.113v60.66c0 2.723 0.967 5.053 3.3 8.167l13.007 16.913c2.137 2.723 4.08 3.307 8.16 3.113l64.257 -3.89c5.433 -0.387 6.99 -2.917 6.99 -7.193V20.64c0 -2.21 -0.873 -2.847 -3.443 -4.733L74.167 3.143c-4.273 -3.107 -6.02 -3.5 -12.817 -2.917zM25.92 19.523c-5.247 0.353 -6.437 0.433 -9.417 -1.99L8.927 11.507c-0.77 -0.78 -0.383 -1.753 1.557 -1.947l53.193 -3.887c4.467 -0.39 6.793 1.167 8.54 2.527l9.123 6.61c0.39 0.197 1.36 1.36 0.193 1.36l-54.933 3.307 -0.68 0.047zM19.803 88.3V30.367c0 -2.53 0.777 -3.697 3.103 -3.893L86 22.78c2.14 -0.193 3.107 1.167 3.107 3.693v57.547c0 2.53 -0.39 4.67 -3.883 4.863l-60.377 3.5c-3.493 0.193 -5.043 -0.97 -5.043 -4.083zm59.6 -54.827c0.387 1.75 0 3.5 -1.75 3.7l-2.91 0.577v42.773c-2.527 1.36 -4.853 2.137 -6.797 2.137 -3.107 0 -3.883 -0.973 -6.21 -3.887l-19.03 -29.94v28.967l6.02 1.363s0 3.5 -4.857 3.5l-13.39 0.777c-0.39 -0.78 0 -2.723 1.357 -3.11l3.497 -0.97v-38.3L30.48 40.667c-0.39 -1.75 0.58 -4.277 3.3 -4.473l14.367 -0.967 19.8 30.327v-26.83l-5.047 -0.58c-0.39 -2.143 1.163 -3.7 3.103 -3.89l13.4 -0.78z"
|
|
||||||
fill="#000000"
|
|
||||||
fillRule="evenodd"
|
|
||||||
clipRule="evenodd"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
),
|
|
||||||
openai: () => (
|
|
||||||
<svg
|
|
||||||
width="100"
|
|
||||||
height="100"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
className="fill-black dark:fill-white"
|
|
||||||
>
|
|
||||||
<path d="M22.2819 9.8211a5.9847 5.9847 0 0 0-.5157-4.9108 6.0462 6.0462 0 0 0-6.5098-2.9A6.0651 6.0651 0 0 0 4.9807 4.1818a5.9847 5.9847 0 0 0-3.9977 2.9 6.0462 6.0462 0 0 0 .7427 7.0966 5.98 5.98 0 0 0 .511 4.9107 6.051 6.051 0 0 0 6.5146 2.9001A5.9847 5.9847 0 0 0 13.2599 24a6.0557 6.0557 0 0 0 5.7718-4.2058 5.9894 5.9894 0 0 0 3.9977-2.9001 6.0557 6.0557 0 0 0-.7475-7.0729zm-9.022 12.6081a4.4755 4.4755 0 0 1-2.8764-1.0408l.1419-.0804 4.7783-2.7582a.7948.7948 0 0 0 .3927-.6813v-6.7369l2.02 1.1686a.071.071 0 0 1 .038.052v5.5826a4.504 4.504 0 0 1-4.4945 4.4944zm-9.6607-4.1254a4.4708 4.4708 0 0 1-.5346-3.0137l.142.0852 4.783 2.7582a.7712.7712 0 0 0 .7806 0l5.8428-3.3685v2.3324a.0804.0804 0 0 1-.0332.0615L9.74 19.9502a4.4992 4.4992 0 0 1-6.1408-1.6464zM2.3408 7.8956a4.485 4.485 0 0 1 2.3655-1.9728V11.6a.7664.7664 0 0 0 .3879.6765l5.8144 3.3543-2.0201 1.1685a.0757.0757 0 0 1-.071 0l-4.8303-2.7865A4.504 4.504 0 0 1 2.3408 7.872zm16.5963 3.8558L13.1038 8.364 15.1192 7.2a.0757.0757 0 0 1 .071 0l4.8303 2.7913a4.4944 4.4944 0 0 1-.6765 8.1042v-5.6772a.79.79 0 0 0-.407-.667zm2.0107-3.0231l-.142-.0852-4.7735-2.7818a.7759.7759 0 0 0-.7854 0L9.409 9.2297V6.8974a.0662.0662 0 0 1 .0284-.0615l4.8303-2.7866a4.4992 4.4992 0 0 1 6.6802 4.66zM8.3065 12.863l-2.02-1.1638a.0804.0804 0 0 1-.038-.0567V6.0742a4.4992 4.4992 0 0 1 7.3757-3.4537l-.142.0805L8.704 5.459a.7948.7948 0 0 0-.3927.6813zm1.0976-2.3654l2.602-1.4998 2.6069 1.4998v2.9994l-2.5974 1.4997-2.6067-1.4997Z" />
|
|
||||||
</svg>
|
|
||||||
),
|
|
||||||
googleDrive: () => (
|
|
||||||
<svg
|
|
||||||
width="100"
|
|
||||||
height="100"
|
|
||||||
viewBox="0 0 87.3 78"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
d="m6.6 66.85 3.85 6.65c.8 1.4 1.95 2.5 3.3 3.3l13.75-23.8h-27.5c0 1.55.4 3.1 1.2 4.5z"
|
|
||||||
fill="#0066da"
|
|
||||||
/>
|
|
||||||
<path
|
|
||||||
d="m43.65 25-13.75-23.8c-1.35.8-2.5 1.9-3.3 3.3l-25.4 44a9.06 9.06 0 0 0 -1.2 4.5h27.5z"
|
|
||||||
fill="#00ac47"
|
|
||||||
/>
|
|
||||||
<path
|
|
||||||
d="m73.55 76.8c1.35-.8 2.5-1.9 3.3-3.3l1.6-2.75 7.65-13.25c.8-1.4 1.2-2.95 1.2-4.5h-27.502l5.852 11.5z"
|
|
||||||
fill="#ea4335"
|
|
||||||
/>
|
|
||||||
<path
|
|
||||||
d="m43.65 25 13.75-23.8c-1.35-.8-2.9-1.2-4.5-1.2h-18.5c-1.6 0-3.15.45-4.5 1.2z"
|
|
||||||
fill="#00832d"
|
|
||||||
/>
|
|
||||||
<path
|
|
||||||
d="m59.8 53h-32.3l-13.75 23.8c1.35.8 2.9 1.2 4.5 1.2h50.8c1.6 0 3.15-.45 4.5-1.2z"
|
|
||||||
fill="#2684fc"
|
|
||||||
/>
|
|
||||||
<path
|
|
||||||
d="m73.4 26.5-12.7-22c-.8-1.4-1.95-2.5-3.3-3.3l-13.75 23.8 16.15 28h27.45c0-1.55-.4-3.1-1.2-4.5z"
|
|
||||||
fill="#ffba00"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
),
|
|
||||||
whatsapp: () => (
|
|
||||||
<svg
|
|
||||||
width="100"
|
|
||||||
height="100"
|
|
||||||
viewBox="0 0 175.216 175.552"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
>
|
|
||||||
<defs>
|
|
||||||
<linearGradient
|
|
||||||
id="b"
|
|
||||||
x1="85.915"
|
|
||||||
x2="86.535"
|
|
||||||
y1="32.567"
|
|
||||||
y2="137.092"
|
|
||||||
gradientUnits="userSpaceOnUse"
|
|
||||||
>
|
|
||||||
<stop offset="0" stopColor="#57d163" />
|
|
||||||
<stop offset="1" stopColor="#23b33a" />
|
|
||||||
</linearGradient>
|
|
||||||
<filter
|
|
||||||
id="a"
|
|
||||||
width="1.115"
|
|
||||||
height="1.114"
|
|
||||||
x="-.057"
|
|
||||||
y="-.057"
|
|
||||||
colorInterpolationFilters="sRGB"
|
|
||||||
>
|
|
||||||
<feGaussianBlur stdDeviation="3.531" />
|
|
||||||
</filter>
|
|
||||||
</defs>
|
|
||||||
<path
|
|
||||||
d="m54.532 138.45 2.235 1.324c9.387 5.571 20.15 8.518 31.126 8.523h.023c33.707 0 61.139-27.426 61.153-61.135.006-16.335-6.349-31.696-17.895-43.251A60.75 60.75 0 0 0 87.94 25.983c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 9.349 32.535l1.455 2.312-6.179 22.558zm-40.811 23.544L24.16 123.88c-6.438-11.154-9.825-23.808-9.821-36.772.017-40.556 33.021-73.55 73.578-73.55 19.681.01 38.154 7.669 52.047 21.572s21.537 32.383 21.53 52.037c-.018 40.553-33.027 73.553-73.578 73.553h-.032c-12.313-.005-24.412-3.094-35.159-8.954zm0 0"
|
|
||||||
fill="#b3b3b3"
|
|
||||||
filter="url(#a)"
|
|
||||||
/>
|
|
||||||
<path
|
|
||||||
d="m12.966 161.238 10.439-38.114a73.42 73.42 0 0 1-9.821-36.772c.017-40.556 33.021-73.55 73.578-73.55 19.681.01 38.154 7.669 52.047 21.572s21.537 32.383 21.53 52.037c-.018 40.553-33.027 73.553-73.578 73.553h-.032c-12.313-.005-24.412-3.094-35.159-8.954z"
|
|
||||||
fill="#ffffff"
|
|
||||||
/>
|
|
||||||
<path
|
|
||||||
d="M87.184 25.227c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 9.349 32.535l1.455 2.312-6.179 22.559 23.146-6.069 2.235 1.324c9.387 5.571 20.15 8.518 31.126 8.524h.023c33.707 0 61.14-27.426 61.153-61.135a60.75 60.75 0 0 0-17.895-43.251 60.75 60.75 0 0 0-43.235-17.929z"
|
|
||||||
fill="url(#linearGradient1780)"
|
|
||||||
/>
|
|
||||||
<path
|
|
||||||
d="M87.184 25.227c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 9.349 32.535l1.455 2.313-6.179 22.558 23.146-6.069 2.235 1.324c9.387 5.571 20.15 8.517 31.126 8.523h.023c33.707 0 61.14-27.426 61.153-61.135a60.75 60.75 0 0 0-17.895-43.251 60.75 60.75 0 0 0-43.235-17.928z"
|
|
||||||
fill="url(#b)"
|
|
||||||
/>
|
|
||||||
<path
|
|
||||||
d="M68.772 55.603c-1.378-3.061-2.828-3.123-4.137-3.176l-3.524-.043c-1.226 0-3.218.46-4.902 2.3s-6.435 6.287-6.435 15.332 6.588 17.785 7.506 19.013 12.718 20.381 31.405 27.75c15.529 6.124 18.689 4.906 22.061 4.6s10.877-4.447 12.408-8.74 1.532-7.971 1.073-8.74-1.685-1.226-3.525-2.146-10.877-5.367-12.562-5.981-2.91-.919-4.137.921-4.746 5.979-5.819 7.206-2.144 1.381-3.984.462-7.76-2.861-14.784-9.124c-5.465-4.873-9.154-10.891-10.228-12.73s-.114-2.835.808-3.751c.825-.824 1.838-2.147 2.759-3.22s1.224-1.84 1.836-3.065.307-2.301-.153-3.22-4.032-10.011-5.666-13.647"
|
|
||||||
fill="#ffffff"
|
|
||||||
fillRule="evenodd"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
),
|
|
||||||
};
|
|
||||||
368
app/finance/page.tsx
Normal file
368
app/finance/page.tsx
Normal file
@ -0,0 +1,368 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
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, FaMoneyBill } from 'react-icons/fa'; //Added FaMoneyBill
|
||||||
|
import { OrbitingCircles } from '@/components/magicui/orbiting-circles';
|
||||||
|
|
||||||
|
const heading = "Innovative Finance Teams Drive Transformation with Everyday"; // Changed Heading
|
||||||
|
const description = "Collect the data you need for planning and reporting, manage budgets and expenses, and optimize your workflows."; // Changed Description
|
||||||
|
|
||||||
|
const features = [
|
||||||
|
{
|
||||||
|
head: "Centralize Financial Data for Planning & Reporting", //Changed head
|
||||||
|
desc: "Gather all necessary data in one platform to streamline financial planning and generate accurate reports.", //Changed desc
|
||||||
|
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: <FaDatabase className="text-sky-400 text-2xl" /> // Changed Icon
|
||||||
|
},
|
||||||
|
{
|
||||||
|
head: "Manage Budgets and Expenses Efficiently", // Changed head
|
||||||
|
desc: "Monitor expenses and budgets in real-time. Effortlessly create and share reports with your team.", // Changed desc
|
||||||
|
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: <FaMoneyBill className="text-purple-400 text-2xl" /> // Changed Icon
|
||||||
|
},
|
||||||
|
{
|
||||||
|
head: "Automate Financial Reporting Processes", // Changed head
|
||||||
|
desc: "Speed up repetitive tasks by creating automated workflows for closing books and payment notifications.", // Changed desc
|
||||||
|
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: <FaCog className="text-amber-400 text-2xl" /> // Changed Icon
|
||||||
|
},
|
||||||
|
{
|
||||||
|
head: "Gain Real-time Insights with Custom Reports", // Changed head
|
||||||
|
desc: "Build custom reports to monitor budget spend, purchase approvals, and other key financial metrics.", // Changed desc
|
||||||
|
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: "Simplify Financial Workflows and Processes", // Changed head
|
||||||
|
desc: "Organize cross-functional requests, data, and information in one platform to understand your company’s financial needs and plan for the future.", // Changed desc
|
||||||
|
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: <FaListUl className="text-rose-400 text-2xl" /> // Changed Icon
|
||||||
|
},
|
||||||
|
{
|
||||||
|
head: "Ensure Compliance and Accuracy", // Changed head
|
||||||
|
desc: "Maintain accurate financial records and streamline compliance processes with a centralized system.", // Changed desc
|
||||||
|
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" />
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
const whyEveryday = [
|
||||||
|
{
|
||||||
|
title: "Perfect Fit for Finance Teams", // Changed title
|
||||||
|
description: "Everyday streamlines financial roadmaps, budget tracking, and expense management, keeping them perfectly aligned. With the right data at their fingertips, teams can concentrate on delivering exceptional financial results, quicker.", // Changed Description
|
||||||
|
icon: <FaUsers className="text-4xl text-indigo-400" />
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Monitor Expenses and Budgets in Real-Time", // Changed title
|
||||||
|
description: "An executive dashboard allows you to delve into Key Results. Monitor health, status, and related information like objectives or projects.", // Changed Description
|
||||||
|
icon: <FaTasks className="text-4xl text-blue-400" />
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Accelerate Financial Reporting", // Changed title
|
||||||
|
description: "Create, manage, and deliver a sales roadmap that energizes your entire organization, yet is adaptable enough to adjust to unforeseen circumstances.", // Changed Description
|
||||||
|
icon: <FaRocket className="text-4xl text-green-400" />
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Connect Your Work Across Different Sources", // Changed title
|
||||||
|
description: "Synchronize around a flexible, organization-wide roadmap. Customizable views allow every department to see their role, and plan accordingly.", // Changed Description
|
||||||
|
icon: <FaRegFileAlt className="text-4xl text-amber-400" />
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
const detailedFeatures = [
|
||||||
|
{
|
||||||
|
title: "Real-Time Financial Reporting", // Changed title
|
||||||
|
description: "Built-in reporting swiftly uncovers key insights and best practices, expediting action and elevating your processes.", // Changed Description
|
||||||
|
subFeature: "Consolidate All Essential Data in One Place Integrate your crucial tools to bring more context into the sales process.", // Changed subFeature
|
||||||
|
icon: <FaChartLine className="text-4xl text-sky-400" />
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Efficient Expense Management", // Changed title
|
||||||
|
description: "Draw together product insights by consolidating all feedback—from every tool and source—into a single, accessible location.", // Changed Description
|
||||||
|
subFeature: "Ensure launches stay on course with comprehensive tracking and management.", // Changed subFeature
|
||||||
|
icon: <FaCalendarAlt className="text-4xl text-purple-400" />
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Centralize Financial Data", // Changed title
|
||||||
|
description: "Accumulating your customers' insights in one platform ensures you're steering development in the right direction.", // Changed Description
|
||||||
|
subFeature: "Develop a feedback repository from every tool and source into a single, accessible location.", // Changed subFeature
|
||||||
|
icon: <FaDatabase className="text-4xl text-rose-400" />
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Automate Financial Workflows", // Changed title
|
||||||
|
description: "Plan and Prioritize as a Team. Stay on track with every initiative while maintaining a detailed view into OKRs.", // Changed Description
|
||||||
|
subFeature: "Interconnect across all teams with comprehensive data visualization tools.", // Changed subFeature
|
||||||
|
icon: <FaLightbulb className="text-4xl text-amber-400" />
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
const words = `"Experience true versatility for finance teams. Everyday seamlessly integrates your financial roadmaps, budget tracking, and target schedules, keeping them perfectly aligned."`; // Changed Testimonial
|
||||||
|
|
||||||
|
export default function FinanceHub() { // Changed function name
|
||||||
|
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">
|
||||||
|
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
|
||||||
|
</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>
|
||||||
|
... {/* 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">
|
||||||
|
Connect Your Finance Tools
|
||||||
|
</h2>
|
||||||
|
<p className="text-lg md:text-xl text-gray-300">
|
||||||
|
With Everyday, you can easily connect and synchronize data from your accounting software, banking platforms, expense management tools, and more, creating a comprehensive and efficient workflow tailored to your finance 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 */}
|
||||||
|
<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 Finance Teams
|
||||||
|
</h2>
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-10">
|
||||||
|
{whyEveryday.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>
|
||||||
|
<p className="text-gray-300">{item.description}</p>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Features Grid */}
|
||||||
|
<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>
|
||||||
|
<p className="text-xl text-gray-300 text-center mb-16 max-w-3xl mx-auto">
|
||||||
|
Everything you need to optimize your financial workflows in one powerful platform
|
||||||
|
</p>
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||||
|
{features.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`}>
|
||||||
|
{feature.button}
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</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 */}
|
||||||
|
<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 Finance 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>
|
||||||
|
|
||||||
|
{/* Use Cases Section - Replacing Marketplace */}
|
||||||
|
<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">
|
||||||
|
Manage Your Crucial Finance Workflows
|
||||||
|
</h2>
|
||||||
|
<p className="text-xl text-gray-300 text-center mb-16 max-w-3xl mx-auto">
|
||||||
|
Whether you’re managing budgets or invoicing, you can do it in Everyday. Get started with pre-made templates, and customize them to fit your specific needs.
|
||||||
|
</p>
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||||
|
{/* Example Use Cases - Adapt Icons and Descriptions Accordingly */}
|
||||||
|
<div 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">
|
||||||
|
<FaMoneyBill className="text-2xl text-green-400 mb-4" />
|
||||||
|
<h3 className="text-2xl mb-4">Fundraising</h3>
|
||||||
|
<p className="text-gray-300 mb-6">Track and manage fundraising efforts, investor relations, and financial projections.</p>
|
||||||
|
<a href="#" className="inline-block px-6 py-2 rounded-md bg-emerald-200 text-gray-100 font-medium hover:opacity-90 transition-opacity">
|
||||||
|
Explore
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div 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">
|
||||||
|
<FaChartLine className="text-2xl text-blue-400 mb-4" />
|
||||||
|
<h3 className="text-2xl mb-4">Budget Tracker</h3>
|
||||||
|
<p className="text-gray-300 mb-6">Monitor budget spend, track expenses, and generate reports to stay within financial goals.</p>
|
||||||
|
<a href="#" className="inline-block px-6 py-2 rounded-md bg-sky-200 text-gray-100 font-medium hover:opacity-90 transition-opacity">
|
||||||
|
Explore
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div 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">
|
||||||
|
<FaCalendarAlt className="text-2xl text-amber-400 mb-4" />
|
||||||
|
<h3 className="text-2xl mb-4">Invoicing</h3>
|
||||||
|
<p className="text-gray-300 mb-6">Automate invoicing processes, track payments, and manage client billing efficiently.</p>
|
||||||
|
<a href="#" className="inline-block px-6 py-2 rounded-md bg-amber-200 text-gray-100 font-medium hover:opacity-90 transition-opacity">
|
||||||
|
Explore
|
||||||
|
</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 Financial Workflow?
|
||||||
|
</h2>
|
||||||
|
<p className="text-xl text-gray-300 mb-10">
|
||||||
|
Join thousands of finance 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">
|
||||||
|
Explore Free Trial
|
||||||
|
</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>
|
||||||
|
),
|
||||||
|
};
|
||||||
392
app/genai-readiness/page.tsx
Normal file
392
app/genai-readiness/page.tsx
Normal file
@ -0,0 +1,392 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import React from 'react';
|
||||||
|
import { motion } from 'framer-motion';
|
||||||
|
import { Brain, Users, Rocket, Globe, MapPin, ChevronRight, Book, Star, Target, Bot, ArrowRight, HeartPulse, LineChart, GraduationCap, Plane, Megaphone, Lightbulb, Code, UsersRound } from 'lucide-react';
|
||||||
|
import Navbar from '@/components/Navbar/navbar';
|
||||||
|
import Footer from '@/components/footer';
|
||||||
|
|
||||||
|
const AIProgramCard = () => {
|
||||||
|
const learn = [
|
||||||
|
{
|
||||||
|
icon: <Brain />,
|
||||||
|
title: "Dive Deep into AI Fundamentals",
|
||||||
|
desc: "Learn cutting-edge AI concepts and how to implement them using our no-code platform.",
|
||||||
|
gradient: "from-pink-500/50 to-purple-500/50"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: <Rocket />,
|
||||||
|
title: "Build Real-World AI Agents",
|
||||||
|
desc: "Gain practical, project-based experience by creating and deploying your own AI solutions.",
|
||||||
|
gradient: "from-blue-500/50 to-cyan-500/50"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: <Target />,
|
||||||
|
title: "Monetize Your Expertise",
|
||||||
|
desc: "Master strategies to transform your AI agents into recurring revenue streams.",
|
||||||
|
gradient: "from-purple-500/50 to-indigo-500/50"
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="w-full p-6 bg-[#080E12] min-h-screen space-y-36">
|
||||||
|
<Navbar />
|
||||||
|
{/* Hero */}
|
||||||
|
<motion.section
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
className="max-w-6xl mx-auto h-screen flex flex-col justify-between relative"
|
||||||
|
>
|
||||||
|
{/* Circular Animated Gradient */}
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, scale: 0.9, rotate: 0 }}
|
||||||
|
animate={{ opacity: 0.15, scale: 1.9, rotate: 8 }}
|
||||||
|
transition={{ duration: 2, repeat: Infinity, repeatType: "mirror", ease: "easeInOut" }}
|
||||||
|
className="absolute top-[-100px] right-[-50px] w-96 h-80 bg-gradient-to-br from-[#EC4899] to-[#A855F7] rounded-full opacity-30 blur-[120px] skew-y-6"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div className="max-w-6xl h-fit mt-auto pb-80 relative z-10">
|
||||||
|
<motion.h1
|
||||||
|
initial={{ opacity: 0 }}
|
||||||
|
animate={{ opacity: 1 }}
|
||||||
|
className="text-7xl text-white mb-6"
|
||||||
|
>
|
||||||
|
Generative AI
|
||||||
|
<span className="bg-gradient-to-r from-[#EC4899] to-[#A855F7] text-transparent bg-clip-text">
|
||||||
|
{" "}Readiness{" "}
|
||||||
|
</span>
|
||||||
|
Program
|
||||||
|
</motion.h1>
|
||||||
|
|
||||||
|
<div className="absolute bottom-0 left-1/2 transform -translate-x-1/2">
|
||||||
|
<div className="w-32 h-px bg-gradient-to-r from-transparent via-purple-500/30 to-transparent" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<motion.div className="text-4xl text-[#A855F7] font-medium mb-6">
|
||||||
|
Master the Art of Building AI Agents
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
|
<motion.p
|
||||||
|
initial={{ opacity: 0 }}
|
||||||
|
animate={{ opacity: 1 }}
|
||||||
|
className="text-gray-400 text-2xl mb-8"
|
||||||
|
>
|
||||||
|
Are you ready to redefine your business potential with AI? Our Generative AI Readiness Program is a highly selective, intensive cohort designed to transform driven solopreneurs into AI innovators. Through a rigorous learning journey, you'll acquire the hands-on skills needed to build, launch, and monetize your very own AI agents—regardless of your domain.
|
||||||
|
</motion.p>
|
||||||
|
</div>
|
||||||
|
</motion.section>
|
||||||
|
|
||||||
|
{/* What Is the Program */}
|
||||||
|
<motion.section
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
className=' max-w-6xl mx-auto'
|
||||||
|
>
|
||||||
|
<h2 className="text-5xl text-white mb-8">What Is the Generative AI Readiness Program?</h2>
|
||||||
|
<p className="text-gray-400 mb-8">
|
||||||
|
This elite program is tailored for visionary solopreneurs eager to leverage AI to transform their services. Over the course of the program, you'll:
|
||||||
|
</p>
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-7xl mx-auto">
|
||||||
|
{learn.map((feature, index) => (
|
||||||
|
<div key={index} className="group relative overflow-hidden rounded-2xl">
|
||||||
|
{/* Card Content */}
|
||||||
|
<div className="relative p-8 rounded-2xl border border-purple-500/10 bg-[#121212] transition-all duration-500">
|
||||||
|
{/* Icon */}
|
||||||
|
<div
|
||||||
|
className={`
|
||||||
|
w-12 h-12 rounded-xl flex items-center justify-center
|
||||||
|
bg-gradient-to-br ${feature.gradient} text-white
|
||||||
|
`}
|
||||||
|
>
|
||||||
|
{feature.icon}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Title & Description */}
|
||||||
|
<h3 className="text-2xl text-white mt-4 mb-4">{feature.title}</h3>
|
||||||
|
<p className="text-gray-400 leading-relaxed mb-6">{feature.desc}</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Soft Glow Effect */}
|
||||||
|
<div
|
||||||
|
className={`
|
||||||
|
absolute inset-0 rounded-2xl transition-opacity duration-500
|
||||||
|
bg-gradient-to-br ${feature.gradient}
|
||||||
|
opacity-0 blur-3xl scale-125
|
||||||
|
group-hover:opacity-50
|
||||||
|
`}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p className="text-gray-400 mt-8">
|
||||||
|
Our curriculum is designed to be domain agnostic, meaning it applies whether you're in tech, healthcare, finance, education, creative industries, or beyond.
|
||||||
|
</p>
|
||||||
|
</motion.section>
|
||||||
|
|
||||||
|
{/* Exclusivity & Global Impact */}
|
||||||
|
<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">Exclusivity & Global Impact</h2>
|
||||||
|
<div className="border border-gray-800 rounded-xl p-8 bg-gray-900/20">
|
||||||
|
<p className="text-gray-400 mb-8">
|
||||||
|
This isn't just any learning program—it's an elite community. Our rigorous selection process accepts less than 0.5% of applicants, ensuring that only the most passionate and capable solopreneurs join our ranks.
|
||||||
|
</p>
|
||||||
|
<div className="grid md:grid-cols-3 gap-6">
|
||||||
|
{[
|
||||||
|
{ value: "0.5%", label: "Acceptance Rate" },
|
||||||
|
{ value: "10+", label: "Countries" },
|
||||||
|
{ value: "Elite", label: "Community" }
|
||||||
|
].map((stat, index) => (
|
||||||
|
<div key={index} className="text-center">
|
||||||
|
<div className="text-5xl text-[#a284ff] mb-2">{stat.value}</div>
|
||||||
|
<div className="text-gray-400">{stat.label}</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</motion.section>
|
||||||
|
|
||||||
|
{/* Innovative Creations */}
|
||||||
|
<motion.section
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
className=' max-w-6xl mx-auto'
|
||||||
|
>
|
||||||
|
<h2 className="text-5xl text-white mb-8">Innovative Creations from Our Elite Cohort</h2>
|
||||||
|
<div className="grid md:grid-cols-2 gap-6">
|
||||||
|
{[
|
||||||
|
{
|
||||||
|
name: "MedAssist",
|
||||||
|
location: "India",
|
||||||
|
gradient: "from-pink-500 to-rose-500",
|
||||||
|
icon: <HeartPulse className="w-6 h-6 text-white" />,
|
||||||
|
description:
|
||||||
|
"A cutting-edge health companion that delivers real-time symptom assessments, streamlined appointment scheduling, and personalized wellness insights. MedAssist is revolutionizing patient care by making healthcare more accessible and engaging."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "FinVision",
|
||||||
|
location: "South Africa",
|
||||||
|
gradient: "from-blue-500 to-cyan-500",
|
||||||
|
icon: <LineChart className="w-6 h-6 text-white" />,
|
||||||
|
description:
|
||||||
|
"An intelligent financial advisor that harnesses AI to generate smart investment strategies, monitor market dynamics, and offer tailored portfolio insights. FinVision empowers users to make confident, informed decisions in the fast-paced world of finance."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "EduGuide",
|
||||||
|
location: "Australia",
|
||||||
|
gradient: "from-green-500 to-emerald-500",
|
||||||
|
icon: <GraduationCap className="w-6 h-6 text-white" />,
|
||||||
|
description:
|
||||||
|
"A dynamic tutoring assistant that personalizes learning by curating essential study materials, tracking progress, and providing on-demand academic support. EduGuide is setting a new standard for remote education, making learning both intuitive and impactful."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "TravelBuddy",
|
||||||
|
location: "Norway",
|
||||||
|
gradient: "from-orange-500 to-amber-500",
|
||||||
|
icon: <Plane className="w-6 h-6 text-white" />,
|
||||||
|
description:
|
||||||
|
"A personalized travel concierge that crafts bespoke itineraries, uncovers local gems, and integrates seamless booking services. TravelBuddy transforms travel planning into an inspiring journey of discovery and ease."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "MarketPro",
|
||||||
|
location: "Global",
|
||||||
|
gradient: "from-purple-500 to-indigo-500",
|
||||||
|
icon: <Megaphone className="w-6 h-6 text-white" />,
|
||||||
|
description:
|
||||||
|
"A versatile AI powerhouse that automates customer engagement, delivers actionable market insights, and orchestrates precision-targeted marketing campaigns. MarketPro is the ultimate solution for businesses aiming to lead in a competitive marketplace."
|
||||||
|
}
|
||||||
|
].map((project, index) => (
|
||||||
|
<motion.div
|
||||||
|
key={project.name}
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ delay: index * 0.1 }}
|
||||||
|
className="group relative border border-gray-800 rounded-xl p-6 bg-gray-900/20 transition-all duration-500 overflow-hidden"
|
||||||
|
>
|
||||||
|
{/* Card Content */}
|
||||||
|
<div className="relative z-10">
|
||||||
|
<div className="flex items-start justify-between mb-4">
|
||||||
|
<h3 className="text-xl font-medium text-white flex items-center gap-2">
|
||||||
|
{project.icon} {project.name}
|
||||||
|
</h3>
|
||||||
|
<div className="flex items-center gap-2 text-white">
|
||||||
|
<MapPin className="w-4 h-4" />
|
||||||
|
{project.location}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p className="text-gray-400">{project.description}</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Soft Glow Effect */}
|
||||||
|
<div
|
||||||
|
className={`
|
||||||
|
absolute inset-0 rounded-2xl transition-opacity duration-500
|
||||||
|
bg-gradient-to-br ${project.gradient}
|
||||||
|
opacity-0 blur-3xl scale-125
|
||||||
|
group-hover:opacity-20
|
||||||
|
`}
|
||||||
|
/>
|
||||||
|
</motion.div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
<p className="text-gray-400 mt-8">
|
||||||
|
<p className="text-gray-400 mt-8">
|
||||||
|
These creations not only exemplify the transformative power of AI but also ignite the spark for future innovations. Join us and be a part of the revolution.
|
||||||
|
</p>
|
||||||
|
</p>
|
||||||
|
</motion.section>
|
||||||
|
|
||||||
|
{/* What You Can Expect */}
|
||||||
|
<motion.section
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
className=' max-w-6xl mx-auto'
|
||||||
|
>
|
||||||
|
<h2 className="text-5xl text-white mb-8">What You Can Expect</h2>
|
||||||
|
<div className="grid grid-cols-1 gap-6">
|
||||||
|
{[
|
||||||
|
{
|
||||||
|
title: "Intensive, Hands-On Training",
|
||||||
|
desc: "Experience a structured, immersive curriculum that challenges you to push your boundaries.",
|
||||||
|
icon: <Lightbulb className="w-6 h-6 text-white" />,
|
||||||
|
gradient: "from-yellow-500 to-orange-500"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Expert Mentorship",
|
||||||
|
desc: "Learn directly from industry leaders and seasoned entrepreneurs who guide you every step of the way.",
|
||||||
|
icon: <Users className="w-6 h-6 text-white" />,
|
||||||
|
gradient: "from-blue-500 to-cyan-500"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Global Networking Opportunities",
|
||||||
|
desc: "Connect with a small, elite group of peers from around the world, sharing insights and building lasting relationships.",
|
||||||
|
icon: <Globe className="w-6 h-6 text-white" />,
|
||||||
|
gradient: "from-green-500 to-emerald-500"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Real-World Projects",
|
||||||
|
desc: "Apply your learning immediately by building AI agents that solve real business challenges.",
|
||||||
|
icon: <Code className="w-6 h-6 text-white" />,
|
||||||
|
gradient: "from-purple-500 to-indigo-500"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Community & Support",
|
||||||
|
desc: "Join an exclusive network of solopreneurs who are as driven and innovative as you are.",
|
||||||
|
icon: <UsersRound className="w-6 h-6 text-white" />,
|
||||||
|
gradient: "from-pink-500 to-rose-500"
|
||||||
|
}
|
||||||
|
].map((item, index) => (
|
||||||
|
<motion.div
|
||||||
|
key={index}
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ delay: index * 0.1 }}
|
||||||
|
className="group relative border border-gray-800 rounded-xl p-6 bg-gray-900/20 transition-all duration-500 overflow-hidden"
|
||||||
|
>
|
||||||
|
{/* Card Content */}
|
||||||
|
<div className="relative z-10 flex items-start gap-4">
|
||||||
|
<div className="p-2 bg-gray-800/50 rounded-lg">{item.icon}</div>
|
||||||
|
<div>
|
||||||
|
<h3 className="text-lg font-medium text-white mb-2">{item.title}</h3>
|
||||||
|
<p className="text-gray-400">{item.desc}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Soft Glow Effect */}
|
||||||
|
<div
|
||||||
|
className={`
|
||||||
|
absolute inset-0 rounded-2xl transition-opacity duration-500
|
||||||
|
bg-gradient-to-br ${item.gradient}
|
||||||
|
opacity-0 blur-3xl scale-125
|
||||||
|
group-hover:opacity-20
|
||||||
|
`}
|
||||||
|
/>
|
||||||
|
</motion.div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</motion.section>
|
||||||
|
|
||||||
|
{/* Who Should Apply */}
|
||||||
|
<motion.section
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
className="relative max-w-6xl mx-auto border border-gray-800 rounded-xl p-8 bg-gray-900/20 overflow-hidden"
|
||||||
|
>
|
||||||
|
<h2 className="text-5xl text-white mb-8">Who Should Apply?</h2>
|
||||||
|
<p className="text-2xl text-white">
|
||||||
|
If you're a solopreneur with a passion for innovation and a drive to harness AI for your business, this program is for you. We welcome applicants from all industries—your background is not a barrier, but your ambition is the key to success.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
{/* Infinite Soft Glow Effect */}
|
||||||
|
<motion.div
|
||||||
|
className="absolute inset-0 rounded-2xl blur-3xl scale-125 opacity-30"
|
||||||
|
animate={{
|
||||||
|
background: [
|
||||||
|
"linear-gradient(to bottom right, #ec4899, #f97316)",
|
||||||
|
"linear-gradient(to bottom right, #3b82f6, #9333ea)",
|
||||||
|
"linear-gradient(to bottom right, #22c55e, #14b8a6)",
|
||||||
|
"linear-gradient(to bottom right, #facc15, #e11d48)"
|
||||||
|
],
|
||||||
|
opacity: [0.15, 0.25, 0.15],
|
||||||
|
}}
|
||||||
|
transition={{
|
||||||
|
duration: 6,
|
||||||
|
repeat: Infinity,
|
||||||
|
repeatType: "mirror"
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</motion.section>
|
||||||
|
|
||||||
|
{/* CTA */}
|
||||||
|
<motion.section
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
className="text-center max-w-5xl mx-auto px-6"
|
||||||
|
>
|
||||||
|
<h2 className="text-3xl md:text-4xl font-semibold text-white mb-6 leading-snug">
|
||||||
|
Ready to <span className="text-purple-400">Transform</span> Your Future?
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
<p className="text-lg text-gray-400 mb-8">
|
||||||
|
The future belongs to those who innovate. If you're ready to join an elite group of entrepreneurs and take your expertise to the next level with AI, apply now for our next cohort.
|
||||||
|
<span className="text-purple-300"> Less than 0.5% </span> are selected to redefine the AI landscape—will you be one of them?
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<motion.button
|
||||||
|
whileHover={{ scale: 1.05 }}
|
||||||
|
whileTap={{ scale: 0.98 }}
|
||||||
|
className="relative px-8 py-4 rounded-lg text-white font-medium inline-flex items-center gap-2
|
||||||
|
bg-gradient-to-r from-pink-500 via-purple-500 to-indigo-500 shadow-lg transition-all duration-500"
|
||||||
|
>
|
||||||
|
Apply Now <ChevronRight className="w-4 h-4" />
|
||||||
|
|
||||||
|
{/* Soft Glow Effect on Hover */}
|
||||||
|
<motion.div
|
||||||
|
className="absolute inset-0 rounded-lg blur-2xl opacity-30 transition-opacity duration-500"
|
||||||
|
animate={{
|
||||||
|
background: [
|
||||||
|
"linear-gradient(to right, #ec4899, #a855f7)",
|
||||||
|
"linear-gradient(to right, #3b82f6, #9333ea)",
|
||||||
|
"linear-gradient(to right, #22c55e, #14b8a6)",
|
||||||
|
"linear-gradient(to right, #facc15, #e11d48)"
|
||||||
|
],
|
||||||
|
opacity: [0, 0.3, 0]
|
||||||
|
}}
|
||||||
|
transition={{
|
||||||
|
duration: 4,
|
||||||
|
repeat: Infinity,
|
||||||
|
repeatType: "mirror"
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</motion.button>
|
||||||
|
</motion.section>
|
||||||
|
<Footer />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default AIProgramCard;
|
||||||
368
app/hr/page.tsx
Normal file
368
app/hr/page.tsx
Normal file
@ -0,0 +1,368 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
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, FaUserPlus, FaSitemap } from 'react-icons/fa'; //Added FaUserPlus and FaSitemap
|
||||||
|
import { OrbitingCircles } from '@/components/magicui/orbiting-circles';
|
||||||
|
|
||||||
|
const heading = "Strategic HR Teams Employ Everyday to Foster High-Performing Teams"; // Changed Heading
|
||||||
|
const description = "Oversee recruiting pipeline, streamline your onboarding processes, and maintain team alignment as your company evolves."; // Changed Description
|
||||||
|
|
||||||
|
const features = [
|
||||||
|
{
|
||||||
|
head: "Streamline New Hire Onboarding", // Changed head
|
||||||
|
desc: "Establish a single source of truth for your HR policies. Organize and update HR information and resources in one place.", // Changed desc
|
||||||
|
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: <FaUserPlus className="text-sky-400 text-2xl" /> // Changed Icon
|
||||||
|
},
|
||||||
|
{
|
||||||
|
head: "Maintain Team Alignment Throughout Hiring", // Changed head
|
||||||
|
desc: "Collaborate on hiring plans, interview requirements, and more to attract and hire top talent.", // Changed desc
|
||||||
|
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: <FaUsers className="text-purple-400 text-2xl" /> // Changed Icon
|
||||||
|
},
|
||||||
|
{
|
||||||
|
head: "Establish a Single Source of Truth for HR", // Changed head
|
||||||
|
desc: "Organize and update all your HR information and resources in one place, so your team can access what they need.", // Changed desc
|
||||||
|
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: <FaDatabase className="text-amber-400 text-2xl" /> // Changed Icon
|
||||||
|
},
|
||||||
|
{
|
||||||
|
head: "Visualize Your Organization", // Changed head
|
||||||
|
desc: "Visualize your org chart and personnel data to keep your entire company connected and adapt as your team evolves.", // Changed desc
|
||||||
|
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: <FaSitemap className="text-emerald-400 text-2xl" /> // Changed Icon
|
||||||
|
},
|
||||||
|
{
|
||||||
|
head: "Consolidate All Data in One Place", // Changed head
|
||||||
|
desc: "Integrate with existing tools, add apps to gain valuable insights, and write your own scripts to further customize your workflow.", // Changed desc
|
||||||
|
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: <FaListUl className="text-rose-400 text-2xl" />
|
||||||
|
},
|
||||||
|
{
|
||||||
|
head: "Simplify HR Workflows", // Changed head
|
||||||
|
desc: "Manage everything from your candidate pipeline to your new hire onboarding with Everyday.", // Changed desc
|
||||||
|
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: <FaCog className="text-blue-400 text-2xl" /> // Changed Icon
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
const whyEveryday = [
|
||||||
|
{
|
||||||
|
title: "Perfect Fit for Strategic HR", // Changed title
|
||||||
|
description: "Everyday streamlines recruiting, onboarding, and team alignment, empowering HR to build high-performing teams efficiently.", // Changed Description
|
||||||
|
icon: <FaUsers className="text-4xl text-indigo-400" />
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Streamline Onboarding", // Changed title
|
||||||
|
description: "Simplify the onboarding process for new hires, ensuring they have all the resources and information they need from day one.", // Changed Description
|
||||||
|
icon: <FaTasks className="text-4xl text-blue-400" />
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Visualize Your Organization", // Changed title
|
||||||
|
description: "Gain a comprehensive view of your organization with org charts and personnel data to adapt quickly as your team evolves.", // Changed Description
|
||||||
|
icon: <FaSitemap className="text-4xl text-green-400" /> // Changed Icon
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Centralize HR Policies", // Changed title
|
||||||
|
description: "Establish a single source of truth for HR policies, making it easy for employees to access and stay informed.", // Changed Description
|
||||||
|
icon: <FaRegFileAlt className="text-4xl text-amber-400" />
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
const detailedFeatures = [
|
||||||
|
{
|
||||||
|
title: "Recruiting Pipeline Management", // Changed title
|
||||||
|
description: "Oversee the entire recruiting process from application to offer, ensuring a smooth and efficient experience.", // Changed Description
|
||||||
|
subFeature: "Track candidates, manage interviews, and streamline communication with potential hires.", // Changed subFeature
|
||||||
|
icon: <FaUserPlus className="text-4xl text-sky-400" /> // Changed Icon
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Streamlined Onboarding", // Changed title
|
||||||
|
description: "Simplify the onboarding process with automated tasks, document management, and new hire resources.", // Changed Description
|
||||||
|
subFeature: "Ensure new hires are fully equipped and integrated into the team from day one.", // Changed subFeature
|
||||||
|
icon: <FaCalendarAlt className="text-4xl text-purple-400" />
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "HR Knowledge Base", // Changed title
|
||||||
|
description: "Create a centralized repository for all HR policies, procedures, and employee resources.", // Changed Description
|
||||||
|
subFeature: "Make it easy for employees to find the information they need, when they need it.", // Changed subFeature
|
||||||
|
icon: <FaDatabase className="text-4xl text-rose-400" />
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Team Alignment and Collaboration", // Changed title
|
||||||
|
description: "Foster collaboration and alignment across teams with tools for communication, goal setting, and performance tracking.", // Changed Description
|
||||||
|
subFeature: "Keep everyone on the same page and working towards common objectives.", // Changed subFeature
|
||||||
|
icon: <FaLightbulb className="text-4xl text-amber-400" />
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
const words = `"Everyday has revolutionized our HR processes. From streamlining onboarding to ensuring team alignment, it's the perfect solution for building a high-performing organization."`; // Changed Testimonial
|
||||||
|
|
||||||
|
export default function HRHub() { // Changed function name
|
||||||
|
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">
|
||||||
|
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
|
||||||
|
</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>
|
||||||
|
{/* 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">
|
||||||
|
Connect Your HR Tools
|
||||||
|
</h2>
|
||||||
|
<p className="text-lg md:text-xl text-gray-300">
|
||||||
|
With Everyday, you can easily connect and synchronize data from your HRIS, applicant tracking systems, performance management platforms, and more, creating a comprehensive and efficient workflow tailored to your HR 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 */}
|
||||||
|
<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 HR Teams
|
||||||
|
</h2>
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-10">
|
||||||
|
{whyEveryday.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>
|
||||||
|
<p className="text-gray-300">{item.description}</p>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Features Grid */}
|
||||||
|
<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>
|
||||||
|
<p className="text-xl text-gray-300 text-center mb-16 max-w-3xl mx-auto">
|
||||||
|
Everything you need to optimize your HR workflows in one powerful platform
|
||||||
|
</p>
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||||
|
{features.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`}>
|
||||||
|
{feature.button}
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</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 */}
|
||||||
|
<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 HR 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>
|
||||||
|
|
||||||
|
{/* Use Cases Section - Replacing Marketplace */}
|
||||||
|
<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">
|
||||||
|
Manage Your Crucial HR Workflows
|
||||||
|
</h2>
|
||||||
|
<p className="text-xl text-gray-300 text-center mb-16 max-w-3xl mx-auto">
|
||||||
|
Manage everything from your candidate pipeline to your new hire onboarding with Everyday. Kickstart with pre-made templates, and customize them to fit your exact needs.
|
||||||
|
</p>
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||||
|
{/* Example Use Cases - Adapt Icons and Descriptions Accordingly */}
|
||||||
|
<div 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">
|
||||||
|
<FaUserPlus className="text-2xl text-green-400 mb-4" />
|
||||||
|
<h3 className="text-2xl mb-4">Applicant Tracker</h3>
|
||||||
|
<p className="text-gray-300 mb-6">Efficiently track and manage job applicants from initial application to offer.</p>
|
||||||
|
<a href="#" className="inline-block px-6 py-2 rounded-md bg-emerald-200 text-gray-100 font-medium hover:opacity-90 transition-opacity">
|
||||||
|
Explore
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div 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">
|
||||||
|
<FaDatabase className="text-2xl text-blue-400 mb-4" />
|
||||||
|
<h3 className="text-2xl mb-4">HR Knowledge Base</h3>
|
||||||
|
<p className="text-gray-300 mb-6">Create a centralized and easily accessible repository for all HR policies and resources.</p>
|
||||||
|
<a href="#" className="inline-block px-6 py-2 rounded-md bg-sky-200 text-gray-100 font-medium hover:opacity-90 transition-opacity">
|
||||||
|
Explore
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div 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">
|
||||||
|
<FaCalendarAlt className="text-2xl text-amber-400 mb-4" />
|
||||||
|
<h3 className="text-2xl mb-4">Employee Onboarding</h3>
|
||||||
|
<p className="text-gray-300 mb-6">Streamline the onboarding process for new hires with automated tasks and document management.</p>
|
||||||
|
<a href="#" className="inline-block px-6 py-2 rounded-md bg-amber-200 text-gray-100 font-medium hover:opacity-90 transition-opacity">
|
||||||
|
Explore
|
||||||
|
</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 HR Workflow?
|
||||||
|
</h2>
|
||||||
|
<p className="text-xl text-gray-300 mb-10">
|
||||||
|
Join HR 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">
|
||||||
|
Explore Free Trial
|
||||||
|
</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>
|
||||||
|
),
|
||||||
|
};
|
||||||
320
app/marketplace/page.tsx
Normal file
320
app/marketplace/page.tsx
Normal file
@ -0,0 +1,320 @@
|
|||||||
|
"use client";
|
||||||
|
"use client";
|
||||||
|
|
||||||
|
import React from 'react';
|
||||||
|
import { motion } from 'framer-motion';
|
||||||
|
import { Code, Search, Upload, Lightbulb, Globe, CheckCircle, CreditCard, ArrowRight } from 'lucide-react';
|
||||||
|
import Navbar from '@/components/Navbar/navbar';
|
||||||
|
import Footer from '@/components/footer';
|
||||||
|
|
||||||
|
const AIMarketplace = () => {
|
||||||
|
|
||||||
|
const buyerBenefits = [
|
||||||
|
{
|
||||||
|
title: "Seamless Integration",
|
||||||
|
desc: "Easily download, deploy, or subscribe to the code that fits your needs, and start enhancing your operations immediately.",
|
||||||
|
icon: <Code className="w-6 h-6 text-white" />
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Tailored for SMBs",
|
||||||
|
desc: "Explore solutions that simplify everyday tasks—from smart customer support to automated financial insights—ensuring that every tool is both practical and powerful.",
|
||||||
|
icon: <Lightbulb className="w-6 h-6 text-white" />
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Secure & Reliable",
|
||||||
|
desc: "All our offerings are thoroughly vetted, ensuring you receive only the best and most secure AI solutions on the market.",
|
||||||
|
icon: <CheckCircle className="w-6 h-6 text-white" />
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
const sellerBenefits = [
|
||||||
|
{
|
||||||
|
title: "Effortless Listing",
|
||||||
|
desc: "Our streamlined process makes it simple to upload your code, set your subscription plans, and start selling without any hassle.",
|
||||||
|
icon: <Upload className="w-6 h-6 text-white" />
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Global Exposure",
|
||||||
|
desc: "Connect with SMBs and enterprises worldwide who are eager to integrate innovative AI solutions into their operations.",
|
||||||
|
icon: <Globe className="w-6 h-6 text-white" />
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Flexible Monetization",
|
||||||
|
desc: "Choose from various pricing models—one-time downloads, subscriptions, or even usage-based fees—to best suit your business and maximize revenue.",
|
||||||
|
icon: <CreditCard className="w-6 h-6 text-white" />
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="w-full p-6 bg-[#080E12] min-h-screen space-y-36">
|
||||||
|
<Navbar />
|
||||||
|
|
||||||
|
{/* Hero Section */}
|
||||||
|
<motion.section
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
className="max-w-6xl mx-auto h-screen flex flex-col justify-between relative"
|
||||||
|
>
|
||||||
|
{/* Animated Gradient Background */}
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, scale: 0.9, rotate: 0 }}
|
||||||
|
animate={{ opacity: 0.15, scale: 1.9, rotate: 8 }}
|
||||||
|
transition={{ duration: 2, repeat: Infinity, repeatType: "mirror", ease: "easeInOut" }}
|
||||||
|
className="absolute top-[-100px] right-[-50px] w-96 h-80 bg-gradient-to-br from-[#6EE7B7] to-[#3B82F6] rounded-full opacity-30 blur-[120px] skew-y-6"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div className="max-w-6xl h-fit mt-auto pb-80 relative z-10">
|
||||||
|
<motion.h1
|
||||||
|
initial={{ opacity: 0 }}
|
||||||
|
animate={{ opacity: 1 }}
|
||||||
|
className="text-7xl text-white mb-6"
|
||||||
|
>
|
||||||
|
AI
|
||||||
|
<span className="bg-gradient-to-r from-[#6EE7B7] to-[#3B82F6] text-transparent bg-clip-text">
|
||||||
|
{" "}Marketplace{" "}
|
||||||
|
</span>
|
||||||
|
</motion.h1>
|
||||||
|
|
||||||
|
<div className="absolute bottom-0 left-1/2 transform -translate-x-1/2">
|
||||||
|
<div className="w-32 h-px bg-gradient-to-r from-transparent via-blue-500/30 to-transparent" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<motion.div className="text-4xl text-[#6EE7B7] font-medium mb-6">
|
||||||
|
Your One-Stop Hub for Ready-to-Go AI Solutions
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
|
<motion.p
|
||||||
|
initial={{ opacity: 0 }}
|
||||||
|
animate={{ opacity: 1 }}
|
||||||
|
className="text-gray-400 text-2xl mb-8"
|
||||||
|
>
|
||||||
|
Discover a curated collection of innovative AI-powered apps and agents designed to streamline your business operations. Whether you’re looking to download, deploy, or subscribe to smart solutions, our marketplace is built to empower your growth—all at the click of a button.
|
||||||
|
</motion.p>
|
||||||
|
</div>
|
||||||
|
</motion.section>
|
||||||
|
|
||||||
|
{/* For Buyers 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"><span className="bg-gradient-to-r from-[#6EE7B7] to-[#3B82F6] text-transparent bg-clip-text">For Buyers:</span> Instant Innovation</h2>
|
||||||
|
<p className="text-gray-400 mb-8">
|
||||||
|
Unlock a world of possibilities with our ready-to-go apps and agents. Each solution is designed with simplicity and effectiveness in mind, so you can focus on what matters most—growing your business.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||||
|
{buyerBenefits.map((benefit, index) => (
|
||||||
|
<div
|
||||||
|
key={index}
|
||||||
|
className="group relative bg-[#121212] border border-gray-800 rounded-xl p-6 transition-all duration-500 overflow-hidden"
|
||||||
|
>
|
||||||
|
{/* Icon + Title */}
|
||||||
|
<div className="flex items-center gap-4 mb-2 relative z-10">
|
||||||
|
<div className="p-3 bg-gray-900 rounded-lg">{benefit.icon}</div>
|
||||||
|
<h3 className="text-xl text-white font-medium">{benefit.title}</h3>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Description */}
|
||||||
|
<p className="text-gray-400 relative z-10">{benefit.desc}</p>
|
||||||
|
|
||||||
|
{/* Soft Glow Effect */}
|
||||||
|
<div
|
||||||
|
className="absolute inset-0 rounded-xl bg-gradient-to-br from-purple-500 to-indigo-500 opacity-0 blur-3xl scale-125 transition-opacity duration-500
|
||||||
|
group-hover:opacity-20"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="mt-8">
|
||||||
|
<motion.button
|
||||||
|
whileHover={{ scale: 1.05 }}
|
||||||
|
whileTap={{ scale: 0.98 }}
|
||||||
|
className="relative px-8 py-4 rounded-lg text-white font-medium inline-flex items-center gap-2
|
||||||
|
bg-gradient-to-r from-pink-500 via-purple-500 to-indigo-500 shadow-lg transition-all duration-500"
|
||||||
|
>
|
||||||
|
Browse Solutions <ArrowRight className="inline-block ml-2" />
|
||||||
|
</motion.button>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</motion.section>
|
||||||
|
|
||||||
|
{/* For Sellers 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"><span className="bg-gradient-to-r from-[#6EE7B7] to-[#3B82F6] text-transparent bg-clip-text">For Sellers:</span> Showcase & Monetize Your Innovations</h2>
|
||||||
|
<p className="text-gray-400 mb-8">
|
||||||
|
Turn your creativity into recurring revenue by listing your AI apps and agents on our marketplace. Reach a global audience and let your solutions speak for themselves.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||||
|
{sellerBenefits.map((benefit, index) => (
|
||||||
|
<div
|
||||||
|
key={index}
|
||||||
|
className="group relative bg-[#121212] border border-gray-800 rounded-xl p-6 transition-all duration-500 overflow-hidden"
|
||||||
|
>
|
||||||
|
{/* Icon + Title */}
|
||||||
|
<div className="flex items-center gap-4 mb-2 relative z-10">
|
||||||
|
<div className="p-3 bg-gray-900 rounded-lg">{benefit.icon}</div>
|
||||||
|
<h3 className="text-xl text-white font-medium">{benefit.title}</h3>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Description */}
|
||||||
|
<p className="text-gray-400 relative z-10">{benefit.desc}</p>
|
||||||
|
|
||||||
|
{/* Soft Glow Effect */}
|
||||||
|
<div
|
||||||
|
className="absolute inset-0 rounded-xl bg-gradient-to-br from-purple-500 to-indigo-500 opacity-0 blur-3xl scale-125 transition-opacity duration-500
|
||||||
|
group-hover:opacity-20"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="mt-8">
|
||||||
|
<motion.button
|
||||||
|
whileHover={{ scale: 1.05 }}
|
||||||
|
whileTap={{ scale: 0.98 }}
|
||||||
|
className="relative px-8 py-4 rounded-lg text-white font-medium inline-flex items-center gap-2
|
||||||
|
bg-gradient-to-r from-pink-500 via-purple-500 to-indigo-500 shadow-lg transition-all duration-500"
|
||||||
|
>
|
||||||
|
List Your Product <ArrowRight className="inline-block ml-2" />
|
||||||
|
</motion.button>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</motion.section>
|
||||||
|
|
||||||
|
{/* How It Works 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 text-center">How It Works</h2>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-12">
|
||||||
|
{/* Buyers */}
|
||||||
|
<div className="relative group border border-gray-800 rounded-xl p-6 bg-gray-900/20 transition-all duration-500 overflow-hidden">
|
||||||
|
<h3 className="text-3xl text-white mb-4">For Buyers:</h3>
|
||||||
|
<ul className="text-gray-400 space-y-4">
|
||||||
|
<li className="flex items-center gap-3">
|
||||||
|
<span className="text-2xl text-blue-500"><Search /></span>
|
||||||
|
<span>Discover: Browse our extensive library of AI solutions.</span>
|
||||||
|
</li>
|
||||||
|
<li className="flex items-center gap-3">
|
||||||
|
<span className="text-2xl text-blue-500"><Code /></span>
|
||||||
|
<span>Deploy: Download or subscribe to the code with a few simple clicks.</span>
|
||||||
|
</li>
|
||||||
|
<li className="flex items-center gap-3">
|
||||||
|
<span className="text-2xl text-blue-500"><Lightbulb /></span>
|
||||||
|
<span>Transform: Integrate the solution into your business and experience the benefits immediately.</span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
{/* Soft Glow Effect */}
|
||||||
|
<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"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Sellers */}
|
||||||
|
<div className="relative group border border-gray-800 rounded-xl p-6 bg-gray-900/20 transition-all duration-500 overflow-hidden">
|
||||||
|
<h3 className="text-3xl text-white mb-4">For Sellers:</h3>
|
||||||
|
<ul className="text-gray-400 space-y-4">
|
||||||
|
<li className="flex items-center gap-3">
|
||||||
|
<span className="text-2xl text-green-500"><Upload /></span>
|
||||||
|
<span>List: Upload your ready-to-go app or agent, and choose your pricing model.</span>
|
||||||
|
</li>
|
||||||
|
<li className="flex items-center gap-3">
|
||||||
|
<span className="text-2xl text-green-500"><Globe /></span>
|
||||||
|
<span>Promote: Leverage our global platform to showcase your innovation.</span>
|
||||||
|
</li>
|
||||||
|
<li className="flex items-center gap-3">
|
||||||
|
<span className="text-2xl text-green-500"><CreditCard /></span>
|
||||||
|
<span>Profit: Monetize your expertise and watch your revenue grow with every subscription or download.</span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
{/* Soft Glow Effect */}
|
||||||
|
<div
|
||||||
|
className="absolute inset-0 rounded-xl bg-gradient-to-br from-green-500 to-emerald-500 opacity-0 blur-3xl scale-125 transition-opacity duration-500 group-hover:opacity-20"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</motion.section>
|
||||||
|
|
||||||
|
{/* Why Choose Our Marketplace 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">Why Choose Our Marketplace?</h2>
|
||||||
|
<ul className="text-gray-400 space-y-4">
|
||||||
|
{[
|
||||||
|
{ icon: <CheckCircle />, title: "Curated Quality", desc: "Every solution is handpicked and continuously updated to ensure peak performance and security.", color: "from-green-500 to-emerald-500" },
|
||||||
|
{ icon: <Lightbulb />, title: "Ease of Use", desc: "Designed for both buyers and sellers, our intuitive interface makes finding and listing products a breeze.", color: "from-yellow-500 to-orange-500" },
|
||||||
|
{ icon: <Code />, title: "Comprehensive Support", desc: "Access detailed documentation, tutorials, and dedicated support to help you get the most out of our platform.", color: "from-blue-500 to-cyan-500" },
|
||||||
|
{ icon: <Globe />, title: "Community-Driven", desc: "Join a thriving ecosystem of innovators and forward-thinking businesses ready to redefine their industries with AI.", color: "from-purple-500 to-indigo-500" }
|
||||||
|
].map((item, index) => (
|
||||||
|
<li key={index} className="relative group flex items-start gap-4 border border-gray-800 p-4 rounded-lg bg-gray-900/20 transition-all duration-500 overflow-hidden">
|
||||||
|
{/* Icon */}
|
||||||
|
<span className="text-2xl text-white">{item.icon}</span>
|
||||||
|
|
||||||
|
{/* Text Content */}
|
||||||
|
<div>
|
||||||
|
<h3 className="text-xl text-white font-medium">{item.title}</h3>
|
||||||
|
<p>{item.desc}</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Soft Glow Effect */}
|
||||||
|
<div
|
||||||
|
className={`absolute inset-0 rounded-lg bg-gradient-to-br ${item.color} opacity-0 blur-3xl scale-125 transition-opacity duration-500 group-hover:opacity-20`}
|
||||||
|
/>
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
</motion.section>
|
||||||
|
|
||||||
|
{/* Final CTA Section */}
|
||||||
|
<motion.section
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
className="max-w-6xl mx-auto py-20 text-center"
|
||||||
|
>
|
||||||
|
<h2 className="text-4xl text-white mb-8">Embrace the future of AI-powered business solutions.</h2>
|
||||||
|
<p className="text-gray-400 text-xl mb-8">Whether you’re here to discover cutting-edge apps or to share your innovations with the world, our marketplace is your launchpad for success.</p>
|
||||||
|
|
||||||
|
<div className="flex justify-center gap-6">
|
||||||
|
<motion.button
|
||||||
|
whileHover={{ scale: 1.05 }}
|
||||||
|
whileTap={{ scale: 0.98 }}
|
||||||
|
className="relative px-8 py-4 rounded-lg text-white font-medium inline-flex items-center gap-2
|
||||||
|
bg-gradient-to-r from-pink-500 via-purple-500 to-indigo-500 shadow-lg transition-all duration-500"
|
||||||
|
>
|
||||||
|
Browse Solutions <ArrowRight className="inline-block ml-2" />
|
||||||
|
</motion.button>
|
||||||
|
|
||||||
|
<motion.button
|
||||||
|
whileHover={{ scale: 1.05 }}
|
||||||
|
whileTap={{ scale: 0.98 }}
|
||||||
|
className="relative px-8 py-4 rounded-lg text-white font-medium inline-flex items-center gap-2
|
||||||
|
bg-gradient-to-r from-pink-500 via-purple-500 to-indigo-500 shadow-lg transition-all duration-500"
|
||||||
|
>
|
||||||
|
List Your Product <ArrowRight className="inline-block ml-2" />
|
||||||
|
</motion.button>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</motion.section>
|
||||||
|
|
||||||
|
<Footer />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default AIMarketplace;
|
||||||
73
app/micro-saas/how-it-works.jsx
Normal file
73
app/micro-saas/how-it-works.jsx
Normal file
@ -0,0 +1,73 @@
|
|||||||
|
import React, { useState, useEffect } from 'react';
|
||||||
|
import { motion, useAnimation } from 'framer-motion';
|
||||||
|
|
||||||
|
const Step = ({ step, index, isActive }) => {
|
||||||
|
const controls = useAnimation();
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (isActive) {
|
||||||
|
controls.start({ opacity: 1, x: 0 });
|
||||||
|
} else {
|
||||||
|
controls.start({ opacity: 0.5, x: -20 });
|
||||||
|
}
|
||||||
|
}, [isActive, controls]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<motion.div
|
||||||
|
key={index}
|
||||||
|
className="flex gap-8 items-start h-40"
|
||||||
|
initial={{ opacity: 0.5, x: -20 }}
|
||||||
|
animate={controls}
|
||||||
|
transition={{ duration: 0.5 }}
|
||||||
|
>
|
||||||
|
<div className="flex-shrink-0 w-12 h-12 rounded-full bg-blue-600 bg-opacity-50 flex items-center justify-center text-xl font-bold">
|
||||||
|
{index + 1}
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 className="text-2xl font-bold mb-2">{step.title}</h3>
|
||||||
|
<p className="text-gray-300">{step.description}</p>
|
||||||
|
{/* Optional Call-to-action or additional details */}
|
||||||
|
{/*
|
||||||
|
<button className="bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded mt-auto">
|
||||||
|
Learn More
|
||||||
|
</button>
|
||||||
|
*/}
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const HowItWorks = ({ steps }) => {
|
||||||
|
const [activeStep, setActiveStep] = useState(0);
|
||||||
|
const containerRef = React.createRef();
|
||||||
|
|
||||||
|
// Optional Progress Bar for Steps
|
||||||
|
// You can implement this as a separate component or inline here.
|
||||||
|
|
||||||
|
return (
|
||||||
|
<section ref={containerRef} className="container max-w-6xl mx-auto px-[15px] py-[60px] md:p-[30px] lg:p-[60px] xl:p-[80px]">
|
||||||
|
|
||||||
|
{/* Title Section */}
|
||||||
|
<h2 className="text-center text-[32px] md:text-[40px] lg:text-[48px] mb-[40px]" id='how-it-work'>How It Works</h2>
|
||||||
|
|
||||||
|
{/* Steps Container */}
|
||||||
|
<div className="space-y-[60px]" id='steps'>
|
||||||
|
{steps.map((step, index) => (
|
||||||
|
<motion.div
|
||||||
|
key={index}
|
||||||
|
data-index={index}
|
||||||
|
className={`relative step ${activeStep === index ? 'active' : ''}`}
|
||||||
|
onMouseEnter={() => setActiveStep(index)} // Change active step on hover
|
||||||
|
onMouseLeave={() => setActiveStep(0)} // Reset to first step when not hovering
|
||||||
|
>
|
||||||
|
{/* Render the Step Component here */}
|
||||||
|
<Step step={step} index={index} isActive={activeStep === index} />
|
||||||
|
</motion.div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default HowItWorks;
|
||||||
306
app/micro-saas/page.tsx
Normal file
306
app/micro-saas/page.tsx
Normal file
@ -0,0 +1,306 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import React, { useState } from 'react';
|
||||||
|
import { motion } from 'framer-motion';
|
||||||
|
import { ChevronDown, ChevronUp, Code, Users, CreditCard, BarChart, Share } from 'lucide-react';
|
||||||
|
import Navbar from '@/components/Navbar/navbar';
|
||||||
|
import HowItWorks from './how-it-works';
|
||||||
|
import Footer from '@/components/footer';
|
||||||
|
|
||||||
|
const MicroSAASLanding = () => {
|
||||||
|
const [expandedIndex, setExpandedIndex] = useState(null);
|
||||||
|
const [expandedFaq, setExpandedFaq] = useState(null);
|
||||||
|
|
||||||
|
const features = [
|
||||||
|
{
|
||||||
|
icon: <Code className="w-6 h-6" />,
|
||||||
|
title: "No-Code, Fast Deployment",
|
||||||
|
description: "Our drag-and-drop builder allows you to convert your services into an AI-powered solution in minutes—no technical skills required.",
|
||||||
|
gradient: "from-pink-500/20 to-purple-500/20"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: <CreditCard className="w-6 h-6" />,
|
||||||
|
title: "Monetization Made Simple",
|
||||||
|
description: "Integrate subscription billing and unlock recurring revenue streams from day one.",
|
||||||
|
gradient: "from-blue-500/20 to-cyan-500/20"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: <Users className="w-6 h-6" />,
|
||||||
|
title: "Community-Centric Growth",
|
||||||
|
description: "Build and nurture a dedicated community around your MicroSAAS, boosting customer loyalty and creating opportunities for upselling.",
|
||||||
|
gradient: "from-green-500/20 to-emerald-500/20"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: <BarChart className="w-6 h-6" />,
|
||||||
|
title: "All-in-One Platform",
|
||||||
|
description: "Manage your AI agents, community interactions, and monetization strategies from a single, easy-to-use dashboard.",
|
||||||
|
gradient: "from-orange-500/20 to-yellow-500/20"
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
const steps = [
|
||||||
|
{
|
||||||
|
title: "Convert Your Expertise",
|
||||||
|
description: "Use our intuitive no-code tools to transform your existing service into a fully functional AI agent."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Launch Your MicroSAAS",
|
||||||
|
description: "Deploy your AI agent with integrated subscription management and analytics."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Grow Your Community",
|
||||||
|
description: "Engage your audience with community forums, newsletters, and in-app engagement tools."
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
const testimonials = [
|
||||||
|
{
|
||||||
|
quote: "I turned my consulting expertise into an AI-powered MicroSAAS, and my community has grown exponentially.",
|
||||||
|
author: "Samantha T.",
|
||||||
|
role: "Business Strategist"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
quote: "The no-code builder made it incredibly easy to launch my MicroSAAS. Now, I generate consistent revenue through my engaged community.",
|
||||||
|
author: "Marcus L.",
|
||||||
|
role: "Digital Marketer"
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
const faqs = [
|
||||||
|
{
|
||||||
|
question: "What exactly is a MicroSAAS?",
|
||||||
|
answer: "A MicroSAAS is a lean, specialized software service delivered on a subscription basis, often powered by AI to automate tasks and provide personalized solutions."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
question: "Do I need technical skills to build my MicroSAAS?",
|
||||||
|
answer: "Not at all! Our platform is designed for non-technical users with an intuitive, drag-and-drop interface and comprehensive support resources."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
question: "How can I grow my community?",
|
||||||
|
answer: "Use our built-in community tools—forums, chat, newsletters—to engage your users, gather feedback, and offer premium content that drives loyalty and additional revenue."
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen bg-[#080E12] 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">
|
||||||
|
Build Your MicroSAAS & Grow Your Community
|
||||||
|
</h1>
|
||||||
|
<h2 className="text-2xl md:text-3xl lg:text-4xl max-w-4xl mb-12">
|
||||||
|
Transform your expertise into a dynamic, AI-powered MicroSAAS and build a thriving community around your niche offering. Our platform equips you with everything you need—from a no-code builder to integrated community tools—to launch, grow, and monetize your MicroSAAS with ease.
|
||||||
|
</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
|
||||||
|
</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>
|
||||||
|
|
||||||
|
{/* What is MicroSAAS Section */}
|
||||||
|
<motion.div
|
||||||
|
className="relative py-20"
|
||||||
|
initial={{ opacity: 0, scale: 0.95 }}
|
||||||
|
animate={{ opacity: 1, scale: 1 }}
|
||||||
|
transition={{ duration: 0.8, ease: "easeOut" }}
|
||||||
|
>
|
||||||
|
<div className="absolute inset-0 bg-gradient-to-r from-blue-500/30 to-purple-500/30 backdrop-blur-lg rounded-xl shadow-lg" />
|
||||||
|
<div className="container w-70%] mx-auto px-6 relative text-center">
|
||||||
|
<motion.h2
|
||||||
|
className="text-5xl font-extrabold mb-6 text-white drop-shadow-lg"
|
||||||
|
initial={{ y: 20, opacity: 0 }}
|
||||||
|
animate={{ y: 0, opacity: 1 }}
|
||||||
|
transition={{ duration: 0.6, delay: 0.2 }}
|
||||||
|
>
|
||||||
|
What Is MicroSAAS?
|
||||||
|
</motion.h2>
|
||||||
|
<motion.p
|
||||||
|
className="text-lg text-gray-200 max-w-2xl mx-auto"
|
||||||
|
initial={{ y: 20, opacity: 0 }}
|
||||||
|
animate={{ y: 0, opacity: 1 }}
|
||||||
|
transition={{ duration: 0.6, delay: 0.4 }}
|
||||||
|
>
|
||||||
|
MicroSAAS is the next evolution in software services: a lean, hyper-focused, subscription-based solution that leverages AI to solve specific problems for targeted audiences.
|
||||||
|
</motion.p>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
|
{/* How it Works Section */}
|
||||||
|
{/* <div className="container mx-auto px-4 py-16">
|
||||||
|
<h2 className="text-4xl font-bold mb-12">How It Works</h2>
|
||||||
|
<div className="space-y-12">
|
||||||
|
{steps.map((step, index) => (
|
||||||
|
<motion.div
|
||||||
|
key={index}
|
||||||
|
className="flex gap-8 items-start"
|
||||||
|
initial={{ opacity: 0, x: -20 }}
|
||||||
|
animate={{ opacity: 1, x: 0 }}
|
||||||
|
transition={{ delay: index * 0.3 }}
|
||||||
|
>
|
||||||
|
<div className="flex-shrink-0 w-12 h-12 rounded-full bg-blue-600 flex items-center justify-center text-xl font-bold">
|
||||||
|
{index + 1}
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 className="text-2xl font-bold mb-2">{step.title}</h3>
|
||||||
|
<p className="text-gray-300">{step.description}</p>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div> */}
|
||||||
|
|
||||||
|
<HowItWorks steps={steps} />
|
||||||
|
|
||||||
|
{/* Features Section */}
|
||||||
|
<div className="max-w-6xl mx-auto space-y-4">
|
||||||
|
<h2 className="text-4xl mb-6">Features</h2>
|
||||||
|
<p className="mb-12">Everything You Need to Create, Manage, and Monetize Your AI Offerings </p>
|
||||||
|
{features.map((vertical, index) => (
|
||||||
|
<div
|
||||||
|
key={index}
|
||||||
|
className="group"
|
||||||
|
>
|
||||||
|
{/* Main row - always visible */}
|
||||||
|
<div
|
||||||
|
className={`
|
||||||
|
relative overflow-hidden
|
||||||
|
px-6 py-4 rounded-xl
|
||||||
|
cursor-pointer
|
||||||
|
transition-all duration-300
|
||||||
|
border border-purple-500/10
|
||||||
|
${expandedIndex === index ? 'bg-purple-900/20' : 'hover:bg-purple-900/10'}
|
||||||
|
`}
|
||||||
|
onClick={() => setExpandedIndex(expandedIndex === index ? null : index)}
|
||||||
|
>
|
||||||
|
<div className="flex items-center gap-6">
|
||||||
|
{/* Icon */}
|
||||||
|
<div className={`
|
||||||
|
w-10 h-10 rounded-lg
|
||||||
|
flex items-center justify-center
|
||||||
|
bg-gradient-to-br ${vertical.gradient}
|
||||||
|
transition-transform duration-300 text-white
|
||||||
|
${expandedIndex === index ? 'rotate-3' : 'group-hover:scale-105'}
|
||||||
|
`}>
|
||||||
|
{vertical.icon}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Title */}
|
||||||
|
<h3 className="flex-1 text-xl text-white">{vertical.title}</h3>
|
||||||
|
|
||||||
|
{/* Expand/Collapse icon */}
|
||||||
|
<ChevronDown
|
||||||
|
className={`
|
||||||
|
w-5 h-5 text-purple-400
|
||||||
|
transition-transform duration-300
|
||||||
|
${expandedIndex === index ? 'rotate-180' : ''}
|
||||||
|
`}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Expanded content */}
|
||||||
|
<div className={`
|
||||||
|
grid grid-rows-[0fr]
|
||||||
|
transition-all duration-300
|
||||||
|
${expandedIndex === index ? 'grid-rows-[1fr] mt-4' : ''}
|
||||||
|
`}>
|
||||||
|
<div className="overflow-hidden">
|
||||||
|
<div className="pl-16 text-gray-400 leading-relaxed">
|
||||||
|
{vertical.description}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Action button */}
|
||||||
|
<div className="pl-16 mt-4">
|
||||||
|
<button className="
|
||||||
|
px-4 py-2 rounded-lg
|
||||||
|
bg-purple-500/20 hover:bg-purple-500/30
|
||||||
|
text-purple-300 text-sm
|
||||||
|
transition-colors duration-300
|
||||||
|
">
|
||||||
|
Explore Solutions
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Testimonials Section */}
|
||||||
|
<div className="container mx-auto px-4 py-16">
|
||||||
|
<h2 className="text-4xl mb-12">Success Stories</h2>
|
||||||
|
<div className="grid md:grid-cols-2 gap-8">
|
||||||
|
{testimonials.map((testimonial, index) => (
|
||||||
|
<motion.div
|
||||||
|
key={index}
|
||||||
|
className="bg-white/5 p-6 rounded-lg hover:bg-gray-700 transition duration-100"
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ delay: index * 0.2 }}
|
||||||
|
>
|
||||||
|
<p className="text-xl mb-4">"{testimonial.quote}"</p>
|
||||||
|
<div>
|
||||||
|
<p className="font-semibold">{testimonial.author}</p>
|
||||||
|
<p className="text-gray-400">{testimonial.role}</p>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* CTA Section */}
|
||||||
|
<div className="container mx-auto px-4 py-16 text-center">
|
||||||
|
<h2 className="text-4xl mb-6">Ready to Monetize Your Expertise?</h2>
|
||||||
|
<p className="text-xl text-gray-300 mb-8 max-w-2xl mx-auto">
|
||||||
|
Unlock the power of AI and community building to create a sustainable, recurring revenue model with your very own MicroSAAS.
|
||||||
|
</p>
|
||||||
|
<button className="bg-blue-600 px-8 py-4 rounded-lg text-lg font-semibold hover:bg-blue-700 transition">
|
||||||
|
Get Started Today
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* FAQ Section */}
|
||||||
|
<div className="container max-w-6xl mx-auto px-4 py-16">
|
||||||
|
<h2 className="text-4xl text-center mb-12">Frequently Asked Questions</h2>
|
||||||
|
<div className="space-y-4 max-w-3xl mx-auto">
|
||||||
|
{faqs.map((faq, index) => (
|
||||||
|
<div key={index} className="border border-gray-700 rounded-lg overflow-hidden">
|
||||||
|
<button
|
||||||
|
className="w-full px-6 py-4 text-left flex items-center justify-between hover:bg-white/5 transition"
|
||||||
|
onClick={() => setExpandedFaq(expandedFaq === index ? null : index)}
|
||||||
|
>
|
||||||
|
<span className="text-lg font-semibold">{faq.question}</span>
|
||||||
|
{expandedFaq === index ? <ChevronUp /> : <ChevronDown />}
|
||||||
|
</button>
|
||||||
|
{expandedFaq === index && (
|
||||||
|
<motion.div
|
||||||
|
initial={{ height: 0 }}
|
||||||
|
animate={{ height: "auto" }}
|
||||||
|
exit={{ height: 0 }}
|
||||||
|
className="px-6 py-4 bg-white/5"
|
||||||
|
>
|
||||||
|
<p className="text-gray-300">{faq.answer}</p>
|
||||||
|
</motion.div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Footer />
|
||||||
|
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default MicroSAASLanding;
|
||||||
@ -130,7 +130,7 @@ export default function SalesHub() {
|
|||||||
{/* Hero Section */}
|
{/* 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="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">
|
<div className="max-w-7xl mx-auto w-full z-10">
|
||||||
<h1 className="text-5xl md:text-7xl lg:text-8xl font-semibold mb-6 bg-clip-text text-transparent bg-gradient-to-r from-white to-gray-400">
|
<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}
|
{heading}
|
||||||
</h1>
|
</h1>
|
||||||
<h2 className="text-2xl md:text-3xl lg:text-4xl max-w-4xl mb-12">
|
<h2 className="text-2xl md:text-3xl lg:text-4xl max-w-4xl mb-12">
|
||||||
@ -185,14 +185,14 @@ export default function SalesHub() {
|
|||||||
{/* Why Everyday Section */}
|
{/* Why Everyday Section */}
|
||||||
<div className="py-24 px-6 md:px-12 bg-gradient-to-b from-[#0A1218] to-[#080E12]">
|
<div className="py-24 px-6 md:px-12 bg-gradient-to-b from-[#0A1218] to-[#080E12]">
|
||||||
<div className="max-w-7xl mx-auto">
|
<div className="max-w-7xl mx-auto">
|
||||||
<h2 className="text-4xl md:text-5xl font-bold mb-16 text-center">
|
<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
|
Why Everyday is the <span className="text-indigo-400">Perfect Fit</span> for Sales Teams
|
||||||
</h2>
|
</h2>
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-10">
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-10">
|
||||||
{whyEveryday.map((item, index) => (
|
{whyEveryday.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 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>
|
<div className="mb-6">{item.icon}</div>
|
||||||
<h3 className="text-2xl font-semibold mb-4">{item.title}</h3>
|
<h3 className="text-2xl mb-4">{item.title}</h3>
|
||||||
<p className="text-gray-300">{item.description}</p>
|
<p className="text-gray-300">{item.description}</p>
|
||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
@ -203,7 +203,7 @@ export default function SalesHub() {
|
|||||||
{/* Features Grid */}
|
{/* Features Grid */}
|
||||||
<div className="py-24 px-6 md:px-12">
|
<div className="py-24 px-6 md:px-12">
|
||||||
<div className="max-w-7xl mx-auto">
|
<div className="max-w-7xl mx-auto">
|
||||||
<h2 className="text-4xl md:text-5xl font-bold mb-4 text-center">All Features</h2>
|
<h2 className="text-4xl md:text-5xl mb-4 text-center">All Features</h2>
|
||||||
<p className="text-xl text-gray-300 text-center mb-16 max-w-3xl mx-auto">
|
<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
|
Everything you need to optimize your sales workflows in one powerful platform
|
||||||
</p>
|
</p>
|
||||||
@ -211,7 +211,7 @@ export default function SalesHub() {
|
|||||||
{features.map((feature, index) => (
|
{features.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 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>
|
<div className="mb-6">{feature.icon}</div>
|
||||||
<h3 className="text-2xl font-semibold mb-4">{feature.head}</h3>
|
<h3 className="text-2xl mb-4">{feature.head}</h3>
|
||||||
<p className="text-gray-300 mb-6">{feature.desc}</p>
|
<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`}>
|
<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`}>
|
||||||
{feature.button}
|
{feature.button}
|
||||||
@ -236,7 +236,7 @@ export default function SalesHub() {
|
|||||||
{/* Detailed Features */}
|
{/* Detailed Features */}
|
||||||
<div className="py-24 px-6 md:px-12 bg-gradient-to-b from-[#0A1218] to-[#080E12]">
|
<div className="py-24 px-6 md:px-12 bg-gradient-to-b from-[#0A1218] to-[#080E12]">
|
||||||
<div className="max-w-7xl mx-auto">
|
<div className="max-w-7xl mx-auto">
|
||||||
<h2 className="text-4xl md:text-5xl font-bold mb-16 text-center">
|
<h2 className="text-4xl md:text-5xl mb-16 text-center">
|
||||||
Powerful <span className="text-sky-400">Features</span> for Modern Sales Teams
|
Powerful <span className="text-sky-400">Features</span> for Modern Sales Teams
|
||||||
</h2>
|
</h2>
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-12">
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-12">
|
||||||
@ -244,7 +244,7 @@ export default function SalesHub() {
|
|||||||
<div key={index} className="flex gap-6">
|
<div key={index} className="flex gap-6">
|
||||||
<div className="flex-shrink-0">{feature.icon}</div>
|
<div className="flex-shrink-0">{feature.icon}</div>
|
||||||
<div>
|
<div>
|
||||||
<h3 className="text-2xl font-semibold mb-3">{feature.title}</h3>
|
<h3 className="text-2xl mb-3">{feature.title}</h3>
|
||||||
<p className="text-gray-300 mb-4">{feature.description}</p>
|
<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">
|
<div className="bg-gray-800/50 p-4 rounded-lg border-l-4 border-indigo-500">
|
||||||
<p className="text-gray-200">{feature.subFeature}</p>
|
<p className="text-gray-200">{feature.subFeature}</p>
|
||||||
@ -259,7 +259,7 @@ export default function SalesHub() {
|
|||||||
{/* Marketplace Section */}
|
{/* Marketplace Section */}
|
||||||
<div className="py-24 px-6 md:px-12">
|
<div className="py-24 px-6 md:px-12">
|
||||||
<div className="max-w-7xl mx-auto">
|
<div className="max-w-7xl mx-auto">
|
||||||
<h2 className="text-4xl md:text-5xl font-bold mb-6 text-center">
|
<h2 className="text-4xl md:text-5xl mb-6 text-center">
|
||||||
Start Swiftly with Everyday Marketplace
|
Start Swiftly with Everyday Marketplace
|
||||||
</h2>
|
</h2>
|
||||||
<p className="text-xl text-gray-300 text-center mb-16 max-w-3xl mx-auto">
|
<p className="text-xl text-gray-300 text-center mb-16 max-w-3xl mx-auto">
|
||||||
@ -268,7 +268,7 @@ export default function SalesHub() {
|
|||||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||||
{features.slice(0, 3).map((feature, index) => (
|
{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">
|
<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 font-semibold mb-4">{feature.head}</h3>
|
<h3 className="text-2xl mb-4">{feature.head}</h3>
|
||||||
<p className="text-gray-300 mb-6">{feature.desc}</p>
|
<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`}>
|
<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}
|
{feature.button}
|
||||||
@ -282,7 +282,7 @@ export default function SalesHub() {
|
|||||||
{/* CTA Section */}
|
{/* 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="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">
|
<div className="max-w-4xl mx-auto text-center">
|
||||||
<h2 className="text-4xl md:text-5xl font-bold mb-6">
|
<h2 className="text-4xl md:text-5xl mb-6">
|
||||||
Ready to Transform Your Sales Workflow?
|
Ready to Transform Your Sales Workflow?
|
||||||
</h2>
|
</h2>
|
||||||
<p className="text-xl text-gray-300 mb-10">
|
<p className="text-xl text-gray-300 mb-10">
|
||||||
|
|||||||
0
app/services/page.tsx
Normal file
0
app/services/page.tsx
Normal file
@ -67,7 +67,7 @@ const HeroCarousel = () => {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<div className='h-screen flex flex-col items-end justify-end'>
|
<div className='h-screen flex flex-col items-end justify-end'>
|
||||||
<div className="relative h-[700px] w-full overflow-hidden">
|
<div className="relative h-[92%] w-full overflow-hidden">
|
||||||
{/* Slides */}
|
{/* Slides */}
|
||||||
<div className="relative h-full w-full">
|
<div className="relative h-full w-full">
|
||||||
{slides.map((slide, index) => (
|
{slides.map((slide, index) => (
|
||||||
|
|||||||
@ -7,7 +7,7 @@ import { GrTemplate } from 'react-icons/gr';
|
|||||||
import { IoIosApps, IoIosDocument, IoIosMail, IoMdAnalytics, IoMdArrowRoundForward } from 'react-icons/io';
|
import { IoIosApps, IoIosDocument, IoIosMail, IoMdAnalytics, IoMdArrowRoundForward } from 'react-icons/io';
|
||||||
import { IoFlash, IoText } from 'react-icons/io5';
|
import { IoFlash, IoText } from 'react-icons/io5';
|
||||||
import { LuWorkflow } from 'react-icons/lu';
|
import { LuWorkflow } from 'react-icons/lu';
|
||||||
import { MdSecurity, MdTranslate } from 'react-icons/md';
|
import { MdAutoAwesome, MdSecurity, MdStore, MdTranslate } from 'react-icons/md';
|
||||||
import { RiMoneyEuroBoxFill, RiProductHuntFill } from 'react-icons/ri';
|
import { RiMoneyEuroBoxFill, RiProductHuntFill } from 'react-icons/ri';
|
||||||
import { VscTools } from 'react-icons/vsc';
|
import { VscTools } from 'react-icons/vsc';
|
||||||
|
|
||||||
@ -74,6 +74,12 @@ const productItems = [
|
|||||||
icon: <IoIosApps className="h-10 w-10 p-2 rounded-lg items-center bg-white text-violet-500" />,
|
icon: <IoIosApps className="h-10 w-10 p-2 rounded-lg items-center bg-white text-violet-500" />,
|
||||||
link: '/analytics-dashboard',
|
link: '/analytics-dashboard',
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
name: 'Micro-Saas',
|
||||||
|
description: 'Build Your MicroSAAS & Grow Your Community',
|
||||||
|
icon: <IoIosApps className="h-10 w-10 p-2 rounded-lg items-center bg-white text-violet-500" />,
|
||||||
|
link: '/micro-saas',
|
||||||
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
@ -230,6 +236,19 @@ const solutionItems: SolutionItem[] = [
|
|||||||
icon: <MdSecurity className='h-10 w-10 p-2 rounded-lg items-center bg-white text-violet-500' />,
|
icon: <MdSecurity className='h-10 w-10 p-2 rounded-lg items-center bg-white text-violet-500' />,
|
||||||
link: '/security'
|
link: '/security'
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
name: 'Marketplace',
|
||||||
|
description: 'Explore a wide range of AI-driven tools and solutions tailored for your business.',
|
||||||
|
icon: <MdStore className='h-10 w-10 p-2 rounded-lg items-center bg-white text-violet-500' />,
|
||||||
|
link: '/marketplace'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'GenAI Readiness Program',
|
||||||
|
description: 'Prepare your organization for the future with cutting-edge AI adoption strategies.',
|
||||||
|
icon: <MdAutoAwesome className='h-10 w-10 p-2 rounded-lg items-center bg-white text-violet-500' />,
|
||||||
|
link: '/genai-readiness'
|
||||||
|
}
|
||||||
|
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|||||||
@ -82,6 +82,8 @@ const Navbar: React.FC = () => {
|
|||||||
</span>
|
</span>
|
||||||
)}
|
)}
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
|
<a href="/ai-agents"><li className='flex items-center cursor-pointer'>AI Agents</li></a>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
{/* Hamburger Icon for Mobile View */}
|
{/* Hamburger Icon for Mobile View */}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user