hero section content

2026-06-22 19:28:43 +05:30
parent bbbc6cb067
commit 1b9ceb4a52
14 changed files with 241 additions and 323 deletions
--- a/src/app/about/page.tsx
+++ b/src/app/about/page.tsx
@@ -69,7 +69,7 @@ export default function AboutPage() {
    <div className="relative min-h-screen bg-background">
      
      {/* ─── Hero Section ─── */}
-      <section className="relative overflow-hidden bg-brand-dark px-margin-mobile md:px-margin-desktop pt-24 pb-32 text-center">
+      <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%)]" />

@@ -87,7 +87,7 @@ export default function AboutPage() {
      </section>

      {/* ─── Intro Description Block ─── */}
-      <section className="relative z-20 -mt-16 mx-auto max-w-container-max px-margin-mobile md:px-margin-desktop">
+      <section className="relative z-20 -mt-20 mx-auto max-w-container-max px-6 md:px-12 lg:px-20 xl:px-24">
        <div className="bg-white rounded-3xl p-8 md:p-12 border border-outline-variant/15 shadow-xl text-center">
          <span className="text-label-sm font-black text-primary uppercase tracking-widest">
            Our Platform
@@ -102,7 +102,7 @@ export default function AboutPage() {
      </section>

      {/* ─── Strategy Cards (Mission, Vision, Why) ─── */}
-      <section className="mx-auto max-w-container-max px-margin-mobile md:px-margin-desktop py-24">
+      <section className="mx-auto max-w-container-max px-6 md:px-12 lg:px-20 xl:px-24 py-28">
        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
          {STRATEGY_CARDS.map((card) => (
            <div
@@ -124,8 +124,8 @@ export default function AboutPage() {
      </section>

      {/* ─── Global Stats counters ─── */}
-      <section className="bg-surface-container-low border-y border-outline-variant/15 py-16">
-        <div className="mx-auto max-w-container-max px-margin-mobile md:px-margin-desktop">
+      <section className="bg-surface-container-low border-y border-outline-variant/15 py-24">
+        <div className="mx-auto max-w-container-max px-6 md:px-12 lg:px-20 xl:px-24">
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            {COUNTERS.map((c) => (
              <div key={c.label} className="flex flex-col items-center text-center">
@@ -143,7 +143,7 @@ export default function AboutPage() {
      </section>

      {/* ─── Team Section ─── */}
-      <section className="mx-auto max-w-container-max px-margin-mobile md:px-margin-desktop py-24">
+      <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 */}
@@ -193,7 +193,7 @@ export default function AboutPage() {
      </section>

      {/* ─── Client Testimonial & Quote ─── */}
-      <section className="bg-brand-dark px-margin-mobile md:px-margin-desktop py-24 text-center text-white">
+      <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;
@@ -219,7 +219,7 @@ export default function AboutPage() {
      </section>

      {/* ─── Brand Building Banner ─── */}
-      <section className="mx-auto max-w-container-max px-margin-mobile md:px-margin-desktop py-24 text-center">
+      <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">
          <span className="text-label-sm font-black text-secondary uppercase tracking-widest">
            Don&apos;t miss the opportunity
--- a/src/app/businesses/page.tsx
+++ b/src/app/businesses/page.tsx
@@ -7,7 +7,7 @@ import { MaterialIcon } from "@/components/ui/MaterialIcon";

 const ROTATOR_WORDS = [
  "Stand above your competitors!",
-  "Reach the right people, near you.",
+  // "Reach the right people, near you.",
  "Get noticed in your locality!"
 ];

@@ -90,9 +90,19 @@ export default function BusinessesPage() {
  return (
    <div className="relative min-h-screen bg-background">
      {/* ─── Hero Section with Animated Rotator ─── */}
-      <section className="relative overflow-hidden bg-brand-dark px-margin-mobile md:px-margin-desktop pt-24 pb-32 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_75%_75%,rgba(0,109,55,0.15),transparent_40%)]" />
+      <section className="relative overflow-hidden px-6 md:px-12 lg:px-20 xl:px-24 pt-44 pb-48 text-center">
+        {/* Background Image with Overlay */}
+        <div className="absolute inset-0 z-0 select-none pointer-events-none">
+          <Image
+            src="/Nearle Business.png"
+            alt="Nearle Business 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">
@@ -107,46 +117,11 @@ export default function BusinessesPage() {
            </span>
          </h1>

-          <p className="mx-auto mt-6 max-w-2xl text-body-lg text-white/70">
-            India&apos;s #1 Neighborhood Commerce App. Join the futuristic community lifestyle living and move your business forward.
-          </p>
-
-          {/* App Download Links */}
-          <div className="mt-10 flex flex-wrap justify-center gap-4">
-            <a
-              href="https://apps.apple.com/us/app/nearle/id1596895375"
-              target="_blank"
-              rel="noopener noreferrer"
-              className="h-14 w-44 rounded-xl border border-white/20 hover:bg-white/10 transition-colors p-1 flex items-center justify-center bg-white/5 backdrop-blur-md"
-            >
-              <div className="flex items-center gap-3 text-white text-left">
-                <MaterialIcon icon="phone_iphone" size={24} className="text-brand-accent" />
-                <div>
-                  <div className="text-[10px] uppercase font-bold text-white/60">Download on the</div>
-                  <div className="text-sm font-black">App Store</div>
-                </div>
-              </div>
-            </a>
-            <a
-              href="https://play.google.com/store/apps/details?id=com.nearle.gear"
-              target="_blank"
-              rel="noopener noreferrer"
-              className="h-14 w-44 rounded-xl border border-white/20 hover:bg-white/10 transition-colors p-1 flex items-center justify-center bg-white/5 backdrop-blur-md"
-            >
-              <div className="flex items-center gap-3 text-white text-left">
-                <MaterialIcon icon="play_arrow" size={24} className="text-brand-accent" />
-                <div>
-                  <div className="text-[10px] uppercase font-bold text-white/60">Get it on</div>
-                  <div className="text-sm font-black">Google Play</div>
-                </div>
-              </div>
-            </a>
-          </div>
        </div>
      </section>

      {/* ─── Intro Highlight Banner ─── */}
-      <section className="relative z-20 -mt-16 mx-auto max-w-container-max px-margin-mobile md:px-margin-desktop">
+      <section className="relative z-20 -mt-20 mx-auto max-w-container-max px-6 md:px-12 lg:px-20 xl:px-24">
        <div className="bg-white rounded-3xl p-8 md:p-12 border border-outline-variant/15 shadow-xl flex flex-col lg:flex-row justify-between items-center gap-8">
          <div className="max-w-2xl">
            <span className="text-label-sm font-black text-secondary uppercase tracking-widest">
@@ -172,7 +147,7 @@ export default function BusinessesPage() {
      </section>

      {/* ─── Timeline / Core Process Steps ─── */}
-      <section className="mx-auto max-w-container-max px-margin-mobile md:px-margin-desktop py-24">
+      <section className="mx-auto max-w-container-max px-6 md:px-12 lg:px-20 xl:px-24 py-24">
        <div className="text-center mb-16">
          <span className="text-label-sm font-black text-primary uppercase tracking-widest">
            How it works
@@ -210,7 +185,7 @@ export default function BusinessesPage() {

      {/* ─── Grid Stats & Value Prop ─── */}
      <section className="bg-surface-container-low border-y border-outline-variant/15 py-24">
-        <div className="mx-auto max-w-container-max px-margin-mobile md:px-margin-desktop">
+        <div className="mx-auto max-w-container-max px-6 md:px-12 lg:px-20 xl:px-24">
          <div className="grid lg:grid-cols-12 gap-16 items-center">
            
            {/* Left side: features block (7 cols) */}
@@ -277,9 +252,9 @@ export default function BusinessesPage() {
      </section>

      {/* ─── Join/Download Call to Action ─── */}
-      <section className="mx-auto max-w-container-max px-margin-mobile md:px-margin-desktop py-24 text-center">
+      <section className="mx-auto max-w-container-max px-6 md:px-12 lg:px-20 xl:px-24 py-24 text-center">
        <div className="bg-primary rounded-[2.5rem] p-12 md:p-20 relative overflow-hidden shadow-2xl">
-          <div className="absolute inset-0 bg-[radial-gradient(circle_at_70%_20%,rgba(252,163,17,0.18),transparent_50%)] animate-pulse-subtle" />
+          <div className="absolute inset-0 bg-[radial-gradient(circle_at_70%_20%,rgba(203,157,248,0.18),transparent_50%)] animate-pulse-subtle" />
          <div className="relative z-10 max-w-2xl mx-auto text-on-primary">
            <h2 className="font-display text-3xl md:text-5xl font-black mb-6 tracking-tight">
              Nearle is Essential for Business Growth
--- a/src/app/contact/page.tsx
+++ b/src/app/contact/page.tsx
@@ -97,10 +97,10 @@ export default function ContactPage() {
  return (
    <div className="relative min-h-screen bg-background">
      {/* ─── Breadcrumbs & Hero Page Header ─── */}
-      <section className="relative overflow-hidden bg-brand-dark px-margin-mobile md:px-margin-desktop pt-20 pb-24 text-center">
+      <section className="relative overflow-hidden bg-brand-dark px-6 md:px-12 lg:px-20 xl:px-24 pt-36 pb-40 text-center">
        {/* Background Decorative Gradients */}
        <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%_80%,rgba(252,163,17,0.08),transparent_50%)]" />
+        <div className="absolute inset-0 bg-[radial-gradient(circle_at_70%_80%,rgba(203,157,248,0.12),transparent_50%)]" />

        <div className="relative z-10 mx-auto max-w-container-max">
          {/* Breadcrumbs */}
@@ -137,7 +137,7 @@ export default function ContactPage() {
      </section>

      {/* ─── Four Contact Info Cards ─── */}
-      <section className="relative z-20 mx-auto -mt-10 max-w-container-max px-margin-mobile md:px-margin-desktop">
+      <section className="relative z-20 mx-auto -mt-16 max-w-container-max px-6 md:px-12 lg:px-20 xl:px-24">
        <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4">
          
          {/* Card 1: Location */}
@@ -225,7 +225,7 @@ export default function ContactPage() {
      </section>

      {/* ─── Map & Form Section ─── */}
-      <section className="mx-auto max-w-container-max px-margin-mobile md:px-margin-desktop py-20">
+      <section className="mx-auto max-w-container-max px-6 md:px-12 lg:px-20 xl:px-24 py-24">
        <div className="grid grid-cols-1 lg:grid-cols-12 gap-12 items-start">
          
          {/* Left: Google Map (5 Cols) */}
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -2,9 +2,9 @@

 /* ─── Design Tokens (Material Design 3 inspired) ─── */
 :root {
-  --surface: #f9f9fc;
+  --surface: #E7D3EF;
  --surface-dim: #dadadc;
-  --surface-bright: #f9f9fc;
+  --surface-bright: #E7D3EF;
  --surface-container-lowest: #ffffff;
  --surface-container-low: #f3f3f6;
  --surface-container: #eeeef0;
@@ -46,14 +46,14 @@
  --tertiary-fixed-dim: #ebc246;
  --on-tertiary-fixed: #241a00;
  --on-tertiary-fixed-variant: #584400;
-  --background: #f9f9fc;
+  --background: #E7D3EF;
  --on-background: #1a1c1e;
  --surface-variant: #e2e2e5;
  --brand-dark: #120217;
  --brand-dark-surface: #1e0627;
-  --brand-accent: #fca311;
-  --brand-accent-light: #ffe08b;
-  --brand-cream: #faf8f5;
+  --brand-accent: #e0c8f7;
+  --brand-accent-light: #E4D0FC;
+  --brand-cream: #E7D3EF;
 }

 /* ─── Tailwind v4 Theme ─── */
@@ -327,11 +327,13 @@ body {
 }

 /* Hero-only clipped background layers */
-@media (min-width: 768px) {
+@media (min-width: 1024px) {
  .hero {
    position: relative;
-    min-height: 785px;
-    overflow: hidden;
+    margin-top: 0;
+    min-height: 500px;
+    overflow: visible;
+    padding-bottom: 100px;
    background:
      radial-gradient(circle at 62% 48%, rgba(108, 14, 128, 0.7), transparent 36%),
      radial-gradient(circle at 25% 38%, rgba(55, 0, 74, 0.62), transparent 34%),
@@ -358,13 +360,17 @@ body {
    z-index: 2;
  }

+  /* Right column occupies exactly 52% of width to ensure diagonal doesn't clip */
  .hero-visual-layer {
    position: absolute;
    z-index: 2;
    top: 0;
    right: 0;
-    bottom: 110px;
-    width: min(50vw, 820px);
+    bottom: 0;
+    width: 52%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
    pointer-events: none;
    filter: none;
    overflow: hidden;
@@ -374,20 +380,17 @@ body {
  .hero-visual-panel {
    position: absolute;
    inset: 0;
-    background: #ffffff;
-    clip-path: polygon(42% 0, 100% 0, 100% 100%, 0 100%);
+    background: #E7D3EF;
+    clip-path: polygon(33% 0, 100% 0, 100% 100%, 0 100%);
    z-index: 0;
  }

  .hero-visual-image {
-    position: absolute;
+    position: relative;
    z-index: 1;
-    right: clamp(48px, 5vw, 96px);
-    bottom: clamp(26px, 4vw, 60px);
-    width: min(78%, 600px);
-    max-width: 600px;
-    max-height: calc(100% - 80px);
-    aspect-ratio: 455 / 374;
+    width: 60%;
+    height: 60%;
+    left: 10%; /* Shift logo right to account for diagonal clip path visually */
    transform-origin: center;
  }

@@ -413,10 +416,12 @@ body {
    opacity: 0.8;
  }

+  /* Left column occupies exactly 46% of width to avoid diagonal overlap */
  .hero-content {
    position: relative;
    z-index: 3;
-    width: min(610px, 48vw);
+    width: 46%;
+    max-width: 46%;
    padding-top: 94px;
    animation: hero-copy-enter 760ms cubic-bezier(0.16, 1, 0.3, 1) both;
  }
@@ -424,47 +429,25 @@ body {
  .hero-stage {
    padding-left: clamp(72px, 7.5vw, 150px);
    padding-right: clamp(32px, 4vw, 80px);
-    min-height: 740px;
+    min-height: 600px;
  }

-  .hero-cards {
+  .service-cards-wrapper {
    position: relative;
-    z-index: 5;
-    transform: translateY(-50%);
-    padding-left: clamp(72px, 7.5vw, 150px);
-    padding-right: clamp(72px, 7.5vw, 150px);
-    margin-bottom: -45px;
+    z-index: 10;
+    margin-top: -85px;
+    padding-left: var(--spacing-margin-desktop);
+    padding-right: var(--spacing-margin-desktop);
  }
 }

-@media (min-width: 768px) and (max-width: 1099px) {
-  .hero {
-    min-height: 720px;
-  }
-
-  .hero-visual-layer {
-    width: min(52vw, 560px);
-    bottom: 128px;
-  }
-
-  .hero-visual-image {
-    right: -8px;
-    bottom: 52px;
-    width: min(86%, 460px);
-    opacity: 0.92;
-  }
-
-  .hero-content {
-    width: min(440px, 58vw);
-  }
-}
-
-@media (max-width: 767px) {
+@media (max-width: 1023px) {
  .hero {
    position: relative;
+    margin-top: 0;
    background: #120018;
-    padding-bottom: 48px;
-    overflow: hidden;
+    padding-bottom: 110px;
+    overflow: visible;
  }

  .hero-dark-panel {
@@ -502,42 +485,14 @@ body {
  }

  .hero-visual-layer {
-    position: relative;
-    z-index: 2;
-    width: 95%;
-    max-width: 450px;
-    aspect-ratio: 1080 / 867;
-    margin: 20px auto 0 auto;
-    pointer-events: none;
-    filter: none;
-    overflow: hidden;
+    display: none;
  }

-  .hero-visual-panel {
-    position: absolute;
-    inset: 0;
-    background: #ffffff;
-    clip-path: polygon(44% 0, 100% 0, 100% 100%, 14% 100%);
-    z-index: 0;
-  }
-
-  .hero-visual-image {
-    position: absolute;
-    z-index: 1;
-    inset: 12% 6% 12% 20%;
-    max-width: 100%;
-    max-height: 100%;
-    transform-origin: center;
-  }
-
-  .hero-visual-image img {
-    object-fit: contain;
-  }
-
-  .hero-cards {
+  .service-cards-wrapper {
    position: relative;
    z-index: 20;
-    margin-top: 40px;
+    margin-top: -48px;
+    overflow-x: auto;
    padding-left: var(--spacing-margin-mobile);
    padding-right: var(--spacing-margin-mobile);
  }
@@ -593,3 +548,4 @@ body {
    transform: translate3d(18px, -8px, 0) scale(1.03);
  }
 }
+
--- a/src/app/people/page.tsx
+++ b/src/app/people/page.tsx
@@ -97,9 +97,9 @@ export default function PeoplePage() {
    <div className="relative min-h-screen bg-background">
      
      {/* ─── Hero Section ─── */}
-      <section className="relative overflow-hidden bg-brand-dark px-margin-mobile md:px-margin-desktop pt-24 pb-32 text-center">
+      <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_25%_25%,rgba(108,14,128,0.25),transparent_40%)]" />
-        <div className="absolute inset-0 bg-[radial-gradient(circle_at_75%_75%,rgba(252,163,17,0.1),transparent_45%)]" />
+        <div className="absolute inset-0 bg-[radial-gradient(circle_at_75%_75%,rgba(203,157,248,0.15),transparent_45%)]" />

        <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">
@@ -132,7 +132,7 @@ export default function PeoplePage() {
      </section>

      {/* ─── 9 Core Offerings Bento Grid ─── */}
-      <section className="mx-auto max-w-container-max px-margin-mobile md:px-margin-desktop py-24">
+      <section className="mx-auto max-w-container-max px-6 md:px-12 lg:px-20 xl:px-24 py-28">
        <div className="text-center mb-16">
          <span className="text-label-sm font-black text-primary uppercase tracking-widest">
            What we offer
@@ -171,8 +171,8 @@ export default function PeoplePage() {
      </section>

      {/* ─── Localized Stats Block ─── */}
-      <section className="bg-surface-container-low border-y border-outline-variant/15 py-20">
-        <div className="mx-auto max-w-container-max px-margin-mobile md:px-margin-desktop">
+      <section className="bg-surface-container-low border-y border-outline-variant/15 py-24">
+        <div className="mx-auto max-w-container-max px-6 md:px-12 lg:px-20 xl:px-24">
          <div className="text-center mb-12">
            <span className="text-label-sm font-black text-primary uppercase tracking-widest">
              Nearle Network
@@ -205,7 +205,7 @@ export default function PeoplePage() {
      </section>

      {/* ─── Ready to Download Section ─── */}
-      <section id="download-section" className="mx-auto max-w-container-max px-margin-mobile md:px-margin-desktop py-24">
+      <section id="download-section" className="mx-auto max-w-container-max px-6 md:px-12 lg:px-20 xl:px-24 py-28">
        <div className="bg-primary rounded-[2.5rem] p-10 md:p-16 relative overflow-hidden shadow-2xl">
          <div className="absolute inset-0 bg-[radial-gradient(circle_at_20%_80%,rgba(123,248,161,0.12),transparent_40%)]" />