Skip to content

Commit d798eb6

Browse files
TenzDelekTenzDelek
committed
meetup page modularize
1 parent 0a34f29 commit d798eb6

13 files changed

Lines changed: 791 additions & 480 deletions

‎app/meetups/components/AnimatedArchitecture.tsx‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import { motion } from 'framer-motion';
2+
3+
export default function AnimatedArchitecture() {
4+
return (
5+
<div className="p-12 lg:p-8 sm:px-4 sm:py-6">
6+
<div className="relative h-[400px] overflow-hidden rounded-2xl bg-white/10 lg:h-[340px] sm:h-[260px]">
7+
<motion.div
8+
animate={{ y: [0, -20, 0] }}
9+
transition={{ repeat: Infinity, duration: 4 }}
10+
>
11+
<div className="w-full h-[500px] bg-[url('/img/architecture.svg')] bg-cover bg-center rounded-2xl" />
12+
</motion.div>
13+
</div>
14+
</div>
15+
);
16+
}

‎app/meetups/components/FAQSection.tsx‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import { motion, Variants } from 'framer-motion';
2+
import Heading from '../../../components/Typography/heading';
3+
import Accordion from '../../../components/Accordion/Accordion';
4+
5+
interface FAQSectionProps {
6+
faqs: Array<{ q: string; a: string }>;
7+
containerVariants: Variants;
8+
itemVariants: Variants;
9+
}
10+
11+
export default function FAQSection({
12+
faqs,
13+
containerVariants,
14+
itemVariants,
15+
}: FAQSectionProps) {
16+
return (
17+
<div className="my-20 lg:my-16 sm:my-4 sm:mb-20">
18+
<motion.div
19+
className="container flex justify-center px-4"
20+
variants={containerVariants}
21+
initial="hidden"
22+
whileInView="visible"
23+
viewport={{ once: true, amount: 0.3 }}
24+
>
25+
<motion.div className="mt-20" variants={itemVariants}>
26+
<Heading
27+
className="text-center text-5xl font-extrabold text-white lg:text-4xl sm:text-3xl"
28+
level="h1"
29+
>
30+
FAQs About Hosting & Attending
31+
</Heading>
32+
<div className="mt-12 w-full max-w-5xl sm:mt-8">
33+
<Accordion faq={faqs} />
34+
</div>
35+
</motion.div>
36+
</motion.div>
37+
</div>
38+
);
39+
}

‎app/meetups/components/HeroSection.tsx‎

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
import { motion, Variants } from 'framer-motion';
2+
import Link from 'next/link';
3+
import Heading from '../../../components/Typography/heading';
4+
import Paragraph from '../../../components/Typography/paragraph';
5+
import Button from '../../../components/Buttons/button';
6+
7+
interface HeroSectionProps {
8+
containerVariants: Variants;
9+
itemVariants: Variants;
10+
}
11+
12+
export default function HeroSection({
13+
containerVariants,
14+
itemVariants,
15+
}: HeroSectionProps) {
16+
return (
17+
<motion.div
18+
className="container mt-[150px] justify-center sm:py-6"
19+
variants={containerVariants}
20+
initial="hidden"
21+
whileInView="visible"
22+
viewport={{ once: true, amount: 0.3 }}
23+
>
24+
<div className="mt-10 w-full max-w-[1300px] lg:mt-6 sm:mt-2">
25+
<motion.div
26+
className="flex flex-wrap items-center sm:flex-col sm:items-start"
27+
variants={itemVariants}
28+
>
29+
<Heading
30+
className="text-white font-extrabold lg:text-6xl sm:text-4xl"
31+
level="h1"
32+
>
33+
Driving
34+
</Heading>
35+
<Heading
36+
className="ml-2 font-extrabold text-gradient lg:text-6xl sm:ml-0 sm:text-4xl"
37+
level="h1"
38+
>
39+
Innovation
40+
</Heading>
41+
</motion.div>
42+
<motion.div variants={itemVariants}>
43+
<Heading
44+
className="text-7xl text-white font-extrabold lg:text-6xl sm:text-4xl"
45+
level="h1"
46+
>
47+
Through Open Collaboration
48+
</Heading>
49+
</motion.div>
50+
<motion.div variants={itemVariants}>
51+
<Paragraph
52+
className="mt-4 w-full max-w-[600px] sm:max-w-full"
53+
textColor="text-gray-300"
54+
>
55+
Connect with the AsyncAPI community through local and virtual
56+
meetups.
57+
</Paragraph>
58+
</motion.div>
59+
<motion.div variants={itemVariants}>
60+
<Link href="#find-meetup">
61+
<Button
62+
className="mt-8 w-auto px-8 sm:mt-6 sm:px-6"
63+
type="button"
64+
>
65+
<div className="flex items-center justify-center">
66+
Find a Meetup Near You
67+
</div>
68+
</Button>
69+
</Link>
70+
</motion.div>
71+
</div>
72+
</motion.div>
73+
);
74+
}

