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

update image in hero section

Browse Source
This commit is contained in:
Aravind
2026-06-23 11:45:23 +05:30
parent 1b9ceb4a52
commit 9ea89c317f
11 changed files with 1155 additions and 630 deletions
Download Patch File Download Diff File Expand all files Collapse all files

134
src/app/about/page.tsx
View File

@@ -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 (
<div className="relative min-h-screen bg-background">
{/* ─── Hero Section ─── */}
<section className="relative overflow-hidden bg-brand-dark px-6 md:px-12 lg:px-20 xl:px-24 pt-44 pb-48 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_70%_70%,rgba(0,109,55,0.15),transparent_40%)]" />
<section className="hero-section relative overflow-hidden bg-brand-dark px-6 md:px-12 lg:px-20 xl:px-24 pt-56 pb-72 text-center">
{/* Background Image with Overlay */}
<div className="absolute inset-0 z-0 select-none pointer-events-none">
<Image
src="/about.png"
alt="About Nearle 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">
@@ -142,82 +124,6 @@ export default function AboutPage() {
</div>
</section>
{/* ─── Team Section ─── */}
<section className="mx-auto max-w-container-max px-6 md:px-12 lg:px-20 xl:px-24 py-28">
<div className="grid lg:grid-cols-12 gap-16 items-center">
{/* Left: About team content */}
<div className="lg:col-span-5">
<span className="text-label-sm font-black text-primary uppercase tracking-widest">
Who we are
</span>
<h2 className="font-display text-3xl font-black text-brand-dark mt-2 mb-6">
Team Nearle
</h2>
<p className="text-body-md text-on-surface-variant mb-6 leading-relaxed">
Nearle is built on the core concept of <strong>&ldquo;Boost business by trust&rdquo;</strong>. We assist local offline stores in successfully spreading their brand message to the neighborhood to open new revenue streams.
</p>
<p className="text-body-sm text-on-surface-variant/80 mb-8 leading-relaxed">
Our team combines technology skills, domain expertise, and operational focus to ensure the highest quality solution for our customers.
</p>
<Link
href="/contact"
className="bg-primary hover:bg-primary-container text-on-primary font-black px-8 py-4 rounded-xl text-label-md hover:shadow-lg active:scale-95 transition-all inline-flex items-center gap-2"
>
<MaterialIcon icon="mail" size={18} />
<span>Contact Team</span>
</Link>
</div>
{/* Right: Team Grid cards */}
<div className="lg:col-span-7 grid grid-cols-2 sm:grid-cols-3 gap-6">
{TEAM.map((t) => (
<div
key={t.name}
className="premium-card bg-white p-6 rounded-3xl border border-outline-variant/15 shadow-sm flex flex-col items-center text-center"
>
<div className={`w-16 h-16 rounded-full flex items-center justify-center font-display text-xl font-black mb-4 ${t.color}`}>
{t.initials}
</div>
<h4 className="font-display text-sm font-black text-brand-dark mb-1">
{t.name}
</h4>
<p className="text-[11px] font-bold text-on-surface-variant/65">
{t.role}
</p>
</div>
))}
</div>
</div>
</section>
{/* ─── Client Testimonial & Quote ─── */}
<section className="bg-brand-dark px-6 md:px-12 lg:px-20 xl:px-24 py-28 text-center text-white">
<div className="mx-auto max-w-4xl relative">
<span className="absolute -top-12 left-1/2 -translate-x-1/2 text-8xl font-black text-brand-accent/10 font-display">
&ldquo;
</span>
<div className="relative z-10">
<h3 className="font-display text-xl md:text-2xl font-black text-brand-accent mb-6">
Partner Feedback
</h3>
<blockquote className="text-lg md:text-xl font-light italic leading-relaxed text-white/90 max-w-2xl mx-auto mb-8">
&ldquo;Nearle has opened up immense opportunities for us to survive the competition, sustain in business, and gain our customers back.&rdquo;
</blockquote>
<div className="flex flex-col items-center gap-2">
<div className="w-10 h-10 rounded-full bg-brand-accent text-brand-dark flex items-center justify-center font-display font-black text-xs">
DK
</div>
<div>
<p className="text-label-md font-black">Darshan K</p>
<p className="text-body-sm text-white/50">Erranderz Partner</p>
</div>
</div>
</div>
</div>
</section>
{/* ─── Brand Building Banner ─── */}
<section className="mx-auto max-w-container-max px-6 md:px-12 lg:px-20 xl:px-24 py-28 text-center">
<div className="bg-white rounded-[2.5rem] p-12 md:p-16 border border-outline-variant/15 shadow-xl max-w-4xl mx-auto">