Added services to services section & added a cool hover selected effect to each card

css/service_card.css

@@ -12,6 +12,26 @@
     width: clamp(300px, 50vw, 350px);
     height: 420px;
 }
+.service-card-container:nth-child(1) .service-card-icon {
+    background-color: #4ADB61;
+    filter: drop-shadow(0px 15px 30px #4ADB61);
+}
+.service-card-container:nth-child(2) .service-card-icon {
+    background-color: #FF2D59;
+    filter: drop-shadow(0px 15px 30px #FF2D59);
+}
+.service-card-container:nth-child(3) .service-card-icon {
+    background-color: #2776EA;
+    filter: drop-shadow(0px 15px 30px #2776EA);
+}
+.service-card-container:nth-child(4) .service-card-icon {
+    background-color: #FFCC00;
+    filter: drop-shadow(0px 15px 30px #FFCC00);
+}
+.service-card-container:nth-child(5) .service-card-icon {
+    background-color: #FF6800;
+    filter: drop-shadow(0px 15px 30px #FF6800);
+}
 
 .service-card-icon {
     width: 75px;
@@ -51,33 +71,35 @@
     align-items: center;
 
 }
-.service-card-container-selected {
+.service-card-container:hover {
-    display: flex;
-    flex-direction: column;
-    justify-content: space-evenly;
-    align-items: center;
-
-    padding: 10px;
-    border-radius: 20px;
-    box-shadow: -10px 30px 70px rgba(219, 222, 225, 0.4);
     background-color: #4C40F7;
-
+    transition-duration: 0.5s;
-    width: 60vw;
-    height: 420px;
 }
+.service-card-container:hover .service-card-icon {
+    background-color: white;
+    filter: none;
+    box-shadow: none;
+    color: #4C40F7;
+    transition-duration: 0.5s;
+}
+.service-card-container:hover .service-card-title {
+    color: white;
+    transition-duration: 0.5s;
+}
+.service-card-container:hover .service-card-description {
+    color: white;
+    transition-duration: 0.5s;
+}
+.service-card-container:hover .service-card-button {
+    transition-duration: 0.5s;
+    background-color: #F3F4F6;
+}
+
+
 .service-card-icon-selected {
-    width: 75px;
-    height: 75px;
-    border-radius: 100%;
     background-color: white;
     color: #4C40F7;
     filter: drop-shadow(0px 15px 30px #17134a);
-
-    display: flex;
-    justify-content: center;
-    align-items: center;
-
-    font-size: 24px;
 }
 .service-card-title-selected {
     font-family: Poppins;
@@ -107,8 +129,8 @@
 
 @media only screen and (min-width: 750px) {
     .service-card-container {
-        width: 23vw;
+        width: clamp(270px, 24vw, 380px);
-        height: 400px;
+        height: clamp(360px, 33vw, 450px);
     }
 
 }

css/services.css

@@ -34,6 +34,6 @@
         flex-flow: row wrap;
         justify-content: center;
         align-items: center;
-        gap: 10px;
+        gap: 15px;
     }
 }

src/components/service_card.rs

@@ -35,7 +35,7 @@ pub fn service_card(props: &ServiceCardProps) -> Html {
     } else {
         html! {
             <div class={"service-card-container"}>
-                <div class={"service-card-icon"} style={format!("background-color: {}; filter: drop-shadow(0px 15px 30px {});", props.hexcolor.clone(), props.hexcolor.clone())}>
+                <div class={"service-card-icon"}>
                     //Icon
                     <i class={props.iconclass.clone()}></i>
                 </div>