mirror of
https://github.com/codebox283/everydayserieswebsite.git
synced 2025-06-19 20:10:52 +00:00
added agents and marketplace pages
This commit is contained in:
codebox283
parent
414d801515
commit
728584f48f
45
app/_app.tsx
Normal file
45
app/_app.tsx
Normal file
@ -0,0 +1,45 @@
|
|||||||
|
import { useEffect } from 'react';
|
||||||
|
import Script from 'next/script';
|
||||||
|
import type { AppProps } from 'next/app';
|
||||||
|
import '../styles/globals.css';
|
||||||
|
|
||||||
|
// Add a TypeScript declaration for the clarity property on the window object
|
||||||
|
declare global {
|
||||||
|
interface Window {
|
||||||
|
clarity: (...args: any[]) => void;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function MyApp({ Component, pageProps }: AppProps) {
|
||||||
|
useEffect(() => {
|
||||||
|
// Initialize Clarity
|
||||||
|
if (typeof window !== 'undefined') {
|
||||||
|
window.clarity = window.clarity || function () {
|
||||||
|
(window.clarity as any).q = (window.clarity as any).q || [];
|
||||||
|
(window.clarity as any).q.push(arguments);
|
||||||
|
};
|
||||||
|
window.clarity('set', 'projectId', 'qkmypl9uld');
|
||||||
|
}
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Script
|
||||||
|
id="clarity-script"
|
||||||
|
strategy="afterInteractive"
|
||||||
|
dangerouslySetInnerHTML={{
|
||||||
|
__html: `
|
||||||
|
(function(c,l,a,r,i,t,y){
|
||||||
|
c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
|
||||||
|
t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
|
||||||
|
y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
|
||||||
|
})(window, document, "clarity", "script", "YOUR_CLARITY_PROJECT_ID");
|
||||||
|
`,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<Component {...pageProps} />
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default MyApp;
|
||||||
173
app/agents/page.tsx
Normal file
173
app/agents/page.tsx
Normal file
@ -0,0 +1,173 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import React, { useState } from 'react';
|
||||||
|
import Navbar from '@/components/Navbar/navbar';
|
||||||
|
import Footer from "@/components/footer";
|
||||||
|
import { motion } from 'framer-motion';
|
||||||
|
import { FaArrowRight } from 'react-icons/fa';
|
||||||
|
|
||||||
|
const heading = "Agents - Discover and Utilize AI Agents for Various Tasks"
|
||||||
|
const description = "Browse through a wide range of AI agents categorized by their expertise. Find the perfect agent to automate your tasks and improve efficiency."
|
||||||
|
|
||||||
|
const agents = [
|
||||||
|
{
|
||||||
|
name: "Agent 1",
|
||||||
|
email: "agent1@example.com",
|
||||||
|
intro: "Agent 1 specializes in customer support to help improve your workflow.",
|
||||||
|
image: "https://plus.unsplash.com/premium_photo-1661434914660-c68d9fd54753?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MXx8Y3VzdG9tZXIlMjBzdXBwb3J0fGVufDB8fDB8fHww",
|
||||||
|
category: "Customer Support",
|
||||||
|
appsLink: "https://example.com/agent1/apps"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Agent 2",
|
||||||
|
email: "agent2@example.com",
|
||||||
|
intro: "Agent 2 specializes in customer support to help improve your workflow.",
|
||||||
|
image: "https://plus.unsplash.com/premium_photo-1661764559869-f6052a14b4c9?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8OXx8Y3VzdG9tZXIlMjBzdXBwb3J0fGVufDB8fDB8fHww",
|
||||||
|
category: "Customer Support",
|
||||||
|
appsLink: "https://example.com/agent2/apps"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Agent 3",
|
||||||
|
email: "agent3@example.com",
|
||||||
|
intro: "Agent 3 specializes in sales to help improve your workflow.",
|
||||||
|
image: "https://images.unsplash.com/photo-1560250056-07ba64664864?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8c2FsZXN8ZW58MHx8MHx8fDA%3D",
|
||||||
|
category: "Sales",
|
||||||
|
appsLink: "https://example.com/agent3/apps"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Agent 4",
|
||||||
|
email: "agent4@example.com",
|
||||||
|
intro: "Agent 4 specializes in sales to help improve your workflow.",
|
||||||
|
image: "https://images.unsplash.com/photo-1542744174-a35e40ade835?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTl8fHNhbGVzfGVufDB8fDB8fHww",
|
||||||
|
category: "Sales",
|
||||||
|
appsLink: "https://example.com/agent4/apps"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Agent 5",
|
||||||
|
email: "agent5@example.com",
|
||||||
|
intro: "Agent 5 specializes in marketing to help improve your workflow.",
|
||||||
|
image: "https://plus.unsplash.com/premium_photo-1696942353136-c3735fadc15a?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NXx8bWFya2V0dGluZ3xlbnwwfHwwfHx8MA%3D%3D",
|
||||||
|
category: "Marketing",
|
||||||
|
appsLink: "https://example.com/agent5/apps"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Agent 6",
|
||||||
|
email: "agent6@example.com",
|
||||||
|
intro: "Agent 6 specializes in marketing to help improve your workflow.",
|
||||||
|
image: "https://via.placeholder.com/150?text=Agent+6",
|
||||||
|
category: "Marketing",
|
||||||
|
appsLink: "https://example.com/agent6/apps"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Agent 7",
|
||||||
|
email: "agent7@example.com",
|
||||||
|
intro: "Agent 7 specializes in HR to help improve your workflow.",
|
||||||
|
image: "https://via.placeholder.com/150?text=Agent+7",
|
||||||
|
category: "HR",
|
||||||
|
appsLink: "https://example.com/agent7/apps"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Agent 8",
|
||||||
|
email: "agent8@example.com",
|
||||||
|
intro: "Agent 8 specializes in HR to help improve your workflow.",
|
||||||
|
image: "https://via.placeholder.com/150?text=Agent+8",
|
||||||
|
category: "HR",
|
||||||
|
appsLink: "https://example.com/agent8/apps"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Agent 9",
|
||||||
|
email: "agent9@example.com",
|
||||||
|
intro: "Agent 9 specializes in project management to help improve your workflow.",
|
||||||
|
image: "https://via.placeholder.com/150?text=Agent+9",
|
||||||
|
category: "Project Management",
|
||||||
|
appsLink: "https://example.com/agent9/apps"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Agent 10",
|
||||||
|
email: "agent10@example.com",
|
||||||
|
intro: "Agent 10 specializes in project management to help improve your workflow.",
|
||||||
|
image: "https://via.placeholder.com/150?text=Agent+10",
|
||||||
|
category: "Project Management",
|
||||||
|
appsLink: "https://example.com/agent10/apps"
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
const categories = ['All', 'Customer Support', 'Sales', 'Marketing', 'HR', 'Project Management'];
|
||||||
|
|
||||||
|
export default function Agents() {
|
||||||
|
const [selectedCategory, setSelectedCategory] = useState('All');
|
||||||
|
|
||||||
|
const filteredAgents = selectedCategory === 'All' ? agents : agents.filter(agent => agent.category === selectedCategory);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen bg-[#080E12] dark text-white overflow-x-hidden">
|
||||||
|
<Navbar />
|
||||||
|
|
||||||
|
{/* Hero Section */}
|
||||||
|
<div className='h-screen py-10 px-10 flex flex-col items-start justify-center'>
|
||||||
|
<h1 className="text-8xl mb-10">{heading}</h1>
|
||||||
|
<h2 className='text-4xl'>{description}</h2>
|
||||||
|
</div>
|
||||||
|
<div className="max-w-7xl mx-auto flex">
|
||||||
|
|
||||||
|
{/* Category Filters */}
|
||||||
|
<aside className="w-1/4 py-8 px-4 md:px-8 border-r">
|
||||||
|
<div className="sticky top-20">
|
||||||
|
<h3 className="text-2xl mb-4">Categories</h3>
|
||||||
|
<div className="flex flex-col space-y-4 mt-20">
|
||||||
|
{categories.map((category, index) => (
|
||||||
|
<button
|
||||||
|
key={index}
|
||||||
|
onClick={() => setSelectedCategory(category)}
|
||||||
|
className={`px-4 py-2 rounded-lg transition-all text-left ${selectedCategory === category ? 'text-white' : 'text-gray-400'}`}
|
||||||
|
>
|
||||||
|
{category}
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</aside>
|
||||||
|
|
||||||
|
{/* Agents List */}
|
||||||
|
<section className="w-3/4 py-16 px-4 md:px-8">
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, y: 30 }}
|
||||||
|
whileInView={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ duration: 0.6 }}
|
||||||
|
viewport={{ once: true }}
|
||||||
|
className="max-w-7xl mx-auto"
|
||||||
|
>
|
||||||
|
{/* <h2 className="text-3xl md:text-4xl mb-12 text-center bg-clip-text text-transparent bg-gradient-to-r from-white to-violet-300">
|
||||||
|
Available Agents
|
||||||
|
</h2> */}
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||||
|
{filteredAgents.map((agent, index) => (
|
||||||
|
<motion.div
|
||||||
|
key={index}
|
||||||
|
initial={{ opacity: 0, y: 30 }}
|
||||||
|
whileInView={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ duration: 0.6, delay: index * 0.1 }}
|
||||||
|
viewport={{ once: true }}
|
||||||
|
className="bg-[#121212] border border-gray-800 rounded-xl p-6"
|
||||||
|
>
|
||||||
|
<img src={agent.image} alt={agent.name} className="w-full h-40 object-cover rounded-lg mb-4" />
|
||||||
|
<h3 className="text-md text-white font-medium mb-2">{agent.name}</h3>
|
||||||
|
<p className="text-gray-400 mb-2 text-sm">{agent.email}</p>
|
||||||
|
<p className="text-gray-400 mb-4 text-sm">{agent.intro}</p>
|
||||||
|
<div className="text-gray-400">
|
||||||
|
<a href={agent.appsLink} className="font-medium text-xs px-6 py-3 rounded-lg flex transition-all items-center gap-2">
|
||||||
|
Explore Apps
|
||||||
|
<FaArrowRight className="transition-transform duration-300 hover:ml-4" />
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<Footer />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -1,6 +1,7 @@
|
|||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
import { useState, useEffect } from 'react';
|
||||||
import { motion } from 'framer-motion';
|
import { motion } from 'framer-motion';
|
||||||
import { MessageCircle, CheckCircle, Lightbulb, Code, Users, ArrowRight, Settings, Brain, RefreshCw, UserCheck, ChevronRight } from 'lucide-react';
|
import { MessageCircle, CheckCircle, Lightbulb, Code, Users, ArrowRight, Settings, Brain, RefreshCw, UserCheck, ChevronRight } from 'lucide-react';
|
||||||
import Navbar from '@/components/Navbar/navbar';
|
import Navbar from '@/components/Navbar/navbar';
|
||||||
@ -86,6 +87,70 @@ const ConversationalAIAgents = () => {
|
|||||||
}
|
}
|
||||||
];
|
];
|
||||||
|
|
||||||
|
const agents = [
|
||||||
|
{
|
||||||
|
name: "Agent 1",
|
||||||
|
email: "agent1@example.com",
|
||||||
|
intro: "With years of experience in customer support and engagement, Agent 1 has played a crucial role in transforming how businesses interact with their customers. They have led support teams for multiple startups, ensuring that customers receive prompt and effective assistance. Specializing in AI-powered chatbots, ticketing systems, and automated workflows, Agent 1 helps optimize response times and customer satisfaction. Their deep understanding of customer behavior allows them to create personalized support experiences, improving retention rates and overall user engagement. Beyond support, they focus on data-driven insights to enhance service quality and drive operational efficiency. They have consulted for companies looking to scale their customer service operations while maintaining a high standard of support.",
|
||||||
|
image: "https://images.unsplash.com/photo-1539571696357-5a69c17a67c6?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Nnx8cGVvcGxlfGVufDB8fDB8fHww",
|
||||||
|
apps: [
|
||||||
|
{ icon: "https://cdn-icons-png.flaticon.com/128/2463/2463046.png", name: "ChatFlow AI", link: "https://chatflow.example.com" },
|
||||||
|
{ icon: "https://cdn-icons-png.flaticon.com/128/2706/2706950.png", name: "SupportPro", link: "https://supportpro.example.com" },
|
||||||
|
{ icon: "https://cdn-icons-png.flaticon.com/128/2839/2839174.png", name: "Feedbackly", link: "https://feedbackly.example.com" },
|
||||||
|
{ icon: "https://cdn-icons-png.flaticon.com/128/3129/3129290.png", name: "Crazily", link: "https://feedbackly.example.com" }
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Agent 2",
|
||||||
|
email: "agent2@example.com",
|
||||||
|
intro: "Agent 2 is a seasoned expert in sales and marketing automation, helping businesses maximize revenue through data-driven strategies. Their expertise spans lead generation, conversion optimization, and CRM automation. They have successfully implemented email marketing sequences, predictive analytics, and customer segmentation techniques to improve sales performance. Understanding the importance of multi-channel marketing, they have experience with PPC campaigns, SEO, and influencer partnerships. Their knowledge of automation tools enables businesses to scale outreach efforts efficiently. They have worked with both B2B and B2C brands, developing high-converting sales funnels for sustainable business growth.",
|
||||||
|
image: "https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8cGVvcGxlfGVufDB8fDB8fHww",
|
||||||
|
apps: [
|
||||||
|
{ icon: "https://cdn-icons-png.flaticon.com/128/3271/3271314.png", name: "SalesBoost", link: "https://salesboost.example.com" },
|
||||||
|
{ icon: "https://cdn-icons-png.flaticon.com/128/12990/12990669.png", name: "EmailFlow", link: "https://emailflow.example.com" },
|
||||||
|
{ icon: "https://cdn-icons-png.flaticon.com/128/13088/13088153.png", name: "AdOptimizer", link: "https://adoptimizer.example.com" }
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Agent 3",
|
||||||
|
email: "agent3@example.com",
|
||||||
|
intro: "With a keen eye for organization and efficiency, Agent 3 specializes in HR and administrative tasks, ensuring that businesses run smoothly behind the scenes. They have managed large-scale recruitment processes, streamlined payroll systems, and introduced employee wellness programs to enhance workplace productivity. Agent 3 excels in automating repetitive HR tasks such as onboarding, leave management, and performance tracking. Their expertise in compliance and labor laws helps businesses stay ahead of regulatory requirements while fostering a positive work culture. They have also played a key role in designing internal communication platforms that improve team collaboration and transparency within organizations.",
|
||||||
|
image: "https://plus.unsplash.com/premium_photo-1671656349322-41de944d259b?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NDF8fHBlb3BsZXxlbnwwfHwwfHx8MA%3D%3D",
|
||||||
|
apps: [
|
||||||
|
{ icon: "https://cdn-icons-png.flaticon.com/128/2920/2920316.png", name: "HRStream", link: "https://hrstream.example.com" },
|
||||||
|
{ icon: "https://cdn-icons-png.flaticon.com/128/3006/3006874.png", name: "RecruitEase", link: "https://recruitease.example.com" },
|
||||||
|
{ icon: "https://cdn-icons-png.flaticon.com/128/939/939354.png", name: "PerformTrack", link: "https://performtrack.example.com" }
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Agent 4",
|
||||||
|
email: "agent4@example.com",
|
||||||
|
intro: "Agent 4 is a highly skilled project manager with a strong focus on optimizing team collaboration and workflow efficiency. They have successfully led multiple software development teams, ensuring that projects are completed on time and within budget. Specializing in Agile and Scrum methodologies, Agent 4 helps teams stay aligned with project goals through structured sprints and daily stand-ups. Their ability to integrate project management tools with automation enables companies to track progress, identify bottlenecks, and maintain high productivity levels. They have worked on cross-functional projects involving engineering, design, and marketing teams, ensuring smooth coordination and execution. Their leadership skills and problem-solving approach make them an invaluable asset in any organization.",
|
||||||
|
image: "https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8M3x8cGVvcGxlfGVufDB8fDB8fHww",
|
||||||
|
apps: [
|
||||||
|
{ icon: "https://cdn-icons-png.flaticon.com/128/14571/14571652.png", name: "TaskFlow", link: "https://taskflow.example.com" },
|
||||||
|
{ icon: "https://cdn-icons-png.flaticon.com/128/1087/1087840.png", name: "AgileSync", link: "https://agilesync.example.com" },
|
||||||
|
{ icon: "https://cdn-icons-png.flaticon.com/128/2331/2331970.png", name: "KanbanPro", link: "https://kanbanpro.example.com" }
|
||||||
|
]
|
||||||
|
}
|
||||||
|
];
|
||||||
|
const [currentSlide, setCurrentSlide] = useState(0);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const timer = setInterval(() => {
|
||||||
|
setCurrentSlide((prev) => (prev + 1) % agents.length);
|
||||||
|
}, 10000);
|
||||||
|
|
||||||
|
return () => clearInterval(timer);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const nextSlide = () => {
|
||||||
|
setCurrentSlide((prev) => (prev + 1) % agents.length);
|
||||||
|
};
|
||||||
|
|
||||||
|
const prevSlide = () => {
|
||||||
|
setCurrentSlide((prev) => (prev - 1 + agents.length) % agents.length);
|
||||||
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="w-full p-6 bg-[#080E12] min-h-screen space-y-36">
|
<div className="w-full p-6 bg-[#080E12] min-h-screen space-y-36">
|
||||||
@ -100,7 +165,7 @@ const ConversationalAIAgents = () => {
|
|||||||
{/* Animated Gradient Background */}
|
{/* Animated Gradient Background */}
|
||||||
<motion.div
|
<motion.div
|
||||||
initial={{ opacity: 0, scale: 0.9, rotate: 0 }}
|
initial={{ opacity: 0, scale: 0.9, rotate: 0 }}
|
||||||
animate={{ opacity: 0.15, scale: 1.9, rotate: 8 }}
|
animate={{ opacity: 1, scale: 1.9, rotate: 8 }}
|
||||||
transition={{ duration: 2, repeat: Infinity, repeatType: "mirror", ease: "easeInOut" }}
|
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"
|
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"
|
||||||
/>
|
/>
|
||||||
@ -129,6 +194,15 @@ const ConversationalAIAgents = () => {
|
|||||||
>
|
>
|
||||||
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.
|
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>
|
</motion.p>
|
||||||
|
|
||||||
|
<motion.a
|
||||||
|
initial={{ opacity: 0 }}
|
||||||
|
animate={{ opacity: 1 }}
|
||||||
|
href="#agents"
|
||||||
|
className="bg-white px-8 py-3 rounded-lg hover:bg-black hover:shadow-white/10 hover:shadow-md transition-all duration-300"
|
||||||
|
>
|
||||||
|
<button className="bg-gradient-to-r from-[#EC4899] to-[#A855F7] text-transparent bg-clip-text text-lg font-medium">Explore our agents</button>
|
||||||
|
</motion.a>
|
||||||
</div>
|
</div>
|
||||||
</motion.section>
|
</motion.section>
|
||||||
|
|
||||||
@ -282,6 +356,49 @@ const ConversationalAIAgents = () => {
|
|||||||
</div>
|
</div>
|
||||||
</motion.section>
|
</motion.section>
|
||||||
|
|
||||||
|
{/* Agents Slideshow Section */}
|
||||||
|
<motion.section
|
||||||
|
id='agents'
|
||||||
|
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">Meet Our Agents</h2>
|
||||||
|
<div className="relative w-full overflow-hidden">
|
||||||
|
<div className="flex transition-transform duration-700" style={{ transform: `translateX(-${currentSlide * 100}%)` }}>
|
||||||
|
{agents.map((agent, index) => (
|
||||||
|
<div key={index} className="w-full flex bg-[#121212] border border-gray-800 rounded-xl p-6 flex-shrink-0 snap-center">
|
||||||
|
<div className='w-1/3 px-4'>
|
||||||
|
<img src={agent.image} alt={agent.name} className="h-[400px] w-full object-cover rounded-lg mb-4" />
|
||||||
|
<h3 className="text-xl text-white font-medium mb-2">{agent.name}</h3>
|
||||||
|
<p className="text-gray-400 mb-2">{agent.email}</p>
|
||||||
|
</div>
|
||||||
|
<div className='w-2/3 px-4'>
|
||||||
|
<p className="text-gray-400 mb-4">{agent.intro}</p>
|
||||||
|
<div className="text-gray-400">
|
||||||
|
<h4 className="text-lg text-white mb-2">Apps:</h4>
|
||||||
|
<div className="flex flex-wrap gap-4">
|
||||||
|
{agent.apps.slice(0, 3).map((app, i) => (
|
||||||
|
<a key={i} href={app.link} target="_blank" rel="noopener noreferrer" className="flex flex-col items-center gap-2 bg-gray-900 p-3 rounded-lg hover:bg-gray-800 transition">
|
||||||
|
<img src={app.icon} alt={app.name} className="h-6 w-6" />
|
||||||
|
<span className="text-white text-xs">{app.name}</span>
|
||||||
|
</a>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{agent.apps.length > 3 && (
|
||||||
|
<button className="text-blue-500 mt-2">Show more</button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
<button onClick={prevSlide} className="absolute top-1/2 left-0 transform -translate-y-1/2 bg-gray-800 text-white p-2 rounded-full">‹</button>
|
||||||
|
<button onClick={nextSlide} className="absolute top-1/2 right-0 transform -translate-y-1/2 bg-gray-800 text-white p-2 rounded-full">›</button>
|
||||||
|
</div>
|
||||||
|
</motion.section>
|
||||||
|
|
||||||
{/* Get Started Section */}
|
{/* Get Started Section */}
|
||||||
<motion.section
|
<motion.section
|
||||||
initial={{ opacity: 0, y: 20 }}
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
|||||||
File diff suppressed because one or more lines are too long
@ -85,4 +85,9 @@ body {
|
|||||||
body {
|
body {
|
||||||
@apply bg-background text-foreground;
|
@apply bg-background text-foreground;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
html {
|
||||||
|
scroll-behavior: smooth;
|
||||||
|
}
|
||||||
|
|||||||
@ -24,7 +24,7 @@ const geistMono = Geist_Mono({
|
|||||||
});
|
});
|
||||||
|
|
||||||
export const metadata: Metadata = {
|
export const metadata: Metadata = {
|
||||||
title: "Create Next App",
|
title: "EverydaySeries AI",
|
||||||
description: "Generated by create next app",
|
description: "Generated by create next app",
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
319
app/marketplace-page/page.tsx
Normal file
319
app/marketplace-page/page.tsx
Normal file
@ -0,0 +1,319 @@
|
|||||||
|
"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;
|
||||||
@ -1,319 +1,94 @@
|
|||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
import React from 'react';
|
import React, { useState } 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 Navbar from '@/components/Navbar/navbar';
|
||||||
import Footer from '@/components/footer';
|
import Footer from "@/components/footer";
|
||||||
|
import { motion } from 'framer-motion';
|
||||||
|
import { FaArrowRight } from 'react-icons/fa';
|
||||||
|
|
||||||
const AIMarketplace = () => {
|
const heading = "Marketplace - Discover and Try AI Micro SaaS Tools"
|
||||||
|
const description = "Explore a variety of AI-powered tools designed to enhance your business operations. Try them out and purchase the ones that fit your needs."
|
||||||
|
|
||||||
const buyerBenefits = [
|
const tools = Array.from({ length: 50 }, (_, i) => ({
|
||||||
{
|
name: `Tool ${i + 1}`,
|
||||||
title: "Seamless Integration",
|
description: `Tool ${i + 1} is designed to help you with various tasks and improve your workflow.`,
|
||||||
desc: "Easily download, deploy, or subscribe to the code that fits your needs, and start enhancing your operations immediately.",
|
image: `https://via.placeholder.com/150?text=Tool+${i + 1}`,
|
||||||
icon: <Code className="w-6 h-6 text-white" />
|
category: i % 5 === 0 ? 'Productivity' : i % 5 === 1 ? 'Marketing' : i % 5 === 2 ? 'Sales' : i % 5 === 3 ? 'HR' : 'Project Management',
|
||||||
},
|
link: `https://example.com/tool${i + 1}`
|
||||||
{
|
}));
|
||||||
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 = [
|
const categories = ['All', 'Productivity', 'Marketing', 'Sales', 'HR', 'Project Management'];
|
||||||
{
|
|
||||||
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 (
|
export default function Marketplace() {
|
||||||
<div className="w-full p-6 bg-[#080E12] min-h-screen space-y-36">
|
const [selectedCategory, setSelectedCategory] = useState('All');
|
||||||
<Navbar />
|
|
||||||
|
|
||||||
{/* Hero Section */}
|
const filteredTools = selectedCategory === 'All' ? tools : tools.filter(tool => tool.category === selectedCategory);
|
||||||
<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">
|
return (
|
||||||
<motion.h1
|
<div className="min-h-screen bg-[#080E12] dark text-white overflow-x-hidden">
|
||||||
initial={{ opacity: 0 }}
|
<Navbar />
|
||||||
animate={{ opacity: 1 }}
|
|
||||||
className="text-7xl text-white mb-6"
|
{/* Hero Section */}
|
||||||
>
|
<div className='h-screen py-10 px-10 flex flex-col items-start justify-center'>
|
||||||
AI
|
<h1 className="text-8xl mb-10">{heading}</h1>
|
||||||
<span className="bg-gradient-to-r from-[#6EE7B7] to-[#3B82F6] text-transparent bg-clip-text">
|
<h2 className='text-4xl'>{description}</h2>
|
||||||
{" "}Marketplace{" "}
|
</div>
|
||||||
</span>
|
<div className="max-w-7xl mx-auto flex">
|
||||||
</motion.h1>
|
|
||||||
|
{/* Category Filters */}
|
||||||
<div className="absolute bottom-0 left-1/2 transform -translate-x-1/2">
|
<aside className="w-1/4 py-8 px-4 md:px-8 border-r sticky top-0">
|
||||||
<div className="w-32 h-px bg-gradient-to-r from-transparent via-blue-500/30 to-transparent" />
|
<div className="sticky top-20">
|
||||||
</div>
|
<h3 className="text-2xl mb-4">Categories</h3>
|
||||||
|
<div className="flex flex-col space-y-4 mt-20">
|
||||||
<motion.div className="text-4xl text-[#6EE7B7] font-medium mb-6">
|
{categories.map((category, index) => (
|
||||||
Your One-Stop Hub for Ready-to-Go AI Solutions
|
<button
|
||||||
</motion.div>
|
key={index}
|
||||||
|
onClick={() => setSelectedCategory(category)}
|
||||||
<motion.p
|
className={`px-4 py-2 rounded-lg transition-all text-left ${selectedCategory === category ? 'text-white' : 'text-gray-400'}`}
|
||||||
initial={{ opacity: 0 }}
|
>
|
||||||
animate={{ opacity: 1 }}
|
{category}
|
||||||
className="text-gray-400 text-2xl mb-8"
|
</button>
|
||||||
>
|
))}
|
||||||
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.
|
</div>
|
||||||
</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>
|
</div>
|
||||||
);
|
</aside>
|
||||||
};
|
|
||||||
|
|
||||||
export default AIMarketplace;
|
{/* Tools List */}
|
||||||
|
<section className="w-3/4 py-16 px-4 md:px-8">
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, y: 30 }}
|
||||||
|
whileInView={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ duration: 0.6 }}
|
||||||
|
viewport={{ once: true }}
|
||||||
|
className="max-w-7xl mx-auto"
|
||||||
|
>
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||||
|
{filteredTools.map((tool, index) => (
|
||||||
|
<motion.div
|
||||||
|
key={index}
|
||||||
|
initial={{ opacity: 0, y: 30 }}
|
||||||
|
whileInView={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ duration: 0.6, delay: index * 0.1 }}
|
||||||
|
viewport={{ once: true }}
|
||||||
|
className="bg-[#121212] border border-gray-800 rounded-xl p-6"
|
||||||
|
>
|
||||||
|
<img src={tool.image} alt={tool.name} className="w-full h-40 object-cover rounded-lg mb-4" />
|
||||||
|
<h3 className="text-md text-white font-medium mb-2">{tool.name}</h3>
|
||||||
|
<p className="text-gray-400 mb-4 text-sm">{tool.description}</p>
|
||||||
|
<div className="text-gray-400">
|
||||||
|
<a href={tool.link} className="font-medium text-xs px-6 py-3 rounded-lg transition-all shadow-lg flex items-center gap-2 hover:scale-105">
|
||||||
|
Try Now
|
||||||
|
<FaArrowRight className="transition-transform duration-300" />
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<Footer />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|||||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
153
app/tools/page.tsx
Normal file
153
app/tools/page.tsx
Normal file
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -21,7 +21,7 @@ const slides = [
|
|||||||
overlayClass: "bg-black/60"
|
overlayClass: "bg-black/60"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "Unleash Your Creative Potentialr",
|
title: "Unleash Your Creative Potential",
|
||||||
description: "From forms and video editing to AI writing and newsletters, our fully integrated creative suite brings your vision to life with the power of AI.",
|
description: "From forms and video editing to AI writing and newsletters, our fully integrated creative suite brings your vision to life with the power of AI.",
|
||||||
buttonText: "Discover Our Tools",
|
buttonText: "Discover Our Tools",
|
||||||
buttonLink: "/tools",
|
buttonLink: "/tools",
|
||||||
|
|||||||
@ -157,12 +157,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: '/data-syncing',
|
link: '/data-syncing',
|
||||||
},
|
},
|
||||||
{
|
// {
|
||||||
name: 'Analytics Dashboard',
|
// name: 'Analytics Dashboard',
|
||||||
description: 'Visualize your workflow performance.',
|
// description: 'Visualize your workflow performance.',
|
||||||
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',
|
name: 'Micro-Saas',
|
||||||
description: 'Build Your MicroSAAS & Grow Your Community',
|
description: 'Build Your MicroSAAS & Grow Your Community',
|
||||||
@ -257,12 +257,12 @@ const solutionItems: SolutionItem[] = [
|
|||||||
icon: <FaServicestack className='h-10 w-10 p-2 rounded-lg items-center bg-white text-violet-500' />,
|
icon: <FaServicestack className='h-10 w-10 p-2 rounded-lg items-center bg-white text-violet-500' />,
|
||||||
link: '/services'
|
link: '/services'
|
||||||
},
|
},
|
||||||
{
|
// {
|
||||||
name: 'Security',
|
// name: 'Security',
|
||||||
description: 'Protect your data with next-gen secure workflows',
|
// description: 'Protect your data with next-gen secure workflows',
|
||||||
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',
|
name: 'Marketplace',
|
||||||
description: 'Explore a wide range of AI-driven tools and solutions tailored for your business.',
|
description: 'Explore a wide range of AI-driven tools and solutions tailored for your business.',
|
||||||
|
|||||||
@ -68,12 +68,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: '/data-syncing',
|
link: '/data-syncing',
|
||||||
},
|
},
|
||||||
{
|
// {
|
||||||
name: 'Analytics Dashboard',
|
// name: 'Analytics Dashboard',
|
||||||
description: 'Visualize your workflow performance.',
|
// description: 'Visualize your workflow performance.',
|
||||||
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',
|
name: 'Micro-Saas',
|
||||||
description: 'Build Your MicroSAAS & Grow Your Community',
|
description: 'Build Your MicroSAAS & Grow Your Community',
|
||||||
@ -230,12 +230,12 @@ const solutionItems: SolutionItem[] = [
|
|||||||
icon: <FaServicestack className='h-10 w-10 p-2 rounded-lg items-center bg-white text-violet-500' />,
|
icon: <FaServicestack className='h-10 w-10 p-2 rounded-lg items-center bg-white text-violet-500' />,
|
||||||
link: '/services'
|
link: '/services'
|
||||||
},
|
},
|
||||||
{
|
// {
|
||||||
name: 'Security',
|
// name: 'Security',
|
||||||
description: 'Protect your data with next-gen secure workflows',
|
// description: 'Protect your data with next-gen secure workflows',
|
||||||
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',
|
name: 'Marketplace',
|
||||||
description: 'Explore a wide range of AI-driven tools and solutions tailored for your business.',
|
description: 'Explore a wide range of AI-driven tools and solutions tailored for your business.',
|
||||||
|
|||||||
7
package-lock.json
generated
7
package-lock.json
generated
@ -9,6 +9,7 @@
|
|||||||
"version": "0.1.0",
|
"version": "0.1.0",
|
||||||
"license": "ISC",
|
"license": "ISC",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"@microsoft/clarity": "^1.0.0",
|
||||||
"@tabler/icons-react": "^3.28.1",
|
"@tabler/icons-react": "^3.28.1",
|
||||||
"class-variance-authority": "^0.7.1",
|
"class-variance-authority": "^0.7.1",
|
||||||
"clsx": "^2.1.1",
|
"clsx": "^2.1.1",
|
||||||
@ -492,6 +493,12 @@
|
|||||||
"@jridgewell/sourcemap-codec": "^1.4.14"
|
"@jridgewell/sourcemap-codec": "^1.4.14"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/@microsoft/clarity": {
|
||||||
|
"version": "1.0.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/@microsoft/clarity/-/clarity-1.0.0.tgz",
|
||||||
|
"integrity": "sha512-2QY6SmXnqRj6dWhNY8NYCN3e53j4zCFebH4wGnNhdGV1mqAsQwql2fT0w8TISxCvwwfVp8idsWLIdrRHOms1PQ==",
|
||||||
|
"license": "MIT"
|
||||||
|
},
|
||||||
"node_modules/@next/env": {
|
"node_modules/@next/env": {
|
||||||
"version": "15.1.5",
|
"version": "15.1.5",
|
||||||
"resolved": "https://registry.npmjs.org/@next/env/-/env-15.1.5.tgz",
|
"resolved": "https://registry.npmjs.org/@next/env/-/env-15.1.5.tgz",
|
||||||
|
|||||||
@ -17,6 +17,7 @@
|
|||||||
"lint": "next lint"
|
"lint": "next lint"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"@microsoft/clarity": "^1.0.0",
|
||||||
"@tabler/icons-react": "^3.28.1",
|
"@tabler/icons-react": "^3.28.1",
|
||||||
"class-variance-authority": "^0.7.1",
|
"class-variance-authority": "^0.7.1",
|
||||||
"clsx": "^2.1.1",
|
"clsx": "^2.1.1",
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user