feat: implement HeroSection component and enable trailing slash in next.config.ts
This commit is contained in:
azeeee05
@@ -2,6 +2,7 @@ import type { NextConfig } from "next";
|
||||
|
||||
const nextConfig: NextConfig = {
|
||||
output: "export",
|
||||
trailingSlash: true,
|
||||
images: {
|
||||
unoptimized: true,
|
||||
},
|
||||
|
||||
@@ -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" />
|
||||
<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"
|
||||
|
||||
Reference in New Issue
Block a user