From 6fd4c4aebc2fcb2878cad150aa244e9b75c3ca74 Mon Sep 17 00:00:00 2001
From: Jon Harrell <4829245+jharrell@users.noreply.github.com>
Date: Mon, 1 Apr 2024 10:58:38 -0500
Subject: [PATCH] Docusaurus: migrate homepage css to sass (#5768)

---
 src/pages/index.module.css  | 514 ------------------------------------
 src/pages/index.module.scss | 488 ++++++++++++++++++++++++++++++++++
 src/pages/index.tsx         |   2 +-
 3 files changed, 489 insertions(+), 515 deletions(-)
 delete mode 100644 src/pages/index.module.css
 create mode 100644 src/pages/index.module.scss

diff --git a/src/pages/index.module.css b/src/pages/index.module.css
deleted file mode 100644
index 5f43a91857..0000000000
--- a/src/pages/index.module.css
+++ /dev/null
@@ -1,514 +0,0 @@
-/**
- * CSS files with the .module.css suffix will be treated as CSS modules
- * and scoped locally.
- */
-
-.icon {
-  width: 64px;
-  height: 64px;
-  flex-shrink: 0;
-  border-radius: 8px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--icon-svg-color);
-}
-
-.h3 {
-  font-family: 'Barlow', sans-serif;
-  font-weight: bold;
-  font-size: 28px;
-  letter-spacing: -0.02em;
-  line-height: 110%;
-}
-
-.h4 {
-  font-family: 'Barlow';
-  margin: 0;
-  font-size: 24px;
-  font-style: normal;
-  font-weight: 700;
-  line-height: 110%;
-  /* 26.4px */
-  letter-spacing: -0.48px;
-}
-
-.body {
-  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
-    'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
-    'Segoe UI Symbol', 'Noto Color Emoji';
-  font-weight: normal;
-  font-size: 18px;
-  letter-spacing: 0em;
-  line-height: 140%;
-}
-
-.homepageTopSection {
-  padding: 64px 12px;
-  background: #f7fafc;
-  display: flex;
-  flex-wrap: wrap;
-  gap: 40px;
-  background: var(--homepage-header-bg);
-}
-
-.linkGrid {
-  display: flex;
-  max-width: 338px;
-  gap: 16px;
-  width: 100%;
-  flex-wrap: wrap;
-  justify-content: space-between;
-}
-
-.linkGrid a,
-.linkGrid button {
-  min-width: calc(50% - 8px);
-  white-space: nowrap;
-  font-family: 'Inter';
-  font-size: 16px;
-  font-style: normal;
-  font-weight: 600;
-  line-height: 100%;
-  /* 16px */
-  letter-spacing: -0.32px;
-  text-decoration: none;
-}
-
-.linkGrid a &:hover,
-.linkGrid button &:hover {
-  text-decoration: underline;
-}
-
-.linkGrid svg {
-  display: none;
-}
-
-.productCardsWrapper {
-  max-width: 1240px;
-  width: 100%;
-  gap: 40px;
-  margin: 0 auto;
-  display: flex;
-  flex-wrap: wrap;
-}
-
-.productCardIndigo {
-  display: grid;
-  grid-template-rows: auto 1fr auto;
-  padding: 32px;
-  width: 100%;
-  border-radius: 8px;
-  background: var(--indigo-card-bg);
-  /* background: var(--${(p) => p.color === 'teal' ? 'teal' : 'indigo'}-card-bg); */
-  box-shadow: 0px 18px 42px 0px rgba(23, 43, 77, 0.08),
-    0px 4px 26px 0px rgba(23, 43, 77, 0.05),
-    0px 0px 46px 0px rgba(23, 43, 77, 0.01);
-
-}
-
-.productCardTeal {
-  display: grid;
-  grid-template-rows: auto 1fr auto;
-  padding: 32px;
-  width: 100%;
-  border-radius: 8px;
-  background: var(--teal-card-bg);
-  /* background: var(--${(p) => p.color === 'teal' ? 'teal' : 'indigo'}-card-bg); */
-  box-shadow: 0px 18px 42px 0px rgba(23, 43, 77, 0.08),
-    0px 4px 26px 0px rgba(23, 43, 77, 0.05),
-    0px 0px 46px 0px rgba(23, 43, 77, 0.01);
-
-}
-
-.productCard a,
-.productCardIndigo a,
-.productCard button,
-.productCardIndigo button {
-  color: var(--indigo-link-color)
-}
-
-.productCardTeal a,
-.productCardTeal button {
-  color: var(--teal-link-color)
-}
-
-.productCard h3,
-.productCardIndigo h3,
-.productCardTeal h3 {
-  display: flex;
-  align-items: center;
-  gap: 16px;
-  margin: 0 0 24px 0;
-}
-
-.productCard .body,
-.productCardIndigo .body,
-.productCardTeal .body {
-  margin-bottom: 16px;
-}
-
-.productCard .icon,
-.productCardIndigo .icon {
-  background: var(--indigo-600)
-}
-
-.productCardTeal .icon {
-  background: var(--teal-link-color)
-}
-
-.ormLinkSectionWrapper {
-  max-width: 1272px;
-  margin: 0 auto;
-  padding: 60px 16px 24px;
-}
-
-.ormLinkSectionWrapper h4 {
-  color: var(--main-font-color);
-  margin-bottom: 40px;
-}
-
-.ormLinkSectionWrapper>div {
-  display: grid;
-  gap: 40px;
-  grid-template-columns: 100%;
-}
-
-.ormLinkWrapper {
-  display: flex !important;
-  gap: 24px;
-  text-decoration: none;
-}
-
-.ormLinkWrapper h5 {
-  display: inline-block;
-  color: var(--main-font-color);
-  font-size: 18px;
-  font-style: normal;
-  font-weight: 700;
-  line-height: 100%;
-  /* 18px */
-  margin: 0 0 10px 0;
-  letter-spacing: -0.36px;
-  font-family: 'Barlow';
-}
-
-.ormLinkWrapper h5>span {
-  font-family: 'Inter';
-}
-
-.ormLinkWrapper>div:last-of-type {
-  display: inline-block;
-}
-
-.ormLinkWrapper .icon {
-  background: var(--icon-wrapper-bg);
-}
-
-.ormLinkWrapper p {
-  color: var(--secondary-font-color);
-  text-overflow: ellipsis;
-  font-family: 'Inter';
-  margin: 0;
-  font-size: 16px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 140%;
-  /* 22.4px */
-}
-
-.ormLinkWrapper &:hover h5 {
-  text-decoration: underline;
-}
-
-.ormCardsSection {
-  max-width: 1262px;
-  margin: 0 auto;
-  padding: 40px 11px;
-}
-
-.ormCardsWrapper {
-  gap: 40px;
-  display: flex;
-  flex-direction: column;
-}
-
-.ormCardsWrapper .productCardIndigo {
-  padding: 40px;
-  background: var(--orm-card-bg);
-  grid-template-rows: auto auto 1fr;
-}
-
-.ormCardsWrapper h4 {
-  margin-bottom: 8px;
-}
-
-.ormCardsWrapper .productCard>p {
-  color: var(--secondary-font-color);
-  margin: 0 0 24px 0;
-  font-family: 'Inter';
-  font-size: 16px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 140%;
-  /* 22.4px */
-}
-
-.ormCardsWrapper .linkGrid {
-  gap: 12px;
-}
-
-.ormCardsWrapper .linkGrid a {
-  min-width: calc(50% - 8px);
-  width: fit-content;
-  white-space: nowrap;
-}
-
-.databasesSection {
-  max-width: 1272px;
-  margin: 0 auto;
-  padding: 40px 16px;
-}
-
-.databasesSection h4 {
-  margin-bottom: 24px;
-}
-
-.databasesSection .body {
-  color: var(--secondary-font-color);
-  margin-bottom: 40px;
-}
-
-.databaseGrid {
-  display: flex;
-  flex-direction: column;
-  flex-wrap: wrap;
-  gap: 24px;
-}
-
-.databaseGrid a {
-  text-decoration: none;
-  color: unset;
-}
-
-.databaseEntry {
-  height: 84px;
-  display: flex;
-  align-items: center;
-  justify-content: start;
-  gap: 16px;
-  flex-basis: 21%;
-  border-radius: 8px;
-  padding: 25px 24px;
-  background-color: var(--orm-card-bg);
-  position: relative;
-  cursor: pointer;
-}
-
-.databaseEntry::after {
-  content: '';
-  position: absolute;
-  border-radius: 8px;
-  inset: 0;
-  border: 1px solid var(--grid-border-color);
-  background-color: transparent;
-  cursor: pointer;
-}
-
-.databaseEntry:hover {
-  background-color: var(--main-bgd-color);
-}
-
-.databaseEntry:hover::after {
-  border: 2px solid #5a67d8;
-}
-
-.databaseEntry img {
-  margin: auto 0;
-  max-height: 36px;
-}
-
-.databaseEntry span {
-  color: var(--main-font-color);
-  text-transform: capitalize;
-  font-family: 'Inter';
-  font-weight: 600;
-  font-size: 24px;
-  line-height: 1;
-}
-
-.communityLinksSection {
-  background: var(--community-bgd-color);
-}
-
-.communityLinksSection>div {
-  padding: 80px 16px;
-  margin: 0 auto;
-  max-width: 1272px;
-  text-align: left;
-}
-
-.communityLinksSection>div a {
-  text-decoration: none;
-}
-
-.communityLinksSection .sectionHero h3 {
-  margin-top: 0;
-  margin-bottom: 24px;
-  color: var(--primary-font-color);
-}
-
-.communityLinksSection .sectionHero p {
-  color: var(--secondary-font-color);
-  margin-bottom: 60px;
-  margin-top: 0;
-}
-
-.communityLinkWrapper {
-  display: grid;
-  gap: 16px;
-  text-align: left;
-  grid-template-columns: 24px 1fr;
-  height: 100%;
-  text-decoration: none;
-}
-
-.communityLinkWrapper>div {
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  gap: 16px;
-}
-
-.communityLinkWrapper h4 {
-  margin-bottom: 6px;
-  margin-top: 0;
-  line-height: 110%;
-  font-size: 24px;
-  font-weight: 700;
-  font-family: 'Barlow';
-  color: var(--primary-font-color);
-}
-
-.communityLinkWrapper .body {
-  color: var(--secondary-font-color);
-  margin: 0;
-}
-
-.communityLinkWrapper .link {
-  color: var(--indigo-link-color);
-  font-family: 'Inter';
-  font-size: 18px;
-  font-style: normal;
-  font-weight: 600;
-  line-height: 88%;
-  /* 15.84px */
-}
-
-.communityLinksRow {
-  display: grid;
-  gap: 24px;
-  grid-template-rows: repeat(3, minmax(0, 1fr));
-}
-
-.communityLinksRow i {
-  margin-top: 4px;
-  color: var(--indigo-600);
-}
-
-.communityLinkCard {
-  box-shadow: 0px 5px 3px rgba(23, 43, 77, 0.04), 0px 8px 5px rgba(23, 43, 77, 0.08);
-  background: var(--shadow-card-bg);
-  border-radius: 8px;
-  overflow: hidden;
-  width: 100%;
-  cursor: pointer;
-  max-width: 100%;
-  margin: 0;
-  transition: transform 100ms ease;
-}
-
-.communityLinkCard:hover {
-  transform: scale(1.02);
-}
-
-.communityLinkCard .content {
-  padding: 32px 24px;
-  text-align: left;
-}
-
-.communityLinkCard .content p {
-  color: #4a5568;
-}
-
-.communityLinkCard .content a {
-  text-decoration: none;
-}
-
-.communityLinkCard .content:hover .link>span:first-of-type {
-  text-decoration: underline;
-}
-
-@media (min-width: 768px) {
-
-  .productCard,
-  .productCardIndigo,
-  .productCardTeal {
-    width: calc(50% - 20px);
-  }
-
-  .ormLinkSectionWrapper>div {
-    grid-template-columns: 1fr 1fr;
-  }
-
-  .ormCardsWrapper {
-    flex-direction: row;
-  }
-
-  .ormDatabasesSection {
-    padding: 24px 16px 108px;
-  }
-
-}
-
-@media only screen and (min-width: 768px) {
-  .communityLinksRow {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-    grid-template-rows: none;
-  }
-}
-
-@media (min-width: 940px) {
-  .h3 {
-    font-size: 36px;
-  }
-}
-
-@media only screen and (min-width: 940px) {
-  .databaseEntry {
-    padding: 0 24px;
-  }
-
-  .communityLinksRow {
-    grid-template-columns: repeat(3, minmax(0, 1fr));
-    grid-template-rows: none;
-  }
-}
-
-@media only screen and (min-width: 1024px) {
-  .databaseGrid {
-    display: grid;
-    column-gap: 44px;
-    grid-template-columns: repeat(4, 1fr);
-  }
-
-}
-
-@media (min-width: 940px) and (max-width: 1024px) {
-  .databaseGrid {
-    display: grid;
-    column-gap: 44px;
-    grid-template-columns: repeat(3, 1fr);
-  }
-
-}
\ No newline at end of file
diff --git a/src/pages/index.module.scss b/src/pages/index.module.scss
new file mode 100644
index 0000000000..a4bdab2c37
--- /dev/null
+++ b/src/pages/index.module.scss
@@ -0,0 +1,488 @@
+/**
+ * CSS/SCSS files with the .module.{css,scss} suffix will be treated as modules
+ * and scoped locally.
+ */
+
+.icon {
+  width: 64px;
+  height: 64px;
+  flex-shrink: 0;
+  border-radius: 8px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--icon-svg-color);
+}
+
+.h3 {
+  font-family: 'Barlow', sans-serif;
+  font-weight: bold;
+  font-size: 28px;
+  letter-spacing: -0.02em;
+  line-height: 110%;
+
+  @media (min-width: 940px) {
+    font-size: 36px;
+  }
+}
+
+.h4 {
+  font-family: 'Barlow';
+  margin: 0;
+  font-size: 24px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 110%;
+  /* 26.4px */
+  letter-spacing: -0.48px;
+}
+
+.body {
+  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
+    'Segoe UI Symbol', 'Noto Color Emoji';
+  font-weight: normal;
+  font-size: 18px;
+  letter-spacing: 0em;
+  line-height: 140%;
+}
+
+.homepageTopSection {
+  padding: 64px 12px;
+  background: #f7fafc;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 40px;
+  background: var(--homepage-header-bg);
+}
+
+.linkGrid {
+  display: flex;
+  max-width: 338px;
+  gap: 16px;
+  width: 100%;
+  flex-wrap: wrap;
+  justify-content: space-between;
+
+  a,
+  button {
+    min-width: calc(50% - 8px);
+    white-space: nowrap;
+    font-family: 'Inter';
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 100%;
+    /* 16px */
+    letter-spacing: -0.32px;
+    text-decoration: none;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+
+  svg {
+    display: none;
+  }
+}
+
+.productCardsWrapper {
+  max-width: 1240px;
+  width: 100%;
+  gap: 40px;
+  margin: 0 auto;
+  display: flex;
+  flex-wrap: wrap;
+}
+
+%productCard {
+  display: grid;
+  grid-template-rows: auto 1fr auto;
+  padding: 32px;
+  width: 100%;
+  border-radius: 8px;
+  box-shadow: 0px 18px 42px 0px rgba(23, 43, 77, 0.08),
+    0px 4px 26px 0px rgba(23, 43, 77, 0.05),
+    0px 0px 46px 0px rgba(23, 43, 77, 0.01);
+
+  h3 {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    margin: 0 0 24px 0;
+  }
+
+  .body {
+    margin-bottom: 16px;
+  }
+
+  @media (min-width: 768px) {
+    width: calc(50% - 20px);
+  }
+
+}
+
+.productCardIndigo {
+  @extend %productCard;
+  background: var(--indigo-card-bg);
+
+  a,
+  button {
+    color: var(--indigo-link-color)
+  }
+
+  .icon {
+    background: var(--indigo-600)
+  }
+
+}
+
+.productCardTeal {
+  @extend %productCard;
+  background: var(--teal-card-bg);
+
+  a,
+  button {
+    color: var(--teal-link-color)
+  }
+
+  .icon {
+    background: var(--teal-link-color);
+  }
+
+}
+
+.ormLinkSectionWrapper {
+  max-width: 1272px;
+  margin: 0 auto;
+  padding: 60px 16px 24px;
+
+  h4 {
+    color: var(--main-font-color);
+    margin-bottom: 40px;
+  }
+
+  >div {
+    display: grid;
+    gap: 40px;
+    grid-template-columns: 100%;
+
+    @media (min-width: 768px) {
+      grid-template-columns: 1fr 1fr;
+    }
+  }
+}
+
+.ormLinkWrapper {
+  display: flex !important;
+  gap: 24px;
+  text-decoration: none;
+
+  h5 {
+    display: inline-block;
+    color: var(--main-font-color);
+    font-size: 18px;
+    font-style: normal;
+    font-weight: 700;
+    line-height: 100%;
+    /* 18px */
+    margin: 0 0 10px 0;
+    letter-spacing: -0.36px;
+    font-family: 'Barlow';
+
+    >span {
+      font-family: 'Inter';
+    }
+  }
+
+  p {
+    color: var(--secondary-font-color);
+    text-overflow: ellipsis;
+    font-family: 'Inter';
+    margin: 0;
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 140%;
+    /* 22.4px */
+  }
+
+  >div:last-of-type {
+    display: inline-block;
+  }
+
+  .icon {
+    background: var(--icon-wrapper-bg);
+  }
+
+  &:hover {
+    h5 {
+      text-decoration: underline;
+    }
+  }
+}
+
+.ormCardsSection {
+  max-width: 1262px;
+  margin: 0 auto;
+  padding: 40px 11px;
+}
+
+.ormCardsWrapper {
+  gap: 40px;
+  display: flex;
+  flex-direction: column;
+
+  h4 {
+    margin-bottom: 8px;
+  }
+
+  .productCardIndigo {
+    padding: 40px;
+    background: var(--orm-card-bg);
+    grid-template-rows: auto auto 1fr;
+
+    >p {
+      color: var(--secondary-font-color);
+      margin: 0 0 24px 0;
+      font-family: 'Inter';
+      font-size: 16px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 140%;
+      /* 22.4px */
+    }
+  }
+
+  .linkGrid {
+    gap: 12px;
+
+    a {
+      min-width: calc(50% - 8px);
+      width: fit-content;
+      white-space: nowrap;
+    }
+  }
+
+  @media (min-width: 768px) {
+    flex-direction: row;
+  }
+}
+
+.databasesSection {
+  max-width: 1272px;
+  margin: 0 auto;
+  padding: 40px 16px;
+
+  h4 {
+    margin-bottom: 24px;
+  }
+
+  .body {
+    color: var(--secondary-font-color);
+    margin-bottom: 40px;
+  }
+
+  @media (min-width: 768px) {
+    padding: 24px 16px 108px;
+  }
+}
+
+.databaseGrid {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+  gap: 24px;
+
+  a {
+    text-decoration: none;
+    color: unset;
+  }
+
+  @media only screen and (min-width: 1024px) {
+    display: grid;
+    column-gap: 44px;
+    grid-template-columns: repeat(4, 1fr);
+  }
+
+  @media (min-width: 940px) and (max-width: 1024px) {
+    display: grid;
+    column-gap: 44px;
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+
+.databaseEntry {
+  height: 84px;
+  display: flex;
+  align-items: center;
+  justify-content: start;
+  gap: 16px;
+  flex-basis: 21%;
+  border-radius: 8px;
+  padding: 25px 24px;
+  background-color: var(--orm-card-bg);
+  position: relative;
+  cursor: pointer;
+
+  &::after {
+    content: '';
+    position: absolute;
+    border-radius: 8px;
+    inset: 0;
+    border: 1px solid var(--grid-border-color);
+    background-color: transparent;
+    cursor: pointer;
+  }
+
+  &:hover {
+    background-color: var(--main-bgd-color);
+
+    &::after {
+      border: 2px solid #5a67d8;
+    }
+  }
+
+  img {
+    margin: auto 0;
+    max-height: 36px;
+  }
+
+  span {
+    color: var(--main-font-color);
+    text-transform: capitalize;
+    font-family: 'Inter';
+    font-weight: 600;
+    font-size: 24px;
+    line-height: 1;
+  }
+
+  @media only screen and (min-width: 940px) {
+    padding: 0 24px;
+  }
+}
+
+.communityLinksSection {
+  background: var(--community-bgd-color);
+
+  >div {
+    padding: 80px 16px;
+    margin: 0 auto;
+    max-width: 1272px;
+    text-align: left;
+
+    a {
+      text-decoration: none;
+    }
+  }
+
+  .sectionHero {
+    h3 {
+      margin-top: 0;
+      margin-bottom: 24px;
+      color: var(--primary-font-color);
+    }
+
+    p {
+      color: var(--secondary-font-color);
+      margin-bottom: 60px;
+      margin-top: 0;
+    }
+  }
+}
+
+.communityLinkWrapper {
+  display: grid;
+  gap: 16px;
+  text-align: left;
+  grid-template-columns: 24px 1fr;
+  height: 100%;
+  text-decoration: none;
+
+  >div {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    gap: 16px;
+  }
+
+  h4 {
+    margin-bottom: 6px;
+    margin-top: 0;
+    line-height: 110%;
+    font-size: 24px;
+    font-weight: 700;
+    font-family: 'Barlow';
+    color: var(--primary-font-color);
+  }
+
+  .body {
+    color: var(--secondary-font-color);
+    margin: 0;
+  }
+
+  .link {
+    color: var(--indigo-link-color);
+    font-family: 'Inter';
+    font-size: 18px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 88%;
+    /* 15.84px */
+  }
+}
+
+.communityLinksRow {
+  display: grid;
+  gap: 24px;
+  grid-template-rows: repeat(3, minmax(0, 1fr));
+
+  i {
+    margin-top: 4px;
+    color: var(--indigo-600);
+  }
+
+  @media only screen and (min-width: 768px) {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    grid-template-rows: none;
+  }
+
+  @media only screen and (min-width: 940px) {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    grid-template-rows: none;
+  }
+}
+
+.communityLinkCard {
+  box-shadow: 0px 5px 3px rgba(23, 43, 77, 0.04), 0px 8px 5px rgba(23, 43, 77, 0.08);
+  background: var(--shadow-card-bg);
+  border-radius: 8px;
+  overflow: hidden;
+  width: 100%;
+  cursor: pointer;
+  max-width: 100%;
+  margin: 0;
+  transition: transform 100ms ease;
+
+  &:hover {
+    transform: scale(1.02);
+  }
+
+  .content {
+    padding: 32px 24px;
+    text-align: left;
+
+    p {
+      color: #4a5568;
+    }
+
+    a {
+      text-decoration: none;
+    }
+
+    &:hover .link>span:first-of-type {
+      text-decoration: underline;
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index dbe4387a7a..7cc76cf679 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -13,7 +13,7 @@ import {
   ProductLinkData
 } from '@site/src/data/indexData';
 
-import styles from './index.module.css';
+import styles from './index.module.scss';
 
 
 function HomepageCard({