Merge pull request #69 from bilalshaikh292/main

featues page styling

Author: Yash636261

client/src/Components/Auth/Feature.jsx

@@ -26,16 +26,16 @@ export default function Feature() {
       <section class="bg-white dark:bg-gray-900 ">
         <div class="container px-6 py-10 mx-auto features">
           <h1 class="text-3xl font-sans text-gray-800 capitalize lg:text-4xl dark:text-white">
-            explore our awesome
-            <span class="underline decoration-blue-500 mr-8">
-              {"           "}Features
+            explore our awesome {" "}
+            <span class="underline decoration-white text-underline dark:text-primary-400 underline-offset-[10px] r-8">
+              Features
             </span>
           </h1>
 
           <p class="mt-4 text-gray-500 xl:mt-6 dark:text-gray-300"></p>
 
           <div class="grid grid-cols-1 gap-8 mt-8 xl:mt-12 xl:gap-12 md:grid-cols-2 xl:grid-cols-3">
-            <div class="p-8 space-y-3 border-2 border-blue-400 dark:border-blue-300 rounded-xl transition duration-200 hover:scale-105">
+            <div class="p-8 space-y-3 border-2 border-blue-400 dark:border-blue-300 rounded-xl transition duration-200 hover:scale-105 hover:shadow-xl hover:shadow-blue-500/50">
               <span class="inline-block text-blue-500 dark:text-blue-400">
                 <svg
                   xmlns="http://www.w3.org/2000/svg"
@@ -73,7 +73,7 @@ export default function Feature() {
 
               <Link
                 to="/Login"
-                class="inline-flex p-2 text-blue-500 capitalize transition-colors  bg-blue-100 rounded-full dark:bg-blue-500 dark:text-white hover:bg-blue-700 "
+                class="inline-flex p-2 text-blue-500 capitalize transition-colors  bg-blue-100 rounded-full dark:bg-blue-500 dark:text-white hover:bg-blue-700  "
               >
                 <svg
                   xmlns="http://www.w3.org/2000/svg"
@@ -92,7 +92,7 @@ export default function Feature() {
               </Link>
             </div>
 
-            <div class="p-8 space-y-3 border-2 border-blue-400 dark:border-blue-300 rounded-xl transition duration-200 hover:scale-105">
+            <div class="p-8 space-y-3 border-2 border-blue-400 dark:border-blue-300 rounded-xl transition duration-200 hover:scale-105 hover:shadow-xl hover:shadow-blue-500/50">
               <span class="inline-block text-blue-500 dark:text-blue-400">
                 <svg
                   xmlns="http://www.w3.org/2000/svg"
@@ -141,7 +141,7 @@ export default function Feature() {
               </Link>
             </div>
 
-            <div class="p-8 space-y-3 border-2 border-blue-400 dark:border-blue-300 rounded-xl  transition duration-200 hover:scale-105">
+            <div class="p-8 space-y-3 border-2 border-blue-400 dark:border-blue-300 rounded-xl  transition duration-200 hover:scale-105 hover:shadow-xl hover:shadow-blue-500/50">
               <span class="inline-block text-blue-500 dark:text-blue-400">
                 <svg
                   xmlns="http://www.w3.org/2000/svg"

client/src/Pages/HomePage.jsx

@@ -108,7 +108,7 @@ export default function Homepage() {
       <section className="h-full text-center lg:text-left p-5 flex flex-col items-center" style={{ backgroundImage: 'linear-gradient(to bottom, #6b7280, #535a68, #3c4251, #262c3c, #111827)', }}>
         <div className="md:w-full text-2xl lg:text-3xl font-bold dark:text-white mb-5 lg:w-1/2 text-center">
           <span className="text-primary">
-            Subscribe to our <span className="dark:text-primary-400 inline">Newsletter</span>
+            Subscribe to our <span className="dark:text-blue-500 inline">Newsletter</span>
           </span>
         </div>
         <div className="flex flex-col lg:flex-row justify-between p-2 w-full">