From d8e77f1e5b0e197c23f435648c71714a06161c18 Mon Sep 17 00:00:00 2001
From: azeeee05 <azeemazm31@gmail.com>
Date: Wed, 9 Sep 2026 10:32:54 +0530
Subject: [PATCH] feat: implement HeroSection component and enable trailing
 slash in next.config.ts

---
 next.config.ts                                |  1 +
 .../HomePage/components/HeroSection.tsx       | 38 ++++++++++---------
 2 files changed, 21 insertions(+), 18 deletions(-)

diff --git a/next.config.ts b/next.config.ts
index 00c940e..d58102b 100644
--- a/next.config.ts
+++ b/next.config.ts
@@ -2,6 +2,7 @@ import type { NextConfig } from "next";
 
 const nextConfig: NextConfig = {
   output: "export",
+  trailingSlash: true,
   images: {
     unoptimized: true,
   },
diff --git a/src/app/(features)/HomePage/components/HeroSection.tsx b/src/app/(features)/HomePage/components/HeroSection.tsx
index 00e8074..21068a9 100644
--- a/src/app/(features)/HomePage/components/HeroSection.tsx
+++ b/src/app/(features)/HomePage/components/HeroSection.tsx
@@ -8,50 +8,52 @@ import Button from '../../Components/Button';
 const HeroSection: React.FC = () => {
   return (
     <section
-      className="relative pt-12 pb-12 lg:pt-24 lg:pb-24 overflow-hidden bg-cover bg-center bg-no-repeat min-h-[50vh] flex items-center"
+      className="relative pt-28 pb-16 sm:pt-32 sm:pb-20 lg:pt-36 lg:pb-28 overflow-hidden bg-cover bg-center bg-no-repeat min-h-[50vh] flex items-center"
       style={{ backgroundImage: `url(${backgroundImage})` }}
     >
       <div className="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 w-full">
-        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-8 items-center">
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-10 lg:gap-8 items-center">
           
           {/* Left Column: Content */}
-          <div className="text-left space-y-8 max-w-xl mx-auto lg:mx-0">
+          <div className="text-left space-y-6 sm:space-y-8 max-w-xl mx-auto lg:mx-0 w-full">
             {/* Badge */}
-            <div className="inline-flex items-center px-4 py-2 bg-[#e0e7ff] rounded-full text-[#444CE7] font-semibold text-xs tracking-wider uppercase">
-              <Sparkles className="w-4 h-4 mr-2" />
-              NEW · AI AUTO-INDEXING
+            <div>
+              <div className="inline-flex items-center px-4 py-2 bg-[#e0e7ff] rounded-full text-[#444CE7] font-semibold text-xs tracking-wider uppercase shadow-sm">
+                <Sparkles className="w-4 h-4 mr-2 text-[#444CE7]" />
+                NEW · AI AUTO-INDEXING
+              </div>
             </div>
 
             {/* Heading */}
-            <h1 className="text-4xl md:text-5xl lg:text-6xl font-medium leading-[1.15] tracking-tight">
-              <span className="text-[#0a1236] block mb-2">All Your Documents.</span>
+            <h1 className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-semibold leading-[1.18] tracking-tight">
+              <span className="text-[#0a1236] block mb-1 sm:mb-2">All Your Documents.</span>
               <span className="text-[#444CE7] block">One Intelligent System.</span>
             </h1>
 
             {/* Subtitle */}
-            <p className="text-base md:text-lg text-gray-700 leading-relaxed max-w-md font-medium">
+            <p className="text-base md:text-lg text-gray-700 leading-relaxed max-w-md font-normal">
               Manage, edit, automate and sign — without switching tools. Run the whole
               platform, or start with the single module you need.
             </p>
 
             {/* Buttons */}
-            <div className="flex flex-col sm:flex-row items-center sm:justify-start gap-4 pt-2">
-              <Button href="/login" variant="primary">
+            <div className="flex flex-col sm:flex-row items-stretch sm:items-center sm:justify-start gap-3.5 sm:gap-4 pt-2 w-full sm:w-auto">
+              <Button href="/login" variant="primary" className="w-full sm:w-auto text-center shadow-md">
                 GET STARTED
               </Button>
-              <Button href="/contact" variant="outline">
+              <Button href="/contact" variant="outline" className="w-full sm:w-auto text-center">
                 BOOK A DEMO
               </Button>
             </div>
           </div>
 
           {/* Right Column: Shuffled Images */}
-          <div className="relative w-full max-w-lg mx-auto lg:max-w-none h-[400px] lg:h-[550px] flex items-center justify-center mt-12 lg:mt-0">
+          <div className="relative w-full max-w-lg mx-auto lg:max-w-none h-[340px] sm:h-[440px] lg:h-[550px] flex items-center justify-center mt-6 sm:mt-10 lg:mt-0">
             {/* Decorative Glow */}
-            <div className="absolute inset-0 bg-[#444CE7]/10 blur-[80px] rounded-full z-0"></div>
+            <div className="absolute inset-0 bg-[#444CE7]/10 blur-[80px] rounded-full z-0 pointer-events-none"></div>
 
             {/* Image 4 (Back-most, Left) */}
-            <div className="absolute z-10 w-[65%] lg:w-[60%] rounded-2xl overflow-hidden shadow-lg border border-gray-200/50 transform -rotate-[15deg] -translate-x-20 -translate-y-16 transition-all duration-500 hover:-translate-y-20 hover:z-50 cursor-pointer">
+            <div className="absolute z-10 w-[65%] lg:w-[60%] rounded-2xl overflow-hidden shadow-lg border border-gray-200/50 transform -rotate-[15deg] -translate-x-14 sm:-translate-x-20 -translate-y-12 sm:-translate-y-16 transition-all duration-500 hover:-translate-y-20 hover:z-50 cursor-pointer">
               <div className="absolute inset-0 bg-blue-50/40 mix-blend-overlay z-10"></div>
               <img 
                 src={dashboardImage} 
@@ -61,7 +63,7 @@ const HeroSection: React.FC = () => {
             </div>
 
             {/* Image 3 (Back-most, Right) */}
-            <div className="absolute z-20 w-[70%] lg:w-[65%] rounded-2xl overflow-hidden shadow-xl border border-gray-200/50 transform rotate-[12deg] translate-x-20 -translate-y-10 transition-all duration-500 hover:-translate-y-14 hover:z-50 cursor-pointer">
+            <div className="absolute z-20 w-[70%] lg:w-[65%] rounded-2xl overflow-hidden shadow-xl border border-gray-200/50 transform rotate-[12deg] translate-x-14 sm:translate-x-20 -translate-y-8 sm:-translate-y-10 transition-all duration-500 hover:-translate-y-14 hover:z-50 cursor-pointer">
               <div className="absolute inset-0 bg-green-50/30 mix-blend-overlay z-10"></div>
               <img 
                 src={dashboardImage} 
@@ -71,7 +73,7 @@ const HeroSection: React.FC = () => {
             </div>
 
             {/* Image 2 (Middle, slightly left) */}
-            <div className="absolute z-30 w-[80%] lg:w-[75%] rounded-2xl overflow-hidden shadow-2xl border border-gray-200 transform -rotate-[4deg] -translate-x-8 translate-y-2 transition-all duration-500 hover:-translate-y-2 hover:z-50 cursor-pointer">
+            <div className="absolute z-30 w-[80%] lg:w-[75%] rounded-2xl overflow-hidden shadow-2xl border border-gray-200 transform -rotate-[4deg] -translate-x-6 sm:-translate-x-8 translate-y-1 sm:translate-y-2 transition-all duration-500 hover:-translate-y-2 hover:z-50 cursor-pointer">
               <div className="absolute inset-0 bg-black/5 z-10"></div>
               <img 
                 src={dashboardImage} 
@@ -81,7 +83,7 @@ const HeroSection: React.FC = () => {
             </div>
 
             {/* Image 1 (Front-most) */}
-            <div className="absolute z-40 w-[90%] lg:w-[85%] rounded-2xl overflow-hidden shadow-[0_30px_60px_rgba(0,0,0,0.25)] border border-white transform rotate-[2deg] translate-x-4 translate-y-16 transition-all duration-500 hover:scale-105 hover:rotate-0 cursor-pointer">
+            <div className="absolute z-40 w-[90%] lg:w-[85%] rounded-2xl overflow-hidden shadow-[0_30px_60px_rgba(0,0,0,0.25)] border border-white transform rotate-[2deg] translate-x-3 sm:translate-x-4 translate-y-12 sm:translate-y-16 transition-all duration-500 hover:scale-105 hover:rotate-0 cursor-pointer">
               <img 
                 src={dashboardImage} 
                 alt="Dashboard main view"