Merge version_2 into main #4

Merged
bender merged 7 commits from version_2 into main 2026-03-03 16:00:26 +00:00
7 changed files with 486 additions and 44 deletions

84
src/app/about/page.tsx Normal file
View File

@@ -0,0 +1,84 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
import FooterBase from '@/components/sections/footer/FooterBase';
import { Heart, Rocket } from "lucide-react";
export default function AboutPage() {
return (
<ThemeProvider
defaultButtonVariant="hover-magnetic"
defaultTextAnimation="entrance-slide"
borderRadius="rounded"
contentWidth="mediumLarge"
sizing="largeSmallSizeMediumTitles"
background="circleGradient"
cardStyle="glass-depth"
primaryButtonStyle="flat"
secondaryButtonStyle="glass"
headingFontWeight="semibold"
>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingInline
brandName="ComputerClub"
navItems={[
{ name: "About", id: "/about" },
{ name: "Features", id: "/features" },
{ name: "Team", id: "/team" },
{ name: "Events", id: "/events" }
]}
button={{ text: "Join Us", href: "#contact" }}
animateOnLoad={true}
/>
</div>
<div id="about" data-section="about">
<TestimonialAboutCard
tag="Our Mission"
tagIcon={Heart}
tagAnimation="slide-up"
title="Building the Future Through Technology and Community"
description="Led by passionate technologists"
subdescription="Computer Club Leadership"
icon={Rocket}
imageSrc="http://img.b2bpic.net/free-photo/woman-sitting-library-with-her-laptop_273609-12725.jpg"
imageAlt="Computer Club community"
mediaAnimation="slide-up"
useInvertedBackground={false}
/>
</div>
<div id="footer" data-section="footer">
<FooterBase
logoText="ComputerClub"
copyrightText="© 2025 Computer Club | Building the Future Together"
columns={[
{
title: "Community", items: [
{ label: "About Us", href: "/about" },
{ label: "Events", href: "/events" },
{ label: "Team", href: "/team" }
]
},
{
title: "Resources", items: [
{ label: "Workshops", href: "/features" },
{ label: "FAQ", href: "#faq" },
{ label: "Blog", href: "/events" }
]
},
{
title: "Connect", items: [
{ label: "Discord Server", href: "https://discord.com/invite/computerclub" },
{ label: "Email Us", href: "mailto:computeclube@university.edu" },
{ label: "Social Media", href: "https://twitter.com/computerclub" }
]
}
]}
/>
</div>
</ThemeProvider>
);
}

96
src/app/events/page.tsx Normal file
View File

