diff --git a/src/app/layout.tsx b/src/app/layout.tsx index a2da63c..fa906c2 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -16,7 +16,8 @@ export const metadata: Metadata = { openGraph: { title: "Computer Club - Tech Community & Innovation Hub", description: "Join a vibrant community of tech enthusiasts. Access coding workshops, hackathons, networking events, and mentorship programs.", type: "website", siteName: "Computer Club", images: [ { - url: "http://img.b2bpic.net/free-photo/gradient-illuminated-neon-gaming-desk-setup-with-keyboard_23-2149529414.jpg", alt: "Computer Club Community"}, + url: "http://img.b2bpic.net/free-photo/gradient-illuminated-neon-gaming-desk-setup-with-keyboard_23-2149529414.jpg", alt: "Computer Club Community" + }, ], }, twitter: { diff --git a/src/app/page.tsx b/src/app/page.tsx index de4998b..42c9a4d 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -7,10 +7,10 @@ import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaA import FeatureBorderGlow from '@/components/sections/feature/featureBorderGlow/FeatureBorderGlow'; import ProductCardFour from '@/components/sections/product/ProductCardFour'; import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve'; -import TeamCardFive from '@/components/sections/team/TeamCardFive'; +import TeamCardFiveFlip from '@/components/sections/team/TeamCardFiveFlip'; import FaqBase from '@/components/sections/faq/FaqBase'; import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis'; -import { BookOpen, Calendar, Code, Info, Lightbulb, Rocket, Star, Trophy, Users, Zap } from "lucide-react"; +import { BookOpen, Calendar, Code, Info, Lightbulb, Rocket, Star, Trophy, Users, Zap, Github, Linkedin, Twitter } from "lucide-react"; export default function ComputerClubPage() { return ( @@ -161,7 +161,7 @@ export default function ComputerClubPage() {
- diff --git a/src/components/CardStackTextBox.tsx b/src/components/CardStackTextBox.tsx new file mode 100644 index 0000000..200e9ba --- /dev/null +++ b/src/components/CardStackTextBox.tsx @@ -0,0 +1,163 @@ +"use client"; + +import React from "react"; + +interface TitleSegment { + text: string; + highlight?: boolean; +} + +interface Button { + label: string; + href?: string; + onClick?: () => void; + variant?: "primary" | "secondary"; +} + +interface CardStackTextBoxProps { + title: string; + titleSegments?: TitleSegment[]; + description: string; + tag?: string; + tagIcon?: React.ReactNode; + tagAnimation?: string; + buttons?: Button[]; + buttonAnimation?: string; + textboxLayout?: "default" | "centered" | "compact"; + useInvertedBackground?: boolean; + className?: string; + titleClassName?: string; + titleImageWrapperClassName?: string; + titleImageClassName?: string; + descriptionClassName?: string; + tagClassName?: string; + buttonContainerClassName?: string; + buttonClassName?: string; + buttonTextClassName?: string; +} + +export function CardStackTextBox({ + title, + titleSegments, + description, + tag, + tagIcon, + tagAnimation, + buttons, + buttonAnimation, + textboxLayout = "default", + useInvertedBackground = false, + className = "", + titleClassName = "", + titleImageWrapperClassName = "", + titleImageClassName = "", + descriptionClassName = "", + tagClassName = "", + buttonContainerClassName = "", + buttonClassName = "", + buttonTextClassName = "", +}: CardStackTextBoxProps) { + const baseClasses = ` + w-full h-full p-6 flex flex-col justify-between + ${useInvertedBackground ? "bg-slate-900 text-white" : "bg-white text-slate-900"} + rounded-lg transition-all duration-300 + `; + + const layoutClasses = { + default: "items-start", + centered: "items-center text-center", + compact: "items-start gap-2", + }; + + const titleDefaultClasses = ` + text-2xl font-bold mb-4 leading-tight + ${titleClassName} + `; + + const descriptionDefaultClasses = ` + text-base leading-relaxed mb-4 flex-grow + ${useInvertedBackground ? "text-slate-300" : "text-slate-600"} + ${descriptionClassName} + `; + + const tagDefaultClasses = ` + inline-flex items-center gap-2 px-3 py-1 rounded-full text-sm font-medium mb-4 + ${useInvertedBackground ? "bg-slate-800 text-slate-200" : "bg-slate-100 text-slate-700"} + ${tagClassName} + `; + + const buttonContainerDefaultClasses = ` + flex gap-3 w-full + ${textboxLayout === "centered" ? "justify-center" : "justify-start"} + ${buttonContainerClassName} + `; + + const buttonDefaultClasses = ` + px-4 py-2 rounded-lg font-medium transition-all duration-200 + ${buttonClassName} + `; + + const buttonTextDefaultClasses = ` + ${buttonTextClassName} + `; + + const renderTitle = () => { + if (titleSegments && titleSegments.length > 0) { + return ( +

+ {titleSegments.map((segment, index) => ( + + {segment.text} + + ))} +

+ ); + } + return

{title}

; + }; + + return ( +
+
+ {tag && ( +
+ {tagIcon && {tagIcon}} + {tag} +
+ )} + + {renderTitle()} + +

{description}

+
+ + {buttons && buttons.length > 0 && ( +
+ {buttons.map((button, index) => ( + + ))} +
+ )} +
+ ); +} \ No newline at end of file diff --git a/src/components/ServiceWrapper.tsx b/src/components/ServiceWrapper.tsx index 5be7e4e..7e19dc0 100644 --- a/src/components/ServiceWrapper.tsx +++ b/src/components/ServiceWrapper.tsx @@ -1,22 +1,15 @@ 'use client'; -import Script from 'next/script'; +import React, { ReactNode } from 'react'; -export function ServiceWrapper({ children }: { children: React.ReactNode }) { - const websiteId = process.env.NEXT_PUBLIC_WEBSITE_ANALYTICS_ID; - - return ( - <> - {websiteId && ( -