248 lines
13 KiB
TypeScript
248 lines
13 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
|
|
import HeroCentered from '@/components/sections/hero/HeroCentered';
|
|
import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
|
|
import FeatureCardSix from '@/components/sections/feature/FeatureCardSix';
|
|
import TeamCardFive from '@/components/sections/team/TeamCardFive';
|
|
import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
|
|
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
|
|
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
|
|
import ContactCenter from '@/components/sections/contact/ContactCenter';
|
|
import FooterCard from '@/components/sections/footer/FooterCard';
|
|
import { Github, Linkedin, Twitter, Mail } from "lucide-react";
|
|
|
|
export default function TechHubClubPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="elastic-effect"
|
|
defaultTextAnimation="reveal-blur"
|
|
borderRadius="soft"
|
|
contentWidth="small"
|
|
sizing="medium"
|
|
background="fluid"
|
|
cardStyle="inset"
|
|
primaryButtonStyle="gradient"
|
|
secondaryButtonStyle="solid"
|
|
headingFontWeight="semibold"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleFullscreen
|
|
navItems={[
|
|
{name: "Home", id: "hero"},
|
|
{name: "About", id: "about"},
|
|
{name: "Activities", id: "features"},
|
|
{name: "Team", id: "team"},
|
|
{name: "Contact", id: "contact"}
|
|
]}
|
|
brandName="TechHub Club"
|
|
bottomLeftText="Join the Community"
|
|
bottomRightText="hello@techhubclub.com"
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroCentered
|
|
title="Welcome to the Computer Club"
|
|
description="Join a vibrant community of tech enthusiasts, developers, and innovators. Build projects, learn new skills, and collaborate with fellow members who share your passion for technology."
|
|
background={{variant: "downward-rays-static"}}
|
|
avatars={[
|
|
{src: "http://img.b2bpic.net/free-photo/smiling-young-handsome-guy-wearing-green-shirt_141793-122624.jpg", alt: "Club Member 1"},
|
|
{src: "http://img.b2bpic.net/free-photo/portrait-young-handsome-business-man_1303-19609.jpg", alt: "Club Member 2"},
|
|
{src: "http://img.b2bpic.net/free-photo/portrait-young-handsome-business-man_1303-19609.jpg", alt: "Club Member 3"}
|
|
]}
|
|
avatarText="Join 150+ passionate members"
|
|
buttons={[
|
|
{text: "Join Now", href: "#contact"},
|
|
{text: "Learn More", href: "#about"}
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<InlineImageSplitTextAbout
|
|
heading={[
|
|
{type: "text", content: "Empowering"},
|
|
{type: "image", src: "http://img.b2bpic.net/free-vector/linkedin-picture-template_742173-4956.jpg", alt: "Club emblem"},
|
|
{type: "text", content: "the next generation of tech leaders"}
|
|
]}
|
|
useInvertedBackground={false}
|
|
buttons={[
|
|
{text: "View Our Projects", href: "#features"},
|
|
{text: "Contact Us", href: "#contact"}
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="features" data-section="features">
|
|
<FeatureCardSix
|
|
title="Club Activities & Initiatives"
|
|
description="Discover the diverse programs and events we offer throughout the year to help members grow their technical skills and network."
|
|
tag="What We Do"
|
|
tagAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
features={[
|
|
{
|
|
id: 1,
|
|
title: "Coding Bootcamps", description: "Intensive workshops on web development, mobile apps, and competitive programming. Learn from experienced developers and practice real-world problem-solving.", imageSrc: "http://img.b2bpic.net/free-photo/am-i-doing-it-right-group-young-people-casual-clothes-working-modern-office_146671-16514.jpg"
|
|
},
|
|
{
|
|
id: 2,
|
|
title: "Hackathons & Competitions", description: "Participate in monthly hackathons and coding competitions. Win prizes, build impressive projects, and showcase your skills to the tech community.", imageSrc: "http://img.b2bpic.net/free-photo/two-creative-designers-working-project-together-sharing-new-ideas-workplace-business-team-work-concept_58466-12412.jpg"
|
|
},
|
|
{
|
|
id: 3,
|
|
title: "Tech Talks & Seminars", description: "Learn from industry professionals and researchers. Topics range from AI and machine learning to cybersecurity and emerging technologies.", imageSrc: "http://img.b2bpic.net/free-photo/experts-optimize-factory-equipment-energy-output-videocall-meeting_482257-126691.jpg"
|
|
},
|
|
{
|
|
id: 4,
|
|
title: "Project Collaboration", description: "Work with peers on collaborative projects. From web apps to hardware projects, team up and bring your ideas to life with mentorship support.", imageSrc: "http://img.b2bpic.net/free-photo/teamworking-engineers-coding-advanced-ai-algorithm-startup_482257-124943.jpg"
|
|
}
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="team" data-section="team">
|
|
<TeamCardFive
|
|
title="Meet Our Leadership"
|
|
description="Meet the dedicated team members who lead the Computer Club with passion and vision."
|
|
tag="Our Team"
|
|
tagAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
animationType="slide-up"
|
|
team={[
|
|
{
|
|
id: "1", name: "Alex Chen", role: "President & Co-Founder", imageSrc: "http://img.b2bpic.net/free-photo/inspiring-new-boss_1098-93.jpg"
|
|
},
|
|
{
|
|
id: "2", name: "Jordan Martinez", role: "VP of Operations", imageSrc: "http://img.b2bpic.net/free-photo/close-up-entrepreneur-with-corporate-job-looking-camera-business-office-portrait-young-man-preparing-work-planning-development-industry-with-technology-computer_482257-29387.jpg"
|
|
},
|
|
{
|
|
id: "3", name: "Sarah Johnson", role: "Events Coordinator", imageSrc: "http://img.b2bpic.net/free-photo/portrait-woman-working-business-with-computer_482257-20185.jpg"
|
|
},
|
|
{
|
|
id: "4", name: "Mike Wong", role: "Technical Director", imageSrc: "http://img.b2bpic.net/free-photo/smiling-mechanic-standing-repair-shop_1170-1349.jpg"
|
|
}
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="metrics" data-section="metrics">
|
|
<MetricCardTwo
|
|
title="Our Impact by the Numbers"
|
|
description="See the growth and achievements of our community throughout the years."
|
|
tag="Stats"
|
|
tagAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
gridVariant="uniform-all-items-equal"
|
|
animationType="slide-up"
|
|
metrics={[
|
|
{
|
|
id: "1", value: "150+", description: "Active Members"
|
|
},
|
|
{
|
|
id: "2", value: "24", description: "Events Per Year"
|
|
},
|
|
{
|
|
id: "3", value: "45+", description: "Completed Projects"
|
|
},
|
|
{
|
|
id: "4", value: "92%", description: "Member Satisfaction"
|
|
}
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardFifteen
|
|
testimonial="The Computer Club completely transformed my understanding of software development. The mentorship and community support helped me land my dream internship. I've made lifelong friends and collaborators here."
|
|
rating={5}
|
|
author="Emma Davis, Software Engineering Student"
|
|
avatars={[
|
|
{src: "http://img.b2bpic.net/free-photo/outdoor-shot-young-caucasian-man-with-beard-relaxing-open-air-surrounded-by-beautiful-mountain-setting-rainforest_273609-1855.jpg", alt: "Emma Davis"},
|
|
{src: "http://img.b2bpic.net/free-photo/smiling-millennial-man-looking-camera-cafe-headshot-portrait_1163-5163.jpg", alt: "Member"},
|
|
{src: "http://img.b2bpic.net/free-vector/set-social-people-media-profile-member_24877-53571.jpg", alt: "Member"},
|
|
{src: "http://img.b2bpic.net/free-photo/outdoor-shot-young-caucasian-man-with-beard-relaxing-open-air-surrounded-by-beautiful-mountain-setting-rainforest_273609-1855.jpg", alt: "Member"},
|
|
{src: "http://img.b2bpic.net/free-vector/set-social-people-media-profile-member_24877-53571.jpg", alt: "Member"},
|
|
{src: "http://img.b2bpic.net/free-photo/outdoor-shot-young-caucasian-man-with-beard-relaxing-open-air-surrounded-by-beautiful-mountain-setting-rainforest_273609-1855.jpg", alt: "Member"}
|
|
]}
|
|
ratingAnimation="slide-up"
|
|
avatarsAnimation="slide-up"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqSplitMedia
|
|
title="Frequently Asked Questions"
|
|
description="Get answers to common questions about membership, events, and club activities."
|
|
tag="FAQ"
|
|
tagAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
imageSrc="http://img.b2bpic.net/free-photo/help-customer-support-service-concept_53876-120150.jpg"
|
|
imageAlt="FAQ section"
|
|
mediaAnimation="slide-up"
|
|
faqsAnimation="slide-up"
|
|
faqs={[
|
|
{
|
|
id: "1", title: "How do I join the Computer Club?", content: "Membership is open to all students with an interest in technology. Simply fill out our membership form at our contact section or attend any of our regular meetings. There are no specific prerequisites or experience requirements."
|
|
},
|
|
{
|
|
id: "2", title: "Are there membership fees?", content: "No, membership is completely free! We're supported by university funding and local tech sponsors who believe in supporting the next generation of developers."
|
|
},
|
|
{
|
|
id: "3", title: "What experience level do I need?", content: "We welcome members of all experience levels, from complete beginners to experienced developers. Our activities are designed to accommodate everyone, and we have mentors available to help beginners get started."
|
|
},
|
|
{
|
|
id: "4", title: "When do you meet and hold events?", content: "We hold general meetings every Friday at 5 PM in the CS Building, Room 301. Special events and workshops are scheduled throughout the year. Check our calendar for upcoming activities."
|
|
},
|
|
{
|
|
id: "5", title: "Can I participate in hackathons?", content: "Absolutely! Hackathons are some of our most popular events. Both individual participation and team participation are encouraged. We also host several online hackathons throughout the year."
|
|
},
|
|
{
|
|
id: "6", title: "How can I get involved as a volunteer?", content: "We're always looking for passionate volunteers to help organize events, mentor members, and lead workshops. Contact our VP of Operations at jordan.martinez@techhubclub.com to learn about volunteer opportunities."
|
|
}
|
|
]}
|
|
mediaPosition="left"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactCenter
|
|
tag="Get In Touch"
|
|
title="Ready to Join the Community?"
|
|
description="Sign up for our newsletter to stay updated on upcoming events, workshops, and member exclusive opportunities. Be part of the Computer Club family."
|
|
background={{variant: "rotated-rays-animated"}}
|
|
useInvertedBackground={false}
|
|
tagAnimation="slide-up"
|
|
buttonText="Subscribe"
|
|
inputPlaceholder="Enter your email address"
|
|
termsText="We respect your privacy. Unsubscribe anytime. By subscribing, you agree to receive updates about club events and activities."
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterCard
|
|
logoText="TechHub Club"
|
|
copyrightText="© 2025 Computer Club. Building the future together."
|
|
socialLinks={[
|
|
{icon: Github, href: "https://github.com", ariaLabel: "GitHub"},
|
|
{icon: Linkedin, href: "https://linkedin.com", ariaLabel: "LinkedIn"},
|
|
{icon: Twitter, href: "https://twitter.com", ariaLabel: "Twitter"},
|
|
{icon: Mail, href: "mailto:hello@techhubclub.com", ariaLabel: "Email"}
|
|
]}
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
} |