fix hero section text set

This commit is contained in:
2026-07-01 13:04:16 +05:30
parent d5fe40882e
commit 208f6258ce
4 changed files with 16 additions and 16 deletions

View File

@@ -56,7 +56,7 @@ export function AboutHero() {
<div className="relative z-10 flex min-h-[560px] items-center justify-center px-6 pt-20 pb-10 sm:px-8 sm:pt-24 md:min-h-[85vh] md:px-12 md:py-20 lg:px-16 lg:py-24 max-w-[1600px] mx-auto"> <div className="relative z-10 flex min-h-[560px] items-center justify-center px-6 pt-20 pb-10 sm:px-8 sm:pt-24 md:min-h-[85vh] md:px-12 md:py-20 lg:px-16 lg:py-24 max-w-[1600px] mx-auto">
<motion.div <motion.div
className="flex flex-col items-center text-center w-full max-w-[780px] relative z-20" className="flex flex-col items-center text-center w-full max-w-[860px] relative z-20 bg-[radial-gradient(ellipse_80%_75%_at_50%_45%,rgba(0,0,0,0.18)_0%,rgba(0,0,0,0.06)_55%,rgba(0,0,0,0)_82%)] px-10 py-10 md:px-14 md:py-12"
variants={staggerContainer} variants={staggerContainer}
initial="hidden" initial="hidden"
animate="visible" animate="visible"
@@ -72,17 +72,17 @@ export function AboutHero() {
{/* Heading */} {/* Heading */}
<motion.h1 <motion.h1
variants={titleVariant} variants={titleVariant}
className="font-display text-4xl sm:text-5xl lg:text-[48px] xl:text-[54px] font-black text-white leading-[1.1] tracking-tight [text-shadow:0_2px_6px_rgba(0,0,0,0.12)]" className="font-display text-4xl sm:text-5xl lg:text-[48px] xl:text-[54px] font-extrabold text-white leading-[1.1] tracking-tight [text-shadow:0_2px_10px_rgba(0,0,0,0.22)]"
> >
Built for Every Built for Every
<br /> <br />
<span className="text-[#C4B5FD]">Neighbourhood.</span> <span className="text-[#A855F7]">Neighbourhood.</span>
</motion.h1> </motion.h1>
{/* Description */} {/* Description */}
<motion.p <motion.p
variants={descVariant} variants={descVariant}
className="mt-6 max-w-[560px] text-sm font-semibold leading-[1.75] text-white/85 md:text-base [text-shadow:0_1px_4px_rgba(0,0,0,0.12)]" className="mt-6 max-w-[560px] text-base font-semibold leading-[1.6] text-white/[0.96] md:text-lg [text-shadow:0_1px_6px_rgba(0,0,0,0.28)]"
> >
Nearle is India&apos;s first hyper-local managed &ldquo;Neighbourhood living platform&rdquo; which brings all the amenities and requirements of residents to their fingertips. Nearle is India&apos;s first hyper-local managed &ldquo;Neighbourhood living platform&rdquo; which brings all the amenities and requirements of residents to their fingertips.
</motion.p> </motion.p>

View File

@@ -46,7 +46,7 @@ export function BusinessHero() {
{/* Left Column: animated with unique stagger */} {/* Left Column: animated with unique stagger */}
<motion.div <motion.div
className="flex flex-col items-center text-center w-full max-w-[780px] relative z-20" className="flex flex-col items-center text-center w-full max-w-[860px] relative z-20 bg-[radial-gradient(ellipse_80%_75%_at_50%_45%,rgba(0,0,0,0.18)_0%,rgba(0,0,0,0.06)_55%,rgba(0,0,0,0)_82%)] px-10 py-10 md:px-14 md:py-12"
variants={staggerContainer} variants={staggerContainer}
initial="hidden" initial="hidden"
animate="visible" animate="visible"
@@ -60,16 +60,16 @@ export function BusinessHero() {
<motion.h1 <motion.h1
variants={titleVariant} variants={titleVariant}
className="font-display text-4xl sm:text-5xl lg:text-[48px] xl:text-[54px] font-black text-[#16001D] leading-[1.1] tracking-tight" className="font-display text-4xl sm:text-5xl lg:text-[48px] xl:text-[54px] font-extrabold text-white leading-[1.1] tracking-tight [text-shadow:0_2px_10px_rgba(0,0,0,0.22)]"
> >
Grow Your Local Business, Grow Your Local Business,
<br /> <br />
<span className="text-[#6330D6]">Neighbourhood by Neighbourhood.</span> <span className="text-[#A855F7]">Neighbourhood by Neighbourhood.</span>
</motion.h1> </motion.h1>
<motion.p <motion.p
variants={descVariant} variants={descVariant}
className="max-w-[780px] text-base sm:text-lg md:text-xl text-[#16001D] font-black mt-6 leading-relaxed [text-shadow:0_2px_6px_rgba(0,0,0,0.12)]" className="max-w-[780px] text-lg sm:text-xl md:text-xl text-white/[0.96] font-semibold mt-6 leading-[1.6] [text-shadow:0_1px_6px_rgba(0,0,0,0.28)]"
> >
Get discovered by nearby customers, manage orders, and build repeat business from one simple platform. Get discovered by nearby customers, manage orders, and build repeat business from one simple platform.
</motion.p> </motion.p>

View File

@@ -39,7 +39,7 @@ export function PeopleHero() {
<div className="relative z-10 flex min-h-[560px] items-center justify-center px-6 pt-20 pb-10 sm:px-8 sm:pt-24 md:min-h-[85vh] md:px-12 md:py-20 lg:px-16 lg:py-24 max-w-[1600px] mx-auto"> <div className="relative z-10 flex min-h-[560px] items-center justify-center px-6 pt-20 pb-10 sm:px-8 sm:pt-24 md:min-h-[85vh] md:px-12 md:py-20 lg:px-16 lg:py-24 max-w-[1600px] mx-auto">
<motion.div <motion.div
className="flex flex-col items-center text-center w-full max-w-[780px] relative z-20" className="flex flex-col items-center text-center w-full max-w-[860px] relative z-20 bg-[radial-gradient(ellipse_80%_75%_at_50%_45%,rgba(0,0,0,0.18)_0%,rgba(0,0,0,0.06)_55%,rgba(0,0,0,0)_82%)] px-10 py-10 md:px-14 md:py-12"
variants={staggerFast} variants={staggerFast}
initial="hidden" initial="hidden"
animate="visible" animate="visible"
@@ -53,16 +53,16 @@ export function PeopleHero() {
<motion.h1 <motion.h1
variants={titleVariant} variants={titleVariant}
className="font-display text-4xl sm:text-5xl lg:text-[48px] xl:text-[54px] font-black text-[#16001D] leading-[1.1] tracking-tight" className="font-display text-4xl sm:text-5xl lg:text-[48px] xl:text-[54px] font-extrabold text-white leading-[1.1] tracking-tight [text-shadow:0_2px_10px_rgba(0,0,0,0.22)]"
> >
Your Neighbourhood, Your Neighbourhood,
<br /> <br />
Now in Your <span className="text-[#6330D6]">Pocket.</span> Now in Your <span className="text-[#A855F7]">Pocket.</span>
</motion.h1> </motion.h1>
<motion.p <motion.p
variants={descVariant} variants={descVariant}
className="text-base sm:text-lg md:text-xl lg:text-2xl text-[#16001D] font-bold mt-6 leading-relaxed [text-shadow:0_2px_6px_rgba(0,0,0,0.12)]" className="text-lg sm:text-xl md:text-xl lg:text-2xl text-white/[0.96] font-semibold mt-6 leading-[1.6] [text-shadow:0_1px_6px_rgba(0,0,0,0.28)]"
> >
Discover verified local stores, save your favorite merchants, and order everyday items with superfast local fulfillment. Discover verified local stores, save your favorite merchants, and order everyday items with superfast local fulfillment.
</motion.p> </motion.p>

View File

@@ -79,7 +79,7 @@ export function Hero() {
<div className="page-container relative z-10 flex min-h-[560px] items-center justify-center px-6 pt-20 pb-10 sm:px-8 sm:pt-24 md:min-h-[85vh] md:py-20 lg:py-24"> <div className="page-container relative z-10 flex min-h-[560px] items-center justify-center px-6 pt-20 pb-10 sm:px-8 sm:pt-24 md:min-h-[85vh] md:py-20 lg:py-24">
<motion.div <motion.div
className="relative z-20 flex w-full max-w-[780px] flex-col items-center text-center" className="relative z-20 flex w-full max-w-[860px] flex-col items-center text-center bg-[radial-gradient(ellipse_80%_75%_at_50%_45%,rgba(0,0,0,0.18)_0%,rgba(0,0,0,0.06)_55%,rgba(0,0,0,0)_82%)] px-10 py-10 md:px-14 md:py-12"
variants={heroStagger} variants={heroStagger}
initial="hidden" initial="hidden"
animate="visible" animate="visible"
@@ -93,7 +93,7 @@ export function Hero() {
</motion.span> </motion.span>
{/* H1: line-by-line mask reveal */} {/* H1: line-by-line mask reveal */}
<motion.div variants={lineStagger} className="font-display text-[34px] sm:text-5xl lg:text-[68px] xl:text-[76px] font-black text-[#16001D] tracking-[-0.05em]"> <motion.div variants={lineStagger} className="font-display text-[34px] sm:text-5xl lg:text-[68px] xl:text-[76px] font-extrabold text-white tracking-[-0.05em] [text-shadow:0_2px_10px_rgba(0,0,0,0.22)]">
<div className="overflow-hidden pb-1"> <div className="overflow-hidden pb-1">
<motion.div variants={lineReveal} className="leading-[0.95]"> <motion.div variants={lineReveal} className="leading-[0.95]">
Everything Local. Everything Local.
@@ -101,7 +101,7 @@ export function Hero() {
</div> </div>
<div className="overflow-hidden pb-1"> <div className="overflow-hidden pb-1">
<motion.div variants={lineReveal} className="leading-[0.95]"> <motion.div variants={lineReveal} className="leading-[0.95]">
Everything <span className="text-[#6D28D9]">Near.</span> Everything <span className="text-[#A855F7]">Near.</span>
</motion.div> </motion.div>
</div> </div>
</motion.div> </motion.div>
@@ -109,7 +109,7 @@ export function Hero() {
{/* Description */} {/* Description */}
<motion.p <motion.p
variants={descVariant} variants={descVariant}
className="max-w-[520px] text-base md:text-lg text-[#16001D] leading-relaxed font-bold mt-6 [text-shadow:0_2px_6px_rgba(0,0,0,0.12)]" className="max-w-[520px] text-lg md:text-xl text-white/[0.96] leading-[1.6] font-semibold mt-6 [text-shadow:0_1px_6px_rgba(0,0,0,0.28)]"
> >
Discover verified local stores, exclusive offers, fast delivery, and a better way to shop within your neighbourhood. Discover verified local stores, exclusive offers, fast delivery, and a better way to shop within your neighbourhood.
</motion.p> </motion.p>