add tailwind

src/pages/[lang]/[type].astro

@@ -37,91 +37,33 @@ try {
 ---
 
 <Layout title={`Comick - ${lang?.toUpperCase()} ${type?.toUpperCase()}`}>
-  <main>
-    <h1>ComicK-RSS</h1>
-    <div class="controls">
+  <main class="mx-auto px-4 sm:px-6 lg:px-8 max-w-[1400px] text-primary">
+    <h1 class="text-4xl sm:text-5xl lg:text-6xl font-bold text-center mb-8 sm:mb-12 bg-gradient-to-r from-accent via-accent-light to-white bg-clip-text text-transparent bg-[length:400%] bg-[0%]">
+      ComicK-RSS
+    </h1>
+
+    <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 mb-8">
       <LanguageSelector currentLang={lang!} currentType={type!} />
       <RSSLink lang={lang!} type={type!} />
     </div>
     
     {error && (
-      <div class="error-message">
+      <div class="bg-red-500 text-white p-4 rounded-lg mb-8">
         <p>Error: {error}</p>
       </div>
     )}
     
     {comics.length > 0 ? (
-      <div class="comics-grid">
+      <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-6">
         {comics.map(comic => (
           <ComicCard comic={comic} genres={genres} />
         ))}
       </div>
     ) : (
-      <div class="no-comics">
-        <p>No comics found. Please try a different language or content type.</p>
-        <p class="debug-info">Language: {lang}, Type: {type}</p>
+      <div class="text-center bg-secondary p-6 rounded-lg">
+        <p class="mb-4">No comics found. Please try a different language or content type.</p>
+        <p class="text-sm opacity-70">Language: {lang}, Type: {type}</p>
       </div>
     )}
   </main>
-</Layout>
-
-<style>
-  main {
-    margin: auto;
-    padding: 1rem;
-    width: 1200px;
-    max-width: calc(100% - 2rem);
-    color: var(--text-color);
-    font-size: 20px;
-    line-height: 1.6;
-  }
-
-  .controls {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 2rem;
-  }
-
-  h1 {
-    font-size: 3rem;
-    font-weight: 700;
-    line-height: 1;
-    text-align: center;
-    margin-bottom: 1em;
-    background-image: var(--accent-gradient);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    background-size: 400%;
-    background-position: 0%;
-  }
-
-  .comics-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
-    gap: 2rem;
-    padding: 0;
-  }
-
-  .no-comics {
-    text-align: center;
-    padding: 2rem;
-    background: var(--bg-secondary);
-    border-radius: 8px;
-  }
-
-  .error-message {
-    background: #ff4444;
-    color: white;
-    padding: 1rem;
-    border-radius: 8px;
-    margin-bottom: 2rem;
-  }
-
-  .debug-info {
-    font-size: 0.8rem;
-    color: var(--text-color);
-    opacity: 0.7;
-    margin-top: 1rem;
-  }
-</style>
+</Layout>

src/pages/index.astro

@@ -1,5 +1,15 @@
 ---
+import Layout from '../layouts/Layout.astro';
+
 export const prerender = false;
 ---
 
-<meta http-equiv="refresh" content="0;url=/en/sfw">
+<Layout title="ComicK-RSS">
+  <main class="min-h-screen flex items-center justify-center">
+    <h1 class="text-6xl font-bold text-center bg-gradient-to-r from-accent via-accent-light to-white bg-clip-text text-transparent">
+      ComicK-RSS
+    </h1>
+  </main>
+
+  <meta http-equiv="refresh" content="0;url=/en/sfw">
+</Layout>