@@ -0,0 +1,96 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import BlogCardThree from '@/components/sections/blog/BlogCardThree';
import FooterBase from '@/components/sections/footer/FooterBase';
import { Calendar } from "lucide-react";
export default function EventsPage() {
return (
<ThemeProvider
defaultButtonVariant="hover-magnetic"
defaultTextAnimation="entrance-slide"
borderRadius="rounded"
contentWidth="mediumLarge"
sizing="largeSmallSizeMediumTitles"
background="circleGradient"
cardStyle="glass-depth"
primaryButtonStyle="flat"
secondaryButtonStyle="glass"
headingFontWeight="semibold"
>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingInline
brandName="ComputerClub"
navItems={[
{ name: "About", id: "/about" },
{ name: "Features", id: "/features" },
{ name: "Team", id: "/team" },
{ name: "Events", id: "/events" }
]}
button={{ text: "Join Us", href: "#contact" }}
animateOnLoad={true}
/>
</div>
<div id="events" data-section="events">
<BlogCardThree
title="Upcoming Events"
description="Join us for exciting workshops, competitions, and networking sessions."
tag="Calendar"
tagIcon={Calendar}
tagAnimation="slide-up"
blogs={[
{
id: "1", category: "Workshop", title: "Advanced Python Development", excerpt: "Deep dive into Python frameworks and best practices for scalable applications.", imageSrc: "http://img.b2bpic.net/free-photo/colleagues-working-together-conference-room_158595-5236.jpg?_wi=2", imageAlt: "Python workshop", authorName: "Tech Team", authorAvatar: "http://img.b2bpic.net/free-photo/portrait-handsome-man-with-copy-space_23-2148422282.jpg", date: "Feb 15, 2025"
},
{
id: "2", category: "Hackathon", title: "Spring Tech Hackathon", excerpt: "24-hour coding competition with amazing prizes and networking opportunities.", imageSrc: "http://img.b2bpic.net/free-photo/side-view-friends-winning-videogame_23-2149349984.jpg?_wi=2", imageAlt: "Hackathon event", authorName: "Event Team", authorAvatar: "http://img.b2bpic.net/free-photo/closeup-young-female-professional-making-eye-contact-against-colored-background_662251-651.jpg", date: "Mar 1-2, 2025"
},
{
id: "3", category: "Meetup", title: "Web Development Basics", excerpt: "Learn HTML, CSS, and JavaScript fundamentals from industry professionals.", imageSrc: "http://img.b2bpic.net/free-photo/yoga-class-concept_53876-31177.jpg?_wi=2", imageAlt: "Web development session", authorName: "Community Lead", authorAvatar: "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", date: "Feb 22, 2025"
},
{
id: "4", category: "Seminar", title: "AI and Machine Learning Trends", excerpt: "Explore the latest developments in AI/ML and their real-world applications.", imageSrc: "http://img.b2bpic.net/free-photo/multiethnic-leaders-strategizing-corporate-success-gender-equality_482257-123645.jpg?_wi=2", imageAlt: "AI seminar", authorName: "Speakers", authorAvatar: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg", date: "Mar 8, 2025"
}
]}
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
carouselMode="auto"
/>
</div>
<div id="footer" data-section="footer">
<FooterBase
logoText="ComputerClub"
copyrightText="© 2025 Computer Club | Building the Future Together"
columns={[
{
title: "Community", items: [
{ label: "About Us", href: "/about" },
{ label: "Events", href: "/events" },
{ label: "Team", href: "/team" }
]
},
{
title: "Resources", items: [
{ label: "Workshops", href: "/features" },
{ label: "FAQ", href: "#faq" },
{ label: "Blog", href: "/events" }
]
},
{
title: "Connect", items: [
{ label: "Discord Server", href: "https://discord.com/invite/computerclub" },
{ label: "Email Us", href: "mailto:computeclube@university.edu" },
{ label: "Social Media", href: "https://twitter.com/computerclub" }
]
}
]}
/>
</div>
</ThemeProvider>
);
}

111
src/app/features/page.tsx Normal file
View File

