Skip to content

Commit

Permalink
Merge pull request #42 from DWE-CLOUD/main
Browse files Browse the repository at this point in the history 
Feat: Fixed apply now and Added Logic
  • Loading branch information
@DWE-CLOUD
DWE-CLOUD authored Sep 21, 2024
2 parents 0eeea0e + 7ade9ea commit 78664b3
Show file tree
Hide file tree
Showing 4 changed files with 202 additions and 63 deletions.
47 changes: 33 additions & 14 deletions client/src/components/domains/lightbox.tsx
View file
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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 = {
Expand All @@ -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 ${
Expand All @@ -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}
/>

Expand All @@ -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">
Expand All @@ -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()}`)
Expand All @@ -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}
Expand All @@ -131,6 +149,7 @@ const Lightbox: React.FC<LightboxProps> = ({
</div>
</motion.div>
</motion.div>

);
};

Expand Down
69 changes: 48 additions & 21 deletions client/src/components/domainsections/domain.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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={() => {
Expand All @@ -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>
Expand All @@ -69,7 +96,7 @@ export default function Domain({ imgSrc, altText, sections }: DomainProps) {
</motion.div>
))}
</div>
<Footer/>
<Footer />
</div>
);
}
}
16 changes: 12 additions & 4 deletions client/src/components/home/domain-cards.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand All @@ -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);
Expand Down
Loading

0 comments on commit 78664b3

Please sign in to comment.