add image

src/app/people/page.tsx

@@ -1,5 +1,3 @@
-"use client";
-
 import React from "react";
 import Image from "next/image";
 import Link from "next/link";
@@ -7,11 +5,18 @@ import { MaterialIcon } from "@/components/ui/MaterialIcon";
 import { PremiumPageShell } from "@/components/layout/PremiumPageShell";
 import { HeroVisualCollage } from "@/components/layout/HeroVisualCollage";
 import { FeatureStatsRow } from "@/components/ui/FeatureStatsRow";
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Nearle for People",
+  description:
+    "Discover verified local stores, save your favourite merchants, and order everyday essentials with superfast local delivery from shops within your 2km neighbourhood.",
+};
 
 const OFFERINGS = [
   {
     title: "Elegant Living",
-    tag: "Join the #1 Neighbourhood App",
+    tag: "Your Neighbourhood App",
     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",
@@ -93,10 +98,10 @@ const OFFERINGS = [
 ];
 
 const LOCAL_STATS = [
-  { count: "100+", label: "Verified Restaurants", icon: "restaurant" },
-  { count: "100+", label: "Green Grocers", icon: "local_mall" },
-  { count: "100+", label: "Home Etailers", icon: "shopping_cart" },
-  { count: "100+", label: "Service Providers", icon: "handyman" }
+  { count: "Local", label: "Verified Restaurants", icon: "restaurant" },
+  { count: "Fresh", label: "Green Grocers", icon: "local_mall" },
+  { count: "Ready", label: "Home Stores", icon: "shopping_cart" },
+  { count: "Trusted", label: "Service Providers", icon: "handyman" }
 ];
 
 const APP_BENEFITS = [
@@ -133,10 +138,10 @@ const APP_BENEFITS = [
 ];
 
 const HERO_STATS = [
-  { title: "1000+ Verified Stores", icon: "store", desc: "Local commerce active" },
+  { title: "Verified Local Stores", icon: "store", desc: "Growing local commerce" },
   { title: "2km Neighbourhood", icon: "location_on", desc: "Hyperlocal service radius" },
-  { title: "50000+ Happy Customers", icon: "mood", desc: "Active daily orders" },
-  { title: "4.7 Average Rating", icon: "star", desc: "Highly rated on stores" }
+  { title: "Happy Customers", icon: "mood", desc: "Growing neighbourhood community" },
+  { title: "Trusted Platform", icon: "star", desc: "Loved by local shoppers" }
 ];
 
 export default function PeoplePage() {
@@ -172,13 +177,13 @@ export default function PeoplePage() {
             <div className="flex flex-col sm:flex-row gap-3.5 mt-8 w-full sm:w-auto">
               <a
                 href="#download-section"
-                className="bg-[#6330D6] hover:bg-[#5225b8] text-white font-black px-8 py-3.5 rounded-xl text-sm md:text-base text-center shadow-md hover:shadow-lg transition-all duration-200 active:scale-98"
+                className="bg-[#6330D6] hover:bg-[#5225b8] text-white font-black px-8 py-3.5 rounded-xl text-sm md:text-base text-center shadow-md hover:shadow-lg transition-all duration-200 active:scale-[0.98]"
               >
                 Get the App
               </a>
               <Link
                 href="/"
-                className="border-2 border-[#6330D6]/20 hover:border-[#6330D6]/40 text-[#6330D6] font-black px-8 py-3.5 rounded-xl text-sm md:text-base text-center transition-all duration-200 hover:bg-[#6330D6]/5 active:scale-98"
+                className="border-2 border-[#6330D6]/20 hover:border-[#6330D6]/40 text-[#6330D6] font-black px-8 py-3.5 rounded-xl text-sm md:text-base text-center transition-all duration-200 hover:bg-[#6330D6]/5 active:scale-[0.98]"
               >
                 Explore Stores
               </Link>
@@ -221,13 +226,13 @@ export default function PeoplePage() {
           {OFFERINGS.map((offering) => (
             <article
               key={offering.title}
-              className="experience-card"
+              className={`experience-card${offering.isWide ? " experience-card--wide" : ""}`}
             >
               <Image
                 src={offering.image}
                 alt={offering.title}
                 fill
-                sizes="(max-width: 1023px) 100vw, 33vw"
+                sizes={offering.isWide ? "(max-width: 1023px) 100vw, 66vw" : "(max-width: 1023px) 100vw, 33vw"}
                 className="experience-card__image"
               />
               <div className="experience-card__overlay" />
@@ -250,7 +255,7 @@ export default function PeoplePage() {
             Nearle Network
           </span>
           <h2 className="font-display text-2xl font-black text-[#16001D] mt-4">
-            Join the #1 Neighbourhood App
+            The Neighbourhood App
           </h2>
           <p className="text-xs md:text-sm text-[#5E5866] mt-2">
             Bringing local stores to your doorstep instantly.
@@ -491,7 +496,7 @@ export default function PeoplePage() {
           <div className="flex flex-col gap-3.5 mt-6 w-full max-w-[320px]">
             {APP_BENEFITS.map((b) => (
               <div key={b.title} className="bg-white/[0.04] border border-white/5 rounded-xl p-3.5 flex gap-3.5 items-center text-left">
-                <div className={`flex-shrink-0 w-8.5 h-8.5 rounded-lg flex items-center justify-center border shadow-inner ${b.iconClass}`}>
+                <div className={`flex-shrink-0 w-[34px] h-[34px] rounded-lg flex items-center justify-center border shadow-inner ${b.iconClass}`}>
                   <MaterialIcon icon={b.icon} size={16} />
                 </div>
                 <div>