feat: Implement glassmorphism design and refine dark theme UI with new background effects and updated component styles.

Author: Alexia Michelle

src/components/HomepageFeatures/styles.module.css

@@ -6,22 +6,29 @@
 }
 
 .featureCard {
-  background: rgba(255, 255, 255, 0.02);
-  border: 1px solid rgba(255, 255, 255, 0.05);
-  border-radius: 16px;
-  padding: 2.5rem;
+  background: var(--glass-bg);
+  backdrop-filter: var(--glass-blur);
+  -webkit-backdrop-filter: var(--glass-blur);
+  border: 1px solid var(--glass-border);
+  border-radius: 20px;
+  padding: 3rem 2rem;
   text-align: center;
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
   height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
 }
 
+
 .featureCard:hover {
-  transform: translateY(-8px);
-  background: rgba(255, 255, 255, 0.04);
-  border-color: rgba(162, 155, 254, 0.3);
-  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
+  transform: translateY(-12px);
+  background: rgba(255, 255, 255, 0.06);
+  border-color: rgba(175, 115, 255, 0.4);
+  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5), 0 0 30px rgba(175, 115, 255, 0.2);
 }
 
+
 .featureSvg {
   height: 80px;
   width: 80px;

src/css/custom.css

@@ -30,45 +30,70 @@
 
 /* Premium Dark overrides */
 [data-theme='dark'] {
-  --ifm-background-color: #06010d;
-  /* Even deeper dark */
-  --ifm-navbar-background-color: #06010d;
-  --ifm-footer-background-color: #030005;
-  /* Deepest footer */
+  --ifm-background-color: #08080a;
+  /* Refined charcoal background */
+  --ifm-navbar-background-color: rgba(8, 8, 10, 0.7);
+  --ifm-footer-background-color: #08080a;
+  /* Unified with background */
 
-  --ifm-font-color-base: #e9ecef;
+  --ifm-font-color-base: #eceef2;
   --ifm-heading-color: #ffffff;
 
-  --ifm-color-primary: #a29bfe;
-  --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;
+  /* More vibrant accents */
+  --ifm-color-primary: #af73ff;
+  --ifm-color-primary-dark: #9646ff;
+  --ifm-color-primary-darker: #8930ff;
+  --ifm-color-primary-darkest: #6a00f4;
+  --ifm-color-primary-light: #c8a2ff;
+  --ifm-color-primary-lighter: #d4b8ff;
+  --ifm-color-primary-lightest: #f0e6ff;
 
-  --ifm-contents-border-color: rgba(255, 255, 255, 0.03);
-  --ifm-toc-border-color: rgba(255, 255, 255, 0.03);
+  --ifm-contents-border-color: rgba(255, 255, 255, 0.06);
+  --ifm-toc-border-color: rgba(255, 255, 255, 0.06);
 
-  /* Modern Depth */
-  --glow-accent: rgba(162, 155, 254, 0.15);
+  /* Modern Depth & Glassmorphism */
+  --glow-accent: rgba(175, 115, 255, 0.25);
+  --glass-bg: rgba(255, 255, 255, 0.03);
+  --glass-border: rgba(255, 255, 255, 0.08);
+  --glass-blur: blur(12px);
 }
 
+
 /* Layout Polish */
 .navbar {
-  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
-  backdrop-filter: blur(10px);
-  -webkit-backdrop-filter: blur(10px);
-  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
+  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
+  backdrop-filter: var(--glass-blur);
+  -webkit-backdrop-filter: var(--glass-blur);
+  border-bottom: 1px solid var(--glass-border);
+  background: var(--ifm-navbar-background-color);
 }
 
+
 .footer {
-  background: var(--ifm-footer-background-color);
-  border-top: 1px solid rgba(255, 255, 255, 0.03);
+  background-color: var(--ifm-background-color) !important;
+  border-top: none !important;
   text-align: center;
-  padding: 5rem 0;
+  padding: 8rem 0;
+  /* More padding for a premium feel */
+  position: relative;
+  overflow: hidden;
+}
+
+
+
+.footer::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 1px;
+  background: linear-gradient(90deg, transparent, var(--ifm-color-primary), transparent);
+  opacity: 0.2;
 }
 
+
+
 .footer__links {
   justify-content: center;
   margin-bottom: 2rem;

src/pages/index.js

@@ -122,11 +122,12 @@ export default function Home() {
         description: 'The description of the homepage',
       })}>
       <HomepageHeader />
-      <main>
+      <main className={styles.mainBackground}>
         <HomepageScreenshot />
         <CockpitSection />
         <HomepageFeatures />
       </main>
+
     </Layout>
   );
 }

