mirror of
https://github.com/codebox283/everydayserieswebsite.git
synced 2025-06-19 20:40:52 +00:00
375 lines
17 KiB
TypeScript
375 lines
17 KiB
TypeScript
"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; |