@@ -0,0 +1,111 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import FeatureCardTwentyFive from '@/components/sections/feature/FeatureCardTwentyFive';
import FooterBase from '@/components/sections/footer/FooterBase';
import { Code, Users, Lightbulb, Award, Star } from "lucide-react";
export default function FeaturesPage() {
return (
<ThemeProvider
defaultButtonVariant="hover-magnetic"
defaultTextAnimation="entrance-slide"
borderRadius="rounded"
contentWidth="mediumLarge"
sizing="largeSmallSizeMediumTitles"
background="circleGradient"
cardStyle="glass-depth"
primaryButtonStyle="flat"
secondaryButtonStyle="glass"
headingFontWeight="semibold"
>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingInline
brandName="ComputerClub"
navItems={[
{ name: "About", id: "/about" },
{ name: "Features", id: "/features" },
{ name: "Team", id: "/team" },
{ name: "Events", id: "/events" }
]}
button={{ text: "Join Us", href: "#contact" }}
animateOnLoad={true}
/>
</div>
<div id="features" data-section="features">
<FeatureCardTwentyFive
title="What We Offer"
description="Comprehensive programs and experiences designed to elevate your technical skills and expand your network."
tag="Club Benefits"
tagIcon={Star}
tagAnimation="slide-up"
features={[
{
title: "Hands-On Workshops", description: "Learn from experienced members through practical, project-based workshops covering diverse technologies.", icon: Code,
mediaItems: [
{ imageSrc: "http://img.b2bpic.net/free-photo/yoga-class-concept_53876-31177.jpg?_wi=1", imageAlt: "Workshop in progress" },
{ imageSrc: "http://img.b2bpic.net/free-photo/colleagues-working-together-conference-room_158595-5236.jpg?_wi=1", imageAlt: "Coding tutorial" }
]
},
{
title: "Networking Opportunities", description: "Connect with like-minded tech enthusiasts, build lasting relationships, and collaborate on meaningful projects.", icon: Users,
mediaItems: [
{ imageSrc: "http://img.b2bpic.net/free-photo/friends-hanging-out-with-each-other_53876-40981.jpg", imageAlt: "Networking event" },
{ imageSrc: "http://img.b2bpic.net/free-photo/multiracial-group-five-friends-having-coffee-together_1139-1023.jpg?_wi=2", imageAlt: "Community discussion" }
]
},
{
title: "Collaborative Projects", description: "Work together on exciting initiatives that solve real-world problems and showcase your portfolio.", icon: Lightbulb,
mediaItems: [
{ imageSrc: "http://img.b2bpic.net/free-photo/multiethnic-leaders-strategizing-corporate-success-gender-equality_482257-123645.jpg?_wi=1", imageAlt: "Team project work" },
{ imageSrc: "http://img.b2bpic.net/free-photo/businessman-holding-golden-cup-trophy_93675-135798.jpg", imageAlt: "Project success celebration" }
]
},
{
title: "Mentorship & Support", description: "Get guidance from experienced members who are committed to helping you grow as a technologist.", icon: Award,
mediaItems: [
{ imageSrc: "http://img.b2bpic.net/free-photo/i-always-feel-relieved-after-session-with-you_637285-9953.jpg", imageAlt: "Mentorship session" },
{ imageSrc: "http://img.b2bpic.net/free-photo/back-school-concept-with-wooden-blocks-human-figure-pencils-wooden-table-side-view_176474-9330.jpg", imageAlt: "Personal growth" }
]
}
]}
animationType="blur-reveal"
textboxLayout="default"
useInvertedBackground={false}
/>
</div>
<div id="footer" data-section="footer">
<FooterBase
logoText="ComputerClub"
copyrightText="© 2025 Computer Club | Building the Future Together"
columns={[
{
title: "Community", items: [
{ label: "About Us", href: "/about" },
{ label: "Events", href: "/events" },
{ label: "Team", href: "/team" }
]
},
{
title: "Resources", items: [
{ label: "Workshops", href: "/features" },
{ label: "FAQ", href: "#faq" },
{ label: "Blog", href: "/events" }
]
},
{
title: "Connect", items: [
{ label: "Discord Server", href: "https://discord.com/invite/computerclub" },
{ label: "Email Us", href: "mailto:computeclube@university.edu" },
{ label: "Social Media", href: "https://twitter.com/computerclub" }
]
}
]}
/>
</div>
</ThemeProvider>
);
}

View File