src/pages/index.module.css

@@ -4,33 +4,81 @@
  */
 
 .heroBanner {
-  padding: 10rem 0;
+  padding: 12rem 0;
   text-align: center;
   position: relative;
   overflow: hidden;
-  background: radial-gradient(circle at 50% 120%, #1a0233 0%, #06010d 100%);
+  background: var(--ifm-background-color);
+}
+
+
+.heroBanner::before,
+.heroBanner::after {
+  content: '';
+  position: absolute;
+  width: 500px;
+  height: 500px;
+  border-radius: 50%;
+  filter: blur(100px);
+  z-index: 0;
+  opacity: 0.15;
+  pointer-events: none;
+}
+
+.heroBanner::before {
+  background: var(--ifm-color-primary);
+  top: -100px;
+  left: -100px;
+  animation: drift 20s infinite alternate ease-in-out;
+}
+
+.heroBanner::after {
+  background: #6a00f4;
+  bottom: -100px;
+  right: -100px;
+  animation: drift 25s infinite alternate-reverse ease-in-out;
+}
+
+@keyframes drift {
+  from {
+    transform: translate(0, 0) scale(1);
+  }
+
+  to {
+    transform: translate(100px, 50px) scale(1.1);
+  }
+}
+
+.heroBanner :global(.container) {
+  position: relative;
+  z-index: 1;
 }
 
+
 .heroBanner :global(.hero__title) {
-  font-size: 5rem;
-  font-weight: 800;
-  letter-spacing: -0.04em;
-  margin-bottom: 1rem;
-  background: linear-gradient(180deg, #fff 0%, rgba(255, 255, 255, 0.7) 100%);
+  font-size: 5.5rem;
+  font-weight: 850;
+  letter-spacing: -0.05em;
+  margin-bottom: 1.5rem;
+  background: linear-gradient(to bottom, #fff 30%, #a29bfe 100%);
   -webkit-background-clip: text;
   background-clip: text;
   -webkit-text-fill-color: transparent;
+  line-height: 1.1;
 }
 
+
 .heroBanner :global(.hero__subtitle) {
-  font-size: 1.5rem;
-  color: #a0aec0;
-  max-width: 800px;
-  margin: 0 auto 3rem;
+  font-size: 1.6rem;
+  color: #94a3b8;
+  max-width: 650px;
+  margin: 0 auto 3.5rem;
   font-weight: 400;
+  line-height: 1.6;
 }
 
 
+
 @media screen and (max-width: 996px) {
   .heroBanner {
     padding: 4rem 2rem;
@@ -48,42 +96,61 @@
 }
 
 .screenshotSection {
-  background: var(--ifm-background-color);
-  padding: 4rem 0;
+  background: transparent;
+  padding: 6rem 0;
   position: relative;
 }
 
+
 .desktopScreenshot {
   max-width: 1000px;
   width: 100%;
-  border-radius: 12px;
-  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.8), 0 0 20px rgba(162, 155, 254, 0.1);
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  margin-top: 2rem;
+  border-radius: 16px;
+  box-shadow: 0 40px 80px rgba(0, 0, 0, 0.9), 0 0 40px rgba(175, 115, 255, 0.05);
+  border: 1px solid var(--glass-border);
+  margin-top: 3rem;
   position: relative;
   z-index: 2;
+  background: rgba(255, 255, 255, 0.01);
+  backdrop-filter: var(--glass-blur);
+}
+
+
+
+/* Unified background for all sections below hero */
+.mainBackground {
+  background: var(--ifm-background-color);
+  position: relative;
+  overflow: hidden;
+  margin-top: -1px;
+  /* Remove any potential sub-pixel gaps */
 }
 
-/* Central glow effect behind images */
-.screenshotSection::before,
-.cockpitSection::before {
+.mainBackground::before {
   content: '';
   position: absolute;
-  top: 50%;
+  top: -200px;
+  /* Overlap with hero for seamless glow */
   left: 50%;
-  transform: translate(-50%, -50%);
-  width: 80%;
-  height: 80%;
-  background: radial-gradient(circle, rgba(162, 155, 254, 0.08) 0%, transparent 70%);
+  transform: translateX(-50%);
+  width: 200%;
+  height: 2000px;
+  background: radial-gradient(circle at 50% 10%, rgba(175, 115, 255, 0.04) 0%, transparent 60%);
   pointer-events: none;
-  z-index: 1;
+  z-index: 0;
 }
 
+
+
+
+
+
 .cockpitSection {
-  background: var(--ifm-background-color);
+  background: transparent;
   position: relative;
 }
 
+
 .cockpitImageGrid {
   position: relative;
   height: 400px;