Refactor character image handling and API calls

components/landing/create-button.tsx

@@ -5,6 +5,7 @@ import { useRouter } from "next/navigation"
 import { ArrowRight, Loader2 } from "lucide-react"
 import { Button } from "@/components/ui/button"
 import { useToast } from "@/hooks/use-toast"
+import { useS3Upload } from "next-s3-upload"
 
 interface CreateButtonProps {
   prompt: string
@@ -17,6 +18,7 @@ export function CreateButton({ prompt, style, characterFiles }: CreateButtonProp
   const [isLoading, setIsLoading] = useState(false)
   const [loadingStep, setLoadingStep] = useState(0)
   const { toast } = useToast()
+  const { uploadToS3 } = useS3Upload()
 
   useEffect(() => {
     if (!isLoading) return
@@ -53,7 +55,7 @@ export function CreateButton({ prompt, style, characterFiles }: CreateButtonProp
     try {
       const apiKey = localStorage.getItem("together_api_key")
 
-      const characterUploads = await Promise.all(characterFiles.map((file) => fileToBase64(file)))
+      const characterUploads = await Promise.all(characterFiles.map((file) => uploadToS3(file).then(({ url }) => url)))
 
       if (!apiKey) {
         const comicData = {
@@ -77,7 +79,7 @@ export function CreateButton({ prompt, style, characterFiles }: CreateButtonProp
           prompt,
           apiKey,
           style,
-          characterImages: characterUploads, // Send base64 images to API
+          characterImages: characterUploads, // Send S3 URLs to API
         }),
       })
 
@@ -113,7 +115,7 @@ export function CreateButton({ prompt, style, characterFiles }: CreateButtonProp
         router.push("/editor")
       }, 1000)
     } catch (error) {
-      console.error("[v0] Error creating comic:", error)
+      console.error("Error creating comic:", error)
       toast({
         title: "Creation failed",
         description: error instanceof Error ? error.message : "Failed to create comic. Please try again.",
@@ -124,14 +126,7 @@ export function CreateButton({ prompt, style, characterFiles }: CreateButtonProp
     }
   }
 
-  const fileToBase64 = (file: File): Promise<string> => {
-    return new Promise((resolve, reject) => {
-      const reader = new FileReader()
-      reader.onload = () => resolve(reader.result as string)
-      reader.onerror = reject
-      reader.readAsDataURL(file)
-    })
-  }
+
 
   const loadingSteps = ["Enhancing prompt...", "Generating scenes...", "Creating your comic..."]
 

components/landing/hero-section.tsx

@@ -1,25 +1,34 @@
-"use client"
+"use client";
+
+import { TOGETHER_LINK } from "@/lib/utils";
 
 export function LandingHero() {
   return (
     <header className="relative py-8 sm:py-12 md:py-16 lg:py-0">
       <div className="relative z-10">
         <div className="lg:text-left text-center">
-          <div className="inline-flex items-center gap-1 px-2.5 py-1 rounded-full border border-border glass-panel mb-4 sm:mb-6 w-fit">
+          <a
+            href={TOGETHER_LINK}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="inline-flex items-center gap-1 px-2.5 py-1 rounded-full border border-border glass-panel mb-4 sm:mb-6 w-fit"
+          >
             <span className="text-[10px] font-medium text-muted-foreground tracking-[-0.015em]">
               Powered by Together AI
             </span>
-          </div>
+          </a>
 
           <h1 className="text-5xl sm:text-6xl md:text-7xl lg:text-8xl text-foreground uppercase mb-4 sm:mb-5 tracking-wide font-heading font-semibold leading-tight sm:leading-[5.2rem]">
-            Create stunning <span className="text-indigo font-semibold">comics</span>
+            Create stunning{" "}
+            <span className="text-indigo font-semibold">comics</span>
           </h1>
 
           <p className="text-muted-foreground leading-relaxed max-w-md mx-auto lg:mx-0 tracking-[-0.02em] px-4 sm:px-0 text-sm">
-            Describe your scene, choose a style, and let AI render professional comic panels instantly.
+            Describe your scene, choose a style, and let AI render professional
+            comic panels instantly.
           </p>
         </div>
       </div>
     </header>
-  )
+  );
 }