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

hero section content

Browse Source
This commit is contained in:
Aravind
2026-06-22 19:28:43 +05:30
parent bbbc6cb067
commit 1b9ceb4a52
14 changed files with 241 additions and 323 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
src/app/businesses/page.tsx
View File

@@ -7,7 +7,7 @@ import { MaterialIcon } from "@/components/ui/MaterialIcon";
const ROTATOR_WORDS = [
"Stand above your competitors!",
"Reach the right people, near you.",
// "Reach the right people, near you.",
"Get noticed in your locality!"
];
@@ -90,9 +90,19 @@ export default function BusinessesPage() {
return (
<div className="relative min-h-screen bg-background">
{/* ─── Hero Section with Animated Rotator ─── */}
<section className="relative overflow-hidden bg-brand-dark px-margin-mobile md:px-margin-desktop pt-24 pb-32 text-center">
<div className="absolute inset-0 bg-[radial-gradient(circle_at_30%_30%,rgba(108,14,128,0.25),transparent_40%)]" />
<div className="absolute inset-0 bg-[radial-gradient(circle_at_75%_75%,rgba(0,109,55,0.15),transparent_40%)]" />
<section className="relative overflow-hidden px-6 md:px-12 lg:px-20 xl:px-24 pt-44 pb-48 text-center">
{/* Background Image with Overlay */}
<div className="absolute inset-0 z-0 select-none pointer-events-none">
<Image
src="/Nearle Business.png"
alt="Nearle Business Background"
fill
sizes="100vw"
className="object-cover"
priority
/>
<div className="absolute inset-0 bg-[#120217]/50" />
</div>
<div className="relative z-10 mx-auto max-w-container-max">
<p className="text-label-sm font-black uppercase tracking-[0.25em] text-brand-accent">
@@ -107,46 +117,11 @@ export default function BusinessesPage() {
</span>
</h1>
<p className="mx-auto mt-6 max-w-2xl text-body-lg text-white/70">
India&apos;s #1 Neighborhood Commerce App. Join the futuristic community lifestyle living and move your business forward.
</p>
{/* App Download Links */}
<div className="mt-10 flex flex-wrap justify-center gap-4">
<a
href="https://apps.apple.com/us/app/nearle/id1596895375"
target="_blank"
rel="noopener noreferrer"
className="h-14 w-44 rounded-xl border border-white/20 hover:bg-white/10 transition-colors p-1 flex items-center justify-center bg-white/5 backdrop-blur-md"
>
<div className="flex items-center gap-3 text-white text-left">
<MaterialIcon icon="phone_iphone" size={24} className="text-brand-accent" />
<div>
<div className="text-[10px] uppercase font-bold text-white/60">Download on the</div>
<div className="text-sm font-black">App Store</div>
</div>
</div>
</a>
<a
href="https://play.google.com/store/apps/details?id=com.nearle.gear"
target="_blank"
rel="noopener noreferrer"
className="h-14 w-44 rounded-xl border border-white/20 hover:bg-white/10 transition-colors p-1 flex items-center justify-center bg-white/5 backdrop-blur-md"
>
<div className="flex items-center gap-3 text-white text-left">
<MaterialIcon icon="play_arrow" size={24} className="text-brand-accent" />
<div>
<div className="text-[10px] uppercase font-bold text-white/60">Get it on</div>
<div className="text-sm font-black">Google Play</div>
</div>
</div>
</a>
</div>
</div>
</section>
{/* ─── Intro Highlight Banner ─── */}
<section className="relative z-20 -mt-16 mx-auto max-w-container-max px-margin-mobile md:px-margin-desktop">
<section className="relative z-20 -mt-20 mx-auto max-w-container-max px-6 md:px-12 lg:px-20 xl:px-24">
<div className="bg-white rounded-3xl p-8 md:p-12 border border-outline-variant/15 shadow-xl flex flex-col lg:flex-row justify-between items-center gap-8">
<div className="max-w-2xl">
<span className="text-label-sm font-black text-secondary uppercase tracking-widest">
@@ -172,7 +147,7 @@ export default function BusinessesPage() {
</section>
{/* ─── Timeline / Core Process Steps ─── */}
<section className="mx-auto max-w-container-max px-margin-mobile md:px-margin-desktop py-24">
<section className="mx-auto max-w-container-max px-6 md:px-12 lg:px-20 xl:px-24 py-24">
<div className="text-center mb-16">
<span className="text-label-sm font-black text-primary uppercase tracking-widest">
How it works
@@ -210,7 +185,7 @@ export default function BusinessesPage() {
{/* ─── Grid Stats & Value Prop ─── */}
<section className="bg-surface-container-low border-y border-outline-variant/15 py-24">
<div className="mx-auto max-w-container-max px-margin-mobile md:px-margin-desktop">
<div className="mx-auto max-w-container-max px-6 md:px-12 lg:px-20 xl:px-24">
<div className="grid lg:grid-cols-12 gap-16 items-center">
{/* Left side: features block (7 cols) */}
@@ -277,9 +252,9 @@ export default function BusinessesPage() {
</section>
{/* ─── Join/Download Call to Action ─── */}
<section className="mx-auto max-w-container-max px-margin-mobile md:px-margin-desktop py-24 text-center">
<section className="mx-auto max-w-container-max px-6 md:px-12 lg:px-20 xl:px-24 py-24 text-center">
<div className="bg-primary rounded-[2.5rem] p-12 md:p-20 relative overflow-hidden shadow-2xl">
<div className="absolute inset-0 bg-[radial-gradient(circle_at_70%_20%,rgba(252,163,17,0.18),transparent_50%)] animate-pulse-subtle" />
<div className="absolute inset-0 bg-[radial-gradient(circle_at_70%_20%,rgba(203,157,248,0.18),transparent_50%)] animate-pulse-subtle" />
<div className="relative z-10 max-w-2xl mx-auto text-on-primary">
<h2 className="font-display text-3xl md:text-5xl font-black mb-6 tracking-tight">
Nearle is Essential for Business Growth