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

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 */}
<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 */}
<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
className="flex flex-col items-center text-center w-full max-w-[780px] relative z-20"
@@ -72,7 +72,7 @@ export function AboutHero() {
{/* Heading */}
<motion.h1
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
<br />
@@ -82,7 +82,7 @@ export function AboutHero() {
{/* Description */}
<motion.p
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.
</motion.p>

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

@@ -40,9 +40,9 @@ export function BusinessHero() {
priority
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 */}
<motion.div
@@ -69,7 +69,7 @@ export function BusinessHero() {
<motion.p
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.
</motion.p>

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

@@ -53,7 +53,7 @@ const infoStagger = {
export function ContactHero() {
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
src="/contact page1.png"
alt=""
@@ -63,8 +63,7 @@ export function ContactHero() {
priority
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(255,255,255,0.08)_0%,rgba(255,255,255,0)_58%,rgba(255,255,255,0.72)_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%)]" />
{/* 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]">
@@ -105,7 +104,7 @@ export function ContactHero() {
<motion.p
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.
</motion.p>

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

@@ -34,9 +34,9 @@ export function PeopleHero() {
priority
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
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
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.
</motion.p>

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

@@ -74,9 +74,9 @@ export function Hero() {
aria-hidden="true"
/>
</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
className="relative z-20 flex w-full max-w-[780px] flex-col items-center text-center"
@@ -109,7 +109,7 @@ export function Hero() {
{/* Description */}
<motion.p
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.
</motion.p>

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

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