From 7e8a81d08a6db0edebd20fd39fd3042bbd87e621 Mon Sep 17 00:00:00 2001 From: YaduLuxe Date: Wed, 2 Jul 2025 14:03:21 +0530 Subject: [PATCH] hackfed website redesigned for step by step process visit my repo hackfed --- index.html | 4 +- package-lock.json | 161 ++ package.json | 3 + src/App.jsx | 313 +++- src/assets/1727719864699 (1).jpeg | Bin 0 -> 167992 bytes src/assets/gbu.webp | Bin 0 -> 206066 bytes src/assets/h1.png | Bin 0 -> 55801 bytes src/assets/hackfed_community_cover.jpeg | Bin 0 -> 30352 bytes src/assets/hackfed_community_logo.jpeg | Bin 0 -> 8149 bytes src/assets/react.svg | 1 - src/components/AboutHackfed.jsx | 287 +++- src/components/AnimatedList.jsx | 175 ++ src/components/CallToAction.jsx | 74 +- src/components/CommunityBanner.jsx | 49 + src/components/ConnectWithUs.jsx | 203 +++ src/components/EventCategories.jsx | 92 + src/components/Faq.jsx | 534 ++++-- src/components/Fotter.jsx | 157 +- src/components/FuzzyText.jsx | 201 +++ src/components/Gallery.jsx | 197 ++- src/components/Hero.jsx | 164 +- src/components/JoinUs.jsx | 105 ++ src/components/MobileImage.jsx | 70 + src/components/MobileInput.jsx | 171 ++ src/components/MobileNav.jsx | 189 +++ src/components/Navbar.jsx | 111 +- src/components/PastEvents.jsx | 79 +- src/components/RegistrationModal.jsx | 374 +++++ src/components/Stats.jsx | 264 ++- src/components/StickeyNav.jsx | 12 - src/components/Styles/Landing.css | 2038 ++++++++++++++++++++++- src/components/Team.jsx | 255 +-- src/components/Term.jsx | 16 +- src/components/UpcommingEvent.jsx | 104 +- src/main.jsx | 2 + src/pages/AskQuestion.jsx | 275 +++ src/pages/Events.jsx | 281 ++++ src/pages/Home.jsx | 2 + 38 files changed, 6469 insertions(+), 494 deletions(-) create mode 100644 src/assets/1727719864699 (1).jpeg create mode 100644 src/assets/gbu.webp create mode 100644 src/assets/h1.png create mode 100644 src/assets/hackfed_community_cover.jpeg create mode 100644 src/assets/hackfed_community_logo.jpeg delete mode 100644 src/assets/react.svg create mode 100644 src/components/AnimatedList.jsx create mode 100644 src/components/CommunityBanner.jsx create mode 100644 src/components/ConnectWithUs.jsx create mode 100644 src/components/EventCategories.jsx create mode 100644 src/components/FuzzyText.jsx create mode 100644 src/components/JoinUs.jsx create mode 100644 src/components/MobileImage.jsx create mode 100644 src/components/MobileInput.jsx create mode 100644 src/components/MobileNav.jsx create mode 100644 src/components/RegistrationModal.jsx delete mode 100644 src/components/StickeyNav.jsx create mode 100644 src/pages/AskQuestion.jsx create mode 100644 src/pages/Events.jsx diff --git a/index.html b/index.html index 0c589ec..15ca4a2 100644 --- a/index.html +++ b/index.html @@ -2,9 +2,9 @@ - + - Vite + React + HackFed
diff --git a/package-lock.json b/package-lock.json index e44069b..8aa78bb 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,7 +8,10 @@ "name": "hackfed", "version": "0.0.0", "dependencies": { + "@react-spring/web": "^9.7.5", + "@vercel/analytics": "^1.5.0", "flowbite-react": "^0.10.2", + "framer-motion": "^12.6.0", "prop-types": "^15.8.1", "react": "^18.3.1", "react-dom": "^18.3.1", @@ -1001,6 +1004,78 @@ "url": "https://opencollective.com/popperjs" } }, + "node_modules/@react-spring/animated": { + "version": "9.7.5", + "resolved": "https://registry.npmjs.org/@react-spring/animated/-/animated-9.7.5.tgz", + "integrity": "sha512-Tqrwz7pIlsSDITzxoLS3n/v/YCUHQdOIKtOJf4yL6kYVSDTSmVK1LI1Q3M/uu2Sx4X3pIWF3xLUhlsA6SPNTNg==", + "license": "MIT", + "dependencies": { + "@react-spring/shared": "~9.7.5", + "@react-spring/types": "~9.7.5" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0" + } + }, + "node_modules/@react-spring/core": { + "version": "9.7.5", + "resolved": "https://registry.npmjs.org/@react-spring/core/-/core-9.7.5.tgz", + "integrity": "sha512-rmEqcxRcu7dWh7MnCcMXLvrf6/SDlSokLaLTxiPlAYi11nN3B5oiCUAblO72o+9z/87j2uzxa2Inm8UbLjXA+w==", + "license": "MIT", + "dependencies": { + "@react-spring/animated": "~9.7.5", + "@react-spring/shared": "~9.7.5", + "@react-spring/types": "~9.7.5" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/react-spring/donate" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0" + } + }, + "node_modules/@react-spring/rafz": { + "version": "9.7.5", + "resolved": "https://registry.npmjs.org/@react-spring/rafz/-/rafz-9.7.5.tgz", + "integrity": "sha512-5ZenDQMC48wjUzPAm1EtwQ5Ot3bLIAwwqP2w2owG5KoNdNHpEJV263nGhCeKKmuA3vG2zLLOdu3or6kuDjA6Aw==", + "license": "MIT" + }, + "node_modules/@react-spring/shared": { + "version": "9.7.5", + "resolved": "https://registry.npmjs.org/@react-spring/shared/-/shared-9.7.5.tgz", + "integrity": "sha512-wdtoJrhUeeyD/PP/zo+np2s1Z820Ohr/BbuVYv+3dVLW7WctoiN7std8rISoYoHpUXtbkpesSKuPIw/6U1w1Pw==", + "license": "MIT", + "dependencies": { + "@react-spring/rafz": "~9.7.5", + "@react-spring/types": "~9.7.5" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0" + } + }, + "node_modules/@react-spring/types": { + "version": "9.7.5", + "resolved": "https://registry.npmjs.org/@react-spring/types/-/types-9.7.5.tgz", + "integrity": "sha512-HVj7LrZ4ReHWBimBvu2SKND3cDVUPWKLqRTmWe/fNY6o1owGOX0cAHbdPDTMelgBlVbrTKrre6lFkhqGZErK/g==", + "license": "MIT" + }, + "node_modules/@react-spring/web": { + "version": "9.7.5", + "resolved": "https://registry.npmjs.org/@react-spring/web/-/web-9.7.5.tgz", + "integrity": "sha512-lmvqGwpe+CSttsWNZVr+Dg62adtKhauGwLyGE/RRyZ8AAMLgb9x3NDMA5RMElXo+IMyTkPp7nxTB8ZQlmhb6JQ==", + "license": "MIT", + "dependencies": { + "@react-spring/animated": "~9.7.5", + "@react-spring/core": "~9.7.5", + "@react-spring/shared": "~9.7.5", + "@react-spring/types": "~9.7.5" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0", + "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" + } + }, "node_modules/@remix-run/router": { "version": "1.20.0", "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.20.0.tgz", @@ -1180,6 +1255,44 @@ "integrity": "sha512-60BCwRFOZCQhDncwQdxxeOEEkbc5dIMccYLwbxsS4TUNeVECQ/pBJ0j09mrHOl/JJvpRPGwO9SvE4nR2Nb/a4Q==", "license": "MIT" }, + "node_modules/@vercel/analytics": { + "version": "1.5.0", + "resolved": "https://registry.npmjs.org/@vercel/analytics/-/analytics-1.5.0.tgz", + "integrity": "sha512-MYsBzfPki4gthY5HnYN7jgInhAZ7Ac1cYDoRWFomwGHWEX7odTEzbtg9kf/QSo7XEsEAqlQugA6gJ2WS2DEa3g==", + "license": "MPL-2.0", + "peerDependencies": { + "@remix-run/react": "^2", + "@sveltejs/kit": "^1 || ^2", + "next": ">= 13", + "react": "^18 || ^19 || ^19.0.0-rc", + "svelte": ">= 4", + "vue": "^3", + "vue-router": "^4" + }, + "peerDependenciesMeta": { + "@remix-run/react": { + "optional": true + }, + "@sveltejs/kit": { + "optional": true + }, + "next": { + "optional": true + }, + "react": { + "optional": true + }, + "svelte": { + "optional": true + }, + "vue": { + "optional": true + }, + "vue-router": { + "optional": true + } + } + }, "node_modules/@vitejs/plugin-react": { "version": "4.3.3", "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-4.3.3.tgz", @@ -7878,6 +7991,33 @@ "url": "https://github.com/sponsors/rawify" } }, + "node_modules/framer-motion": { + "version": "12.6.0", + "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.6.0.tgz", + "integrity": "sha512-91XLZ3VwDlXe9u2ABhTzYBiFQ/qdoiqyTiTCQDDJ4es5/5lzp76hdB+WG7gcNklcQlOmfDZQqVO48tqzY9Z/bQ==", + "license": "MIT", + "dependencies": { + "motion-dom": "^12.6.0", + "motion-utils": "^12.5.0", + "tslib": "^2.4.0" + }, + "peerDependencies": { + "@emotion/is-prop-valid": "*", + "react": "^18.0.0 || ^19.0.0", + "react-dom": "^18.0.0 || ^19.0.0" + }, + "peerDependenciesMeta": { + "@emotion/is-prop-valid": { + "optional": true + }, + "react": { + "optional": true + }, + "react-dom": { + "optional": true + } + } + }, "node_modules/fsevents": { "version": "2.3.3", "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz", @@ -9316,6 +9456,21 @@ "node": ">=16 || 14 >=14.17" } }, + "node_modules/motion-dom": { + "version": "12.6.0", + "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.6.0.tgz", + "integrity": "sha512-1s/+/V0ny/gfhocSSf0qhkspZK2da7jrwGw7xHzgiQPcimdHaPRcRCoJ3OxEZYBNzy3ma1ERUD+eUStk6a9pQw==", + "license": "MIT", + "dependencies": { + "motion-utils": "^12.5.0" + } + }, + "node_modules/motion-utils": { + "version": "12.5.0", + "resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-12.5.0.tgz", + "integrity": "sha512-+hFFzvimn0sBMP9iPxBa9OtRX35ZQ3py0UHnb8U29VD+d8lQ8zH3dTygJWqK7av2v6yhg7scj9iZuvTS0f4+SA==", + "license": "MIT" + }, "node_modules/mz": { "version": "2.7.0", "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz", @@ -13850,6 +14005,12 @@ "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==", "license": "Apache-2.0" }, + "node_modules/tslib": { + "version": "2.8.1", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz", + "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==", + "license": "0BSD" + }, "node_modules/update-browserslist-db": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.1.tgz", diff --git a/package.json b/package.json index 60c8ef2..5876b7f 100644 --- a/package.json +++ b/package.json @@ -10,7 +10,10 @@ "preview": "vite preview" }, "dependencies": { + "@react-spring/web": "^9.7.5", + "@vercel/analytics": "^1.5.0", "flowbite-react": "^0.10.2", + "framer-motion": "^12.6.0", "prop-types": "^15.8.1", "react": "^18.3.1", "react-dom": "^18.3.1", diff --git a/src/App.jsx b/src/App.jsx index 6488c68..f17c9e0 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,29 +1,326 @@ import { useEffect } from 'react'; import './App.css'; -import Footer from './components/Fotter'; // Ensure the spelling matches +import Footer from './components/Fotter'; import Navbar from './components/Navbar'; import Home from './pages/Home'; -import AboutUs from './pages/AboutUs'; -import { BrowserRouter as Router, Route, Routes } from 'react-router-dom'; -import StickyNav from './components/StickeyNav'; +import Events from './pages/Events'; +import { BrowserRouter as Router, Route, Routes, Navigate } from 'react-router-dom'; +import AboutHackfed from './components/AboutHackfed'; +import Gallery from './components/Gallery'; +import Team from './components/Team'; +import AskQuestion from './pages/AskQuestion'; +import ConnectWithUs from './components/ConnectWithUs'; function App() { useEffect(() => { document.body.style.overflow = 'hidden'; const timer = setTimeout(() => { - document.body.style.overflow = 'auto'; // Enable scrolling + document.body.style.overflow = 'auto'; }, 3000); return () => clearTimeout(timer); }, []); + return ( -
{/* Added wrapper div */} +
- +
{/* Add padding top to account for fixed navbar */} } exact /> - } exact /> + } exact /> + +
+

