Redesign landing page

page/src/landing-page.tsx

@@ -10,120 +10,198 @@ import {
   ExternalLink,
   Github,
   Play,
+  ArrowRight,
+  Code,
+  Zap,
+  Target,
+  Users,
+  BookOpen,
+  Download,
 } from "lucide-react";
 import { Header } from "./Header";
 
 export function LandingPage() {
   const features = [
     {
-      icon: <Cpu className="h-6 w-6 text-[var(--primary)]" />,
+      icon: <Cpu className="h-8 w-8" />,
       title: "Syscall-Level Emulation",
       description:
         "Operates at syscall level, leveraging existing system DLLs instead of reimplementing Windows APIs",
+      accent: "from-cyan-500 to-blue-500",
     },
     {
-      icon: <Database className="h-6 w-6 text-[var(--primary)]" />,
+      icon: <Database className="h-8 w-8" />,
       title: "Advanced Memory Management",
       description:
         "Supports Windows-specific memory types including reserved, committed, built on top of Unicorn's memory management",
+      accent: "from-purple-500 to-pink-500",
     },
     {
-      icon: <FileCode className="h-6 w-6 text-[var(--primary)]" />,
+      icon: <FileCode className="h-8 w-8" />,
       title: "Complete PE Loading",
       description:
         "Handles executable and DLL loading with proper memory mapping, relocations, and TLS",
+      accent: "from-lime-400 to-green-500",
     },
     {
-      icon: <Shield className="h-6 w-6 text-[var(--primary)]" />,
+      icon: <Shield className="h-8 w-8" />,
       title: "Exception Handling",
       description:
         "Implements Windows structured exception handling (SEH) with proper exception dispatcher and unwinding support",
+      accent: "from-orange-400 to-red-500",
     },
     {
-      icon: <Layers className="h-6 w-6 text-[var(--primary)]" />,
+      icon: <Layers className="h-8 w-8" />,
       title: "Threading Support",
       description: "Provides a scheduled (round-robin) threading model",
+      accent: "from-teal-500 to-blue-500",
     },
     {
-      icon: <Terminal className="h-6 w-6 text-[var(--primary)]" />,
+      icon: <Terminal className="h-8 w-8" />,
       title: "Debugging Interface",
       description:
         "Implements GDB serial protocol for integration with common debugging tools",
+      accent: "from-purple-500 to-indigo-500",
     },
   ];
 
+  const useCases = [
+    {
+      icon: <Shield className="h-6 w-6" />,
+      title: "Security Research",
+      description:
+        "Analyze malware and security vulnerabilities in a controlled environment",
+    },
+    {
+      icon: <Code className="h-6 w-6" />,
+      title: "DRM Research",
+      description:
+        "Study digital rights management systems and protection mechanisms",
+    },
+    {
+      icon: <Target className="h-6 w-6" />,
+      title: "Malware Analysis",
+      description:
+        "Reverse engineer malicious software with full process control",
+    },
+  ];
+
+  const stats = [
+    { value: "100%", label: "Open Source" },
+    { value: "C++", label: "High Performance" },
+    { value: "GDB", label: "Debug Protocol" },
+    { value: "64 bit", label: "Native PE Loading" },
+  ];
+
   return (
     <>
       <Header
         title="Sogen - Windows User Space Emulator"
         description="Sogen is a high-performance Windows user space emulator that can emulate windows processes. It is ideal for security-, DRM- or malware research."
       />
-      <div className="flex flex-col min-h-screen">
-        {/* Hero Section */}
-        <header className="bg-gradient-to-r from-blue-600 to-cyan-500 py-16 md:py-24 rounded-b-3xl">
-          <div className="container mx-auto px-8 md:px-16">
-            <div className="flex flex-col md:flex-row items-center justify-between">
-              <div className="w-full md:w-1/2 space-y-6 text-center md:text-left text-white">
-                <h1 className="text-4xl md:text-6xl font-bold tracking-tight">
-                  Sogen
-                </h1>
-                <p className="text-xl md:text-2xl font-light">
-                  A high-performance Windows user space emulator
-                </p>
-                <div className="flex flex-wrap gap-4 justify-center md:justify-start">
-                  <a href="#/playground">
-                    <Button
-                      size="lg"
-                      className="bg-white text-blue-700 hover:bg-blue-50"
-                    >
-                      <Play className="mr-2 h-5 w-5" />
-                      Try Online
-                    </Button>
-                  </a>
-                  <a href="https://github.com/momo5502/sogen" target="_blank">
-                    <Button
-                      size="lg"
-                      variant="outline"
-                      className="border-white text-white hover:bg-white/10"
-                    >
-                      <Github className="mr-2 h-5 w-5" />
-                      GitHub
-                    </Button>
-                  </a>
-                </div>
+      <div className="flex flex-col min-h-screen bg-gradient-to-br from-zinc-900 via-neutral-900 to-black">
+        {/* Hero Section with Animated Background */}
+        <section className="relative overflow-hidden">
+          {/* Animated Background Elements */}
+          <div className="absolute inset-0">
+            <div className="absolute top-20 left-10 w-72 h-72 bg-blue-500/10 rounded-full blur-3xl animate-pulse"></div>
+            <div className="absolute top-40 right-20 w-96 h-96 bg-purple-500/10 rounded-full blur-3xl animate-pulse delay-1000"></div>
+            <div className="absolute bottom-20 left-1/3 w-80 h-80 bg-cyan-500/10 rounded-full blur-3xl animate-pulse delay-2000"></div>
+          </div>
+
+          <div className="relative container mx-auto px-6 py-24 md:py-32">
+            <div className="text-center space-y-8 max-w-4xl mx-auto">
+              {/* Badge */}
+              <div className="inline-flex items-center gap-2 bg-blue-500/20 border border-blue-500/30 rounded-full px-4 py-2 text-blue-300 text-sm font-medium">
+                <Zap className="h-4 w-4" />
+                High-Performance Windows Emulation
               </div>
-              {/*<div className="w-full md:w-1/2 mt-8 md:mt-0 flex justify-center md:justify-end">
-              <div className="relative w-full max-w-md">
-                <div className="absolute inset-0 bg-gradient-to-r from-blue-500/20 to-indigo-500/20 rounded-lg blur-xl"></div>
-                <img
-                  src="/api/placeholder/600/400"
-                  alt="Sogen Emulator"
-                  className="relative rounded-lg shadow-xl w-full"
-                />
+
+              {/* Main Headline */}
+              <h1 className="text-5xl md:text-7xl font-bold bg-gradient-to-r from-white via-blue-100 to-cyan-200 bg-clip-text text-transparent leading-tight">
+                Sogen
+              </h1>
+
+              <p className="text-xl md:text-2xl text-neutral-300 font-light leading-relaxed">
+                Revolutionary Windows user space emulator.
+                <br />
+                <span className="text-blue-400">
+                  Perfect for security research, malware analysis, and DRM
+                  research.
+                </span>
+              </p>
+
+              {/* CTA Buttons */}
+              <div className="flex flex-col sm:flex-row gap-4 justify-center items-center pt-8">
+                <a href="#/playground">
+                  <Button
+                    size="lg"
+                    className="bg-gradient-to-r from-blue-600 to-cyan-600 hover:from-blue-700 hover:to-cyan-700 text-white border-0 px-8 py-6 text-lg font-semibold group transition-all duration-300 transform hover:scale-105"
+                  >
+                    <Play className="mr-2 h-5 w-5 group-hover:scale-110 transition-transform" />
+                    Try Live Demo
+                    <ArrowRight className="ml-2 h-5 w-5 group-hover:translate-x-1 transition-transform" />
+                  </Button>
+                </a>
+                <a href="https://github.com/momo5502/sogen" target="_blank">
+                  <Button
+                    size="lg"
+                    variant="outline"
+                    className="border-gray-600 text-gray-300 hover:bg-gray-800/50 px-8 py-6 text-lg font-semibold group transition-all duration-300"
+                  >
+                    <Github className="mr-2 h-5 w-5 group-hover:scale-110 transition-transform" />
+                    View on GitHub
+                    <ExternalLink className="ml-2 h-4 w-4" />
+                  </Button>
+                </a>
+              </div>
+
+              {/* Stats */}
+              <div className="flex justify-center gap-8 pt-12">
+                {stats.map((stat, index) => (
+                  <div key={index} className="text-center">
+                    <div className="text-2xl font-bold text-white">
+                      {stat.value}
+                    </div>
+                    <div className="text-sm text-gray-400">{stat.label}</div>
+                  </div>
+                ))}
               </div>
-            </div>*/}
             </div>
           </div>
-        </header>
+        </section>
 
-        {/* Key Features */}
-        <section className="py-16 md:py-24">
-          <div className="container mx-auto px-4 md:px-6">
-            <div className="text-center mb-12">
-              <h2 className="text-3xl md:text-4xl font-bold mb-4">
-                Key Features
+        {/* Features Section with Hover Effects */}
+        <section className="py-24 relative">
+          <div className="container mx-auto px-6">
+            <div className="text-center mb-16">
+              <h2 className="text-4xl md:text-5xl font-bold text-white mb-6">
+                Powerful Features
               </h2>
+              <p className="text-xl text-gray-400 max-w-2xl mx-auto">
+                Built from the ground up for performance and accuracy in Windows
+                process emulation
+              </p>
             </div>
 
-            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
               {features.map((feature, index) => (
-                <Card key={index} className="hover:shadow-lg transition-shadow">
-                  <CardHeader>
-                    <div className="mb-2">{feature.icon}</div>
-                    <CardTitle>{feature.title}</CardTitle>
+                <Card
+                  key={index}
+                  className="bg-gray-800/50 border-gray-700 hover:bg-gray-800/80 transition-all duration-200 group hover:shadow-2xl"
+                >
+                  <CardHeader className="pb-4">
+                    <div
+                      className={`w-16 h-16 rounded-xl bg-gradient-to-br ${feature.accent} p-4 mb-4 transition-transform duration-200`}
+                    >
+                      <div className="text-white">{feature.icon}</div>
+                    </div>
+                    <CardTitle className="text-white text-xl font-semibold group-hover:text-blue-300 transition-colors">
+                      {feature.title}
+                    </CardTitle>
                   </CardHeader>
                   <CardContent>
-                    <p className="text-gray-600 dark:text-gray-400">
+                    <p className="text-gray-300 leading-relaxed">
                       {feature.description}
                     </p>
                   </CardContent>
@@ -133,58 +211,142 @@ export function LandingPage() {
           </div>
         </section>
 
-        {/* Video Section */}
-        <section className="bg-zinc-900 py-16 md:py-24">
-          <div className="container mx-auto px-4 md:px-6">
-            <div className="text-center mb-12">
-              <h2 className="text-3xl md:text-4xl font-bold mb-4">
-                See Sogen in Action
+        {/* Use Cases */}
+        <section className="py-24 bg-gray-900/50">
+          <div className="container mx-auto px-6">
+            <div className="text-center mb-16">
+              <h2 className="text-4xl font-bold text-white mb-6">
+                Perfect For Your Research
               </h2>
-              <p className="text-lg text-gray-600 dark:text-gray-400 max-w-3xl mx-auto">
-                Watch an overview of the emulator's capabilities and see how it
-                can help with your research.
+              <p className="text-xl text-gray-400">
+                Designed for researchers who need precise control over Windows
+                process execution
               </p>
             </div>
 
-            <div className="max-w-4xl mx-auto">
-              <div className="relative aspect-video rounded-2xl shadow-2xl">
-                <iframe
-                  className="rounded-2xl"
-                  width="100%"
-                  height="100%"
-                  src="https://www.youtube.com/embed/wY9Q0DhodOQ?si=Lm_anpeBU6Txl5AW"
-                  title="YouTube video player"
-                  frameBorder="0"
-                  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
-                  referrerPolicy="strict-origin-when-cross-origin"
-                  allowFullScreen
-                ></iframe>
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-4xl mx-auto">
+              {useCases.map((useCase, index) => (
+                <div
+                  key={index}
+                  className="text-center p-8 rounded-2xl bg-gray-800/50 border border-gray-700 hover:border-blue-500/50 transition-all duration-300 group"
+                >
+                  <div className="w-12 h-12 mx-auto mb-4 rounded-xl bg-gradient-to-br from-blue-500 to-cyan-500 p-3 group-hover:scale-110 transition-transform">
+                    <div className="text-white">{useCase.icon}</div>
+                  </div>
+                  <h3 className="text-xl font-semibold text-white mb-3">
+                    {useCase.title}
+                  </h3>
+                  <p className="text-gray-400">{useCase.description}</p>
+                </div>
+              ))}
+            </div>
+          </div>
+        </section>
+
+        {/* Video Section with Modern Design */}
+        <section className="py-24">
+          <div className="container mx-auto px-6">
+            <div className="text-center mb-16">
+              <h2 className="text-4xl font-bold text-white mb-6">
+                See Sogen in Action
+              </h2>
+              <p className="text-xl text-gray-400 max-w-3xl mx-auto">
+                Watch a comprehensive overview of the emulator's capabilities
+                and discover how it can accelerate your research workflow.
+              </p>
+            </div>
+
+            <div className="max-w-5xl mx-auto">
+              <div className="relative group">
+                <div className="absolute -inset-4 bg-gradient-to-r from-blue-500/20 to-cyan-500/20 rounded-3xl blur-xl group-hover:blur-2xl transition-all duration-300"></div>
+                <div className="relative aspect-video rounded-2xl overflow-hidden border border-gray-700">
+                  <iframe
+                    className="w-full h-full"
+                    src="https://www.youtube.com/embed/wY9Q0DhodOQ?si=Lm_anpeBU6Txl5AW"
+                    title="Sogen Emulator Overview"
+                    frameBorder="0"
+                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+                    referrerPolicy="strict-origin-when-cross-origin"
+                    allowFullScreen
+                  ></iframe>
+                </div>
               </div>
-              <div className="mt-4 text-center"></div>
+            </div>
+          </div>
+        </section>
+
+        {/* CTA Section */}
+        <section className="py-24 bg-gradient-to-r from-gray-900 to-zinc-900">
+          <div className="container mx-auto px-6 text-center">
+            <h2 className="text-4xl font-bold text-white mb-6">
+              Ready to Start Emulating?
+            </h2>
+            <p className="text-xl text-gray-300 mb-8 max-w-2xl mx-auto">
+              Join researchers worldwide who trust Sogen for their Windows
+              emulation needs.
+            </p>
+            <div className="flex flex-col sm:flex-row gap-4 justify-center">
+              <a href="#/playground">
+                <Button
+                  size="lg"
+                  className="bg-white text-blue-900 hover:bg-blue-50 px-8 py-6 text-lg font-semibold"
+                >
+                  <Play className="mr-2 h-5 w-5" />
+                  Launch Playground
+                </Button>
+              </a>
+              <a href="https://github.com/momo5502/sogen" target="_blank">
+                <Button
+                  size="lg"
+                  variant="outline"
+                  className="border-white text-white hover:bg-white/10 px-8 py-6 text-lg font-semibold"
+                >
+                  <Download className="mr-2 h-5 w-5" />
+                  Download Source
+                </Button>
+              </a>
             </div>
           </div>
         </section>
 
         {/* Footer */}
-        <footer className="py-12">
-          <div className="container mx-auto px-4 md:px-6">
+        <footer className="py-16 border-t border-gray-800">
+          <div className="container mx-auto px-6">
             <div className="flex flex-col md:flex-row justify-between items-center">
-              <div className="mb-6 md:mb-0">
-                <h2 className="text-2xl font-bold">Sogen</h2>
-                <p className="mt-2 text-gray-400">
+              <div className="mb-8 md:mb-0 text-center md:text-left">
+                <h2 className="text-3xl font-bold bg-gradient-to-r from-blue-400 to-cyan-400 bg-clip-text text-transparent">
+                  Sogen
+                </h2>
+                <p className="mt-2 text-gray-400 text-lg">
                   Windows User Space Emulator
                 </p>
+                <p className="mt-1 text-gray-500 text-sm">
+                  Built by{" "}
+                  <a href="https://momo5502.com" target="_blank">
+                    momo5502
+                  </a>
+                </p>
               </div>
-              <div className="flex space-x-6">
+              <div className="flex items-center space-x-6">
                 <a
                   href="https://github.com/momo5502/sogen"
                   target="_blank"
-                  className="hover:text-blue-400"
+                  className="text-gray-400 hover:text-blue-400 transition-colors p-2 rounded-lg hover:bg-gray-800/50"
                 >
                   <Github className="h-6 w-6" />
                 </a>
-                <a href="#/playground" className="hover:text-blue-400">
-                  <ExternalLink className="h-6 w-6" />
+                <a
+                  href="#/playground"
+                  className="text-gray-400 hover:text-blue-400 transition-colors p-2 rounded-lg hover:bg-gray-800/50"
+                >
+                  <Play className="h-6 w-6" />
+                </a>
+                <a
+                  href="https://github.com/momo5502/sogen/wiki"
+                  target="_blank"
+                  className="text-gray-400 hover:text-blue-400 transition-colors p-2 rounded-lg hover:bg-gray-800/50"
+                >
+                  <BookOpen className="h-6 w-6" />
                 </a>
               </div>
             </div>