Updated hero section text

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/)**
 
 ---
 

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;
 }

src/pages/Home/components/Hero.jsx

@@ -1,53 +1,123 @@
 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() {
   const container = {
     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]"
-        >
-          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>
-        </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>
   );