GBU Hackathons

+ + {/* Featured Hackathon */} +
+
+
+ GBU Ignition Hackathon +
+
+ Official GBU Event + 24 Hours + Coming Soon +
+

GBU Ignition Hackathon

+
+
+ +
+
+
+

Event Highlights

+

+ 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. +

+

+ Explore tech trends through exhibitions, gaming tournaments, and AI/Robotics demos. Foster collaboration with start-up showcases, networking sessions, and project displays. Elevate learning, innovation, and cultural celebration in this vibrant tech extravaganza. +

+ +
+ +
+

Event Details

+
    +
  • +
    + + + +
    +
    +

    Coming Soon

    +

    Check official website for dates

    +
    +
    • +
  • +
    + + + + +
    +
    +

    Gautam Buddha University

    +

    Greater Noida, Uttar Pradesh

    +
    +
    • +
  • +
    + + + +
    +
    +

    24 Hours

    +

    Non-stop coding challenge

    +
    +
    • +
  • +
    + + + +
    +
    +

    Open to All

    +

    Students, professionals & enthusiasts

    +
    +
    • +
+
+
+
+
+ +

Past Hackathons

+ +
+
+
+ Entrepreneur Hackathon +
+
+

Entrepreneur Hackathon

+

April 2023

+
+
+
+

