Update src/app/page.tsx

Merge version_2 into main

src/app/page.tsx

@@ -9,6 +9,9 @@ import { useState } from "react";
 
 export default function ClipToolPage() {
   const [videoUrl, setVideoUrl] = useState("");
+  const [captions, setCaptions] = useState(true);
+  const [layout, setLayout] = useState("vertical");
+  const [timeframe, setTimeframe] = useState("30s");
 
   return (
     <ThemeProvider
@@ -33,7 +36,7 @@ export default function ClipToolPage() {
 
         <div id="tool-interface" data-section="tool-interface" className="py-20 flex flex-col items-center justify-center min-h-[80vh] px-4 text-center">
           <h1 className="text-4xl md:text-5xl font-bold mb-6">ClipGen AI Tool</h1>
-          <p className="max-w-xl mb-10 opacity-80">Paste your YouTube video URL below to start generating high-impact clips with custom layout and caption settings.</p>
+          <p className="max-w-xl mb-10 opacity-80">Input your YouTube URL and configure your clipping settings below.</p>
           
           <div className="w-full max-w-lg space-y-6">
             <Input 
@@ -43,24 +46,47 @@ export default function ClipToolPage() {
               ariaLabel="YouTube Video URL"
             />
             
-            <div className="grid grid-cols-1 md:grid-cols-2 gap-4 text-left">
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-4 text-left">
                 <div className="p-4 rounded-xl border">
                     <h3 className="font-semibold mb-2">Captions</h3>
-                    <p className="text-sm opacity-70">Enable AI-powered subtitles</p>
+                    <select 
+                        value={captions ? "on" : "off"} 
+                        onChange={(e) => setCaptions(e.target.value === "on")}
+                        className="w-full bg-transparent border-none focus:ring-0"
+                    >
+                        <option value="on">Enabled</option>
+                        <option value="off">Disabled</option>
+                    </select>
                 </div>
                 <div className="p-4 rounded-xl border">
                     <h3 className="font-semibold mb-2">Layout</h3>
-                    <p className="text-sm opacity-70">Optimize for TikTok/Reels</p>
+                    <select 
+                        value={layout} 
+                        onChange={(e) => setLayout(e.target.value)}
+                        className="w-full bg-transparent border-none focus:ring-0"
+                    >
+                        <option value="vertical">Vertical (9:16)</option>
+                        <option value="square">Square (1:1)</option>
+                        <option value="horizontal">Horizontal (16:9)</option>
+                    </select>
                 </div>
                 <div className="p-4 rounded-xl border">
-                    <h3 className="font-semibold mb-2">Timeframe</h3>
+                    <h3 className="font-semibold mb-2">Time</h3>
-                    <p className="text-sm opacity-70">Select clip duration</p>
+                    <select 
+                        value={timeframe} 
+                        onChange={(e) => setTimeframe(e.target.value)}
+                        className="w-full bg-transparent border-none focus:ring-0"
+                    >
+                        <option value="30s">30 Seconds</option>
+                        <option value="60s">60 Seconds</option>
+                        <option value="90s">90 Seconds</option>
+                    </select>
                 </div>
             </div>
 
             <ButtonElasticEffect 
                 text="Generate Clips Now" 
-                onClick={() => alert(`Generating clips for: ${videoUrl}`)}
+                onClick={() => alert(`Generating ${timeframe} ${layout} clips for: ${videoUrl} (Captions: ${captions ? "On" : "Off"})`)}
                 className="w-full"
             />
           </div>