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

all hero section add image

Browse Source
This commit is contained in:
Aravind
2026-06-30 16:59:52 +05:30
parent 545a6097eb
commit 61ab517a21
15 changed files with 494 additions and 420 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
src/components/heroes/ContactHero.tsx
View File

@@ -1,5 +1,6 @@
"use client";
import Image from "next/image";
import { motion } from "framer-motion";
import { MaterialIcon } from "@/components/ui/MaterialIcon";
import { ContactForm } from "@/components/contact/ContactForm";
@@ -52,10 +53,21 @@ const infoStagger = {
export function ContactHero() {
return (
<section className="relative border-b border-[#6330D6]/10 px-4 py-10 md:px-6 md:py-12 lg:px-8 lg:py-14 xl:px-10 xl:py-16 2xl:px-12 2xl:py-20">
<section className="relative overflow-hidden border-b border-[#6330D6]/10 bg-[#FAF8FC] px-4 py-10 md:px-6 md:py-12 lg:px-8 lg:py-14 xl:px-10 xl:py-16 2xl:px-12 2xl:py-20">
<Image
src="/contact page1.png"
alt=""
fill
sizes="100vw"
className="absolute inset-0 z-0 h-full w-full object-cover object-[62%_center] md:object-center"
priority
aria-hidden="true"
/>
<div className="absolute inset-0 z-[1] bg-[linear-gradient(180deg,rgba(250,248,252,0.97)_0%,rgba(250,248,252,0.92)_42%,rgba(250,248,252,0.76)_100%)] md:bg-[linear-gradient(90deg,rgba(250,248,252,0.96)_0%,rgba(250,248,252,0.88)_42%,rgba(250,248,252,0.58)_72%,rgba(250,248,252,0.32)_100%)]" />
<div className="absolute inset-0 z-[1] bg-[linear-gradient(180deg,rgba(255,255,255,0.08)_0%,rgba(255,255,255,0)_58%,rgba(255,255,255,0.72)_100%)]" />
{/* Decorative map grid — not animated so it stays subtle */}
<div className="absolute left-[5%] top-[10%] w-[400px] h-[300px] opacity-[0.04] select-none pointer-events-none -z-10">
<div className="absolute left-[5%] top-[10%] w-[400px] h-[300px] opacity-[0.04] select-none pointer-events-none z-[2]">
<svg className="w-full h-full text-[#6330D6]" stroke="currentColor" fill="none" strokeWidth="1.5" viewBox="0 0 400 300">
<path d="M0,50 L400,50 M0,130 L400,130 M0,210 L400,210 M80,0 L80,300 M200,0 L200,300 M320,0 L320,300" />
<path d="M 80,130 C 120,90 160,170 200,130 C 240,90 280,170 320,130" strokeDasharray="3,3" />
@@ -66,12 +78,12 @@ export function ContactHero() {
</svg>
</div>
<div className="relative z-10 mx-auto w-full max-w-[1520px]">
<div className="relative z-[3] mx-auto w-full max-w-[1520px]">
<div className="grid grid-cols-1 items-start gap-10 lg:grid-cols-[1.2fr_0.8fr] lg:gap-12 xl:gap-16">
{/* Left Column — Contact Info: sequential stagger from top */}
<motion.div
className="w-full max-w-[760px] py-6 md:py-8 lg:py-10 relative z-10 text-[#16001D]"
className="flex flex-col items-center text-center w-full max-w-[760px] py-6 md:py-8 lg:py-10 relative z-10 text-[#16001D]"
variants={staggerContainer}
initial="hidden"
animate="visible"
@@ -93,14 +105,14 @@ export function ContactHero() {
<motion.p
variants={fadeUp}
className="mt-6 max-w-[620px] text-sm font-bold leading-8 text-[#5E5866] md:text-base xl:text-lg"
className="mt-6 max-w-[620px] text-sm font-bold leading-8 text-[#16001D] md:text-base xl:text-lg [text-shadow:0_1px_2px_rgba(255,255,255,0.55)]"
>
Whether you are a customer, local store owner, or delivery partner, our team is here to help you get started with Nearle.
</motion.p>
{/* Info rows: each row staggers in from left */}
<motion.div
className="mt-8 border-t border-[#6330D6]/10"
className="mt-8 border-t border-[#6330D6]/10 w-full"
variants={infoStagger}
initial="hidden"
animate="visible"