Enhance project structure and styling for landing page. Add detailed file structure documentation in cloud.md. Update webpack configuration to support CSS Modules and SCSS. Introduce new styles for terms page and integrate them into the build process. Update package.json and package-lock.json with new dependencies for improved styling capabilities.

src/styles/main.module.scss

@@ -0,0 +1,13 @@
+// Main styles for the landing page
+body {
+  margin: 0;
+  padding: 0;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
+}
+
+.app {
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}

src/styles/main.module.scss.d.ts

@@ -0,0 +1,2 @@
+export const app: string;
+

src/styles/terms.scss

@@ -0,0 +1,157 @@
+// Terms page styles
+$primary-color: #1a202c;
+$bg-color: #f7fafc;
+$white: #fff;
+$text-secondary: #4a5568;
+$text-muted: #718096;
+$text-light: #a0aec0;
+$border-color: #e2e8f0;
+$link-color: #3182ce;
+
+$container-max-width: 1200px;
+$border-radius: 8px;
+$spacing-base: 1rem;
+
+// Breakpoints
+$mobile: 768px;
+$tablet: 1024px;
+
+// Reset
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
+  line-height: 1.6;
+  color: $primary-color;
+  background: $bg-color;
+}
+
+.container {
+  max-width: $container-max-width;
+  margin: 0 auto;
+  padding: 40px 20px;
+}
+
+.terms-doc {
+  background: $white;
+  padding: 60px 80px;
+  border-radius: $border-radius;
+  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
+
+  @media (max-width: 768px) {
+    padding: 40px 24px;
+  }
+}
+
+h1 {
+  font-size: 2.5rem;
+  font-weight: 700;
+  color: #2d3748;
+  text-align: center;
+  margin-bottom: 0.5rem;
+
+  @media (max-width: $mobile) {
+    font-size: 1.75rem;
+  }
+}
+
+.subtitle {
+  text-align: center;
+  color: $text-muted;
+  font-size: 1.1rem;
+  margin-bottom: $spacing-base;
+
+  @media (max-width: $mobile) {
+    font-size: 1rem;
+  }
+}
+
+.date {
+  text-align: center;
+  color: $text-light;
+  font-size: 0.9rem;
+  margin-bottom: 2rem;
+}
+
+hr {
+  border: none;
+  border-top: 1px solid $border-color;
+  margin: 2rem 0;
+}
+
+h2 {
+  font-size: 1.75rem;
+  font-weight: 700;
+  color: #2d3748;
+  margin: 2rem 0 $spacing-base;
+
+  @media (max-width: $mobile) {
+    font-size: 1.5rem;
+    margin: 1.5rem 0 0.75rem;
+  }
+}
+
+h3 {
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: $text-secondary;
+  margin: 1.5rem 0 0.75rem;
+
+  @media (max-width: $mobile) {
+    font-size: 1.1rem;
+    margin: 1.25rem 0 0.5rem;
+  }
+}
+
+p {
+  margin-bottom: $spacing-base;
+  color: $text-secondary;
+  font-size: 1rem;
+
+  @media (max-width: $mobile) {
+    font-size: 0.95rem;
+  }
+}
+
+ul {
+  margin: $spacing-base 0 $spacing-base 2rem;
+  color: $text-secondary;
+  font-size: 1rem;
+
+  @media (max-width: $mobile) {
+    font-size: 0.95rem;
+    margin-left: 1.5rem;
+  }
+
+  li {
+    margin-bottom: 0.5rem;
+  }
+}
+
+a {
+  color: $link-color;
+  text-decoration: none;
+
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
+strong {
+  font-weight: 600;
+  color: #2d3748;
+}
+
+.footer {
+  text-align: center;
+  margin-top: 3rem;
+  padding-top: 2rem;
+  border-top: 1px solid $border-color;
+  color: $text-light;
+  font-size: 0.9rem;
+}
+