-
Empowering Businesses Globally
-
- Our platform is trusted by organizations worldwide to boost productivity, streamline operations, and enhance
- customer experiences.
-
+ const [animatedStats, setAnimatedStats] = useState({
+ students: 0,
+ events: 0,
+ projects: 0,
+ partners: 0
+ });
+
+ const [isVisible, setIsVisible] = useState(false);
+ const statsRef = useRef(null);
+ const [selectedStat, setSelectedStat] = useState(null);
+
+ // Target values for the counters
+ const targetStats = {
+ students: 1200,
+ events: 25,
+ projects: 150,
+ partners: 18
+ };
+
+ useEffect(() => {
+ const observer = new IntersectionObserver(
+ ([entry]) => {
+ if (entry.isIntersecting) {
+ setIsVisible(true);
+ observer.disconnect();
+ }
+ },
+ { threshold: 0.2 }
+ );
+
+ if (statsRef.current) {
+ observer.observe(statsRef.current);
+ }
+
+ return () => {
+ if (statsRef.current) {
+ observer.disconnect();
+ }
+ };
+ }, []);
+
+ useEffect(() => {
+ if (!isVisible) return;
+
+ // Animate the counters
+ const duration = 2000; // 2 seconds
+ const startTime = Date.now();
+
+ const interval = setInterval(() => {
+ const elapsedTime = Date.now() - startTime;
+ const progress = Math.min(elapsedTime / duration, 1);
+
+ // Easing function for smoother animation
+ const easeOutQuad = t => t * (2 - t);
+ const easedProgress = easeOutQuad(progress);
+
+ setAnimatedStats({
+ students: Math.floor(easedProgress * targetStats.students),
+ events: Math.floor(easedProgress * targetStats.events),
+ projects: Math.floor(easedProgress * targetStats.projects),
+ partners: Math.floor(easedProgress * targetStats.partners)
+ });
+
+ if (progress >= 1) {
+ clearInterval(interval);
+ }
+ }, 16); // ~60fps
+
+ return () => clearInterval(interval);
+ }, [isVisible]);
+
+ // Stat data with details
+ const statData = [
+ {
+ name: "Students Engaged",
+ value: animatedStats.students,
+ suffix: "+",
+ icon: (
+
+
+ ),
+ description: "Students from GBU and other universities who have participated in our events and initiatives.",
+ achievement: "Including 200+ first-time hackathon participants and 100+ women in tech."
+ },
+ {
+ name: "Tech Events Hosted",
+ value: animatedStats.events,
+ suffix: "+",
+ icon: (
+
+
+ ),
+ description: "From hackathons to workshops, webinars to tech talks across various domains.",
+ achievement: "With an average participant satisfaction rating of 4.8/5."
+ },
+ {
+ name: "Projects Developed",
+ value: animatedStats.projects,
+ suffix: "+",
+ icon: (
+
+
+ ),
+ description: "Innovative solutions created by students during our hackathons and project-based learning sessions.",
+ achievement: "Including 12 projects that secured external funding and 3 startup incorporations."
+ },
+ {
+ name: "Tech Partners",
+ value: animatedStats.partners,
+ suffix: "",
+ icon: (
+
+
+ ),
+ description: "Industry collaborators who provide resources, mentorship, and opportunities to our community.",
+ achievement: "Including 5 Fortune 500 companies and 7 leading tech startups."
+ }
+ ];
+
+ const handleStatSelect = (item, index) => {
+ setSelectedStat(index === selectedStat ? null : index);
+ };
+
+ const renderStatItem = (item, index, isSelected) => {
+ return (
+
+
+
+
+ {item.icon}
-
-
-
Active Users
- 12,345
-
-
-
Transactions Today
- 1.23M
-
-
-
Total Revenue
- $5.6B
-
-
-
Happy Customers
- 98%
-
-
+
+ {item.name}
+
+
+
+ {item.value.toLocaleString()}{item.suffix}
+
+
+ {isSelected && (
+
+
+ {item.description}
+
+
+
+ {item.achievement}
+
+
+ )}
+
+
+
+
+
+
+ );
+ };
+
+ return (
+
+ {/* Enhanced background with glow effects */}
+
+
+ {/* Decorative elements */}
+
+
+
+
+
+
+
+
+ HackFed Impact at GBU
+
+
+
+
+ Since our inception, HackFed has fostered innovation and technical growth in the Gautam Buddha University community.
+
+
+
+
+
- )
+ );
}
-export default Stats
\ No newline at end of file
+export default Stats;
\ No newline at end of file
diff --git a/src/components/StickeyNav.jsx b/src/components/StickeyNav.jsx
deleted file mode 100644
index be8bfb5..0000000
--- a/src/components/StickeyNav.jsx
+++ /dev/null
@@ -1,12 +0,0 @@
-
-import React from "react";
-
-function StickyNav() {
- return (
- <>
-
nandu
-
- );
-}
-
-export default StickyNav;
diff --git a/src/components/Styles/Landing.css b/src/components/Styles/Landing.css
index dc87a71..927ad25 100644
--- a/src/components/Styles/Landing.css
+++ b/src/components/Styles/Landing.css
@@ -307,7 +307,7 @@ p {
--p:0%;
transition:--p 3s linear;
- animation: pulse 10s linear 1.2s infinite;
+ animation: pulse 10s linear 1.2s infinite, float 6s ease-in-out infinite;
}
.heroT h2:nth-child(2) {
@@ -342,7 +342,7 @@ p {
height: fit-content; width: fit-content; text-align: center;
opacity: 0;
translate: 0 1em;
- animation: load 2s ease-out 2s forwards, up 1.4s ease-out 2s forwards;
+ animation: load 2s ease-out 2s forwards, up 1.4s ease-out 2s forwards, gentleFloat 4s ease-in-out infinite;
color: #d8ecf8;
text-shadow: 0 2px 16px rgba(174,207,242,.24);
background: linear-gradient(0deg, #d8ecf8 0, #98c0ef 100%);
@@ -355,11 +355,16 @@ p {
}
.heroSubP {
- position: absolute; left: 0; right: 0; top: 13em; margin: auto;
+ position: absolute;
+ left: 0;
+ right: 0;
+ top: 5em;
+ margin: auto;
height: fit-content;
opacity: 0;
translate: 0 -1em;
animation: load3 2s ease-in 0s forwards, up 1.4s ease-out 0s forwards;
+ z-index: 10;
}
@keyframes load3 {
0% { opacity: 0;}
@@ -367,13 +372,17 @@ p {
}
.heroSubP p {
font-size: 1em;
- position: relative; width: fit-content; margin: auto;
+ position: relative;
+ width: fit-content;
+ margin: auto;
color: #d8ecf8;
text-shadow: 0 2px 16px rgba(174,207,242,.24);
background: linear-gradient(0deg, #d8ecf8 0, #98c0ef 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
+ transform: translateZ(0);
+ transition: transform 0.3s ease-out;
}
.heroSubP p::before,
.heroSubP p::after {
@@ -398,6 +407,19 @@ p {
translate: 5em 0;
}
+/* Add parallax effect on scroll */
+@media (min-width: 768px) {
+ .heroSubP {
+ /* Removed the transform that was causing issues */
+ will-change: opacity;
+ }
+
+ .heroSubP p {
+ /* Adjusted for better appearance */
+ transform: none;
+ }
+}
+
.accent-lines {
pointer-events: none;
position: absolute; top: 0; left: 0; right: 0;
@@ -515,11 +537,9 @@ p {
.term{
position: absolute; left: 0; right: 0; top: 38em; margin: auto;
-
- animation: fadeIn 4.5s forwards; /* Apply the fadeIn animation */
+ animation: fadeIn 4.5s forwards; /* Apply the fadeIn animation */
}
-
@keyframes fadeIn {
0% {
opacity: 0; /* Start with opacity 0 */
@@ -532,6 +552,31 @@ p {
}
}
+/* Improve terminal component for mobile */
+@media (max-width: 768px) {
+ .term {
+ position: absolute;
+ top: auto;
+ bottom: 10%;
+ width: 90% !important;
+ margin: 0 auto;
+ transform: scale(0.9);
+ z-index: 5;
+ }
+
+ .term .coding {
+ font-size: 0.8rem;
+ padding: 0.75rem;
+ }
+
+ .term .top {
+ margin-bottom: 0.5rem;
+ }
+
+ .term .mt-4 {
+ margin-top: 0.5rem;
+ }
+}
.mountains {
position: absolute; left: 0; right: 0; top: 31em; margin: auto;
@@ -680,3 +725,1982 @@ p {
inset 0.2em 0.3em 0.2em -0.2em #c2ccff,
inset 10.8em 11.3em 2em -10.5em #d4e6ff2f;
}
+
+/* Glitch Effect for HackFed title - Improved */
+.heroT.glitch {
+ animation: glitch-effect 0.3s ease-in-out;
+ position: relative;
+}
+
+.heroT.glitch h2 {
+ position: relative;
+}
+
+.heroT.glitch h2:before,
+.heroT.glitch h2:after {
+ content: "HackFed";
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ opacity: 0.8;
+ background: transparent;
+ transform: translateZ(0);
+}
+
+.heroT.glitch h2:before {
+ left: 2px;
+ text-shadow: -2px 0 #00ffea;
+ clip-path: polygon(0 0, 100% 0, 100% 33%, 0 33%);
+ animation: glitch-before 0.3s linear alternate-reverse;
+}
+
+.heroT.glitch h2:after {
+ left: -2px;
+ text-shadow: 2px 0 #ff00c1;
+ clip-path: polygon(0 67%, 100% 67%, 100% 100%, 0 100%);
+ animation: glitch-after 0.3s linear alternate-reverse;
+}
+
+@keyframes glitch-effect {
+ 0% {
+ transform: translate(0);
+ }
+ 10% {
+ transform: translate(-2px, 2px);
+ }
+ 20% {
+ transform: translate(-2px, -2px);
+ }
+ 30% {
+ transform: translate(2px, 2px);
+ }
+ 40% {
+ transform: translate(2px, -2px);
+ }
+ 50% {
+ transform: translate(-1px, 1px);
+ }
+ 60% {
+ transform: translate(1px, 1px);
+ }
+ 70% {
+ transform: translate(0, 2px);
+ }
+ 80% {
+ transform: translate(1px, 0);
+ }
+ 90% {
+ transform: translate(-1px, -1px);
+ }
+ 100% {
+ transform: translate(0);
+ }
+}
+
+@keyframes glitch-before {
+ 0% {
+ clip-path: polygon(0 0, 100% 0, 100% 25%, 0 25%);
+ }
+ 100% {
+ clip-path: polygon(0 15%, 100% 15%, 100% 45%, 0 45%);
+ }
+}
+
+@keyframes glitch-after {
+ 0% {
+ clip-path: polygon(0 65%, 100% 65%, 100% 90%, 0 90%);
+ }
+ 100% {
+ clip-path: polygon(0 55%, 100% 55%, 100% 80%, 0 80%);
+ }
+}
+
+/* New Minimalistic Scroll Down Indicator */
+.scroll-indicator {
+ position: absolute;
+ bottom: 32px;
+ left: 50%;
+ transform: translateX(-50%);
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ cursor: pointer;
+ z-index: 10;
+ transition: opacity 0.3s ease, transform 0.3s ease;
+ opacity: 0;
+ animation: fade-in 2s ease 4s forwards;
+}
+
+@keyframes fade-in {
+ 0% {
+ opacity: 0;
+ }
+ 100% {
+ opacity: 0.7;
+ }
+}
+
+.scroll-indicator:hover {
+ opacity: 1;
+ transform: translateX(-50%) translateY(-3px);
+}
+
+.minimal-indicator {
+ margin-bottom: 12px;
+ position: relative;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.indicator-text {
+ font-family: 'Hubot-Sans', sans-serif;
+ font-size: 14px;
+ font-weight: 300;
+ letter-spacing: 3px;
+ text-transform: lowercase;
+ color: rgba(152, 192, 239, 0.9);
+ position: relative;
+ transition: all 0.3s ease;
+}
+
+.indicator-text::after {
+ content: '';
+ position: absolute;
+ bottom: -4px;
+ left: 0;
+ width: 0;
+ height: 1px;
+ background: linear-gradient(to right, rgba(152, 192, 239, 0), rgba(152, 192, 239, 0.8), rgba(152, 192, 239, 0));
+ transition: width 0.3s ease-in-out;
+}
+
+.scroll-indicator:hover .indicator-text::after {
+ width: 100%;
+}
+
+.body.night-mode .indicator-text {
+ color: rgba(139, 174, 217, 0.9);
+}
+
+.body.night-mode .indicator-text::after {
+ background: linear-gradient(to right, rgba(139, 174, 217, 0), rgba(139, 174, 217, 0.8), rgba(139, 174, 217, 0));
+}
+
+.arrow-container {
+ height: 40px;
+ position: relative;
+ overflow: hidden;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 60px;
+}
+
+.arrow {
+ position: relative;
+ display: flex;
+ justify-content: center;
+ width: 100%;
+ height: 40px;
+ overflow: hidden;
+}
+
+.arrow::before,
+.arrow::after {
+ content: '';
+ position: absolute;
+ background-color: #98c0ef;
+ width: 12px;
+ border-radius: 4px;
+ filter: drop-shadow(0 0 6px rgba(152, 192, 239, 0.8));
+}
+
+.arrow::before {
+ height: 2px;
+ left: 18px;
+ animation: wave-left 2s infinite ease-in-out;
+}
+
+.arrow::after {
+ height: 2px;
+ right: 18px;
+ animation: wave-right 2s infinite ease-in-out;
+}
+
+.arrow::after {
+ animation-delay: 0.5s;
+}
+
+@keyframes wave-left {
+ 0% {
+ top: 20px;
+ width: 0;
+ opacity: 0;
+ }
+ 20% {
+ top: 20px;
+ width: 12px;
+ opacity: 1;
+ }
+ 40% {
+ top: 30px;
+ width: 8px;
+ opacity: 0.8;
+ }
+ 60% {
+ top: 35px;
+ width: 4px;
+ opacity: 0.6;
+ }
+ 80% {
+ top: 38px;
+ width: 2px;
+ opacity: 0.3;
+ }
+ 100% {
+ top: 40px;
+ width: 0;
+ opacity: 0;
+ }
+}
+
+@keyframes wave-right {
+ 0% {
+ top: 20px;
+ width: 0;
+ opacity: 0;
+ }
+ 20% {
+ top: 20px;
+ width: 12px;
+ opacity: 1;
+ }
+ 40% {
+ top: 30px;
+ width: 8px;
+ opacity: 0.8;
+ }
+ 60% {
+ top: 35px;
+ width: 4px;
+ opacity: 0.6;
+ }
+ 80% {
+ top: 38px;
+ width: 2px;
+ opacity: 0.3;
+ }
+ 100% {
+ top: 40px;
+ width: 0;
+ opacity: 0;
+ }
+}
+
+/* Additional wave elements */
+.arrow::before {
+ box-shadow: 0 0 8px rgba(152, 192, 239, 0.6);
+}
+
+.arrow::after {
+ box-shadow: 0 0 8px rgba(152, 192, 239, 0.6);
+}
+
+.arrow span {
+ content: '';
+ position: absolute;
+ height: 2px;
+ background-color: #98c0ef;
+ width: 12px;
+ border-radius: 4px;
+ filter: drop-shadow(0 0 6px rgba(152, 192, 239, 0.8));
+ left: 24px;
+ animation: wave-middle 2s infinite ease-in-out;
+ animation-delay: 0.25s;
+}
+
+@keyframes wave-middle {
+ 0% {
+ top: 20px;
+ width: 0;
+ opacity: 0;
+ }
+ 20% {
+ top: 20px;
+ width: 12px;
+ opacity: 1;
+ }
+ 40% {
+ top: 30px;
+ width: 8px;
+ opacity: 0.8;
+ }
+ 60% {
+ top: 35px;
+ width: 4px;
+ opacity: 0.6;
+ }
+ 80% {
+ top: 38px;
+ width: 2px;
+ opacity: 0.3;
+ }
+ 100% {
+ top: 40px;
+ width: 0;
+ opacity: 0;
+ }
+}
+
+/* Pulse animation for dots */
+@keyframes pulse-dot {
+ 0% {
+ transform: scale(0.8);
+ opacity: 0.3;
+ }
+ 100% {
+ transform: scale(1.2);
+ opacity: 0.7;
+ }
+}
+
+/* Day/Night Mode Styles */
+body.night-mode {
+ background: #03040a linear-gradient(0deg, rgba(125, 146, 216, 0.03), rgba(78, 123, 181, 0.05));
+}
+
+.body.night-mode .accent-lines {
+ --accent-lines-clr: rgba(137, 162, 193, 0.15);
+}
+
+.body.night-mode .heroT > h2 {
+ color: #8baed9;
+ background:
+ radial-gradient( 2em 2em at 50% 50%,
+ transparent calc(var(--p) - 2em),
+ #d9e1f1 calc(var(--p) - 1em),
+ #d9e1f1 calc(var(--p) - 0.4em),
+ transparent var(--p)
+ ),
+ linear-gradient(0deg, #8baed9 30%, #7a9acf 100%);
+ background-clip: text;
+ -webkit-background-clip: text;
+}
+
+.body.night-mode .heroP,
+.body.night-mode .heroSubP p {
+ color: #c8d7f0;
+ background: linear-gradient(0deg, #c8d7f0 0, #8baed9 100%);
+ background-clip: text;
+ -webkit-background-clip: text;
+}
+
+/* Adjust arrow for night mode */
+.body.night-mode .arrow::before,
+.body.night-mode .arrow::after,
+.body.night-mode .arrow span {
+ background-color: #8baed9;
+ box-shadow: 0 0 8px rgba(139, 174, 217, 0.7);
+}
+
+/* Keep these for backwards compatibility */
+.body.night-mode .prompt-cursor {
+ background-color: #8baed9;
+}
+
+.body.night-mode .prompt-symbol {
+ color: #52b788;
+}
+
+/* JoinUs Component Styles */
+.night-mode .joinus-section {
+ background: #000000;
+}
+
+.joinus-form input:focus {
+ box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3);
+}
+
+.social-link {
+ transition: all 0.3s ease-in-out;
+}
+
+.social-link:hover .icon-wrapper {
+ transform: scale(1.1);
+}
+
+.newsletter-form-wrapper {
+ position: relative;
+}
+
+.newsletter-form-wrapper::before {
+ content: '';
+ position: absolute;
+ top: -1px;
+ left: -1px;
+ right: -1px;
+ bottom: -1px;
+ background: linear-gradient(45deg, rgba(79, 70, 229, 0.6), rgba(6, 182, 212, 0.6));
+ border-radius: 0.5rem;
+ z-index: -1;
+ opacity: 0;
+ transition: opacity 0.3s ease;
+}
+
+.newsletter-form-wrapper:hover::before {
+ opacity: 0.2;
+}
+
+@keyframes pulse-border {
+ 0% {
+ box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.2);
+ }
+ 70% {
+ box-shadow: 0 0 0 8px rgba(59, 130, 246, 0);
+ }
+ 100% {
+ box-shadow: 0 0 0 0 rgba(59, 130, 246, 0);
+ }
+}
+
+.pulse-animation {
+ animation: pulse-border 3s infinite;
+}
+
+/* Override night mode text colors for JoinUs */
+.night-mode .join-title {
+ color: rgba(255, 255, 255, 0.9);
+}
+
+.night-mode .join-text {
+ color: rgba(209, 213, 219, 0.7);
+}
+
+/* Responsive adjustments for JoinUs section */
+@media (max-width: 768px) {
+ .join-us-grid {
+ grid-template-columns: 1fr;
+ }
+}
+
+/* FAQ Component Styles */
+.faq-accordion {
+ position: relative;
+ transition: all 0.3s ease;
+}
+
+.faq-accordion:hover {
+ box-shadow: 0 0 15px rgba(255, 255, 255, 0.05);
+ transform: translateY(-2px);
+}
+
+.faq-accordion::before {
+ content: '';
+ position: absolute;
+ inset: 0;
+ border-radius: 0.75rem;
+ padding: 1px;
+ background: linear-gradient(
+ to right,
+ rgba(255, 255, 255, 0.05),
+ rgba(128, 153, 219, 0.08)
+ );
+ -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+ mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+ -webkit-mask-composite: xor;
+ mask-composite: exclude;
+ pointer-events: none;
+ opacity: 0;
+ transition: opacity 0.3s ease;
+}
+
+.faq-accordion:hover::before {
+ opacity: 1;
+}
+
+.faq-button:focus {
+ outline: none;
+}
+
+.faq-button:hover .faq-question {
+ color: rgba(191, 203, 245, 0.9);
+}
+
+.faq-content {
+ position: relative;
+}
+
+.faq-content::before {
+ content: '';
+ position: absolute;
+ left: 1.25rem;
+ top: 0;
+ height: 100%;
+ width: 1px;
+ background: linear-gradient(to bottom, rgba(255, 255, 255, 0.05), transparent);
+ opacity: 0.5;
+}
+
+/* Adjust plus/minus icon */
+.faq-icon {
+ transition: all 0.3s ease;
+}
+
+.faq-button:hover .faq-icon {
+ color: rgba(191, 203, 245, 0.9);
+}
+
+/* Subtle animation for the FAQ answers */
+@keyframes fadeInContent {
+ from {
+ opacity: 0;
+ transform: translateY(-8px);
+ }
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}
+
+.faq-answer-visible {
+ animation: fadeInContent 0.4s ease-out forwards;
+}
+
+/* FAQ section background effects */
+.faq-bg-glow {
+ position: absolute;
+ width: 350px;
+ height: 350px;
+ border-radius: 50%;
+ background: radial-gradient(
+ circle,
+ rgba(114, 134, 211, 0.03) 0%,
+ rgba(29, 42, 90, 0.015) 50%,
+ transparent 70%
+ );
+ filter: blur(40px);
+ opacity: 0.4;
+ z-index: 0;
+}
+
+/* About Page Styles */
+.about-hero-bg {
+ background: radial-gradient(circle at center, rgba(16, 24, 39, 0.5) 0%, rgba(0, 0, 0, 0) 70%);
+ filter: blur(100px);
+ width: 80%;
+ height: 60%;
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ z-index: -1;
+}
+
+.about-stat-item {
+ position: relative;
+ transition: transform 0.3s ease-out;
+}
+
+.about-stat-item:hover {
+ transform: translateY(-5px);
+}
+
+.about-stat-item::before {
+ content: '';
+ position: absolute;
+ top: -8px;
+ left: -8px;
+ right: -8px;
+ bottom: -8px;
+ border-radius: 16px;
+ background: linear-gradient(45deg, rgba(59, 130, 246, 0.1), rgba(6, 182, 212, 0.1));
+ z-index: -1;
+ opacity: 0;
+ transition: opacity 0.3s ease-out;
+}
+
+.about-stat-item:hover::before {
+ opacity: 1;
+}
+
+.about-section-title {
+ position: relative;
+ display: inline-block;
+}
+
+.about-section-title::after {
+ content: '';
+ position: absolute;
+ bottom: -10px;
+ left: 0;
+ width: 60px;
+ height: 3px;
+ background: linear-gradient(to right, #3b82f6, #06b6d4);
+ border-radius: 3px;
+}
+
+.university-image {
+ position: relative;
+ overflow: hidden;
+ border-radius: 0.75rem;
+}
+
+.university-image::before {
+ content: '';
+ position: absolute;
+ inset: 0;
+ background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 100%);
+ z-index: 1;
+}
+
+.university-image img {
+ transition: transform 0.5s ease;
+}
+
+.university-image:hover img {
+ transform: scale(1.05);
+}
+
+/* Gallery Hover Effects */
+.gallery-image-wrapper {
+ overflow: hidden;
+ position: relative;
+}
+
+.gallery-image-wrapper img {
+ transition: transform 0.5s ease;
+}
+
+.gallery-image-wrapper:hover img {
+ transform: scale(1.1);
+}
+
+.gallery-overlay {
+ position: absolute;
+ inset: 0;
+ background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%);
+ display: flex;
+ flex-direction: column;
+ justify-content: flex-end;
+ padding: 1.5rem;
+ opacity: 0;
+ transition: opacity 0.3s ease;
+}
+
+.gallery-image-wrapper:hover .gallery-overlay {
+ opacity: 1;
+}
+
+/* Team Member Card Styles */
+.team-member-card {
+ position: relative;
+ overflow: hidden;
+}
+
+.team-member-card::before {
+ content: '';
+ position: absolute;
+ top: -2px;
+ left: -2px;
+ right: -2px;
+ bottom: -2px;
+ background: linear-gradient(45deg, rgba(59, 130, 246, 0.3), rgba(6, 182, 212, 0.3));
+ border-radius: inherit;
+ z-index: -1;
+ opacity: 0;
+ transition: opacity 0.3s ease;
+}
+
+.team-member-card:hover::before {
+ opacity: 1;
+}
+
+.social-icon {
+ transition: all 0.2s ease;
+}
+
+.social-icon:hover {
+ transform: translateY(-3px);
+ color: #3b82f6;
+}
+
+/* Animation for About Page */
+@keyframes fadeInUp {
+ from {
+ opacity: 0;
+ transform: translateY(20px);
+ }
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}
+
+.about-animate-1 {
+ animation: fadeInUp 0.6s ease forwards;
+}
+
+.about-animate-2 {
+ animation: fadeInUp 0.6s 0.2s ease forwards;
+ opacity: 0;
+}
+
+.about-animate-3 {
+ animation: fadeInUp 0.6s 0.4s ease forwards;
+ opacity: 0;
+}
+
+.about-animate-4 {
+ animation: fadeInUp 0.6s 0.6s ease forwards;
+ opacity: 0;
+}
+
+/* Mission Statement */
+.mission-card {
+ position: relative;
+ overflow: hidden;
+}
+
+.mission-card::after {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background: linear-gradient(45deg, rgba(59, 130, 246, 0.05) 0%, rgba(6, 182, 212, 0.05) 100%);
+ opacity: 0;
+ transition: opacity 0.3s ease;
+}
+
+.mission-card:hover::after {
+ opacity: 1;
+}
+
+/* Vision Statement */
+.vision-bg {
+ background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%233b82f6' fill-opacity='0.05' fill-rule='evenodd'/%3E%3C/svg%3E");
+}
+
+/* About page stats */
+.about-stats-container {
+ position: relative;
+ overflow: hidden;
+}
+
+.about-stats-container::before {
+ content: '';
+ position: absolute;
+ top: -50px;
+ right: -50px;
+ width: 150px;
+ height: 150px;
+ background: radial-gradient(circle, rgba(59, 130, 246, 0.1) 0%, rgba(59, 130, 246, 0) 70%);
+ border-radius: 50%;
+}
+
+.about-stats-container::after {
+ content: '';
+ position: absolute;
+ bottom: -50px;
+ left: -50px;
+ width: 150px;
+ height: 150px;
+ background: radial-gradient(circle, rgba(6, 182, 212, 0.1) 0%, rgba(6, 182, 212, 0) 70%);
+ border-radius: 50%;
+}
+
+/* ========== Success Animation Styles ========== */
+.success-animation {
+ position: relative;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ min-height: 400px;
+ padding: 3rem 1.5rem;
+ overflow: hidden;
+ z-index: 1;
+}
+
+/* Background elements */
+.success-animation-background {
+ position: absolute;
+ inset: 0;
+ z-index: -1;
+}
+
+.success-ripple {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ width: 0;
+ height: 0;
+ border-radius: 50%;
+ background: radial-gradient(circle, rgba(72, 187, 120, 0.15) 0%, rgba(72, 187, 120, 0) 70%);
+ animation: ripple 1.5s ease-out forwards;
+}
+
+.success-glow {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ width: 150px;
+ height: 150px;
+ border-radius: 50%;
+ background: radial-gradient(circle, rgba(72, 187, 120, 0.3) 0%, rgba(72, 187, 120, 0) 70%);
+ filter: blur(10px);
+ animation: glow 3s ease-in-out infinite alternate;
+}
+
+/* Checkmark animation */
+.checkmark-container {
+ width: 100px;
+ height: 100px;
+ margin-bottom: 2rem;
+}
+
+.checkmark {
+ width: 100px;
+ height: 100px;
+ border-radius: 50%;
+ display: block;
+ stroke-width: 3;
+ stroke: #4BB543;
+ stroke-miterlimit: 10;
+ box-shadow: 0 0 20px rgba(75, 181, 67, 0.3);
+ animation: fill 0.4s ease-in-out 0.4s forwards, scale 0.3s ease-in-out 0.9s both;
+}
+
+.checkmark-circle {
+ stroke-dasharray: 166;
+ stroke-dashoffset: 166;
+ stroke-width: 2;
+ stroke-miterlimit: 10;
+ stroke: #4BB543;
+ fill: none;
+ animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
+}
+
+.checkmark-check {
+ transform-origin: 50% 50%;
+ stroke-dasharray: 48;
+ stroke-dashoffset: 48;
+ animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
+}
+
+/* Text animation */
+.success-text {
+ text-align: center;
+ animation: fadeInUp 0.8s ease-out 1.2s both;
+}
+
+.success-title {
+ font-size: 2rem;
+ font-weight: 700;
+ color: white;
+ margin-bottom: 0.5rem;
+}
+
+.success-message {
+ color: rgba(255, 255, 255, 0.8);
+ max-width: 400px;
+ line-height: 1.5;
+}
+
+/* Particles animation */
+.particle-container {
+ position: absolute;
+ inset: 0;
+ pointer-events: none;
+}
+
+.particle {
+ position: absolute;
+ left: var(--x);
+ top: var(--y);
+ width: var(--size);
+ height: var(--size);
+ border-radius: 50%;
+ background-color: var(--color);
+ opacity: 0;
+ transform: scale(0);
+ animation: particle 1.5s cubic-bezier(0.22, 1, 0.36, 1) var(--delay) forwards;
+}
+
+/* Confetti animation */
+.confetti-container {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ pointer-events: none;
+ z-index: 1;
+}
+
+.confetti {
+ position: absolute;
+ top: -5%;
+ left: 50%;
+ width: var(--size);
+ height: var(--size);
+ transform: rotate(var(--rotation));
+ opacity: 0;
+ animation: confetti 4s ease-in-out var(--delay) forwards;
+}
+
+/* Animations */
+@keyframes stroke {
+ 100% {
+ stroke-dashoffset: 0;
+ }
+}
+
+@keyframes scale {
+ 0%, 100% {
+ transform: none;
+ }
+ 50% {
+ transform: scale3d(1.1, 1.1, 1);
+ }
+}
+
+@keyframes fill {
+ 100% {
+ box-shadow: inset 0 0 0 100px rgba(75, 181, 67, 0.2);
+ }
+}
+
+@keyframes ripple {
+ 0% {
+ width: 0;
+ height: 0;
+ opacity: 1;
+ }
+ 100% {
+ width: 500px;
+ height: 500px;
+ opacity: 0;
+ }
+}
+
+@keyframes glow {
+ 0% {
+ opacity: 0.5;
+ transform: translate(-50%, -50%) scale(0.8);
+ }
+ 100% {
+ opacity: 1;
+ transform: translate(-50%, -50%) scale(1.1);
+ }
+}
+
+@keyframes fadeInUp {
+ from {
+ opacity: 0;
+ transform: translateY(20px);
+ }
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}
+
+@keyframes particle {
+ 0% {
+ opacity: 0;
+ transform: scale(0);
+ }
+ 20% {
+ opacity: 0.8;
+ transform: scale(1);
+ }
+ 50%, 80% {
+ opacity: 0.5;
+ }
+ 100% {
+ opacity: 0;
+ transform: scale(0.5) translate3d(50px, -50px, 0);
+ }
+}
+
+@keyframes confetti {
+ 0% {
+ opacity: 0;
+ transform: translateX(-50%) rotate(var(--rotation)) translateY(0);
+ }
+ 10% {
+ opacity: 1;
+ }
+ 100% {
+ opacity: 0;
+ transform: translateX(calc(-50% + var(--distance))) rotate(calc(var(--rotation) + 720deg)) translateY(100vh);
+ }
+}
+
+.fuzzy-text-container {
+ position: relative;
+ width: 100%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ height: 100%;
+ margin: 0 auto;
+}
+
+.fuzzy-text-container canvas {
+ max-width: 100%;
+ height: auto;
+ display: block;
+}
+
+.glitch-container {
+ position: relative;
+ width: 100%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+.glitch-overlay {
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ mix-blend-mode: difference;
+ filter: blur(1px);
+ animation: glitch-animation 0.3s ease-in-out;
+}
+
+@keyframes glitch-animation {
+ 0% {
+ transform: translate(0);
+ }
+ 20% {
+ transform: translate(-5px, 5px);
+ }
+ 40% {
+ transform: translate(-5px, -5px);
+ }
+ 60% {
+ transform: translate(5px, 5px);
+ }
+ 80% {
+ transform: translate(5px, -5px);
+ }
+ 100% {
+ transform: translate(0);
+ }
+}
+
+/* Floating animation for greeting text */
+.heroSubP {
+ position: absolute;
+ left: 0;
+ right: 0;
+ top: 5em;
+ margin: auto;
+ height: fit-content;
+ opacity: 0;
+ translate: 0 -1em;
+ animation: load3 2s ease-in 0s forwards, up 1.4s ease-out 0s forwards;
+ z-index: 10;
+}
+@keyframes load3 {
+ 0% { opacity: 0;}
+ 100% { opacity: 0.7;}
+}
+.heroSubP p {
+ font-size: 1em;
+ position: relative;
+ width: fit-content;
+ margin: auto;
+ color: #d8ecf8;
+ text-shadow: 0 2px 16px rgba(174,207,242,.24);
+ background: linear-gradient(0deg, #d8ecf8 0, #98c0ef 100%);
+ background-clip: text;
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ transform: translateZ(0);
+ transition: transform 0.3s ease-out;
+}
+.heroSubP p::before,
+.heroSubP p::after {
+ position: absolute; top: 60%;
+ display: block; content: '';
+ width: 5em; height: 1px;
+ opacity: 0;
+ animation: load2 1.4s ease-in-out 0s forwards, up 1.4s ease-out 0s forwards;
+}
+@keyframes load2 {
+ 0% { opacity: 0;}
+ 100% { opacity: 0.3;}
+}
+.heroSubP p::before{
+ background: linear-gradient( -90deg, #9dc3f7 0%, transparent 100%);
+ right: 120%;
+ translate: -5em 0;
+}
+.heroSubP p::after {
+ background: linear-gradient( 90deg, #9dc3f7 0%, transparent 100%);
+ left: 120%;
+ translate: 5em 0;
+}
+
+/* Add parallax effect on scroll */
+@media (min-width: 768px) {
+ .heroSubP {
+ /* Removed the transform that was causing issues */
+ will-change: opacity;
+ }
+
+ .heroSubP p {
+ /* Adjusted for better appearance */
+ transform: none;
+ }
+}
+
+/* Floating animation for tagline */
+.heroP {
+ font-size: 1.2em;
+ position: absolute; left: 0; right: 0; top: 20.6em; margin: auto;
+ height: fit-content; width: fit-content; text-align: center;
+ opacity: 0;
+ translate: 0 1em;
+ animation: load 2s ease-out 2s forwards, up 1.4s ease-out 2s forwards, gentleFloat 4s ease-in-out infinite;
+ color: #d8ecf8;
+ text-shadow: 0 2px 16px rgba(174,207,242,.24);
+ background: linear-gradient(0deg, #d8ecf8 0, #98c0ef 100%);
+ background-clip: text;
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+}
+
+/* New keyframe animations */
+@keyframes float {
+ 0%, 100% {
+ transform: translateY(0);
+ }
+ 50% {
+ transform: translateY(-10px);
+ }
+}
+
+@keyframes gentleFloat {
+ 0%, 100% {
+ transform: translateY(0);
+ }
+ 50% {
+ transform: translateY(-5px);
+ }
+}
+
+/* Navigation Menu Animations */
+.nav-menu-item {
+ position: relative;
+ transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.nav-menu-item:hover {
+ transform: translateY(-2px);
+}
+
+.nav-menu-item::after {
+ content: '';
+ position: absolute;
+ bottom: -2px;
+ left: 0;
+ width: 100%;
+ height: 2px;
+ background: linear-gradient(to right, rgba(59, 130, 246, 0.5), rgba(6, 182, 212, 0.5));
+ transform: scaleX(0);
+ transform-origin: right;
+ transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.nav-menu-item:hover::after {
+ transform: scaleX(1);
+ transform-origin: left;
+}
+
+/* Sticky Nav Animation */
+.sticky-nav {
+ backdrop-filter: blur(8px);
+ background: rgba(17, 24, 39, 0.8);
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+ transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.sticky-nav.hidden {
+ transform: translateY(-100%);
+ opacity: 0;
+}
+
+.sticky-nav.visible {
+ transform: translateY(0);
+ opacity: 1;
+}
+
+/* Nav Logo Animation */
+.nav-logo {
+ transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.nav-logo:hover {
+ transform: translateY(-2px);
+}
+
+/* Mobile Menu Animation */
+.mobile-menu {
+ position: fixed;
+ top: 0;
+ right: -100%;
+ width: 100%;
+ height: 100vh;
+ background: rgba(0, 0, 0, 0.95);
+ backdrop-filter: blur(10px);
+ z-index: 50;
+ transition: right 0.3s ease-in-out;
+ overflow-y: auto;
+ -webkit-overflow-scrolling: touch;
+}
+
+.mobile-menu.visible {
+ right: 0;
+}
+
+.mobile-menu-content {
+ padding: 2rem;
+ display: flex;
+ flex-direction: column;
+ gap: 1.5rem;
+}
+
+.mobile-menu-item {
+ font-size: 1.25rem;
+ padding: 1rem 0;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+ transition: all 0.3s ease;
+ position: relative;
+ overflow: hidden;
+}
+
+.mobile-menu-item::before {
+ content: '';
+ position: absolute;
+ left: 0;
+ bottom: 0;
+ width: 0;
+ height: 2px;
+ background: linear-gradient(90deg, #3b82f6, #60a5fa);
+ transition: width 0.3s ease;
+}
+
+.mobile-menu-item:hover::before {
+ width: 100%;
+}
+
+.mobile-menu-item.active {
+ color: #3b82f6;
+ font-weight: 500;
+}
+
+.mobile-menu-item.active::before {
+ width: 100%;
+}
+
+/* Touch Gesture Styles */
+.touch-gesture {
+ position: fixed;
+ bottom: 2rem;
+ left: 50%;
+ transform: translateX(-50%);
+ width: 40px;
+ height: 40px;
+ background: rgba(59, 130, 246, 0.2);
+ border: 2px solid rgba(59, 130, 246, 0.5);
+ border-radius: 50%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ z-index: 100;
+ transition: all 0.3s ease;
+}
+
+.touch-gesture::before {
+ content: '';
+ width: 20px;
+ height: 20px;
+ border-right: 2px solid rgba(59, 130, 246, 0.8);
+ border-bottom: 2px solid rgba(59, 130, 246, 0.8);
+ transform: rotate(45deg);
+ margin-top: -5px;
+ animation: bounce 2s infinite;
+}
+
+@keyframes bounce {
+ 0%, 20%, 50%, 80%, 100% {
+ transform: translateY(0) rotate(45deg);
+ }
+ 40% {
+ transform: translateY(-10px) rotate(45deg);
+ }
+ 60% {
+ transform: translateY(-5px) rotate(45deg);
+ }
+}
+
+/* Mobile Form Input Styles */
+.mobile-input {
+ width: 100%;
+ padding: 1rem;
+ background: rgba(255, 255, 255, 0.05);
+ border: 1px solid rgba(255, 255, 255, 0.1);
+ border-radius: 0.5rem;
+ color: white;
+ font-size: 1rem;
+ transition: all 0.3s ease;
+ -webkit-appearance: none;
+ appearance: none;
+}
+
+.mobile-input:focus {
+ outline: none;
+ border-color: #3b82f6;
+ background: rgba(255, 255, 255, 0.1);
+ box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
+}
+
+.mobile-input::placeholder {
+ color: rgba(255, 255, 255, 0.5);
+}
+
+/* Mobile Image Optimization */
+.mobile-image {
+ width: 100%;
+ height: auto;
+ max-width: 100%;
+ object-fit: cover;
+ transition: transform 0.3s ease;
+}
+
+.mobile-image:hover {
+ transform: scale(1.02);
+}
+
+/* Mobile Scroll Indicator */
+.mobile-scroll-indicator {
+ position: fixed;
+ bottom: 2rem;
+ left: 50%;
+ transform: translateX(-50%);
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 0.5rem;
+ opacity: 0;
+ transition: opacity 0.3s ease;
+}
+
+.mobile-scroll-indicator.visible {
+ opacity: 1;
+}
+
+.mobile-scroll-text {
+ font-size: 0.875rem;
+ color: rgba(255, 255, 255, 0.7);
+ text-transform: uppercase;
+ letter-spacing: 0.05em;
+}
+
+/* Mobile Menu Toggle Button */
+.mobile-menu-toggle {
+ position: relative;
+ width: 30px;
+ height: 20px;
+ cursor: pointer;
+ z-index: 51;
+ transition: all 0.3s ease;
+}
+
+.mobile-menu-toggle span {
+ position: absolute;
+ width: 100%;
+ height: 2px;
+ background: white;
+ border-radius: 2px;
+ transition: all 0.3s ease;
+}
+
+.mobile-menu-toggle span:nth-child(1) {
+ top: 0;
+}
+
+.mobile-menu-toggle span:nth-child(2) {
+ top: 50%;
+ transform: translateY(-50%);
+}
+
+.mobile-menu-toggle span:nth-child(3) {
+ bottom: 0;
+}
+
+.mobile-menu-toggle.active span:nth-child(1) {
+ transform: translateY(9px) rotate(45deg);
+}
+
+.mobile-menu-toggle.active span:nth-child(2) {
+ opacity: 0;
+}
+
+.mobile-menu-toggle.active span:nth-child(3) {
+ transform: translateY(-9px) rotate(-45deg);
+}
+
+/* Mobile Container Padding */
+@media (max-width: 768px) {
+ .container {
+ padding-left: 1rem;
+ padding-right: 1rem;
+ }
+}
+
+/* Mobile Touch Feedback */
+.touch-feedback {
+ position: relative;
+ overflow: hidden;
+}
+
+.touch-feedback::after {
+ content: '';
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ width: 100px;
+ height: 100px;
+ background: radial-gradient(circle, rgba(59, 130, 246, 0.2) 0%, transparent 70%);
+ transform: translate(-50%, -50%) scale(0);
+ opacity: 0;
+ transition: transform 0.3s ease, opacity 0.3s ease;
+}
+
+.touch-feedback:active::after {
+ transform: translate(-50%, -50%) scale(1);
+ opacity: 1;
+}
+
+/* Mobile Scroll Progress */
+.mobile-scroll-progress {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 2px;
+ background: linear-gradient(to right, #3b82f6 var(--scroll), transparent 0);
+ z-index: 1000;
+ transition: opacity 0.3s ease;
+}
+
+.mobile-scroll-progress.hidden {
+ opacity: 0;
+}
+
+/* Mobile-specific animations */
+@keyframes slideInUp {
+ from {
+ transform: translateY(20px);
+ opacity: 0;
+ }
+ to {
+ transform: translateY(0);
+ opacity: 1;
+ }
+}
+
+@keyframes slideInDown {
+ from {
+ transform: translateY(-20px);
+ opacity: 0;
+ }
+ to {
+ transform: translateY(0);
+ opacity: 1;
+ }
+}
+
+@keyframes fadeIn {
+ from {
+ opacity: 0;
+ }
+ to {
+ opacity: 1;
+ }
+}
+
+@keyframes scaleIn {
+ from {
+ transform: scale(0.95);
+ opacity: 0;
+ }
+ to {
+ transform: scale(1);
+ opacity: 1;
+ }
+}
+
+@keyframes shake {
+ 0%, 100% { transform: translateX(0); }
+ 25% { transform: translateX(-5px); }
+ 75% { transform: translateX(5px); }
+}
+
+/* Mobile-specific classes */
+.mobile-slide-up {
+ animation: slideInUp 0.3s ease-out forwards;
+}
+
+.mobile-slide-down {
+ animation: slideInDown 0.3s ease-out forwards;
+}
+
+.mobile-fade-in {
+ animation: fadeIn 0.3s ease-out forwards;
+}
+
+.mobile-scale-in {
+ animation: scaleIn 0.3s ease-out forwards;
+}
+
+.mobile-shake {
+ animation: shake 0.3s ease-in-out;
+}
+
+/* Enhanced mobile input styles */
+.mobile-input {
+ @apply w-full px-4 py-3 bg-black/50 border border-gray-700 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-400/50 transition-all duration-300;
+ font-size: 16px; /* Prevents zoom on iOS */
+}
+
+/* Mobile menu animations */
+.mobile-menu-enter {
+ opacity: 0;
+ transform: translateX(100%);
+}
+
+.mobile-menu-enter-active {
+ opacity: 1;
+ transform: translateX(0);
+ transition: opacity 300ms, transform 300ms;
+}
+
+.mobile-menu-exit {
+ opacity: 1;
+ transform: translateX(0);
+}
+
+.mobile-menu-exit-active {
+ opacity: 0;
+ transform: translateX(100%);
+ transition: opacity 300ms, transform 300ms;
+}
+
+/* Mobile scroll indicator */
+@keyframes scrollIndicator {
+ 0% {
+ transform: translateY(0);
+ opacity: 1;
+ }
+ 50% {
+ transform: translateY(10px);
+ opacity: 0.5;
+ }
+ 100% {
+ transform: translateY(0);
+ opacity: 1;
+ }
+}
+
+.animate-scroll {
+ animation: scrollIndicator 2s infinite;
+}
+
+/* Mobile touch feedback */
+.touch-feedback {
+ position: relative;
+ overflow: hidden;
+}
+
+.touch-feedback::after {
+ content: '';
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ width: 100px;
+ height: 100px;
+ background: rgba(255, 255, 255, 0.1);
+ border-radius: 50%;
+ transform: translate(-50%, -50%) scale(0);
+ opacity: 0;
+ transition: transform 0.3s, opacity 0.3s;
+}
+
+.touch-feedback:active::after {
+ transform: translate(-50%, -50%) scale(1);
+ opacity: 1;
+}
+
+/* Mobile pull-to-refresh */
+.pull-to-refresh {
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ height: 3px;
+ background: linear-gradient(to right, #3b82f6, #60a5fa);
+ transform-origin: left;
+ transition: transform 0.3s;
+}
+
+/* Mobile-specific media queries */
+@media (max-width: 768px) {
+ .container {
+ padding-left: 1rem;
+ padding-right: 1rem;
+ }
+
+ .mobile-stack {
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+ }
+
+ .mobile-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+ gap: 1rem;
+ }
+
+ .mobile-text-center {
+ text-align: center;
+ }
+
+ .mobile-mt-4 {
+ margin-top: 1rem;
+ }
+
+ .mobile-mb-4 {
+ margin-bottom: 1rem;
+ }
+}
+
+/* Mobile-specific transitions */
+.mobile-transition {
+ transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.mobile-transition-slow {
+ transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* Mobile-specific hover effects */
+@media (hover: none) {
+ .mobile-hover-none:hover {
+ transform: none !important;
+ opacity: 1 !important;
+ }
+}
+
+/* Mobile-specific focus styles */
+.mobile-focus-ring {
+ @apply focus:outline-none focus:ring-2 focus:ring-blue-400/50 focus:ring-offset-2 focus:ring-offset-black;
+}
+
+/* Mobile-specific active states */
+.mobile-active-scale {
+ @apply active:scale-95 transition-transform duration-200;
+}
+
+/* Mobile-specific loading states */
+.mobile-loading {
+ position: relative;
+ overflow: hidden;
+}
+
+.mobile-loading::after {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background: linear-gradient(
+ 90deg,
+ transparent,
+ rgba(255, 255, 255, 0.1),
+ transparent
+ );
+ animation: loading 1.5s infinite;
+}
+
+@keyframes loading {
+ 0% {
+ transform: translateX(-100%);
+ }
+ 100% {
+ transform: translateX(100%);
+ }
+}
+
+/* Mobile-specific scrollbar */
+@media (max-width: 768px) {
+ ::-webkit-scrollbar {
+ width: 4px;
+ }
+
+ ::-webkit-scrollbar-track {
+ background: rgba(0, 0, 0, 0.1);
+ }
+
+ ::-webkit-scrollbar-thumb {
+ background: rgba(255, 255, 255, 0.2);
+ border-radius: 2px;
+ }
+
+ ::-webkit-scrollbar-thumb:hover {
+ background: rgba(255, 255, 255, 0.3);
+ }
+}
+
+/* Mobile-specific text selection */
+@media (max-width: 768px) {
+ ::selection {
+ background: rgba(59, 130, 246, 0.3);
+ color: white;
+ }
+}
+
+/* Mobile-specific tap highlight */
+@media (max-width: 768px) {
+ * {
+ -webkit-tap-highlight-color: transparent;
+ }
+}
+
+/* Mobile-specific font smoothing */
+@media (max-width: 768px) {
+ body {
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ }
+}
+
+/* Mobile-specific viewport height */
+@media (max-width: 768px) {
+ .mobile-vh-100 {
+ min-height: 100vh;
+ min-height: -webkit-fill-available;
+ }
+}
+
+/* Mobile-specific safe areas */
+@media (max-width: 768px) {
+ .mobile-safe-top {
+ padding-top: env(safe-area-inset-top);
+ }
+
+ .mobile-safe-bottom {
+ padding-bottom: env(safe-area-inset-bottom);
+ }
+}
+
+/* Connect Section Styles */
+.connect-bg-glow {
+ position: absolute;
+ width: 150%;
+ height: 150%;
+ top: -25%;
+ left: -25%;
+ background: radial-gradient(
+ circle at center,
+ rgba(99, 102, 241, 0.05) 0%,
+ rgba(168, 85, 247, 0.05) 25%,
+ rgba(236, 72, 153, 0.05) 50%,
+ transparent 70%
+ );
+ animation: rotate 20s linear infinite;
+ pointer-events: none;
+}
+
+@keyframes rotate {
+ from { transform: rotate(0deg); }
+ to { transform: rotate(360deg); }
+}
+
+@keyframes float {
+ 0%, 100% {
+ transform: translateY(0);
+ }
+ 50% {
+ transform: translateY(-20px);
+ }
+}
+
+/* Card hover effects */
+.connect-card {
+ transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.connect-card:hover {
+ transform: translateY(-4px);
+}
+
+.connect-card:active {
+ transform: scale(0.98);
+}
+
+/* Stats animation */
+.stat-item {
+ position: relative;
+}
+
+.stat-item::after {
+ content: '';
+ position: absolute;
+ bottom: -2px;
+ left: 50%;
+ width: 0;
+ height: 2px;
+ background: linear-gradient(90deg, transparent, currentColor, transparent);
+ transform: translateX(-50%);
+ transition: width 0.3s ease;
+}
+
+.stat-item:hover::after {
+ width: 80%;
+}
+
+/* Loading animation */
+@keyframes pulse {
+ 0%, 100% {
+ opacity: 1;
+ }
+ 50% {
+ opacity: 0.5;
+ }
+}
+
+/* Floating dots animation */
+@keyframes float-dot {
+ 0%, 100% {
+ transform: translate(0, 0);
+ }
+ 25% {
+ transform: translate(10px, -10px);
+ }
+ 50% {
+ transform: translate(0, -20px);
+ }
+ 75% {
+ transform: translate(-10px, -10px);
+ }
+}
+
+.floating-dot {
+ animation: float-dot 5s ease-in-out infinite;
+}
+
+/* Card hover transition */
+.connect-card-content {
+ transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.connect-card:hover .connect-card-content {
+ transform: translateY(-4px);
+}
+
+/* Stats counter animation */
+@keyframes countUp {
+ from {
+ transform: translateY(100%);
+ opacity: 0;
+ }
+ to {
+ transform: translateY(0);
+ opacity: 1;
+ }
+}
+
+.stat-number {
+ display: inline-block;
+ animation: countUp 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
+}
+
+/* Card click effect */
+.connect-card:active::after {
+ content: '';
+ position: absolute;
+ inset: 0;
+ background: radial-gradient(circle at var(--x) var(--y), rgba(255,255,255,0.1) 0%, transparent 50%);
+ pointer-events: none;
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+ .connect-cards-grid {
+ grid-template-columns: 1fr;
+ }
+
+ .stat-bar {
+ flex-wrap: wrap;
+ gap: 2rem;
+ }
+}
+
+/* Add this section to improve mobile display of hero elements */
+@media (max-width: 768px) {
+ .heroSubP {
+ top: 3em !important;
+ }
+
+ .hero {
+ padding-top: 0;
+ margin-top: -2em;
+ }
+
+ .fuzzy-text-container {
+ margin-top: 0;
+ line-height: 1;
+ }
+
+ .heroP {
+ top: auto !important;
+ bottom: 35%;
+ line-height: 1.4;
+ }
+
+ .term {
+ margin-top: 1em;
+ }
+
+ .scroll-indicator {
+ bottom: 10% !important;
+ }
+}
+
+/* Improve scroll indicator visibility */
+.scroll-indicator {
+ position: absolute;
+ bottom: 5%;
+ left: 50%;
+ transform: translateX(-50%);
+ cursor: pointer;
+ text-align: center;
+ z-index: 10;
+}
diff --git a/src/components/Team.jsx b/src/components/Team.jsx
index 58b0164..ca6ca07 100644
--- a/src/components/Team.jsx
+++ b/src/components/Team.jsx
@@ -1,128 +1,163 @@
-import React from 'react'
+import React from 'react';
+import './Styles/Landing.css';
const Team = () => {
return (
-
-
-
-
-
OUR TEAM
-
Whatever cardigan tote bag tumblr hexagon brooklyn asymmetrical gentrify, subway tile poke farm-to-table. Franzen you probably haven't heard of them.
+
+ {/* Background elements */}
+
+
+ {/* Background glow */}
+
+
+
+
+
+
+ Our Leadership Team
+
+
+ Meet the dedicated individuals from Gautam Buddha University who make HackFed possible
+
-
-
-
-
-
-
Holden Caulfield
-
UI Developer
-
DIY tote bag drinking vinegar cronut adaptogen squid fanny pack vaporware.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+ {/* Team Member 1 */}
+
+
+
+
-
-
-
-
-
-
Alper Kamu
-
Designer
-
DIY tote bag drinking vinegar cronut adaptogen squid fanny pack vaporware.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
Prof. Rajesh Kumar
+
Faculty Advisor
+
+
+ Professor of Computer Science at GBU with 15+ years of experience in technology education and research.
+
-
-
-
-
-
Atticus Finch
-
UI Developer
-
DIY tote bag drinking vinegar cronut adaptogen squid fanny pack vaporware.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+ {/* Team Member 2 */}
+
+
+
+
+
+
+
Dr. Priya Sharma
+
Technical Director
+
+
+ Leading technology innovation at GBU with expertise in AI and machine learning applications.
+
-
-
-
-
-
Henry Letham
-
Designer
-
DIY tote bag drinking vinegar cronut adaptogen squid fanny pack vaporware.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+ {/* Team Member 3 */}
+
+
+
+
+
+
+
Amit Patel
+
Student Coordinator
+
+
+ Final year Computer Science student and hackathon champion leading student initiatives.
+
+
+ {/* Join the team CTA */}
+
+
+
+ Join Our Team
+
+
+ Are you a GBU student passionate about technology and innovation? We're always looking for talented individuals to join our organizing team.
+
+
+ Apply Now
+
+
+
+
+
-
-
- )
+
+
+ );
}
-export default Team
+export default Team;
diff --git a/src/components/Term.jsx b/src/components/Term.jsx
index ae53ab9..6e9075e 100644
--- a/src/components/Term.jsx
+++ b/src/components/Term.jsx
@@ -2,23 +2,23 @@ const Term = () => {
return (
-
+
-
-
Hackfed@Community:~$
-
+
+ Hackfed@GBU:~$
+
sudo rm -rf /limits &&
echo "No limits, just innovation."
-
-
Hackfed@Community:~$
-
+
+
Hackfed@GBU:~$
+
echo "Deploying creativity..." &&
./build-dreams --target=world
diff --git a/src/components/UpcommingEvent.jsx b/src/components/UpcommingEvent.jsx
index 24d7d49..bc36f6d 100644
--- a/src/components/UpcommingEvent.jsx
+++ b/src/components/UpcommingEvent.jsx
@@ -1,33 +1,103 @@
+import React, { useState } from 'react';
+import RegistrationModal from './RegistrationModal';
+
function UpcomingEvent() {
+ const [isModalOpen, setIsModalOpen] = useState(false);
+
+ const handleRegisterClick = (e) => {
+ e.preventDefault();
+ setIsModalOpen(true);
+ };
+
return (
-
+
-
- Moon hashtag pop-up try-hard offal truffaut
-
-
- Pour-over craft beer pug drinking vinegar live-edge gastropub, keytar neutra sustainable fingerstache kickstarter. Pour-over craft beer pug drinking vinegar live-edge gastropub, keytar neutra sustainable fingerstache kickstarter.
-
- Pour-over craft beer pug drinking vinegar live-edge gastropub, keytar neutra sustainable fingerstache kickstarter.
+
+ Official GBU Event
-
Create Your First Form
+
+ Ignition Hackathon 2025
+
+
+ A dynamic 24-hour Hackathon, intensive boot camp, coding competitions, and cybersecurity challenges set the stage for skill elevation. Engage in interactive workshops, enjoy an evening cultural show, and connect with tech communities and industry experts.
+
+
+
+
+
+
24-Hour Challenge
+
Non-stop coding experience
+
+
+
+
+
+
Greater Noida, UP
+
Greater Noida, UP
+
+
+
+
-
-
+
+
+
+
+
+
+ Registration Open
+
+
+
+
+ {/* Registration Modal */}
+
setIsModalOpen(false)}
+ eventTitle="GBU Ignition Hackathon 2024"
+ />
);
}
diff --git a/src/main.jsx b/src/main.jsx
index 89f91e5..7431a78 100644
--- a/src/main.jsx
+++ b/src/main.jsx
@@ -1,10 +1,12 @@
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
+import { Analytics } from '@vercel/analytics/react'
import App from './App.jsx'
import './index.css'
createRoot(document.getElementById('root')).render(
,
)
diff --git a/src/pages/AskQuestion.jsx b/src/pages/AskQuestion.jsx
new file mode 100644
index 0000000..fff6c03
--- /dev/null
+++ b/src/pages/AskQuestion.jsx
@@ -0,0 +1,275 @@
+import { useState } from 'react';
+
+function AskQuestion() {
+ const [formData, setFormData] = useState({
+ name: '',
+ email: '',
+ topic: 'general',
+ question: '',
+ agree: false
+ });
+
+ const [formStatus, setFormStatus] = useState({
+ submitting: false,
+ submitted: false,
+ error: null
+ });
+
+ const handleChange = (e) => {
+ const { name, value, type, checked } = e.target;
+ setFormData(prev => ({
+ ...prev,
+ [name]: type === 'checkbox' ? checked : value
+ }));
+ };
+
+ const handleSubmit = (e) => {
+ e.preventDefault();
+
+ // Validate form
+ if (!formData.name || !formData.email || !formData.question || !formData.agree) {
+ setFormStatus({
+ submitting: false,
+ submitted: false,
+ error: 'Please fill out all required fields'
+ });
+ return;
+ }
+
+ // Submit form
+ setFormStatus({
+ submitting: true,
+ submitted: false,
+ error: null
+ });
+
+ // Simulate API call
+ setTimeout(() => {
+ // Success response
+ setFormStatus({
+ submitting: false,
+ submitted: true,
+ error: null
+ });
+
+ // Reset form
+ setFormData({
+ name: '',
+ email: '',
+ topic: 'general',
+ question: '',
+ agree: false
+ });
+ }, 1500);
+ };
+
+ return (
+
+ {/* Hero Section */}
+
+ {/* Background elements */}
+
+
+ {/* Animated glow */}
+
+
+
+
+
+ Ask Your Question
+
+
+ Can't find the answer you're looking for? Submit your question to the HackFed team, and we'll get back to you as soon as possible.
+
+
+
+
+
+ {/* Form Section */}
+
+
+ {/* Tech pattern overlay on the form */}
+
+
+ {/* Form content */}
+
+ {formStatus.submitted ? (
+
+
+
+ Question Submitted Successfully
+
+
+ Thank you for reaching out! Our team will review your question and get back to you via email soon.
+
+
setFormStatus(prev => ({ ...prev, submitted: false }))}
+ className="inline-flex items-center px-5 py-3 bg-gradient-to-r from-blue-500/20 to-cyan-500/20 border border-blue-500/30 hover:from-blue-500/30 hover:to-cyan-500/30 rounded-lg text-white transition-all duration-300"
+ >
+ Ask Another Question
+
+
+
+
+ ) : (
+
+ )}
+
+
+
+ {/* FAQ Link Section */}
+
+
+
+ );
+}
+
+export default AskQuestion;
\ No newline at end of file
diff --git a/src/pages/Events.jsx b/src/pages/Events.jsx
new file mode 100644
index 0000000..d19c597
--- /dev/null
+++ b/src/pages/Events.jsx
@@ -0,0 +1,281 @@
+import React, { useState, useEffect } from 'react';
+import RegistrationModal from '../components/RegistrationModal';
+
+function Events() {
+ const [filter, setFilter] = useState('all');
+ const [isModalOpen, setIsModalOpen] = useState(false);
+ const [selectedEvent, setSelectedEvent] = useState(null);
+ const [searchParams, setSearchParams] = useState(new URLSearchParams(window.location.search));
+
+ // Parse URL query parameters on component mount
+ useEffect(() => {
+ const categoryParam = searchParams.get('category');
+ if (categoryParam) {
+ setFilter(categoryParam);
+ }
+ }, []);
+
+ // Event data - in a real app this would come from an API
+ const events = [
+ {
+ id: 1,
+ title: "React Workshop",
+ description: "Build modern UIs with React and Next.js",
+ image: "https://images.unsplash.com/photo-1519389950473-47ba0277781c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80",
+ date: "29 July 2024",
+ time: "10:00 AM - 2:00 PM",
+ duration: "4 hours",
+ status: "registration-open",
+ category: "workshop",
+ location: "Computer Lab, Academic Block 1, GBU",
+ },
+ {
+ id: 2,
+ title: "AI/ML Workshop",
+ description: "Introduction to Machine Learning with Python",
+ image: "https://images.unsplash.com/photo-1591267990532-e5bdb1b0ceb8?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80",
+ date: "15 August 2024",
+ time: "1:00 PM - 5:00 PM",
+ duration: "4 hours",
+ status: "coming-soon",
+ category: "workshop",
+ location: "Computer Lab, Academic Block 1, GBU",
+ },
+ {
+ id: 3,
+ title: "Career in Tech",
+ description: "Panel discussion with industry experts",
+ image: "https://images.unsplash.com/photo-1540575467063-178a50c2df87?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80",
+ date: "5 August 2024",
+ time: "3:00 PM - 5:00 PM",
+ duration: "2 hours",
+ status: "registration-open",
+ category: "talk",
+ location: "Auditorium, Academic Block 2, GBU",
+ },
+ {
+ id: 4,
+ title: "Tech Networking Mixer",
+ description: "Connect with peers and industry professionals",
+ image: "https://images.unsplash.com/photo-1511795409834-ef04bbd61622?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80",
+ date: "20 August 2024",
+ time: "5:00 PM - 7:00 PM",
+ duration: "2 hours",
+ status: "coming-soon",
+ category: "networking",
+ location: "Student Activity Center, GBU",
+ },
+ ];
+ const filteredEvents = filter === 'all'
+ ? events
+ : events.filter(event => event.category === filter);
+
+ const handleRegisterClick = (event) => {
+ setSelectedEvent(event);
+ setIsModalOpen(true);
+ };
+
+ const handleFilterChange = (newFilter) => {
+ setFilter(newFilter);
+ const newSearchParams = new URLSearchParams(window.location.search);
+ if (newFilter === 'all') {
+ newSearchParams.delete('category');
+ } else {
+ newSearchParams.set('category', newFilter);
+ }
+
+ window.history.pushState(
+ {},
+ '',
+ `${window.location.pathname}?${newSearchParams.toString()}`
+ );
+ };
+
+ return (
+
+ {/* Hero Banner */}
+
+
+
+
+
Tech Events at GBU
+
Discover workshops, tech talks, and networking events hosted by HackFed
+
+
+
+ {/* Main Content */}
+
+ {/* Category Filter */}
+
+ handleFilterChange('all')}
+ className={`px-6 py-2 rounded-full text-sm font-medium transition-all duration-300
+ ${filter === 'all'
+ ? 'bg-blue-500 text-white'
+ : 'bg-gray-800/50 text-gray-300 hover:bg-gray-700/50'}`}
+ >
+ All Events
+
+ handleFilterChange('workshop')}
+ className={`px-6 py-2 rounded-full text-sm font-medium transition-all duration-300
+ ${filter === 'workshop'
+ ? 'bg-blue-500 text-white'
+ : 'bg-gray-800/50 text-gray-300 hover:bg-gray-700/50'}`}
+ >
+ Workshops
+
+ handleFilterChange('talk')}
+ className={`px-6 py-2 rounded-full text-sm font-medium transition-all duration-300
+ ${filter === 'talk'
+ ? 'bg-blue-500 text-white'
+ : 'bg-gray-800/50 text-gray-300 hover:bg-gray-700/50'}`}
+ >
+ Tech Talks
+
+ handleFilterChange('networking')}
+ className={`px-6 py-2 rounded-full text-sm font-medium transition-all duration-300
+ ${filter === 'networking'
+ ? 'bg-blue-500 text-white'
+ : 'bg-gray-800/50 text-gray-300 hover:bg-gray-700/50'}`}
+ >
+ Networking
+
+
+
+ {/* Events Grid */}
+
+ {filteredEvents.map((event) => (
+
+
+
+
+
+ {event.date}
+
+
+
{event.title}
+
{event.description}
+
+
+
+
+
+
+
{event.time}
+
{event.duration}
+
+
+ {event.status === 'registration-open' ? (
+
+ Registration Open
+
+ ) : (
+
+ Coming Soon
+
+ )}
+
+
+
+ {event.status === 'registration-open' ? (
+
handleRegisterClick(event)}
+ className="inline-flex items-center justify-center w-full px-6 py-3 mt-2 rounded-lg bg-gradient-to-r from-blue-500/20 to-cyan-500/20 border border-blue-500/30 hover:from-blue-500/30 hover:to-cyan-500/30 text-white transition-all duration-300"
+ >
+ Register Now
+
+
+
+ ) : (
+
+ Notify Me
+
+
+
+ )}
+
+
+ ))}
+
+
+ {/* No Events Message */}
+ {filteredEvents.length === 0 && (
+
+
+
No events found
+
+ We couldn't find any events in this category. Please check back later or try a different category.
+
+
+ )}
+
+ {/* Join the Community Banner */}
+
+
+
+
Join GBU's Premier Tech Community
+
Connect with like-minded innovators, enhance your skills, and build your tech portfolio with HackFed.
+
+
+ Become a Member
+
+
+
+
+
+
+
+ {/* Registration Modal */}
+
setIsModalOpen(false)}
+ eventTitle={selectedEvent?.title || ''}
+ />
+
+ );
+}
+
+export default Events;
\ No newline at end of file
diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx
index 719f12d..3112f1a 100644
--- a/src/pages/Home.jsx
+++ b/src/pages/Home.jsx
@@ -6,6 +6,7 @@ import Partners from '../components/Partners'
import PastEvents from '../components/PastEvents'
import Stats from '../components/Stats'
import UpcommingEvent from '../components/UpcommingEvent'
+import JoinUs from '../components/JoinUs'
function Home() {
return (
@@ -21,6 +22,7 @@ function Home() {
+
)
+ 
+
+ 
+
+ 
+
+ 
+