Homepage update (#2663)

# Description

Please provide a summary of the changes, including relevant motivation
and context.

Closes #(issue_number)

## Checklist

- [ ] I have read the [Contribution
Guidelines](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/CONTRIBUTING.md)
- [ ] I have performed a self-review of my own code
- [ ] I have attached images of the change if it is UI based
- [ ] I have commented my code, particularly in hard-to-understand areas
- [ ] If my code has heavily changed functionality I have updated
relevant docs on [Stirling-PDFs doc
repo](https://github.com/Stirling-Tools/Stirling-Tools.github.io/blob/main/docs/)
- [ ] My changes generate no new warnings
- [ ] I have read the section [Add New Translation
Tags](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/HowToAddNewLanguage.md#add-new-translation-tags)
(for new translation tags only)

---------

Co-authored-by: Reece Browne <reece@stirling.pdf>

src/main/resources/static/css/home.css

@@ -36,101 +36,6 @@
   border: 0.1rem solid transparent;
 }
 
-.features-container {
-  display: flex;
-  flex-direction: column;
-  gap: 30px;
-}
-
-.feature-group {
-  display: flex;
-  flex-direction: column;
-}
-
-.feature-group-header {
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  color: var(--md-sys-color-on-surface);
-  margin-bottom: 15px;
-  user-select: none;
-  cursor: pointer;
-  gap: 10px;
-}
-
-.feature-group-container {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(15rem, 3fr));
-  gap: 30px 30px;
-  overflow: hidden;
-  margin: -20px;
-  padding: 20px;
-  box-sizing:content-box;
-}
-
-.feature-group-container.animated-group {
-  transition: 0.5s all;
-}
-
-.feature-group.collapsed>.feature-group-container {
-  max-height: 0 !important;
-  margin: 0;
-  padding: 0;
-}
-
-.header-expand-button {
-  transition: 0.5s all;
-  transform: rotate(90deg);
-}
-
-.header-expand-button.collapsed {
-  transform: rotate(0deg);
-}
-
-.feature-card {
-  border: 1px solid var(--md-sys-color-surface-5);
-  border-radius: 1.75rem;
-  padding: 1.25rem;
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  background: var(--md-sys-color-surface-5);
-  transition:
-    transform 0.3s,
-    border 0.3s;
-  transform-origin: center center;
-  outline: 0px solid transparent;
-}
-
-.feature-card a {
-  text-decoration: none;
-  color: var(--md-sys-color-on-surface);
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-}
-
-.feature-card .card-text {
-  font-size: .875rem;
-}
-
-.feature-card:hover {
-  cursor: pointer;
-  transform: scale(1.08);
-  box-shadow: var(--md-sys-elevation-2);
-}
-
-.card-title.text-primary {
-  color: #000;
-}
-
-.home-card-icon {
-  width: 3rem;
-  height: 3rem;
-  transform: translateY(-5px);
-}
-
 .favorite-icon {
   display: none;
   position: absolute;
@@ -147,16 +52,6 @@
   margin: 0.0rem 0 0 1.25rem;
 }
 
-.card-title {
-  margin-bottom: 1rem;
-  font-size: 1.1rem;
-}
-
-/* Only show the favorite icons when the parent card is being hovered over */
-.feature-card:hover .favorite-icon {
-  display: block;
-}
-
 .favorite-icon img {
   filter: brightness(0) invert(var(--md-theme-filter-color));
 }
@@ -195,34 +90,21 @@
   animation: 2s infinite Pulse steps(20);
 }
 
-@keyframes Pulse {
-  from {
-    opacity: 0;
-  }
+.newfeature{
+  min-width:12rem;
+}
+.recent-features{
+  display: flex;
+  flex-direction: row;
+  max-width: 100%;
+  overflow: hidden;
+  justify-content: center;
 
-  50% {
-    opacity: 1;
-  }
-
-  to {
-    opacity: 0;
-  }
 }
 
-.update-notice {
-  animation: scale 1s infinite alternate;
+ .close-icon {
+  color: var(--favourite-remove) !important;
 }
-
-@keyframes scale {
-  0% {
-    transform: scale(0.96);
-  }
-
-  100% {
-    transform: scale(1);
-  }
-}
-
-.hidden {
-  visibility: hidden;
+ .add-icon {
+  color: var(--favourite-add) !important;
 }