update SEO

This commit is contained in:
2026-07-01 17:05:32 +05:30
parent 208f6258ce
commit f37e2392f3
45 changed files with 227 additions and 567 deletions

View File

@@ -38,7 +38,7 @@ const STRATEGY_CARDS = [
descr: "Nearle is essential for a business to grow by leveraging the full potential of its neighbourhood. It is an indispensable tool for consumers to take advantage of what their neighbourhood has to offer.",
icon: "help_outline",
iconClass: "bg-[#6330D6]/10 text-[#6330D6] border-[#6330D6]/20",
image: "/images/app-mockup.png",
image: "/images/app-mockup.webp",
imageAlt: "Nearle app on a smartphone",
imgFit: "object-contain object-bottom"
}

View File

@@ -199,7 +199,7 @@ export default function BrandsPage() {
<div className="w-full">
<HeroVisualCollage
centerImage="/nearlenewlogo.png"
leftImage="/images/cat-daily-essentials.png"
leftImage="/images/cat-daily-essentials.webp"
rightImage="/images/nearle-merchant/local-map.webp"
glassCards={collageCards}
isPhoneCenter={false}

View File

@@ -125,36 +125,6 @@ const TIMELINE = [
},
];
const EARNINGS = [
{
profile: "Part-Time (23 hrs/day)",
deliveries: "812 deliveries",
daily: "₹450 ₹700",
monthly: "₹9,000 ₹14,000",
icon: "hourglass_empty",
color: "border-[#6330D6]/15 bg-[#FAF7FD]",
accent: "text-[#6330D6]",
},
{
profile: "Full-Time (68 hrs/day)",
deliveries: "2232 deliveries",
daily: "₹1,100 ₹1,600",
monthly: "₹22,000 ₹32,000",
icon: "bolt",
color: "border-[#006D37]/15 bg-[#F0FAF4]",
accent: "text-[#006D37]",
},
{
profile: "Peak Hours + Bonuses",
deliveries: "Varies",
daily: "+ ₹200 ₹400",
monthly: "Up to ₹5,000 extra",
icon: "trending_up",
color: "border-amber-500/15 bg-amber-50",
accent: "text-amber-600",
},
];
const FAQ_ITEMS = [
{
question: "Do I need to own a vehicle to join?",
@@ -237,7 +207,7 @@ export default function DeliveryPartnersPage() {
<div className="w-full">
<HeroVisualCollage
centerImage="/nearlenewlogo.png"
leftImage="/nearle people.png"
leftImage="/nearle-people.webp"
rightImage="/images/nearle-merchant/delivery-support.webp"
glassCards={collageCards}
isPhoneCenter={false}

View File

@@ -1,5 +1,13 @@
@import "tailwindcss";
@font-face {
font-family: "Material Symbols Outlined";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("/fonts/material-symbols-outlined.woff2") format("woff2");
}
/* ─── Design Tokens (Material Design 3 inspired) ─── */
:root {
--surface: #FAF8FC;
@@ -124,8 +132,8 @@
--spacing-container-max: 1440px;
/* Fonts */
--font-display: "Jost", sans-serif;
--font-body: "Jost", sans-serif;
--font-display: var(--font-jost), sans-serif;
--font-body: var(--font-jost), sans-serif;
/* Border radius */
@@ -238,6 +246,18 @@ body {
/* Material Symbols config */
.material-symbols-outlined {
font-family: "Material Symbols Outlined";
font-weight: normal;
font-style: normal;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
-webkit-font-feature-settings: "liga";
-webkit-font-smoothing: antialiased;
font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
}
@@ -618,373 +638,6 @@ body {
max-width: 320px;
}
.footer-social-link {
width: 58px;
height: 58px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
display: flex;
align-items: center;
justify-content: center;
color: #ffffff;
transition: all 0.3s ease;
}
.footer-social-link:hover {
background: var(--brand-accent);
color: var(--brand-dark);
}
.footer-column-title {
font-size: 17px;
font-weight: 700;
color: #E5E7EB;
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: 24px;
}
.footer-links-list {
display: flex;
flex-direction: column;
gap: 20px;
}
.footer-link {
font-size: 17px;
line-height: 1.5;
color: rgba(255, 255, 255, 0.8);
transition: all 0.3s ease;
}
.footer-link:hover {
color: var(--brand-accent);
transform: translateX(6px);
}
/* Contact Form Card styling */
.footer-brand {
min-width: 0;
}
.footer-company {
min-width: 0;
}
.footer-partnerships {
min-width: 0;
}
.footer-legal {
margin-top: 12px;
}
.footer-contact-wrap {
min-width: 0;
width: 100%;
}
.footer-contact-card {
width: 100%;
max-width: 540px;
min-width: 0;
box-sizing: border-box;
border-radius: 32px;
}
@media (max-width: 640px) {
.footer-contact-card {
max-width: 100%;
border-radius: 24px;
}
}
.footer-contact-card input,
.footer-contact-card textarea,
.footer-contact-card button {
width: 100%;
max-width: 100%;
min-width: 0;
box-sizing: border-box;
}
.footer-contact-title {
font-size: clamp(30px, 2.2vw, 34px);
font-weight: 800;
line-height: 1.15;
}
.footer-contact-subtitle {
font-size: 16px;
color: var(--on-surface-variant);
margin-top: 8px;
margin-bottom: 24px;
white-space: normal;
word-wrap: break-word;
}
.footer-form-row {
/* Layout handled via Tailwind grid classes in Footer.tsx */
}
.footer-input {
box-sizing: border-box;
width: 100%;
background: var(--surface);
border: 1px solid var(--outline-variant);
color: var(--on-surface);
border-radius: 14px;
padding-inline: 16px;
font-size: 16px;
outline: none;
transition: all 0.2s ease;
}
.footer-input:focus {
border-color: var(--primary);
box-shadow: 0 0 0 2px rgba(77, 4, 106, 0.2);
}
.footer-input.has-error {
border-color: var(--error);
}
.footer-input.has-error:focus {
box-shadow: 0 0 0 2px rgba(186, 26, 26, 0.2);
}
.footer-input::placeholder {
font-size: 16px;
color: rgba(77, 67, 79, 0.6);
}
.footer-textarea {
box-sizing: border-box;
width: 100%;
background: var(--surface);
border: 1px solid var(--outline-variant);
color: var(--on-surface);
border-radius: 14px;
padding: 16px;
font-size: 16px;
outline: none;
resize: none;
transition: all 0.2s ease;
}
.footer-textarea:focus {
border-color: var(--primary);
box-shadow: 0 0 0 2px rgba(77, 4, 106, 0.2);
}
.footer-textarea.has-error {
border-color: var(--error);
}
.footer-textarea.has-error:focus {
box-shadow: 0 0 0 2px rgba(186, 26, 26, 0.2);
}
.footer-textarea::placeholder {
font-size: 16px;
color: rgba(77, 67, 79, 0.6);
}
.footer-error-text {
font-size: 15px;
color: var(--error);
font-weight: 700;
margin-top: 4px;
padding-left: 4px;
display: flex;
align-items: center;
gap: 4px;
}
.footer-submit-btn {
width: 100%;
background: var(--primary);
color: var(--on-primary);
font-weight: 700;
font-size: 18px;
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
cursor: pointer;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
transition: all 0.2s ease;
border: none;
}
.footer-submit-btn:hover:not(:disabled) {
background: var(--primary-container);
}
.footer-submit-btn:disabled {
background: rgba(77, 4, 106, 0.5);
cursor: not-allowed;
}
.footer-submit-btn:active:not(:disabled) {
transform: translateY(1px);
}
.footer-bottom-text {
font-size: 15px;
color: rgba(255, 255, 255, 0.4);
}
/* Helpdesk override for sizing constraints */
.helpdesk-subtitle {
font-size: 15px;
font-weight: 700;
color: rgba(18, 2, 23, 0.8);
margin-top: 2px;
}
.helpdesk-btn {
display: flex;
align-items: center;
gap: 12px;
background-color: var(--brand-dark);
color: var(--brand-accent);
font-weight: 900;
padding: 14px 32px;
border-radius: 9999px;
font-size: 16px;
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3);
transition: all 0.2s ease;
}
.helpdesk-btn:hover {
background-color: rgba(18, 2, 23, 0.9);
}
@media (max-width: 1200px) {
.footer-grid,
.footer-grid-contact-page {
grid-template-columns: repeat(3, 1fr);
gap: 40px;
}
.footer-brand-col {
grid-column: 1 / -1;
}
.footer-contact-card-wrapper {
grid-column: 1 / -1;
display: flex;
justify-content: center;
width: 100%;
}
}
@media (max-width: 768px) {
.footer-grid {
grid-template-columns: 1fr;
grid-template-areas:
"brand"
"company"
"partnerships"
"legal"
"form";
gap: 32px;
}
.footer-grid-contact-page {
grid-template-columns: 1fr;
grid-template-areas:
"brand"
"company"
"partnerships"
"legal";
gap: 32px;
}
}
/* ─── Footer Vertical Spacing & Height Alignment ─── */
.footer {
--helpdesk-height: 150px;
--helpdesk-overlap: 42px;
position: relative;
height: auto !important;
min-height: 0 !important;
padding: 0 !important;
overflow: visible !important;
}
.footer-helpdesk-wrap {
box-sizing: border-box;
position: relative;
z-index: 5;
width: 100%;
max-width: 1720px;
margin: 0 auto;
padding-inline: clamp(24px, 5%, 76px);
margin-top: -42px;
margin-bottom: 48px;
}
.footer-main {
padding-top: 0 !important;
padding-bottom: 56px !important;
}
.footer-divider {
width: 100%;
margin: 0 auto !important;
border: none;
border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.footer-bottom {
width: 100%;
margin: 0 auto;
padding: 28px 0 34px !important;
}
.footer-spacer,
.footer-empty-space {
display: none !important;
}
@media (max-width: 768px) {
.footer-helpdesk-wrap {
margin-top: 0;
margin-bottom: 32px;
}
}
/* ─── Stable Subpage Hero Height to Prevent Layout Shift ─── */
.hero-section {
position: relative !important;
min-height: clamp(680px, 48vw, 820px) !important;
height: clamp(680px, 48vw, 820px) !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
align-items: center !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
overflow: hidden !important;
}
.hero-section > div.relative {
width: 100% !important;
}
.hero-rotator-text {
display: inline-flex !important;
align-items: center;
justify-content: center;
min-height: 2.4em;
vertical-align: middle;
}
/* ─── Experience Bento Mosaic Grid Redesign ─── */
.experience-grid {
display: grid;
@@ -1106,33 +759,6 @@ body {
}
}
/* ─── Hero Section Background & Overlay Styling ─── */
.hero-background {
position: absolute;
inset: 0;
z-index: 0;
overflow: hidden;
}
.hero-background img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
object-position: center right !important;
}
.hero-background::after {
content: "";
position: absolute;
inset: 0;
background: rgba(18, 4, 28, 0.48);
}
.hero-content {
position: relative;
z-index: 1;
}
/* ─── Shared Premium Framed Layout Classes ─── */
.page-canvas {
background-color: #E8D8ED;

View File

@@ -1,11 +1,17 @@
import type { Metadata, Viewport } from "next";
import { Jost } from "next/font/google";
import "./globals.css";
import { MotionProvider } from "@/components/layout/MotionProvider";
import { PremiumNavbar } from "@/components/layout/PremiumNavbar";
import { PremiumFooter } from "@/components/layout/PremiumFooter";
const jost = { variable: "font-display" };
const jostBody = { variable: "font-body" };
const jost = Jost({
subsets: ["latin"],
weight: ["400", "600", "700", "800"],
variable: "--font-jost",
display: "swap",
preload: true,
});
export const metadata: Metadata = {
metadataBase: new URL("https://nearle.in"),
@@ -72,23 +78,10 @@ export default function RootLayout({
return (
<html
lang="en"
className={`${jost.variable} ${jostBody.variable}`}
className={jost.variable}
data-scroll-behavior="smooth"
suppressHydrationWarning
>
<head>
{/* Material Symbols Outlined */}
{/* eslint-disable-next-line @next/next/no-page-custom-font */}
<link
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap"
rel="stylesheet"
/>
{/* eslint-disable-next-line @next/next/no-page-custom-font */}
<link
href="https://fonts.googleapis.com/css2?family=Jost:wght@400;600;700;800&display=swap"
rel="stylesheet"
/>
</head>
<body className="bg-[#E8DCF2] text-on-surface font-body antialiased" suppressHydrationWarning>
<MotionProvider>
<div className="min-h-screen bg-white font-body text-[#16001D] antialiased flex flex-col">

View File

@@ -211,7 +211,7 @@ export default function MerchantsPage() {
<HeroVisualCollage
centerImage="/nearlenewlogo.png"
leftImage="/images/nearle-merchant/catalogue-ui.webp"
rightImage="/Nearle Business.png"
rightImage="/nearle-business.webp"
glassCards={collageCards}
isPhoneCenter={false}
/>
@@ -452,4 +452,3 @@ export default function MerchantsPage() {
</PremiumPageShell>
);
}

View File

@@ -1,6 +1,5 @@
import React from "react";
import Image from "next/image";
import Link from "next/link";
import { MaterialIcon } from "@/components/ui/MaterialIcon";
import { PremiumPageShell } from "@/components/layout/PremiumPageShell";
import { PeopleHero } from "@/components/heroes/PeopleHero";
@@ -22,7 +21,7 @@ const OFFERINGS = [
descr: "Enjoy the comfort of elegant living. Nearle is India's first hyper-local managed platform bringing all amenities and requirements directly to your fingertips.",
icon: "local_florist",
color: "from-purple-500/10 to-indigo-500/10 text-primary border-purple-100",
image: "/nearle people.png",
image: "/nearle-people.webp",
isWide: false
},
{
@@ -31,7 +30,7 @@ const OFFERINGS = [
descr: "Pick hot deals within your neighbourhood. Stay updated on localized sales, discounts, and flash promotions happening today.",
icon: "local_activity",
color: "from-amber-500/10 to-orange-500/10 text-amber-700 border-amber-100",
image: "/images/app-mockup.png",
image: "/images/app-mockup.webp",
isWide: false
},
{
@@ -40,7 +39,7 @@ const OFFERINGS = [
descr: "Enjoy the ease of the World Wide Web, fulfilled entirely by trusted local businesses. Avoid traffic lights, parking hassles, and pollution.",
icon: "travel_explore",
color: "from-green-500/10 to-emerald-500/10 text-secondary border-green-100",
image: "/images/slider-courier-mask-purple-v5.png",
image: "/images/slider-courier-mask-purple-v5.webp",
isWide: false
},
{
@@ -49,7 +48,7 @@ const OFFERINGS = [
descr: "Enjoy safe, convenient shopping with custom pricing, resident promotions, and bulk order discounts negotiated for your community.",
icon: "shopping_bag",
color: "from-rose-500/10 to-pink-500/10 text-rose-700 border-rose-100",
image: "/images/cat-pet-essentials.png",
image: "/images/cat-pet-essentials.webp",
isWide: false
},
{
@@ -58,7 +57,7 @@ const OFFERINGS = [
descr: "Order everything you need in your neighborhood with a single tap. A fast, organized last-mile delivery network ensures prompt fulfillment.",
icon: "touch_app",
color: "from-sky-500/10 to-blue-500/10 text-sky-700 border-sky-100",
image: "/about.png",
image: "/about.webp",
isWide: true
},
{
@@ -67,7 +66,7 @@ const OFFERINGS = [
descr: "Get your fresh fruits, farm-fresh vegetables, dairy, and grocery items delivered instantly from verified local green grocers.",
icon: "eco",
color: "from-emerald-500/10 to-teal-500/10 text-emerald-700 border-emerald-100",
image: "/images/cat-daily-essentials.png",
image: "/images/cat-daily-essentials.webp",
isWide: false
},
{
@@ -76,7 +75,7 @@ const OFFERINGS = [
descr: "Choose from the best local restaurants and neighborhood eateries close to your home. Hot food delivered with relevance and speed.",
icon: "restaurant",
color: "from-orange-500/10 to-red-500/10 text-orange-700 border-orange-100",
image: "/images/cat-hot-food.png",
image: "/images/cat-hot-food.webp",
isWide: false
},
{
@@ -85,7 +84,7 @@ const OFFERINGS = [
descr: "Access custom-tailored local neighborhood services designed to integrate convenience directly into residential society living.",
icon: "stars",
color: "from-violet-500/10 to-purple-500/10 text-violet-700 border-violet-100",
image: "/images/cat-health-wellness.png",
image: "/images/cat-health-wellness.webp",
isWide: false
},
{
@@ -94,7 +93,7 @@ const OFFERINGS = [
descr: "Book certified local service providers at your convenience. From handymen to laundry, pet care to pharmacy delivery, all in one place.",
icon: "construction",
color: "from-cyan-500/10 to-blue-500/10 text-cyan-700 border-cyan-100",
image: "/images/cat-home-services.png",
image: "/images/cat-home-services.webp",
isWide: false
}
];
@@ -174,7 +173,7 @@ export default function PeoplePage() {
src={offering.image}
alt={offering.title}
fill
sizes={offering.isWide ? "(max-width: 1023px) 100vw, 66vw" : "(max-width: 1023px) 100vw, 33vw"}
sizes={offering.isWide ? "(max-width: 639px) calc(100vw - 48px), (max-width: 1023px) calc(100vw - 96px), 860px" : "(max-width: 639px) calc(100vw - 48px), (max-width: 1023px) calc(100vw - 96px), 420px"}
className="experience-card__image"
/>
<div className="experience-card__overlay" />