Nearle/nearle_web_nextjs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix hero section text

Browse Source
This commit is contained in:
Aravind
2026-07-01 11:12:12 +05:30
parent f3f74cf47c
commit d5fe40882e
7 changed files with 19 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/map1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.3 MiB

8
src/components/heroes/AboutHero.tsx
View File

@@ -50,10 +50,10 @@ export function AboutHero() {
/> />
{/* Gradient overlay — dark-purple toned to preserve the purple scene and protect white text */} {/* Gradient overlay — dark-purple toned to preserve the purple scene and protect white text */}
<div className="absolute inset-0 z-[1] bg-[linear-gradient(180deg,rgba(23,5,31,0.72)_0%,rgba(23,5,31,0.52)_30%,rgba(23,5,31,0.22)_62%,rgba(23,5,31,0.06)_100%)] md:bg-[radial-gradient(ellipse_72%_88%_at_50%_42%,rgba(23,5,31,0.65)_0%,rgba(23,5,31,0.42)_38%,rgba(23,5,31,0.16)_65%,rgba(23,5,31,0.02)_100%)]" /> <div className="absolute inset-0 z-[1] bg-[linear-gradient(180deg,rgba(23,5,31,0.42)_0%,rgba(23,5,31,0.26)_40%,rgba(23,5,31,0.08)_72%,rgba(23,5,31,0)_100%)] md:bg-[radial-gradient(ellipse_58%_62%_at_50%_42%,rgba(23,5,31,0.38)_0%,rgba(23,5,31,0.16)_50%,rgba(23,5,31,0.04)_75%,rgba(23,5,31,0)_92%)]" />
{/* Content */} {/* Content */}
<div className="relative z-10 flex min-h-[560px] items-center justify-center px-6 pt-20 pb-10 sm:min-h-[580px] sm:px-8 sm:pt-24 md:min-h-[610px] md:px-12 md:py-20 lg:min-h-[650px] lg:px-16 lg:py-24 xl:min-h-[680px] 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-[780px] relative z-20"
@@ -72,7 +72,7 @@ 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.35),0_8px_24px_rgba(0,0,0,0.25)]" 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)]"
> >
Built for Every Built for Every
<br /> <br />
@@ -82,7 +82,7 @@ export function AboutHero() {
{/* 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.45)]" 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)]"
> >
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>

6
src/components/heroes/BusinessHero.tsx
View File

@@ -40,9 +40,9 @@ export function BusinessHero() {
priority priority
aria-hidden="true" aria-hidden="true"
/> />
<div className="absolute inset-0 z-[1] bg-[linear-gradient(180deg,rgba(250,248,252,0.85)_0%,rgba(250,248,252,0.68)_28%,rgba(250,248,252,0.38)_58%,rgba(250,248,252,0.10)_100%)] md:bg-[radial-gradient(ellipse_72%_88%_at_50%_42%,rgba(250,248,252,0.72)_0%,rgba(250,248,252,0.50)_38%,rgba(250,248,252,0.18)_65%,rgba(250,248,252,0.04)_100%)]" /> <div className="absolute inset-0 z-[1] bg-[linear-gradient(180deg,rgba(0,0,0,0.14)_0%,rgba(0,0,0,0.05)_40%,rgba(0,0,0,0)_70%)] md:bg-[radial-gradient(ellipse_55%_55%_at_50%_38%,rgba(0,0,0,0.13)_0%,rgba(0,0,0,0.04)_55%,rgba(0,0,0,0)_80%)]" />
<div className="relative z-10 flex min-h-[560px] items-center justify-center px-6 pt-20 pb-10 sm:min-h-[580px] sm:px-8 sm:pt-24 md:min-h-[610px] md:px-12 md:py-20 lg:min-h-[650px] lg:px-16 lg:py-24 xl:min-h-[680px] xl:px-8 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 xl:px-8 max-w-[1600px] mx-auto">
{/* Left Column: animated with unique stagger */} {/* Left Column: animated with unique stagger */}
<motion.div <motion.div
@@ -69,7 +69,7 @@ export function BusinessHero() {
<motion.p <motion.p
variants={descVariant} variants={descVariant}
className="text-sm md:text-base text-[#16001D] font-bold mt-6 leading-relaxed [text-shadow:0_1px_2px_rgba(255,255,255,0.55)]" 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)]"
> >
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>

7
src/components/heroes/ContactHero.tsx
View File