@@ -1,46 +1,22 @@
import type { Metadata } from "next";
import { Inter, Open_Sans } from "next/font/google";
import { Inter } from "next/font/google";
import "./globals.css";
import { ServiceWrapper } from "@/components/ServiceWrapper";
import Tag from "@/tag/Tag";
import "./styles/variables.css";
import "./styles/base.css";
const inter = Inter({
variable: "--font-inter", subsets: ["latin"],
});
const openSans = Open_Sans({
variable: "--font-open-sans", subsets: ["latin"],
});
const inter = Inter({ subsets: ["latin"] });
export const metadata: Metadata = {
title: "Computer Club | Tech Community & Learning Hub", description: "Join our vibrant tech community. Workshops, events, mentorship, and collaborative projects for aspiring and experienced developers.", keywords: "computer club, tech community, programming, workshops, hackathon, networking", metadataBase: new URL("https://computerclub.com"),
alternates: {
canonical: "https://computerclub.com"},
openGraph: {
title: "Computer Club | Tech Community & Learning Hub", description: "Join our vibrant tech community. Workshops, events, mentorship, and collaborative projects.", url: "https://computerclub.com", siteName: "Computer Club", type: "website", images: [
{
url: "http://img.b2bpic.net/free-photo/technology-unicorn-venture-workspace-with-pc-used-conduct-code-reviews_482257-118729.jpg", alt: "Computer Club Community"},
],
},
twitter: {
card: "summary_large_image", title: "Computer Club | Tech Community", description: "Join our vibrant tech community for workshops, events, and collaboration.", images: ["http://img.b2bpic.net/free-photo/coworkers-team-working-brainstorming-concept_329181-12072.jpg"],
},
};
title: "Computer Club", description: "Join a vibrant community of tech enthusiasts, innovators, and learners."};
export default function RootLayout({
children,
}: Readonly<{
}: {
children: React.ReactNode;
}>) {
}) {
return (
<html lang="en" suppressHydrationWarning>
<ServiceWrapper>
<body
className={`${inter.variable} ${openSans.variable} antialiased`}
>
<Tag />
{children}
<html lang="en">
<body className={inter.className}>{children}
<script
dangerouslySetInnerHTML={{
__html: `
@@ -1408,7 +1384,6 @@ export default function RootLayout({
}}
/>
</body>
</ServiceWrapper>
</html>
);
}

88
src/app/metrics/page.tsx Normal file
View File

@@ -0,0 +1,88 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
import FooterBase from '@/components/sections/footer/FooterBase';
import { BarChart3, Users, Calendar, Zap, Smile } from "lucide-react";
export default function MetricsPage() {
return (
<ThemeProvider
defaultButtonVariant="hover-magnetic"
defaultTextAnimation="entrance-slide"
borderRadius="rounded"
contentWidth="mediumLarge"
sizing="largeSmallSizeMediumTitles"
background="circleGradient"
cardStyle="glass-depth"
primaryButtonStyle="flat"
secondaryButtonStyle="glass"
headingFontWeight="semibold"
>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingInline
brandName="ComputerClub"
navItems={[
{ name: "About", id: "/about" },
{ name: "Features", id: "/features" },
{ name: "Team", id: "/team" },
{ name: "Events", id: "/events" }
]}
button={{ text: "Join Us", href: "#contact" }}
animateOnLoad={true}
/>
</div>
<div id="metrics" data-section="metrics">
<MetricCardOne
title="Our Impact"
description="Measurable success in building a thriving tech community"
tag="By The Numbers"
tagIcon={BarChart3}
tagAnimation="slide-up"
metrics={[
{ id: "1", value: "500", title: "members", description: "Active community members", icon: Users },
{ id: "2", value: "48", title: "events", description: "Workshops and meetups annually", icon: Calendar },
{ id: "3", value: "25", title: "projects", description: "Successfully completed initiatives", icon: Zap },
{ id: "4", value: "95", title: "percent", description: "Member satisfaction rate", icon: Smile }
]}
gridVariant="uniform-all-items-equal"
animationType="scale-rotate"
textboxLayout="default"
useInvertedBackground={false}
/>
</div>
<div id="footer" data-section="footer">
<FooterBase
logoText="ComputerClub"
copyrightText="© 2025 Computer Club | Building the Future Together"
columns={[
{
title: "Community", items: [
{ label: "About Us", href: "/about" },
{ label: "Events", href: "/events" },
{ label: "Team", href: "/team" }
]
},
{
title: "Resources", items: [
{ label: "Workshops", href: "/features" },
{ label: "FAQ", href: "#faq" },
{ label: "Blog", href: "/events" }
]
},
{
title: "Connect", items: [
{ label: "Discord Server", href: "https://discord.com/invite/computerclub" },
{ label: "Email Us", href: "mailto:computeclube@university.edu" },
{ label: "Social Media", href: "https://twitter.com/computerclub" }
]
}
]}
/>
</div>
</ThemeProvider>
);
}

View File

@@ -32,10 +32,10 @@ export default function LandingPage() {
<NavbarLayoutFloatingInline
brandName="ComputerClub"
navItems={[
{ name: "About", id: "about" },
{ name: "Features", id: "features" },
{ name: "Team", id: "team" },
{ name: "Events", id: "events" }
{ name: "About", id: "/about" },
{ name: "Features", id: "/features" },
{ name: "Team", id: "/team" },
{ name: "Events", id: "/events" }
]}
button={{ text: "Join Us", href: "#contact" }}
animateOnLoad={true}
@@ -64,7 +64,7 @@ export default function LandingPage() {
]}
buttons={[
{ text: "Get Started", href: "#contact" },
{ text: "Learn More", href: "#about" }
{ text: "Learn More", href: "/about" }
]}
buttonAnimation="slide-up"
carouselPosition="right"
@@ -262,16 +262,16 @@ export default function LandingPage() {
columns={[
{
title: "Community", items: [
{ label: "About Us", href: "#about" },
{ label: "Events", href: "#events" },
{ label: "Team", href: "#team" }
{ label: "About Us", href: "/about" },
{ label: "Events", href: "/events" },
{ label: "Team", href: "/team" }
]
},
{
title: "Resources", items: [
{ label: "Workshops", href: "#features" },
{ label: "Workshops", href: "/features" },
{ label: "FAQ", href: "#faq" },
{ label: "Blog", href: "#events" }
{ label: "Blog", href: "/events" }
]
},
{

88
src/app/team/page.tsx Normal file
View File

@@ -0,0 +1,88 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import TeamCardOne from '@/components/sections/team/TeamCardOne';
import FooterBase from '@/components/sections/footer/FooterBase';
import { Crown } from "lucide-react";
export default function TeamPage() {
return (
<ThemeProvider
defaultButtonVariant="hover-magnetic"
defaultTextAnimation="entrance-slide"
borderRadius="rounded"
contentWidth="mediumLarge"
sizing="largeSmallSizeMediumTitles"
background="circleGradient"
cardStyle="glass-depth"
primaryButtonStyle="flat"
secondaryButtonStyle="glass"
headingFontWeight="semibold"
>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingInline
brandName="ComputerClub"
navItems={[
{ name: "About", id: "/about" },
{ name: "Features", id: "/features" },
{ name: "Team", id: "/team" },
{ name: "Events", id: "/events" }
]}
button={{ text: "Join Us", href: "#contact" }}
animateOnLoad={true}
/>
</div>
<div id="team" data-section="team">
<TeamCardOne
title="Meet Our Leaders"
description="Dedicated individuals driving our club's vision and fostering an inclusive tech community."
tag="Leadership"
tagIcon={Crown}
tagAnimation="slide-up"
members={[
{ id: "1", name: "Alex Chen", role: "President", imageSrc: "http://img.b2bpic.net/free-photo/young-handsome-man-office-center_1303-19604.jpg", imageAlt: "Alex Chen" },
{ id: "2", name: "Sarah Martinez", role: "Vice President", imageSrc: "http://img.b2bpic.net/free-photo/blond-female-dressed-white-shirt-eyeglasses-holds-tablet-pc-grey-background_613910-14708.jpg", imageAlt: "Sarah Martinez" },
{ id: "3", name: "Jordan Lee", role: "Tech Lead", imageSrc: "http://img.b2bpic.net/free-photo/smiling-entrepreneur-posing-camera_1262-3636.jpg", imageAlt: "Jordan Lee" },
{ id: "4", name: "Priya Patel", role: "Event Coordinator", imageSrc: "http://img.b2bpic.net/free-photo/happy-ethnic-executive-woman-looking-camera_1098-20037.jpg", imageAlt: "Priya Patel" }
]}
gridVariant="uniform-all-items-equal"
animationType="opacity"
textboxLayout="default"
useInvertedBackground={false}
/>
</div>
<div id="footer" data-section="footer">
<FooterBase
logoText="ComputerClub"
copyrightText="© 2025 Computer Club | Building the Future Together"
columns={[
{
title: "Community", items: [
{ label: "About Us", href: "/about" },
{ label: "Events", href: "/events" },
{ label: "Team", href: "/team" }
]
},
{
title: "Resources", items: [
{ label: "Workshops", href: "/features" },
{ label: "FAQ", href: "#faq" },
{ label: "Blog", href: "/events" }
]
},
{
title: "Connect", items: [
{ label: "Discord Server", href: "https://discord.com/invite/computerclub" },
{ label: "Email Us", href: "mailto:computeclube@university.edu" },
{ label: "Social Media", href: "https://twitter.com/computerclub" }
]
}
]}
/>
</div>
</ThemeProvider>
);
}