From 1f6d86c90a077a649bae7338e5fb48842f208d0a Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Sun, 24 Aug 2025 13:56:12 +0000
Subject: [PATCH] Enhance homepage design with animations, gradients, and
 improved UI styling

Co-authored-by: k225193 <k225193@nu.edu.pk>
---
 scrapply/src/app/globals.css |  50 +++++++++++++
 scrapply/src/app/page.tsx    | 137 ++++++++++++++---------------------
 2 files changed, 104 insertions(+), 83 deletions(-)

diff --git a/scrapply/src/app/globals.css b/scrapply/src/app/globals.css
index 95480a8..6784cda 100644
--- a/scrapply/src/app/globals.css
+++ b/scrapply/src/app/globals.css
@@ -206,6 +206,35 @@ body {
   }
 }
 
+@keyframes fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes fade-in-up {
+  from {
+    opacity: 0;
+    transform: translateY(30px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes gradient {
+  0%, 100% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+}
+
 .animate-pulse {
   animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
 }
@@ -214,6 +243,27 @@ body {
   animation: spin 1s linear infinite;
 }
 
+.animate-fade-in {
+  animation: fade-in 0.6s ease-out forwards;
+}
+
+.animate-fade-in-up {
+  animation: fade-in-up 0.8s ease-out forwards;
+}
+
+.animate-fade-in-up.delay-200 {
+  animation-delay: 0.2s;
+}
+
+.animate-fade-in-up.delay-300 {
+  animation-delay: 0.3s;
+}
+
+.animate-gradient {
+  background-size: 200% 200%;
+  animation: gradient 3s ease infinite;
+}
+
 /* Gradient backgrounds */
 .gradient-bg {
   background: linear-gradient(135deg, rgb(var(--background)) 0%, rgb(var(--muted)) 100%);
diff --git a/scrapply/src/app/page.tsx b/scrapply/src/app/page.tsx
index 9fdbfe8..56d69f5 100644
--- a/scrapply/src/app/page.tsx
+++ b/scrapply/src/app/page.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import { useState } from 'react';
-import { ArrowRight, Globe, Code, TestTube, Sparkles, CheckCircle, Clock, Users, BarChart3 } from 'lucide-react';
+import { ArrowRight, Globe, Code, TestTube, Sparkles } from 'lucide-react';
 import { createScrapingRequest, ScrapingRequest } from '@/lib/api';
 import Link from 'next/link';
 
@@ -47,54 +47,46 @@ export default function HomePage() {
   return (
     <div className="min-h-screen">
       {/* Hero Section */}
-      <section className="relative overflow-hidden bg-gradient-to-br from-blue-50 via-white to-purple-50 dark:from-slate-900 dark:via-slate-800 dark:to-slate-900">
-        <div className="absolute inset-0 bg-grid-pattern opacity-5"></div>
-        <div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-24">
+      <section className="relative overflow-hidden bg-gradient-to-br from-blue-50 via-white to-purple-50 dark:from-slate-900 dark:via-slate-800 dark:to-slate-900 min-h-screen flex items-center">
+        {/* Animated background elements */}
+        <div className="absolute inset-0">
+          <div className="absolute top-20 left-10 w-72 h-72 bg-blue-400/10 rounded-full blur-3xl animate-pulse"></div>
+          <div className="absolute bottom-20 right-10 w-96 h-96 bg-purple-400/10 rounded-full blur-3xl animate-pulse delay-1000"></div>
+          <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-80 h-80 bg-gradient-to-r from-blue-400/5 to-purple-400/5 rounded-full blur-3xl animate-pulse delay-500"></div>
+        </div>
+        
+        <div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-24 w-full">
           <div className="text-center">
-            <div className="inline-flex items-center space-x-2 bg-primary/10 text-primary px-4 py-2 rounded-full text-sm font-medium mb-8">
-              <Sparkles className="w-4 h-4" />
+            <div className="inline-flex items-center space-x-2 bg-gradient-to-r from-primary/20 to-purple-600/20 text-primary px-6 py-3 rounded-full text-sm font-medium mb-8 backdrop-blur-sm border border-primary/20 animate-fade-in">
+              <Sparkles className="w-4 h-4 animate-pulse" />
               <span>AI-Powered Web Scraping</span>
             </div>
             
-            <h1 className="text-5xl md:text-6xl font-bold text-foreground mb-6 leading-tight">
+            <h1 className="text-6xl md:text-7xl font-bold text-foreground mb-8 leading-tight animate-fade-in-up">
               Convert Any Website to an
-              <span className="bg-gradient-to-r from-primary to-purple-600 bg-clip-text text-transparent"> API</span>
+              <span className="bg-gradient-to-r from-primary via-purple-600 to-blue-600 bg-clip-text text-transparent animate-gradient"> API</span>
             </h1>
             
-            <p className="text-xl text-muted-foreground mb-12 max-w-3xl mx-auto leading-relaxed">
+            <p className="text-xl md:text-2xl text-muted-foreground mb-16 max-w-4xl mx-auto leading-relaxed animate-fade-in-up delay-200">
               Describe what data you want to extract, and our AI will create a custom API for you. 
               No coding required. Just tell us what you need.
             </p>
 
-            {/* Stats */}
-            <div className="flex justify-center items-center space-x-8 mb-16 text-sm text-muted-foreground">
-              <div className="flex items-center space-x-2">
-                <CheckCircle className="w-4 h-4 text-green-500" />
-                <span>99.9% Success Rate</span>
-              </div>
-              <div className="flex items-center space-x-2">
-                <Clock className="w-4 h-4 text-blue-500" />
-                <span>1-2 Minute Setup</span>
-              </div>
-              <div className="flex items-center space-x-2">
-                <Users className="w-4 h-4 text-purple-500" />
-                <span>Trusted by 10K+ Users</span>
-              </div>
-            </div>
+
           </div>
 
           {/* Create Request Form */}
-          <div className="max-w-2xl mx-auto">
-            <div className="card shadow-xl border-0 bg-white/80 backdrop-blur-sm dark:bg-slate-800/80">
-              <div className="card-header text-center">
-                <h2 className="card-title">Create Your Scraping API</h2>
-                <p className="card-description">Enter a website URL and describe what data you want to extract</p>
+          <div className="max-w-3xl mx-auto animate-fade-in-up delay-300">
+            <div className="card shadow-2xl border-0 bg-white/90 backdrop-blur-xl dark:bg-slate-800/90 rounded-3xl overflow-hidden transform hover:scale-105 transition-all duration-300">
+              <div className="card-header text-center p-8 bg-gradient-to-r from-primary/5 to-purple-600/5">
+                <h2 className="card-title text-2xl font-bold bg-gradient-to-r from-primary to-purple-600 bg-clip-text text-transparent">Create Your Scraping API</h2>
+                <p className="card-description text-lg mt-2">Enter a website URL and describe what data you want to extract</p>
               </div>
               
-              <div className="card-content">
-                <form onSubmit={handleCreateRequest} className="space-y-6">
+                              <div className="card-content p-8">
+                <form onSubmit={handleCreateRequest} className="space-y-8">
                   <div>
-                    <label htmlFor="url" className="block text-sm font-medium text-foreground mb-2">
+                    <label htmlFor="url" className="block text-sm font-semibold text-foreground mb-3">
                       Website URL
                     </label>
                     <input
@@ -103,13 +95,13 @@ export default function HomePage() {
                       value={url}
                       onChange={(e) => setUrl(e.target.value)}
                       placeholder="https://example.com"
-                      className="input text-base"
+                      className="input text-base h-12 border-2 focus:border-primary/50 transition-all duration-200 bg-white/50 backdrop-blur-sm"
                       required
                     />
                   </div>
 
                   <div>
-                    <label htmlFor="description" className="block text-sm font-medium text-foreground mb-2">
+                    <label htmlFor="description" className="block text-sm font-semibold text-foreground mb-3">
                       What data do you want to extract?
                     </label>
                     <textarea
@@ -118,13 +110,13 @@ export default function HomePage() {
                       onChange={(e) => setDescription(e.target.value)}
                       placeholder="e.g., Extract product names, prices, and ratings from this e-commerce site..."
                       rows={4}
-                      className="textarea text-base"
+                      className="textarea text-base border-2 focus:border-primary/50 transition-all duration-200 bg-white/50 backdrop-blur-sm resize-none"
                       required
                     />
                   </div>
 
                   {error && (
-                    <div className="bg-destructive/10 border border-destructive/20 text-destructive rounded-lg p-4 text-sm">
+                    <div className="bg-gradient-to-r from-red-50 to-red-100 dark:from-red-900/20 dark:to-red-800/20 border-2 border-red-200 dark:border-red-800 text-red-700 dark:text-red-300 rounded-xl p-4 text-sm font-medium backdrop-blur-sm">
                       {error}
                     </div>
                   )}
@@ -132,7 +124,7 @@ export default function HomePage() {
                   <button
                     type="submit"
                     disabled={isLoading}
-                    className="w-full btn btn-primary btn-lg font-medium"
+                    className="w-full btn btn-primary btn-lg font-medium bg-gradient-to-r from-primary to-purple-600 hover:from-primary/90 hover:to-purple-600/90 transform hover:scale-105 transition-all duration-200 shadow-lg hover:shadow-xl"
                   >
                     {isLoading ? (
                       <>
@@ -142,7 +134,7 @@ export default function HomePage() {
                     ) : (
                       <>
                         <span>Create API</span>
-                        <ArrowRight className="w-5 h-5" />
+                        <ArrowRight className="w-5 h-5 animate-pulse" />
                       </>
                     )}
                   </button>
@@ -154,42 +146,44 @@ export default function HomePage() {
       </section>
 
       {/* Features Section */}
-      <section className="py-24 bg-background">
+      <section className="py-32 bg-gradient-to-b from-background to-slate-50 dark:to-slate-900/50">
         <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-          <div className="text-center mb-16">
-            <h2 className="text-3xl font-bold text-foreground mb-4">Everything you need to build powerful APIs</h2>
-            <p className="text-lg text-muted-foreground max-w-2xl mx-auto">
-              From simple data extraction to complex web scraping, we&apos;ve got you covered
+          <div className="text-center mb-20">
+            <h2 className="text-4xl md:text-5xl font-bold text-foreground mb-6 bg-gradient-to-r from-primary to-purple-600 bg-clip-text text-transparent">
+              Everything you need to build powerful APIs
+            </h2>
+            <p className="text-xl text-muted-foreground max-w-3xl mx-auto leading-relaxed">
+              From simple data extraction to complex web scraping, we&apos;ve got you covered with cutting-edge AI technology
             </p>
           </div>
 
-          <div className="grid md:grid-cols-3 gap-8">
-            <div className="card p-8 text-center hover:shadow-lg transition-shadow">
-              <div className="w-16 h-16 bg-blue-100 dark:bg-blue-900/20 rounded-2xl flex items-center justify-center mx-auto mb-6">
-                <Globe className="w-8 h-8 text-blue-600" />
+          <div className="grid md:grid-cols-3 gap-12">
+            <div className="group card p-10 text-center hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-2 bg-white/80 backdrop-blur-sm dark:bg-slate-800/80 rounded-3xl border-0">
+              <div className="w-20 h-20 bg-gradient-to-br from-blue-100 to-blue-200 dark:from-blue-900/30 dark:to-blue-800/30 rounded-3xl flex items-center justify-center mx-auto mb-8 group-hover:scale-110 transition-transform duration-300">
+                <Globe className="w-10 h-10 text-blue-600" />
               </div>
-              <h3 className="text-xl font-semibold text-foreground mb-3">Smart Web Scraping</h3>
-              <p className="text-muted-foreground">
+              <h3 className="text-2xl font-bold text-foreground mb-4">Smart Web Scraping</h3>
+              <p className="text-muted-foreground text-lg leading-relaxed">
                 Extract data from any website with natural language descriptions. Our AI understands context and adapts to different site structures.
               </p>
             </div>
 
-            <div className="card p-8 text-center hover:shadow-lg transition-shadow">
-              <div className="w-16 h-16 bg-green-100 dark:bg-green-900/20 rounded-2xl flex items-center justify-center mx-auto mb-6">
-                <Code className="w-8 h-8 text-green-600" />
+            <div className="group card p-10 text-center hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-2 bg-white/80 backdrop-blur-sm dark:bg-slate-800/80 rounded-3xl border-0">
+              <div className="w-20 h-20 bg-gradient-to-br from-green-100 to-green-200 dark:from-green-900/30 dark:to-green-800/30 rounded-3xl flex items-center justify-center mx-auto mb-8 group-hover:scale-110 transition-transform duration-300">
+                <Code className="w-10 h-10 text-green-600" />
               </div>
-              <h3 className="text-xl font-semibold text-foreground mb-3">Instant API Generation</h3>
-              <p className="text-muted-foreground">
+              <h3 className="text-2xl font-bold text-foreground mb-4">Instant API Generation</h3>
+              <p className="text-muted-foreground text-lg leading-relaxed">
                 Automatically generate REST APIs from your scraping requirements. Get JSON endpoints ready for production use.
               </p>
             </div>
 
-            <div className="card p-8 text-center hover:shadow-lg transition-shadow">
-              <div className="w-16 h-16 bg-purple-100 dark:bg-purple-900/20 rounded-2xl flex items-center justify-center mx-auto mb-6">
-                <TestTube className="w-8 h-8 text-purple-600" />
+            <div className="group card p-10 text-center hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-2 bg-white/80 backdrop-blur-sm dark:bg-slate-800/80 rounded-3xl border-0">
+              <div className="w-20 h-20 bg-gradient-to-br from-purple-100 to-purple-200 dark:from-purple-900/30 dark:to-purple-800/30 rounded-3xl flex items-center justify-center mx-auto mb-8 group-hover:scale-110 transition-transform duration-300">
+                <TestTube className="w-10 h-10 text-purple-600" />
               </div>
-              <h3 className="text-xl font-semibold text-foreground mb-3">Test & Iterate</h3>
-              <p className="text-muted-foreground">
+              <h3 className="text-2xl font-bold text-foreground mb-4">Test & Iterate</h3>
+              <p className="text-muted-foreground text-lg leading-relaxed">
                 Test your APIs and refine them through natural language chat. Get instant feedback and make adjustments on the fly.
               </p>
             </div>
@@ -197,30 +191,7 @@ export default function HomePage() {
         </div>
       </section>
 
-      {/* CTA Section */}
-      <section className="py-16 bg-primary">
-        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
-          <h2 className="text-3xl font-bold text-white mb-4">Ready to get started?</h2>
-          <p className="text-xl text-blue-100 mb-8">
-            Join thousands of developers who are already using Scrapply to build powerful APIs
-          </p>
-          <div className="flex flex-col sm:flex-row gap-4 justify-center">
-            <Link
-              href="/dashboard"
-              className="btn btn-secondary btn-lg"
-            >
-              <BarChart3 className="w-5 h-5 mr-2" />
-              View All APIs
-            </Link>
-            <Link
-              href="/settings"
-              className="btn btn-outline btn-lg text-white border-white hover:bg-white hover:text-primary"
-            >
-              Settings
-            </Link>
-          </div>
-        </div>
-      </section>
+
     </div>
   );
 }