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

update SEO

Browse Source
This commit is contained in:
Aravind
2026-07-01 17:05:32 +05:30
parent 208f6258ce
commit f37e2392f3
45 changed files with 227 additions and 567 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,11 +1,9 @@
"use client";
import Image from "next/image";
import Link from "next/link";
import { motion } from "framer-motion";
import { MaterialIcon } from "@/components/ui/MaterialIcon";
import { FeatureStatsRow } from "@/components/ui/FeatureStatsRow";
import { fadeUp, fadeUpStrong, staggerContainer } from "@/lib/animations";
import { staggerContainer } from "@/lib/animations";
const HERO_STATS = [
{ title: "2km Coverage", icon: "explore", desc: "Hyperlocal radius" },
@@ -40,23 +38,24 @@ export function AboutHero() {
{/* Background image — scooter anchored to the right */}
<Image
src="/about.png"
src="/about.webp"
alt=""
fill
sizes="100vw"
className="absolute inset-0 z-0 h-full w-full object-cover object-[68%_center] md:object-[64%_center] xl:object-center"
priority
fetchPriority="high"
aria-hidden="true"
/>
{/* 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.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%)]" />
{/* Gradient overlay */}
<div className="absolute inset-0 z-[1] bg-black/40 md:bg-[radial-gradient(ellipse_100%_100%_at_50%_45%,rgba(0,0,0,0.6)_0%,rgba(0,0,0,0.4)_40%,rgba(0,0,0,0.1)_100%)]" />
{/* Content */}
<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-[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"
className="flex flex-col items-center text-center w-full max-w-[860px] relative z-20 px-6 py-10 md:px-14 md:py-12"
variants={staggerContainer}
initial="hidden"
animate="visible"
@@ -64,7 +63,7 @@ export function AboutHero() {
{/* Badge */}
<motion.span
variants={badgeVariant}
className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-black tracking-widest bg-white/15 backdrop-blur-[8px] border border-white/20 text-white uppercase mb-6 w-fit"
className="inline-flex items-center gap-1.5 px-4 py-1.5 rounded-full text-xs font-bold tracking-widest bg-white/20 backdrop-blur-[8px] border border-white/20 text-white shadow-md uppercase mb-6 w-fit"
>
About Nearle
</motion.span>
@@ -72,7 +71,7 @@ export function AboutHero() {
{/* Heading */}
<motion.h1
variants={titleVariant}
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)]"
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_4px_32px_rgba(0,0,0,0.5)]"
>
Built for Every
<br />
@@ -82,30 +81,10 @@ export function AboutHero() {
{/* Description */}
<motion.p
variants={descVariant}
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)]"
className="mt-6 max-w-[560px] text-lg sm:text-xl md:text-xl lg:text-2xl font-medium leading-[1.6] text-white/95 [text-shadow:0_2px_16px_rgba(0,0,0,0.6)]"
>
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>
{/* CTA Buttons */}
<motion.div
variants={descVariant}
className="mt-8 flex flex-wrap justify-center gap-3"
>
<Link
href="/businesses"
className="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-full bg-white px-7 py-3.5 text-base font-black text-[#6330D6] shadow-sm transition-all duration-200 hover:bg-white/90 hover:shadow-lg hover:-translate-y-0.5 active:translate-y-0 active:scale-95"
>
Partner with Nearle
<MaterialIcon icon="arrow_forward" size={18} />
</Link>
<Link
href="/people"
className="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-full border border-white/30 bg-white/10 px-7 py-3.5 text-base font-black text-white backdrop-blur-[6px] transition-all duration-200 hover:bg-white/18 hover:border-white/45 hover:-translate-y-0.5 active:translate-y-0 active:scale-95"
>
Explore Nearle
</Link>
</motion.div>
</motion.div>
</div>

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

@@ -32,35 +32,36 @@ export function BusinessHero() {
<section className="w-full flex flex-col select-none bg-white">
<div className="relative overflow-hidden border-b border-[#6330D6]/10 bg-[#FAF8FC]">
<Image
src="/images/business1.png"
src="/images/business1.webp"
alt=""
fill
sizes="100vw"
className="absolute inset-0 z-0 h-full w-full object-cover object-[62%_center] md:object-[58%_center] xl:object-center"
priority
fetchPriority="high"
aria-hidden="true"
/>
<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="absolute inset-0 z-[1] bg-black/40 md:bg-[radial-gradient(ellipse_100%_100%_at_50%_45%,rgba(0,0,0,0.6)_0%,rgba(0,0,0,0.4)_40%,rgba(0,0,0,0.1)_100%)]" />
<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
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"
className="flex flex-col items-center text-center w-full max-w-[860px] relative z-20 px-6 py-10 md:px-14 md:py-12"
variants={staggerContainer}
initial="hidden"
animate="visible"
>
<motion.span
variants={badgeVariant}
className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-black tracking-widest bg-[#6330D6]/10 text-[#6330D6] uppercase mb-6 w-fit"
className="inline-flex items-center gap-1.5 px-4 py-1.5 rounded-full text-xs font-bold tracking-widest bg-white text-[#6330D6] shadow-md uppercase mb-6 w-fit"
>
Nearle for Business
</motion.span>
<motion.h1
variants={titleVariant}
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)]"
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_4px_32px_rgba(0,0,0,0.5)]"
>
Grow Your Local Business,
<br />
@@ -69,7 +70,7 @@ export function BusinessHero() {
<motion.p
variants={descVariant}
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)]"
className="max-w-[780px] text-lg sm:text-xl md:text-xl text-white/95 font-medium mt-6 leading-[1.6] [text-shadow:0_2px_16px_rgba(0,0,0,0.6)]"
>
Get discovered by nearby customers, manage orders, and build repeat business from one simple platform.
</motion.p>

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

