"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;