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

animation fixed in section

Browse Source
This commit is contained in:
Aravind
2026-06-29 16:52:46 +05:30
parent 9449accea6
commit 114b49570b
36 changed files with 2308 additions and 1301 deletions
Download Patch File Download Diff File Expand all files Collapse all files

93
src/app/contact/page.tsx
View File

@@ -1,7 +1,8 @@
import React from "react";
import { MaterialIcon } from "@/components/ui/MaterialIcon";
import { ContactForm } from "@/components/contact/ContactForm";
import { PremiumPageShell } from "@/components/layout/PremiumPageShell";
import { ContactHero } from "@/components/heroes/ContactHero";
import { AnimatedSection } from "@/components/motion/AnimatedSection";
import type { Metadata } from "next";
export const metadata: Metadata = {
@@ -13,95 +14,10 @@ export default function ContactPage() {
return (
<PremiumPageShell>
{/* ─── Contact Section ─── */}
<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">
{/* Subtle Map Grid/Location decoration behind left content */}
<div className="absolute left-[5%] top-[10%] w-[400px] h-[300px] opacity-[0.04] select-none pointer-events-none -z-10">
<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" />
<circle cx="200" cy="130" r="4" fill="currentColor" />
<circle cx="200" cy="130" r="14" strokeWidth="1" />
<circle cx="80" cy="50" r="3" fill="currentColor" />
<circle cx="320" cy="210" r="3" fill="currentColor" />
</svg>
</div>
{/* <div className="w-full mx-auto relative z-10"> */}
<div className="relative z-10 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 */}
<div className="w-full max-w-[760px] py-6 md:py-8 lg:py-10 relative z-10 text-[#16001D]">
<span className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-black tracking-widest bg-[#6330D6]/10 text-[#6330D6] uppercase mb-6 w-fit">
Contact Us
</span>
<h1 className="font-display text-4xl font-black leading-[1.05] text-[#16001D] md:text-5xl lg:text-[58px] xl:text-[64px] 2xl:text-[70px]">
We’re Here to <br />
<span className="text-[#6330D6]">Help You.</span>
</h1>
<p className="mt-6 max-w-[620px] text-sm font-bold leading-8 text-[#5E5866] md:text-base xl:text-lg">
Whether you are a customer, local store owner, or delivery partner, our team is here to help you get started with Nearle.
</p>
{/* Info Rows */}
<div className="mt-8 border-t border-[#6330D6]/10">
{/* Call Us */}
<div className="flex gap-4 py-4.5 border-b border-[#6330D6]/10 items-center">
<div className="w-10 h-10 rounded-full bg-[#6330D6]/10 text-[#6330D6] flex items-center justify-center shrink-0">
<MaterialIcon icon="phone" size={18} />
</div>
<div className="text-left">
<h4 className="text-[#16001D] text-sm font-black">Call Us</h4>
<p className="text-[#5E5866] text-sm font-semibold mt-0.5">+91 909 206 8666</p>
</div>
</div>
{/* Email Us */}
<div className="flex gap-4 py-4.5 border-b border-[#6330D6]/10 items-center">
<div className="w-10 h-10 rounded-full bg-[#6330D6]/10 text-[#6330D6] flex items-center justify-center shrink-0">
<MaterialIcon icon="mail" size={18} />
</div>
<div className="text-left">
<h4 className="text-[#16001D] text-sm font-black">Email Us</h4>
<p className="text-[#5E5866] text-sm font-semibold mt-0.5">nearle@care.in</p>
</div>
</div>
{/* Visit Us */}
<div className="flex gap-4 py-4.5 border-b border-[#6330D6]/10 items-center">
<div className="w-10 h-10 rounded-full bg-[#6330D6]/10 text-[#6330D6] flex items-center justify-center shrink-0">
<MaterialIcon icon="location_on" size={18} />
</div>
<div className="text-left">
<h4 className="text-[#16001D] text-sm font-black">Address </h4>
<p className="text-[#5E5866] text-sm font-semibold mt-0.5">424, DB Rd, R.S. Puram, Coimbatore, TN 641002</p>
</div>
</div>
{/* Helpdesk */}
{/* <div className="flex gap-4 py-4.5 border-b border-[#6330D6]/10 items-center">
<div className="w-10 h-10 rounded-full bg-[#6330D6]/10 text-[#6330D6] flex items-center justify-center shrink-0">
<MaterialIcon icon="support_agent" size={18} />
</div>
<div className="text-left">
<h4 className="text-[#16001D] text-sm font-black">Helpdesk</h4>
<p className="text-[#5E5866] text-sm font-semibold mt-0.5">24/7 Phone Helpdesk Active</p>
</div>
</div> */}
</div>
</div>
{/* Right Column: Compact Form Card */}
<div className="w-full max-w-[660px] justify-self-end pt-10 lg:pt-14 xl:pt-26">
<ContactForm />
</div>
</div>
</div>
</section>
<ContactHero />
{/* ─── Map Section ─── */}
<AnimatedSection>
<section className="bg-[#FAF7FD] px-4 py-8 md:px-6 lg:px-8 xl:px-10 2xl:px-12">
<div className="mx-auto w-full ">
<div className="relative h-[420px] overflow-hidden rounded-2xl border border-[#6330D6]/10 shadow-[0_4px_24px_rgba(99,48,214,0.02)]">
@@ -129,6 +45,7 @@ export default function ContactPage() {
</div>
</div>
</section>
</AnimatedSection>
</PremiumPageShell>
);
}