Merge pull request #2 from shubhamhehe/main

changes

Author: Zenith1415

frontend/src/components/About.tsx

@@ -97,7 +97,8 @@ export default function About() {
         }
 
         .animate-in .about-title {
-          animation: slideInFromTop 0.8s ease-out forwards;
+          animation: slideInFromTop 0.8s ease-out forwards,
+            glowPulse 2s ease-in-out infinite 1s;
         }
         .animate-in .about-image-left {
           animation: slideInFromLeft 1s ease-out forwards;
@@ -167,40 +168,73 @@ export default function About() {
           100% {
             transform: translateY(0);
           }
-        }
+        } 
       `}</style>
 
       <section ref={sectionRef} className="relative -mb-32 bg-black text-white" id="about">
-        <div ref={addToImagesRef} className="about-image-left absolute left-0 top-4 hidden lg:block">
-          <Image src="/images/net.jpg" alt="Spiderweb" width={240} height={280} className="opacity-60" />
+        <div
+          ref={addToImagesRef}
+          className="about-image-left absolute left-0 top-4 block"
+        >
+          <Image
+            src="/images/net.jpg"
+            alt="Spiderweb"
+            width={240}
+            height={280}
+            className="opacity-60 w-28 sm:w-40 md:w-52 lg:w-60 h-auto object-contain"
+          />
         </div>
-        <div ref={addToImagesRef} className="about-image-top absolute left-1/2 -translate-x-1/2 top-0 hidden lg:block">
-          <Image src="/images/Vector.png" alt="vector" width={520} height={120} />
+
+        <div
+          ref={addToImagesRef}
+          className="about-image-top absolute left-1/2 -translate-x-1/2 top-0 block"
+        >
+          <Image
+            src="/images/Vector.png"
+            alt="Vector"
+            width={520}
+            height={120}
+            className="w-40 sm:w-64 md:w-80 lg:w-[520px] h-auto object-contain"
+          />
         </div>
-        <div ref={addToImagesRef} className="about-image-right absolute right-0 top-80 -translate-y-1/2 transform hidden lg:block">
-          <Image src="/images/skeleton.png" alt="Skeleton" width={296} height={600} className="mt-[10rem] opacity-80" />
+
+        <div
+          ref={addToImagesRef}
+          className="about-image-right absolute right-0 top-60 sm:top-72 md:top-80 transform block"
+        >
+          <Image
+            src="/images/skeleton.png"
+            alt="Skeleton"
+            width={296}
+            height={600}
+            className="opacity-80 mt-20 w-28 sm:w-40 md:w-52 lg:w-[296px] h-auto object-contain"
+          />
         </div>
 
-        <div className="container mx-auto px-4 sm:px-6 lg:px-8 py-20 sm:py-28 lg:py-40">
-          <div className="mb-20 lg:mb-32">
-            <h2 className="font-jolly about-title text-center text-[#ff0500] text-4xl sm:text-5xl lg:text-6xl mb-6">
+
+       <div className="container mx-auto px-4 sm:px-6 md:px-8 lg:px-12 py-12 sm:py-20 md:py-28 lg:py-40">
+          <div className="mb-12 sm:mb-16 md:mb-20 lg:mb-32">
+            <h2 
+            className="font-jolly about-title text-center text-[#ff0500] text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl mb-6">
               About Genesis
             </h2>
-            <div ref={contentRef} className="about-content max-w-6xl mx-auto text-center">
-              <p className="font-poppins text-white mb-4 text-base sm:text-lg">
-                GENESIS Is Much More Than Just A Team, It&apos;s A Close-Knit Family. With A Diverse Group Of 50 Individuals,
-                Each Bringing Their Own Set Of Skills And Experiences, The Connections They Share Go Far Beyond The
-                Typical Work Relationship. From Managers To Supervisors To Executives, Everyone Comes Together With A
-                Shared Vision And A Collective Purpose. GENESIS Is Built On Four Major Pillars: Technical, Sports,
-                Cultural, And Social. But These Aren&apos;t Just Categories Or Labels, But Also &mdash; They&apos;re A Reflection Of The
-                Unique Passions And Interests That Each Team Member Brings.
+
+            <div ref={contentRef} className="about-content max-w-4xl sm:max-w-5xl md:max-w-6xl mx-auto text-center px-2 sm:px-4">
+              <p className="font-poppins text-white mb-4 text-xs sm:text-sm md:text-base lg:text-lg">
+                GENESIS is much more than just a team, it&apos;s a close-knit family. With a diverse group of 50 individuals,
+                each bringing their own set of skills and experiences, the connections they share go far beyond the
+                typical work relationship. From managers to supervisors to executives, everyone comes together with a
+                shared vision and a collective purpose. GENESIS is built on four major pillars: technical, sports,
+                cultural, and social. But these aren&apos;t just categories or labels, but also &mdash; they&apos;re a reflection of the
+                unique passions and interests that each team member brings.
               </p>
-              <p className="font-poppins text-white text-base sm:text-lg">
-                Some Are Creative Minds With A Knack For Design, Others Are Passionate Athletes, And Some Are Tech
-                Experts. There Are Also Those Who Are Deeply Committed To Making A Social Impact. What Truly Makes GENESIS
-                Stand Out, However, Is The Emotional Connection They Create With The People They Serve. Through Events
-                Like Cultural Festivals That Unite Different Groups And Sports Activities That Promote Camaraderie And
-                Healthy Competition, GENESIS Fosters A Strong Sense Of Community Among Students, Faculty, And Beyond.
+
+              <p className="font-poppins text-white text-xs sm:text-sm md:text-base lg:text-lg">
+                Some are creative minds with a knack for design, others are passionate athletes, and some are tech
+                experts. There are also those who are deeply committed to making a social impact. What truly makes GENESIS
+                stand out, however, is the emotional connection they create with the people they serve. Through events
+                like cultural festivals that unite different groups and sports activities that promote camaraderie and
+                healthy competition, GENESIS fosters a strong sense of community among students, faculty, and beyond.
               </p>
             </div>
           </div>
@@ -293,20 +327,20 @@ export function AboutHackman() {
         <div className="relative py-10 sm:py-12 lg:py-16">
           <div
             ref={addToImagesRef}
-            className="absolute top-1/2 left-0 -translate-y-1/2 transform hidden lg:block left-bat"
+            className="absolute top-1/2 left-0 -translate-y-1/2 transform left-bat"
           >
             <Image src="/images/left_bat.png" alt="Bats" width={400} height={200} />
           </div>
           <div
             ref={addToImagesRef}
-            className="absolute top-1/2 right-0 -translate-y-1/2 transform hidden lg:block right-bat"
+            className="absolute top-1/2 right-0 -translate-y-1/2 transform right-bat"
           >
             <Image src="/images/right_bat.png" alt="Bats" width={400} height={200} />
           </div>
 
           <div className="container mx-auto px-4 text-center" ref={contentRef}>
-            <h2 className="font-jolly about-title text-[#ff0500] text-4xl sm:text-5xl lg:text-6xl mb-10">
-              About Hackman V8.0
+            <h2 className="font-jolly about-title text-[#ff0500] text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl mb-10">
+              About Hackman V8
             </h2>
 
             <div
@@ -322,10 +356,10 @@ export function AboutHackman() {
               </h1>
 
               <p className="font-poppins text-[#747474] text-sm sm:text-base mb-6 leading-relaxed">
-                Our Grand Ritual, Hackman 2025, Rises From The Shadows As A 36-Hour Haunted Hackathon, Where
-                Restless Minds Gather To Code, Create, And Conquer The Dark. Guided By The Wisdom Of The
-                Masters Of The Craft, Participants Will Battle Sleepless Nights, Conjure Groundbreaking
-                Ideas, And Fight For Wicked Prizes, Swag, And Eerie Goodies &mdash; Only The Brave Will Survive!
+                Our Grand Ritual, Hackman 2025, rises from the shadows as a 36-Hour Haunted Hackathon, where
+                restless minds gather to code, create, and conquer the dark. Guided by the wisdom of the
+                masters of the craft, participants will battle sleepless nights, conjure groundbreaking
+                ideas, and fight for wicked prizes, swag, and eerie goodies &mdash; only the brave will survive!
               </p>
               <button className="bg-[#fe772d] hover:bg-orange-600 text-xl sm:text-2xl lg:text-3xl text-gray-900 font-jolly font-bold py-2 sm:py-3 px-8 sm:px-12 lg:px-[4rem] rounded-[1rem] sm:rounded-[1.5rem] transition-colors duration-300">
                 View Details

frontend/src/components/Contact.tsx

@@ -3,7 +3,7 @@
 import React, { useEffect, useRef, useState } from 'react';
 import { Jolly_Lodger, Poppins } from "next/font/google";
 import Image from "next/image";
-import { toast } from 'react-hot-toast'; 
+import { Toaster, toast } from 'react-hot-toast'; // 
 
 const jollyLodger = Jolly_Lodger({ weight: "400", subsets: ["latin"] });
 const poppins = Poppins({ weight: "400", subsets: ["latin"] });
@@ -30,13 +30,11 @@ export default function Contact() {
     e.preventDefault();
 
     if (!formData.name || !formData.email || !formData.message) {
-      toast.dismiss(); // Clear any existing toasts
       toast.error("Please fill out all fields.");
       return;
     }
 
     setIsSubmitting(true);
-    toast.dismiss(); // Clear any existing toasts before starting
 
     const submitPromise = fetch('/api/contact', {
       method: 'POST',
@@ -100,6 +98,19 @@ export default function Contact() {
 
   return (
     <>
+      <Toaster
+        position="top-center"
+        reverseOrder={false}
+        toastOptions={{
+          style: {
+            border: '1px solid #FF0700',
+            padding: '16px',
+            color: '#FFFFFF',
+            background: 'rgba(0,0,0,0.9)'
+          },
+        }}
+      />
+
       <style jsx global>{`
         /* --- Styles for browser autofill fix --- */
         input:-webkit-autofill,
