Merge pull request #48 from DWE-CLOUD/main

Feat: Added Mobile Optimization & Gradient in apply now
Data-Science-Community-SRM · Sep 22, 2024 · c9c005f · c9c005f
2 parents 945157a + 4d82338
commit c9c005f
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 10 deletions.
diff --git a/client/src/components/home/domain-cards.tsx b/client/src/components/home/domain-cards.tsx
@@ -94,20 +94,32 @@ const Button: React.FC<{ onClick: () => void }> = ({ onClick }) => (
     <motion.button
         whileHover={{
             scale: 1.05,
-            boxShadow: '0px 0px 15px 5px rgba(128, 90, 213, 0.7)',
-            background: 'linear-gradient(135deg, #2A004C, #3B0764)'
+            boxShadow: '0px 0px 15px 5px rgba(173, 128, 255, 0.6)',
+            background: 'linear-gradient(135deg, rgba(100, 42, 139, 0.9), rgba(141, 64, 180, 0.9))',
+        }}
+        animate={{
+            background: [
+                'linear-gradient(135deg, rgba(140, 0, 255, 0.6), rgba(200, 100, 255, 0.6))',
+                'linear-gradient(135deg, rgba(173, 128, 255, 0.6), rgba(255, 150, 255, 0.6))',
+            ],
+        }}
+        transition={{
+            duration: 3,
+            ease: 'easeInOut',
+            repeat: Infinity,
+            repeatType: 'reverse',
         }}
         whileTap={{ scale: 0.95 }}
-        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"
+        className="relative 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-[#14002A] to-[#20003D] shadow-lg shadow-purple-900/60"
         onClick={onClick}
     >
         APPLY NOW
+        <div className="absolute inset-0 bg-gradient-to-r from-purple-500 to-indigo-400 opacity-30 rounded-md blur-md pointer-events-none"></div>
     </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
@@ -90,10 +90,9 @@ const Header: React.FC = () => {
     return (
         <header className="p-4 bg-[#1A0B2E] text-white relative z-10">
             <div className="flex justify-between items-center">
-                {/* Logo and Text */}
                 <div className="flex items-center cursor-pointer" onClick={navigateHome}>
                     <motion.div
-                        className="w-12 h-12 mr-4"
+                        className="w-10 h-10 mr-4"
                         initial={{opacity: 0, scale: 0.8}}
                         animate={{opacity: 1, scale: 1}}
                         transition={{duration: 0.8, delay: 0.1}}
@@ -129,12 +128,12 @@ const Header: React.FC = () => {
                 </div>
                 <motion.a
                     onClick={handleApplyNowClick}
-                    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-[#D16BA5] to-[#5D3FD3] hover:from-[#B44AC6] hover:to-[#3F26A5] transition-all duration-500 ease-out cursor-pointer overflow-hidden"
+                    className="relative sm:mx-2 px-5 py-2.5 text-sm 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 whitespace-nowrap"
                     whileHover={{scale: 1.1, transition: {duration: 0.1}}}
                     whileTap={{scale: 0.95}}
                 >
-                    <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-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>
@@ -145,6 +144,7 @@ const Header: React.FC = () => {
                     />
                 </motion.a>
 
+
             </div>
             <Lightbox
                 domain={selectedDomain}