@@ -53,7 +53,7 @@ const infoStagger = {
export function ContactHero() { export function ContactHero() {
return ( return (
<section className="relative overflow-hidden border-b border-[#6330D6]/10 bg-[#FAF8FC] px-4 py-10 md:px-6 md:py-12 lg:px-8 lg:py-14 xl:px-10 xl:py-16 2xl:px-12 2xl:py-20"> <section className="relative overflow-hidden border-b border-[#6330D6]/10 bg-[#FAF8FC] min-h-[560px] md:min-h-[85vh] px-4 py-10 md:px-6 md:py-12 lg:px-8 lg:py-14 xl:px-10 xl:py-16 2xl:px-12 2xl:py-20">
<Image <Image
src="/contact page1.png" src="/contact page1.png"
alt="" alt=""
@@ -63,8 +63,7 @@ export function ContactHero() {
priority priority
aria-hidden="true" aria-hidden="true"
/> />
<div className="absolute inset-0 z-[1] bg-[linear-gradient(180deg,rgba(250,248,252,0.97)_0%,rgba(250,248,252,0.92)_42%,rgba(250,248,252,0.76)_100%)] md:bg-[linear-gradient(90deg,rgba(250,248,252,0.96)_0%,rgba(250,248,252,0.88)_42%,rgba(250,248,252,0.58)_72%,rgba(250,248,252,0.32)_100%)]" /> <div className="absolute inset-0 z-[1] bg-[linear-gradient(180deg,rgba(250,248,252,0.62)_0%,rgba(250,248,252,0.38)_48%,rgba(250,248,252,0.10)_100%)] md:bg-[linear-gradient(90deg,rgba(250,248,252,0.72)_0%,rgba(250,248,252,0.48)_40%,rgba(250,248,252,0.12)_68%,rgba(250,248,252,0)_92%)]" />
<div className="absolute inset-0 z-[1] bg-[linear-gradient(180deg,rgba(255,255,255,0.08)_0%,rgba(255,255,255,0)_58%,rgba(255,255,255,0.72)_100%)]" />
{/* Decorative map grid — not animated so it stays subtle */} {/* Decorative map grid — not animated so it stays subtle */}
<div className="absolute left-[5%] top-[10%] w-[400px] h-[300px] opacity-[0.04] select-none pointer-events-none z-[2]"> <div className="absolute left-[5%] top-[10%] w-[400px] h-[300px] opacity-[0.04] select-none pointer-events-none z-[2]">
@@ -105,7 +104,7 @@ export function ContactHero() {
<motion.p <motion.p
variants={fadeUp} variants={fadeUp}
className="mt-6 max-w-[620px] text-sm font-bold leading-8 text-[#16001D] md:text-base xl:text-lg [text-shadow:0_1px_2px_rgba(255,255,255,0.55)]" className="mt-6 max-w-[620px] text-sm font-bold leading-8 text-[#16001D] md:text-base xl:text-lg"
> >
Whether you are a customer, local store owner, or delivery partner, our team is here to help you get started with Nearle. Whether you are a customer, local store owner, or delivery partner, our team is here to help you get started with Nearle.
</motion.p> </motion.p>

6
src/components/heroes/PeopleHero.tsx
View File

@@ -34,9 +34,9 @@ export function PeopleHero() {
priority priority
aria-hidden="true" aria-hidden="true"
/> />
<div className="absolute inset-0 z-[1] bg-[linear-gradient(180deg,rgba(250,248,252,0.85)_0%,rgba(250,248,252,0.68)_28%,rgba(250,248,252,0.38)_58%,rgba(250,248,252,0.10)_100%)] md:bg-[radial-gradient(ellipse_72%_88%_at_50%_42%,rgba(250,248,252,0.72)_0%,rgba(250,248,252,0.50)_38%,rgba(250,248,252,0.18)_65%,rgba(250,248,252,0.04)_100%)]" /> <div className="absolute inset-0 z-[1] bg-[linear-gradient(180deg,rgba(0,0,0,0.14)_0%,rgba(0,0,0,0.05)_40%,rgba(0,0,0,0)_70%)] md:bg-[radial-gradient(ellipse_55%_55%_at_50%_38%,rgba(0,0,0,0.13)_0%,rgba(0,0,0,0.04)_55%,rgba(0,0,0,0)_80%)]" />
<div className="relative z-10 flex min-h-[560px] items-center justify-center px-6 pt-20 pb-10 sm:min-h-[580px] sm:px-8 sm:pt-24 md:min-h-[610px] md:px-12 md:py-20 lg:min-h-[650px] lg:px-16 lg:py-24 xl:min-h-[680px] 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-[780px] relative z-20"
@@ -62,7 +62,7 @@ export function PeopleHero() {
<motion.p <motion.p
variants={descVariant} variants={descVariant}
className="text-sm md:text-base text-[#16001D] font-bold mt-6 leading-relaxed [text-shadow:0_1px_2px_rgba(255,255,255,0.55)]" 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)]"
> >
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>

6
src/components/home/Hero.tsx
View File

@@ -74,9 +74,9 @@ export function Hero() {
aria-hidden="true" aria-hidden="true"
/> />
</motion.div> </motion.div>
<div className="absolute inset-0 z-[1] bg-[linear-gradient(180deg,rgba(250,248,252,0.85)_0%,rgba(250,248,252,0.68)_28%,rgba(250,248,252,0.38)_58%,rgba(250,248,252,0.10)_100%)] md:bg-[radial-gradient(ellipse_72%_88%_at_50%_42%,rgba(250,248,252,0.72)_0%,rgba(250,248,252,0.50)_38%,rgba(250,248,252,0.18)_65%,rgba(250,248,252,0.04)_100%)]" /> <div className="absolute inset-0 z-[1] bg-[linear-gradient(180deg,rgba(0,0,0,0.14)_0%,rgba(0,0,0,0.05)_40%,rgba(0,0,0,0)_70%)] md:bg-[radial-gradient(ellipse_55%_55%_at_50%_38%,rgba(0,0,0,0.13)_0%,rgba(0,0,0,0.04)_55%,rgba(0,0,0,0)_80%)]" />
<div className="page-container relative z-10 flex min-h-[560px] items-center justify-center px-6 pt-20 pb-10 sm:min-h-[580px] sm:px-8 sm:pt-24 md:min-h-[610px] md:py-20 lg:min-h-[650px] lg:py-24 xl:min-h-[680px]"> <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-[780px] flex-col items-center text-center"
@@ -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_1px_2px_rgba(255,255,255,0.55)]" 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)]"
> >
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>

6
src/components/layout/PremiumNavbar.tsx
View File

@@ -87,9 +87,9 @@ export function PremiumNavbar() {
<Image <Image
src="/logo-light.png" src="/logo-light.png"
alt="Nearle" alt="Nearle"
width={180} width={190}
height={45} height={48}
className="h-7 w-auto object-contain md:h-8 xl:h-9" className="h-7 w-auto object-contain md:h-9 xl:h-10"
priority priority
/> />
</Link> </Link>