A hackathon focused on building innovative startup solutions and business models.

+
+
+ +
+
+ Glitch Hackathon +
+
+

Glitch Hackathon

+

September 2023

+
+
+
+

A creative coding challenge focused on experimental digital art and web experiences.

+
+
+ +
+
+ 24-Hour Code Marathon +
+
+

24-Hour Code Marathon

+

December 2023

+
+
+
+

A full-day non-stop coding challenge pushing participants to build complete projects within 24 hours.

+
+
+
+
+
+ } /> + } /> + +
+
+

About GBU Community

+

Discover the innovative tech community at Gautam Buddha University.

+
+ + {/* Import and include the AboutUs components here */} + + + + +
+

Join Our Community

+

Connect with like-minded tech enthusiasts at Gautam Buddha University.

+
+
+

For Students

+

Join our vibrant community to enhance your technical skills and participate in events.

+ + Student membership + + + + +
+
+

For Mentors

+

Share your expertise with the next generation of tech innovators.

+ + Become a mentor + + + + +
+
+
+
+
+ } /> + +
+

Contact Us

+

Have questions about HackFed or want to collaborate? Get in touch with our team.

+
+
+
+ + +
+
+ + +
+
+ + +
+
+ +
+
+
+
+
+ } /> + +
+

Join HackFed

+

Become part of our innovative tech community at Gautam Buddha University.

