From 76a1186b531ce3a8fe5fc85f71f3373f6f7f7bc7 Mon Sep 17 00:00:00 2001
From: Madhu <lalammadhulika@gmail.com>
Date: Fri, 24 Apr 2026 18:49:42 +0530
Subject: [PATCH 1/3] Updated hero section text

---
 src/pages/Home/components/Hero.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/pages/Home/components/Hero.jsx b/src/pages/Home/components/Hero.jsx
index 509a054..273629e 100644
--- a/src/pages/Home/components/Hero.jsx
+++ b/src/pages/Home/components/Hero.jsx
@@ -37,8 +37,8 @@ export function Hero() {
           variants={item}
           className="text-6xl md:text-8xl font-extrabold text-white tracking-tighter leading-[1.1]"
         >
-          PDF tools that <br className="hidden md:block" />
-          respect your <span className="text-transparent bg-clip-text bg-gradient-to-r from-zinc-300 to-zinc-600">privacy.</span>
+          smart PDF tools that <br className="hidden md:block" />
+          help everyone <span className="text-transparent bg-clip-text bg-gradient-to-r from-zinc-300 to-zinc-600">easily.</span>
         </Motion.h1>
 
         <Motion.p 

From ead64cd1289710c982f6d4e73310c2c75ac18ce4 Mon Sep 17 00:00:00 2001
From: Madhu <lalammadhulika@gmail.com>
Date: Fri, 24 Apr 2026 19:09:48 +0530
Subject: [PATCH 2/3] Fix typo in README demo URL

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 8c5fc33..badd28e 100644
--- a/README.md
+++ b/README.md
@@ -16,7 +16,7 @@
 [![Netlify Status](https://api.netlify.com/api/v1/badges/b4fa8a5d-0510-4b09-a5a6-b043ffcf4691/deploy-status)](https://app.netlify.com/projects/quickstpdf/deploys)
 [![CI Pipeline](https://github.com/jhasourav07/quickpdf/actions/workflows/ci.yml/badge.svg)](https://github.com/jhasourav07/quickpdf/actions/workflows/ci.yml)
 
-**[🚀 Try the Live Demo Here](https://quickpdff.vercel.app/)**
+**[🚀 Try the Live Demo Here](https://quickpdf.vercel.app/)**
 
 ---
 

From 1c6be2993cd3642538a36938b50150817f1d57ba Mon Sep 17 00:00:00 2001
From: Madhu <lalammadhulika@gmail.com>
Date: Fri, 24 Apr 2026 19:48:14 +0530
Subject: [PATCH 3/3] Improved hero UI and added animations

---
 package-lock.json                  |  40 -----------
 src/index.css                      |  40 +++++++++++
 src/pages/Home/components/Hero.jsx | 112 +++++++++++++++++++++++------
 3 files changed, 131 insertions(+), 61 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 93cd12d..78b1f26 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3195,16 +3195,6 @@
         }
       }
     },
-    "node_modules/@reown/appkit-controllers/node_modules/zod": {
-      "version": "3.25.76",
-      "resolved": "https://registry.npmjs.org/zod/-/zod-3.25.76.tgz",
-      "integrity": "sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==",
-      "extraneous": true,
-      "license": "MIT",
-      "funding": {
-        "url": "https://github.com/sponsors/colinhacks"
-      }
-    },
     "node_modules/@reown/appkit-pay": {
       "version": "1.7.8",
       "resolved": "https://registry.npmjs.org/@reown/appkit-pay/-/appkit-pay-1.7.8.tgz",
@@ -3562,16 +3552,6 @@
         }
       }
     },
-    "node_modules/@reown/appkit-utils/node_modules/zod": {
-      "version": "3.25.76",
-      "resolved": "https://registry.npmjs.org/zod/-/zod-3.25.76.tgz",
-      "integrity": "sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==",
-      "extraneous": true,
-      "license": "MIT",
-      "funding": {
-        "url": "https://github.com/sponsors/colinhacks"
-      }
-    },
     "node_modules/@reown/appkit-wallet": {
       "version": "1.7.8",
       "resolved": "https://registry.npmjs.org/@reown/appkit-wallet/-/appkit-wallet-1.7.8.tgz",
@@ -3881,16 +3861,6 @@
         }
       }
     },
-    "node_modules/@reown/appkit/node_modules/zod": {
-      "version": "3.25.76",
-      "resolved": "https://registry.npmjs.org/zod/-/zod-3.25.76.tgz",
-      "integrity": "sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==",
-      "extraneous": true,
-      "license": "MIT",
-      "funding": {
-        "url": "https://github.com/sponsors/colinhacks"
-      }
-    },
     "node_modules/@rolldown/binding-android-arm64": {
       "version": "1.0.0-rc.17",
       "resolved": "https://registry.npmjs.org/@rolldown/binding-android-arm64/-/binding-android-arm64-1.0.0-rc.17.tgz",
@@ -6561,16 +6531,6 @@
         }
       }
     },