@@ -132,7 +143,7 @@ export default function Contact() {
         </div>
 
         <div ref={contentRef} className="relative z-10 flex flex-col items-center max-w-[700px] mx-auto justify-start pt-10 md:pt-20 px-4 pb-10">
-          <h2 className={`${jollyLodger.className} text-[#FF0000] text-5xl md:text-7xl lg:text-8xl text-center mb-8 md:mb-12`}>
+          <h2 className={`${jollyLodger.className} text-[#FF0000] text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl text-center mb-8 md:mb-12`}>
             Contact Us
           </h2>
           <form
@@ -142,15 +153,22 @@ export default function Contact() {
             <input type="text" name="name" placeholder="Your Name" value={formData.name} onChange={handleChange} className="w-full p-3 md:p-4 bg-[#121212] rounded-lg focus:outline-none focus:ring-2 focus:ring-red-500 transition-all duration-300 placeholder-gray-500" />
             <input type="email" name="email" placeholder="Your Email Id" value={formData.email} onChange={handleChange} className="w-full p-3 md:p-4 bg-[#121212] rounded-lg focus:outline-none focus:ring-2 focus:ring-red-500 transition-all duration-300 placeholder-gray-500" />
             <textarea name="message" placeholder="Message" rows={4} value={formData.message} onChange={handleChange} className="w-full p-3 md:p-4 bg-[#121212] rounded-lg focus:outline-none focus:ring-2 focus:ring-red-500 transition-all duration-300 placeholder-gray-500 resize-none" />
-            <button type="submit" disabled={isSubmitting} className={`${jollyLodger.className} w-full md:w-[45%] mx-auto block bg-gradient-to-r from-[#FF0500] to-[#FE772D] text-white font-bold rounded-xl text-xl md:text-2xl py-4 md:py-5 transform transition-all duration-300 hover:scale-105 hover:shadow-2xl hover:shadow-orange-500/50 disabled:opacity-50 disabled:scale-100 disabled:cursor-not-allowed uppercase tracking-wider relative overflow-hidden group`} >
-              <span className="relative z-10">{isSubmitting ? "Sending..." : "Send Message"}</span>
-              <span className="absolute inset-0 bg-gradient-to-r from-[#FE772D] to-[#FF0500] transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
+            <button type="submit" disabled={isSubmitting} className={`${jollyLodger.className} w-full md:w-[40%] mx-auto block bg-[#FE772D] text-gray-800 rounded-xl text-xl md:text-2xl py-3 md:py-4 transform transition-all duration-300 hover:scale-105 hover:bg-[#E5691F] hover:shadow-xl disabled:opacity-50 disabled:scale-100 disabled:cursor-not-allowed`} >
+              {isSubmitting ? "Sending..." : "Send Message"}
             </button>
           </form>
         </div>
 
         <footer ref={addToElementsRef} className="relative w-full h-[150px] md:h-[500px] z-20 flex flex-col justify-center items-center text-center" style={{ backgroundColor: 'rgba(0,0,0,0.1)', backgroundImage: "url('/grass.png')", backgroundSize: 'cover', backgroundPosition: 'bottom center', backgroundRepeat: 'no-repeat' }}>
-          <Image src="/genesis-2k25-logo.png" alt="Genesis 2025 Logo" width={188} height={188} className="mb-4 md:mb-6 mt-8 md:mt-50 w-[125px] md:w-[188px] h-auto filter brightness-75" />
+          <Image src="/genesis-2k25-logo.png" alt="Genesis 2025 Logo" width={150} height={150} className="mb-4 md:mb-6 mt-8 md:mt-50 w-[100px] md:w-[150px] h-auto filter brightness-75" />
+          <nav className={`${poppins.className} flex flex-wrap justify-center space-x-4 md:space-x-8 text-gray-300 text-xs md:text-sm`}>
+            <a href="#hero" className="hover:text-red-500 transition-colors duration-220">Home</a>
+            <a href="#events" className="hover:text-red-500 transition-colors duration-220">Events</a>
+            <a href="#sponsors" className="hover:text-red-500 transition-colors duration-220">Sponsors</a>
+            <a href="#leads" className="hover:text-red-500 transition-colors duration-220">Leads</a>
+            <a href="#gallery" className="hover:text-red-500 transition-colors duration-220">Gallery</a>
+            <a href="#members" className="hover:text-red-500 transition-colors duration-220">Members</a>
+          </nav>
           <p className="w-full text-center text-xs text-[#555555] py-2 md:mt-5">
             Made With <span className="text-red-500">❤️</span> By Genesis. All Rights Reserved.
           </p>

frontend/src/components/FAQ.tsx

@@ -2,7 +2,10 @@
 
 import React, { useState, useRef, useEffect } from 'react';
 import Image from 'next/image';
+import { Jolly_Lodger, Poppins } from "next/font/google";
 import styles from '../styles/FAQ.module.css';
+const jollyLodger = Jolly_Lodger({ weight: "400", subsets: ["latin"] });
+const poppins = Poppins({ weight: "400", subsets: ["latin"] });
 
 interface FAQItemProps {
   question: string;
@@ -87,7 +90,10 @@ const FAQ: React.FC = () => {
           50% { transform: translateY(-20px); }
           100% { transform: translateY(0); }
         }
-
+        .animate-in .faq-title {
+          animation: slideInFromTop 0.8s ease-out forwards,
+            glowPulse 2s ease-in-out infinite 1s;
+        }
         .floatingSkull {
           animation: floatUpDown 2s ease-in-out infinite;
         }
@@ -103,7 +109,11 @@ const FAQ: React.FC = () => {
         />
 
         <div className={styles.faqContent}>
-          <h2 className={styles.faqTitle}>Frequently Asked Questions</h2>
+          {/* <h2 className={`${jollyLodger.className} text-[#FF0000] text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl text-center mb-8 md:mb-12`}> */}
+          {/* <h2 className={`${styles.faqTitle} text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl faq-title text-center mb-6`}> */}
+          <h2 className={styles.faqTitle}>
+            Frequently Asked Questions
+          </h2>
           <div className={styles.faqContainer}>
             {faqData.map((item, index) => (
               <FAQItem key={item.id} index={index} question={item.question} answer={item.answer} />

frontend/src/components/Gallery.tsx

@@ -50,7 +50,7 @@ export default function Gallery() {
           if (entry.isIntersecting) {
             entry.target.classList.add("animate-in");
             imagesRef.current.forEach((img, index) => {
-              if (img) img.style.animationDelay = `${0.01 + index * 0.08}s`;
+              if (img) img.style.animationDelay = `${0.01 + index * 0.03}s`;
             });
           } else {
             entry.target.classList.remove("animate-in");
@@ -161,7 +161,7 @@ export default function Gallery() {
 
       <div className="container mx-auto px-4">
         <h2
-          className={`${jolly.className} gallery-title text-[#FF0700] text-[72px] text-center mb-12`}
+          className={`${jolly.className} gallery-title text-[#FF0700] text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl text-center mb-12`}
         >
           Gallery
         </h2>