status: complete deployment and development

Signed-off-by: Arya Pratap Singh <notaryasingh@gmail.com>

Author: ARYPROGRAMMER

README.md

@@ -14,8 +14,13 @@
     <img src="https://img.shields.io/badge/Frontend-Next.js-orange" alt="Frontend: Next.js Badge" />  
   </a>  
   <a href="https://youtu.be/E1q67IDcdMU">  
-    <img src="https://img.shields.io/badge/Watch-Demo%20Video-red" alt="Demo Video Badge" />  
+    <img src="https://img.shields.io/badge/Watch-Demo%20Video 1-red" alt="Demo Video Badge" />  
+  </a>    
+  
+  <a href="https://youtu.be/XpOeWhbxqOY">  
+    <img src="https://img.shields.io/badge/Watch-Demo%20Video 2-red" alt="Demo Video Badge" />  
   </a>  
+  
   <a href="https://learn-coding-with-copilotkit.vercel.app/">  
     <img src="https://img.shields.io/badge/Website-Live-brightgreen" alt="Website Badge" />  
   </a>  

frontend-interface/app/page.tsx

@@ -3,7 +3,7 @@
 import React, { useEffect, useState } from "react";
 import { motion, AnimatePresence } from "framer-motion";
 import dynamic from "next/dynamic";
-import { Loader2, ExternalLink, Cpu, MessageSquare, Play } from "lucide-react";
+import { Loader2, ExternalLink, Cpu, MessageSquare } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Role, TextMessage } from "@copilotkit/runtime-client-gql";
 import ChatInterface from "@/components/ChatInterface";
@@ -17,6 +17,7 @@ import GitHubStarButtons from "@/components/StarComponent";
 import Image from "next/image";
 import { CopilotSidebar } from "@copilotkit/react-ui";
 import "@copilotkit/react-ui/styles.css";
