mirror of
https://github.com/codebox283/everydayserieswebsite.git
synced 2025-06-19 20:20:54 +00:00
added pages and updated hero
This commit is contained in:
codebox283
parent
e50c0ad513
commit
e32f4efa58
429
app/community/page.tsx
Normal file
429
app/community/page.tsx
Normal file
@ -0,0 +1,429 @@
|
||||
"use client";
|
||||
import React, { useRef } from 'react';
|
||||
import { motion, useScroll, useInView } from "framer-motion";
|
||||
import Navbar from '@/components/Navbar/navbar';
|
||||
import Footer from '@/components/footer';
|
||||
|
||||
const Community = () => {
|
||||
// Animation variants
|
||||
const fadeUp = {
|
||||
hidden: { opacity: 0, y: 30 },
|
||||
visible: {
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
transition: { duration: 0.7, ease: "easeOut" }
|
||||
}
|
||||
};
|
||||
|
||||
const staggerContainer = {
|
||||
hidden: { opacity: 0 },
|
||||
visible: {
|
||||
opacity: 1,
|
||||
transition: {
|
||||
staggerChildren: 0.15
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const cardVariant = {
|
||||
hidden: { opacity: 0, y: 20 },
|
||||
visible: {
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
transition: { duration: 0.5, ease: "easeOut" }
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="w-full bg-[#080E12] overflow-x-hidden">
|
||||
<Navbar />
|
||||
|
||||
{/* Hero Section */}
|
||||
<motion.section
|
||||
className="h-screen flex flex-col justify-center items-center max-w-6xl mx-auto px-6 pt-20"
|
||||
initial="hidden"
|
||||
animate="visible"
|
||||
variants={fadeUp}
|
||||
>
|
||||
<motion.h1
|
||||
className="text-5xl md:text-7xl text-white mb-6 text-center"
|
||||
animate={{
|
||||
backgroundPosition: ["0% 0%", "100% 100%"],
|
||||
}}
|
||||
transition={{
|
||||
duration: 8,
|
||||
repeat: Infinity,
|
||||
repeatType: "reverse"
|
||||
}}
|
||||
style={{
|
||||
backgroundImage: "linear-gradient(90deg, #fff, #a855f7, #ec4899, #fff)",
|
||||
backgroundSize: "200%",
|
||||
WebkitBackgroundClip: "text",
|
||||
WebkitTextFillColor: "transparent"
|
||||
}}
|
||||
>
|
||||
Community
|
||||
</motion.h1>
|
||||
|
||||
<motion.h2
|
||||
className="text-3xl text-center text-white mb-8"
|
||||
variants={{
|
||||
hidden: { opacity: 0, y: 20 },
|
||||
visible: {
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
transition: { delay: 0.2, duration: 0.8 }
|
||||
}
|
||||
}}
|
||||
>
|
||||
Connect, Collaborate, and Innovate
|
||||
</motion.h2>
|
||||
|
||||
<motion.p
|
||||
className="text-gray-400 text-xl max-w-3xl text-center mb-12"
|
||||
variants={{
|
||||
hidden: { opacity: 0, y: 20 },
|
||||
visible: {
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
transition: { delay: 0.4, duration: 0.8 }
|
||||
}
|
||||
}}
|
||||
>
|
||||
At Everyday Series, our community is the heartbeat of our innovation. We're building a vibrant network of solopreneurs, developers, AI enthusiasts, and business leaders committed to transforming expertise into powerful AI agents and solutions.
|
||||
</motion.p>
|
||||
|
||||
<motion.div
|
||||
className="flex flex-wrap gap-4 justify-center"
|
||||
variants={{
|
||||
hidden: { opacity: 0, y: 20 },
|
||||
visible: {
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
transition: { delay: 0.6, duration: 0.8 }
|
||||
}
|
||||
}}
|
||||
>
|
||||
<a href="#offerings" className="px-8 py-4 rounded-lg text-white bg-gradient-to-r from-pink-500 via-purple-500 to-indigo-500 shadow-lg hover:shadow-xl transition-all duration-300">
|
||||
Explore Our Offerings
|
||||
</a>
|
||||
<a href="#join" className="px-8 py-4 rounded-lg text-white border border-purple-500 hover:bg-purple-500/10 transition-all duration-300">
|
||||
Join The Community
|
||||
</a>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
className="absolute bottom-10 left-1/2 transform -translate-x-1/2"
|
||||
animate={{
|
||||
y: [0, 10, 0],
|
||||
}}
|
||||
transition={{
|
||||
duration: 2,
|
||||
repeat: Infinity,
|
||||
repeatType: "loop"
|
||||
}}
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
className="text-purple-500"
|
||||
>
|
||||
<path d="M12 5v14M19 12l-7 7-7-7" />
|
||||
</svg>
|
||||
</motion.div>
|
||||
</motion.section>
|
||||
|
||||
{/* What We Offer Section */}
|
||||
<section id="offerings" className="min-h-screen flex items-center py-20 max-w-6xl mx-auto px-6">
|
||||
<motion.div
|
||||
initial="hidden"
|
||||
whileInView="visible"
|
||||
viewport={{ once: true, amount: 0.2 }}
|
||||
variants={staggerContainer}
|
||||
className="w-full"
|
||||
>
|
||||
<motion.h2
|
||||
className="text-4xl text-white mb-12"
|
||||
variants={fadeUp}
|
||||
>
|
||||
What We Offer
|
||||
</motion.h2>
|
||||
|
||||
<div className="grid md:grid-cols-3 gap-8">
|
||||
{/* Events & Online Meetups */}
|
||||
<motion.div
|
||||
className="bg-[#0F1922] p-8 rounded-xl border border-purple-900/40 hover:border-purple-500/50 transition-all duration-300"
|
||||
variants={cardVariant}
|
||||
whileHover={{ y: -5, transition: { duration: 0.2 } }}
|
||||
>
|
||||
<div className="bg-gradient-to-br from-pink-500 to-purple-600 w-12 h-12 rounded-lg flex items-center justify-center mb-6">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6 text-white" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
||||
<rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
|
||||
<line x1="16" y1="2" x2="16" y2="6"></line>
|
||||
<line x1="8" y1="2" x2="8" y2="6"></line>
|
||||
<line x1="3" y1="10" x2="21" y2="10"></line>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 className="text-2xl text-white mb-4">Events & Online Meetups</h3>
|
||||
<ul className="space-y-4 text-gray-400">
|
||||
<li className="flex items-start">
|
||||
<span className="text-purple-400 mr-2">•</span>
|
||||
<span><strong className="text-white">Live Events:</strong> Attend interactive events and online meetups where industry experts and fellow innovators share insights, success stories, and the latest trends in AI.</span>
|
||||
</li>
|
||||
<li className="flex items-start">
|
||||
<span className="text-purple-400 mr-2">•</span>
|
||||
<span><strong className="text-white">Webinars:</strong> Participate in immersive webinars that dive deep into AI technologies, product demos, and hands-on sessions tailored for solopreneurs and enterprises alike.</span>
|
||||
</li>
|
||||
</ul>
|
||||
</motion.div>
|
||||
|
||||
{/* Cohort-Based Learning */}
|
||||
<motion.div
|
||||
className="bg-[#0F1922] p-8 rounded-xl border border-purple-900/40 hover:border-purple-500/50 transition-all duration-300"
|
||||
variants={cardVariant}
|
||||
whileHover={{ y: -5, transition: { duration: 0.2 } }}
|
||||
>
|
||||
<div className="bg-gradient-to-br from-pink-500 to-purple-600 w-12 h-12 rounded-lg flex items-center justify-center mb-6">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6 text-white" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
||||
<path d="M12 20h9"></path>
|
||||
<path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 className="text-2xl text-white mb-4">Cohort-Based Learning</h3>
|
||||
<ul className="space-y-4 text-gray-400">
|
||||
<li className="flex items-start">
|
||||
<span className="text-purple-400 mr-2">•</span>
|
||||
<span><strong className="text-white">Structured Programs:</strong> Enroll in our cohort-based learning initiatives, including our remote Generative AI Readiness Program, designed for corporates, universities, and individual innovators.</span>
|
||||
</li>
|
||||
<li className="flex items-start">
|
||||
<span className="text-purple-400 mr-2">•</span>
|
||||
<span><strong className="text-white">Collaborative Learning:</strong> Work alongside peers in a guided environment where practical projects and real-world challenges help refine your AI skills.</span>
|
||||
</li>
|
||||
</ul>
|
||||
</motion.div>
|
||||
|
||||
{/* Instant Connectivity */}
|
||||
<motion.div
|
||||
className="bg-[#0F1922] p-8 rounded-xl border border-purple-900/40 hover:border-purple-500/50 transition-all duration-300"
|
||||
variants={cardVariant}
|
||||
whileHover={{ y: -5, transition: { duration: 0.2 } }}
|
||||
>
|
||||
<div className="bg-gradient-to-br from-pink-500 to-purple-600 w-12 h-12 rounded-lg flex items-center justify-center mb-6">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6 text-white" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
||||
<path d="M17 8h3a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2h-3"></path>
|
||||
<path d="M13 8H7a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h6"></path>
|
||||
<path d="M17 12H7"></path>
|
||||
<path d="M7 12v2"></path>
|
||||
<path d="M17 12v2"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 className="text-2xl text-white mb-4">Instant Connectivity</h3>
|
||||
<ul className="space-y-4 text-gray-400">
|
||||
<li className="flex items-start">
|
||||
<span className="text-purple-400 mr-2">•</span>
|
||||
<span><strong className="text-white">Whatsapp Group:</strong> Join our dedicated Whatsapp group for real-time updates, lively discussions, and instant support from fellow community members.</span>
|
||||
</li>
|
||||
<li className="flex items-start">
|
||||
<span className="text-purple-400 mr-2">•</span>
|
||||
<span><strong className="text-white">Open Source Modules:</strong> Contribute to and leverage our extensive library of open source modules—collaborate, share, and build solutions that benefit everyone in the community.</span>
|
||||
</li>
|
||||
</ul>
|
||||
</motion.div>
|
||||
|
||||
{/* Collaborative Partnerships - Full width */}
|
||||
<motion.div
|
||||
className="bg-[#0F1922] p-8 rounded-xl border border-purple-900/40 hover:border-purple-500/50 transition-all duration-300 md:col-span-3"
|
||||
variants={cardVariant}
|
||||
whileHover={{ y: -5, transition: { duration: 0.2 } }}
|
||||
>
|
||||
<div className="bg-gradient-to-br from-pink-500 to-purple-600 w-12 h-12 rounded-lg flex items-center justify-center mb-6">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6 text-white" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
||||
<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
|
||||
<circle cx="9" cy="7" r="4"></circle>
|
||||
<path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
|
||||
<path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 className="text-2xl text-white mb-4">Collaborative Partnerships</h3>
|
||||
<div className="grid md:grid-cols-2 gap-6">
|
||||
<div>
|
||||
<h4 className="text-lg text-white mb-3">Solopreneur Network</h4>
|
||||
<p className="text-gray-400">Connect with a diverse group of solopreneurs offering innovative products and services, creating opportunities for cross-collaboration.</p>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="text-lg text-white mb-3">SMBs & Enterprise</h4>
|
||||
<p className="text-gray-400">We partner with small and medium businesses as well as enterprise organizations to co-create and deploy cutting-edge AI solutions that drive growth and efficiency.</p>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</section>
|
||||
|
||||
{/* Why Join Us Section */}
|
||||
<section className="min-h-screen flex items-center py-20 max-w-6xl mx-auto px-6">
|
||||
<motion.div
|
||||
initial="hidden"
|
||||
whileInView="visible"
|
||||
viewport={{ once: true, amount: 0.2 }}
|
||||
variants={staggerContainer}
|
||||
className="w-full"
|
||||
>
|
||||
<motion.div variants={fadeUp} className="mb-16">
|
||||
<motion.h2 className="text-4xl text-white mb-6">Why Join Us?</motion.h2>
|
||||
<motion.div
|
||||
className="h-1 w-24 bg-gradient-to-r from-pink-500 to-purple-500"
|
||||
animate={{
|
||||
width: ["0%", "10%"],
|
||||
}}
|
||||
transition={{
|
||||
duration: 1,
|
||||
ease: "easeInOut",
|
||||
}}
|
||||
/>
|
||||
</motion.div>
|
||||
|
||||
<div className="grid md:grid-cols-3 gap-8">
|
||||
<motion.div
|
||||
className="relative overflow-hidden rounded-xl group"
|
||||
variants={cardVariant}
|
||||
whileHover={{ y: -5, transition: { duration: 0.2 } }}
|
||||
>
|
||||
<div className="bg-gradient-to-br from-pink-600/20 to-purple-800/20 p-8 rounded-xl border border-purple-500/30 h-full transition-all duration-300 group-hover:bg-gradient-to-br group-hover:from-pink-600/30 group-hover:to-purple-800/30">
|
||||
<div className="mb-6">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" className="h-12 w-12 text-purple-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
||||
<path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"></path>
|
||||
<path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 className="text-2xl text-white mb-4">Learn & Grow</h3>
|
||||
<p className="text-gray-400">Gain exclusive access to resources, expert-led sessions, and collaborative projects that enhance your skills and expand your network.</p>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
className="relative overflow-hidden rounded-xl group"
|
||||
variants={cardVariant}
|
||||
whileHover={{ y: -5, transition: { duration: 0.2 } }}
|
||||
>
|
||||
<div className="bg-gradient-to-br from-pink-600/20 to-purple-800/20 p-8 rounded-xl border border-purple-500/30 h-full transition-all duration-300 group-hover:bg-gradient-to-br group-hover:from-pink-600/30 group-hover:to-purple-800/30">
|
||||
<div className="mb-6">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" className="h-12 w-12 text-purple-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
||||
<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 className="text-2xl text-white mb-4">Innovate Together</h3>
|
||||
<p className="text-gray-400">Be a part of a community where your ideas matter, and collective intelligence sparks breakthrough innovations.</p>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
className="relative overflow-hidden rounded-xl group"
|
||||
variants={cardVariant}
|
||||
whileHover={{ y: -5, transition: { duration: 0.2 } }}
|
||||
>
|
||||
<div className="bg-gradient-to-br from-pink-600/20 to-purple-800/20 p-8 rounded-xl border border-purple-500/30 h-full transition-all duration-300 group-hover:bg-gradient-to-br group-hover:from-pink-600/30 group-hover:to-purple-800/30">
|
||||
<div className="mb-6">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" className="h-12 w-12 text-purple-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
||||
<circle cx="12" cy="12" r="10"></circle>
|
||||
<line x1="2" y1="12" x2="22" y2="12"></line>
|
||||
<path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 className="text-2xl text-white mb-4">Real-World Impact</h3>
|
||||
<p className="text-gray-400">Engage with partners and industry leaders to develop AI solutions that solve real business challenges and drive market success.</p>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</section>
|
||||
|
||||
{/* Call to Action Section */}
|
||||
<motion.section
|
||||
id="join"
|
||||
className="min-h-screen flex items-center justify-center flex-col max-w-6xl mx-auto px-6 py-20"
|
||||
initial="hidden"
|
||||
whileInView="visible"
|
||||
viewport={{ once: true, amount: 0.3 }}
|
||||
variants={fadeUp}
|
||||
>
|
||||
<motion.div
|
||||
className="max-w-3xl mx-auto text-center"
|
||||
variants={fadeUp}
|
||||
>
|
||||
<motion.h2
|
||||
className="text-4xl md:text-5xl text-white mb-8"
|
||||
animate={{
|
||||
backgroundPosition: ["0% 0%", "100% 100%"],
|
||||
}}
|
||||
transition={{
|
||||
duration: 8,
|
||||
repeat: Infinity,
|
||||
repeatType: "reverse"
|
||||
}}
|
||||
style={{
|
||||
backgroundImage: "linear-gradient(90deg, #fff, #a855f7, #ec4899, #fff)",
|
||||
backgroundSize: "200%",
|
||||
WebkitBackgroundClip: "text",
|
||||
WebkitTextFillColor: "transparent"
|
||||
}}
|
||||
>
|
||||
Get Involved
|
||||
</motion.h2>
|
||||
<motion.p
|
||||
className="text-gray-400 text-xl mb-12"
|
||||
variants={{
|
||||
hidden: { opacity: 0, y: 20 },
|
||||
visible: {
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
transition: { delay: 0.3, duration: 0.8 }
|
||||
}
|
||||
}}
|
||||
>
|
||||
Ready to shape the future of AI? Join our community and unlock a world of opportunities. Connect, collaborate, and innovate with like-minded individuals who are as passionate about technology and growth as you are.
|
||||
</motion.p>
|
||||
<motion.div
|
||||
className="flex flex-wrap gap-4 justify-center"
|
||||
variants={{
|
||||
hidden: { opacity: 0, y: 20 },
|
||||
visible: {
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
transition: { delay: 0.5, duration: 0.8 }
|
||||
}
|
||||
}}
|
||||
>
|
||||
<motion.a
|
||||
href="#"
|
||||
className="px-8 py-4 rounded-lg text-white font-medium bg-gradient-to-r from-pink-500 via-purple-500 to-indigo-500 shadow-lg hover:shadow-xl transition-all duration-300 inline-block"
|
||||
whileHover={{ scale: 1.05 }}
|
||||
whileTap={{ scale: 0.95 }}
|
||||
>
|
||||
Join Our Community
|
||||
</motion.a>
|
||||
<motion.a
|
||||
href="#"
|
||||
className="px-8 py-4 rounded-lg text-white font-medium border border-purple-500 hover:bg-purple-500/10 transition-all duration-300 inline-block"
|
||||
whileHover={{ scale: 1.05 }}
|
||||
whileTap={{ scale: 0.95 }}
|
||||
>
|
||||
Learn More About Our Initiatives
|
||||
</motion.a>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
</motion.section>
|
||||
|
||||
<Footer />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Community;
|
||||
@ -1,5 +1,4 @@
|
||||
"use client";
|
||||
"use client";
|
||||
|
||||
import React from 'react';
|
||||
import { motion } from 'framer-motion';
|
||||
|
||||
375
app/meetups/page.tsx
Normal file
375
app/meetups/page.tsx
Normal file
@ -0,0 +1,375 @@
|
||||
"use client";
|
||||
|
||||
import React, { useRef } from 'react';
|
||||
import { motion, useScroll, useTransform, useInView } from "framer-motion";
|
||||
import Navbar from '@/components/Navbar/navbar';
|
||||
import Footer from '@/components/footer';
|
||||
|
||||
const Meetups = () => {
|
||||
const containerRef = useRef(null);
|
||||
|
||||
// Animation variants
|
||||
const fadeIn = {
|
||||
hidden: { opacity: 0, y: 30 },
|
||||
visible: {
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
transition: { duration: 0.8, ease: "easeOut" }
|
||||
}
|
||||
};
|
||||
|
||||
const staggerContainer = {
|
||||
hidden: { opacity: 0 },
|
||||
visible: {
|
||||
opacity: 1,
|
||||
transition: {
|
||||
staggerChildren: 0.2
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const imageCard = {
|
||||
hidden: { opacity: 0, scale: 0.9 },
|
||||
visible: {
|
||||
opacity: 1,
|
||||
scale: 1,
|
||||
transition: { duration: 0.5, ease: "easeOut" }
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="w-full bg-[#080E12] overflow-x-hidden" ref={containerRef}>
|
||||
<Navbar />
|
||||
|
||||
{/* Hero Section */}
|
||||
<motion.section
|
||||
className="h-screen flex flex-col justify-center max-w-6xl mx-auto px-6 pt-20"
|
||||
initial="hidden"
|
||||
animate="visible"
|
||||
variants={fadeIn}
|
||||
>
|
||||
<motion.h1
|
||||
className="text-5xl md:text-7xl text-white mb-6"
|
||||
animate={{
|
||||
backgroundPosition: ["0% 0%", "100% 100%"],
|
||||
}}
|
||||
transition={{
|
||||
duration: 8,
|
||||
repeat: Infinity,
|
||||
repeatType: "reverse"
|
||||
}}
|
||||
style={{
|
||||
backgroundImage: "linear-gradient(90deg, #fff, #a855f7, #ec4899, #fff)",
|
||||
backgroundSize: "200%",
|
||||
WebkitBackgroundClip: "text",
|
||||
WebkitTextFillColor: "transparent"
|
||||
}}
|
||||
>
|
||||
Meetups & Community
|
||||
</motion.h1>
|
||||
|
||||
<motion.p
|
||||
className="text-gray-400 text-xl max-w-3xl mb-12"
|
||||
variants={{
|
||||
hidden: { opacity: 0, y: 20 },
|
||||
visible: {
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
transition: { delay: 0.3, duration: 0.8 }
|
||||
}
|
||||
}}
|
||||
>
|
||||
Connect, Learn, and Innovate with AI Enthusiasts. Join our vibrant community of over 25,000 AI developers, enthusiasts, and doers at Everyday Series Meetups.
|
||||
</motion.p>
|
||||
|
||||
<motion.div
|
||||
className="flex flex-wrap gap-4"
|
||||
variants={{
|
||||
hidden: { opacity: 0, y: 20 },
|
||||
visible: {
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
transition: { delay: 0.5, duration: 0.8 }
|
||||
}
|
||||
}}
|
||||
>
|
||||
<a href="#" className="px-8 py-4 rounded-lg text-white font-medium bg-gradient-to-r from-pink-500 via-purple-500 to-indigo-500 shadow-lg hover:shadow-xl transition-all duration-300">
|
||||
Join a Meetup
|
||||
</a>
|
||||
<a href="#explore" className="px-8 py-4 rounded-lg text-white font-medium border border-purple-500 hover:bg-purple-500/10 transition-all duration-300">
|
||||
Explore Community
|
||||
</a>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
className="absolute bottom-10 left-1/2 transform -translate-x-1/2"
|
||||
animate={{
|
||||
y: [0, 10, 0],
|
||||
}}
|
||||
transition={{
|
||||
duration: 2,
|
||||
repeat: Infinity,
|
||||
repeatType: "loop"
|
||||
}}
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
className="text-purple-500"
|
||||
>
|
||||
<path d="M12 5v14M19 12l-7 7-7-7" />
|
||||
</svg>
|
||||
</motion.div>
|
||||
</motion.section>
|
||||
|
||||
{/* Features Section */}
|
||||
<section id="explore" className="h-screen flex items-center max-w-6xl mx-auto px-6">
|
||||
<motion.div
|
||||
initial="hidden"
|
||||
whileInView="visible"
|
||||
viewport={{ once: true, amount: 0.3 }}
|
||||
variants={staggerContainer}
|
||||
className="w-full"
|
||||
>
|
||||
<motion.h2
|
||||
className="text-4xl text-white mb-12"
|
||||
variants={fadeIn}
|
||||
>
|
||||
What We Offer
|
||||
</motion.h2>
|
||||
|
||||
<div className="grid md:grid-cols-2 gap-6">
|
||||
{[
|
||||
{
|
||||
title: "Engaging Discussions",
|
||||
description: "Participate in talks, workshops, and panel discussions covering cutting-edge AI developments.",
|
||||
image: "https://images.unsplash.com/photo-1517048676732-d65bc937f952?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8M3x8b2ZmaWNlJTIwZGlzY3Vzc2lvbnN8ZW58MHx8MHx8fDA%3D"
|
||||
},
|
||||
{
|
||||
title: "Networking Opportunities",
|
||||
description: "Connect with like-minded professionals and expand your network within a dynamic, supportive community.",
|
||||
image: "https://plus.unsplash.com/premium_photo-1661783208371-64db9e60653d?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8OXx8b2ZmaWNlJTIwZGlzY3Vzc2lvbnN8ZW58MHx8MHx8fDA%3D"
|
||||
},
|
||||
{
|
||||
title: "Hands-On Learning",
|
||||
description: "Gain practical insights through live demos, coding sessions, and interactive Q&A segments.",
|
||||
image: "https://images.unsplash.com/photo-1551434678-e076c223a692?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8OHx8b2ZmaWNlJTIwZGlzY3Vzc2lvbnN8ZW58MHx8MHx8fDA%3D"
|
||||
},
|
||||
{
|
||||
title: "Diverse Topics",
|
||||
description: "Explore a broad spectrum of topics, from generative AI to low-code development.",
|
||||
image: "https://plus.unsplash.com/premium_photo-1733306490808-9c2ec551cbf4?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MjF8fG9mZmljZSUyMGRpc2N1c3Npb25zfGVufDB8fDB8fHww"
|
||||
}
|
||||
].map((item, index) => (
|
||||
<motion.div
|
||||
key={index}
|
||||
className="relative overflow-hidden h-64 rounded-xl group"
|
||||
variants={imageCard}
|
||||
>
|
||||
<motion.div
|
||||
className="absolute inset-0 bg-gradient-to-b from-transparent to-black/80 z-10 group-hover:opacity-100 opacity-80 transition-opacity duration-300"
|
||||
/>
|
||||
<motion.img
|
||||
src={item.image}
|
||||
alt={item.title}
|
||||
className="absolute inset-0 w-full h-full object-cover transition-transform duration-700 group-hover:scale-110"
|
||||
/>
|
||||
<motion.div className="absolute bottom-0 left-0 right-0 p-6 z-20 transform transition-transform duration-300">
|
||||
<h3 className="text-2xl font-medium text-white mb-2">{item.title}</h3>
|
||||
<p className="text-gray-300 text-sm opacity-0 group-hover:opacity-100 transition-opacity duration-300">{item.description}</p>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</motion.div>
|
||||
</section>
|
||||
|
||||
{/* Communities Section */}
|
||||
|
||||
<motion.div
|
||||
className="grid md:grid-cols-1 gap-16 max-w-6xl mx-auto"
|
||||
variants={fadeIn}
|
||||
>
|
||||
<div className="space-y-6">
|
||||
<motion.h3
|
||||
className="text-3xl text-white"
|
||||
variants={{
|
||||
hidden: { opacity: 0, x: -20 },
|
||||
visible: {
|
||||
opacity: 1,
|
||||
x: 0,
|
||||
transition: { duration: 0.6 }
|
||||
}
|
||||
}}
|
||||
>
|
||||
EverydayJS Community
|
||||
</motion.h3>
|
||||
<motion.div
|
||||
className="h-1 w-24 bg-gradient-to-r from-pink-500 to-purple-500"
|
||||
animate={{
|
||||
width: ["0%", "10%"],
|
||||
}}
|
||||
transition={{
|
||||
duration: 1,
|
||||
ease: "easeInOut",
|
||||
}}
|
||||
/>
|
||||
<motion.p
|
||||
className="text-gray-400 text-lg"
|
||||
variants={{
|
||||
hidden: { opacity: 0, x: -20 },
|
||||
visible: {
|
||||
opacity: 1,
|
||||
x: 0,
|
||||
transition: { delay: 0.2, duration: 0.6 }
|
||||
}
|
||||
}}
|
||||
>
|
||||
For those passionate about NodeJS, our dedicated EverydayJS Community offers a specialized space to dive deep into NodeJS development. Here, developers share tips, collaborate on projects, and discuss the latest trends in the NodeJS ecosystem.
|
||||
</motion.p>
|
||||
<motion.a
|
||||
href="#"
|
||||
className="inline-block px-6 py-3 rounded-lg text-white font-medium bg-gradient-to-r from-pink-500/40 via-purple-500/40 to-indigo-500/20 shadow-lg hover:shadow-xl transition-all duration-300"
|
||||
variants={{
|
||||
hidden: { opacity: 0, x: -20 },
|
||||
visible: {
|
||||
opacity: 1,
|
||||
x: 0,
|
||||
transition: { delay: 0.4, duration: 0.6 }
|
||||
}
|
||||
}}
|
||||
>
|
||||
Join Now
|
||||
</motion.a>
|
||||
</div>
|
||||
|
||||
<div className="space-y-6">
|
||||
<motion.h3
|
||||
className="text-3xl text-white"
|
||||
variants={{
|
||||
hidden: { opacity: 0, x: 20 },
|
||||
visible: {
|
||||
opacity: 1,
|
||||
x: 0,
|
||||
transition: { duration: 0.6 }
|
||||
}
|
||||
}}
|
||||
>
|
||||
Upcoming Events
|
||||
</motion.h3>
|
||||
<motion.div
|
||||
className="h-1 w-24 bg-gradient-to-r from-pink-500 to-purple-500"
|
||||
animate={{
|
||||
width: ["0%", "10%"],
|
||||
}}
|
||||
transition={{
|
||||
duration: 1,
|
||||
ease: "easeInOut",
|
||||
}}
|
||||
/>
|
||||
<motion.p
|
||||
className="text-gray-400 text-lg"
|
||||
variants={{
|
||||
hidden: { opacity: 0, x: 20 },
|
||||
visible: {
|
||||
opacity: 1,
|
||||
x: 0,
|
||||
transition: { delay: 0.2, duration: 0.6 }
|
||||
}
|
||||
}}
|
||||
>
|
||||
Check out our upcoming meetups on Meetup.com and join us in exploring the future of AI and technology. Whether you're a seasoned professional or just starting out, there's a place for you in our community.
|
||||
</motion.p>
|
||||
<motion.a
|
||||
href="#"
|
||||
className="inline-block px-6 py-3 rounded-lg text-white font-medium bg-gradient-to-r from-pink-500/40 via-purple-500/40 to-indigo-500/20 shadow-lg hover:shadow-xl transition-all duration-300"
|
||||
variants={{
|
||||
hidden: { opacity: 0, x: 20 },
|
||||
visible: {
|
||||
opacity: 1,
|
||||
x: 0,
|
||||
transition: { delay: 0.4, duration: 0.6 }
|
||||
}
|
||||
}}
|
||||
>
|
||||
Join a Meetup
|
||||
</motion.a>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* Call to Action Section */}
|
||||
<motion.section
|
||||
className="min-h-screen flex items-center justify-center flex-col max-w-6xl mx-auto px-6 py-20"
|
||||
initial="hidden"
|
||||
whileInView="visible"
|
||||
viewport={{ once: true, amount: 0.3 }}
|
||||
variants={fadeIn}
|
||||
>
|
||||
<motion.div
|
||||
className="max-w-3xl mx-auto text-center"
|
||||
variants={fadeIn}
|
||||
>
|
||||
<motion.h2
|
||||
className="text-4xl md:text-5xl text-white mb-8"
|
||||
animate={{
|
||||
backgroundPosition: ["0% 0%", "100% 100%"],
|
||||
}}
|
||||
transition={{
|
||||
duration: 8,
|
||||
repeat: Infinity,
|
||||
repeatType: "reverse"
|
||||
}}
|
||||
style={{
|
||||
backgroundImage: "linear-gradient(90deg, #fff, #a855f7, #ec4899, #fff)",
|
||||
backgroundSize: "200%",
|
||||
WebkitBackgroundClip: "text",
|
||||
WebkitTextFillColor: "transparent"
|
||||
}}
|
||||
>
|
||||
Ready to Join Our AI Community?
|
||||
</motion.h2>
|
||||
<motion.p
|
||||
className="text-gray-400 text-xl mb-12"
|
||||
variants={{
|
||||
hidden: { opacity: 0, y: 20 },
|
||||
visible: {
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
transition: { delay: 0.3, duration: 0.8 }
|
||||
}
|
||||
}}
|
||||
>
|
||||
Be part of a thriving ecosystem of innovators, creators, and AI enthusiasts who are shaping the future of technology together.
|
||||
</motion.p>
|
||||
<motion.a
|
||||
href="#"
|
||||
className="px-8 py-4 rounded-lg text-white font-medium bg-gradient-to-r from-pink-500/40 via-purple-500/40 to-indigo-500/20 shadow-lg hover:shadow-xl transition-all duration-300 inline-block"
|
||||
variants={{
|
||||
hidden: { opacity: 0, y: 20 },
|
||||
visible: {
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
transition: { delay: 0.5, duration: 0.8 }
|
||||
}
|
||||
}}
|
||||
whileHover={{ scale: 1.05 }}
|
||||
whileTap={{ scale: 0.95 }}
|
||||
>
|
||||
Get Started Now
|
||||
</motion.a>
|
||||
</motion.div>
|
||||
</motion.section>
|
||||
|
||||
<Footer />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Meetups;
|
||||
@ -6,35 +6,45 @@ import { ChevronDown, ChevronUp, Check, HelpCircle, ShieldCheck, Zap, Smartphone
|
||||
import Navbar from '@/components/Navbar/navbar';
|
||||
import Footer from '@/components/footer';
|
||||
|
||||
const PricingCard = ({ title, description, features }) => {
|
||||
const PricingCard = ({ title, description, features, pricing }) => {
|
||||
return (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
className="group relative border border-gray-800 rounded-xl p-8 bg-gray-900/20 transition-all duration-500 overflow-hidden hover:scale-105"
|
||||
className={`flex flex-col justify-between group relative bg-clip-padding backdrop-filter backdrop-blur-lg bg-opacity-10 border border-gray-600 rounded-xl p-8 transition-all duration-500 overflow-hidden ${title === "Professional" ? "scale-110" : ""}`}
|
||||
>
|
||||
<div className="relative z-10">
|
||||
<h3 className="text-2xl font-semibold text-white mb-4">{title}</h3>
|
||||
<div className="flex justify-between">
|
||||
<h3 className="text-2xl font-semibold text-white">{title}</h3>
|
||||
{title==="Professional" && (
|
||||
<span className="w-fit h-fit px-2 py-1 bg-trasparent border border-gray-300 text-gray-300 rounded-full text-xs shrink-0">
|
||||
Popular
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<p className="text-gray-400 mb-6">{description}</p>
|
||||
<div className="w-full h-[1px] bg-gray-800 my-4" /> {/* Separator Line */}
|
||||
<div className="space-y-4">
|
||||
{features.map((feature, index) => (
|
||||
<div key={index} className="flex items-center gap-5">
|
||||
<Check className="w-5 h-5 text-purple-500" />
|
||||
<div key={index} className="flex items-start gap-5">
|
||||
<Check className="w-5 h-5 text-purple-500 shrink-0" />
|
||||
<span className="text-gray-300">{feature}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div>
|
||||
<div className="w-full h-[1px] bg-gray-800 my-4" /> {/* Separator Line */}
|
||||
<div className="w-full py-4 flex items-center justify-between">
|
||||
<p className="text-gray-300">For Price : </p>
|
||||
<motion.button
|
||||
<p className="text-gray-100 text-2xl">{pricing}</p>
|
||||
{/* <motion.button
|
||||
whileHover={{ scale: 1.05 }}
|
||||
whileTap={{ scale: 0.98 }}
|
||||
className="px-6 py-3 rounded-lg text-white font-medium bg-gradient-to-r from-pink-500 via-purple-500 to-indigo-500 shadow-lg transition-all duration-500 w-fit"
|
||||
>
|
||||
Contact Us
|
||||
</motion.button>
|
||||
</motion.button> */}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -82,26 +92,52 @@ const FAQ = ({ question, answer }) => {
|
||||
const PricingPage = () => {
|
||||
const pricingPlans = [
|
||||
{
|
||||
title: "Basic",
|
||||
description: "We consider all the drivers of time & change gives the blocks.",
|
||||
title: "Starter",
|
||||
description: "For solopreneurs ready to take a leap.",
|
||||
features: [
|
||||
"Full Access to Copler",
|
||||
"100 GB Free Storage",
|
||||
"Unlimited Visitors",
|
||||
"10 Agents",
|
||||
"Live Chat Support"
|
||||
]
|
||||
"1 monetised site",
|
||||
"10,000 tokens/month",
|
||||
"Use our full suite for internal projects without limits",
|
||||
"Basic Integration",
|
||||
"Basic 24/7 chat support"
|
||||
],
|
||||
pricing: "£29 GBP/month"
|
||||
},
|
||||
{
|
||||
title: "Premium",
|
||||
description: "We consider all the drivers of time & change gives the blocks.",
|
||||
title: "Professional",
|
||||
description: "For small teams building multiple revenue streams.",
|
||||
features: [
|
||||
"Full Access to Copler",
|
||||
"100 GB Free Storage",
|
||||
"Unlimited Visitors",
|
||||
"10 Agents",
|
||||
"Live Chat Support"
|
||||
]
|
||||
"Up to 3 active monetised site",
|
||||
"50,000 tokens/month",
|
||||
"Use our full suite for internal projects without limits",
|
||||
"Advanced analytics and integrations",
|
||||
"Basic 24/7 chat support"
|
||||
],
|
||||
pricing: "£69 GBP/month"
|
||||
},
|
||||
{
|
||||
title: "Business",
|
||||
description: "For growing companies that demand more power and flexibility.",
|
||||
features: [
|
||||
"Up to 10 active monetised site",
|
||||
"200,000 tokens/month",
|
||||
"Unlimited projects internally - build, test, and deploy without limits",
|
||||
"Advanced customizations, integrations, and performance tracking",
|
||||
"Priority 24/7 chat support"
|
||||
],
|
||||
pricing: "£349 GBP/month"
|
||||
},
|
||||
{
|
||||
title: "Enterprise Plus",
|
||||
description: "For large enterprises with complex needs and full marketplace access.",
|
||||
features: [
|
||||
"Custom limits based on your requirements",
|
||||
"Unlimited custom GPT Tokens",
|
||||
"Full access to our marketplace with exclusive benefits, including a 20% discount on all solopreneur sites",
|
||||
"Advanced customizations, integrations, exclusive downloadable code offerings on a pay-per-code basis",
|
||||
"SLA-backed, enterprise-grade support with dedicated account management and priority phone support"
|
||||
],
|
||||
pricing: "Starting at $2,500 USD/month (3-year term required)"
|
||||
}
|
||||
];
|
||||
|
||||
@ -131,7 +167,6 @@ const PricingPage = () => {
|
||||
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 }}
|
||||
@ -150,8 +185,8 @@ const PricingPage = () => {
|
||||
</motion.section>
|
||||
|
||||
{/* Pricing Cards */}
|
||||
<motion.section className="max-w-6xl mx-auto">
|
||||
<div className="grid md:grid-cols-2 gap-8">
|
||||
<motion.section className="max-w-8xl mx-auto bg-gradient-to-b from-[#080E12] via-[#EC4899]/20 to-[#080E12]">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
|
||||
{pricingPlans.map((plan, index) => (
|
||||
<PricingCard key={index} {...plan} />
|
||||
))}
|
||||
|
||||
@ -17,49 +17,57 @@ const verticals = [
|
||||
icon: <ShoppingCart className="w-5 h-5" />,
|
||||
title: "Retail & E-commerce",
|
||||
description: "Enhance customer service with real-time chat support, personalized shopping experiences, and seamless order tracking.",
|
||||
gradient: "from-pink-500/20 to-purple-500/20"
|
||||
gradient: "from-pink-500/20 to-purple-500/20",
|
||||
link: "/tools"
|
||||
},
|
||||
{
|
||||
icon: <HeartPulse className="w-5 h-5" />,
|
||||
title: "Healthcare & Wellness",
|
||||
description: "Improve patient care through virtual consultations, appointment scheduling, and instant access to health resources.",
|
||||
gradient: "from-blue-500/20 to-cyan-500/20"
|
||||
gradient: "from-blue-500/20 to-cyan-500/20",
|
||||
link: "/tools"
|
||||
},
|
||||
{
|
||||
icon: <Wallet className="w-5 h-5" />,
|
||||
title: "Finance & Banking",
|
||||
description: "Empower customers with financial insights, automated account management, and personalized advisory services.",
|
||||
gradient: "from-green-500/20 to-emerald-500/20"
|
||||
gradient: "from-green-500/20 to-emerald-500/20",
|
||||
link: "/finance"
|
||||
},
|
||||
{
|
||||
icon: <GraduationCap className="w-5 h-5" />,
|
||||
title: "Education & eLearning",
|
||||
description: "Revolutionize learning with interactive tutoring, course guidance, resource recommendations, and performance tracking.",
|
||||
gradient: "from-orange-500/20 to-yellow-500/20"
|
||||
gradient: "from-orange-500/20 to-yellow-500/20",
|
||||
link: "/tools"
|
||||
},
|
||||
{
|
||||
icon: <Home className="w-5 h-5" />,
|
||||
title: "Real Estate & Property Management",
|
||||
description: "Streamline property listings, offer virtual tours, schedule viewings, and provide detailed market insights.",
|
||||
gradient: "from-purple-500/20 to-indigo-500/20"
|
||||
gradient: "from-purple-500/20 to-indigo-500/20",
|
||||
link: "/tools"
|
||||
},
|
||||
{
|
||||
icon: <Plane className="w-5 h-5" />,
|
||||
title: "Travel & Hospitality",
|
||||
description: "Enhance guest experiences with AI-driven booking assistance, itinerary management, and personalized recommendations.",
|
||||
gradient: "from-cyan-500/20 to-blue-500/20"
|
||||
gradient: "from-cyan-500/20 to-blue-500/20",
|
||||
link: "/tools"
|
||||
},
|
||||
{
|
||||
icon: <Scale className="w-5 h-5" />,
|
||||
title: "Legal & Consulting",
|
||||
description: "Simplify client communications, document management, and consultation scheduling for faster service delivery.",
|
||||
gradient: "from-violet-500/20 to-purple-500/20"
|
||||
gradient: "from-violet-500/20 to-purple-500/20",
|
||||
link: "/tools"
|
||||
},
|
||||
{
|
||||
icon: <Megaphone className="w-5 h-5" />,
|
||||
title: "Creative & Marketing",
|
||||
description: "Boost engagement through dynamic content creation, campaign management, and customer insights analytics.",
|
||||
gradient: "from-rose-500/20 to-pink-500/20"
|
||||
gradient: "from-rose-500/20 to-pink-500/20",
|
||||
link: "/tools"
|
||||
}
|
||||
];
|
||||
|
||||
@ -134,6 +142,7 @@ export default function BusinessVerticals() {
|
||||
|
||||
{/* Action button */}
|
||||
<div className="pl-16 mt-4">
|
||||
<a href={vertical.link}>
|
||||
<button className="
|
||||
px-4 py-2 rounded-lg
|
||||
bg-purple-500/20 hover:bg-purple-500/30
|
||||
@ -141,7 +150,7 @@ export default function BusinessVerticals() {
|
||||
transition-colors duration-300
|
||||
">
|
||||
Explore Solutions
|
||||
</button>
|
||||
</button></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -135,6 +135,7 @@ export default function SampleAgents() {
|
||||
|
||||
{/* CTA Button */}
|
||||
<div className="text-center mt-16">
|
||||
<a href="/ai-agents">
|
||||
<button className="
|
||||
group relative overflow-hidden
|
||||
px-8 py-4 rounded-full
|
||||
@ -147,7 +148,7 @@ export default function SampleAgents() {
|
||||
Explore More Sample Agents
|
||||
<ArrowRight className="w-5 h-5 group-hover:translate-x-1 transition-transform" />
|
||||
</span>
|
||||
</button>
|
||||
</button></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -2,6 +2,7 @@
|
||||
|
||||
import React, { useState } from 'react';
|
||||
import { motion } from 'framer-motion';
|
||||
import { FaArrowRight } from 'react-icons/fa';
|
||||
|
||||
// Define the Item interface
|
||||
interface Item {
|
||||
@ -9,6 +10,7 @@ interface Item {
|
||||
media: string; // URL for image or video
|
||||
title: string;
|
||||
description: string;
|
||||
link: string;
|
||||
}
|
||||
|
||||
// Define the items array with type annotations
|
||||
@ -19,6 +21,7 @@ const items: Item[] = [
|
||||
title: "Product Management",
|
||||
description:
|
||||
"Coordinate and manage product sprints in collaboration with cross-functional team members, ensuring efficient planning and execution. Work closely with partners from different teams to iterate rapidly, align goals, and drive continuous improvement throughout the development process.",
|
||||
link: "/product-manager",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
@ -26,6 +29,7 @@ const items: Item[] = [
|
||||
title: "Marketing",
|
||||
description:
|
||||
"Develop and implement marketing strategies to promote products and services, analyze market trends, and identify target audiences. Collaborate with sales teams to create effective campaigns that drive brand awareness and customer engagement while measuring the effectiveness of marketing initiatives.",
|
||||
link: "/marketing",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
@ -33,6 +37,7 @@ const items: Item[] = [
|
||||
title: "Sales",
|
||||
description:
|
||||
"Drive revenue growth by identifying potential clients, building relationships, and closing sales deals. Develop sales strategies that align with company goals, deliver presentations to prospective customers, and provide exceptional customer service to ensure client satisfaction and retention.",
|
||||
link: "/sales",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
@ -40,6 +45,7 @@ const items: Item[] = [
|
||||
title: "HR",
|
||||
description:
|
||||
"Manage recruitment processes, employee relations, and organizational development initiatives. Ensure compliance with labor laws and regulations while fostering a positive workplace culture that promotes employee engagement and professional growth. Implement training programs to enhance workforce capabilities and performance.",
|
||||
link: "/hr",
|
||||
},
|
||||
];
|
||||
|
||||
@ -100,6 +106,7 @@ export default function Cliclables() {
|
||||
<p className="text-gray-600 leading-relaxed">
|
||||
{selectedItem.description}
|
||||
</p>
|
||||
<a className="text-gray-300 hover:text-gray-100 flex items-center mt-4" href={selectedItem.link}>Learn More <FaArrowRight className='ml-4'/></a>
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
|
||||
@ -169,28 +169,11 @@ const VectorCreativeSuite = () => (
|
||||
|
||||
{/* Preview Panel */}
|
||||
<div className="flex-1 bg-black/20 rounded-xl p-4">
|
||||
<motion.div
|
||||
className="w-full h-full rounded-lg bg-gradient-to-br from-purple-500/20 to-blue-500/20 relative"
|
||||
animate={{
|
||||
boxShadow: [
|
||||
"0 0 0 0 rgba(139, 92, 246, 0)",
|
||||
"0 0 20px 2px rgba(139, 92, 246, 0.3)",
|
||||
"0 0 0 0 rgba(139, 92, 246, 0)"
|
||||
]
|
||||
}}
|
||||
transition={{ duration: 3, repeat: Infinity }}
|
||||
>
|
||||
<motion.div
|
||||
className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-16 h-16 border-4 border-purple-500/30 rounded-full border-t-transparent"
|
||||
animate={{ rotate: 360 }}
|
||||
transition={{ duration: 2, repeat: Infinity, ease: "linear" }}
|
||||
<img
|
||||
src="https://images.unsplash.com/photo-1613327986042-63d4425a1a5d?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NHx8ZGFyayUyMGFuZCUyMHB1cnBsZXxlbnwwfHwwfHx8MA%3D%3D"
|
||||
alt="Typing Image"
|
||||
className="object-cover h-full w-full rounded-xl"
|
||||
/>
|
||||
<motion.div
|
||||
className="absolute bottom-4 left-1/2 -translate-x-1/2 h-2 w-24 bg-purple-500/30 rounded-full"
|
||||
animate={{ width: ["6rem", "8rem", "6rem"] }}
|
||||
transition={{ duration: 2, repeat: Infinity }}
|
||||
/>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
@ -333,9 +316,9 @@ const VectorCommunity = () => {
|
||||
|
||||
const VectorMonetization = () => {
|
||||
const subscriptionTiers = [
|
||||
{ name: "Basic", price: "49", color: "from-blue-500/30 to-purple-500/30" },
|
||||
{ name: "Pro", price: "199", color: "from-purple-500/30 to-pink-500/30" },
|
||||
{ name: "Enterprise", price: "499", color: "from-pink-500/30 to-orange-500/30" }
|
||||
{ name: "Started", price: "29", color: "from-blue-500/30 to-purple-500/30" },
|
||||
{ name: "Professional", price: "69", color: "from-purple-500/30 to-pink-500/30" },
|
||||
{ name: "Business", price: "349", color: "from-pink-500/30 to-orange-500/30" }
|
||||
];
|
||||
|
||||
return (
|
||||
@ -403,7 +386,7 @@ const VectorMonetization = () => {
|
||||
animate={{ scale: [1, 1.1, 1] }}
|
||||
transition={{ duration: 2, repeat: Infinity }}
|
||||
>
|
||||
${tier.price}
|
||||
£{tier.price}
|
||||
</motion.div>
|
||||
<motion.div
|
||||
className="text-xs text-purple-200"
|
||||
|
||||
@ -119,19 +119,6 @@ export default function HowItWorks() {
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="text-center mt-24">
|
||||
<button className="
|
||||
group relative overflow-hidden
|
||||
px-10 py-5 rounded-full
|
||||
text-white text-lg
|
||||
transition-all duration-300
|
||||
hover:shadow-lg hover:shadow-purple-500/20
|
||||
">
|
||||
<div className="absolute inset-0 bg-gradient-to-r from-purple-600 to-blue-600 opacity-80 group-hover:opacity-100 transition-opacity" />
|
||||
<span className="relative">Explore Features</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -1,7 +1,9 @@
|
||||
import type { NextConfig } from "next";
|
||||
|
||||
const nextConfig: NextConfig = {
|
||||
/* config options here */
|
||||
images: {
|
||||
domains: ["unsplash.com"],
|
||||
},
|
||||
};
|
||||
|
||||
export default nextConfig;
|
||||
Loading…
x
Reference in New Issue
Block a user