tailwind cleanup

Author: TenzDelek

components/Buttons/BackToTopButton.tsx

@@ -42,15 +42,15 @@ const BackToTopButton: React.FC = () => {
   return isVisible ? (
     <button
       onClick={scrollToTop}
-      className="back-to-top-button fixed bottom-8 right-8 w-12 h-12 rounded-full border-none font-semibold flex items-center justify-center cursor-pointer overflow-hidden z-50 outline-none transition-all duration-300 ease-in-out transform hover:scale-95 active:scale-90"
+      className="group fixed bottom-8 right-8 w-12 h-12 rounded-full border-none font-semibold flex items-center justify-center cursor-pointer overflow-hidden z-50 outline-none transition-all duration-300 ease-in-out transform hover:scale-95 active:scale-90 bg-[rgb(20,20,20)] shadow-[0px_0px_0px_4px_rgba(180,160,255,0.253)] hover:w-[140px] hover:rounded-[50px] hover:bg-[rgb(181,160,255)]"
       aria-label="Back to top"
     >
       <Arrows
-        className="back-to-top-icon w-3 h-3 transition-all duration-300 ease-in-out"
+        className="w-3 h-3 transition-all duration-300 ease-in-out group-hover:-translate-y-[200%] group-hover:opacity-0"
         direction="up"
         fill="white"
       />
-      <span className="back-to-top-text absolute text-white text-xs opacity-0 whitespace-nowrap transition-all duration-300 ease-in-out">
+      <span className="absolute text-white text-xs opacity-0 whitespace-nowrap transition-all duration-300 ease-in-out group-hover:text-[13px] group-hover:opacity-100">
         Back to Top
       </span>
     </button>

components/Dropdown/dropdown.tsx

@@ -53,7 +53,7 @@ function Dropdown<T>({
       <div className="w-full">
         <button
           type="button"
-          className={`flex justify-between text-white p-4 w-full gap-x-1.5 shadow-sm card-bg hover:bg-gray-50 gradient-bg no-border rounded-md cursor-pointer`}
+          className={`flex justify-between text-white p-4 w-full gap-x-1.5 shadow-sm card-bg hover:bg-gray-50 gradient-bg border-none rounded-md cursor-pointer`}
           id="menu-button"
           aria-expanded={show}
           aria-haspopup="true"

styles/globals.css

@@ -16,7 +16,6 @@ body {
   background: #1b1130;
 }
 
-/* Social media icon tooltip */
 .social-wrapper .icon .tooltip {
   position: absolute;
   top: 0;
@@ -101,30 +100,13 @@ body {
   }
 }
 
-/* .container{
-  max-width: 1400px;
-} */
-
 @media (max-width: 992px) {
   .container {
     padding-left: 1rem;
     padding-right: 1rem;
   }
 }
 
-.slick-slide {
-  margin-left: 20px;
-  margin-right: 20px;
-}
-.slick-track {
-  display: flex !important;
-}
-
-.slick-dots {
-  position: relative !important;
-  bottom: 0 !important;
-}
-
 .gradient-bg {
   background-image: linear-gradient(
     225deg,
@@ -174,26 +156,7 @@ body {
   mix-blend-mode: normal;
 }
 
-.dropDown {
-  box-shadow:
-    0px 59px 100px rgba(0, 0, 0, 0.25),
-    0px 44px 94px rgba(0, 0, 0, 0.15);
-}
-
-.no-border {
-  border: none !important;
-}
-
-.header-bg {
-  background: linear-gradient(320deg, #2db4fd 10.35%, #410854 88.41%);
-}
-
 .card-bg {
-  /* background: linear-gradient(119.66deg, rgba(255, 255, 255, 0.18) 6.74%, rgba(255, 255, 255, 0.06) 98.36%);
-border: 2px solid rgba(255, 255, 255, 0.64); */
-  /* box-shadow: 0px 40px 20px rgba(0, 0, 0, 0.05);
-backdrop-filter: blur(10px); */
-  /* Note: backdrop-filter has minimal browser support */
   background-position: center;
   background-size: cover;
   background-color: rgba(228, 228, 228, 0.046);
@@ -210,7 +173,6 @@ backdrop-filter: blur(10px); */
   border: 2px solid rgba(255, 255, 255, 0.64);
   box-shadow: 0px 40px 20px rgba(0, 0, 0, 0.05);
   backdrop-filter: blur(10px);
-  /* Note: backdrop-filter has minimal browser support */
   border-radius: 8px;
 }
 
@@ -224,120 +186,3 @@ backdrop-filter: blur(10px); */
   backdrop-filter: blur(8.30696px);
   mix-blend-mode: lighten;
 }
-
-.color-effect {
-  position: absolute;
-  width: 100vw;
-  max-width: none;
-  
-  bottom: 500px;
-  will-change: transform;
-  transform: translate3d(0%, 9.9964%, 0px) scale3d(1, 1, 1) rotateX(0deg)
-    rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg);
-  transform-style: preserve-3d;
-  vertical-align: middle;
-  display: inline-block;
-  z-index: 0;
-}
-
-@media (max-width: 780px) {
-  .color-effect {
-    bottom: 900px;
-    opacity: 0.7;
-  }
-}
-
-/* title styles */
-.home-title span {
-  position: relative;
-  overflow: hidden;
-  display: block;
-  line-height: 1.2;
-}
-
-.home-title span::after {
-  content: '';
-  position: absolute;
-  top: 0;
-  right: 0;
-  width: 100%;
-  height: 100%;
-  background: #b31fe4;
-  animation: a-ltr-after 2s cubic-bezier(0.77, 0, 0.18, 1) forwards;
-  transform: translateX(-101%);
-}
-
-.home-title span::before {
-  content: '';
-  position: absolute;
-  color: white;
-  top: 0;
-  right: 0;
-  width: 100%;
-  height: 100%;
-  background: var(--bg-color);
-  animation: a-ltr-before 2s cubic-bezier(0.77, 0, 0.18, 1) forwards;
-  transform: translateX(0);
-}
-
-.home-title span:nth-of-type(1)::before,
-.home-title span:nth-of-type(1)::after {
-  animation-delay: 1s;
-}
-
-.home-title span:nth-of-type(2)::before,
-.home-title span:nth-of-type(2)::after {
-  animation-delay: 1.5s;
-}
-
-@keyframes a-ltr-after {
-  0% {
-    transform: translateX(-100%);
-  }
-  100% {
-    transform: translateX(101%);
-  }
-}
-
-@keyframes a-ltr-before {
-  0% {
-    transform: translateX(0);
-  }
-  100% {
-    transform: translateX(200%);
-  }
-}
-
-.hoverEffect {
-  transition: transform 0.3s ease-in-out; /* Add a smooth transition effect */
-}
-
-.card-opacity:hover {
-  opacity: 100;
-}
-
-.hoverEffect:hover {
-  transform: scale(1.1); /* Scale the image by 10% on hover */
-}
-
-/* Back to Top Button Styles - Custom animations not handled by Tailwind */
-.back-to-top-button {
-  background-color: rgb(20, 20, 20);
-  box-shadow: 0px 0px 0px 4px rgba(180, 160, 255, 0.253);
-}
-
-.back-to-top-button:hover {
-  width: 140px;
-  border-radius: 50px;
-  background-color: rgb(181, 160, 255);
-}
-
-.back-to-top-button:hover .back-to-top-icon {
-  transform: translateY(-200%);
-  opacity: 0;
-}
-
-.back-to-top-button:hover .back-to-top-text {
-  font-size: 13px;
-  opacity: 1;
-}