woot

Author: Alexia Michelle

src/components/HomepageFeatures/index.js

@@ -37,7 +37,7 @@ const FeatureList = [
 
 function Feature({ Svg, title, description }) {
   return (
-    <div className={clsx('col col--4')}>
+    <div className={clsx('col col--4', styles.featureCard)}>
       <div className="text--center">
         <Svg className={styles.featureSvg} role="img" />
       </div>

src/components/HomepageFeatures/styles.module.css

@@ -1,11 +1,26 @@
 .features {
-  display: flex;
-  align-items: center;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+  gap: 2rem;
   padding: 2rem 0;
-  width: 100%;
 }
 
-.featureSvg {
-  height: 200px;
-  width: 200px;
+.featureCard {
+  background: var(--ifm-background-color);
+  border: 1px solid #1e053a;
+  border-radius: 8px;
+  padding: 1.5rem;
+  text-align: center;
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.featureCard:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
 }
+
+.featureSvg {
+  height: 120px;
+  width: 120px;
+  margin-bottom: 1rem;
+}

src/css/custom.css

@@ -4,47 +4,62 @@
  * work well for content-centric websites.
  */
 
-/* You can override the default Infima variables here. */
+/* Override Infima variables for n8n.io inspired dark theme */
 :root {
-  /* Aurora Inspired - Deep Purple/Blue Palette */
+  /* Primary color - deep purple */
   --ifm-color-primary: #8e44ad;
-  /* Amethyst Purple */
   --ifm-color-primary-dark: #7d3c98;
   --ifm-color-primary-darker: #763990;
   --ifm-color-primary-darkest: #612e76;
   --ifm-color-primary-light: #9b59b6;
   --ifm-color-primary-lighter: #a569bd;
   --ifm-color-primary-lightest: #bb8fce;
+
+  /* Typography */
+  --ifm-font-family-base: 'Inter', sans-serif;
+  --ifm-font-color-base: #f8f9fa;
+  /* Light text */
+
+  /* Code */
   --ifm-code-font-size: 95%;
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
-  --ifm-font-color-base: #f8f9fa;
-  /* Very light grey/white */
 }
 
-/* Aurora Inspired - Dark Mode Optimization */
+/* Dark mode overrides */
 [data-theme='dark'] {
+  --ifm-background-color: #0b0118;
+  /* Near‑black purple */
+  --ifm-navbar-background-color: #090113;
+  --ifm-footer-background-color: #06010d;
+
   --ifm-color-primary: #a29bfe;
-  /* Light Purple for contrast */
   --ifm-color-primary-dark: #8179f8;
   --ifm-color-primary-darker: #7167f7;
   --ifm-color-primary-darkest: #4333f4;
   --ifm-color-primary-light: #c3befd;
   --ifm-color-primary-lighter: #d4d0fe;
   --ifm-color-primary-lightest: #f1f0ff;
+
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
+}
 
-  /* Deep Space Backgrounds */
-  --ifm-background-color: #0b0118;
-  /* Near-black purple */
-  --ifm-navbar-background-color: #090113;
-  --ifm-footer-background-color: #06010d;
-  /* Removes the grey look */
+/* Global element tweaks */
+a {
+  color: var(--ifm-color-primary);
+  text-decoration: none;
+}
+
+a:hover {
+  opacity: 0.85;
+}
 
-  --ifm-contents-border-color: #1e053a;
-  --ifm-blockquote-color: #9c88ff;
+/* Buttons */
+.button {
+  border-radius: 8px;
+  transition: background-color 0.2s ease;
 }
 
-/* Custom polishing */
+/* Footer */
 footer {
   border-top: 1px solid #1e053a;
 }

src/pages/index.module.css

@@ -4,12 +4,15 @@
  */
 
 .heroBanner {
-  padding: 4rem 0;
+  padding: 5rem 0;
   text-align: center;
   position: relative;
   overflow: hidden;
+  background: linear-gradient(135deg, #0b0118, #090113);
+  color: var(--ifm-font-color-base);
 }
 
+
 @media screen and (max-width: 996px) {
   .heroBanner {
     padding: 2rem;
@@ -20,4 +23,4 @@
   display: flex;
   align-items: center;
   justify-content: center;
-}
+}