maskantech/docqube_lp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: implement HeroSection component and enable trailing slash in next.config.ts

Browse Source
This commit is contained in:
azeeee05
2026-09-09 10:32:54 +05:30
parent e2ce38ba24
commit d8e77f1e5b
2 changed files with 21 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
next.config.ts
+1
View File
@@ -2,6 +2,7 @@ import type { NextConfig } from "next";
const nextConfig: NextConfig = { const nextConfig: NextConfig = {
output: "export", output: "export",
trailingSlash: true,
images: { images: {
unoptimized: true, unoptimized: true,
}, },
src/app/(features)/HomePage/components/HeroSection.tsx
+20 -18
View File
@@ -8,50 +8,52 @@ import Button from '../../Components/Button';
const HeroSection: React.FC = () => { const HeroSection: React.FC = () => {
return ( return (
<section <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})` }} 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="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 */} {/* 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 */} {/* Badge */}
<div className="inline-flex items-center px-4 py-2 bg-[#e0e7ff] rounded-full text-[#444CE7] font-semibold text-xs tracking-wider uppercase"> <div>
<Sparkles className="w-4 h-4 mr-2" /> <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">
NEW · AI AUTO-INDEXING <Sparkles className="w-4 h-4 mr-2 text-[#444CE7]" />
NEW · AI AUTO-INDEXING
</div>
</div> </div>
{/* Heading */} {/* Heading */}
<h1 className="text-4xl md:text-5xl lg:text-6xl font-medium leading-[1.15] tracking-tight"> <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-2">All Your Documents.</span> <span className="text-[#0a1236] block mb-1 sm:mb-2">All Your Documents.</span>
<span className="text-[#444CE7] block">One Intelligent System.</span> <span className="text-[#444CE7] block">One Intelligent System.</span>
</h1> </h1>
{/* Subtitle */} {/* 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 Manage, edit, automate and sign — without switching tools. Run the whole
platform, or start with the single module you need. platform, or start with the single module you need.
</p> </p>
{/* Buttons */} {/* Buttons */}
<div className="flex flex-col sm:flex-row items-center sm:justify-start gap-4 pt-2"> <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"> <Button href="/login" variant="primary" className="w-full sm:w-auto text-center shadow-md">
GET STARTED GET STARTED
</Button> </Button>
<Button href="/contact" variant="outline"> <Button href="/contact" variant="outline" className="w-full sm:w-auto text-center">
BOOK A DEMO BOOK A DEMO
</Button> </Button>
</div> </div>
</div> </div>
{/* Right Column: Shuffled Images */} {/* 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 */} {/* 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) */} {/* 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> <div className="absolute inset-0 bg-blue-50/40 mix-blend-overlay z-10"></div>
<img <img
src={dashboardImage} src={dashboardImage}
@@ -61,7 +63,7 @@ const HeroSection: React.FC = () => {
</div> </div>
{/* Image 3 (Back-most, Right) */} {/* 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> <div className="absolute inset-0 bg-green-50/30 mix-blend-overlay z-10"></div>
<img <img
src={dashboardImage} src={dashboardImage}
@@ -71,7 +73,7 @@ const HeroSection: React.FC = () => {
</div> </div>
{/* Image 2 (Middle, slightly left) */} {/* 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> <div className="absolute inset-0 bg-black/5 z-10"></div>
<img <img
src={dashboardImage} src={dashboardImage}
@@ -81,7 +83,7 @@ const HeroSection: React.FC = () => {
</div> </div>
{/* Image 1 (Front-most) */} {/* 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 <img
src={dashboardImage} src={dashboardImage}
alt="Dashboard main view" alt="Dashboard main view"