From ec38a711e7eb203f8a4208c8e1a48da88ecd4f64 Mon Sep 17 00:00:00 2001 From: MIGHTY1o1 Date: Sun, 27 Oct 2024 03:50:51 +0530 Subject: [PATCH] add women tech makers page --- src/app/(pages)/womentechmakers/page.jsx | 231 +++++++++++++++++++++++ 1 file changed, 231 insertions(+) create mode 100644 src/app/(pages)/womentechmakers/page.jsx diff --git a/src/app/(pages)/womentechmakers/page.jsx b/src/app/(pages)/womentechmakers/page.jsx new file mode 100644 index 0000000..3b09b31 --- /dev/null +++ b/src/app/(pages)/womentechmakers/page.jsx @@ -0,0 +1,231 @@ +"use client" + +import React, { useEffect, useRef, useState } from 'react'; +import { Users, Calendar, Mic, Heart } from 'lucide-react'; + +// Header Section with Vibrant Background +const Header = () => { + return ( +
+
+

Women Techmakers

+

+ Building a world where all women can thrive in tech. Google’s Women Techmakers program provides visibility, community, and resources for women in technology. +

+
+
+ ); +}; + +// Stats Section with Animated Counters +const Stats = () => { + const statsData = [ + { icon: , label: "Ambassadors", value: 2674 }, + { icon: , label: "Events", value: 1264 }, + { icon: , label: "Speaking Engagements", value: 1353 }, + { icon: , label: "Members", value: 82500 }, + ]; + + const [visible, setVisible] = useState(false); + const sectionRef = useRef(null); + const countersRef = useRef([]); + + useEffect(() => { + const observer = new IntersectionObserver( + (entries) => { + if (entries[0].isIntersecting) { + setVisible(true); + observer.unobserve(sectionRef.current); + } + }, + { threshold: 0.5 } + ); + observer.observe(sectionRef.current); + }, []); + + useEffect(() => { + if (visible) { + countersRef.current.forEach((counter, index) => animateCounter(counter, statsData[index].value)); + } + }, [visible, statsData]); + + const animateCounter = (element, target) => { + let start = 0; + const duration = 3000; + const increment = Math.ceil(target / 100); + const stepTime = duration / (target / increment); + + const timer = setInterval(() => { + start += increment; + if (start >= target) { + element.innerText = target; + clearInterval(timer); + } else { + element.innerText = start; + } + }, stepTime); + }; + + + return ( +
+

Our Impact

+
+ {statsData.map((stat, index) => ( +
+
{stat.icon}
+

(countersRef.current[index] = el)} + > + {visible ? 0 : stat.value} +

+

{stat.label}

+
+ ))} +
+
+ ); +}; + +// Opportunities Section with Dual Columns +const Opportunities = () => { + const opportunities = [ + { + title: "Become an Ambassador", + description: + "Lead, network, learn, and shine as a Women Techmakers Ambassador. Become a visible leader in your community.", + buttonText: "Learn more", + }, + { + title: "Become a Member", + description: + "Empower other women in their careers by organizing events and providing access to curated resources.", + buttonText: "Learn more", + }, + ]; + + return ( +
+
+ {opportunities.map((opportunity, index) => ( +
+

{opportunity.title}

+

{opportunity.description}

+ +
+ ))} +
+
+ ); +}; + +// Stories Section with Card Layout +const Stories = () => { + const stories = [ + { + title: "Meet Nhasala, WTM Ambassador in Kathmandu", + description: + "Nhasala Joshi co-founded Women Leaders in Technology in Nepal. She advocates for women's rights in the workplace and understands the need for strong mentors in technology.", + }, + { + title: "Black Women in Tech: A.M. Darke", + description: "A.M. Darke is a gaming designer creating better representation in the gaming world.", + }, + { + title: "Learn UX Writing with Google", + description: "Explore the fundamentals of UX writing through Google’s mortgage calculator project.", + }, + { + title: "Meet Hanane Ait Dabel", + description: "Hanane Ait Dabel, a WTM Ambassador, shares her journey and insights in tech.", + }, + ]; + + return ( +
+

Stories from Our Community

+
+ {stories.map((story, index) => ( +
+

{story.title}

+

{story.description}

+
+ ))} +
+
+ ); +}; + +// Social Media Section +const SocialMedia = () => { + const socials = [ + { platform: "YouTube", icon: "📺", link: "#" }, + { platform: "Twitter", icon: "🐦", link: "#" }, + { platform: "LinkedIn", icon: "🔗", link: "#" }, + { platform: "Instagram", icon: "📷", link: "#" }, + ]; + + return ( +
+

Stay Connected

+

Follow Women Techmakers for the latest news and updates.

+
+ {socials.map((social, index) => ( + + {social.icon} + + ))} +
+
+ ); +}; + +// Merchandise Section with Links +const Merchandise = () => { + return ( +
+

Get Your Official Women Techmakers Merchandise

+ +
+ ); +}; + +// Main Women Techmakers Page Component +const WomenTechmakersPage = () => { + return ( +
+
+ + + + + +
+ ); +}; + +export default WomenTechmakersPage;