+import VideoSection from "@/components/VideoSection";
 
 interface AgentState {
   question: string;
@@ -183,13 +184,12 @@ const DSASolutionInterface = () => {
       timeComplexity,
       spaceComplexity,
     };
-  
-    // Only update if the state has actually changed
+
     if (!isStateEqual(state, newState)) {
       setState((prevState = state) => ({
         ...prevState,
         ...newState,
-        // Preserve other fields that aren't being updated
+
         code: prevState.code,
         explanation: prevState.explanation,
         visualization: prevState.visualization,
@@ -205,7 +205,6 @@ const DSASolutionInterface = () => {
 
     setShowChat(true);
 
-    // First, send the problem context
     const contextMessage = new TextMessage({
       id: "context-" + Date.now().toString(),
       role: Role.System,
@@ -218,14 +217,14 @@ const DSASolutionInterface = () => {
       `,
     });
 
-    // Then send the user's question
+
     const userMessage = new TextMessage({
       id: "user-" + Date.now().toString(),
       role: Role.User,
       content: question,
     });
 
-    // Send messages with a slight delay
+
     setTimeout(() => {
       appendMessage(contextMessage);
       setTimeout(() => {
@@ -236,27 +235,23 @@ const DSASolutionInterface = () => {
 
   const handleSolutionUpdate = (content: string) => {
     try {
-      // Extract code block
+
       const codeMatch = content.match(/```python\n([\s\S]*?)```/);
       const code = codeMatch ? codeMatch[1].trim() : "";
 
-      // Extract explanation (text before code block)
+   
       const explanation = content.split("```")[0].trim();
 
-      // Extract complexities
       const timeMatch = content.match(/[Tt]ime [Cc]omplexity:?\s*(O\([^)]+\))/);
       const spaceMatch = content.match(
         /[Ss]pace [Cc]omplexity:?\s*(O\([^)]+\))/
       );
 
-      // // Extract visualization if present
-      // const visualMatch = content.match(/```mermaid\n([\s\S]*?)```/);
 
-      // Update all states
       setSolution(prevSolution => ({
         code: code,
         explanation: explanation,
-        visualization: prevSolution?.visualization // Preserve existing visualization
+        visualization: prevSolution?.visualization 
       }));
 
       if (timeMatch) setTimeComplexity(timeMatch[1]);
@@ -288,19 +283,6 @@ const DSASolutionInterface = () => {
   }, [visibleMessages]);
 
 
-  const [isPlaying, setIsPlaying] = useState(false);
-  const videoUrl = "https://vimeo.com/1044157863";
-
-  const getVimeoEmbedUrl = (url: string) => {
-    const videoId = url.split("vimeo.com/")[1];
-    return `https://player.vimeo.com/video/${videoId}`;
-  };
-
-  const embedUrl = getVimeoEmbedUrl(videoUrl);
-  const handlePlayClick = () => {
-    setIsPlaying(true);
-  };
-
   return (
     <div className="flex min-h-screen dark:from-gray-900 dark:to-gray-800 bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] from-blue-900/20 via-transparent to-transparent">
 
@@ -414,53 +396,7 @@ const DSASolutionInterface = () => {
           </Button>
         </motion.div>
         <GitHubStarButtons />
-              {/* Video Section */}
-              <motion.div
-              className="relative max-w-4xl  flex-col mx-auto mb-32 rounded-2xl overflow-hidden shadow-xl"
-              initial={{ opacity: 0 }}
-              animate={{ opacity: 1 }}
-              transition={{ duration: 1 }}
-            >
-              <div className="aspect-video bg-gray-800 rounded-2xl overflow-hidden relative">
-                {isPlaying ? (
-                  <iframe
-                    className="w-full h-full"
-                    src={embedUrl}
-                    title="Vimeo video player"
-                    frameBorder="0"
-                    allow="autoplay; fullscreen; picture-in-picture"
-                    allowFullScreen
-                  ></iframe>
-                ) : (
-                  <>
-                    <Image src="/thumbnail.png" width={1800} height={1800} alt="CoAgents and Langgraph" className="object-cover h-full w-full" />
-                    <div className="absolute bottom-0 left-0 right-0 p-8">
-                      <div className="flex items-center justify-between">
-                        <div className="flex items-center space-x-4">
-                          <div
-                            className="w-12 h-12 rounded-full bg-purple-600 flex items-center justify-center cursor-pointer hover:bg-purple-700 transition-colors"
-                            onClick={handlePlayClick}
-                          >
-                            <Play className="h-6 w-6" />
-                          </div>
-                          <div>
-                            <p className="text-lg text-white font-semibold">See A Full Fledged Demo</p>
-                            <p className="text-purple-200">Watch the demo insight during development</p>
-                          </div>
-                        </div>
-                        <Button
-                          variant="outline"
-                          className="text-black border-white/20 hover:bg-white/10 transition-colors"
-                          onClick={() => setIsPlaying(!isPlaying)}
-                        >
-                          Learn More
-                        </Button>
-                      </div>
-                    </div>
-                  </>
-                )}
-              </div>
-            </motion.div>
+            <VideoSection />
       </div>
 
       {!showChat && (

frontend-interface/components/VideoSection.tsx

@@ -0,0 +1,105 @@
+import React from 'react';
+import { motion } from "framer-motion";
+import { Button } from "@/components/ui/button";
+import { Play } from "lucide-react";
+import Image from "next/image";
+
+const VideoSection = () => {
+  const [isPlaying1, setIsPlaying1] = React.useState(false);
+  const [isPlaying2, setIsPlaying2] = React.useState(false);
+
+  const videos = [
+    {
+      id: 1,
+      videoUrl: "https://vimeo.com/1044157863",
+      thumbnail: "/thumbnail.png",
+      title: "See A Full Fledged Demonstration",
+      subtitle: "Watch the demo insight during development",
+      isPlaying: isPlaying1,
+      setIsPlaying: setIsPlaying1
+    },
+    {
+      id: 2,
+      videoUrl: "https://vimeo.com/1044282090", 
+      thumbnail: "/thumbnail.png", 
+      title: "Recent Deployed Demonstration",
+      subtitle: "See Near Release Demonstration of the Project",
+      isPlaying: isPlaying2,
+      setIsPlaying: setIsPlaying2
+    }
+  ];
+
+  const getVimeoEmbedUrl = (url: string) => {
+    const videoId = url.split("vimeo.com/")[1];
+    return `https://player.vimeo.com/video/${videoId}`;
+  };
+
+  return (
+    <motion.div 
+      className="w-full max-w-[95vw] mx-auto mb-32 px-2 space-y-12 md:space-y-0 md:grid md:grid-cols-2 md:gap-12"
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
+      transition={{ duration: 1 }}
+    >
+      {videos.map((video) => (
+        <motion.div
+          key={video.id}
+          className="relative rounded-3xl overflow-hidden shadow-2xl bg-gray-800/90 backdrop-blur-sm"
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ delay: video.id * 0.2 }}
+        >
+          <div className="aspect-video w-full h-full relative">
+            {video.isPlaying ? (
+              <iframe
+                className="w-full h-full"
+                src={getVimeoEmbedUrl(video.videoUrl)}
+                title="Vimeo video player"
+                frameBorder="0"
+                allow="autoplay; fullscreen; picture-in-picture"
+                allowFullScreen
+              />
+            ) : (
+              <>
+                <Image 
+                  src={video.thumbnail} 
+                  width={2560} 
+                  height={1440} 
+                  alt="Video thumbnail" 
+                  className="object-cover h-full w-full"
+                  priority
+                />
+                <div className="absolute bottom-0 left-0 right-0 p-8 bg-gradient-to-t from-gray-900/95 via-gray-900/70 to-transparent">
+                  <div className="flex items-center justify-between">
+                    <div className="flex items-center space-x-6">
+                      <div
+                        className="w-16 h-16 rounded-full bg-purple-600 flex items-center justify-center cursor-pointer hover:bg-purple-700 transition-colors shadow-lg hover:shadow-purple-500/50"
+                        onClick={() => video.setIsPlaying(true)}
+                      >
+                        <Play className="h-8 w-8" />
+                      </div>
+                      <div>
+                        <p className="text-2xl text-white font-bold tracking-tight">{video.title}</p>
+                        <p className="text-xl text-purple-200 mt-1">{video.subtitle}</p>
+                      </div>
+                    </div>
+                    <Button
+                      variant="outline"
+                      size="lg"
+                      className="text-black hover:text-white border-white/20 hover:bg-white/10 transition-colors text-lg px-8"
+                      onClick={() => video.setIsPlaying(!video.isPlaying)}
+                    >
+                      Learn More
+                    </Button>
+                  </div>
+                </div>
+              </>
+            )}
+          </div>
+        </motion.div>
+      ))}
+    </motion.div>
+  );
+};
+
+export default VideoSection;