Merge version_4 into main

Merge version_4 into main

src/app/page.tsx

@@ -3,15 +3,15 @@
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
 import AboutMetric from '@/components/sections/about/AboutMetric';
-import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
+import ContactCenter from '@/components/sections/contact/ContactCenter';
 import FeatureHoverPattern from '@/components/sections/feature/featureHoverPattern/FeatureHoverPattern';
-import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
+import FooterCard from '@/components/sections/footer/FooterCard';
 import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery';
 import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen';
 import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
 import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
 import TeamCardOne from '@/components/sections/team/TeamCardOne';
-import { Activity, Book, BookOpen, Briefcase, Building2, Droplet, Film, Globe, Lightbulb, MessageCircle, MessageSquare, Mic, Scale, Shield, ShieldCheck, Star, Target, Users } from "lucide-react";
+import { Activity, Book, BookOpen, Briefcase, Building2, Droplet, Film, Globe, Lightbulb, MessageCircle, MessageSquare, Mic, Scale, Shield, ShieldCheck, Star, Target, Users, Mail, Facebook, Youtube, Instagram } from "lucide-react";
 
 export default function LandingPage() {
   return (
@@ -31,22 +31,11 @@ export default function LandingPage() {
   <div id="nav" data-section="nav">
       <NavbarLayoutFloatingOverlay
       navItems={[
-        {
+        { name: "About", id: "about" },
-          name: "About",
+        { name: "Objectives", id: "objectives" },
-          id: "about",
+        { name: "Activities", id: "activities" },
-        },
+        { name: "Team", id: "team" },
-        {
+        { name: "Contact", id: "contact" },
-          name: "Objectives",
-          id: "objectives",
-        },
-        {
-          name: "Activities",
-          id: "activities",
-        },
-        {
-          name: "Team",
-          id: "team",
-        },
       ]}
       brandName="TyriaQ Club"
     />
@@ -54,42 +43,16 @@ export default function LandingPage() {
 
   <div id="hero" data-section="hero">
       <HeroBillboardGallery
-      background={{
+      background={{ variant: "cell-wave" }}
-        variant: "cell-wave",
-      }}
       title="Building Aware and Impactful Medical Students"
       description="TyriaQ Club empowers the next generation of healthcare professionals through scientific research, community engagement, and dedicated leadership development."
-      buttons={[
+      buttons={[{ text: "Join the Club", href: "#contact" }, { text: "Discover Our Activities", href: "#activities" }]}
-        {
-          text: "Join the Club",
-          href: "#contact",
-        },
-        {
-          text: "Discover Our Activities",
-          href: "#activities",
-        },
-      ]}
       mediaItems={[
-        {
+        { imageSrc: "http://img.b2bpic.net/free-photo/dna-shape-background_1048-1912.jpg", imageAlt: "Medical research environment" },
-          imageSrc: "http://img.b2bpic.net/free-photo/dna-shape-background_1048-1912.jpg",
+        { imageSrc: "http://img.b2bpic.net/free-photo/covid-19-frontline-healthcare-essential-workers_53876-96175.jpg", imageAlt: "Medical outreach" },
-          imageAlt: "Medical research environment",
+        { imageSrc: "http://img.b2bpic.net/free-photo/side-view-nurses-studying-together_23-2149741262.jpg", imageAlt: "Skills workshop" },
-        },
+        { imageSrc: "http://img.b2bpic.net/free-photo/group-diverse-teens-young-people-doing-activities-together-celebrating-world-youth-skills-day_23-2151478359.jpg", imageAlt: "Medical seminar" },
-        {
+        { imageSrc: "http://img.b2bpic.net/free-photo/african-american-doctor-female-lab-coat-with-stethoscope-posed-outdoor-against-clinic_627829-2908.jpg", imageAlt: "Club leadership" },
-          imageSrc: "http://img.b2bpic.net/free-photo/covid-19-frontline-healthcare-essential-workers_53876-96175.jpg",
-          imageAlt: "Medical outreach",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/side-view-nurses-studying-together_23-2149741262.jpg",
-          imageAlt: "Skills workshop",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/group-diverse-teens-young-people-doing-activities-together-celebrating-world-youth-skills-day_23-2151478359.jpg",
-          imageAlt: "Medical seminar",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/african-american-doctor-female-lab-coat-with-stethoscope-posed-outdoor-against-clinic_627829-2908.jpg",
-          imageAlt: "Club leadership",
-        },
       ]}
       mediaAnimation="slide-up"
     />
@@ -100,21 +63,9 @@ export default function LandingPage() {
       useInvertedBackground={false}
       title="About TyriaQ Club"
       metrics={[
-        {
+        { icon: BookOpen, label: "Mission", value: "Scientific excellence and medical awareness." },
-          icon: BookOpen,
+        { icon: Target, label: "Vision", value: "A generation of responsible future doctors." },
-          label: "Mission",
+        { icon: Users, label: "Identity", value: "A student-led medical community." },
-          value: "Scientific excellence and medical awareness.",
-        },
-        {
-          icon: Target,
-          label: "Vision",
-          value: "A generation of responsible future doctors.",
-        },
-        {
-          icon: Users,
-          label: "Identity",
-          value: "A student-led medical community.",
-        },
       ]}
       metricsAnimation="slide-up"
     />
@@ -126,31 +77,11 @@ export default function LandingPage() {
       textboxLayout="default"
       useInvertedBackground={false}
       features={[
-        {
+        { icon: Star, title: "Research", description: "Promoting scientific research culture among students." },
-          icon: Star,
+        { icon: Activity, title: "Awareness", description: "Developing vital medical and societal awareness." },
-          title: "Research",
+        { icon: Briefcase, title: "Responsibility", description: "Building strong, responsible future doctors." },
-          description: "Promoting scientific research culture among students.",
+        { icon: MessageSquare, title: "Leadership", description: "Enhancing communication, analysis, and management skills." },
-        },
+        { icon: Users, title: "Teamwork", description: "Encouraging collective efforts and critical thinking." },
-        {
-          icon: Activity,
-          title: "Awareness",
-          description: "Developing vital medical and societal awareness.",
-        },
-        {
-          icon: Briefcase,
-          title: "Responsibility",
-          description: "Building strong, responsible future doctors.",
-        },
-        {
-          icon: MessageSquare,
-          title: "Leadership",
-          description: "Enhancing communication, analysis, and management skills.",
-        },
-        {
-          icon: Users,
-          title: "Teamwork",
-          description: "Encouraging collective efforts and critical thinking.",
-        },
       ]}
       title="Our Key Objectives"
       description="Driving change through science and community development."
@@ -163,36 +94,12 @@ export default function LandingPage() {
       textboxLayout="default"
       useInvertedBackground={true}
       features={[
-        {
+        { icon: ShieldCheck, title: "Discipline", description: "Maintaining professional excellence in all tasks." },
-          icon: ShieldCheck,
+        { icon: Lightbulb, title: "Creativity", description: "Innovative solutions for medical challenges." },
-          title: "Discipline",
+        { icon: Users, title: "Teamwork", description: "Working together towards common goals." },
-          description: "Maintaining professional excellence in all tasks.",
+        { icon: Scale, title: "Reform Mindset", description: "Driving positive changes in medical practice." },
-        },
+        { icon: BookOpen, title: "Criticism", description: "Open to constructive feedback and growth." },
-        {
+        { icon: Users, title: "Brotherhood", description: "Supporting our medical student peers." },
-          icon: Lightbulb,
-          title: "Creativity",
-          description: "Innovative solutions for medical challenges.",
-        },
-        {
-          icon: Users,
-          title: "Teamwork",
-          description: "Working together towards common goals.",
-        },
-        {
-          icon: Scale,
-          title: "Reform Mindset",
-          description: "Driving positive changes in medical practice.",
-        },
-        {
-          icon: BookOpen,
-          title: "Criticism",
-          description: "Open to constructive feedback and growth.",
-        },
-        {
-          icon: Users,
-          title: "Brotherhood",
-          description: "Supporting our medical student peers.",
-        },
       ]}
       title="Our Core Values"
       description="The foundation of our community and culture."
@@ -205,41 +112,13 @@ export default function LandingPage() {
       title="Our Impact in Numbers"
       tag="Since 2020"
       metrics={[
-        {
+        { id: "m1", value: "400+", description: "Active Members" },
-          id: "m1",
+        { id: "m2", value: "4", description: "Years of Experience" },
-          value: "400+",
+        { id: "m3", value: "26K+", description: "YouTube Subscribers" },
-          description: "Active Members",
+        { id: "m4", value: "270+", description: "Educational Videos" },
-        },
+        { id: "m5", value: "17K+", description: "Facebook Followers" },
-        {
+        { id: "m6", value: "13K+", description: "Instagram Followers" },
-          id: "m2",
+        { id: "m7", value: "12", description: "Annual Programs" },
-          value: "4",
-          description: "Years of Experience",
-        },
-        {
-          id: "m3",
-          value: "26K+",
-          description: "YouTube Subscribers",
-        },
-        {
-          id: "m4",
-          value: "270+",
-          description: "Educational Videos",
-        },
-        {
-          id: "m5",
-          value: "17K+",
-          description: "Facebook Followers",
-        },
-        {
-          id: "m6",
-          value: "13K+",
-          description: "Instagram Followers",
-        },
-        {
-          id: "m7",
-          value: "12",
-          description: "Annual Programs",
-        },
       ]}
       metricsAnimation="slide-up"
     />
@@ -251,46 +130,14 @@ export default function LandingPage() {
       textboxLayout="default"
       useInvertedBackground={true}
       features={[
-        {
+        { icon: Shield, title: "Awareness", description: "Diabetes and cancer awareness campaigns." },
-          icon: Shield,
+        { icon: BookOpen, title: "The Menu", description: "Medical specialization series." },
-          title: "Awareness",
+        { icon: Building2, title: "Hospital Visits", description: "Engaging with clinical environments." },
-          description: "Diabetes and cancer awareness campaigns.",
+        { icon: Star, title: "Workshops", description: "Scientific sessions and journal clubs." },
-        },
+        { icon: MessageCircle, title: "Debate", description: "Public speaking and debate training." },
-        {
+        { icon: Droplet, title: "Blood Donation", description: "Vital humanitarian campaigns." },
-          icon: BookOpen,
+        { icon: Globe, title: "Language", description: "Language learning for medicine." },
-          title: "The Menu",
+        { icon: Film, title: "Cinema", description: "Discussions through cinema and media." },
-          description: "Medical specialization series.",
-        },
-        {
-          icon: Building2,
-          title: "Hospital Visits",
-          description: "Engaging with clinical environments.",
-        },
-        {
-          icon: Star,
-          title: "Workshops",
-          description: "Scientific sessions and journal clubs.",
-        },
-        {
-          icon: MessageCircle,
-          title: "Debate",
-          description: "Public speaking and debate training.",
-        },
-        {
-          icon: Droplet,
-          title: "Blood Donation",
-          description: "Vital humanitarian campaigns.",
-        },
-        {
-          icon: Globe,
-          title: "Language",
-          description: "Language learning for medicine.",
-        },
-        {
-          icon: Film,
-          title: "Cinema",
-          description: "Discussions through cinema and media.",
-        },
       ]}
       title="Activities & Programs"
       description="Engaging, scientific, and community-oriented programs for medical students."
@@ -303,26 +150,10 @@ export default function LandingPage() {
       textboxLayout="default"
       useInvertedBackground={false}
       features={[
-        {
+        { icon: Lightbulb, title: "Bimaristan TyriaQ", description: "Specialized medical revision sessions." },
-          icon: Lightbulb,
+        { icon: Mic, title: "TyriaQ Talk", description: "Inspiring talks from healthcare experts." },
-          title: "Bimaristan TyriaQ",
+        { icon: Book, title: "Journal Club", description: "Deep dives into scientific research papers." },
-          description: "Specialized medical revision sessions.",
+        { icon: Globe, title: "Language Circles", description: "Professional language learning platforms." },
-        },
-        {
-          icon: Mic,
-          title: "TyriaQ Talk",
-          description: "Inspiring talks from healthcare experts.",
-        },
-        {
-          icon: Book,
-          title: "Journal Club",
-          description: "Deep dives into scientific research papers.",
-        },
-        {
-          icon: Globe,
-          title: "Language Circles",
-          description: "Professional language learning platforms.",
-        },
       ]}
       title="Featured Programs"
       description="Highlighting our most impactful student sessions."
@@ -336,30 +167,10 @@ export default function LandingPage() {
       gridVariant="four-items-2x2-equal-grid"
       useInvertedBackground={true}
       members={[
-        {
+        { id: "t1", name: "President", role: "Club Leadership", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CUUkE8XkgczMrg7Q7XOc9vI7RP/uploaded-1776445596970-fvi2c0se.png" },
-          id: "t1",
+        { id: "t2", name: "Scientific Lead", role: "Department Head", imageSrc: "http://img.b2bpic.net/free-photo/shot-young-doctor-white-coat-standing-grey_114579-36779.jpg" },
-          name: "President",
+        { id: "t3", name: "Volunteer Lead", role: "Department Head", imageSrc: "http://img.b2bpic.net/free-photo/young-woman-doctor-with-stethoscope-hospital_1303-20705.jpg" },
-          role: "Club Leadership",
+        { id: "t4", name: "Media Relations", role: "Department Head", imageSrc: "http://img.b2bpic.net/free-photo/front-view-female-doctor-medical-shirt-holding-paper-analysis-health-virus-uniform-covid-19-pandemic-emotions_179666-23894.jpg" },
-          imageSrc: "http://img.b2bpic.net/free-photo/front-view-male-doctor-holding-analyzes-light-yellow-wall_179666-12628.jpg",
-        },
-        {
-          id: "t2",
-          name: "Scientific Lead",
-          role: "Department Head",
-          imageSrc: "http://img.b2bpic.net/free-photo/shot-young-doctor-white-coat-standing-grey_114579-36779.jpg",
-        },
-        {
-          id: "t3",
-          name: "Volunteer Lead",
-          role: "Department Head",
-          imageSrc: "http://img.b2bpic.net/free-photo/young-woman-doctor-with-stethoscope-hospital_1303-20705.jpg",
-        },
-        {
-          id: "t4",
-          name: "Media Relations",
-          role: "Department Head",
-          imageSrc: "http://img.b2bpic.net/free-photo/front-view-female-doctor-medical-shirt-holding-paper-analysis-health-virus-uniform-covid-19-pandemic-emotions_179666-23894.jpg",
-        },
       ]}
       title="Our Leadership Team"
       description="Dedicated individuals driving TyriaQ Club forward."
@@ -371,87 +182,30 @@ export default function LandingPage() {
       textboxLayout="default"
       useInvertedBackground={false}
       names={[
-        "University Club A",
+        "University Club A",        "Healthcare Org B",        "MedScience Group C",        "Research Labs D",        "Students Council E",        "Academic Network F",        "Public Health Inst G"]}
-        "Healthcare Org B",
-        "MedScience Group C",
-        "Research Labs D",
-        "Students Council E",
-        "Academic Network F",
-        "Public Health Inst G",
-      ]}
       title="Partners & Collaborations"
       description="Working with esteemed organizations and partners."
     />
   </div>
 
   <div id="contact" data-section="contact">
-      <ContactSplitForm
+      <ContactCenter
-      useInvertedBackground={true}
+      tag="Get Involved"
       title="Join Our Community"
       description="Shape the future of healthcare. Join TyriaQ today."
-      inputs={[
+      useInvertedBackground={true}
-        {
+      background={{ variant: "animated-grid" }}
-          name: "name",
-          type: "text",
-          placeholder: "Your Name",
-          required: true,
-        },
-        {
-          name: "email",
-          type: "email",
-          placeholder: "Email Address",
-          required: true,
-        },
-      ]}
-      textarea={{
-        name: "message",
-        placeholder: "Why do you want to join?",
-        rows: 4,
-        required: true,
-      }}
-      imageSrc="http://img.b2bpic.net/free-photo/medical-people-meeting-planning-with-shareholders-hospital-office-sitting-desk-doctors-nurses-brainstorm-ideas-together-physicians-diagnosis-presentation-data-using-tablet_482257-13792.jpg"
     />
   </div>
 
   <div id="footer" data-section="footer">
-      <FooterBaseReveal
+      <FooterCard
       logoText="TyriaQ Club"
-      columns={[
+      socialLinks={[
-        {
+        { icon: Mail, href: "mailto:tyriaqclub@gmail.com", ariaLabel: "Email" },
-          title: "Contact",
+        { icon: Facebook, href: "#", ariaLabel: "Facebook" },
-          items: [
+        { icon: Instagram, href: "#", ariaLabel: "Instagram" },
-            {
+        { icon: Youtube, href: "#", ariaLabel: "YouTube" },
-              label: "tyriaqclub@gmail.com",
-              href: "mailto:tyriaqclub@gmail.com",
-            },
-          ],
-        },
-        {
-          title: "Follow",
-          items: [
-            {
-              label: "Facebook",
-              href: "#",
-            },
-            {
-              label: "Instagram",
-              href: "#",
-            },
-            {
-              label: "YouTube",
-              href: "#",
-            },
-          ],
-        },
-        {
-          title: "Location",
-          items: [
-            {
-              label: "University of Health Sciences",
-              href: "#",
-            },
-          ],
-        },
       ]}
     />
   </div>