Update background images

.gitignore

@@ -27,3 +27,5 @@ yarn-error.log*
 next-env.d.ts
 # clerk configuration (can include secrets)
 /.clerk/
+
+.DS_Store

app/stories/page.tsx

@@ -157,7 +157,7 @@ export default function StoriesPage() {
                             </div>
 
                             <div className="absolute bottom-0 left-0 right-0 p-3 text-left">
-                              <h3 className="font-display text-sm text-white leading-tight line-clamp-1 mb-1 group-hover:text-indigo-100 transition-colors duration-300">
+                              <h3 className="font-heading text-sm text-white line-clamp-1 mb-1 group-hover:text-indigo-100 transition-colors duration-300 font-semibold">
                                 {story.title}
                               </h3>
                               <p className="text-[10px] text-white/60 font-mono uppercase tracking-wider group-hover:text-white/80 transition-colors duration-300">

components/editor/editor-toolbar.tsx

@@ -130,7 +130,7 @@ export function EditorToolbar({
           />
         ) : (
           <h1
-            className={`text-sm sm:text-base text-white font-display font-normal tracking-[-0.02em] truncate ${
+            className={`text-base sm:text-xl text-white font-heading font-semibold  truncate ${
               isOwner && onTitleUpdate
                 ? "cursor-pointer hover:text-gray-300"
                 : ""

components/editor/generate-page-modal.tsx

@@ -333,13 +333,9 @@ export function GeneratePageModal({
                 <div className="mt-3 pt-3 border-t border-border/30 space-y-3">
                   {/* Character Selection */}
                   <div className="space-y-2">
-                    <label className="text-[10px] uppercase text-muted-foreground tracking-[0.02em] font-medium">
-                      Characters (select up to 2)
-                    </label>
-
                     {/* Existing and new characters list */}
                     {characters.length > 0 && (
-                      <div className="flex flex-wrap gap-2">
+                      <div className="flex flex-wrap gap-2 pb-2">
                         {characters.map((char, index) => {
                           const isSelected =
                             selectedCharacterIndices.has(index);

components/landing/comic-creation-form.tsx

@@ -360,7 +360,7 @@ export function ComicCreationForm({
         </div>
       )}
 
-      <div className="pt-2">
+      <div className="pt-4">
         {!isLoaded ? (
           <div className="h-10" />
         ) : isSignedIn ? (

components/landing/comic-preview.tsx

@@ -16,7 +16,7 @@ export function ComicPreview({
           <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"
+                src="/manga.jpg"
                 alt="Background comic"
                 className="w-full h-full object-cover opacity-60"
               />
@@ -28,7 +28,7 @@ export function ComicPreview({
           <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"
+                src="/american.jpg"
                 alt="Background comic"
                 className="w-full h-full object-cover opacity-60"
               />
@@ -40,7 +40,7 @@ export function ComicPreview({
           <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"
+                src="/noir.jpg"
                 alt="Background comic"
                 className="w-full h-full object-cover opacity-60"
               />
@@ -52,7 +52,7 @@ export function ComicPreview({
           <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"
+                src="/vintage-superman.jpg"
                 alt="Background comic"
                 className="w-full h-full object-cover opacity-60"
               />
@@ -74,7 +74,7 @@ export function ComicPreview({
                   }`}
                 >
                   <img
-                    src="/american-comic-superhero-flying.jpg"
+                    src="/american.jpg"
                     alt="Comic preview page 1"
                     className="w-full h-full object-cover opacity-80 grayscale-20 contrast-125"
                   />
@@ -96,7 +96,7 @@ export function ComicPreview({
                   }`}
                 >
                   <img
-                    src="/manga-style-hero-battle-scene.jpg"
+                    src="/manga.jpg"
                     alt="Comic preview page 2"
                     className="w-full h-full object-cover opacity-80 grayscale-20 contrast-125"
                   />
@@ -105,7 +105,7 @@ export function ComicPreview({
                     Manga
                   </div>
                   <div className="absolute bottom-8 left-4 right-8 bg-white text-black p-2 text-[10px] font-medium border-2 border-black shadow-[2px_2px_0px_rgba(0,0,0,1)] leading-tight transform -rotate-1">
-                    {'"The battle begins!"'}
+                    {'"Time to save the world!"'}
                   </div>
                 </div>
 
@@ -117,7 +117,7 @@ export function ComicPreview({
                   }`}
                 >
                   <img
-                    src="/comic-book-page-with-superhero-action-scene-noir-s.jpg"
+                    src="/noir.jpg"
                     alt="Comic preview page 3"
                     className="w-full h-full object-cover opacity-80 grayscale-20 contrast-125"
                   />

components/landing/navbar.tsx

@@ -77,15 +77,15 @@ export function Navbar() {
             </SignInButton>
           </SignedOut>
           <SignedIn>
-            {isOnStoriesPage ? (
+             {isOnStoriesPage ? (
-              <Link href="/">
+               <Link href="/">
-                <button 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 cursor-pointer">
+                 <button className="flex items-center gap-1.5 sm:gap-2 px-2 sm:px-3 py-1.5 bg-white hover:bg-neutral-200 text-black transition-all text-xs rounded-md cursor-pointer font-medium">
-                  <Plus className="w-3.5 h-3.5 sm:w-4 sm:h-4" />
+                   <Plus 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">
+                   <span className="text-black text-xs sm:text-sm hidden sm:inline tracking-tight">
-                    Create New
+                     Create New
-                  </span>
+                   </span>
-                </button>
+                 </button>
-              </Link>
+               </Link>
             ) : (
               <Link href="/stories">
                 <button 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 cursor-pointer">

public/placeholder-logo.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="215" height="48" fill="none"><path fill="#000" d="M57.588 9.6h6L73.828 38h-5.2l-2.36-6.88h-11.36L52.548 38h-5.2l10.24-28.4Zm7.16 17.16-4.16-12.16-4.16 12.16h8.32Zm23.694-2.24c-.186-1.307-.706-2.32-1.56-3.04-.853-.72-1.866-1.08-3.04-1.08-1.68 0-2.986.613-3.92 1.84-.906 1.227-1.36 2.947-1.36 5.16s.454 3.933 1.36 5.16c.934 1.227 2.24 1.84 3.92 1.84 1.254 0 2.307-.373 3.16-1.12.854-.773 1.387-1.867 1.6-3.28l5.12.24c-.186 1.68-.733 3.147-1.64 4.4-.906 1.227-2.08 2.173-3.52 2.84-1.413.667-2.986 1-4.72 1-2.08 0-3.906-.453-5.48-1.36-1.546-.907-2.76-2.2-3.64-3.88-.853-1.68-1.28-3.627-1.28-5.84 0-2.24.427-4.187 1.28-5.84.88-1.68 2.094-2.973 3.64-3.88 1.574-.907 3.4-1.36 5.48-1.36 1.68 0 3.227.32 4.64.96 1.414.64 2.56 1.56 3.44 2.76.907 1.2 1.454 2.6 1.64 4.2l-5.12.28Zm11.486-7.72.12 3.4c.534-1.227 1.307-2.173 2.32-2.84 1.04-.693 2.267-1.04 3.68-1.04 1.494 0 2.76.387 3.8 1.16 1.067.747 1.827 1.813 2.28 3.2.507-1.44 1.294-2.52 2.36-3.24 1.094-.747 2.414-1.12 3.96-1.12 1.414 0 2.64.307 3.68.92s1.84 1.52 2.4 2.72c.56 1.2.84 2.667.84 4.4V38h-4.96V25.92c0-1.813-.293-3.187-.88-4.12-.56-.96-1.413-1.44-2.56-1.44-.906 0-1.68.213-2.32.64-.64.427-1.133 1.053-1.48 1.88-.32.827-.48 1.84-.48 3.04V38h-4.56V25.92c0-1.2-.133-2.213-.4-3.04-.24-.827-.626-1.453-1.16-1.88-.506-.427-1.133-.64-1.88-.64-.906 0-1.68.227-2.32.68-.64.427-1.133 1.053-1.48 1.88-.32.827-.48 1.827-.48 3V38h-4.96V16.8h4.48Zm26.723 10.6c0-2.24.427-4.187 1.28-5.84.854-1.68 2.067-2.973 3.64-3.88 1.574-.907 3.4-1.36 5.48-1.36 1.84 0 3.494.413 4.96 1.24 1.467.827 2.64 2.08 3.52 3.76.88 1.653 1.347 3.693 1.4 6.12v1.32h-15.08c.107 1.813.614 3.227 1.52 4.24.907.987 2.134 1.48 3.68 1.48.987 0 1.88-.253 2.68-.76a4.803 4.803 0 0 0 1.84-2.2l5.08.36c-.64 2.027-1.84 3.64-3.6 4.84-1.733 1.173-3.733 1.76-6 1.76-2.08 0-3.906-.453-5.48-1.36-1.573-.907-2.786-2.2-3.64-3.88-.853-1.68-1.28-3.627-1.28-5.84Zm15.16-2.04c-.213-1.733-.76-3.013-1.64-3.84-.853-.827-1.893-1.24-3.12-1.24-1.44 0-2.6.453-3.48 1.36-.88.88-1.44 2.12-1.68 3.72h9.92ZM163.139 9.6V38h-5.04V9.6h5.04Zm8.322 7.2.24 5.88-.64-.36c.32-2.053 1.094-3.56 2.32-4.52 1.254-.987 2.787-1.48 4.6-1.48 2.32 0 4.107.733 5.36 2.2 1.254 1.44 1.88 3.387 1.88 5.84V38h-4.96V25.92c0-1.253-.12-2.28-.36-3.08-.24-.8-.64-1.413-1.2-1.84-.533-.427-1.253-.64-2.16-.64-1.44 0-2.573.48-3.4 1.44-.8.933-1.2 2.307-1.2 4.12V38h-4.96V16.8h4.48Zm30.003 7.72c-.186-1.307-.706-2.32-1.56-3.04-.853-.72-1.866-1.08-3.04-1.08-1.68 0-2.986.613-3.92 1.84-.906 1.227-1.36 2.947-1.36 5.16s.454 3.933 1.36 5.16c.934 1.227 2.24 1.84 3.92 1.84 1.254 0 2.307-.373 3.16-1.12.854-.773 1.387-1.867 1.6-3.28l5.12.24c-.186 1.68-.733 3.147-1.64 4.4-.906 1.227-2.08 2.173-3.52 2.84-1.413.667-2.986 1-4.72 1-2.08 0-3.906-.453-5.48-1.36-1.546-.907-2.76-2.2-3.64-3.88-.853-1.68-1.28-3.627-1.28-5.84 0-2.24.427-4.187 1.28-5.84.88-1.68 2.094-2.973 3.64-3.88 1.574-.907 3.4-1.36 5.48-1.36 1.68 0 3.227.32 4.64.96 1.414.64 2.56 1.56 3.44 2.76.907 1.2 1.454 2.6 1.64 4.2l-5.12.28Zm11.443 8.16V38h-5.6v-5.32h5.6Z"/><path fill="#171717" fill-rule="evenodd" d="m7.839 40.783 16.03-28.054L20 6 0 40.783h7.839Zm8.214 0H40L27.99 19.894l-4.02 7.032 3.976 6.914H20.02l-3.967 6.943Z" clip-rule="evenodd"/></svg>