-    "node_modules/@walletconnect/utils/node_modules/zod": {
-      "version": "3.25.76",
-      "resolved": "https://registry.npmjs.org/zod/-/zod-3.25.76.tgz",
-      "integrity": "sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==",
-      "extraneous": true,
-      "license": "MIT",
-      "funding": {
-        "url": "https://github.com/sponsors/colinhacks"
-      }
-    },
     "node_modules/@walletconnect/window-getters": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/@walletconnect/window-getters/-/window-getters-1.0.1.tgz",
diff --git a/src/index.css b/src/index.css
index d75336d..bed35cd 100644
--- a/src/index.css
+++ b/src/index.css
@@ -17,4 +17,44 @@ body {
   -webkit-font-smoothing: antialiased;
   /* This makes the scrollbar dark on supported browsers */
   color-scheme: dark; 
+}
+
+/* Custom animations for Hero section */
+@keyframes pulse-slow {
+  0%, 100% {
+    opacity: 0.6;
+  }
+  50% {
+    opacity: 1;
+  }
+}
+
+@keyframes float {
+  0%, 100% {
+    transform: translateY(0px);
+  }
+  50% {
+    transform: translateY(-10px);
+  }
+}
+
+@keyframes glow {
+  0%, 100% {
+    box-shadow: 0 0 20px rgba(6, 182, 212, 0.3);
+  }
+  50% {
+    box-shadow: 0 0 40px rgba(6, 182, 212, 0.6);
+  }
+}
+
+.animate-pulse-slow {
+  animation: pulse-slow 4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+
+.animate-float {
+  animation: float 6s ease-in-out infinite;
+}
+
+.animate-glow {
+  animation: glow 2s ease-in-out infinite;
 }
\ No newline at end of file
diff --git a/src/pages/Home/components/Hero.jsx b/src/pages/Home/components/Hero.jsx
index 273629e..0c4a751 100644
--- a/src/pages/Home/components/Hero.jsx
+++ b/src/pages/Home/components/Hero.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { ShieldCheck } from 'lucide-react';
+import { ShieldCheck, ArrowRight, Sparkles, Zap } from 'lucide-react';
 import { motion as Motion } from 'framer-motion';
 
 export function Hero() {
@@ -7,47 +7,117 @@ export function Hero() {
     hidden: { opacity: 0 },
     show: {
       opacity: 1,
-      transition: { staggerChildren: 0.15, delayChildren: 0.2 }
+      transition: { staggerChildren: 0.1, delayChildren: 0.15 }
     }
   };
 
   const item = {
-    hidden: { opacity: 0, y: 20 },
-    show: { opacity: 1, y: 0, transition: { type: "spring", stiffness: 300, damping: 24 } }
+    hidden: { opacity: 0, y: 30 },
+    show: { opacity: 1, y: 0, transition: { type: "spring", stiffness: 400, damping: 30 } }
+  };
+
+  const floatingIcon = {
+    y: [0, -10, 0],
+    transition: { duration: 6, repeat: Infinity, ease: "easeInOut" }
   };
 
   return (
-    <div className="relative text-center mb-24 pt-20 pb-10 w-full flex flex-col items-center justify-center">
-      
-      
+    <div className="relative w-full min-h-[90vh] flex flex-col items-center justify-center overflow-hidden">
+      {/* Animated background elements */}
+      <div className="absolute inset-0 overflow-hidden">
+        <div className="absolute top-10 left-10 w-72 h-72 bg-blue-500/20 rounded-full filter blur-3xl opacity-0 animate-pulse"></div>
+        <div className="absolute bottom-10 right-10 w-72 h-72 bg-purple-500/20 rounded-full filter blur-3xl opacity-0 animate-pulse" style={{animationDelay: '1s'}}></div>
+        <div className="absolute top-1/2 left-1/2 w-96 h-96 bg-cyan-500/10 rounded-full filter blur-3xl opacity-0 animate-pulse" style={{animationDelay: '2s'}}></div>
+      </div>
+
+      {/* Main content */}
       <Motion.div 
         variants={container}
         initial="hidden"
         animate="show"
-        className="relative z-10 space-y-8"
+        className="relative z-10 text-center space-y-8 px-4 max-w-5xl"
       >
+        {/* Badge */}
         <Motion.div variants={item}>
-          <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full border border-white/10 bg-white/5 text-zinc-300 text-xs font-mono uppercase tracking-widest backdrop-blur-md hover:bg-white/10 transition-colors cursor-default shadow-xl">
-            <ShieldCheck className="w-4 h-4 text-white" />
-            Client-Side Processing
+          <div className="inline-flex items-center gap-3 px-4 py-2 rounded-full border border-cyan-500/30 bg-cyan-500/10 text-cyan-300 text-sm font-medium backdrop-blur-md hover:border-cyan-400/60 hover:bg-cyan-500/20 transition-all duration-300 shadow-xl hover:shadow-cyan-500/20">
+            <div className="flex items-center gap-2">
+              <Sparkles className="w-4 h-4 text-cyan-400" />
+              <span>Next-Gen PDF Processing</span>
+            </div>
+            <ArrowRight className="w-4 h-4 opacity-60" />
           </div>
         </Motion.div>
 
-        <Motion.h1 
-          variants={item}
-          className="text-6xl md:text-8xl font-extrabold text-white tracking-tighter leading-[1.1]"
-        >
-          smart PDF tools that <br className="hidden md:block" />
-          help everyone <span className="text-transparent bg-clip-text bg-gradient-to-r from-zinc-300 to-zinc-600">easily.</span>
-        </Motion.h1>
+        {/* Main heading with enhanced gradient */}
+        <Motion.div variants={item} className="space-y-4">
+          <h1 className="text-5xl sm:text-6xl lg:text-7xl xl:text-8xl font-black text-white tracking-tighter leading-[0.95] !my-0">
+            Transform Your
+            <span className="block text-transparent bg-clip-text bg-gradient-to-r from-cyan-300 via-blue-300 to-purple-300 animate-pulse-slow">
+              PDF Workflow
+            </span>
+            Instantly
+          </h1>
+        </Motion.div>
 
+        {/* Subtitle with better formatting */}
         <Motion.p 
           variants={item}
-          className="text-lg md:text-xl text-zinc-400 max-w-2xl mx-auto font-light leading-relaxed"
+          className="text-base sm:text-lg lg:text-xl text-zinc-300/80 max-w-3xl mx-auto font-light leading-relaxed"
         >
-          Merge and split your files directly in the browser. <br className="hidden sm:block" />
-          No backend. No uploads. Zero risk of data leaks.
+          Experience lightning-fast PDF tools that work entirely in your browser. 
+          <span className="block text-zinc-400 mt-2">
+            No servers. No data uploads. Just pure, client-side magic. ✨
+          </span>
         </Motion.p>
+
+        {/* Feature highlights */}
+        <Motion.div 
+          variants={item}
+          className="flex flex-col sm:flex-row items-center justify-center gap-4 pt-4"
+        >
+          <div className="flex items-center gap-2 text-sm text-zinc-300">
+            <ShieldCheck className="w-5 h-5 text-green-400 flex-shrink-0" />
+            <span>100% Private</span>
+          </div>
+          <div className="hidden sm:block w-1 h-1 rounded-full bg-zinc-600"></div>
+          <div className="flex items-center gap-2 text-sm text-zinc-300">
+            <Zap className="w-5 h-5 text-yellow-400 flex-shrink-0" />
+            <span>Blazingly Fast</span>
+          </div>
+          <div className="hidden sm:block w-1 h-1 rounded-full bg-zinc-600"></div>
+          <div className="flex items-center gap-2 text-sm text-zinc-300">
+            <span className="w-5 h-5 text-blue-400 flex-shrink-0 font-bold">∞</span>
+            <span>No Limits</span>
+          </div>
+        </Motion.div>
+
+        {/* CTA Buttons */}
+        <Motion.div 
+          variants={item}
+          className="flex flex-col sm:flex-row items-center justify-center gap-4 pt-6"
+        >
+          <button className="group relative px-8 py-4 rounded-lg font-semibold text-white overflow-hidden transition-all duration-300 hover:scale-105 active:scale-95">
+            <div className="absolute inset-0 bg-gradient-to-r from-cyan-500 to-blue-600 group-hover:from-cyan-400 group-hover:to-blue-500 transition-all"></div>
+            <div className="relative flex items-center gap-2">
+              <span>Get Started</span>
+              <ArrowRight className="w-4 h-4 group-hover:translate-x-1 transition-transform" />
+            </div>
+          </button>
+          <button className="px-8 py-4 rounded-lg font-semibold text-white border border-zinc-600 hover:border-zinc-400 bg-white/5 hover:bg-white/10 transition-all duration-300 hover:scale-105 active:scale-95">
+            Learn More
+          </button>
+        </Motion.div>
+      </Motion.div>
+
+      {/* Scroll indicator */}
+      <Motion.div
+        animate={{ y: [0, 8, 0] }}
+        transition={{ duration: 2, repeat: Infinity }}
+        className="absolute bottom-10 left-1/2 transform -translate-x-1/2 z-20"
+      >
+        <div className="w-6 h-10 border-2 border-zinc-600 rounded-full flex items-start justify-center p-2">
+          <div className="w-1 h-2 bg-zinc-600 rounded-full animate-pulse"></div>
+        </div>
       </Motion.div>
     </div>
   );