From 878e15e1c89f7fd64e514138f99c8d7c7f51f847 Mon Sep 17 00:00:00 2001
From: akramj13 <125495000+akramj13@users.noreply.github.com>
Date: Tue, 18 Mar 2025 00:25:13 -0400
Subject: [PATCH] updated chatgpt styles

---
 app/dashboard/chatgpt-video/page.tsx          | 662 ++++++++++--------
 app/dashboard/chatgpt-video/preview/page.tsx  | 149 ++--
 .../select-caption-style/page.tsx             |  25 +-
 .../chatgpt-video/select-voice/page.tsx       |  30 +-
 .../chatgpt-video/video-style/page.tsx        | 357 ++++++++++
 5 files changed, 825 insertions(+), 398 deletions(-)
 create mode 100644 app/dashboard/chatgpt-video/video-style/page.tsx

diff --git a/app/dashboard/chatgpt-video/page.tsx b/app/dashboard/chatgpt-video/page.tsx
index 3c968c3..841cbe9 100644
--- a/app/dashboard/chatgpt-video/page.tsx
+++ b/app/dashboard/chatgpt-video/page.tsx
@@ -1,355 +1,411 @@
 "use client";
 
-import React, { useState, useEffect } from "react";
+import { useState } from "react";
 import { useRouter } from "next/navigation";
-import {
-  Card,
-  CardContent,
-  CardHeader,
-  CardTitle,
-  CardDescription,
-} from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { Card, CardContent } from "@/components/ui/card";
 import { useVideoContext } from "@/app/dashboard/_components/VideoContext";
-import { Label } from "@/components/ui/label";
 import { motion, AnimatePresence } from "framer-motion";
-import { ArrowRight, Sparkles, Brain, AlertCircle } from "lucide-react";
-import { Alert, AlertDescription } from "@/components/ui/alert";
+import {
+  BrainCircuit,
+  Sparkles,
+  MessageCircle,
+  ArrowRight,
+  Bot,
+  Edit,
+} from "lucide-react";
 
-const CATEGORIES = [
-  {
-    id: "education",
-    name: "Education",
-    example: "How Quantum Computing Works",
-    icon: "🧠",
-  },
-  {
-    id: "science-tech",
-    name: "Science & Tech",
-    example: "The Future of AI",
-    icon: "🔬",
-  },
-  {
-    id: "entertainment",
-    name: "Entertainment",
-    example: "The Best Movies of 2025",
-    icon: "🎬",
-  },
-  {
-    id: "business-finance",
-    name: "Business & Finance",
-    example: "How to Invest in 2025",
-    icon: "💼",
-  },
-  {
-    id: "history-geography",
-    name: "History & Geography",
-    example: "The Fall of the Roman Empire",
-    icon: "🏛️",
-  },
-];
+// Custom animated tabs trigger component
+interface AnimatedTabsTriggerProps {
+  value: string;
+  activeTab: string;
+  icon: React.ReactNode;
+  label: string;
+}
 
-const VIDEO_STYLES = [
-  {
-    type: "minimalist",
-    name: "Minimalist",
-    description: "Simple text animations & clean design",
-    icon: "🎨",
-  },
-  {
-    type: "animated",
-    name: "Animated",
-    description: "AI-generated visuals & icons",
-    icon: "🖼",
-  },
-  {
-    type: "cinematic",
-    name: "Cinematic",
-    description: "Realistic visuals & dramatic effects",
-    icon: "🎥",
-  },
-  {
-    type: "storytelling",
-    name: "Storytelling",
-    description: "More personal & engaging",
-    icon: "📖",
-  },
-  {
-    type: "news-report",
-    name: "News Report",
-    description: "Professional & factual",
-    icon: "📰",
-  },
-  {
-    type: "gaming",
-    name: "Gaming Style",
-    description: "Bright, high-energy visuals",
-    icon: "🎮",
-  },
-];
+const AnimatedTabsTrigger = ({
+  value,
+  activeTab,
+  icon,
+  label,
+}: AnimatedTabsTriggerProps) => {
+  const isActive = activeTab === value;
+
+  return (
+    <TabsTrigger
+      value={value}
+      className="relative z-20 data-[state=active]:bg-emerald-500/20 data-[state=active]:text-emerald-300 transition-all duration-300 data-[state=active]:shadow-[0_0_15px_rgba(16,185,129,0.3)] py-3"
+    >
+      <motion.div
+        initial="inactive"
+        animate={isActive ? "active" : "inactive"}
+        variants={tabTriggerVariants}
+        className="flex items-center justify-center space-x-2 text-sm md:text-base"
+      >
+        {icon}
+        <span>{label}</span>
+      </motion.div>
+    </TabsTrigger>
+  );
+};
 
-// Animation variants
 const containerVariants = {
   hidden: { opacity: 0 },
   visible: {
     opacity: 1,
     transition: {
-      duration: 0.5,
-      when: "beforeChildren",
       staggerChildren: 0.1,
+      delayChildren: 0.2,
     },
   },
 };
 
 const itemVariants = {
-  hidden: { y: 20, opacity: 0 },
+  hidden: { y: 10, opacity: 0 },
   visible: {
     y: 0,
     opacity: 1,
-    transition: { duration: 0.4 },
+    transition: {
+      type: "spring",
+      stiffness: 260,
+      damping: 20,
+    },
   },
 };
 