+
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ +
+
+
+
+ + } /> + } /> + } /> + ) } diff --git a/src/components/FuzzyText.jsx b/src/components/FuzzyText.jsx new file mode 100644 index 0000000..997fd31 --- /dev/null +++ b/src/components/FuzzyText.jsx @@ -0,0 +1,201 @@ +import React, { useEffect, useRef } from "react"; + +const FuzzyText = ({ + children, + fontSize = "clamp(2rem, 10vw, 10rem)", + fontWeight = 900, + fontFamily = "inherit", + color = "#fff", + enableHover = true, + baseIntensity = 0.18, + hoverIntensity = 0.5, +}) => { + const canvasRef = useRef(null); + + useEffect(() => { + let animationFrameId; + let isCancelled = false; + const canvas = canvasRef.current; + if (!canvas) return; + + const init = async () => { + if (document.fonts?.ready) { + await document.fonts.ready; + } + if (isCancelled) return; + + const ctx = canvas.getContext("2d"); + if (!ctx) return; + + const computedFontFamily = + fontFamily === "inherit" + ? window.getComputedStyle(canvas).fontFamily || "sans-serif" + : fontFamily; + + const fontSizeStr = + typeof fontSize === "number" ? `${fontSize}px` : fontSize; + let numericFontSize; + if (typeof fontSize === "number") { + numericFontSize = fontSize; + } else { + const temp = document.createElement("span"); + temp.style.fontSize = fontSize; + document.body.appendChild(temp); + const computedSize = window.getComputedStyle(temp).fontSize; + numericFontSize = parseFloat(computedSize); + document.body.removeChild(temp); + } + + const text = React.Children.toArray(children).join(""); + + // Create offscreen canvas + const offscreen = document.createElement("canvas"); + const offCtx = offscreen.getContext("2d"); + if (!offCtx) return; + + offCtx.font = `${fontWeight} ${fontSizeStr} ${computedFontFamily}`; + offCtx.textBaseline = "alphabetic"; + const metrics = offCtx.measureText(text); + + const actualLeft = metrics.actualBoundingBoxLeft ?? 0; + const actualRight = metrics.actualBoundingBoxRight ?? metrics.width; + const actualAscent = metrics.actualBoundingBoxAscent ?? numericFontSize; + const actualDescent = + metrics.actualBoundingBoxDescent ?? numericFontSize * 0.2; + + const textBoundingWidth = Math.ceil(actualLeft + actualRight); + const tightHeight = Math.ceil(actualAscent + actualDescent); + + const extraWidthBuffer = 10; + const offscreenWidth = textBoundingWidth + extraWidthBuffer; + + offscreen.width = offscreenWidth; + offscreen.height = tightHeight; + + const xOffset = extraWidthBuffer / 2; + offCtx.font = `${fontWeight} ${fontSizeStr} ${computedFontFamily}`; + offCtx.textBaseline = "alphabetic"; + offCtx.fillStyle = color; + offCtx.fillText(text, xOffset - actualLeft, actualAscent); + + const horizontalMargin = 50; + const verticalMargin = 0; + canvas.width = offscreenWidth + horizontalMargin * 2; + canvas.height = tightHeight + verticalMargin * 2; + ctx.translate(horizontalMargin, verticalMargin); + + const interactiveLeft = horizontalMargin + xOffset; + const interactiveTop = verticalMargin; + const interactiveRight = interactiveLeft + textBoundingWidth; + const interactiveBottom = interactiveTop + tightHeight; + + let isHovering = false; + const fuzzRange = 30; + + const run = () => { + if (isCancelled) return; + ctx.clearRect( + -fuzzRange, + -fuzzRange, + offscreenWidth + 2 * fuzzRange, + tightHeight + 2 * fuzzRange + ); + const intensity = isHovering ? hoverIntensity : baseIntensity; + for (let j = 0; j < tightHeight; j++) { + const dx = Math.floor(intensity * (Math.random() - 0.5) * fuzzRange); + ctx.drawImage( + offscreen, + 0, + j, + offscreenWidth, + 1, + dx, + j, + offscreenWidth, + 1 + ); + } + animationFrameId = window.requestAnimationFrame(run); + }; + + run(); + + const isInsideTextArea = (x, y) => { + return ( + x >= interactiveLeft && + x <= interactiveRight && + y >= interactiveTop && + y <= interactiveBottom + ); + }; + + const handleMouseMove = (e) => { + if (!enableHover) return; + const rect = canvas.getBoundingClientRect(); + const x = e.clientX - rect.left; + const y = e.clientY - rect.top; + isHovering = isInsideTextArea(x, y); + }; + + const handleMouseLeave = () => { + isHovering = false; + }; + + const handleTouchMove = (e) => { + if (!enableHover) return; + e.preventDefault(); + const rect = canvas.getBoundingClientRect(); + const touch = e.touches[0]; + const x = touch.clientX - rect.left; + const y = touch.clientY - rect.top; + isHovering = isInsideTextArea(x, y); + }; + + const handleTouchEnd = () => { + isHovering = false; + }; + + if (enableHover) { + canvas.addEventListener("mousemove", handleMouseMove); + canvas.addEventListener("mouseleave", handleMouseLeave); + canvas.addEventListener("touchmove", handleTouchMove, { passive: false }); + canvas.addEventListener("touchend", handleTouchEnd); + } + + const cleanup = () => { + window.cancelAnimationFrame(animationFrameId); + if (enableHover) { + canvas.removeEventListener("mousemove", handleMouseMove); + canvas.removeEventListener("mouseleave", handleMouseLeave); + canvas.removeEventListener("touchmove", handleTouchMove); + canvas.removeEventListener("touchend", handleTouchEnd); + } + }; + + canvas.cleanupFuzzyText = cleanup; + }; + + init(); + + return () => { + isCancelled = true; + window.cancelAnimationFrame(animationFrameId); + if (canvas && canvas.cleanupFuzzyText) { + canvas.cleanupFuzzyText(); + } + }; + }, [ + children, + fontSize, + fontWeight, + fontFamily, + color, + enableHover, + baseIntensity, + hoverIntensity, + ]); + + return ; +}; + +export default FuzzyText; \ No newline at end of file diff --git a/src/components/Gallery.jsx b/src/components/Gallery.jsx index 9c5a0a3..67c4302 100644 --- a/src/components/Gallery.jsx +++ b/src/components/Gallery.jsx @@ -1,40 +1,179 @@ -import React from 'react' +import React, { useState } from 'react'; +import './Styles/Landing.css'; const Gallery = () => { + const [activeTab, setActiveTab] = useState('hackathons'); + + const images = { + hackathons: [ + { + src: "https://images.unsplash.com/photo-1504384308090-c894fdcc538d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80", + alt: "HackFed 2023 Coding Challenge", + title: "HackFed 2023", + description: "Our flagship 48-hour hackathon at GBU" + }, + { + src: "https://images.unsplash.com/photo-1526378722484-bd91ca387e72?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80", + alt: "Code Sprint 2023", + title: "Code Sprint 2023", + description: "24-hour coding challenge for beginners" + }, + { + src: "https://images.unsplash.com/photo-1517245386807-bb43f82c33c4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80", + alt: "AI Innovate 2023", + title: "AI Innovate 2023", + description: "Specialized hackathon focused on AI solutions" + }, + { + src: "https://images.unsplash.com/photo-1573164574001-518958d9baa2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80", + alt: "Hack GBU 2022", + title: "Hack GBU 2022", + description: "University-wide innovation challenge" + } + ], + workshops: [ + { + src: "https://images.unsplash.com/photo-1531482615713-2afd69097998?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80", + alt: "Web Development Workshop", + title: "Web Dev Bootcamp", + description: "3-day intensive training on modern web technologies" + }, + { + src: "https://images.unsplash.com/photo-1558346490-a72e53ae2d4f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80", + alt: "Machine Learning Workshop", + title: "ML Fundamentals", + description: "Hands-on workshop on machine learning basics" + }, + { + src: "https://images.unsplash.com/photo-1557838923-2985c318be48?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80", + alt: "Cloud Computing Workshop", + title: "Cloud Technologies", + description: "Workshop on AWS and Azure fundamentals" + }, + { + src: "https://images.unsplash.com/photo-1552581234-26160f608093?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80", + alt: "Mobile App Development", + title: "App Development", + description: "Mobile app development with React Native" + } + ], + networking: [ + { + src: "https://images.unsplash.com/photo-1511578314322-379afb476865?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80", + alt: "Tech Meetup 2023", + title: "Tech Meetup 2023", + description: "Annual networking event for tech enthusiasts" + }, + { + src: "https://images.unsplash.com/photo-1556761175-b413da4baf72?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80", + alt: "Industry Connect", + title: "Industry Connect", + description: "Connecting GBU students with tech companies" + }, + { + src: "https://images.unsplash.com/photo-1540317580384-e5d43867caa6?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80", + alt: "Tech Talks 2023", + title: "Tech Talks 2023", + description: "Speaker series featuring industry experts" + }, + { + src: "https://images.unsplash.com/photo-1507537297725-24a1c029d3ca?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80", + alt: "Alumni Meetup", + title: "Alumni Meetup", + description: "Connecting current students with GBU alumni" + } + ] + }; + return ( -
-
-
-

Master Cleanse Reliac Heirloom

-

Whatever cardigan tote bag tumblr hexagon brooklyn asymmetrical gentrify, subway tile poke farm-to-table. Franzen you probably haven't heard of them man bun deep jianbing selfies heirloom.

-
-
-
-
- gallery -
-
- gallery -
-
- gallery -
+
+ {/* Background elements */} +
+
+
+
+ + {/* Enhanced background glow */} +
+
+ +
+
+
+

+ HackFed Gallery +

+

+ Explore highlights from our events and activities at Gautam Buddha University +

-
-
- gallery -
-
- gallery -
-
- gallery + + {/* Tabs - Enhanced with better styling */} +
+
+ + +
+ + {/* Gallery grid - Updated with better card styling */} +
+ {images[activeTab].map((image, index) => ( +
+
+
+ {image.alt} +
+

{image.title}

+
+
+
+

{image.title}

+

{image.description}

+
+
+ ))} +
+ + {/* View all button - Enhanced styling */} +
- ) + ); } -export default Gallery +export default Gallery; diff --git a/src/components/Hero.jsx b/src/components/Hero.jsx index e501b62..4dc8939 100644 --- a/src/components/Hero.jsx +++ b/src/components/Hero.jsx @@ -1,11 +1,72 @@ -import { useEffect } from "react"; +import { useEffect, useState, useRef } from "react"; import "./Styles/Landing.css" import Partners from "./Partners"; import Term from "./Term"; +import FuzzyText from "./FuzzyText"; // import UpComing from "./UpComing"; // import Footer from "./Footer"; function Hero() { + const [glitching, setGlitching] = useState(false); + const [isDaytime, setIsDaytime] = useState(true); + const [greeting, setGreeting] = useState(""); + const [showScrollIndicator, setShowScrollIndicator] = useState(true); + const [hoverIntensity, setHoverIntensity] = useState(0.5); + const scrollIndicatorRef = useRef(null); + const greetingRef = useRef(null); + useEffect(() => { + // Set greeting based on time of day + const hour = new Date().getHours(); + if (hour >= 5 && hour < 12) { + setGreeting("Good Morning"); + setIsDaytime(true); + } else if (hour >= 12 && hour < 18) { + setGreeting("Good Afternoon"); + setIsDaytime(true); + } else { + setGreeting("Good Evening"); + setIsDaytime(false); + } + + // Handle scroll behavior for the page + const handleScroll = () => { + const scrollPosition = window.scrollY; + const windowHeight = window.innerHeight; + + // Calculate opacity based on scroll position for a smoother transition + const maxScrollThreshold = windowHeight * 0.2; + + if (scrollPosition <= maxScrollThreshold) { + // Gradually decrease opacity as user scrolls + if (scrollIndicatorRef.current) { + const newOpacity = 1 - (scrollPosition / maxScrollThreshold); + scrollIndicatorRef.current.style.opacity = Math.max(0, newOpacity).toFixed(2); + } + + if (scrollPosition === 0) { + setShowScrollIndicator(true); + } + } else if (showScrollIndicator) { + setShowScrollIndicator(false); + } + }; + + window.addEventListener('scroll', handleScroll); + + const glitchInterval = setInterval(() => { + if (!glitching) { + setGlitching(true); + setHoverIntensity(0.8); + setTimeout(() => { + setGlitching(false); + setHoverIntensity(0.5); + }, 350); + } + }, Math.random() * 6000 + 4000); + + // Set background mode based on time + document.body.classList.toggle('night-mode', !isDaytime); + const canvas = document.getElementById('particleCanvas'); const ctx = canvas.getContext('2d'); @@ -54,7 +115,10 @@ function Hero() { } draw() { - ctx.fillStyle = `rgba(${255 - (Math.random() * 255 / 2)}, 255, 255, ${this.opacity})`; + // Adjust particle colors based on day/night mode + const blueValue = isDaytime ? 255 : 200; + const redValue = isDaytime ? (255 - (Math.random() * 255 / 2)) : (100 + (Math.random() * 50)); + ctx.fillStyle = `rgba(${redValue}, ${isDaytime ? 255 : 160}, ${blueValue}, ${this.opacity})`; ctx.fillRect(this.x, this.y, 0.4, Math.random() * 2 + 1); } } @@ -91,14 +155,25 @@ function Hero() { initParticles(); animate(); - // Clean up event listener on component unmount + // Clean up event listener and intervals on component unmount return () => { window.removeEventListener('resize', onResize); + window.removeEventListener('scroll', handleScroll); + clearInterval(glitchInterval); + document.body.classList.remove('night-mode'); }; - }, []); + }, [glitching, showScrollIndicator]); + + // Function to scroll down to the next section + const scrollToNextSection = () => { + window.scrollTo({ + top: window.innerHeight, + behavior: 'smooth' + }); + }; return ( -
+
{/*

RAFA

@@ -131,21 +206,87 @@ function Hero() {
-
-

Introducing

+
+

{greeting}

-
-

HackFed

-

HackFed

+
+
+ + HackFed + +
+ {glitching && ( + <> +
+ + HackFed + +
+
+ + HackFed + +
+ + )}
-

The world's best Community,
+

+ The world's best Community,
Code, Inovate & Dominate

+
+ + {/* Minimalistic Scroll down indicator */} +
+
+ explore +
+
+
+ +
+
+
+ {/*
@@ -167,7 +308,6 @@ function Hero() {

At the core lies our revolutionary framework,
ensuring adaptability across all application architectures.

*/}
- ) } diff --git a/src/components/JoinUs.jsx b/src/components/JoinUs.jsx new file mode 100644 index 0000000..ed676b3 --- /dev/null +++ b/src/components/JoinUs.jsx @@ -0,0 +1,105 @@ +import React from 'react'; +import './Styles/Landing.css'; + +function JoinUs() { + // Email functionality could be added here + const contactEmail = "contact@hackfed.com"; + + return ( +
+ {/* Background subtle dots */} +
+ {[...Array(6)].map((_, i) => ( +
+ ))} +
+ +
+
+

+ Connect With Us +

+

+ Connect with fellow developers, innovators, and tech enthusiasts. +

+
+ + +
+
+ ); +} + +export default JoinUs; \ No newline at end of file diff --git a/src/components/MobileImage.jsx b/src/components/MobileImage.jsx new file mode 100644 index 0000000..c261267 --- /dev/null +++ b/src/components/MobileImage.jsx @@ -0,0 +1,70 @@ +import React, { useState, useEffect } from 'react'; + +const MobileImage = ({ src, alt, className = '' }) => { + const [isLoaded, setIsLoaded] = useState(false); + const [isInView, setIsInView] = useState(false); + const [imageSrc, setImageSrc] = useState(null); + + useEffect(() => { + // Create an intersection observer + const observer = new IntersectionObserver( + (entries) => { + entries.forEach((entry) => { + if (entry.isIntersecting) { + setIsInView(true); + // Load the image when it comes into view + const img = new Image(); + img.src = src; + img.onload = () => { + setImageSrc(src); + setIsLoaded(true); + }; + observer.unobserve(entry.target); + } + }); + }, + { + rootMargin: '50px', + threshold: 0.1, + } + ); + + // Start observing the placeholder + const placeholder = document.getElementById(`image-placeholder-${src}`); + if (placeholder) { + observer.observe(placeholder); + } + + return () => { + if (placeholder) { + observer.unobserve(placeholder); + } + }; + }, [src]); + + return ( +
+ {/* Placeholder with blur effect */} +
+ + {/* Actual image */} + {imageSrc && ( + {alt} + )} +
+ ); +}; + +export default MobileImage; \ No newline at end of file diff --git a/src/components/MobileInput.jsx b/src/components/MobileInput.jsx new file mode 100644 index 0000000..a329db8 --- /dev/null +++ b/src/components/MobileInput.jsx @@ -0,0 +1,171 @@ +import React, { useState, useRef, useEffect } from 'react'; + +const MobileInput = ({ + type = 'text', + label, + placeholder, + value, + onChange, + error, + required = false, + className = '', + validation = {}, + ...props +}) => { + const [isFocused, setIsFocused] = useState(false); + const [isValid, setIsValid] = useState(true); + const [validationMessage, setValidationMessage] = useState(''); + const inputRef = useRef(null); + + useEffect(() => { + validateInput(value); + }, [value]); + + const validateInput = (value) => { + if (required && !value) { + setIsValid(false); + setValidationMessage('This field is required'); + return; + } + + if (validation.pattern && !validation.pattern.test(value)) { + setIsValid(false); + setValidationMessage(validation.message || 'Invalid input'); + return; + } + + if (validation.minLength && value.length < validation.minLength) { + setIsValid(false); + setValidationMessage(`Minimum ${validation.minLength} characters required`); + return; + } + + setIsValid(true); + setValidationMessage(''); + }; + + const handleFocus = () => { + setIsFocused(true); + // Scroll input into view on mobile + if (inputRef.current) { + inputRef.current.scrollIntoView({ behavior: 'smooth', block: 'center' }); + } + }; + + const handleBlur = () => { + setIsFocused(false); + validateInput(value); + }; + + const handleChange = (e) => { + const newValue = e.target.value; + onChange(e); + validateInput(newValue); + }; + + const getInputType = () => { + switch (type) { + case 'email': + return 'email'; + case 'phone': + return 'tel'; + case 'password': + return 'password'; + default: + return 'text'; + } + }; + + return ( +
+ {/* Label */} + + + {/* Input */} + + + {/* Error Message */} + {(error || validationMessage) && ( +

+ {error || validationMessage} +

+ )} + + {/* Focus Indicator */} +
+ + {/* Validation Icon */} + {value && ( +
+ {isValid ? ( + + + + ) : ( + + + + )} +
+ )} + + {/* Character Count (if maxLength is set) */} + {props.maxLength && ( +
+ {value.length}/{props.maxLength} +
+ )} +
+ ); +}; + +export default MobileInput; \ No newline at end of file diff --git a/src/components/MobileNav.jsx b/src/components/MobileNav.jsx new file mode 100644 index 0000000..9afe31c --- /dev/null +++ b/src/components/MobileNav.jsx @@ -0,0 +1,189 @@ +import React, { useState, useEffect, useRef } from 'react'; +import { Link, useLocation } from 'react-router-dom'; + +const MobileNav = () => { + const [isOpen, setIsOpen] = useState(false); + const [scrollProgress, setScrollProgress] = useState(0); + const [showScrollIndicator, setShowScrollIndicator] = useState(true); + const [pullToRefresh, setPullToRefresh] = useState(0); + const [isRefreshing, setIsRefreshing] = useState(false); + const location = useLocation(); + const touchStartY = useRef(0); + const pullThreshold = 100; + + // Handle scroll progress + useEffect(() => { + const handleScroll = () => { + const scrollTop = window.scrollY; + const scrollHeight = document.documentElement.scrollHeight - window.innerHeight; + const progress = (scrollTop / scrollHeight) * 100; + setScrollProgress(progress); + setShowScrollIndicator(scrollTop < 100); + }; + + window.addEventListener('scroll', handleScroll); + return () => window.removeEventListener('scroll', handleScroll); + }, []); + + // Handle pull-to-refresh + const handleTouchStart = (e) => { + if (window.scrollY === 0) { + touchStartY.current = e.touches[0].clientY; + } + }; + + const handleTouchMove = (e) => { + if (window.scrollY === 0) { + const touchY = e.touches[0].clientY; + const pull = touchY - touchStartY.current; + if (pull > 0) { + setPullToRefresh(Math.min(pull, pullThreshold)); + } + } + }; + + const handleTouchEnd = () => { + if (pullToRefresh >= pullThreshold) { + setIsRefreshing(true); + // Simulate refresh + setTimeout(() => { + window.location.reload(); + }, 1000); + } + setPullToRefresh(0); + }; + + // Close menu on route change + useEffect(() => { + setIsOpen(false); + }, [location]); + + // Handle swipe gestures for menu + const handleSwipe = (e) => { + const touchX = e.touches[0].clientX; + const touchY = e.touches[0].clientY; + const startX = e.touches[0].clientX; + const startY = e.touches[0].clientY; + + const deltaX = touchX - startX; + const deltaY = touchY - startY; + + if (Math.abs(deltaX) > Math.abs(deltaY)) { + if (deltaX > 50 && !isOpen) { + setIsOpen(true); + } else if (deltaX < -50 && isOpen) { + setIsOpen(false); + } + } + }; + + return ( + <> + {/* Pull to refresh indicator */} +
0 ? 1 : 0 + }} + > + {isRefreshing && ( +
+ )} +
+ + {/* Mobile Menu Toggle Button */} + + + {/* Mobile Menu */} +
+ +
+ + {/* Scroll Progress Bar */} +
+
+
+ + {/* Touch Gesture Indicator */} + {showScrollIndicator && ( +
+
+
+
+
+ )} + + ); +}; + +export default MobileNav; \ No newline at end of file diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx index 586f524..6959eb5 100644 --- a/src/components/Navbar.jsx +++ b/src/components/Navbar.jsx @@ -1,37 +1,116 @@ +import { useState } from 'react'; +import { Link, useLocation } from 'react-router-dom'; +import hackfedLogo from '../assets/h1.png'; + function Navbar() { + const [isMenuOpen, setIsMenuOpen] = useState(false); + const location = useLocation(); + + const toggleMenu = () => { + setIsMenuOpen(!isMenuOpen); + }; + + const isActive = (path) => { + return location.pathname === path; + }; + return ( -
- -
) } diff --git a/src/components/PastEvents.jsx b/src/components/PastEvents.jsx index f8229e9..e206977 100644 --- a/src/components/PastEvents.jsx +++ b/src/components/PastEvents.jsx @@ -1,51 +1,52 @@ function PastEvents() { return ( -
-
-
-
-
-

Pitchfork Kickstarter Taxidermy

-
-
-

Whatever cardigan tote bag tumblr hexagon brooklyn asymmetrical gentrify, subway tile poke farm-to-table. Franzen you probably haven't heard of them man bun deep jianbing selfies heirloom prism food truck ugh squid celiac humblebrag.

+
+
+
+
+

Past Hackathons

+
-
-
-
- content -

SUBTITLE

-

Chichen Itza

-

Fingerstache flexitarian street art 8-bit waistcoat. Distillery hexagon disrupt edison bulbche.

-
+

+ Explore our previous hackathon events that brought together talented developers, designers, and innovators at Gautam Buddha University. +

+
+
+
+
+ 24-Hour Code Marathon +

WINTER 2023

+

24-Hour Code Marathon

+

A full-day non-stop coding challenge pushing participants to build complete projects within 24 hours.

-
-
- content -

SUBTITLE

-

Colosseum Roma

-

Fingerstache flexitarian street art 8-bit waistcoat. Distillery hexagon disrupt edison bulbche.

-
+
+
+
+ Glitch Hackathon +

FALL 2023

+

Glitch Hackathon

+

A creative coding challenge focused on experimental digital art and web experiences.

-
-
- content -

SUBTITLE

-

Great Pyramid of Giza

-

Fingerstache flexitarian street art 8-bit waistcoat. Distillery hexagon disrupt edison bulbche.

-
+
+
+
+ Entrepreneur Hackathon +

SPRING 2023

+

Entrepreneur Hackathon

+

A hackathon focused on building innovative startup solutions and business models.

-
-
- content -

SUBTITLE

-

San Francisco

-

Fingerstache flexitarian street art 8-bit waistcoat. Distillery hexagon disrupt edison bulbche.

-
+
+
+
+ HackFed Workshop Series +

SUMMER 2023

+

HackFed Workshop Series

+

A series of intensive technical workshops preparing students for hackathons through hands-on project development.

-
+
+
); } diff --git a/src/components/RegistrationModal.jsx b/src/components/RegistrationModal.jsx new file mode 100644 index 0000000..2a9422d --- /dev/null +++ b/src/components/RegistrationModal.jsx @@ -0,0 +1,374 @@ +import React, { useState } from 'react'; + +function RegistrationModal({ isOpen, onClose, eventTitle }) { + const [formData, setFormData] = useState({ + name: '', + email: '', + studentId: '', + phone: '', + course: '', + year: '', + skills: '', + expectation: '', + termsAccepted: false + }); + + const [step, setStep] = useState(1); + const [isSubmitting, setIsSubmitting] = useState(false); + const [isSuccess, setIsSuccess] = useState(false); + + const handleChange = (e) => { + const { name, value, type, checked } = e.target; + setFormData({ + ...formData, + [name]: type === 'checkbox' ? checked : value + }); + }; + + const handleSubmit = (e) => { + e.preventDefault(); + + // Validation + if (step === 1) { + if (!formData.name || !formData.email || !formData.studentId || !formData.phone) { + alert('Please fill all required fields'); + return; + } + setStep(2); + return; + } + + // For step 2 + if (!formData.termsAccepted) { + alert('Please accept the terms and conditions'); + return; + } + + // Submit the form + setIsSubmitting(true); + + // Simulate API call + setTimeout(() => { + setIsSubmitting(false); + setIsSuccess(true); + + // Reset after animation duration (5 seconds) + setTimeout(() => { + setIsSuccess(false); + onClose(); + setFormData({ + name: '', + email: '', + studentId: '', + phone: '', + course: '', + year: '', + skills: '', + expectation: '', + termsAccepted: false + }); + setStep(1); + }, 5000); + }, 1500); + }; + + if (!isOpen) return null; + + return ( +
+
+ +
+ {isSuccess ? ( +
+ {/* Background elements */} +
+
+ {[...Array(30)].map((_, i) => ( +
+ ))} +
+
+
+
+ + {/* Success checkmark animation */} +
+ + + + +
+ + {/* Success text */} +
+

Registration Successful!

+

+ You have successfully registered for {eventTitle}.
Check your email for confirmation. +

+
+ + {/* Confetti */} +
+ {[...Array(40)].map((_, i) => ( +
+ ))} +
+
+ ) : ( + <> +
+
+

Register for {eventTitle}

+ +
+
+ +
+ {step === 1 ? ( + <> +
+
+
+
+
+ Personal Info + Additional Details +
+
+ +
+
+ + +
+
+ + +
+
+ +
+
+ + +
+
+ + +
+
+ + ) : ( + <> +
+
+
+
+
+ Personal Info + Additional Details +
+
+ +
+
+ + +
+
+ + +
+
+ +
+ + +
+ +
+ + +
+ +
+
+ + +
+
+ + )} + +
+ {step === 2 && ( + + )} + +
+
+ + )} +
+
+ ); +} + +export default RegistrationModal; \ No newline at end of file diff --git a/src/components/Stats.jsx b/src/components/Stats.jsx index 5505d58..86573eb 100644 --- a/src/components/Stats.jsx +++ b/src/components/Stats.jsx @@ -1,40 +1,242 @@ +import { useState, useEffect, useRef } from 'react'; +import { motion } from 'framer-motion'; +import AnimatedList from './AnimatedList'; function Stats() { - return ( -
-
-
-
-
-

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 +

-
-
-
- team -
-

Holden Caulfield

-

UI Developer

-

DIY tote bag drinking vinegar cronut adaptogen squid fanny pack vaporware.

- - - - - - - - - - - - - - - - - -
+ +
+ {/* Team Member 1 */} +
+
+
+ Prof. Rajesh Kumar
-
-
-
- team -
-

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. +

-
-
- team -
-

Atticus Finch

-

UI Developer

-

DIY tote bag drinking vinegar cronut adaptogen squid fanny pack vaporware.

- - - - - - - - - - - - - - - - - + + {/* Team Member 2 */} +
+
+
+ Dr. Priya Sharma +
+
+

Dr. Priya Sharma

+

Technical Director

+ +

+ Leading technology innovation at GBU with expertise in AI and machine learning applications. +

-
-
- team -
-

Henry Letham

-

Designer

-

DIY tote bag drinking vinegar cronut adaptogen squid fanny pack vaporware.

- - - - - - - - - - - - - - - - - + + {/* Team Member 3 */} +
+
+
+ Amit Patel +
+
+

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

+
+
+
+
+ + + Learn More + + + +
-
- stats +
+
+
+ GBU Ignition Hackathon +
+
+ + 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. +

+ +
+ ) : ( +
+ {formStatus.error && ( +
+ {formStatus.error} +
+ )} + +
+
+ + +
+ +
+ + +
+
+ +
+ + +
+ +
+ + +

+ {formData.question.length}/500 characters +

+
+ +
+
+ +
+
+ +
+
+ +
+ +
+
+ )} +
+
+ + {/* FAQ Link Section */} +
+

Looking for quick answers?

+ + + + + Check our FAQ 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 +
+

Tech Events at GBU

+

Discover workshops, tech talks, and networking events hosted by HackFed

+
+
+ + {/* Main Content */} +
+ {/* Category Filter */} +
+ + + + +
+ + {/* Events Grid */} +
+ {filteredEvents.map((event) => ( +
+
+
+ {event.title} +
+ {event.date} +
+
+

{event.title}

+

{event.description}

+
+
+
+
+
+ + + +
+
+

{event.time}

+

{event.duration}

+
+
+ {event.status === 'registration-open' ? ( + + Registration Open + + ) : ( + + Coming Soon + + )} +
+
+
+
+ + + + +
+
+

{event.location}

+
+
+ {event.status === 'registration-open' ? ( + + ) : ( + + )} +
+
+ ))} +
+ + {/* 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() { +
)