From eb554b8aadf33740a46ad8a95eff4a14b9edefb1 Mon Sep 17 00:00:00 2001
From: Thatsaphorn Atchariyaphap <thatsaphorn@outlook.de>
Date: Thu, 19 Jun 2025 08:28:40 +0900
Subject: [PATCH] Replace `Image` component with an iframe preview for demos,
 including smooth vertical animation, and adjust associated layout for better
 visualization.

---
 main-website/app/page.tsx | 34 +++++++++++++++++++++++++---------
 1 file changed, 25 insertions(+), 9 deletions(-)

diff --git a/main-website/app/page.tsx b/main-website/app/page.tsx
index 178034c..dcd2ebe 100644
--- a/main-website/app/page.tsx
+++ b/main-website/app/page.tsx
@@ -1,7 +1,6 @@
 'use client'
 
 import {demoCategories} from './data/demos'
-import Image from 'next/image'
 import Link from 'next/link'
 import {motion} from 'framer-motion'
 
@@ -23,14 +22,31 @@ export default function Home() {
                                 animate={{opacity: 1, y: 0}}
                                 transition={{duration: 0.4}}
                             >
-                                <Image
-                                    src={demo.preview}
-                                    alt={`${demo.name} Vorschau`}
-                                    width={600}
-                                    height={300}
-                                    className="w-full h-auto object-cover"
-                                />
+                                {/* Preview iframe */}
+                                <div className="relative w-full h-[270px] overflow-hidden bg-black">
+                                    <motion.div
+                                        className="absolute inset-0"
+                                        style={{height: '200%', width: '100%'}}
+                                        animate={{y: ['0%', '-50%']}}
+                                        transition={{
+                                            repeat: Infinity,
+                                            repeatType: 'reverse',
+                                            duration: 7,
+                                            ease: 'easeInOut',
+                                        }}
+                                    >
+                                        <iframe
+                                            src={demo.url}
+                                            className="w-full h-full"
+                                            style={{
+                                                border: 'none',
+                                                pointerEvents: 'none',
+                                            }}
+                                        />
+                                    </motion.div>
+                                </div>
 
+                                {/* Info and button */}
                                 <div className="flex flex-col flex-1 p-4">
                                     <h3 className="text-xl font-semibold mb-2">{demo.name}</h3>
 
@@ -60,4 +76,4 @@ export default function Home() {
             ))}
         </main>
     )
-}
\ No newline at end of file
+}