From 7ade9eae450842feeb01822e8883dcac2003955e Mon Sep 17 00:00:00 2001
From: DWE-CLOUD <85799123+DWE-CLOUD@users.noreply.github.com>
Date: Sun, 22 Sep 2024 00:07:26 +0530
Subject: [PATCH] Feat: Fixed apply now and Added Logic

---
 client/src/components/domains/lightbox.tsx    |  47 +++++--
 .../src/components/domainsections/domain.tsx  |  69 ++++++---
 client/src/components/home/domain-cards.tsx   |  16 ++-
 client/src/components/home/header.tsx         | 133 ++++++++++++++----
 4 files changed, 202 insertions(+), 63 deletions(-)

diff --git a/client/src/components/domains/lightbox.tsx b/client/src/components/domains/lightbox.tsx
index 39e3c08..50a1005 100644
--- a/client/src/components/domains/lightbox.tsx
+++ b/client/src/components/domains/lightbox.tsx
@@ -1,5 +1,5 @@
 "use client";
-import React, { memo } from 'react';
+import React, { memo, useEffect } from 'react';
 import { motion, AnimatePresence } from 'framer-motion';
 import Image from 'next/image';
 import { AiOutlineClose } from 'react-icons/ai';
@@ -26,6 +26,24 @@ const Lightbox: React.FC<LightboxProps> = ({
                                                showForm,
                                                setShowForm,
                                            }) => {
+
+    useEffect(() => {
+        if (domain) {
+            const currentPath = window.location.pathname.toLowerCase();
+            const domainTitle = domain.title.toLowerCase();
+
+            // Only for use using the debug timings
+            console.log("Current Path: ", currentPath);
+            console.log("Domain Title: ", domainTitle);
+
+
+            if (currentPath.includes(domainTitle)) {
+                console.log(`Path matches domain ${domain.title}, showing form.`);
+                setShowForm(true);
+            }
+        }
+    }, [domain, setShowForm]);
+
     if (!domain) return null;
 
     const containerVariants = {
@@ -42,12 +60,12 @@ const Lightbox: React.FC<LightboxProps> = ({
 
     return (
         <motion.div
-            className="fixed inset-0 z-30 flex items-center justify-center bg-black bg-opacity-70"
+            className="fixed inset-0 z-[1001] flex items-center justify-center bg-black bg-opacity-70"
             variants={containerVariants}
             initial="initial"
             animate="animate"
             exit="exit"
-            transition={{ duration: 0.4, ease: 'easeInOut' }}
+            transition={{duration: 0.4, ease: 'easeInOut'}}
         >
             <motion.div
                 className={`relative bg-gradient-to-br from-purple-950 to-purple-900 rounded-lg shadow-lg w-[90vw] max-w-lg ${
@@ -57,10 +75,10 @@ const Lightbox: React.FC<LightboxProps> = ({
                 animate="animate"
                 exit="exit"
                 layout
-                transition={{ layout: { duration: 0.6, ease: 'easeInOut' } }}
+                transition={{layout: {duration: 0.6, ease: 'easeInOut'}}}
             >
                 <AiOutlineClose
-                    className="absolute top-4 right-4 text-white cursor-pointer text-2xl" // Increased icon size here
+                    className="absolute top-4 right-4 text-white cursor-pointer text-2xl"
                     onClick={onClose}
                 />
 
@@ -74,7 +92,7 @@ const Lightbox: React.FC<LightboxProps> = ({
                 <h2 className="text-white text-xl font-semibold mb-2">
                     {domain.title}
                 </h2>
-                <p className="text-purple-300 text-sm mb-4 px-6">{domain.description}</p> {/* Added padding (px-6) here */}
+                <p className="text-purple-300 text-sm mb-4 px-6">{domain.description}</p>
 
                 <div className="flex justify-center items-center gap-4 p-4">
                     <AnimatePresence mode="wait">
@@ -85,21 +103,21 @@ const Lightbox: React.FC<LightboxProps> = ({
                                 animate="animate"
                                 exit="exit"
                                 variants={contentVariants}
-                                transition={{ duration: 0.4, ease: 'easeOut' }}
+                                transition={{duration: 0.4, ease: 'easeOut'}}
                                 className="flex space-x-4"
-                                style={{ minHeight: "35px" }}
+                                style={{minHeight: "35px"}}
                             >
                                 <motion.button
-                                    whileHover={{ scale: 1.05 }}
-                                    whileTap={{ scale: 0.95 }}
+                                    whileHover={{scale: 1.05}}
+                                    whileTap={{scale: 0.95}}
                                     className="bg-purple-900 text-white py-1 px-3 rounded-md text-sm"
                                     onClick={() => setShowForm(true)}
                                 >
                                     APPLY
                                 </motion.button>
                                 <motion.button
-                                    whileHover={{ scale: 1.05 }}
-                                    whileTap={{ scale: 0.95 }}
+                                    whileHover={{scale: 1.05}}
+                                    whileTap={{scale: 0.95}}
                                     className="bg-purple-800 text-white py-1 px-3 rounded-md text-sm"
                                     onClick={() =>
                                         (window.location.href = `/${domain.title.toLowerCase()}`)
@@ -115,9 +133,9 @@ const Lightbox: React.FC<LightboxProps> = ({
                                 animate="animate"
                                 exit="exit"
                                 variants={contentVariants}
-                                transition={{ duration: 0.4, ease: 'easeOut' }}
+                                transition={{duration: 0.4, ease: 'easeOut'}}
                                 className="w-full"
-                                style={{ minHeight: "50vh" }}
+                                style={{minHeight: "50vh"}}
                             >
                                 <Form
                                     includeGithub={true}
@@ -131,6 +149,7 @@ const Lightbox: React.FC<LightboxProps> = ({
                 </div>
             </motion.div>
         </motion.div>
+
     );
 };
 
diff --git a/client/src/components/domainsections/domain.tsx b/client/src/components/domainsections/domain.tsx
index d80ad38..5846652 100644
--- a/client/src/components/domainsections/domain.tsx
+++ b/client/src/components/domainsections/domain.tsx
@@ -11,31 +11,59 @@ type DomainProps = {
     sections: { heading: string; content: string }[];
 };
 
-export default function Domain({ imgSrc, altText, sections }: DomainProps) {
+export default function Domain({ imgSrc, sections }: DomainProps) {
     const [hasAnimated, setHasAnimated] = useState(false);
 
+    const iconVariants = {
+        initial: { opacity: 0, x: -50, y: -50, rotate: 0 },
+        animate: {
+            opacity: 1,
+            x: 0,
+            y: 0,
+            rotate: [0, 10, -10, 0],
+            transition: {
+                type: "spring",
+                stiffness: 200,
+                damping: 10,
+                duration: 1,
+                ease: "easeInOut",
+                repeat: Infinity,
+                repeatType: "mirror" as "mirror", //eslint-disable-line @typescript-eslint/prefer-as-const
+            },
+        },
+    };
+
     return (
-        <div className="min-h-screen bg-[#11071F]  relative">
-            <Header />
-            <div className="p-6 flex flex-col gap-10 xl:gap-16 relative z-20">
-                <motion.div
-                    className="absolute z-10 w-60 lg:w-96"
-                    initial={{ opacity: 0, y: -50 }}
-                    animate={{ opacity: 1, y: 0 }}
-                    transition={{ duration: 0.8, ease: "easeOut" }}
-                >
-                    <Image
-                        src={imgSrc}
-                        alt={altText}
-                        width={500}
-                        height={500}
-                    />
-                </motion.div>
+        <div className="min-h-screen bg-[#11071F] relative">
+            <motion.div
+                initial="initial"
+                animate="animate"
+                variants={iconVariants}
+                className="absolute top-4 left-4"
+            >
+                <Image
+                    src="/path/to/your/icon.svg"
+                    alt="Icon"
+                    width={50}
+                    height={50}
+                    className="h-12 w-12"
+                />
+            </motion.div>
 
+            <Header />
+            <div
+                className="p-6 flex flex-col gap-10 xl:gap-16 relative pt-24"
+                style={{
+                    backgroundImage: `url(${imgSrc})`,
+                    backgroundRepeat: "no-repeat",
+                    backgroundPosition: "left center",
+                    backgroundSize: "20% auto",
+                }}
+            >
                 {sections.map((section, index) => (
                     <motion.div
                         key={index}
-                        className="z-50 flex flex-col items-center justify-center text-center mt-24"
+                        className="flex flex-col items-center justify-center text-center"
                         initial={{ opacity: 0, y: 50 }}
                         animate={hasAnimated ? { opacity: 1, y: 0 } : {}}
                         onViewportEnter={() => {
@@ -60,7 +88,6 @@ export default function Domain({ imgSrc, altText, sections }: DomainProps) {
                                     animate={{ opacity: 1 }}
                                     transition={{ duration: 0.5, delay: lineIndex * 0.1 }}
                                 >
-                                
                                     {line}
                                     <br />
                                 </motion.div>
@@ -69,7 +96,7 @@ export default function Domain({ imgSrc, altText, sections }: DomainProps) {
                     </motion.div>
                 ))}
             </div>
-            <Footer/>
+            <Footer />
         </div>
     );
-}
+}
\ No newline at end of file
diff --git a/client/src/components/home/domain-cards.tsx b/client/src/components/home/domain-cards.tsx
index c4f83ef..bb5a8da 100644
--- a/client/src/components/home/domain-cards.tsx
+++ b/client/src/components/home/domain-cards.tsx
@@ -76,10 +76,10 @@ const DomainCard: React.FC<DomainCardProps> = ({
             <div className="absolute inset-0 rounded-full bg-white opacity-10 blur-md"></div>
         </motion.div>
         <div className="text-center sm:text-left flex flex-col sm:block">
-            <h3 className="text-white text-lg sm:text-xl font-semibold">
+            <h3 className="text-white text-lg sm:text-xl font-semibold mb-1">
                 {domain.title}
             </h3>
-            <p className="text-purple-300 text-xs sm:text-sm">
+            <p className="text-purple-300 text-xs sm:text-sm mt-1">
                 {domain.description}
             </p>
             <div className="sm:mt-4">
@@ -89,17 +89,25 @@ const DomainCard: React.FC<DomainCardProps> = ({
     </motion.div>
 );
 
+
 const Button: React.FC<{ onClick: () => void }> = ({ onClick }) => (
     <motion.button
-        whileHover={{ scale: 1.05, backgroundColor: '#3B0764' }}
+        whileHover={{
+            scale: 1.05,
+            boxShadow: '0px 0px 15px 5px rgba(128, 90, 213, 0.7)',
+            background: 'linear-gradient(135deg, #2A004C, #3B0764)'
+        }}
         whileTap={{ scale: 0.95 }}
-        className="mt-2 sm:mt-4 px-3 sm:px-4 py-1 sm:py-2 bg-purple-900 text-white rounded-md text-xs sm:text-sm transition-colors duration-300"
+        className="mt-2 sm:mt-4 px-3 sm:px-4 py-1 sm:py-2 text-white rounded-md text-xs sm:text-sm transition-all duration-500
+                   bg-gradient-to-br from-[#1A0033] to-[#2B0054] shadow-lg shadow-purple-900/40"
         onClick={onClick}
     >
         APPLY NOW
     </motion.button>
 );
 
+
+
 const DomainsComponent = () => {
     const [selectedDomain, setSelectedDomain] = useState<Domain | null>(null);
     const [showForm, setShowForm] = useState(false);
diff --git a/client/src/components/home/header.tsx b/client/src/components/home/header.tsx
index 2802a5b..1adbc3e 100644
--- a/client/src/components/home/header.tsx
+++ b/client/src/components/home/header.tsx
@@ -1,8 +1,51 @@
 "use client";
-import React from 'react';
+import React, { useState } from 'react';
 import Image from 'next/image';
 import Logo from './colour.svg';
 import { motion } from 'framer-motion';
+import Lightbox from '@/components/domains/lightbox';
+//import DomainsComponent from './domain-cards';
+interface Domain {
+    title: string;
+    description: string;
+    image: string;
+    gradient: string;
+    subdomains: string[];
+}
+
+
+const domains: Domain[] = [
+    {
+        title: 'Technical',
+        description: 'Level Up Your Skills, Unlock New Worlds',
+        image: '/1.png',
+        gradient: 'from-purple-900 to-purple-800',
+        subdomains: ['Ai/ML', 'App Dev', 'Web Dev'],
+    },
+    {
+        title: 'Research',
+        description:
+            "It's about seeing what everybody else has seen and thinking what nobody else has thought",
+        image: '/2.png',
+        gradient: 'from-fuchsia-900 to-fuchsia-800',
+        subdomains: ['Research'],
+    },
+    {
+        title: 'Creatives',
+        description: 'Everything you can imagine is real',
+        image: '/3.png',
+        gradient: 'from-pink-900 to-pink-800',
+        subdomains: ['UI/UX', 'Photography', 'VFX'],
+    },
+    {
+        title: 'Corporate',
+        description:
+            'Master the game of business with strategy, connections, and vision',
+        image: '/4.png',
+        gradient: 'from-blue-900 to-blue-800',
+        subdomains: ['Content', 'PR & Events', 'Sponsorship'],
+    },
+];
 
 const Header: React.FC = () => {
     const scrollToDomain = () => {
@@ -13,7 +56,35 @@ const Header: React.FC = () => {
     };
 
     const navigateHome = () => {
-        window.location.href = '/';  // N
+        window.location.href = '/';
+    };
+
+    const [selectedDomain, setSelectedDomain] = useState<Domain | null>(null);
+
+    const handleApplyNowClick = () => {
+        const currentPath = window.location.pathname;
+        if (currentPath === '/technical' || currentPath === '/creatives' || currentPath === '/research'|| currentPath === '/corporate') {
+            let domain: Domain | undefined;
+            if (currentPath === '/technical') {
+                domain = domains.find((d) => d.title === 'Technical');
+            } else if (currentPath === '/creatives') {
+                domain = domains.find((d) => d.title === 'Creatives');
+            } else if (currentPath === '/research') {
+                domain = domains.find((d) => d.title === 'Research');
+            }else if (currentPath === '/corporate') {
+                domain = domains.find((d) => d.title === 'Corporate');
+            }
+
+            if (domain) {
+                setSelectedDomain(domain);
+            }
+        } else {
+            scrollToDomain();
+        }
+    };
+
+    const closeLightbox = () => {
+        setSelectedDomain(null);
     };
 
     return (
@@ -23,53 +94,67 @@ const Header: React.FC = () => {
                 <div className="flex items-center cursor-pointer" onClick={navigateHome}>
                     <motion.div
                         className="w-12 h-12 mr-4"
-                        initial={{ opacity: 0, scale: 0.8 }}
-                        animate={{ opacity: 1, scale: 1 }}
-                        transition={{ duration: 0.8, delay: 0.1 }}
+                        initial={{opacity: 0, scale: 0.8}}
+                        animate={{opacity: 1, scale: 1}}
+                        transition={{duration: 0.8, delay: 0.1}}
                     >
-                        <Image src={Logo} alt="Logo" layout="responsive" width={48} height={48} />
+                        <Image src={Logo} alt="Logo" layout="responsive" width={48} height={48}/>
                     </motion.div>
                     <motion.div
                         className="text-xl font-bold"
-                        initial={{ opacity: 0, y: -20 }}
-                        animate={{ opacity: 1, y: 0 }}
-                        transition={{ duration: 0.8, delay: 0.2 }}
+                        initial={{opacity: 0, y: -20}}
+                        animate={{opacity: 1, y: 0}}
+                        transition={{duration: 0.8, delay: 0.2}}
                     >
                         <span className="text-white">Data </span>
                         <motion.span
                             className="text-[#8B55E9]"
-                            initial={{ opacity: 0, x: -10 }}
-                            animate={{ opacity: 1, x: 0 }}
-                            transition={{ duration: 0.8, delay: 0.4 }}
+                            initial={{opacity: 0, x: -10}}
+                            animate={{opacity: 1, x: 0}}
+                            transition={{duration: 0.8, delay: 0.4}}
                         >
                             Science
                         </motion.span>
-                        <br />
+                        <br/>
                         Community{" "}
                         <motion.span
                             className="text-[#8B55E9]"
-                            initial={{ opacity: 0, x: 10 }}
-                            animate={{ opacity: 1, x: 0 }}
-                            transition={{ duration: 0.8, delay: 0.6 }}
+                            initial={{opacity: 0, x: 10}}
+                            animate={{opacity: 1, x: 0}}
+                            transition={{duration: 0.8, delay: 0.6}}
                         >
                             SRM
                         </motion.span>
                     </motion.div>
                 </div>
-
-                {/* Enhanced "Apply Now" Button */}
                 <motion.a
-                    onClick={scrollToDomain}
-                    className="relative sm:mx-2 px-6 py-3 text-md md:text-lg lg:text-xl rounded-full font-semibold text-white bg-gradient-to-r from-[#652D90] to-[#43187E] hover:shadow-xl hover:shadow-[#A774FF]/70 transition-all duration-300 ease-out cursor-pointer"
-                    whileHover={{ scale: 1.1, transition: { duration: 0.3 } }}
-                    whileTap={{ scale: 0.95 }}
+                    onClick={handleApplyNowClick}
+                    className="relative sm:mx-2 px-8 py-3 text-md md:text-lg lg:text-xl rounded-full font-semibold text-white bg-gradient-to-r from-[#D16BA5] to-[#5D3FD3] hover:from-[#B44AC6] hover:to-[#3F26A5] transition-all duration-500 ease-out cursor-pointer overflow-hidden"
+                    whileHover={{scale: 1.1, transition: {duration: 0.1}}}
+                    whileTap={{scale: 0.95}}
                 >
-                    <span className="absolute inset-0 bg-gradient-to-r from-[#4B226D] to-[#2C1355] rounded-full opacity-80 blur-lg"></span>
+                    <span
+                        className="absolute inset-0 bg-gradient-to-r from-white/20 to-white/5 opacity-0 group-hover:opacity-100 transition-opacity duration-1000 ease-in-out blur-sm animate-shimmer"></span>
+                    <span
+                        className="absolute inset-0 bg-gradient-to-r from-[#AA42D4] to-[#5B2EC1] rounded-full opacity-60 blur-xl"></span>
                     <span className="relative z-10">Apply Now</span>
+                    <motion.div
+                        className="absolute inset-0 rounded-full bg-purple-500 opacity-20 blur-xl"
+                        animate={{scale: [1, 1.15], opacity: [0.8, 0]}}
+                        transition={{repeat: Infinity, duration: 2, ease: "easeInOut"}}
+                    />
                 </motion.a>
+
             </div>
+            <Lightbox
+                domain={selectedDomain}
+                onClose={closeLightbox}
+                showForm={true}
+                setShowForm={() => {
+                }}
+            />
         </header>
     );
 };
 
-export default Header;
+export default Header;
\ No newline at end of file