mirror of
https://github.com/codebox283/everydayserieswebsite.git
synced 2025-06-19 20:30:53 +00:00
429 lines
24 KiB
TypeScript
429 lines
24 KiB
TypeScript
"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; |