-const cardHoverVariants = {
-  hover: {
-    y: -5,
-    boxShadow: "0 10px 25px -5px rgba(124, 58, 237, 0.2)",
-    transition: { duration: 0.2 },
+const glowVariants = {
+  initial: { scale: 0.95, opacity: 0.5 },
+  animate: {
+    scale: [0.95, 1.05, 0.95],
+    opacity: [0.5, 0.8, 0.5],
+    transition: {
+      duration: 4,
+      repeat: Infinity,
+      ease: "easeInOut",
+    },
   },
 };
 
-function ChatGPTVideoPage() {
-  const router = useRouter();
-  const { videoData, setVideoData } = useVideoContext();
-  const [selectedCategory, setSelectedCategory] = useState("");
-  const [customTopic, setCustomTopic] = useState("");
-  const [selectedStyle, setSelectedStyle] = useState("minimalist");
-  const [error, setError] = useState("");
-  const [isMobileView, setIsMobileView] = useState(false);
-
-  // Check for mobile view on mount and window resize
-  useEffect(() => {
-    const checkMobileView = () => {
-      setIsMobileView(window.innerWidth < 768);
-    };
-
-    // Initial check
-    checkMobileView();
+// Add tab content animation variants
+const tabContentVariants = {
+  hidden: {
+    opacity: 0,
+    y: 20,
+    scale: 0.95,
+  },
+  visible: {
+    opacity: 1,
+    y: 0,
+    scale: 1,
+    transition: {
+      type: "spring",
+      stiffness: 300,
+      damping: 30,
+      duration: 0.4,
+    },
+  },
+  exit: {
+    opacity: 0,
+    y: -20,
+    scale: 0.95,
+    transition: {
+      duration: 0.3,
+    },
+  },
+};
 
-    // Add event listener for window resize
-    window.addEventListener("resize", checkMobileView);
+// Add tab trigger animation variants
+const tabTriggerVariants = {
+  inactive: {
+    scale: 0.95,
+    opacity: 0.7,
+  },
+  active: {
+    scale: 1,
+    opacity: 1,
+    transition: {
+      type: "spring",
+      stiffness: 300,
+      damping: 20,
+    },
+  },
+};
 
-    // Cleanup
-    return () => {
-      window.removeEventListener("resize", checkMobileView);
-    };
-  }, []);
+export default function ChatGPTVideoPage() {
+  const router = useRouter();
+  const { videoData, setVideoData } = useVideoContext();
+  const [activeTab, setActiveTab] = useState("features");
 
   const handleContinue = () => {
-    if (!selectedCategory && !customTopic) {
-      setError("Please select a category or enter a custom topic");
-      return;
-    }
-
-    // Update video data with selected options
     setVideoData({
-      ...videoData,
       type: "chatgpt",
       content: {
-        ...videoData?.content,
-        text: customTopic || selectedCategory, // Store the actual topic text
-      },
-      style: {
-        ...videoData?.style,
-        chatgptSelectedTopic: selectedCategory || undefined, // Store selected category if any
-        chatgptCustomTopic: customTopic || undefined, // Store custom topic if any
-        chatgptVideoStyle: selectedStyle,
+        text: "",
       },
     });
 
-    // Navigate to the next step
-    router.push("/dashboard/chatgpt-video/select-voice");
+    router.push("/dashboard/chatgpt-video/video-style");
   };
 
   return (
-    <AnimatePresence mode="wait">
-      <motion.div
-        className={`container mx-auto py-8 px-4 ${
-          isMobileView ? "max-w-full" : "max-w-4xl"
-        }`}
-        variants={containerVariants}
-        initial="hidden"
-        animate="visible"
-        exit={{ opacity: 0 }}
-      >
-        <motion.div variants={itemVariants}>
-          <Card className="border border-gray-800 shadow-lg bg-black text-white overflow-hidden">
-            <CardHeader className="bg-gradient-to-r from-purple-900 to-pink-900 border-b border-gray-800">
-              <CardTitle className="text-2xl font-bold text-center flex items-center justify-center gap-2">
-                <Sparkles className="h-6 w-6 text-purple-300" />
-                Create ChatGPT Style Video
-                <Sparkles className="h-6 w-6 text-pink-300" />
-              </CardTitle>
-              <CardDescription className="text-gray-300 text-center">
-                Generate engaging AI-powered videos with just a few clicks
-              </CardDescription>
-            </CardHeader>
-            <CardContent className="space-y-8 p-6 bg-gray-900">
-              {/* Error Alert */}
-              <AnimatePresence>
-                {error && (
-                  <motion.div
-                    initial={{ opacity: 0, y: -10 }}
-                    animate={{ opacity: 1, y: 0 }}
-                    exit={{ opacity: 0, y: -10 }}
-                  >
-                    <Alert
-                      variant="destructive"
-                      className="border-red-900 bg-red-900/20 text-red-300"
-                    >
-                      <AlertCircle className="h-4 w-4 mr-2" />
-                      <AlertDescription>{error}</AlertDescription>
-                    </Alert>
-                  </motion.div>
-                )}
-              </AnimatePresence>
+    <div className="relative min-h-screen bg-gradient-to-b from-black via-emerald-950/20 to-black overflow-hidden">
+      {/* Decorative Elements */}
+      <div className="fixed inset-0 pointer-events-none">
+        <motion.div
+          variants={glowVariants}
+          initial="initial"
+          animate="animate"
+          className="absolute top-[10%] left-[5%] md:left-[10%] w-[45vw] md:w-[25vw] h-[45vw] md:h-[25vw] max-w-xl max-h-xl bg-emerald-500/10 rounded-full blur-3xl"
+        />
+        <motion.div
+          variants={glowVariants}
+          initial="initial"
+          animate="animate"
+          className="absolute top-[30%] right-[5%] md:right-[10%] w-[50vw] md:w-[30vw] h-[50vw] md:h-[30vw] max-w-xl max-h-xl bg-teal-500/10 rounded-full blur-3xl"
+        />
+      </div>
 
-              {/* Topic Selection */}
-              <motion.div variants={itemVariants} className="space-y-4">
-                <div className="flex items-center gap-2">
-                  <div className="bg-purple-800 w-8 h-8 rounded-full flex items-center justify-center text-white font-bold">
-                    1
-                  </div>
-                  <Label className="text-lg font-semibold text-white">
-                    Select Topic
-                  </Label>
-                </div>
+      {/* Main Content Container */}
+      <div className="mt-10 relative z-10 w-full min-h-screen flex flex-col items-center justify-start pt-12 md:pt-16 lg:pt-0 lg:justify-center">
+        {/* Header Section */}
+        <div className="flex flex-col items-center space-y-4 mb-8 px-4">
+          <div className="relative mb-2">
+            <motion.div
+              initial={{ scale: 0 }}
+              animate={{ scale: 1 }}
+              transition={{
+                type: "spring",
+                stiffness: 260,
+                damping: 20,
+              }}
+              className="p-2.5 md:p-3.5 rounded-full bg-emerald-500/10 shadow-[0_0_20px_rgba(16,185,129,0.4)] backdrop-blur-sm border border-emerald-500/20"
+            >
+              <BrainCircuit className="w-5 h-5 md:w-7 md:h-7 text-emerald-400" />
+            </motion.div>
+            <motion.div
+              animate={{
+                scale: [1, 1.2, 1],
+                rotate: [0, 360],
+              }}
+              transition={{
+                duration: 3,
+                repeat: Infinity,
+                ease: "linear",
+              }}
+              className="absolute -top-1 -right-1"
+            >
+              <Sparkles className="w-3 h-3 md:w-4 md:h-4 text-emerald-400" />
+            </motion.div>
+          </div>
+
+          <h1 className="text-3xl md:text-5xl lg:text-6xl font-bold tracking-tight text-center">
+            <span className="bg-gradient-to-r from-emerald-400 via-teal-300 to-emerald-400 bg-clip-text text-transparent">
+              ChatGPT Video Creator
+            </span>
+          </h1>
+          <p className="text-gray-400 text-center max-w-xl text-sm md:text-base">
+            Transform AI-generated content into engaging videos with
+            customizable styles
+          </p>
+        </div>
 
-                {/* Category Selection */}
-                <motion.div variants={itemVariants} className="space-y-2">
-                  <Label className="text-gray-300">Choose a Category</Label>
-                  <Select
-                    value={selectedCategory}
-                    onValueChange={(value) => {
-                      setSelectedCategory(value);
-                      setError("");
-                    }}
-                  >
-                    <SelectTrigger className="bg-gray-800 border-gray-700 text-gray-200 focus:ring-purple-500">
-                      <SelectValue placeholder="Select a category" />
-                    </SelectTrigger>
-                    <SelectContent className="bg-gray-800 border-gray-700 text-gray-200">
-                      {CATEGORIES.map((category) => (
-                        <SelectItem
-                          key={category.id}
-                          value={category.id}
-                          className="focus:bg-purple-900 focus:text-white"
+        {/* Card Section */}
+        <div className="w-full max-w-xl mx-auto px-4 sm:px-6 md:px-8 mb-12">
+          <div className="bg-black/40 backdrop-blur-md border border-emerald-500/20 shadow-[0_0_30px_rgba(16,185,129,0.15)] rounded-xl overflow-hidden">
+            <div className="p-4 sm:p-6 md:p-8">
+              <Tabs
+                defaultValue="features"
+                className="w-full"
+                onValueChange={(value) => setActiveTab(value)}
+              >
+                <TabsList className="grid w-full grid-cols-2 mb-6 pb-14 gap-1 bg-black/50 border border-emerald-500/20 rounded-lg overflow-hidden">
+                  <AnimatedTabsTrigger
+                    value="features"
+                    activeTab={activeTab}
+                    icon={<Bot className="w-3.5 h-3.5 md:w-4 md:h-4" />}
+                    label="Features"
+                  />
+                  <AnimatedTabsTrigger
+                    value="howto"
+                    activeTab={activeTab}
+                    icon={<Edit className="w-3.5 h-3.5 md:w-4 md:h-4" />}
+                    label="How to Use"
+                  />
+                </TabsList>
+
+                <div className="relative z-20">
+                  <AnimatePresence mode="wait">
+                    <TabsContent key="features" value="features">
+                      <motion.div
+                        variants={tabContentVariants}
+                        initial="hidden"
+                        animate="visible"
+                        exit="exit"
+                        className="space-y-4"
+                      >
+                        <Card className="bg-emerald-950/20 border border-emerald-500/20 shadow-inner">
+                          <CardContent className="p-4">
+                            <h3 className="font-medium text-emerald-300 mb-2">
+                              AI Content Generation
+                            </h3>
+                            <p className="text-gray-400 text-sm">
+                              Leverage ChatGPT to create engaging video scripts
+                              automatically
+                            </p>
+                          </CardContent>
+                        </Card>
+
+                        <Card className="bg-emerald-950/20 border border-emerald-500/20 shadow-inner">
+                          <CardContent className="p-4">
+                            <h3 className="font-medium text-emerald-300 mb-2">
+                              Topic Expansion
+                            </h3>
+                            <p className="text-gray-400 text-sm">
+                              Turn simple ideas into detailed, well-structured
+                              content
+                            </p>
+                          </CardContent>
+                        </Card>
+
+                        <Card className="bg-emerald-950/20 border border-emerald-500/20 shadow-inner">
+                          <CardContent className="p-4">
+                            <h3 className="font-medium text-emerald-300 mb-2">
+                              Customizable Prompts
+                            </h3>
+                            <p className="text-gray-400 text-sm">
+                              Create content in different styles, tones, and
+                              perspectives
+                            </p>
+                          </CardContent>
+                        </Card>
+
+                        <Card className="bg-emerald-950/20 border border-emerald-500/20 shadow-inner">
+                          <CardContent className="p-4">
+                            <h3 className="font-medium text-emerald-300 mb-2">
+                              Voice & Visual Integration
+                            </h3>
+                            <p className="text-gray-400 text-sm">
+                              Pair AI-generated content with custom voices and
+                              visuals
+                            </p>
+                          </CardContent>
+                        </Card>
+
+                        <Button
+                          onClick={handleContinue}
+                          className="w-full h-12 text-base bg-gradient-to-r from-emerald-600 to-teal-600 hover:from-emerald-500 hover:to-teal-500 text-white transition-all duration-300 shadow-[0_0_15px_rgba(16,185,129,0.3)] hover:shadow-[0_0_20px_rgba(16,185,129,0.4)] rounded-lg font-medium mt-4"
                         >
-                          <div className="flex items-center gap-2">
-                            <span>{category.icon}</span>
-                            <span>
-                              {category.name} - {category.example}
-                            </span>
+                          <div className="flex items-center justify-center space-x-3">
+                            <span>Get Started</span>
+                            <ArrowRight className="w-5 h-5" />
                           </div>
-                        </SelectItem>
-                      ))}
-                    </SelectContent>
-                  </Select>
-                </motion.div>
+                        </Button>
+                      </motion.div>
+                    </TabsContent>
 
-                {/* Custom Topic Input */}
-                <motion.div variants={itemVariants} className="space-y-2">
-                  <Label className="text-gray-300">Or Enter Custom Topic</Label>
-                  <Input
-                    placeholder="Enter your custom topic..."
-                    value={customTopic}
-                    onChange={(e) => {
-                      setCustomTopic(e.target.value);
-                      setError("");
-                    }}
-                    className="bg-gray-800 border-gray-700 text-gray-200 focus:ring-purple-500 focus:border-purple-500"
-                  />
-                </motion.div>
-              </motion.div>
+                    <TabsContent key="howto" value="howto">
+                      <motion.div
+                        variants={tabContentVariants}
+                        initial="hidden"
+                        animate="visible"
+                        exit="exit"
+                        className="space-y-4"
+                      >
+                        <ol className="space-y-4 text-gray-300">
+                          <li className="flex space-x-3 items-start">
+                            <div className="flex-shrink-0 bg-emerald-500/20 text-emerald-400 rounded-full h-6 w-6 flex items-center justify-center font-medium">
+                              1
+                            </div>
+                            <div>
+                              <h3 className="font-medium text-emerald-300">
+                                Define Topic
+                              </h3>
+                              <p className="text-gray-400 text-sm mt-1">
+                                Enter your main idea or topic for the AI to
+                                develop
+                              </p>
+                            </div>
+                          </li>
 
-              {/* Video Style Selection */}
-              <motion.div variants={itemVariants} className="space-y-4">
-                <div className="flex items-center gap-2">
-                  <div className="bg-purple-800 w-8 h-8 rounded-full flex items-center justify-center text-white font-bold">
-                    2
-                  </div>
-                  <Label className="text-lg font-semibold text-white">
-                    Choose Video Style
-                  </Label>
-                </div>
-                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-                  {VIDEO_STYLES.map((style) => (
-                    <motion.div
-                      key={style.type}
-                      variants={cardHoverVariants}
-                      whileHover="hover"
-                      whileTap={{ scale: 0.98 }}
-                      className={`p-4 rounded-lg border cursor-pointer transition-all ${
-                        selectedStyle === style.type
-                          ? "border-purple-500 bg-purple-900/20"
-                          : "border-gray-700 hover:border-purple-400"
-                      }`}
-                      onClick={() => setSelectedStyle(style.type)}
-                    >
-                      <div className="flex items-center gap-2 mb-2">
-                        <div className="w-10 h-10 rounded-full bg-gradient-to-br from-purple-600 to-pink-600 flex items-center justify-center">
-                          <span className="text-xl">{style.icon}</span>
-                        </div>
-                        <h3 className="font-semibold text-white">
-                          {style.name}
-                        </h3>
-                      </div>
-                      <p className="text-sm text-gray-400">
-                        {style.description}
-                      </p>
-                    </motion.div>
-                  ))}
-                </div>
-              </motion.div>
+                          <li className="flex space-x-3 items-start">
+                            <div className="flex-shrink-0 bg-emerald-500/20 text-emerald-400 rounded-full h-6 w-6 flex items-center justify-center font-medium">
+                              2
+                            </div>
+                            <div>
+                              <h3 className="font-medium text-emerald-300">
+                                Customize AI Parameters
+                              </h3>
+                              <p className="text-gray-400 text-sm mt-1">
+                                Adjust tone, length, and style of the generated
+                                content
+                              </p>
+                            </div>
+                          </li>
 
-              {/* Continue Button */}
-              <motion.div
-                variants={itemVariants}
-                whileHover={{ scale: 1.02 }}
-                whileTap={{ scale: 0.98 }}
-              >
-                <Button
-                  onClick={handleContinue}
-                  className="w-full h-12 bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700 text-white font-medium rounded-md shadow-md hover:shadow-lg transition-all disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
-                  disabled={!selectedCategory && !customTopic}
-                >
-                  Continue
-                  <ArrowRight className="h-5 w-5" />
-                </Button>
-              </motion.div>
+                          <li className="flex space-x-3 items-start">
+                            <div className="flex-shrink-0 bg-emerald-500/20 text-emerald-400 rounded-full h-6 w-6 flex items-center justify-center font-medium">
+                              3
+                            </div>
+                            <div>
+                              <h3 className="font-medium text-emerald-300">
+                                Review & Edit Content
+                              </h3>
+                              <p className="text-gray-400 text-sm mt-1">
+                                Refine the AI-generated script to your liking
+                              </p>
+                            </div>
+                          </li>
 
-              {/* AI Powered Indicator */}
-              <motion.div
-                variants={itemVariants}
-                className="flex items-center justify-center gap-2 text-sm text-gray-400 pt-2"
-              >
-                <Brain className="h-4 w-4 text-purple-400" />
-                <span>Powered by vidsynth.ai</span>
-              </motion.div>
-            </CardContent>
-          </Card>
-        </motion.div>
-      </motion.div>
-    </AnimatePresence>
+                          <li className="flex space-x-3 items-start">
+                            <div className="flex-shrink-0 bg-emerald-500/20 text-emerald-400 rounded-full h-6 w-6 flex items-center justify-center font-medium">
+                              4
+                            </div>
+                            <div>
+                              <h3 className="font-medium text-emerald-300">
+                                Select Voice & Style
+                              </h3>
+                              <p className="text-gray-400 text-sm mt-1">
+                                Choose voice narration and visual appearance for
+                                your video
+                              </p>
+                            </div>
+                          </li>
+
+                          <li className="flex space-x-3 items-start">
+                            <div className="flex-shrink-0 bg-emerald-500/20 text-emerald-400 rounded-full h-6 w-6 flex items-center justify-center font-medium">
+                              5
+                            </div>
+                            <div>
+                              <h3 className="font-medium text-emerald-300">
+                                Generate Video
+                              </h3>
+                              <p className="text-gray-400 text-sm mt-1">
+                                Our AI combines everything into a professional
+                                video
+                              </p>
+                            </div>
+                          </li>
+                        </ol>
+
+                        <Button
+                          onClick={handleContinue}
+                          className="w-full h-12 text-base bg-gradient-to-r from-emerald-600 to-teal-600 hover:from-emerald-500 hover:to-teal-500 text-white transition-all duration-300 shadow-[0_0_15px_rgba(16,185,129,0.3)] hover:shadow-[0_0_20px_rgba(16,185,129,0.4)] rounded-lg font-medium mt-4"
+                        >
+                          <div className="flex items-center justify-center space-x-3">
+                            <span>Get Started</span>
+                            <ArrowRight className="w-5 h-5" />
+                          </div>
+                        </Button>
+                      </motion.div>
+                    </TabsContent>
+                  </AnimatePresence>
+                </div>
+              </Tabs>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
   );
 }
-
-export default ChatGPTVideoPage;
diff --git a/app/dashboard/chatgpt-video/preview/page.tsx b/app/dashboard/chatgpt-video/preview/page.tsx
index 9f33bd1..1909b7d 100644
--- a/app/dashboard/chatgpt-video/preview/page.tsx
+++ b/app/dashboard/chatgpt-video/preview/page.tsx
@@ -73,7 +73,7 @@ interface VideoData {
   captions?: string;
   imagesList?: string[];
   script?: string | ScriptData;
-  type?: 'reddit' | 'split-screen' | 'chatgpt';
+  type?: "reddit" | "split-screen" | "chatgpt";
 }
 
 interface RemotionProps {
@@ -86,7 +86,7 @@ interface RemotionProps {
     audio_duration?: number;
     captions?: Caption[] | string;
     title_captions?: Caption[] | string;
-    type?: 'reddit' | 'split-screen' | 'chatgpt';
+    type?: "reddit" | "split-screen" | "chatgpt";
     imagesList?: string[];
     script?: string | ScriptData;
   };
@@ -222,11 +222,11 @@ export default function PreviewPage() {
           initial={{ opacity: 0, scale: 0.9 }}
           animate={{ opacity: 1, scale: 1 }}
           transition={{ duration: 0.5 }}
-          className="bg-white/5 backdrop-blur-md rounded-2xl p-8 shadow-xl"
+          className="bg-black/40 backdrop-blur-md rounded-2xl p-8 shadow-xl"
         >
           <div className="flex flex-col items-center justify-center space-y-4">
-            <div className="w-16 h-16 border-4 border-t-purple-500 border-r-transparent border-b-blue-500 border-l-transparent rounded-full animate-spin"></div>
-            <span className="text-xl font-medium bg-clip-text text-transparent bg-gradient-to-r from-purple-400 to-blue-400">
+            <div className="w-16 h-16 border-4 border-t-emerald-500 border-r-transparent border-b-teal-500 border-l-transparent rounded-full animate-spin"></div>
+            <span className="text-xl font-medium bg-clip-text text-transparent bg-gradient-to-r from-emerald-400 via-teal-300 to-emerald-400">
               Loading video data...
             </span>
           </div>
@@ -297,15 +297,17 @@ export default function PreviewPage() {
     const FPS = 30;
 
     // For ChatGPT videos, calculate duration based on last caption plus 1 second
-    if (video?.type === 'chatgpt' && video.captions) {
+    if (video?.type === "chatgpt" && video.captions) {
       try {
-        const parsedCaptions = typeof video.captions === "string"
-          ? JSON.parse(video.captions)
-          : video.captions;
+        const parsedCaptions =
+          typeof video.captions === "string"
+            ? JSON.parse(video.captions)
+            : video.captions;
 
         if (Array.isArray(parsedCaptions) && parsedCaptions.length > 0) {
           // Find the last caption's end time and add 1 second buffer
-          const lastCaptionEndTime = Math.max(...parsedCaptions.map(cap => cap.end)) / 1000; // Convert ms to seconds
+          const lastCaptionEndTime =
+            Math.max(...parsedCaptions.map((cap) => cap.end)) / 1000; // Convert ms to seconds
           return Math.ceil((lastCaptionEndTime + 1) * FPS); // Add 1 second buffer
         }
       } catch (e) {
@@ -321,12 +323,14 @@ export default function PreviewPage() {
     let lastCaptionEndTime = 0;
     if (video?.captions) {
       try {
-        const parsedCaptions = typeof video.captions === "string"
-          ? JSON.parse(video.captions)
-          : video.captions;
+        const parsedCaptions =
+          typeof video.captions === "string"
+            ? JSON.parse(video.captions)
+            : video.captions;
 
         if (Array.isArray(parsedCaptions) && parsedCaptions.length > 0) {
-          lastCaptionEndTime = Math.max(...parsedCaptions.map(cap => cap.end)) / 1000;
+          lastCaptionEndTime =
+            Math.max(...parsedCaptions.map((cap) => cap.end)) / 1000;
         }
       } catch (e) {
         console.error("Error parsing captions:", e);
@@ -358,9 +362,9 @@ export default function PreviewPage() {
           variants={itemVariants}
           className="flex-1 order-1 md:max-w-[45%]"
         >
-          <Card className="overflow-hidden border-0 bg-white/5 backdrop-blur-md shadow-xl">
-            <CardHeader className="bg-gradient-to-r from-purple-500/10 to-blue-500/10 border-b border-white/10 py-3">
-              <CardTitle className="text-xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-purple-400 to-blue-400">
+          <Card className="overflow-hidden border-0 bg-black/40 backdrop-blur-md shadow-[0_0_30px_rgba(16,185,129,0.15)]">
+            <CardHeader className="bg-gradient-to-r from-emerald-500/10 to-teal-500/10 border-b border-emerald-500/20 py-3">
+              <CardTitle className="text-xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-emerald-400 via-teal-300 to-emerald-400">
                 Video Preview
               </CardTitle>
             </CardHeader>
@@ -369,15 +373,16 @@ export default function PreviewPage() {
             {remotionProps && (
               <CardContent className="p-0">
                 <div className="relative group">
-                  <div className="absolute inset-0 bg-gradient-to-br from-purple-500/20 to-blue-500/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none z-10"></div>
+                  <div className="absolute inset-0 bg-gradient-to-br from-emerald-500/20 to-teal-500/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none z-10"></div>
                   <Player
                     component={VideoComposition}
                     inputProps={{
                       videoData: {
                         ...remotionProps.videoData,
-                        script: typeof remotionProps.videoData.script === 'string' 
-                          ? remotionProps.videoData.script 
-                          : JSON.stringify(remotionProps.videoData.script)
+                        script:
+                          typeof remotionProps.videoData.script === "string"
+                            ? remotionProps.videoData.script
+                            : JSON.stringify(remotionProps.videoData.script),
                       },
                       audioUrl: remotionProps.audioUrl,
                       titleAudioUrl: remotionProps.titleAudioUrl,
@@ -404,7 +409,7 @@ export default function PreviewPage() {
             <Button
               onClick={() => video && handleDownload(video.id)}
               disabled={isGenerating || !video}
-              className="w-full bg-gradient-to-r from-purple-600 to-blue-600 hover:from-purple-700 hover:to-blue-700 text-white font-medium py-3 rounded-xl shadow-lg hover:shadow-purple-500/25 transition-all duration-300 flex items-center justify-center gap-2"
+              className="w-full bg-gradient-to-r from-emerald-600 to-teal-600 hover:from-emerald-500 hover:to-teal-500 text-white font-medium py-3 rounded-xl shadow-[0_0_15px_rgba(16,185,129,0.3)] hover:shadow-[0_0_20px_rgba(16,185,129,0.4)] transition-all duration-300 flex items-center justify-center gap-2"
             >
               {isGenerating ? (
                 <>
@@ -429,7 +434,7 @@ export default function PreviewPage() {
                   ?.classList.toggle("translate-y-full")
               }
               variant="outline"
-              className="w-full border border-white/10 bg-white/5 hover:bg-white/10 text-white font-medium py-2 rounded-xl transition-all duration-300 flex items-center justify-center gap-2"
+              className="w-full border border-emerald-500/20 bg-black/40 hover:bg-emerald-950/20 text-white font-medium py-2 rounded-xl transition-all duration-300 flex items-center justify-center gap-2"
             >
               <Info className="w-4 h-4" />
               <span>View Details</span>
@@ -439,9 +444,9 @@ export default function PreviewPage() {
 
         {/* Video Details Section - Hidden on Mobile */}
         <motion.div variants={itemVariants} className="flex-1 hidden md:block">
-          <Card className="bg-white/5 backdrop-blur-md border-0 shadow-xl h-full">
-            <CardHeader className="bg-gradient-to-r from-blue-500/10 to-purple-500/10 border-b border-white/10 py-3">
-              <CardTitle className="text-xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-400 to-purple-400">
+          <Card className="bg-black/40 backdrop-blur-md border-emerald-500/20 shadow-[0_0_30px_rgba(16,185,129,0.15)] h-full">
+            <CardHeader className="bg-gradient-to-r from-teal-500/10 to-emerald-500/10 border-b border-emerald-500/20 py-3">
+              <CardTitle className="text-xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-teal-400 to-emerald-400">
                 Video Details
               </CardTitle>
             </CardHeader>
@@ -449,10 +454,10 @@ export default function PreviewPage() {
               <motion.div
                 variants={itemVariants}
                 whileHover={{ y: -5, transition: { duration: 0.2 } }}
-                className="bg-gradient-to-br from-purple-500/5 to-blue-500/5 p-3 rounded-xl border border-white/10 group hover:border-purple-500/20 transition-all duration-300"
+                className="bg-gradient-to-br from-emerald-500/5 to-teal-500/5 p-3 rounded-xl border border-emerald-500/20 group hover:border-emerald-400/20 transition-all duration-300"
               >
                 <div className="flex items-center gap-3 mb-1">
-                  <Info className="w-4 h-4 text-purple-400 group-hover:text-purple-300 transition-colors" />
+                  <Info className="w-4 h-4 text-emerald-400 group-hover:text-emerald-300 transition-colors" />
                   <h3 className="font-semibold text-gray-200 group-hover:text-white transition-colors">
                     Title
                   </h3>
@@ -463,15 +468,15 @@ export default function PreviewPage() {
               <motion.div
                 variants={itemVariants}
                 whileHover={{ y: -5, transition: { duration: 0.2 } }}
-                className="bg-gradient-to-br from-purple-500/5 to-blue-500/5 p-3 rounded-xl border border-white/10 group hover:border-blue-500/20 transition-all duration-300"
+                className="bg-gradient-to-br from-emerald-500/5 to-teal-500/5 p-3 rounded-xl border border-emerald-500/20 group hover:border-teal-400/20 transition-all duration-300"
               >
                 <div className="flex items-center gap-3 mb-1">
-                  <FileText className="w-4 h-4 text-blue-400 group-hover:text-blue-300 transition-colors" />
+                  <FileText className="w-4 h-4 text-teal-400 group-hover:text-teal-300 transition-colors" />
                   <h3 className="font-semibold text-gray-200 group-hover:text-white transition-colors">
                     Content
                   </h3>
                 </div>
-                <p className="text-gray-300 pl-7 text-sm max-h-24 overflow-y-auto scrollbar-thin scrollbar-thumb-blue-500/20 scrollbar-track-transparent pr-2">
+                <p className="text-gray-300 pl-7 text-sm max-h-24 overflow-y-auto scrollbar-thin scrollbar-thumb-teal-500/20 scrollbar-track-transparent pr-2">
                   {video.text}
                 </p>
               </motion.div>
@@ -481,7 +486,7 @@ export default function PreviewPage() {
                 <motion.div
                   variants={itemVariants}
                   whileHover={{ y: -5, transition: { duration: 0.2 } }}
-                  className="bg-gradient-to-br from-purple-500/5 to-blue-500/5 p-3 rounded-xl border border-white/10 group hover:border-teal-500/20 transition-all duration-300"
+                  className="bg-gradient-to-br from-emerald-500/5 to-teal-500/5 p-3 rounded-xl border border-emerald-500/20 group hover:border-teal-400/20 transition-all duration-300"
                 >
                   <div className="flex items-center gap-3 mb-1">
                     <MessageSquare className="w-4 h-4 text-teal-400 group-hover:text-teal-300 transition-colors" />
@@ -490,15 +495,20 @@ export default function PreviewPage() {
                     </h3>
                   </div>
                   <div className="text-gray-300 pl-7 text-sm max-h-24 overflow-y-auto scrollbar-thin scrollbar-thumb-teal-500/20 scrollbar-track-transparent pr-2">
-                    {typeof video.script === 'string' 
+                    {typeof video.script === "string"
                       ? video.script
-                      : (video.script as ScriptData)?.sections?.map((section: ScriptSection, index: number) => (
-                          <div key={index} className="mb-2">
-                            <p className="font-medium text-white">{section.narration}</p>
-                            <p className="text-xs text-gray-400 mt-1">{section.imageDescription}</p>
-                          </div>
-                        ))
-                    }
+                      : (video.script as ScriptData)?.sections?.map(
+                          (section: ScriptSection, index: number) => (
+                            <div key={index} className="mb-2">
+                              <p className="font-medium text-white">
+                                {section.narration}
+                              </p>
+                              <p className="text-xs text-gray-400 mt-1">
+                                {section.imageDescription}
+                              </p>
+                            </div>
+                          )
+                        )}
                   </div>
                 </motion.div>
               )}
@@ -507,7 +517,7 @@ export default function PreviewPage() {
                 <motion.div
                   variants={itemVariants}
                   whileHover={{ y: -5, transition: { duration: 0.2 } }}
-                  className="bg-gradient-to-br from-purple-500/5 to-blue-500/5 p-3 rounded-xl border border-white/10 group hover:border-green-500/20 transition-all duration-300"
+                  className="bg-gradient-to-br from-emerald-500/5 to-teal-500/5 p-3 rounded-xl border border-emerald-500/20 group hover:border-green-500/20 transition-all duration-300"
                 >
                   <div className="flex items-center gap-3 mb-1">
                     <User className="w-4 h-4 text-green-400 group-hover:text-green-300 transition-colors" />
@@ -521,10 +531,10 @@ export default function PreviewPage() {
                 <motion.div
                   variants={itemVariants}
                   whileHover={{ y: -5, transition: { duration: 0.2 } }}
-                  className="bg-gradient-to-br from-purple-500/5 to-blue-500/5 p-3 rounded-xl border border-white/10 group hover:border-orange-500/20 transition-all duration-300"
+                  className="bg-gradient-to-br from-emerald-500/5 to-teal-500/5 p-3 rounded-xl border border-emerald-500/20 group hover:border-teal-400/20 transition-all duration-300"
                 >
                   <div className="flex items-center gap-3 mb-1">
-                    <ImageIcon className="w-4 h-4 text-orange-400 group-hover:text-orange-300 transition-colors" />
+                    <ImageIcon className="w-4 h-4 text-teal-400 group-hover:text-teal-300 transition-colors" />
                     <h3 className="font-semibold text-gray-200 group-hover:text-white transition-colors">
                       Background
                     </h3>
@@ -537,10 +547,10 @@ export default function PreviewPage() {
 
               <motion.div
                 variants={itemVariants}
-                className="mt-2 p-3 rounded-xl bg-gradient-to-r from-purple-500/10 to-blue-500/10 border border-white/10"
+                className="mt-2 p-3 rounded-xl bg-gradient-to-r from-emerald-500/10 to-teal-500/10 border border-emerald-500/20"
               >
                 <div className="flex items-center gap-2">
-                  <Play className="w-4 h-4 text-purple-400" />
+                  <Play className="w-4 h-4 text-emerald-400" />
                   <p className="text-xs text-gray-300">
                     <span className="font-medium text-white">
                       Caption Style:
@@ -550,7 +560,7 @@ export default function PreviewPage() {
                 </div>
                 <div className="h-px w-full bg-gradient-to-r from-transparent via-white/10 to-transparent my-2"></div>
                 <div className="flex items-center gap-2">
-                  <Play className="w-4 h-4 text-blue-400" />
+                  <Play className="w-4 h-4 text-teal-400" />
                   <p className="text-xs text-gray-300">
                     <span className="font-medium text-white">Duration:</span>{" "}
                     {video.audio_duration
@@ -571,7 +581,7 @@ export default function PreviewPage() {
       >
         <div className="p-4">
           <div className="flex justify-between items-center mb-4">
-            <h3 className="text-lg font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-400 to-purple-400">
+            <h3 className="text-lg font-bold bg-clip-text text-transparent bg-gradient-to-r from-teal-400 to-emerald-400">
               Video Details
             </h3>
             <Button
@@ -589,47 +599,52 @@ export default function PreviewPage() {
           </div>
 
           <div className="space-y-3 max-h-[60vh] overflow-y-auto pb-6">
-            <div className="bg-gradient-to-br from-purple-500/5 to-blue-500/5 p-3 rounded-xl border border-white/10">
+            <div className="bg-gradient-to-br from-emerald-500/5 to-teal-500/5 p-3 rounded-xl border border-emerald-500/20">
               <div className="flex items-center gap-3 mb-1">
-                <Info className="w-4 h-4 text-purple-400" />
+                <Info className="w-4 h-4 text-emerald-400" />
                 <h3 className="font-semibold text-gray-200">Title</h3>
               </div>
               <p className="text-gray-300 pl-7 text-sm">{video.title}</p>
             </div>
 
-            <div className="bg-gradient-to-br from-purple-500/5 to-blue-500/5 p-3 rounded-xl border border-white/10">
+            <div className="bg-gradient-to-br from-emerald-500/5 to-teal-500/5 p-3 rounded-xl border border-emerald-500/20">
               <div className="flex items-center gap-3 mb-1">
-                <FileText className="w-4 h-4 text-blue-400" />
+                <FileText className="w-4 h-4 text-teal-400" />
                 <h3 className="font-semibold text-gray-200">Content</h3>
               </div>
-              <p className="text-gray-300 pl-7 text-sm max-h-24 overflow-y-auto scrollbar-thin scrollbar-thumb-blue-500/20 scrollbar-track-transparent pr-2">
+              <p className="text-gray-300 pl-7 text-sm max-h-24 overflow-y-auto scrollbar-thin scrollbar-thumb-teal-500/20 scrollbar-track-transparent pr-2">
                 {video.text}
               </p>
             </div>
 
             {/* ChatGPT-specific: Script info */}
             {video.script && (
-              <div className="bg-gradient-to-br from-purple-500/5 to-blue-500/5 p-3 rounded-xl border border-white/10">
+              <div className="bg-gradient-to-br from-emerald-500/5 to-teal-500/5 p-3 rounded-xl border border-emerald-500/20">
                 <div className="flex items-center gap-3 mb-1">
                   <MessageSquare className="w-4 h-4 text-teal-400" />
                   <h3 className="font-semibold text-gray-200">Script</h3>
                 </div>
                 <div className="text-gray-300 pl-7 text-sm max-h-24 overflow-y-auto scrollbar-thin scrollbar-thumb-teal-500/20 scrollbar-track-transparent pr-2">
-                  {typeof video.script === 'string' 
+                  {typeof video.script === "string"
                     ? video.script
-                    : (video.script as ScriptData)?.sections?.map((section: ScriptSection, index: number) => (
-                        <div key={index} className="mb-2">
-                          <p className="font-medium text-white">{section.narration}</p>
-                          <p className="text-xs text-gray-400 mt-1">{section.imageDescription}</p>
-                        </div>
-                      ))
-                  }
+                    : (video.script as ScriptData)?.sections?.map(
+                        (section: ScriptSection, index: number) => (
+                          <div key={index} className="mb-2">
+                            <p className="font-medium text-white">
+                              {section.narration}
+                            </p>
+                            <p className="text-xs text-gray-400 mt-1">
+                              {section.imageDescription}
+                            </p>
+                          </div>
+                        )
+                      )}
                 </div>
               </div>
             )}
 
             <div className="grid grid-cols-2 gap-3">
-              <div className="bg-gradient-to-br from-purple-500/5 to-blue-500/5 p-3 rounded-xl border border-white/10">
+              <div className="bg-gradient-to-br from-emerald-500/5 to-teal-500/5 p-3 rounded-xl border border-emerald-500/20">
                 <div className="flex items-center gap-3 mb-1">
                   <User className="w-4 h-4 text-green-400" />
                   <h3 className="font-semibold text-gray-200">Author</h3>
@@ -637,9 +652,9 @@ export default function PreviewPage() {
                 <p className="text-gray-300 pl-7 text-sm">{video.author}</p>
               </div>
 
-              <div className="bg-gradient-to-br from-purple-500/5 to-blue-500/5 p-3 rounded-xl border border-white/10">
+              <div className="bg-gradient-to-br from-emerald-500/5 to-teal-500/5 p-3 rounded-xl border border-emerald-500/20">
                 <div className="flex items-center gap-3 mb-1">
-                  <ImageIcon className="w-4 h-4 text-orange-400" />
+                  <ImageIcon className="w-4 h-4 text-teal-400" />
                   <h3 className="font-semibold text-gray-200">Background</h3>
                 </div>
                 <p className="text-gray-300 pl-7 text-sm">
@@ -648,9 +663,9 @@ export default function PreviewPage() {
               </div>
             </div>
 
-            <div className="p-3 rounded-xl bg-gradient-to-r from-purple-500/10 to-blue-500/10 border border-white/10">
+            <div className="p-3 rounded-xl bg-gradient-to-r from-emerald-500/10 to-teal-500/10 border border-emerald-500/20">
               <div className="flex items-center gap-2">
-                <Play className="w-4 h-4 text-purple-400" />
+                <Play className="w-4 h-4 text-emerald-400" />
                 <p className="text-xs text-gray-300">
                   <span className="font-medium text-white">Caption Style:</span>{" "}
                   {video.caption_style}
@@ -658,7 +673,7 @@ export default function PreviewPage() {
               </div>
               <div className="h-px w-full bg-gradient-to-r from-transparent via-white/10 to-transparent my-2"></div>
               <div className="flex items-center gap-2">
-                <Play className="w-4 h-4 text-blue-400" />
+                <Play className="w-4 h-4 text-teal-400" />
                 <p className="text-xs text-gray-300">
                   <span className="font-medium text-white">Duration:</span>{" "}
                   {video.audio_duration
diff --git a/app/dashboard/chatgpt-video/select-caption-style/page.tsx b/app/dashboard/chatgpt-video/select-caption-style/page.tsx
index eb30989..107ac79 100644
--- a/app/dashboard/chatgpt-video/select-caption-style/page.tsx
+++ b/app/dashboard/chatgpt-video/select-caption-style/page.tsx
@@ -221,7 +221,7 @@ function SelectCaptionPage() {
   return (
     <div className="container max-w-6xl mx-auto py-8 px-4">
       <div className="mb-8">
-        <h1 className="text-3xl font-bold bg-gradient-to-r from-purple-400 to-pink-600 text-transparent bg-clip-text">
+        <h1 className="text-3xl font-bold bg-gradient-to-r from-emerald-400 via-teal-300 to-emerald-400 text-transparent bg-clip-text">
           Caption Style
         </h1>
         <p className="text-gray-400 mt-2">
@@ -229,8 +229,8 @@ function SelectCaptionPage() {
         </p>
       </div>
 
-      <Card className="border border-gray-800 bg-gray-900/50 backdrop-blur-sm">
-        <CardHeader className="border-b border-gray-800 pb-4">
+      <Card className="border border-emerald-500/20 bg-black/40 backdrop-blur-sm shadow-[0_0_30px_rgba(16,185,129,0.15)]">
+        <CardHeader className="border-b border-emerald-500/20 pb-4">
           <CardTitle className="text-xl font-bold text-white">
             Select a Style
           </CardTitle>
@@ -245,14 +245,14 @@ function SelectCaptionPage() {
                 key={style.id}
                 className={`relative overflow-hidden rounded-xl border transition-all cursor-pointer group ${
                   selectedStyle === style.id
-                    ? "border-purple-500 bg-purple-500/10"
-                    : "border-gray-800 bg-gray-800/50 hover:border-gray-700 hover:bg-gray-800/80"
+                    ? "border-emerald-500 bg-emerald-500/10"
+                    : "border-emerald-500/20 bg-black/50 hover:border-emerald-400/30 hover:bg-emerald-950/20"
                 }`}
                 onClick={() => handleStyleSelect(style.id)}
               >
                 {/* Selection indicator */}
                 {selectedStyle === style.id && (
-                  <div className="absolute top-3 right-3 w-6 h-6 rounded-full bg-purple-500 flex items-center justify-center z-10">
+                  <div className="absolute top-3 right-3 w-6 h-6 rounded-full bg-emerald-500 flex items-center justify-center z-10">
                     <Check className="w-4 h-4 text-white" />
                   </div>
                 )}
@@ -294,20 +294,19 @@ function SelectCaptionPage() {
           <div className="flex justify-end pt-4 border-t border-gray-800">
             <Button
               onClick={handleContinue}
-              className="bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700 text-white px-8"
-              size="lg"
               disabled={isLoading}
+              className="w-full bg-gradient-to-r from-emerald-600 to-teal-600 hover:from-emerald-500 hover:to-teal-500 text-white py-2 rounded-md transition-all shadow-[0_0_15px_rgba(16,185,129,0.3)] hover:shadow-[0_0_20px_rgba(16,185,129,0.4)]"
             >
               {isLoading ? (
-                <div className="flex items-center gap-2">
+                <div className="flex items-center justify-center space-x-2">
                   <div className="w-5 h-5 border-2 border-white/30 border-t-white rounded-full animate-spin" />
                   <span>Generating Content...</span>
                 </div>
               ) : (
-                <>
-                  Continue
-                  <ArrowRight className="ml-2 h-4 w-4" />
-                </>
+                <div className="flex items-center justify-center space-x-2">
+                  <span>Generate Video</span>
+                  <ArrowRight className="h-5 w-5" />
+                </div>
               )}
             </Button>
           </div>
diff --git a/app/dashboard/chatgpt-video/select-voice/page.tsx b/app/dashboard/chatgpt-video/select-voice/page.tsx
index 9767609..b46505a 100644
--- a/app/dashboard/chatgpt-video/select-voice/page.tsx
+++ b/app/dashboard/chatgpt-video/select-voice/page.tsx
@@ -119,24 +119,24 @@ function VoiceSelectionPage() {
         transition={{ duration: 0.5 }}
         className="w-full"
       >
-        <Card className="border border-white/10 bg-black/40 backdrop-blur-sm text-white">
+        <Card className="border border-emerald-500/20 bg-black/40 backdrop-blur-sm text-white">
           <CardHeader className="p-4 sm:p-6">
             <div className="flex flex-col space-y-4">
               <div className="flex items-center">
                 <Button
                   variant="ghost"
                   size="icon"
-                  className="mr-2 text-white hover:bg-white/10"
+                  className="mr-2 text-white hover:bg-emerald-500/10"
                   onClick={handleBack}
                 >
                   <ArrowLeft className="h-5 w-5" />
                 </Button>
                 <div>
-                  <CardTitle className="text-xl sm:text-2xl font-bold bg-gradient-to-r from-purple-400 to-pink-600 text-transparent bg-clip-text">
+                  <CardTitle className="text-xl sm:text-2xl font-bold bg-gradient-to-r from-emerald-400 via-teal-300 to-emerald-400 text-transparent bg-clip-text">
                     Select Voice
                   </CardTitle>
                   <CardDescription className="text-gray-400 text-sm mt-1">
-                    Choose a voice for your video narration
+                    Choose a voice for your ChatGPT video
                   </CardDescription>
                 </div>
               </div>
@@ -145,9 +145,9 @@ function VoiceSelectionPage() {
                 <motion.div
                   initial={{ opacity: 0, scale: 0.8 }}
                   animate={{ opacity: 1, scale: 1 }}
-                  className="flex items-center gap-3 bg-white/5 p-2 rounded-lg border border-white/10 w-full sm:w-auto"
+                  className="flex items-center gap-3 bg-emerald-950/20 p-2 rounded-lg border border-emerald-500/20 w-full sm:w-auto"
                 >
-                  <div className="w-8 h-8 sm:w-10 sm:h-10 rounded-full bg-gradient-to-br from-purple-500 to-pink-500 flex items-center justify-center text-xs sm:text-sm font-bold">
+                  <div className="w-8 h-8 sm:w-10 sm:h-10 rounded-full bg-gradient-to-br from-emerald-500 to-teal-500 flex items-center justify-center text-xs sm:text-sm font-bold">
                     {selectedVoiceInfo?.initials}
                   </div>
                   <div className="flex-1">
@@ -168,7 +168,7 @@ function VoiceSelectionPage() {
                 <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
                 <Input
                   placeholder="Search voices..."
-                  className="pl-9 bg-white/5 border-white/10 focus:border-purple-500 focus:ring-purple-500 text-white w-full"
+                  className="pl-9 bg-black/50 border-emerald-500/20 focus:border-emerald-500 focus:ring-emerald-500/20 text-white w-full"
                   value={searchQuery}
                   onChange={(e) => setSearchQuery(e.target.value)}
                 />
@@ -176,12 +176,12 @@ function VoiceSelectionPage() {
 
               <div className="overflow-x-auto -mx-4 sm:mx-0 px-4 sm:px-0">
                 <Tabs defaultValue="All" onValueChange={setActiveCategory}>
-                  <TabsList className="bg-white/5 border border-white/10 h-9 sm:h-10 w-max min-w-full sm:min-w-0">
+                  <TabsList className="bg-black/50 border border-emerald-500/20 h-9 sm:h-10 w-max min-w-full sm:min-w-0">
                     {voiceCategories.map((category) => (
                       <TabsTrigger
                         key={category}
                         value={category}
-                        className="text-xs sm:text-sm data-[state=active]:bg-gradient-to-r data-[state=active]:from-purple-500 data-[state=active]:to-pink-500 data-[state=active]:text-white text-white px-3 sm:px-4"
+                        className="text-xs sm:text-sm data-[state=active]:bg-gradient-to-r data-[state=active]:from-emerald-600 data-[state=active]:to-teal-600 data-[state=active]:text-white text-white px-3 sm:px-4"
                       >
                         {category}
                       </TabsTrigger>
@@ -211,14 +211,14 @@ function VoiceSelectionPage() {
                       whileTap={{ scale: 0.98 }}
                       className={`relative overflow-hidden rounded-xl border ${
                         selectedVoice === voice.id
-                          ? "border-purple-500 bg-gradient-to-br from-purple-500/20 to-pink-500/20"
-                          : "border-white/10 bg-white/5"
-                      } p-3 sm:p-4 hover:bg-white/10 transition-all cursor-pointer group text-white`}
+                          ? "border-emerald-500 bg-gradient-to-br from-emerald-500/20 to-teal-500/20"
+                          : "border-emerald-500/20 bg-black/50"
+                      } p-3 sm:p-4 hover:bg-emerald-950/30 transition-all cursor-pointer group text-white`}
                       onClick={() => handleVoiceSelect(voice.id)}
                     >
                       <div className="flex items-center gap-2 sm:gap-3 mb-2 sm:mb-3">
                         <div
-                          className={`w-10 h-10 sm:w-12 sm:h-12 rounded-full bg-gradient-to-br from-purple-500 to-pink-500 flex items-center justify-center text-base sm:text-lg font-bold transition-transform ${
+                          className={`w-10 h-10 sm:w-12 sm:h-12 rounded-full bg-gradient-to-br from-emerald-500 to-teal-500 flex items-center justify-center text-base sm:text-lg font-bold transition-transform ${
                             selectedVoice === voice.id
                               ? "scale-110"
                               : "group-hover:scale-110"
@@ -284,7 +284,7 @@ function VoiceSelectionPage() {
                         </TooltipProvider>
                       </div>
 
-                      <Badge className="absolute top-2 sm:top-3 right-2 sm:right-3 bg-white/10 text-[10px] sm:text-xs text-white">
+                      <Badge className="absolute top-2 sm:top-3 right-2 sm:right-3 bg-emerald-500/20 text-[10px] sm:text-xs text-emerald-300">
                         {voice.category}
                       </Badge>
                     </motion.div>
@@ -321,7 +321,7 @@ function VoiceSelectionPage() {
             >
               <Button
                 onClick={handleContinue}
-                className="w-full bg-gradient-to-r from-purple-500 to-pink-500 hover:opacity-90 transition-opacity h-10 sm:h-12 text-sm sm:text-base text-white"
+                className="w-full bg-gradient-to-r from-emerald-600 to-teal-600 hover:from-emerald-500 hover:to-teal-500 transition-all h-10 sm:h-12 text-sm sm:text-base text-white shadow-[0_0_15px_rgba(16,185,129,0.3)] hover:shadow-[0_0_20px_rgba(16,185,129,0.4)]"
                 disabled={!selectedVoice}
               >
                 Continue with Selected Voice
diff --git a/app/dashboard/chatgpt-video/video-style/page.tsx b/app/dashboard/chatgpt-video/video-style/page.tsx
new file mode 100644
index 0000000..113f00b
--- /dev/null
+++ b/app/dashboard/chatgpt-video/video-style/page.tsx
@@ -0,0 +1,357 @@
+"use client";
+
+import React, { useState, useEffect } from "react";
+import { useRouter } from "next/navigation";
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+} from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { useVideoContext } from "@/app/dashboard/_components/VideoContext";
+import { Label } from "@/components/ui/label";
+import { motion, AnimatePresence } from "framer-motion";
+import { ArrowRight, Sparkles, Brain, AlertCircle } from "lucide-react";
+import { Alert, AlertDescription } from "@/components/ui/alert";
+
+const CATEGORIES = [
+  {
+    id: "education",
+    name: "Education",
+    example: "How Quantum Computing Works",
+    icon: "🧠",
+  },
+  {
+    id: "science-tech",
+    name: "Science & Tech",
+    example: "The Future of AI",
+    icon: "🔬",
+  },
+  {
+    id: "entertainment",
+    name: "Entertainment",
+    example: "The Best Movies of 2025",
+    icon: "🎬",
+  },
+  {
+    id: "business-finance",
+    name: "Business & Finance",
+    example: "How to Invest in 2025",
+    icon: "💼",
+  },
+  {
+    id: "history-geography",
+    name: "History & Geography",
+    example: "The Fall of the Roman Empire",
+    icon: "🏛️",
+  },
+];
+
+const VIDEO_STYLES = [
+  {
+    type: "minimalist",
+    name: "Minimalist",
+    description: "Simple text animations & clean design",
+    icon: "🎨",
+  },
+  {
+    type: "animated",
+    name: "Animated",
+    description: "AI-generated visuals & icons",
+    icon: "🖼",
+  },
+  {
+    type: "cinematic",
+    name: "Cinematic",
+    description: "Realistic visuals & dramatic effects",
+    icon: "🎥",
+  },
+  {
+    type: "storytelling",
+    name: "Storytelling",
+    description: "More personal & engaging",
+    icon: "📖",
+  },
+  {
+    type: "news-report",
+    name: "News Report",
+    description: "Professional & factual",
+    icon: "📰",
+  },
+  {
+    type: "gaming",
+    name: "Gaming Style",
+    description: "Bright, high-energy visuals",
+    icon: "🎮",
+  },
+];
+
+// Animation variants
+const containerVariants = {
+  hidden: { opacity: 0 },
+  visible: {
+    opacity: 1,
+    transition: {
+      duration: 0.5,
+      when: "beforeChildren",
+      staggerChildren: 0.1,
+    },
+  },
+};
+
+const itemVariants = {
+  hidden: { y: 20, opacity: 0 },
+  visible: {
+    y: 0,
+    opacity: 1,
+    transition: { duration: 0.4 },
+  },
+};
+
+const cardHoverVariants = {
+  hover: {
+    y: -5,
+    boxShadow: "0 10px 25px -5px rgba(124, 58, 237, 0.2)",
+    transition: { duration: 0.2 },
+  },
+};
+
+function ChatGPTVideoPage() {
+  const router = useRouter();
+  const { videoData, setVideoData } = useVideoContext();
+  const [selectedCategory, setSelectedCategory] = useState("");
+  const [customTopic, setCustomTopic] = useState("");
+  const [selectedStyle, setSelectedStyle] = useState("minimalist");
+  const [error, setError] = useState("");
+  const [isMobileView, setIsMobileView] = useState(false);
+
+  // Check for mobile view on mount and window resize
+  useEffect(() => {
+    const checkMobileView = () => {
+      setIsMobileView(window.innerWidth < 768);
+    };
+
+    // Initial check
+    checkMobileView();
+
+    // Add event listener for window resize
+    window.addEventListener("resize", checkMobileView);
+
+    // Cleanup
+    return () => {
+      window.removeEventListener("resize", checkMobileView);
+    };
+  }, []);
+
+  const handleContinue = () => {
+    if (!selectedCategory && !customTopic) {
+      setError("Please select a category or enter a custom topic");
+      return;
+    }
+
+    // Update video data with selected options
+    setVideoData({
+      ...videoData,
+      type: "chatgpt",
+      content: {
+        ...videoData?.content,
+        text: customTopic || selectedCategory, // Store the actual topic text
+      },
+      style: {
+        ...videoData?.style,
+        chatgptSelectedTopic: selectedCategory || undefined, // Store selected category if any
+        chatgptCustomTopic: customTopic || undefined, // Store custom topic if any
+        chatgptVideoStyle: selectedStyle,
+      },
+    });
+
+    // Navigate to the next step
+    router.push("/dashboard/chatgpt-video/select-voice");
+  };
+
+  return (
+    <AnimatePresence mode="wait">
+      <motion.div
+        className={`container mx-auto py-8 px-4 ${
+          isMobileView ? "max-w-full" : "max-w-4xl"
+        }`}
+        variants={containerVariants}
+        initial="hidden"
+        animate="visible"
+        exit={{ opacity: 0 }}
+      >
+        <motion.div variants={itemVariants}>
+          <Card className="border border-emerald-500/20 shadow-[0_0_30px_rgba(16,185,129,0.15)] bg-black/40 backdrop-blur-sm text-white overflow-hidden">
+            <CardHeader className="bg-gradient-to-r from-emerald-950/50 to-teal-950/50 border-b border-emerald-500/20">
+              <CardTitle className="text-2xl font-bold text-center flex items-center justify-center gap-2">
+                <Sparkles className="h-6 w-6 text-emerald-300" />
+                <span className="bg-gradient-to-r from-emerald-400 via-teal-300 to-emerald-400 bg-clip-text text-transparent">
+                  Create ChatGPT Style Video
+                </span>
+                <Sparkles className="h-6 w-6 text-teal-300" />
+              </CardTitle>
+              <CardDescription className="text-gray-300 text-center">
+                Generate engaging AI-powered videos with just a few clicks
+              </CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-8 p-6 bg-black/50">
+              {/* Error Alert */}
+              <AnimatePresence>
+                {error && (
+                  <motion.div
+                    initial={{ opacity: 0, y: -10 }}
+                    animate={{ opacity: 1, y: 0 }}
+                    exit={{ opacity: 0, y: -10 }}
+                  >
+                    <Alert
+                      variant="destructive"
+                      className="border-red-900 bg-red-900/20 text-red-300"
+                    >
+                      <AlertCircle className="h-4 w-4 mr-2" />
+                      <AlertDescription>{error}</AlertDescription>
+                    </Alert>
+                  </motion.div>
+                )}
+              </AnimatePresence>
+
+              {/* Topic Selection */}
+              <motion.div variants={itemVariants} className="space-y-4">
+                <div className="flex items-center gap-2">
+                  <div className="bg-emerald-500/20 w-8 h-8 rounded-full flex items-center justify-center text-emerald-400 font-bold">
+                    1
+                  </div>
+                  <Label className="text-lg font-semibold text-white">
+                    Select Topic
+                  </Label>
+                </div>
+
+                {/* Category Selection */}
+                <motion.div variants={itemVariants} className="space-y-2">
+                  <Label className="text-gray-300">Choose a Category</Label>
+                  <Select
+                    value={selectedCategory}
+                    onValueChange={(value) => {
+                      setSelectedCategory(value);
+                      setError("");
+                    }}
+                  >
+                    <SelectTrigger className="bg-black/50 border-emerald-500/20 text-gray-200 focus:ring-emerald-500">
+                      <SelectValue placeholder="Select a category" />
+                    </SelectTrigger>
+                    <SelectContent className="bg-black/80 border-emerald-500/20 text-gray-200">
+                      {CATEGORIES.map((category) => (
+                        <SelectItem
+                          key={category.id}
+                          value={category.id}
+                          className="focus:bg-emerald-900 focus:text-white"
+                        >
+                          <div className="flex items-center gap-2">
+                            <span>{category.icon}</span>
+                            <span>
+                              {category.name} - {category.example}
+                            </span>
+                          </div>
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </motion.div>
+
+                {/* Custom Topic Input */}
+                <motion.div variants={itemVariants} className="space-y-2">
+                  <Label className="text-gray-300">Or Enter Custom Topic</Label>
+                  <Input
+                    placeholder="Enter your custom topic..."
+                    value={customTopic}
+                    onChange={(e) => {
+                      setCustomTopic(e.target.value);
+                      setError("");
+                    }}
+                    className="bg-black/50 border-emerald-500/20 text-gray-200 focus:ring-emerald-500 focus:border-emerald-500"
+                  />
+                </motion.div>
+              </motion.div>
+
+              {/* Video Style Selection */}
+              <motion.div variants={itemVariants} className="space-y-4">
+                <div className="flex items-center gap-2">
+                  <div className="bg-emerald-500/20 w-8 h-8 rounded-full flex items-center justify-center text-emerald-400 font-bold">
+                    2
+                  </div>
+                  <Label className="text-lg font-semibold text-white">
+                    Choose Video Style
+                  </Label>
+                </div>
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                  {VIDEO_STYLES.map((style) => (
+                    <motion.div
+                      key={style.type}
+                      variants={cardHoverVariants}
+                      whileHover="hover"
+                      whileTap={{ scale: 0.98 }}
+                      className={`p-4 rounded-lg border cursor-pointer transition-all ${
+                        selectedStyle === style.type
+                          ? "border-emerald-500 bg-emerald-900/20"
+                          : "border-emerald-500/20 hover:border-emerald-400"
+                      }`}
+                      onClick={() => setSelectedStyle(style.type)}
+                    >
+                      <div className="flex items-center gap-2 mb-2">
+                        <div className="w-10 h-10 rounded-full bg-gradient-to-br from-emerald-600 to-teal-600 flex items-center justify-center">
+                          <span className="text-xl">{style.icon}</span>
+                        </div>
+                        <h3 className="font-semibold text-white">
+                          {style.name}
+                        </h3>
+                      </div>
+                      <p className="text-sm text-gray-400">
+                        {style.description}
+                      </p>
+                    </motion.div>
+                  ))}
+                </div>
+              </motion.div>
+
+              {/* Continue Button */}
+              <motion.div
+                variants={itemVariants}
+                whileHover={{ scale: 1.02 }}
+                whileTap={{ scale: 0.98 }}
+              >
+                <Button
+                  onClick={handleContinue}
+                  className="w-full h-12 bg-gradient-to-r from-emerald-600 to-teal-600 hover:from-emerald-700 hover:to-teal-700 text-white font-medium rounded-md shadow-md hover:shadow-lg transition-all disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
+                  disabled={!selectedCategory && !customTopic}
+                >
+                  Continue
+                  <ArrowRight className="h-5 w-5" />
+                </Button>
+              </motion.div>
+
+              {/* AI Powered Indicator */}
+              <motion.div
+                variants={itemVariants}
+                className="flex items-center justify-center gap-2 text-sm text-gray-400 pt-2"
+              >
+                <Brain className="h-4 w-4 text-emerald-400" />
+                <span>Powered by vidsynth.ai</span>
+              </motion.div>
+            </CardContent>
+          </Card>
+        </motion.div>
+      </motion.div>
+    </AnimatePresence>
+  );
+}
+
+export default ChatGPTVideoPage;