diff --git a/public/about.png b/public/about.png
new file mode 100644
index 0000000..be660f2
Binary files /dev/null and b/public/about.png differ
diff --git a/public/contect.png b/public/contect.png
new file mode 100644
index 0000000..dbbcfd8
Binary files /dev/null and b/public/contect.png differ
diff --git a/public/nearle people.png b/public/nearle people.png
new file mode 100644
index 0000000..e368a11
Binary files /dev/null and b/public/nearle people.png differ
diff --git a/src/app/about/page.tsx b/src/app/about/page.tsx
index 7811942..df69dff 100644
--- a/src/app/about/page.tsx
+++ b/src/app/about/page.tsx
@@ -1,8 +1,13 @@
-"use client";
-
import React from "react";
import Link from "next/link";
+import Image from "next/image";
import { MaterialIcon } from "@/components/ui/MaterialIcon";
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+ title: "About Us",
+ description: "Discover Nearle, India's first hyperlocal neighborhood living platform connecting residents with local convenience, grocery delivery, and home services.",
+};
const STRATEGY_CARDS = [
{
@@ -31,47 +36,24 @@ const COUNTERS = [
{ count: "100+", label: "Active Neighborhoods", icon: "location_city" }
];
-const TEAM = [
- {
- name: "Nellian Solliappan",
- role: "Co-Founder & CEO",
- initials: "NS",
- color: "bg-primary text-white"
- },
- {
- name: "Fazul Ilahi",
- role: "Founder & CTO",
- initials: "FI",
- color: "bg-secondary text-white"
- },
- {
- name: "Sagar",
- role: "Co-Founder & COO",
- initials: "S",
- color: "bg-brand-accent text-brand-dark"
- },
- {
- name: "Prithvi",
- role: "Investor",
- initials: "P",
- color: "bg-surface-container text-on-surface"
- },
- {
- name: "Sriram Sundararajan",
- role: "Investor",
- initials: "SS",
- color: "bg-surface-container-highest text-brand-dark"
- }
-];
-
export default function AboutPage() {
return (
{/* ─── Hero Section ─── */}
-
-
-
+
+ {/* Background Image with Overlay */}
+
@@ -142,82 +124,6 @@ export default function AboutPage() {
- {/* ─── Team Section ─── */}
-
-
-
- {/* Left: About team content */}
-
-
- Who we are
-
-
- Team Nearle
-
-
- Nearle is built on the core concept of “Boost business by trust” . We assist local offline stores in successfully spreading their brand message to the neighborhood to open new revenue streams.
-
-
- Our team combines technology skills, domain expertise, and operational focus to ensure the highest quality solution for our customers.
-
-
-
-
Contact Team
-
-
-
- {/* Right: Team Grid cards */}
-
- {TEAM.map((t) => (
-
-
- {t.initials}
-
-
- {t.name}
-
-
- {t.role}
-
-
- ))}
-
-
-
-
-
- {/* ─── Client Testimonial & Quote ─── */}
-
-
-
- “
-
-
-
- Partner Feedback
-
-
- “Nearle has opened up immense opportunities for us to survive the competition, sustain in business, and gain our customers back.”
-
-
-
- DK
-
-
-
Darshan K
-
Erranderz Partner
-
-
-
-
-
-
{/* ─── Brand Building Banner ─── */}
diff --git a/src/app/businesses/page.tsx b/src/app/businesses/page.tsx
index 7c6f03d..2c71d0b 100644
--- a/src/app/businesses/page.tsx
+++ b/src/app/businesses/page.tsx
@@ -90,7 +90,7 @@ export default function BusinessesPage() {
return (
{/* ─── Hero Section with Animated Rotator ─── */}
-
+
{/* Background Image with Overlay */}
Power your business.
-
+
{ROTATOR_WORDS[wordIndex]}
diff --git a/src/app/contact/page.tsx b/src/app/contact/page.tsx
index 2288358..835b3bd 100644
--- a/src/app/contact/page.tsx
+++ b/src/app/contact/page.tsx
@@ -1,129 +1,34 @@
-"use client";
-
-import React, { useState } from "react";
+import React from "react";
import Link from "next/link";
+import Image from "next/image";
import { MaterialIcon } from "@/components/ui/MaterialIcon";
+import { ContactForm } from "@/components/contact/ContactForm";
+import type { Metadata } from "next";
-type FormData = {
- name: string;
- email: string;
- message: string;
-};
-
-type FormErrors = {
- name?: string;
- email?: string;
- message?: string;
+export const metadata: Metadata = {
+ title: "Contact Us",
+ description: "Get in touch with Nearle's team. Reach out for support, merchant partnerships, delivery, or general hyperlocal neighborhood inquiries.",
};
export default function ContactPage() {
- const [formData, setFormData] = useState({
- name: "",
- email: "",
- message: "",
- });
-
- const [errors, setErrors] = useState({});
- const [isSubmitting, setIsSubmitting] = useState(false);
- const [showToast, setShowToast] = useState(false);
-
- const handleInputChange = (
- e: React.ChangeEvent
- ) => {
- const { name, value } = e.target;
- setFormData((prev) => ({
- ...prev,
- [name]: value,
- }));
- // Clear error for this field as the user types
- if (errors[name as keyof FormErrors]) {
- setErrors((prev) => ({
- ...prev,
- [name]: undefined,
- }));
- }
- };
-
- const validateForm = (): boolean => {
- const tempErrors: FormErrors = {};
- let isValid = true;
-
- if (!formData.name.trim()) {
- tempErrors.name = "Name is required";
- isValid = false;
- }
-
- const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
- if (!formData.email.trim()) {
- tempErrors.email = "Email is required";
- isValid = false;
- } else if (!emailRegex.test(formData.email)) {
- tempErrors.email = "Please enter a valid email address";
- isValid = false;
- }
-
- if (!formData.message.trim()) {
- tempErrors.message = "Message is required";
- isValid = false;
- } else if (formData.message.trim().length < 10) {
- tempErrors.message = "Message must be at least 10 characters long";
- isValid = false;
- }
-
- setErrors(tempErrors);
- return isValid;
- };
-
- const handleSubmit = async (e: React.FormEvent) => {
- e.preventDefault();
-
- if (!validateForm()) return;
-
- setIsSubmitting(true);
-
- // Simulate API Request delay
- await new Promise((resolve) => setTimeout(resolve, 1200));
-
- setIsSubmitting(false);
- setShowToast(true);
- setFormData({ name: "", email: "", message: "" });
-
- // Auto-hide toast after 5 seconds
- setTimeout(() => {
- setShowToast(false);
- }, 5000);
- };
-
return (
{/* ─── Breadcrumbs & Hero Page Header ─── */}
-
- {/* Background Decorative Gradients */}
-
-
-
-
- {/* Breadcrumbs */}
-
-
-
-
-
- Home
-
-
-
-
- /
- Contact
-
-
-
-
+
+ {/* Background Image with Overlay */}
+
+
+
+
+ {/* Header Title */}
Get in touch
@@ -147,12 +52,12 @@ export default function ContactPage() {
Our Location
- Nearle HQ, 29 Avinashi Road,
- Coimbatore, Tamil Nadu,
- 641018, India
+ Nearle HQ, 424, Diwan Bahadur Rd,
+ Opposite To Sri Krishna Sweets, R.S. Puram,
+ Coimbatore, Tamil Nadu 641002
-
Coimbatore Hub
+
R.S. Puram Hub
Connecting local vendors & residents
@@ -256,161 +161,10 @@ export default function ContactPage() {
{/* Right: Message Form (7 Cols) */}
-
- {/* Background Accent Mesh */}
-
-
-
-
-
- Write to us
-
-
- Send Message
-
-
-
-
-
+
-
- {/* ─── Success Toast Notification ─── */}
- {showToast && (
-
-
-
-
-
-
Message Sent!
-
- Thank you for reaching out. We will get back to you within 24 hours.
-
-
-
setShowToast(false)}
- className="text-white/40 hover:text-white transition-colors cursor-pointer shrink-0"
- aria-label="Close Toast"
- >
-
-
-
- )}
);
}
diff --git a/src/app/globals.css b/src/app/globals.css
index 7c42bc4..848557f 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -120,7 +120,7 @@
--spacing-gutter: 16px;
--spacing-margin-mobile: 16px;
--spacing-margin-desktop: 32px;
- --spacing-container-max: 1280px;
+ --spacing-container-max: 1440px;
/* Fonts */
--font-display: "Jost", sans-serif;
@@ -429,7 +429,7 @@ body {
.hero-stage {
padding-left: clamp(72px, 7.5vw, 150px);
padding-right: clamp(32px, 4vw, 80px);
- min-height: 600px;
+ min-height: 620px;
}
.service-cards-wrapper {
@@ -549,3 +549,598 @@ body {
}
}
+/* ─── Footer Layout & Sizing System ─── */
+.footer-container {
+ box-sizing: border-box;
+ width: 100%;
+ max-width: 1720px;
+ margin-inline: auto;
+ padding-inline: clamp(24px, 5%, 76px);
+}
+
+.footer-grid {
+ display: grid;
+ grid-template-columns:
+ minmax(260px, 1.1fr)
+ minmax(170px, 0.8fr)
+ minmax(190px, 0.9fr)
+ minmax(460px, 1.45fr);
+ grid-template-areas:
+ "brand company partnerships form"
+ "brand legal legal form";
+ gap: 34px 48px;
+ align-items: start;
+}
+
+.footer-grid-contact-page {
+ display: grid;
+ grid-template-columns:
+ minmax(260px, 1.1fr)
+ minmax(170px, 0.8fr)
+ minmax(190px, 0.9fr)
+ minmax(150px, 0.8fr);
+ grid-template-areas: "brand company partnerships legal";
+ gap: 34px 48px;
+ align-items: start;
+}
+
+.footer-grid-contact-page .footer-legal {
+ margin-top: 0;
+}
+
+@media (max-width: 1350px) {
+ .footer-grid {
+ grid-template-columns: minmax(240px, 1fr) repeat(2, minmax(160px, 0.8fr));
+ grid-template-areas:
+ "brand company partnerships"
+ "brand legal legal"
+ "form form form";
+ }
+ .footer-grid-contact-page {
+ grid-template-columns: minmax(240px, 1fr) repeat(2, minmax(160px, 0.8fr));
+ grid-template-areas:
+ "brand company partnerships"
+ "brand legal legal";
+ }
+ .footer-grid-contact-page .footer-legal {
+ margin-top: 12px;
+ }
+}
+
+.footer-desc {
+ font-size: clamp(17px, 1.2vw, 19px);
+ line-height: 1.6;
+ color: rgba(255, 255, 255, 0.8);
+ 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 {
+ grid-area: brand;
+}
+
+.footer-company {
+ grid-area: company;
+}
+
+.footer-partnerships {
+ grid-area: partnerships;
+}
+
+.footer-legal {
+ grid-area: legal;
+ margin-top: 12px;
+}
+
+.footer-contact-wrap {
+ grid-area: form;
+ min-width: 0;
+ width: 100%;
+}
+
+.footer-contact-card {
+ width: 100%;
+ max-width: 540px;
+ min-width: 0;
+ box-sizing: border-box;
+ padding: 40px;
+ border-radius: 32px;
+}
+
+.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 {
+ display: grid;
+ grid-template-columns: 1fr;
+ gap: 16px;
+}
+
+@media (min-width: 1440px) {
+ .footer-form-row {
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+ }
+}
+
+.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;
+ min-height: 60px;
+ 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;
+ min-height: 130px;
+ 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;
+ min-height: 62px;
+ 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-contact-card {
+ padding: 28px 22px;
+ }
+}
+
+/* ─── 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;
+ grid-template-columns: repeat(3, minmax(0, 1fr));
+ grid-auto-rows: 480px;
+ gap: 18px;
+}
+
+.experience-card {
+ position: relative;
+ overflow: hidden;
+ border-radius: 26px;
+ min-height: 480px;
+ isolation: isolate;
+}
+
+.experience-card--wide {
+ grid-column: span 2;
+}
+
+.experience-card__image {
+ position: absolute;
+ inset: 0;
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ transition: transform 0.7s ease;
+}
+
+.experience-card:hover .experience-card__image {
+ transform: scale(1.06);
+}
+
+.experience-card__overlay {
+ position: absolute;
+ inset: 0;
+ background:
+ linear-gradient(
+ 180deg,
+ rgba(18, 4, 28, 0.15) 0%,
+ rgba(18, 4, 28, 0.55) 48%,
+ rgba(18, 4, 28, 0.92) 100%
+ );
+}
+
+.experience-card__content {
+ position: relative;
+ z-index: 1;
+ height: 100%;
+ padding: 30px;
+ display: flex;
+ flex-direction: column;
+ justify-content: flex-end;
+ color: white;
+}
+
+.experience-card__badge {
+ position: absolute;
+ top: 26px;
+ left: 26px;
+ padding: 8px 12px;
+ border-radius: 999px;
+ background: rgba(238, 216, 255, 0.2);
+ border: 1px solid rgba(255, 255, 255, 0.18);
+ color: #ffffff;
+ font-size: 12px;
+ font-weight: 700;
+ letter-spacing: 0.06em;
+ text-transform: uppercase;
+}
+
+.experience-card__icon {
+ position: absolute;
+ top: 24px;
+ right: 24px;
+ width: 48px;
+ height: 48px;
+ display: grid;
+ place-items: center;
+ border-radius: 50%;
+ background: rgba(232, 202, 255, 0.22);
+ border: 1px solid rgba(255, 255, 255, 0.2);
+ backdrop-filter: blur(10px);
+}
+
+.experience-card h3 {
+ color: white;
+ font-size: clamp(24px, 2vw, 34px);
+ line-height: 1.1;
+ margin: 0 0 12px;
+ font-family: var(--font-display);
+ font-weight: 800;
+}
+
+.experience-card p {
+ color: rgba(255, 255, 255, 0.82);
+ max-width: 420px;
+ margin: 0;
+ line-height: 1.55;
+ font-size: 14px;
+}
+
+@media (max-width: 1024px) {
+ .experience-grid {
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+ }
+}
+
+@media (max-width: 640px) {
+ .experience-grid {
+ grid-template-columns: 1fr;
+ grid-auto-rows: auto;
+ }
+ .experience-card {
+ min-height: 340px;
+ }
+ .experience-card--wide {
+ grid-column: span 1;
+ }
+}
+
+/* ─── 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;
+}
+
+
+
+
+
diff --git a/src/app/people/page.tsx b/src/app/people/page.tsx
index eda33ad..e554e7a 100644
--- a/src/app/people/page.tsx
+++ b/src/app/people/page.tsx
@@ -2,6 +2,7 @@
import React, { useState, useEffect } from "react";
import Link from "next/link";
+import Image from "next/image";
import { MaterialIcon } from "@/components/ui/MaterialIcon";
const ROTATOR_SLIDES = [
@@ -16,63 +17,81 @@ const OFFERINGS = [
tag: "Join the #1 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"
+ color: "from-purple-500/10 to-indigo-500/10 text-primary border-purple-100",
+ image: "/nearle people.png",
+ isWide: false
},
{
title: "Awareness at a Touch",
tag: "Hot Deals",
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"
+ color: "from-amber-500/10 to-orange-500/10 text-amber-700 border-amber-100",
+ image: "/images/app-mockup.png",
+ isWide: false
},
{
title: "Best of Both Worlds",
tag: "Convenience & Speed",
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"
+ color: "from-green-500/10 to-emerald-500/10 text-secondary border-green-100",
+ image: "/images/slider-courier-mask.png",
+ isWide: false
},
{
title: "Lifestyle Shopping",
tag: "Exclusive Privileges",
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"
+ color: "from-rose-500/10 to-pink-500/10 text-rose-700 border-rose-100",
+ image: "/images/cat-pet-essentials.png",
+ isWide: false
},
{
title: "Just a Click away",
tag: "Instant Delivery",
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"
+ color: "from-sky-500/10 to-blue-500/10 text-sky-700 border-sky-100",
+ image: "/about.png",
+ isWide: true
},
{
title: "Amazingly Fresh",
tag: "Daily Essentials",
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"
+ color: "from-emerald-500/10 to-teal-500/10 text-emerald-700 border-emerald-100",
+ image: "/images/cat-daily-essentials.png",
+ isWide: false
},
{
title: "Restaurants & Takeaways",
tag: "Hot Food Nearby",
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"
+ color: "from-orange-500/10 to-red-500/10 text-orange-700 border-orange-100",
+ image: "/images/cat-hot-food.png",
+ isWide: false
},
{
title: "Never Before Experience",
tag: "Custom Services",
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"
+ color: "from-violet-500/10 to-purple-500/10 text-violet-700 border-violet-100",
+ image: "/images/cat-health-wellness.png",
+ isWide: false
},
{
title: "Home Services @ Ease",
tag: "Unified Local Partner",
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"
+ color: "from-cyan-500/10 to-blue-500/10 text-cyan-700 border-cyan-100",
+ image: "/images/cat-home-services.png",
+ isWide: false
}
];
@@ -97,11 +116,20 @@ export default function PeoplePage() {
{/* ─── Hero Section ─── */}
-
-
-
+
+ {/* Background Image with Overlay */}
+
+
+
-
+
Nearle for People
@@ -109,30 +137,15 @@ export default function PeoplePage() {
Redefining Local Living.
-
+
{ROTATOR_SLIDES[slideIndex]}
-
-
- India's first hyper-local managed Neighbourhood Living Platform. Connect to verified stores and daily amenities around you instantly.
-
-
- {/* Quick Action */}
-
{/* ─── 9 Core Offerings Bento Grid ─── */}
-
+
What we offer
@@ -145,27 +158,28 @@ export default function PeoplePage() {
-
+
{OFFERINGS.map((offering) => (
-
-
-
- {offering.tag}
-
-
-
+
+
+
+
+
+
{offering.title}
+
{offering.descr}
-
- {offering.title}
-
-
- {offering.descr}
-
-
+
))}
diff --git a/src/components/contact/ContactForm.tsx b/src/components/contact/ContactForm.tsx
new file mode 100644
index 0000000..7854a72
--- /dev/null
+++ b/src/components/contact/ContactForm.tsx
@@ -0,0 +1,252 @@
+"use client";
+
+import React, { useState } from "react";
+import { MaterialIcon } from "@/components/ui/MaterialIcon";
+
+type FormData = {
+ name: string;
+ email: string;
+ message: string;
+};
+
+type FormErrors = {
+ name?: string;
+ email?: string;
+ message?: string;
+};
+
+export function ContactForm() {
+ const [formData, setFormData] = useState
({
+ name: "",
+ email: "",
+ message: "",
+ });
+
+ const [errors, setErrors] = useState({});
+ const [isSubmitting, setIsSubmitting] = useState(false);
+ const [showToast, setShowToast] = useState(false);
+
+ const handleInputChange = (
+ e: React.ChangeEvent
+ ) => {
+ const { name, value } = e.target;
+ setFormData((prev) => ({
+ ...prev,
+ [name]: value,
+ }));
+ // Clear error for this field as the user types
+ if (errors[name as keyof FormErrors]) {
+ setErrors((prev) => ({
+ ...prev,
+ [name]: undefined,
+ }));
+ }
+ };
+
+ const validateForm = (): boolean => {
+ const tempErrors: FormErrors = {};
+ let isValid = true;
+
+ if (!formData.name.trim()) {
+ tempErrors.name = "Name is required";
+ isValid = false;
+ }
+
+ const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+ if (!formData.email.trim()) {
+ tempErrors.email = "Email is required";
+ isValid = false;
+ } else if (!emailRegex.test(formData.email)) {
+ tempErrors.email = "Please enter a valid email address";
+ isValid = false;
+ }
+
+ if (!formData.message.trim()) {
+ tempErrors.message = "Message is required";
+ isValid = false;
+ } else if (formData.message.trim().length < 10) {
+ tempErrors.message = "Message must be at least 10 characters long";
+ isValid = false;
+ }
+
+ setErrors(tempErrors);
+ return isValid;
+ };
+
+ const handleSubmit = async (e: React.FormEvent) => {
+ e.preventDefault();
+
+ if (!validateForm()) return;
+
+ setIsSubmitting(true);
+
+ // Simulate API Request delay
+ await new Promise((resolve) => setTimeout(resolve, 1200));
+
+ setIsSubmitting(false);
+ setShowToast(true);
+ setFormData({ name: "", email: "", message: "" });
+
+ // Auto-hide toast after 5 seconds
+ setTimeout(() => {
+ setShowToast(false);
+ }, 5000);
+ };
+
+ return (
+ <>
+
+ {/* Background Accent Mesh */}
+
+
+
+
+
+ Write to us
+
+
+ Send Message
+
+
+
+
+ {/* Name field */}
+
+
+ Your Name
+
+
+
+
+
+
+
+ {errors.name && (
+
+
+ {errors.name}
+
+ )}
+
+
+ {/* Email field */}
+
+
+ Your Email
+
+
+
+
+
+
+
+ {errors.email && (
+
+
+ {errors.email}
+
+ )}
+
+
+
+ {/* Message field */}
+
+
+ Message
+
+
+
+
+
+
+
+ {errors.message && (
+
+
+ {errors.message}
+
+ )}
+
+
+ {/* Submit button */}
+
+ {isSubmitting ? (
+ <>
+
+ Sending Message...
+ >
+ ) : (
+ <>
+
+ Submit Message
+ >
+ )}
+
+
+
+
+
+ {/* ─── Success Toast Notification ─── */}
+ {showToast && (
+
+
+
+
+
+
Message Sent!
+
+ Thank you for reaching out. We will get back to you within 24 hours.
+
+
+
setShowToast(false)}
+ className="text-white/40 hover:text-white transition-colors cursor-pointer shrink-0"
+ aria-label="Close Toast"
+ >
+
+
+
+ )}
+ >
+ );
+}
diff --git a/src/components/home/Hero.tsx b/src/components/home/Hero.tsx
index 0e241f5..589ca5d 100644
--- a/src/components/home/Hero.tsx
+++ b/src/components/home/Hero.tsx
@@ -116,7 +116,7 @@ export function Hero() {
Express Services
-