‎app/meetups/components/HorizontalScrollSection.tsx‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
import { useRef, useEffect, useState } from 'react';
2+
import { motion, useScroll, useTransform, Variants } from 'framer-motion';
3+
import Heading from '../../../components/Typography/heading';
4+
import MeetupCard from '../../../components/Cards/MeetupCard';
5+
import { MEETUP_ITEMS, ITEM_WIDTH, GAP } from '../constants';
6+
7+
interface HorizontalScrollSectionProps {
8+
containerVariants: Variants;
9+
}
10+
11+
export default function HorizontalScrollSection({
12+
containerVariants,
13+
}: HorizontalScrollSectionProps) {
14+
const containerRef = useRef<HTMLDivElement | null>(null);
15+
const [scrollHeight, setScrollHeight] = useState(0);
16+
17+
const totalDistance = (MEETUP_ITEMS.length - 1) * (ITEM_WIDTH + GAP);
18+
19+
useEffect(() => {
20+
const updateHeight = () => {
21+
setScrollHeight(totalDistance + window.innerHeight);
22+
};
23+
24+
updateHeight();
25+
window.addEventListener('resize', updateHeight);
26+
return () => window.removeEventListener('resize', updateHeight);
27+
}, [totalDistance]);
28+
29+
const { scrollYProgress } = useScroll({
30+
target: containerRef,
31+
offset: ['start start', 'end start'],
32+
});
33+
34+
const x = useTransform(scrollYProgress, [0, 1], [0, -totalDistance]);
35+
36+
return (
37+
<motion.div
38+
className="mt-24 w-full lg:mt-28 sm:mt-20"
39+
variants={containerVariants}
40+
initial="hidden"
41+
whileInView="visible"
42+
viewport={{ once: true, amount: 0.3 }}
43+
>
44+
<section className="mb-16 text-center sm:mb-10">
45+
<Heading
46+
typeStyle="heading-lg"
47+
className="px-4 text-white font-extrabold sm:text-3xl"
48+
level="h1"
49+
>
50+
What happens at AsyncAPI Meetup?
51+
</Heading>
52+
</section>
53+
54+
<div className="sm:hidden">
55+
<div
56+
ref={containerRef}
57+
className="relative w-full"
58+
style={{ height: scrollHeight }}
59+
>
60+
<div className="sticky top-[100px] flex w-full items-start overflow-hidden pt-8 lg:top-20">
61+
<motion.div
62+
className="flex gap-[30px] pl-[10vw] will-change-transform lg:gap-5 lg:pl-[6vw]"
63+
style={{ x }}
64+
>
65+
{MEETUP_ITEMS.map((item) => (
66+
<MeetupCard key={item.id} {...item} />
67+
))}
68+
</motion.div>
69+
</div>
70+
</div>
71+
</div>
72+
73+
<div className="hidden px-4 sm:block">
74+
<div className="grid grid-cols-1 gap-5">
75+
{MEETUP_ITEMS.map((item) => (
76+
<MeetupCard key={item.id} {...item} isDesktop={false} />
77+
))}
78+
</div>
79+
</div>
80+
</motion.div>
81+
);
82+
}

‎app/meetups/components/HostingSteps.tsx‎

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
import { motion, Variants } from 'framer-motion';
2+
import Heading from '../../../components/Typography/heading';
3+
import Paragraph from '../../../components/Typography/paragraph';
4+
import Button from '../../../components/Buttons/button';
5+
import { HOSTING_STEPS, GITHUB_DISCUSSION_URL } from '../constants';
6+
import Github from '../../../components/illustration/Socials/Github';
7+
8+
interface HostingStepsProps {
9+
containerVariants: Variants;
10+
itemVariants: Variants;
11+
}
12+
13+
export default function HostingSteps({
14+
containerVariants,
15+
itemVariants,
16+
}: HostingStepsProps) {
17+
return (
18+
<div className="sponsor-bg mt-[100px] h-auto min-h-[100vh] lg:mt-16 sm:mt-12">
19+
<motion.div
20+
className="container flex justify-center px-4 sm:px-0"
21+
variants={containerVariants}
22+
initial="hidden"
23+
whileInView="visible"
24+
viewport={{ once: true, amount: 0.3 }}
25+
>
26+
<div className="pt-10 sm:pt-0 pb-10">
27+
<motion.div variants={itemVariants}>
28+
<Heading
29+
className="mt-20 font-extrabold text-white text-center"
30+
level="h1"
31+
>
32+
How to Host a Meetup
33+
</Heading>
34+
</motion.div>
35+
<div className="w-full max-w-5xl">
36+
<div className="mt-10 grid grid-cols-2 gap-0 sm:grid-cols-1">
37+
{HOSTING_STEPS.map((step, index) => (
38+
<motion.div
39+
key={step.title}
40+
variants={itemVariants}
41+
className="flex h-full flex-col rounded-2xl p-8 transition-shadow hover:shadow-lg lg:p-6 sm:p-4"
42+
>
43+
<div className="text-2xl bg-white w-10 text-purple-600 flex items-center justify-center rounded-full h-10 font-bold mb-4">
44+
{index + 1}
45+
</div>
46+
<Heading
47+
typeStyle="heading-md-semibold"
48+
className="text-xl font-bold text-white mb-2"
49+
level="h2"
50+
>
51+
{step.title}
52+
</Heading>
53+
<Paragraph typeStyle="body-md" className="text-gray-800">
54+
{step.description}
55+
</Paragraph>
56+
</motion.div>
57+
))}
58+
</div>
59+
</div>
60+
<motion.div
61+
className="flex justify-center mt-20"
62+
variants={itemVariants}
63+
>
64+
<a
65+
href={GITHUB_DISCUSSION_URL}
66+
target="_blank"
67+
rel="noopener noreferrer"
68+
>
69+
<Button className="w-auto px-8" type="button">
70+
<div className="flex items-center justify-center">
71+
<Github className="w-5 h-5 mr-2" />
72+
Propose a Meetup
73+
</div>
74+
</Button>
75+
</a>
76+
</motion.div>
77+
</div>
78+
</motion.div>
79+
</div>
80+
);
81+
}

0 commit comments

Comments
 (0)