Add some css decorations

components/Header/Header.module.scss

@@ -1,5 +1,6 @@
 .root {
   align-items: center;
+  background-color: hsl(var(--secondary-color));
   display: flex;
   justify-content: space-between;
   margin: 0 auto;
@@ -67,6 +68,7 @@
 .hamburger {
   background-color: transparent;
   border: 0;
+  cursor: pointer;
   display: none;
   height: 2.75rem;
   margin: 0;

components/Hero/Hero.module.scss

@@ -1,13 +1,23 @@
 .root {
   align-items: center;
-  background: url('../../public/images/hero-grid.svg') repeat-x;
-  background-position: bottom;
-  background-size: 1500px;
+  background-image: linear-gradient(hsl(var(--light-grey) / 50%) .125rem, transparent .125rem), linear-gradient(to right, hsl(var(--light-grey) / 50%) .125rem, transparent .125rem);
+  background-size: 1.5rem 1.5rem;
   display: flex;
   flex-direction: column;
-  height: 40vh;
   justify-content: space-between;
+  position: relative;
   text-align: center;
+
+  &::before {
+    background-image: linear-gradient(hsl(var(--secondary-color) / 100%) 20%, transparent);
+    block-size: 100%;
+    content: '';
+    inline-size: 100%;
+    left: 0;
+    position: absolute;
+    top: 0;
+    z-index: 0;
+  }
 }
 
 .full {
@@ -20,6 +30,7 @@
   margin: 0 8rem;
   max-width: 1080px;
   padding-top: 2rem;
+  z-index: 1;
 }
 
 .heading {

components/HomeSection/HomeSection.module.scss

@@ -10,8 +10,6 @@
     margin: 0 auto;
     max-width: 1080px;
     padding: 0 1rem 1rem;
-    position: relative;
-    z-index: 2;
   }
 }
 
@@ -24,19 +22,29 @@
 .wave {
   padding-top: 2rem;
 
+  &::before,
   &::after {
-    background-color: hsl(var(--white));
-    clip-path: polygon(100% 0%, 0% 0%, 0% 65%, 1% 64.95%, 2% 64.8%, 3% 64.6%, 4% 64.3%, 5% 63.9%, 6% 63.45%, 7% 62.9%, 8% 62.25%, 9% 61.55%, 10% 60.8%, 11% 59.95%, 12% 59.05%, 13% 58.1%, 14% 57.1%, 15% 56.05%, 16% 55%, 17% 53.9%, 18% 52.8%, 19% 51.65%, 20% 50.5%, 21% 49.35%, 22% 48.2%, 23% 47.05%, 24% 45.9%, 25% 44.8%, 26% 43.75%, 27% 42.75%, 28% 41.75%, 29% 40.8%, 30% 39.9%, 31% 39.1%, 32% 38.35%, 33% 37.65%, 34% 37.05%, 35% 36.5%, 36% 36.05%, 37% 35.65%, 38% 35.35%, 39% 35.15%, 40% 35.05%, 41% 35%, 42% 35.05%, 43% 35.2%, 44% 35.45%, 45% 35.75%, 46% 36.15%, 47% 36.65%, 48% 37.2%, 49% 37.85%, 50% 38.55%, 51% 39.35%, 52% 40.2%, 53% 41.1%, 54% 42.05%, 55% 43.05%, 56% 44.1%, 57% 45.15%, 58% 46.3%, 59% 47.4%, 60% 48.55%, 61% 49.7%, 62% 50.85%, 63% 52%, 64% 53.15%, 65% 54.25%, 66% 55.35%, 67% 56.4%, 68% 57.45%, 69% 58.4%, 70% 59.35%, 71% 60.2%, 72% 61.05%, 73% 61.8%, 74% 62.45%, 75% 63.05%, 76% 63.6%, 77% 64.05%, 78% 64.4%, 79% 64.7%, 80% 64.85%, 81% 65%, 82% 65%, 83% 64.9%, 84% 64.75%, 85% 64.5%, 86% 64.2%, 87% 63.75%, 88% 63.25%, 89% 62.7%, 90% 62.05%, 91% 61.3%, 92% 60.5%, 93% 59.65%, 94% 58.75%, 95% 57.8%, 96% 56.8%, 97% 55.75%, 98% 54.65%, 99% 53.55%, 100% 52.4%);
     content: '';
     height: 200px;
     left: 0;
     pointer-events: none;
     position: absolute;
     top: -175px;
     touch-action: none;
-    transform: scaleY(-1);
     width: 100%;
   }
+
+  &::before {
+    background-color: hsl(var(--white) / 50%);
+    clip-path: polygon(100% 0%, 0% 0%, 0% 65%, 1% 64.95%, 2% 64.8%, 3% 64.6%, 4% 64.3%, 5% 63.9%, 6% 63.45%, 7% 62.9%, 8% 62.25%, 9% 61.55%, 10% 60.8%, 11% 59.95%, 12% 59.05%, 13% 58.1%, 14% 57.1%, 15% 56.05%, 16% 55%, 17% 53.9%, 18% 52.8%, 19% 51.65%, 20% 50.5%, 21% 49.35%, 22% 48.2%, 23% 47.05%, 24% 45.9%, 25% 44.8%, 26% 43.75%, 27% 42.75%, 28% 41.75%, 29% 40.8%, 30% 39.9%, 31% 39.1%, 32% 38.35%, 33% 37.65%, 34% 37.05%, 35% 36.5%, 36% 36.05%, 37% 35.65%, 38% 35.35%, 39% 35.15%, 40% 35.05%, 41% 35%, 42% 35.05%, 43% 35.2%, 44% 35.45%, 45% 35.75%, 46% 36.15%, 47% 36.65%, 48% 37.2%, 49% 37.85%, 50% 38.55%, 51% 39.35%, 52% 40.2%, 53% 41.1%, 54% 42.05%, 55% 43.05%, 56% 44.1%, 57% 45.15%, 58% 46.3%, 59% 47.4%, 60% 48.55%, 61% 49.7%, 62% 50.85%, 63% 52%, 64% 53.15%, 65% 54.25%, 66% 55.35%, 67% 56.4%, 68% 57.45%, 69% 58.4%, 70% 59.35%, 71% 60.2%, 72% 61.05%, 73% 61.8%, 74% 62.45%, 75% 63.05%, 76% 63.6%, 77% 64.05%, 78% 64.4%, 79% 64.7%, 80% 64.85%, 81% 65%, 82% 65%, 83% 64.9%, 84% 64.75%, 85% 64.5%, 86% 64.2%, 87% 63.75%, 88% 63.25%, 89% 62.7%, 90% 62.05%, 91% 61.3%, 92% 60.5%, 93% 59.65%, 94% 58.75%, 95% 57.8%, 96% 56.8%, 97% 55.75%, 98% 54.65%, 99% 53.55%, 100% 52.4%);
+    transform: scale(-1, -1);
+  }
+
+  &::after {
+    background-color: hsl(var(--white));
+    clip-path: polygon(100% 0%, 0% 0%, 0% 65%, 1% 64.95%, 2% 64.8%, 3% 64.6%, 4% 64.3%, 5% 63.9%, 6% 63.45%, 7% 62.9%, 8% 62.25%, 9% 61.55%, 10% 60.8%, 11% 59.95%, 12% 59.05%, 13% 58.1%, 14% 57.1%, 15% 56.05%, 16% 55%, 17% 53.9%, 18% 52.8%, 19% 51.65%, 20% 50.5%, 21% 49.35%, 22% 48.2%, 23% 47.05%, 24% 45.9%, 25% 44.8%, 26% 43.75%, 27% 42.75%, 28% 41.75%, 29% 40.8%, 30% 39.9%, 31% 39.1%, 32% 38.35%, 33% 37.65%, 34% 37.05%, 35% 36.5%, 36% 36.05%, 37% 35.65%, 38% 35.35%, 39% 35.15%, 40% 35.05%, 41% 35%, 42% 35.05%, 43% 35.2%, 44% 35.45%, 45% 35.75%, 46% 36.15%, 47% 36.65%, 48% 37.2%, 49% 37.85%, 50% 38.55%, 51% 39.35%, 52% 40.2%, 53% 41.1%, 54% 42.05%, 55% 43.05%, 56% 44.1%, 57% 45.15%, 58% 46.3%, 59% 47.4%, 60% 48.55%, 61% 49.7%, 62% 50.85%, 63% 52%, 64% 53.15%, 65% 54.25%, 66% 55.35%, 67% 56.4%, 68% 57.45%, 69% 58.4%, 70% 59.35%, 71% 60.2%, 72% 61.05%, 73% 61.8%, 74% 62.45%, 75% 63.05%, 76% 63.6%, 77% 64.05%, 78% 64.4%, 79% 64.7%, 80% 64.85%, 81% 65%, 82% 65%, 83% 64.9%, 84% 64.75%, 85% 64.5%, 86% 64.2%, 87% 63.75%, 88% 63.25%, 89% 62.7%, 90% 62.05%, 91% 61.3%, 92% 60.5%, 93% 59.65%, 94% 58.75%, 95% 57.8%, 96% 56.8%, 97% 55.75%, 98% 54.65%, 99% 53.55%, 100% 52.4%);
+    transform: scaleY(-1);
+  }
 }
 
 .highlight {
@@ -48,7 +56,7 @@
   &::after {
     background-color: hsl(var(--primary-color));
     content: '';
-    height: 100px;
+    height: 6.25rem;
     position: absolute;
     width: 100%;
     z-index: 1;
@@ -60,8 +68,10 @@
   }
 
   &::after {
+    background-color: hsl(var(--light-grey));
     bottom: -30px;
-    clip-path: ellipse(75% 100% at 50% 0%);
+    clip-path: polygon(100% 0%, 0% 0%, 0% 65%, 1% 64.95%, 2% 64.8%, 3% 64.6%, 4% 64.3%, 5% 63.9%, 6% 63.45%, 7% 62.9%, 8% 62.25%, 9% 61.55%, 10% 60.8%, 11% 59.95%, 12% 59.05%, 13% 58.1%, 14% 57.1%, 15% 56.05%, 16% 55%, 17% 53.9%, 18% 52.8%, 19% 51.65%, 20% 50.5%, 21% 49.35%, 22% 48.2%, 23% 47.05%, 24% 45.9%, 25% 44.8%, 26% 43.75%, 27% 42.75%, 28% 41.75%, 29% 40.8%, 30% 39.9%, 31% 39.1%, 32% 38.35%, 33% 37.65%, 34% 37.05%, 35% 36.5%, 36% 36.05%, 37% 35.65%, 38% 35.35%, 39% 35.15%, 40% 35.05%, 41% 35%, 42% 35.05%, 43% 35.2%, 44% 35.45%, 45% 35.75%, 46% 36.15%, 47% 36.65%, 48% 37.2%, 49% 37.85%, 50% 38.55%, 51% 39.35%, 52% 40.2%, 53% 41.1%, 54% 42.05%, 55% 43.05%, 56% 44.1%, 57% 45.15%, 58% 46.3%, 59% 47.4%, 60% 48.55%, 61% 49.7%, 62% 50.85%, 63% 52%, 64% 53.15%, 65% 54.25%, 66% 55.35%, 67% 56.4%, 68% 57.45%, 69% 58.4%, 70% 59.35%, 71% 60.2%, 72% 61.05%, 73% 61.8%, 74% 62.45%, 75% 63.05%, 76% 63.6%, 77% 64.05%, 78% 64.4%, 79% 64.7%, 80% 64.85%, 81% 65%, 82% 65%, 83% 64.9%, 84% 64.75%, 85% 64.5%, 86% 64.2%, 87% 63.75%, 88% 63.25%, 89% 62.7%, 90% 62.05%, 91% 61.3%, 92% 60.5%, 93% 59.65%, 94% 58.75%, 95% 57.8%, 96% 56.8%, 97% 55.75%, 98% 54.65%, 99% 53.55%, 100% 52.4%);
+    transform: scale(-1, -1);
   }
 }
 

components/LibraryCard/LibraryCard.module.scss

@@ -1,16 +1,19 @@
 .root {
-  background-color: hsl(var(--white) / 12%);
-  border-radius: 20px;
-  box-shadow: var(--box-shadow);
+  border-radius: 1.25rem;
   display: flex;
   flex-direction: column;
   height: 100%;
   justify-content: space-between;
-  margin: 0 1rem;
-  max-width: 400px;
+  margin-inline-end: auto;
+  margin-inline-start: auto;
   padding: 2rem;
   text-align: center;
 
+  &:hover {
+    background-color: hsl(var(--white) / 12%);
+    box-shadow: var(--box-shadow);
+  }
+
   h3 {
     font-size: 1.8rem;
     letter-spacing: -2px;
@@ -26,6 +29,11 @@
   a {
     text-decoration: none;
   }
+
+  @media only screen and (max-width: $mobile-width) {
+    background-color: hsl(var(--white)/12%);
+    box-shadow: var(--box-shadow);
+  }
 }
 
 .content {

components/LibraryCard/LibraryCard.tsx

@@ -18,15 +18,16 @@ export interface LibraryCardProps {
 
 const LibraryButton = styled(Button)(({ theme }) => ({
   '&:hover': {
+    color: theme.palette.primary.main,
     backgroundColor: 'white',
-    boxShadow: '0 1px 1px rgba(0, 0, 0, 0.12), 0 2px 2px rgba(0, 0, 0, 0.12), 0 4px 4px rgba(0, 0, 0, 0.12), 0 8px 8px rgba(0, 0, 0, 0.12), 0 16px 16px rgba(0, 0, 0, 0.12)',
-    color: theme.palette.primary.main
   },
   backgroundColor: 'white',
   borderBottom: 'none',
   color: theme.palette.primary.main,
   fontSize: 16,
-  textTransform: 'none'
+  paddingBottom: 8,
+  paddingTop: 8,
+  textTransform: 'none',
 }));
 
 const LibraryCard: FunctionComponent<LibraryCardProps> = ({

styles/pages/index.module.scss

@@ -61,11 +61,15 @@
 .libraries {
   align-items: center;
   display: grid;
-  grid-gap: 2rem 3rem;
-  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
-  justify-items: center;
+  grid-gap: 3rem;
+  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
+  justify-content: space-between;
   margin: 3rem auto;
   max-width: 1080px;
+
+  @media only screen and (max-width: $mobile-width) {
+    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+  }
 }
 
 .join {