297 lines
17 KiB
TypeScript
297 lines
17 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
|
|
import HeroBillboard from '@/components/sections/hero/HeroBillboard';
|
|
import MediaSplitTabsAbout from '@/components/sections/about/MediaSplitTabsAbout';
|
|
import FeatureCardTwentyTwo from '@/components/sections/feature/FeatureCardTwentyTwo';
|
|
import TeamCardSix from '@/components/sections/team/TeamCardSix';
|
|
import MetricCardTen from '@/components/sections/metrics/MetricCardTen';
|
|
import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
|
|
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
|
|
import ContactSplit from '@/components/sections/contact/ContactSplit';
|
|
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
|
|
import { Calendar, HelpCircle, Mail, MessageSquare, Users, Zap } from "lucide-react";
|
|
|
|
export default function ComputerClubPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="bounce-effect"
|
|
defaultTextAnimation="entrance-slide"
|
|
borderRadius="pill"
|
|
contentWidth="medium"
|
|
sizing="largeSizeMediumTitles"
|
|
background="circleGradient"
|
|
cardStyle="soft-shadow"
|
|
primaryButtonStyle="shadow"
|
|
secondaryButtonStyle="solid"
|
|
headingFontWeight="bold"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarLayoutFloatingInline
|
|
brandName="Computer Club"
|
|
navItems={[
|
|
{ name: "About", id: "about" },
|
|
{ name: "Events", id: "events" },
|
|
{ name: "Team", id: "team" },
|
|
{ name: "Contact", id: "contact" }
|
|
]}
|
|
button={{
|
|
text: "Join Us", href: "#contact"
|
|
}}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroBillboard
|
|
title="Computer Club"
|
|
description="Empowering students through technology, innovation, and community collaboration"
|
|
background={{ variant: "sparkles-gradient" }}
|
|
buttons={[
|
|
{ text: "Get Involved", href: "#events" },
|
|
{ text: "Learn More", href: "#about" }
|
|
]}
|
|
imageSrc="http://img.b2bpic.net/free-photo/team-developers-doing-brainstorming-optimizing-code_482257-112972.jpg?_wi=1"
|
|
imageAlt="Computer club technology community"
|
|
mediaAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<MediaSplitTabsAbout
|
|
title="Why Join Our Computer Club"
|
|
description="Discover what makes our community special and how we're shaping the future of technology"
|
|
tabs={[
|
|
{
|
|
id: "learning", label: "Continuous Learning", description: "Access workshops, seminars, and hands-on training sessions led by industry experts and experienced club members. We cover everything from web development to artificial intelligence."
|
|
},
|
|
{
|
|
id: "networking", label: "Network & Collaborate", description: "Connect with like-minded tech enthusiasts, build meaningful relationships, and find mentors who can guide your career journey in technology."
|
|
},
|
|
{
|
|
id: "projects", label: "Build Real Projects", description: "Work on exciting real-world projects that challenge you to innovate and create solutions. Showcase your work and build an impressive portfolio."
|
|
}
|
|
]}
|
|
imageSrc="http://img.b2bpic.net/free-photo/group-multinational-busy-people-working-office_146671-15657.jpg"
|
|
imageAlt="Computer club members collaborating"
|
|
imagePosition="right"
|
|
useInvertedBackground={false}
|
|
mediaAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="features" data-section="features">
|
|
<FeatureCardTwentyTwo
|
|
title="What We Offer"
|
|
description="From beginner fundamentals to advanced technical skills, our club provides comprehensive resources for growth"
|
|
tag="Features"
|
|
tagIcon={Zap}
|
|
features={[
|
|
{
|
|
id: "1", title: "Expert-Led Workshops & Training", category: ["Education", "Development"],
|
|
imageSrc: "http://img.b2bpic.net/free-photo/team-database-admins-analyzing-source-code-wall-screen-tv-comparing-errors-using-digital-tablet-busy-server-room-two-cloud-programers-debugging-algorithm-software-innovation-office_482257-43976.jpg", imageAlt: "Programming workshop"
|
|
},
|
|
{
|
|
id: "2", title: "Networking Events & Meetups", category: ["Community", "Connection"],
|
|
imageSrc: "http://img.b2bpic.net/free-photo/status-ability-skills-expand-branch-connection_53876-121278.jpg", imageAlt: "Team networking event"
|
|
},
|
|
{
|
|
id: "3", title: "Hackathons & Competitions", category: ["Competition", "Innovation"],
|
|
imageSrc: "http://img.b2bpic.net/free-photo/software-technician-developing-maintaining-databases-work_482257-108271.jpg", imageAlt: "Hackathon participants"
|
|
},
|
|
{
|
|
id: "4", title: "Technical Mentorship Program", category: ["Mentoring", "Growth"],
|
|
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-people-learning_23-2149300715.jpg", imageAlt: "Mentorship session"
|
|
}
|
|
]}
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="team" data-section="team">
|
|
<TeamCardSix
|
|
title="Meet Our Leadership"
|
|
description="Passionate individuals dedicated to fostering innovation and community growth"
|
|
tag="Team"
|
|
tagIcon={Users}
|
|
members={[
|
|
{
|
|
id: "1", name: "Alex Rivera", role: "Club President", imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg?_wi=1", imageAlt: "Alex Rivera, Club President"
|
|
},
|
|
{
|
|
id: "2", name: "Jordan Chen", role: "Vice President", imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg?_wi=2", imageAlt: "Jordan Chen, Vice President"
|
|
},
|
|
{
|
|
id: "3", name: "Sam Thompson", role: "Events Coordinator", imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg?_wi=3", imageAlt: "Sam Thompson, Events Coordinator"
|
|
},
|
|
{
|
|
id: "4", name: "Morgan Blake", role: "Technical Lead", imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg?_wi=4", imageAlt: "Morgan Blake, Technical Lead"
|
|
}
|
|
]}
|
|
gridVariant="uniform-all-items-equal"
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="events" data-section="events">
|
|
<MetricCardTen
|
|
title="Upcoming Events"
|
|
description="Check out our exciting lineup of events and workshops"
|
|
tag="Events"
|
|
tagIcon={Calendar}
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
animationType="slide-up"
|
|
metrics={[
|
|
{
|
|
id: "1", title: "Web Development Workshop", subtitle: "Learn modern React, Next.js, and responsive design", category: "Web Development", value: "Mar 15"
|
|
},
|
|
{
|
|
id: "2", title: "AI & Machine Learning Seminar", subtitle: "Introduction to neural networks and deep learning", category: "AI/ML", value: "Mar 22"
|
|
},
|
|
{
|
|
id: "3", title: "Spring Hackathon 2024", subtitle: "24-hour coding competition with prizes", category: "Competition", value: "Apr 5"
|
|
},
|
|
{
|
|
id: "4", title: "Cybersecurity Talk", subtitle: "Protecting your digital identity in 2024", category: "Security", value: "Apr 12"
|
|
},
|
|
{
|
|
id: "5", title: "Game Dev Bootcamp", subtitle: "Create your first game with Unity", category: "Game Dev", value: "Apr 19"
|
|
},
|
|
{
|
|
id: "6", title: "Career Fair", subtitle: "Connect with tech companies and recruiters", category: "Career", value: "May 1"
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardTwo
|
|
title="Member Testimonials"
|
|
description="Hear from our community members about their experiences"
|
|
tag="Testimonials"
|
|
tagIcon={MessageSquare}
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
animationType="slide-up"
|
|
testimonials={[
|
|
{
|
|
id: "1", name: "Emma Wilson", role: "Computer Science Major", testimonial: "Joining the Computer Club was the best decision I made. The workshops transformed my understanding of web development and I've made incredible friends who share my passion.", imageSrc: "http://img.b2bpic.net/free-photo/smiling-beautiful-middle-aged-business-woman_1262-3085.jpg?_wi=1", imageAlt: "Emma Wilson"
|
|
},
|
|
{
|
|
id: "2", name: "Liam Parker", role: "Electrical Engineering Student", testimonial: "The mentorship program connected me with industry professionals who gave me invaluable guidance. I landed my first internship thanks to connections made here.", imageSrc: "http://img.b2bpic.net/free-photo/smiling-beautiful-middle-aged-business-woman_1262-3085.jpg?_wi=2", imageAlt: "Liam Parker"
|
|
},
|
|
{
|
|
id: "3", name: "Sophia Martinez", role: "Data Science Enthusiast", testimonial: "The hackathons are incredibly well-organized and challenging. I've learned more from these events than in any classroom. The community is supportive and inspiring.", imageSrc: "http://img.b2bpic.net/free-photo/smiling-beautiful-middle-aged-business-woman_1262-3085.jpg?_wi=3", imageAlt: "Sophia Martinez"
|
|
},
|
|
{
|
|
id: "4", name: "Noah Johnson", role: "Aspiring Software Engineer", testimonial: "This club gave me the confidence to pursue my dreams in tech. The diverse skill-sharing and collaborative environment accelerated my learning exponentially.", imageSrc: "http://img.b2bpic.net/free-photo/smiling-beautiful-middle-aged-business-woman_1262-3085.jpg?_wi=4", imageAlt: "Noah Johnson"
|
|
},
|
|
{
|
|
id: "5", name: "Ava Chen", role: "Computer Science Sophomore", testimonial: "I came as a beginner with no coding experience. The patient mentors and structured workshops brought me from zero to building real projects in just a few months.", imageSrc: "http://img.b2bpic.net/free-photo/smiling-beautiful-middle-aged-business-woman_1262-3085.jpg?_wi=5", imageAlt: "Ava Chen"
|
|
},
|
|
{
|
|
id: "6", name: "Ethan Brooks", role: "Game Development Hobbyist", testimonial: "The Game Dev Bootcamp introduced me to tools and techniques I never would have discovered alone. I've shipped my first indie game thanks to this community.", imageSrc: "http://img.b2bpic.net/free-photo/smiling-beautiful-middle-aged-business-woman_1262-3085.jpg?_wi=6", imageAlt: "Ethan Brooks"
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqSplitMedia
|
|
title="Frequently Asked Questions"
|
|
description="Everything you need to know about joining and participating in the Computer Club"
|
|
tag="Help"
|
|
tagIcon={HelpCircle}
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
mediaAnimation="slide-up"
|
|
faqsAnimation="slide-up"
|
|
imageSrc="http://img.b2bpic.net/free-photo/close-up-customer-center-worker-assisting-users-with-installing-software_482257-125825.jpg"
|
|
imageAlt="FAQ support illustration"
|
|
mediaPosition="right"
|
|
faqs={[
|
|
{
|
|
id: "1", title: "Who can join the Computer Club?", content: "The Computer Club welcomes all students regardless of major or experience level. Whether you're a complete beginner or an experienced developer, there's a place for you in our community. We have events and resources tailored to all skill levels."
|
|
},
|
|
{
|
|
id: "2", title: "Is there a membership fee?", content: "No, membership is completely free! We believe technology education should be accessible to everyone. While there are no membership fees, we occasionally charge a small amount for food at events, which is entirely optional."
|
|
},
|
|
{
|
|
id: "3", title: "How often do events occur?", content: "We hold weekly meetings on Thursdays at 6 PM, and host special workshops, hackathons, and guest speaker events throughout the semester. Check our calendar or follow us on social media for the latest updates on upcoming events."
|
|
},
|
|
{
|
|
id: "4", title: "Can I participate in hackathons as a beginner?", content: "Absolutely! Our hackathons welcome participants of all skill levels. Many beginners participate and learn from experienced developers. We have beginner-friendly projects and mentors available to guide you through the process."
|
|
},
|
|
{
|
|
id: "5", title: "What programming languages are covered?", content: "We cover a wide range of technologies including Python, JavaScript, Java, C++, and more. Our workshops span web development, mobile apps, game development, AI/ML, cybersecurity, and data science. You can focus on areas that interest you most."
|
|
},
|
|
{
|
|
id: "6", title: "How do I get started?", content: "Simply click the 'Join Us' button at the top of this page or attend our next weekly meeting. No prior registration required—just show up! We'll welcome you, answer your questions, and help you get connected with like-minded tech enthusiasts."
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactSplit
|
|
tag="Join Us"
|
|
title="Stay Connected"
|
|
description="Get exclusive updates about events, workshops, and opportunities. Join our community of passionate tech enthusiasts."
|
|
tagIcon={Mail}
|
|
tagAnimation="blur-reveal"
|
|
useInvertedBackground={false}
|
|
imageSrc="http://img.b2bpic.net/free-photo/team-developers-doing-brainstorming-optimizing-code_482257-112972.jpg?_wi=2"
|
|
imageAlt="Join the Computer Club"
|
|
mediaAnimation="slide-up"
|
|
mediaPosition="right"
|
|
background={{ variant: "sparkles-gradient" }}
|
|
inputPlaceholder="Enter your email"
|
|
buttonText="Subscribe"
|
|
termsText="We respect your privacy. Unsubscribe anytime."
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterLogoEmphasis
|
|
logoText="Computer Club"
|
|
columns={[
|
|
{
|
|
items: [
|
|
{ label: "About", href: "#about" },
|
|
{ label: "Events", href: "#events" },
|
|
{ label: "Team", href: "#team" }
|
|
]
|
|
},
|
|
{
|
|
items: [
|
|
{ label: "Workshops", href: "#events" },
|
|
{ label: "Hackathons", href: "#events" },
|
|
{ label: "Mentorship", href: "#contact" }
|
|
]
|
|
},
|
|
{
|
|
items: [
|
|
{ label: "Join Us", href: "#contact" },
|
|
{ label: "Contact", href: "#contact" },
|
|
{ label: "FAQ", href: "#faq" }
|
|
]
|
|
},
|
|
{
|
|
items: [
|
|
{ label: "Twitter", href: "https://twitter.com" },
|
|
{ label: "LinkedIn", href: "https://linkedin.com" },
|
|
{ label: "Discord", href: "https://discord.com" }
|
|
]
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
}
|