@@ -4,7 +4,7 @@ import Image from "next/image";
import { motion } from "framer-motion";
import { MaterialIcon } from "@/components/ui/MaterialIcon";
import { ContactForm } from "@/components/contact/ContactForm";
import { fadeUp, fadeUpStrong, slideInRight, staggerContainer, viewport } from "@/lib/animations";
import { fadeUp, fadeUpStrong, staggerContainer } from "@/lib/animations";
const CONTACT_INFO = [
{
@@ -55,12 +55,13 @@ export function ContactHero() {
return (
<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"
src="/contact-page1.webp"
alt=""
fill
sizes="100vw"
className="absolute inset-0 z-0 h-full w-full object-cover object-[62%_center] md:object-center"
priority
fetchPriority="high"
aria-hidden="true"
/>
<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%)]" />

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

@@ -26,34 +26,35 @@ export function PeopleHero() {
<section className="w-full flex flex-col select-none bg-white">
<div className="relative overflow-hidden border-b border-[#6330D6]/10 bg-[#FAF8FC]">
<Image
src="/images/people1.png"
src="/images/people1.webp"
alt=""
fill
sizes="100vw"
className="absolute inset-0 z-0 h-full w-full object-cover object-[68%_center] md:object-[62%_center] xl:object-center"
priority
fetchPriority="high"
aria-hidden="true"
/>
<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="absolute inset-0 z-[1] bg-black/40 md:bg-[radial-gradient(ellipse_100%_100%_at_50%_45%,rgba(0,0,0,0.6)_0%,rgba(0,0,0,0.4)_40%,rgba(0,0,0,0.1)_100%)]" />
<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-[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"
className="flex flex-col items-center text-center w-full max-w-[860px] relative z-20 px-6 py-10 md:px-14 md:py-12"
variants={staggerFast}
initial="hidden"
animate="visible"
>
<motion.span
variants={badgeVariant}
className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-black tracking-widest bg-[#6330D6]/10 text-[#6330D6] uppercase mb-6 w-fit"
className="inline-flex items-center gap-1.5 px-4 py-1.5 rounded-full text-xs font-bold tracking-widest bg-white text-[#6330D6] shadow-md uppercase mb-6 w-fit"
>
Nearle for People
</motion.span>
<motion.h1
variants={titleVariant}
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)]"
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_4px_32px_rgba(0,0,0,0.5)]"
>
Your Neighbourhood,
<br />
@@ -62,7 +63,7 @@ export function PeopleHero() {
<motion.p
variants={descVariant}
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)]"
className="text-lg sm:text-xl md:text-xl lg:text-2xl text-white/95 font-medium mt-6 leading-[1.6] [text-shadow:0_2px_16px_rgba(0,0,0,0.6)]"
>
Discover verified local stores, save your favorite merchants, and order everyday items with superfast local fulfillment.
</motion.p>

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

@@ -65,21 +65,22 @@ export function Hero() {
transition={{ duration: 28, ease: "linear", repeat: Infinity, repeatType: "reverse" }}
>
<Image
src="/images/home1.png"
src="/images/home1.webp"
alt=""
fill
sizes="100vw"
className="absolute inset-0 h-full w-full object-cover object-[62%_center] md:object-[58%_center] xl:object-center"
priority
fetchPriority="high"
aria-hidden="true"
/>
</motion.div>
<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="absolute inset-0 z-[1] bg-black/40 md:bg-[radial-gradient(ellipse_100%_100%_at_50%_45%,rgba(0,0,0,0.6)_0%,rgba(0,0,0,0.4)_40%,rgba(0,0,0,0.1)_100%)]" />
<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-[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"
className="relative z-20 flex w-full max-w-[860px] flex-col items-center text-center px-6 py-10 md:px-14 md:py-12"
variants={heroStagger}
initial="hidden"
animate="visible"
@@ -87,13 +88,13 @@ export function Hero() {
{/* Badge */}
<motion.span
variants={badgeVariant}
className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-black tracking-widest bg-[#6D28D9]/10 text-[#6D28D9] uppercase mb-6 w-fit"
className="inline-flex items-center gap-1.5 px-4 py-1.5 rounded-full text-xs font-bold tracking-widest bg-white text-[#6D28D9] shadow-md uppercase mb-6 w-fit"
>
Welcome to Nearle
</motion.span>
{/* 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-extrabold text-white tracking-[-0.05em] [text-shadow:0_2px_10px_rgba(0,0,0,0.22)]">
<motion.h1 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_4px_32px_rgba(0,0,0,0.5)]">
<div className="overflow-hidden pb-1">
<motion.div variants={lineReveal} className="leading-[0.95]">
Everything Local.
@@ -104,12 +105,12 @@ export function Hero() {
Everything <span className="text-[#A855F7]">Near.</span>
</motion.div>
</div>
</motion.div>
</motion.h1>
{/* Description */}
<motion.p
variants={descVariant}
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)]"
className="max-w-[520px] text-lg md:text-xl text-white/95 leading-[1.6] font-medium mt-6 [text-shadow:0_2px_16px_rgba(0,0,0,0.6)]"
>
Discover verified local stores, exclusive offers, fast delivery, and a better way to shop within your neighbourhood.
</motion.p>

1
src/components/home/HowItWorks.tsx
View File

@@ -8,7 +8,6 @@ import {
scaleIn,
staggerContainer,
slideInLeft,
slideInRight,
viewport,
} from "@/lib/animations";

12
src/components/home/HyperlocalFeatures.tsx
View File

@@ -115,10 +115,10 @@ export function HyperlocalFeatures() {
<div className="absolute left-[30%] right-[4%] top-[49%] z-40 rounded-[1.35rem] border border-white/80 bg-white/88 p-2.5 shadow-[0_24px_70px_rgba(23,0,31,0.16)] backdrop-blur-xl md:left-[45%] md:right-[5%] md:top-[52%] md:p-4">
<div className="flex items-center gap-3">
<div className="relative h-14 w-14 shrink-0 overflow-hidden rounded-2xl bg-brand-accent/40 ring-1 ring-outline-variant/20 md:h-20 md:w-20">
<Image src="/images/cat-daily-essentials.png" alt="Sri Krishna Groceries storefront" fill sizes="80px" className="object-cover" />
<Image src="/images/cat-daily-essentials.webp" alt="Sri Krishna Groceries storefront" fill sizes="80px" className="object-cover" />
</div>
<div className="min-w-0 flex-1">
<h5 className="truncate text-sm font-black text-brand-dark md:text-base">Sri Krishna Groceries</h5>
<div className="truncate text-sm font-black text-brand-dark md:text-base">Sri Krishna Groceries</div>
<p className="mt-0.5 truncate text-xs font-medium text-on-surface-variant md:text-sm">Fresh Harvest & Daily Needs</p>
<div className="mt-2 flex flex-wrap items-center gap-x-3 gap-y-1 text-xs md:text-sm">
<span className="inline-flex items-center gap-1 font-bold text-on-surface-variant">
@@ -159,7 +159,7 @@ export function HyperlocalFeatures() {
Community & Trust
</motion.span>
<motion.h3
<motion.h2
className="text-4xl md:text-5xl lg:text-[44px] font-display font-black text-brand-dark mt-4 mb-6 leading-tight tracking-tight"
variants={fadeUp}
initial="hidden"
@@ -168,7 +168,7 @@ export function HyperlocalFeatures() {
>
Built Around Your<br />
<span className="text-primary font-black">Neighbourhood</span>
</motion.h3>
</motion.h2>
<motion.p
className="text-body-lg text-on-surface-variant mb-10 max-w-lg leading-relaxed"
@@ -204,9 +204,9 @@ export function HyperlocalFeatures() {
</div>
<div>
<h4 className="text-lg md:text-xl font-black text-brand-dark group-hover:text-primary transition-colors">
<h3 className="text-lg md:text-xl font-black text-brand-dark group-hover:text-primary transition-colors">
{item.title}
</h4>
</h3>
<p className="text-sm md:text-base text-on-surface-variant mt-1 leading-relaxed">
{item.desc}
</p>

13
src/components/home/ServiceCategories.tsx
View File

@@ -11,7 +11,7 @@ const MotionLink = motion.create(Link);
const CATEGORIES = [
{
name: "Groceries & Daily Essentials",
image: "/images/cat-daily-essentials.png",
image: "/images/cat-daily-essentials.webp",
tag: "Local Store",
tagStyle: "bg-secondary text-white",
desc: "Fresh groceries, dairy, and household essentials from nearby shops.",
@@ -19,7 +19,7 @@ const CATEGORIES = [
},
{
name: "Wellness",
image: "/images/cat-health-wellness.png",
image: "/images/cat-health-wellness.webp",
tag: "Available Near You",
tagStyle: "bg-primary text-white",
desc: "Prescription medicines and wellness supplies from verified pharmacies.",
@@ -27,7 +27,7 @@ const CATEGORIES = [
},
{
name: "Food & Snacks",
image: "/images/cat-hot-food.png",
image: "/images/cat-hot-food.webp",
tag: "Nearby",
tagStyle: "bg-brand-accent text-brand-dark",
desc: "Fresh meals, bakes, and local snacks from neighbourhood kitchens.",
@@ -35,7 +35,7 @@ const CATEGORIES = [
},
{
name: "Fresh Fruits & Vegetables",
image: "/images/cat-daily-essentials.png",
image: "/vegetable.png",
tag: "Local Store",
tagStyle: "bg-secondary text-white",
desc: "Farm-fresh fruits and vegetables from trusted local vendors.",
@@ -43,7 +43,7 @@ const CATEGORIES = [
},
{
name: "Home Needs",
image: "/images/cat-pet-essentials.png",
image: "/images/cat-pet-essentials.webp",
tag: "Available Near You",
tagStyle: "bg-orange-500 text-white",
desc: "Kitchen supplies, household cleaners, and daily utilities.",
@@ -51,7 +51,7 @@ const CATEGORIES = [
},
{
name: "Local Services",
image: "/images/cat-home-services.png",
image: "/images/cat-home-services.webp",
tag: "Nearby",
tagStyle: "bg-blue-600 text-white",
desc: "Verified local handymen, laundry, tailors, and household help.",
@@ -117,6 +117,7 @@ export function ServiceCategories() {
alt={cat.name}
width={400}
height={300}
sizes="(max-width: 767px) calc(100vw - 48px), (max-width: 1023px) calc((100vw - 80px) / 2), 405px"
className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
/>
) : (

12
src/components/home/StoreQRSection.tsx
View File

@@ -134,7 +134,7 @@ export function StoreQRSection() {
>
<div className="text-center w-full">
<p className="text-[10px] font-black text-primary tracking-wider uppercase">Order Online</p>
<h4 className="font-display font-black text-brand-dark text-base mt-0.5 leading-none">Store QR</h4>
<div className="font-display font-black text-brand-dark text-base mt-0.5 leading-none">Store QR</div>
</div>
<div className="relative w-32 h-32 bg-white flex items-center justify-center">
@@ -143,6 +143,7 @@ export function StoreQRSection() {
alt="Nearle Store QR Code"
width={132}
height={132}
sizes="132px"
className="object-contain"
/>
</div>
@@ -159,10 +160,11 @@ export function StoreQRSection() {
className="relative w-[290px] shrink-0 aspect-[9/18.5] bg-[#120217] rounded-[2.75rem] border-[7px] border-brand-dark-surface shadow-2xl overflow-hidden ring-4 ring-outline-variant/10"
>
<Image
src="/mobile image.jpeg"
src="/mobile-image.webp"
alt="Nearle mobile app interface"
width={360}
height={760}
sizes="290px"
className="w-full h-full object-cover"
/>
</motion.div>
@@ -199,7 +201,7 @@ export function StoreQRSection() {
>
<div className="text-center w-full">
<p className="text-[10px] font-black text-primary tracking-wider uppercase">Order Online</p>
<h4 className="font-display font-black text-brand-dark text-base mt-0.5">Store QR</h4>
<div className="font-display font-black text-brand-dark text-base mt-0.5">Store QR</div>
</div>
<div className="relative w-36 h-36 bg-white flex items-center justify-center">
@@ -208,6 +210,7 @@ export function StoreQRSection() {
alt="Nearle Store QR Code"
width={144}
height={144}
sizes="144px"
className="object-contain"
/>
</div>
@@ -246,10 +249,11 @@ export function StoreQRSection() {
viewport={viewport}
>
<Image
src="/mobile image.jpeg"
src="/mobile-image.webp"
alt="Nearle mobile app interface"
width={360}
height={760}
sizes="240px"
className="w-full h-full object-cover"
/>
</motion.div>

4
src/components/layout/HeroVisualCollage.tsx
View File

@@ -3,7 +3,7 @@
import Image from "next/image";
import { motion } from "framer-motion";
import { GlassInfoCard } from "../ui/GlassInfoCard";
import { scaleIn, staggerContainer, viewport } from "@/lib/animations";
import { scaleIn, viewport } from "@/lib/animations";
import type { Variants } from "framer-motion";
type GlassCardItem = {
@@ -134,6 +134,7 @@ export function HeroVisualCollage({
className="object-cover"
sizes="(max-width: 640px) 180px, 220px"
priority
fetchPriority="high"
/>
</div>
) : (
@@ -145,6 +146,7 @@ export function HeroVisualCollage({
height={160}
className="object-contain max-h-[140px] w-auto motion-safe:animate-[pulse_6s_infinite]"
priority
fetchPriority="high"
/>
</div>
)}

50
src/components/layout/PremiumFooter.tsx
View File

@@ -2,11 +2,9 @@
import Link from "next/link";
import Image from "next/image";
import React from "react";
import { motion } from "framer-motion";
import { FaFacebookF, FaInstagram, FaLinkedinIn } from "react-icons/fa";
import { MaterialIcon } from "@/components/ui/MaterialIcon";
import { fadeUp, fadeIn, staggerContainer, staggerSlow, viewport } from "@/lib/animations";
import { fadeUp, fadeIn, staggerSlow, viewport } from "@/lib/animations";
const EASE = [0.22, 1, 0.36, 1] as [number, number, number, number];
@@ -31,6 +29,30 @@ const LEGAL = [
const socialButtonClass =
"flex h-10 w-10 items-center justify-center rounded-full border border-white/10 bg-white/5 text-white transition-[background-color] duration-300 xl:h-[54px] xl:w-[54px]";
function FacebookIcon({ size = 20 }: { size?: number }) {
return (
<svg width={size} height={size} viewBox="0 0 320 512" aria-hidden="true" fill="currentColor">
<path d="M279.14 288l14.22-92.66h-88.91v-60.13c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S260.43 0 225.36 0C152.13 0 104.2 44.38 104.2 124.72v70.62H22.89V288h81.31v224h100.25V288z" />
</svg>
);
}
function InstagramIcon({ size = 21 }: { size?: number }) {
return (
<svg width={size} height={size} viewBox="0 0 448 512" aria-hidden="true" fill="currentColor">
<path d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9S160.5 370.8 224.1 370.8 339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9S352.3 35.1 316.4 33.4c-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1S3.2 127.5 1.5 163.4c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.5 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2s34.5-58 36.2-93.9c2.1-37 2.1-147.8 0-184.8z" />
</svg>
);
}
function LinkedInIcon({ size = 20 }: { size?: number }) {
return (
<svg width={size} height={size} viewBox="0 0 448 512" aria-hidden="true" fill="currentColor">
<path d="M100.28 448H7.4V148.9h92.88zM53.79 108.1C24.09 108.1 0 83.5 0 53.8a53.79 53.79 0 0 1 107.58 0c0 29.7-24.1 54.3-53.79 54.3zM447.9 448h-92.68V302.4c0-34.7-.7-79.2-48.29-79.2-48.29 0-55.69 37.7-55.69 76.7V448h-92.78V148.9h89.08v40.8h1.3c12.4-23.5 42.69-48.3 87.88-48.3 94 0 111.28 61.9 111.28 142.3V448z" />
</svg>
);
}
const linkColumnVariant = {
hidden: { opacity: 0, y: 20 },
visible: {
@@ -128,7 +150,7 @@ export function PremiumFooter() {
whileTap={{ scale: 0.9 }}
transition={{ type: "spring", stiffness: 400, damping: 17 }}
>
<FaFacebookF size={20} />
<FacebookIcon size={20} />
</motion.a>
<motion.a
@@ -141,7 +163,7 @@ export function PremiumFooter() {
whileTap={{ scale: 0.9 }}
transition={{ type: "spring", stiffness: 400, damping: 17 }}
>
<FaInstagram size={21} />
<InstagramIcon size={21} />
</motion.a>
<motion.a
@@ -154,32 +176,32 @@ export function PremiumFooter() {
whileTap={{ scale: 0.9 }}
transition={{ type: "spring", stiffness: 400, damping: 17 }}
>
<FaLinkedinIn size={20} />
<LinkedInIcon size={20} />
</motion.a>
</div>
</motion.div>
{/* Company links */}
<motion.div variants={linkColumnVariant} className="flex flex-col">
<h5 className="mb-5 text-xs font-extrabold uppercase tracking-wider text-white/40 md:text-sm xl:mb-7 xl:text-[17px]">
<div className="mb-5 text-xs font-extrabold uppercase tracking-wider text-white/40 md:text-sm xl:mb-7 xl:text-[17px]">
Company
</h5>
</div>
<FooterLinkList links={COMPANY} />
</motion.div>
{/* Nearle links */}
<motion.div variants={linkColumnVariant} className="flex flex-col">
<h5 className="mb-5 text-xs font-extrabold uppercase tracking-wider text-white/40 md:text-sm xl:mb-7 xl:text-[17px]">
<div className="mb-5 text-xs font-extrabold uppercase tracking-wider text-white/40 md:text-sm xl:mb-7 xl:text-[17px]">
Nearle
</h5>
</div>
<FooterLinkList links={PARTNERSHIPS} />
</motion.div>
{/* Support links */}
<motion.div variants={linkColumnVariant} className="flex flex-col">
<h5 className="mb-5 text-xs font-extrabold uppercase tracking-wider text-white/40 md:text-sm xl:mb-7 xl:text-[17px]">
<div className="mb-5 text-xs font-extrabold uppercase tracking-wider text-white/40 md:text-sm xl:mb-7 xl:text-[17px]">
Support
</h5>
</div>
<FooterLinkList links={LEGAL} />
</motion.div>
</motion.div>
@@ -197,9 +219,9 @@ export function PremiumFooter() {
</div>
<div className="text-left">
<h6 className="text-sm font-black text-white md:text-base xl:text-lg">
<div className="text-sm font-black text-white md:text-base xl:text-lg">
Nearle
</h6>
</div>
<p className="mt-0.5 text-xs leading-normal text-white/60 md:text-sm xl:mt-1 xl:text-base">
424, Diwan Bahadur Rd, Opp. Sri Krishna Sweets, R.S. Puram,
Coimbatore, TN 641002

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

@@ -2,7 +2,7 @@
import Link from "next/link";
import Image from "next/image";
import { useState, useEffect } from "react";
import { useState } from "react";
import { usePathname } from "next/navigation";
import {
motion,
@@ -56,11 +56,6 @@ export function PremiumNavbar() {
setScrolled(y > 20);
});
// Close mobile menu whenever the route changes (navbar no longer remounts on navigation)
useEffect(() => {
setMobileOpen(false);
}, [pathname]);
const isActiveLink = (href: string) => {
if (href === "/") return pathname === "/";
return pathname.startsWith(href);

14
src/components/motion/AnimatedSection.tsx
View File

@@ -3,7 +3,7 @@
import { motion } from "framer-motion";
import type { ReactNode } from "react";
import { fadeUp, staggerContainer, viewport } from "@/lib/animations";
import type { Variants } from "framer-motion";
import type { TargetAndTransition, Variants } from "framer-motion";
const VARIANTS: Record<string, Variants> = {
fadeUp,
@@ -24,13 +24,17 @@ export function AnimatedSection({
delay = 0,
}: AnimatedSectionProps) {
const chosen = VARIANTS[variant] ?? fadeUp;
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const visible = chosen.visible;
const visibleState: TargetAndTransition =
typeof visible === "object" && visible !== null && !Array.isArray(visible)
? visible
: {};
const withDelay: Variants = {
hidden: chosen.hidden as any,
hidden: chosen.hidden,
visible: {
...(chosen.visible as any),
...visibleState,
transition: {
...((chosen.visible as any)?.transition ?? {}),
...(visibleState.transition ?? {}),
delay,
},
},

4
src/components/ui/FeatureStatsRow.tsx
View File

@@ -37,9 +37,9 @@ export function FeatureStatsRow({ items, className = "" }: FeatureStatsRowProps)
<MaterialIcon icon={item.icon} size={28} />
</div>
<div className="min-w-0">
<h4 className="text-lg lg:text-xl xl:text-2xl font-black text-[#17051F] leading-tight transition-colors duration-[250ms] group-hover:text-[#6330D6]">
<div className="text-lg lg:text-xl xl:text-2xl font-black text-[#17051F] leading-tight transition-colors duration-[250ms] group-hover:text-[#6330D6]">
{item.title}
</h4>
</div>
{item.desc && (
<p className="text-sm lg:text-[15px] font-medium text-[#6B7280] mt-1 leading-snug">
{item.desc}

54
src/components/ui/MaterialIcon.tsx
View File

@@ -1,3 +1,21 @@
import {
Target,
Eye,
CircleHelp,
Users,
Store,
Building2,
Zap,
Download,
Compass,
Smile,
X,
Menu,
MapPin,
Phone,
type LucideIcon,
} from "lucide-react";
type MaterialIconProps = {
icon: string;
size?: number;
@@ -5,15 +23,51 @@ type MaterialIconProps = {
className?: string;
};
// Small, frequently-used subset of Material Symbols rendered as inline SVG
// (via lucide-react) so these pages don't need to fetch the full icon font.
// Any icon name not listed here falls back to the material-symbols-outlined
// font, which other pages still rely on.
const LUCIDE_ICON_MAP: Record<string, LucideIcon> = {
target: Target,
visibility: Eye,
help_outline: CircleHelp,
people: Users,
store: Store,
location_city: Building2,
bolt: Zap,
download: Download,
explore: Compass,
mood: Smile,
close: X,
menu: Menu,
location_on: MapPin,
phone: Phone,
};
export function MaterialIcon({
icon,
size = 24,
fill = false,
className = "",
}: MaterialIconProps) {
const LucideComponent = LUCIDE_ICON_MAP[icon];
if (LucideComponent) {
return (
<LucideComponent
size={size}
strokeWidth={2}
fill={fill ? "currentColor" : "none"}
className={className}
aria-hidden="true"
/>
);
}
return (
<span
className={`material-symbols-outlined ${className}`}
aria-hidden="true"
style={{
fontSize: size,
fontVariationSettings: `'FILL' ${fill ? 1 : 0}, 'wght' 400, 'GRAD' 0, 'opsz' ${size}`,