chore: initialize tailwindcss

components/Footer/index.module.css

@@ -1,134 +1,61 @@
+@reference "../../styles/index.css";
+
 .footer {
-  border-top: 1px solid var(--color-neutral-900);
-  background-color: var(--color-neutral-950);
-  color: var(--color-neutral-500);
+  @apply border-t border-neutral-900 bg-neutral-950 text-neutral-500;
 }
 
 .inner {
-  max-width: 80rem;
-  margin-inline: auto;
-  padding: 3rem 1.5rem 1.5rem;
+  @apply max-w-7xl mx-auto px-6 pt-12 pb-6;
 }
 
 .top {
-  display: grid;
-  grid-template-columns: 1fr;
-  gap: 2.5rem;
-}
-
-@media (min-width: 40rem) {
-  .top {
-    grid-template-columns: repeat(2, 1fr);
-  }
-}
-
-@media (min-width: 64rem) {
-  .top {
-    grid-template-columns: 1.5fr repeat(4, 1fr);
-    gap: 2rem;
-  }
+  @apply grid grid-cols-1 gap-10 sm:grid-cols-2 lg:grid-cols-[1.5fr_repeat(4,1fr)] lg:gap-8;
 }
 
 .brand {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-  max-width: 18rem;
+  @apply flex flex-col gap-4 max-w-72;
 }
 
 .logo {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.5rem;
-  text-decoration: none;
+  @apply inline-flex items-center gap-2 no-underline;
 }
 
 .wordmark {
-  font-size: 1.125rem;
-  font-weight: 600;
-  color: var(--color-neutral-50);
+  @apply text-lg font-semibold text-neutral-50;
 }
 
 .tagline {
-  margin: 0;
-  font-size: 0.875rem;
-  line-height: 1.6;
-  color: var(--color-neutral-600);
+  @apply m-0 text-sm leading-relaxed text-neutral-600;
 }
 
 .section {
-  display: flex;
-  flex-direction: column;
-  gap: 0.875rem;
+  @apply flex flex-col gap-3.5;
 }
 
 .heading {
-  margin: 0;
-  font-size: 0.75rem;
-  font-weight: 600;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-  color: var(--color-green-300);
+  @apply m-0 text-xs font-semibold tracking-[0.08em] uppercase text-blue-300;
 }
 
 .list {
-  display: flex;
-  flex-direction: column;
-  gap: 0.625rem;
-  margin: 0;
-  padding: 0;
-  list-style: none;
+  @apply flex flex-col gap-2.5 m-0 p-0 list-none;
 }
 
 .link {
-  font-size: 0.9375rem;
-  color: var(--color-neutral-300);
-  text-decoration: none;
-  transition: color 0.15s ease;
-}
-
-.link:hover {
-  color: var(--color-green-300);
+  @apply text-[0.9375rem] text-neutral-300 no-underline transition-colors duration-150 ease-in-out hover:text-blue-300;
 }
 
 .bottom {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-  align-items: center;
-  margin-top: 2.5rem;
-  padding-top: 1.5rem;
-  border-top: 1px solid var(--color-neutral-900);
-}
-
-@media (min-width: 40rem) {
-  .bottom {
-    flex-direction: row;
-    justify-content: space-between;
-  }
+  @apply flex flex-col gap-4 items-center mt-10 pt-6 border-t border-neutral-900 sm:flex-row sm:justify-between;
 }
 
 .legal {
-  margin: 0;
-  font-size: 0.875rem;
-  color: var(--color-neutral-600);
+  @apply m-0 text-sm text-neutral-600;
 }
 
 .social {
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-  margin: 0;
-  padding: 0;
-  list-style: none;
+  @apply flex items-center gap-4 m-0 p-0 list-none;
 }
 
 .socialLink {
-  display: inline-flex;
-  color: var(--color-neutral-500);
-  transition: color 0.15s ease;
-}
-
-.socialLink:hover {
-  color: var(--color-neutral-50);
+  @apply inline-flex text-neutral-500 transition-colors duration-150 hover:text-neutral-50;
 }

components/Layout.jsx

@@ -1,6 +1,6 @@
 import DefaultLayout from '@node-core/doc-kit/src/generators/web/ui/components/Layout/index.jsx';
 import HomeLayout from '../layouts/Home/index.jsx';
-import '../styles/theme.css';
+import '../styles/index.css';
 
 const LAYOUTS = {
   home: HomeLayout,