From 9f18c083ab39e156bee803b17b046ab8a5567077 Mon Sep 17 00:00:00 2001
From: Riccardo Giorato <riccardoemanuelegiorato@gmail.com>
Date: Tue, 23 Dec 2025 12:41:11 +0100
Subject: [PATCH] tailwind fixes

---
 app/page.tsx                       | 18 +++++++++---------
 components/landing/navbar.tsx      |  6 +++---
 components/landing/story-input.tsx | 10 +++++-----
 3 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/app/page.tsx b/app/page.tsx
index fdde83a..d534410 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -68,7 +68,7 @@ export default function Home() {
           <div className="relative z-10 flex flex-col gap-4">
             {/* Background floating comics - less prominent */}
             <div className="absolute -top-32 -left-20 opacity-20 animate-float animation-delay-300">
-              <div className="bg-white w-48 aspect-[3/4] p-2 shadow-2xl rounded-sm rotate-12">
+              <div className="bg-white w-48 aspect-3/4 p-2 shadow-2xl rounded-sm rotate-12">
                 <div className="w-full h-full bg-neutral-900 border-2 border-black overflow-hidden">
                   <img
                     src="/manga-style-hero-battle-scene.jpg"
@@ -80,7 +80,7 @@ export default function Home() {
             </div>
 
             <div className="absolute -bottom-40 left-10 opacity-15 animate-float animation-delay-500">
-              <div className="bg-white w-56 aspect-[3/4] p-2 shadow-2xl rounded-sm -rotate-6">
+              <div className="bg-white w-56 aspect-3/4 p-2 shadow-2xl rounded-sm -rotate-6">
                 <div className="w-full h-full bg-neutral-900 border-2 border-black overflow-hidden">
                   <img
                     src="/american-comic-superhero-flying.jpg"
@@ -92,7 +92,7 @@ export default function Home() {
             </div>
 
             <div className="absolute top-20 -right-32 opacity-25 animate-float animation-delay-700">
-              <div className="bg-white w-52 aspect-[3/4] p-2 shadow-2xl rounded-sm -rotate-12">
+              <div className="bg-white w-52 aspect-3/4 p-2 shadow-2xl rounded-sm -rotate-12">
                 <div className="w-full h-full bg-neutral-900 border-2 border-black overflow-hidden">
                   <img
                     src="/noir-detective-comic-panel-dark.jpg"
@@ -104,7 +104,7 @@ export default function Home() {
             </div>
 
             <div className="absolute bottom-10 -right-24 opacity-18 animate-float animation-delay-1000">
-              <div className="bg-white w-44 aspect-[3/4] p-2 shadow-2xl rounded-sm rotate-6">
+              <div className="bg-white w-44 aspect-3/4 p-2 shadow-2xl rounded-sm rotate-6">
                 <div className="w-full h-full bg-neutral-900 border-4 border-black overflow-hidden relative">
                   <img
                     src="/vintage-comic-book-cover-retro.jpg"
@@ -116,7 +116,7 @@ export default function Home() {
             </div>
 
             <div className="relative">
-              <div className="bg-white w-80 aspect-[3/4] p-2 shadow-2xl rounded-sm hover:shadow-indigo/20 hover:shadow-3xl transition-all duration-300 hover:scale-[1.02]">
+              <div className="bg-white w-80 aspect-3/4 p-2 shadow-2xl rounded-sm hover:shadow-indigo/20 hover:shadow-3xl transition-all duration-300 hover:scale-[1.02]">
                 <div className="w-full h-full bg-neutral-900 border-4 border-black overflow-hidden relative">
                   {/* Page transition container */}
                   <div className="relative w-full h-full">
@@ -129,7 +129,7 @@ export default function Home() {
                       <img
                         src="/comic-book-page-with-superhero-action-scene-noir-s.jpg"
                         alt="Comic preview page 1"
-                        className="w-full h-full object-cover opacity-80 grayscale-[20%] contrast-125"
+                        className="w-full h-full object-cover opacity-80 grayscale-20 contrast-125"
                       />
                       <div className="scan-line opacity-50" />
                       <div className="absolute top-2 left-2 px-1.5 py-0.5 bg-black/70 text-[9px] text-white font-mono uppercase tracking-widest border border-white/10">
@@ -149,7 +149,7 @@ export default function Home() {
                       <img
                         src="/american-comic-superhero-flying.jpg"
                         alt="Comic preview page 2"
-                        className="w-full h-full object-cover opacity-80 grayscale-[20%] contrast-125"
+                        className="w-full h-full object-cover opacity-80 grayscale-20 contrast-125"
                       />
                       <div className="scan-line opacity-50" />
                       <div className="absolute top-2 left-2 px-1.5 py-0.5 bg-black/70 text-[9px] text-white font-mono uppercase tracking-widest border border-white/10">
@@ -168,7 +168,7 @@ export default function Home() {
                       <img
                         src="/manga-style-hero-battle-scene.jpg"
                         alt="Comic preview page 3"
-                        className="w-full h-full object-cover opacity-80 grayscale-[20%] contrast-125"
+                        className="w-full h-full object-cover opacity-80 grayscale-20 contrast-125"
                       />
                       <div className="scan-line opacity-50" />
                       <div className="absolute top-2 left-2 px-1.5 py-0.5 bg-black/70 text-[9px] text-white font-mono uppercase tracking-widest border border-white/10">
@@ -186,7 +186,7 @@ export default function Home() {
             <div className="absolute -right-20 top-1/2 -translate-y-1/2 flex flex-col gap-3">
               <button
                 onClick={() => goToPage(1)}
-                className={`w-8 h-8 rounded-full glass-panel flex items-center justify-center shadow-lg cursor-pointer transition-all duration-200 w-8 ${
+                className={`w-8 h-8 rounded-full glass-panel flex items-center justify-center shadow-lg cursor-pointer transition-all duration-200 ${
                   currentPage === 1 ? "border-indigo bg-indigo/10" : "hover:border-indigo/50 hover:bg-indigo/5"
                 }`}
                 aria-label="Go to page 1"
diff --git a/components/landing/navbar.tsx b/components/landing/navbar.tsx
index d702afb..b151d91 100644
--- a/components/landing/navbar.tsx
+++ b/components/landing/navbar.tsx
@@ -32,7 +32,7 @@ export function Navbar() {
         <div className="flex items-center gap-2 sm:gap-3">
           <button
             onClick={() => setShowApiModal(true)}
-            className="flex items-center gap-1.5 sm:gap-2 px-2 sm:px-3 py-1.5 rounded glass-panel glass-panel-hover transition-all text-xs rounded-md"
+            className="flex items-center gap-1.5 sm:gap-2 px-2 sm:px-3 py-1.5 glass-panel glass-panel-hover transition-all text-xs rounded-md"
           >
             <Key className="w-3.5 h-3.5 sm:w-4 sm:h-4" />
             <span className="text-muted-foreground text-xs sm:text-sm hidden sm:inline tracking-tight">
@@ -44,7 +44,7 @@ export function Navbar() {
             href="https://github.com/nutlope/make-comics"
             target="_blank"
             rel="noopener noreferrer"
-            className="flex items-center gap-1.5 sm:gap-2 px-2 sm:px-3 py-1.5 rounded glass-panel glass-panel-hover transition-all text-xs rounded-md"
+            className="flex items-center gap-1.5 sm:gap-2 px-2 sm:px-3 py-1.5 glass-panel glass-panel-hover transition-all text-xs rounded-md"
           >
             <Github className="w-3.5 h-3.5 sm:w-4 sm:h-4" />
             <span className="text-muted-foreground text-xs sm:text-sm hidden sm:inline">
@@ -54,7 +54,7 @@ export function Navbar() {
 
           <Link
             href="/signup"
-            className="flex items-center gap-2 px-2.5 sm:px-3 py-1.5 rounded glass-panel glass-panel-hover transition-all text-xs rounded-md"
+            className="flex items-center gap-2 px-2.5 sm:px-3 py-1.5 glass-panel glass-panel-hover transition-all text-xs rounded-md"
           >
             <span className="text-foreground text-xs sm:text-sm tracking-[-0.01em] font-normal">
               Sign up
diff --git a/components/landing/story-input.tsx b/components/landing/story-input.tsx
index 9f00ff3..dd35268 100644
--- a/components/landing/story-input.tsx
+++ b/components/landing/story-input.tsx
@@ -149,8 +149,8 @@ export function StoryInput({
               )}
             </div>
 
-            <div className="flex items-center gap-2 flex-shrink-0 w-full sm:w-auto justify-start sm:justify-end">
-              <div className="relative dropdown-container z-[60]">
+            <div className="flex items-center gap-2 shrink-0 w-full sm:w-auto justify-start sm:justify-end">
+              <div className="relative dropdown-container z-60">
                 <button
                   onClick={() => {
                     setShowStyleDropdown(!showStyleDropdown);
@@ -213,14 +213,14 @@ export function StoryInput({
 
       {showPreview !== null && previews[showPreview] && (
         <div
-          className="fixed inset-0 bg-black/80 backdrop-blur-sm z-[100] flex items-center justify-center p-4"
+          className="fixed inset-0 bg-black/80 backdrop-blur-sm z-100 flex items-center justify-center p-4"
           onClick={() => setShowPreview(null)}
         >
-          <div className="relative max-w-2xl max-h-[80vh] glass-panel p-4 rounded-xl z-[101]">
+          <div className="relative max-w-2xl max-h-[80vh] glass-panel p-4 rounded-xl z-101">
             <Button
               variant="ghost"
               size="icon"
-              className="absolute top-2 right-2 h-8 w-8 hover:bg-white/10 z-[102]"
+              className="absolute top-2 right-2 h-8 w-8 hover:bg-white/10 z-102"
               onClick={() => setShowPreview(null)}
             >
               <X className="w-4 h-4" />