fix hero section text set
This commit is contained in:
@@ -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's first hyper-local managed “Neighbourhood living platform” which brings all the amenities and requirements of residents to their fingertips.
|
Nearle is India's first hyper-local managed “Neighbourhood living platform” which brings all the amenities and requirements of residents to their fingertips.
|
||||||
</motion.p>
|
</motion.p>
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
Reference in New Issue
Block a user