-
-
- Benefits Of Membership
-- Join our club and unlock a world of opportunities to grow personally - and professionally. -
-
+
+ {/* Animated Background Elements */}
+
+
+
+
+
);
};
-export default BenefitsSection;
+export default BenefitsSection;
\ No newline at end of file
diff --git a/src/components/EventsSection.jsx b/src/components/EventsSection.jsx
index 447d2f5..9c49c1b 100644
--- a/src/components/EventsSection.jsx
+++ b/src/components/EventsSection.jsx
@@ -1,10 +1,89 @@
"use client";
-import React from "react";
+import React, { useState, useEffect } from "react";
import Link from "next/link";
-import EventCard from "./EventCard";
-import { ArrowRightIcon } from "lucide-react";
+import { ArrowRight } from "lucide-react";
+
+const EventCard = ({ title, description, image, index }) => {
+ const [isVisible, setIsVisible] = useState(false);
+
+ useEffect(() => {
+ const timer = setTimeout(() => {
+ setIsVisible(true);
+ }, index * 200);
+
+ return () => clearTimeout(timer);
+ }, [index]);
+
+ return (
+
-
+ {[...Array(4)].map((_, i) => (
+
+
+ {/* Grid Pattern Overlay with Animation */}
+
+ {/* Enhanced Header */}
+
+
+
+ Benefits
+ {" "}
+
+ Of
+ {" "}
+
+ Membership
+
+
+
+
+ Join our club and unlock a world of{" "}
+
+ opportunities
+ {" "}
+ to grow personally and professionally.
+
+
+ {/* Decorative Elements */}
+
+
+ {/* Enhanced Cards Grid */}
+
+
+
+
-
+
+ {[...Array(5)].map((_, i) => (
+
+
{benefits.map((benefit, index) => (
-
-
+
- Learn more about our membership{' '}
-
+ Learn more about our membership
+
+ {/* Animated Background Glow */}
+
+
+ {/* Animated Border Gradient */}
+
+
+ {/* Image Container with Overlay Effects */}
+
+ );
+};
const EventsSection = () => {
+ const [headerVisible, setHeaderVisible] = useState(false);
+
+ useEffect(() => {
+ const timer = setTimeout(() => {
+ setHeaderVisible(true);
+ }, 100);
+
+ return () => clearTimeout(timer);
+ }, []);
+
const events = [
{
title: "Campus Navigation App",
@@ -30,36 +109,127 @@ const EventsSection = () => {
];
return (
-
+ 
+
+ {/* Animated Overlay */}
+
+
+ {/* Floating Particles on Hover */}
+
+
+ {/* Content with Enhanced Typography */}
+
+ {[...Array(3)].map((_, i) => (
+
+ ))}
+
+
+
+
+ {/* Corner Accent */}
+
+ + {title} +
++ {description} +
+ + {/* Animated Underline */} + +
-
- Our Upcoming Events -
-- Explore some of the innovative projects and events our members are working on. -
-
+
+ {/* Animated Background Elements */}
+
);
};
-export default EventsSection;
+export default EventsSection;
\ No newline at end of file
diff --git a/src/components/Hero.jsx b/src/components/Hero.jsx
index cdc4111..3ec3c89 100644
--- a/src/components/Hero.jsx
+++ b/src/components/Hero.jsx
@@ -1,179 +1,132 @@
"use client";
import React from "react";
-import Image from "next/image";
import Link from "next/link";
-const Hero = ({
- logoLink = "/ms_club_logo_light.png",
- title = "MS CLUB OF SLIIT",
- paragraph = "A MLSA driven student community aiming to bridge the skill gap between an Undergraduate and an Industry Professional.",
- button1Text = "Join the Club",
- button1Link = "/join-us",
- button2Text = "Explore Events",
- button2Link = "/events",
- showSecondButton = true,
-}) => {
+const images = [
+ { src: "https://i.postimg.cc/8cWZ58yK/image.png", size: "w-28 h-28", position: "top-0 left-4" },
+ { src: "https://i.postimg.cc/rsFYfZgQ/image.png", size: "w-36 h-36", position: "top-20 left-28" },
+ { src: "https://i.postimg.cc/44Mwj1fL/image.png", size: "w-24 h-24", position: "top-52 left-4" },
+ { src: "https://i.postimg.cc/G2TTDGWt/image.png", size: "w-40 h-40", position: "top-1 right-0" },
+ { src: "https://i.postimg.cc/dVD5fSdx/image.png", size: "w-32 h-32", position: "top-44 right-10" },
+ { src: "https://i.postimg.cc/dVD5fSdx/image.png", size: "w-28 h-28", position: "bottom-4 left-20" },
+ { src: "https://i.postimg.cc/1XzTMRK8/image.png", size: "w-36 h-36", position: "bottom-10 right-24" },
+ { src: "https://i.postimg.cc/rstH7nvT/image.png", size: "w-24 h-24", position: "bottom-2 right-2" },
+ { src: "https://i.postimg.cc/8cWZ58yK/image.png", size: "w-32 h-32", position: "top-1/2 left-1/3" },
+ { src: "https://i.postimg.cc/rsFYfZgQ/image.png", size: "w-28 h-28", position: "top-1/2 right-1/4" },
+ { src: "https://i.postimg.cc/1XzTMRK8/image.png", size: "w-40 h-40", position: "top-2 left-[41%]" },
+ { src: "https://i.postimg.cc/rstH7nvT/image.png", size: "w-20 h-20", position: "bottom-2 right-1/2" },
+ { src: "https://i.postimg.cc/rstH7nvT/image.png", size: "w-28 h-28", position: "top-36 right-[40%]" },
+];
+
+const colorSquares = [
+ { color: "bg-green-500", size: "w-6 h-6", position: "top-4 left-1", delay: "delay-0" },
+ { color: "bg-orange-500", size: "w-6 h-6", position: "top-52 left-6", delay: "delay-1000" },
+ { color: "bg-yellow-400", size: "w-6 h-6", position: "bottom-4 right-4", delay: "delay-500" },
+ { color: "bg-yellow-400", size: "w-6 h-6", position: "top-1/2 right-6", delay: "delay-1500" },
+ { color: "bg-blue-500", size: "w-4 h-4", position: "top-16 left-16", delay: "delay-750" },
+ { color: "bg-purple-500", size: "w-5 h-5", position: "bottom-32 left-8", delay: "delay-1250" },
+ { color: "bg-pink-500", size: "w-4 h-4", position: "top-72 right-12", delay: "delay-300" },
+ { color: "bg-indigo-500", size: "w-6 h-6", position: "bottom-16 right-20", delay: "delay-1750" },
+];
+
+const Hero = () => {
return (
-
- {/* Animated Background Elements */}
-
+
+
+
+
+
+
+ {/* Enhanced Header with Staggered Animations */}
+
+
+
+
+
+ {/* Enhanced Cards Grid */}
+ + Our{" "} + + Upcoming + {" "} + + Events + + +
+ ++ Explore some of the{" "} + + innovative projects + {" "} + and events our members are working on. +
+ + {/* Decorative Elements */} +
+
+
+
+
+
+
+
{events.map((event, index) => (
+
+ {/* Enhanced CTA Button */}
- View All Projects
-
- {/* Simple Floating Dots */}
- {[...Array(15)].map((_, i) => (
-
- ))}
-
- {/* Static Gradient Orbs */}
-
-
+
+ {/* Top Corner Round Spotlight Effect */}
+
+ {/* Main spotlight circle */}
+
+ {/* Inner bright core */}
+
+ {/* Intense center */}
+
+
{/* Left Text Content */}
-
-
-
-
+ - {title} -
-
+
- {/* Logo */}
- + MS CLUB OF SLIIT +
- {paragraph} + A MLSA driven student community aiming to bridge the skill gap between an Undergraduate and an Industry Professional.
-
-
+
+
+
+
-
- {showSecondButton && (
-
-
-
- )}
-
-
+ {/* Background Image with Dark Overlay */}
+
+ );
+};
+
+export default Hero;
diff --git a/src/components/HeroNew.jsx b/src/components/HeroNew.jsx
new file mode 100644
index 0000000..4d5e556
--- /dev/null
+++ b/src/components/HeroNew.jsx
@@ -0,0 +1,237 @@
+"use client";
+
+import React, { useState, useEffect } from "react";
+import Link from "next/link";
+
+const selectedImages = [
+ { src: "https://i.postimg.cc/8cWZ58yK/image.png", alt: "MS Club Workshop" },
+ { src: "https://i.postimg.cc/rsFYfZgQ/image.png", alt: "Tech Event" },
+ { src: "https://i.postimg.cc/G2TTDGWt/image.png", alt: "Community Meeting" },
+ { src: "https://i.postimg.cc/1XzTMRK8/image.png", alt: "Innovation Session" },
+ { src: "https://i.postimg.cc/rstH7nvT/image.png", alt: "Student Collaboration" },
+];
+
+const Hero = () => {
+ const [currentImageIndex, setCurrentImageIndex] = useState(0);
+ const [isVisible, setIsVisible] = useState(false);
+
+ useEffect(() => {
+ setIsVisible(true);
+ const interval = setInterval(() => {
+ setCurrentImageIndex((prev) => (prev + 1) % selectedImages.length);
+ }, 4000);
+ return () => clearInterval(interval);
+ }, []);
+
+ return (
+
+ {/* Subtle Background Elements */}
+
+ );
+};
+
+export default Hero;
\ No newline at end of file
diff --git a/src/components/HistorySection.jsx b/src/components/HistorySection.jsx
index badf5da..9e95eec 100644
--- a/src/components/HistorySection.jsx
+++ b/src/components/HistorySection.jsx
@@ -3,17 +3,123 @@ import React from "react";
const HistorySection = () => {
return (
-
-
- {/* Darker light blue circle highlight */}
-
-
- {/* Logo with up-and-down animation */}
-
-
-
);
};
-export default Hero;
+export default Hero;
\ No newline at end of file
diff --git a/src/components/Hero2026.jsx b/src/components/Hero2026.jsx
new file mode 100644
index 0000000..7cf182c
--- /dev/null
+++ b/src/components/Hero2026.jsx
@@ -0,0 +1,217 @@
+"use client";
+
+import React, { useState, useEffect } from "react";
+
+const selectedImages = [
+ { src: "https://i.postimg.cc/8cWZ58yK/image.png", alt: "MS Club Workshop" },
+ { src: "https://i.postimg.cc/rsFYfZgQ/image.png", alt: "Tech Event" },
+ { src: "https://i.postimg.cc/G2TTDGWt/image.png", alt: "Community Meeting" },
+ { src: "https://i.postimg.cc/1XzTMRK8/image.png", alt: "Innovation Session" },
+ {
+ src: "https://i.postimg.cc/rstH7nvT/image.png",
+ alt: "Student Collaboration",
+ },
+];
+
+const Hero = () => {
+ const [currentImageIndex, setCurrentImageIndex] = useState(0);
+
+ useEffect(() => {
+ const interval = setInterval(() => {
+ setCurrentImageIndex((prev) => (prev + 1) % selectedImages.length);
+ }, 4000);
+ return () => clearInterval(interval);
+ }, []);
+
+ return (
+
-
+ {/* Right Image Collage */}
+
+ {images.map((img, i) => (
+
-
+ 
+
+ ))}
- {/* Floating decorative elements */}
-
-
-
-
+ {selectedImages.map((image, index) => (
+
+
+
+ 
+
+
+ ))}
+
+
+
+ {/* Bottom Indicator Dots */}
+
+ {/* Left Content */}
+
+
+
+
+ {/* Right - Floating Image Card */}
+
+
+ MS CLUB OF
+
+
+
+
+
+ MS CLUB OF
+
+ SLIIT
+
+
+ + A MLSA driven student community aiming to bridge the skill gap + between an Undergraduate and an Industry Professional. +
+
+
+
+
+
+
+
+
+
+ {/* Floating Element 1 - Bottom Left */}
+
+
+ {selectedImages.map((image, index) => (
+
+
+ {/* Floating Element 2 - Top Right */}
+
+
+
+ ))}
+
+ {selectedImages.map((image, index) => (
+
+
+
+
+ ))}
+
+ {selectedImages.map((_, index) => (
+
+
+
+
+
+
+
+
+
+ {/* Grid Pattern Overlay */}
+
+
+
+
+
+
+
+
+
+
+ {/* Content Section */}
+
+
+
+
+ {/* Hero-Appropriate Image Showcase */}
+
+ {/* Badge */}
+
+ MS CLUB
+
+
+ {/* Description */}
+
+
+ {/* Action Buttons */}
+
+
+ Microsoft Learn Student Ambassador Community
+
+
+ {/* Main Heading */}
+
+ MS CLUB
+
+
+ OF SLIIT
+
+
+
+ {/* Description */}
+ + Bridging the gap between academic learning and industry expertise through + collaborative innovation, skill development, and professional growth. +
+
+
+
+
+
+
+
+
+
+
+ {/* Stats */}
+
+
+
+
+ 500+
+ Active Members
+
+
+ 50+
+ Events Hosted
+
+
+ 10+
+ Industry Partners
+
+
+
+
+ {/* Main Image with Elegant Framing */}
+
+
+ {/* Decorative frame elements */}
+
+
+
+ {/* Image container */}
+
+
+ {/* Subtle floating accent elements */}
+
+
+
+ {/* Minimal geometric accents */}
+
+
+
+ {selectedImages.map((image, index) => (
+
+
+ {/* Minimal navigation dots */}
+
+
+
+
+ {/* Subtle overlay with image title */}
+
+ ))}
+
+
+
+
+ {image.alt}
+
+ {selectedImages.map((_, index) => (
+
+
-
- Our Journey
+
- Our Journey
+
+ {/* Animated Background Elements */}
+
+ {/* Floating Orbs */}
+
+
+
+
+ {/* Grid Pattern */}
+
+
+
+
+ {/* Subtle Gradient Overlay */}
+
+
+ {/* Animated Lines */}
+
+
+
+
+ {/* Floating Particles */}
+
+ {[...Array(6)].map((_, i) => (
+
+ ))}
+
+
+
+ {/* Animated Title */}
+
+ Our{" "}
+
+ Journey
+
-
- Since 2018, the Microsoft Student Club has been a catalyst for student growth—helping aspiring technologists explore innovation, sharpen their skills, and build lasting connections that extend far beyond graduation.
-
+
+ {/* Enhanced Description with Hover Effects */}
+
+
+ Since{" "}
+
+ 2018
+
+
+ , the Microsoft Student Club has been a{" "}
+
+ catalyst
+ {" "}
+ for student growth—helping aspiring technologists explore innovation, sharpen their skills, and build lasting connections that extend far beyond graduation.
+
+
+ {/* Subtle glow effect behind text */}
+
+
+
+ {/* Timeline Indicator */}
+
+
+
+
+ 2018 - Present
+
+
+
+
+
+
);
};
-export default HistorySection;
+export default HistorySection;
\ No newline at end of file
diff --git a/src/components/JoinSection.jsx b/src/components/JoinSection.jsx
index 67c1e89..83ea2c0 100644
--- a/src/components/JoinSection.jsx
+++ b/src/components/JoinSection.jsx
@@ -2,6 +2,7 @@
import React from "react";
import { CheckIcon } from "lucide-react";
+import { motion } from "framer-motion";
const JoinSection = () => {
const benefits = [
@@ -10,72 +11,218 @@ const JoinSection = () => {
"Exclusive access to resources and opportunities",
];
+ const containerVariants = {
+ hidden: { opacity: 0 },
+ visible: {
+ opacity: 1,
+ transition: {
+ staggerChildren: 0.2,
+ delayChildren: 0.3
+ }
+ }
+ };
+
+ const itemVariants = {
+ hidden: {
+ opacity: 0,
+ x: -20
+ },
+ visible: {
+ opacity: 1,
+ x: 0,
+ transition: {
+ type: "spring",
+ duration: 0.8
+ }
+ }
+ };
+
+ const formFieldVariants = {
+ hidden: {
+ opacity: 0,
+ y: 20
+ },
+ visible: i => ({
+ opacity: 1,
+ y: 0,
+ transition: {
+ type: "spring",
+ delay: i * 0.1,
+ duration: 0.6
+ }
+ })
+ };
+
return (
-
-
+ {/* Animated background elements */}
+ Ready to join our tech community?
-
+
+
+ Ready to join our tech community?
+
+
Becoming a member is free and get access to exclusive workshops,
networking opportunities, and resources to boost your tech career.
-
-
+
+
{benefits.map((benefit, index) => (
- -
-
+
+
{benefit}
-
+
))}
-
-
+
+
{/* Right Section (Form) */}
-
-
- Apply to Join
+
+
+ {/* Form glow effect */}
+
+ Apply to Join
+
+
- Join the Club
-
+ Join the Club
+
-
-
+
+
-
+
);
};
+ {/* Floating Orbs */}
+
+
+
+
+ {/* Grid Pattern */}
+
+
+ {/* Floating Particles */}
+
+
+
+
+ {/* Subtle Gradient Overlay */}
+
+
+ {/* Animated Lines */}
+
+
+
+ {[...Array(6)].map((_, i) => (
+
+ ))}
+
+
+
+ {/* Animated Title */}
+
+
+
+ Our{" "} + + Journey +
-- Since 2018, the Microsoft Student Club has been a catalyst for student growth—helping aspiring technologists explore innovation, sharpen their skills, and build lasting connections that extend far beyond graduation. -
+ + {/* Enhanced Description with Hover Effects */} +
+
+
+ {/* Timeline Indicator */}
+ + Since{" "} + + 2018 + + + , the Microsoft Student Club has been a{" "} + + catalyst + {" "} + for student growth—helping aspiring technologists explore innovation, sharpen their skills, and build lasting connections that extend far beyond graduation. +
+ + {/* Subtle glow effect behind text */} + +
+
+
+
+
+ 2018 - Present
+
+
+
+ {/* Animated background elements */}
+
{/* Left Section */}
-
-
+
);
};
-
+
+
{/* Right Section (Form) */}
- Ready to join our tech community?
-
+
-
+
+
-
-
+ + + {benefit} -+
+
))}
-
-
+
+
-
+
+ {/* Form glow effect */}
+
+ Apply to Join
+
+
- Join the Club
-
+ Join the Club
+
-
-