fix hero section layout in homepage
This commit is contained in:
@@ -1,5 +1,4 @@
|
||||
import React from "react";
|
||||
import Image from "next/image";
|
||||
import { MaterialIcon } from "@/components/ui/MaterialIcon";
|
||||
import { ContactForm } from "@/components/contact/ContactForm";
|
||||
import type { Metadata } from "next";
|
||||
@@ -11,10 +10,9 @@ export const metadata: Metadata = {
|
||||
|
||||
export default function ContactPage() {
|
||||
return (
|
||||
<div className="bg-[#E6D7EA] min-h-screen pt-20 md:pt-24 lg:pt-28 pb-10 md:pb-16 flex flex-col gap-4 md:gap-6 lg:gap-8">
|
||||
|
||||
{/* ─── Redesigned Hero/Contact Section ─── */}
|
||||
<div className="w-full max-w-[1560px] mx-auto px-3 sm:px-4 md:px-5 lg:px-6 xl:px-8">
|
||||
<main className="page-canvas px-3 sm:px-4 md:px-5 lg:px-6 xl:px-8 2xl:px-10 pt-20 md:pt-24 lg:pt-28 pb-4 md:pb-6 lg:pb-8">
|
||||
<div className="page-frame">
|
||||
{/* ─── Redesigned Hero/Contact Section ─── */}
|
||||
<section className="bg-brand-dark rounded-[2rem] md:rounded-[2.5rem] lg:rounded-[3rem] border border-white/10 shadow-[0_20px_50px_rgba(20,0,30,0.28)] overflow-hidden min-h-[720px] flex items-center relative px-6 py-16 md:px-10 md:py-20 lg:px-16 lg:py-24">
|
||||
{/* Subtle decorative blurred purple glow behind left content */}
|
||||
<div className="absolute left-[-10%] top-[-10%] w-[50%] h-[50%] rounded-full bg-primary/25 blur-[120px] pointer-events-none z-0" />
|
||||
@@ -23,7 +21,7 @@ export default function ContactPage() {
|
||||
<div className="grid grid-cols-1 lg:grid-cols-[1fr_0.9fr] items-center gap-10 lg:gap-16">
|
||||
|
||||
{/* Left Column — MUST BE VISIBLE */}
|
||||
<div className="relative z-10 text-white max-w-[580px]">
|
||||
<div className="relative z-10 text-white max-w-[580px] text-left">
|
||||
<span className="text-brand-accent uppercase tracking-[0.18em] font-bold text-xs block">
|
||||
LET’S CONNECT
|
||||
</span>
|
||||
@@ -79,99 +77,97 @@ export default function ContactPage() {
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
{/* ─── Four Contact Info Cards ─── */}
|
||||
<div className="w-full max-w-[1560px] mx-auto px-3 sm:px-4 md:px-5 lg:px-6 xl:px-8">
|
||||
<div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4">
|
||||
|
||||
{/* Card 1: Location */}
|
||||
<div className="bg-white rounded-[1.5rem] md:rounded-[2rem] p-7 border border-white/50 flex flex-col items-center text-center shadow-lg">
|
||||
<div className="w-14 h-14 rounded-2xl bg-primary/5 text-primary flex items-center justify-center mb-5">
|
||||
<MaterialIcon icon="location_on" size={28} className="text-primary" />
|
||||
</div>
|
||||
<h3 className="font-display text-lg font-black text-brand-dark mb-2">Our Location</h3>
|
||||
<p className="text-body-sm text-on-surface-variant leading-relaxed">
|
||||
Nearle HQ, 424, Diwan Bahadur Rd,<br />
|
||||
Opposite To Sri Krishna Sweets, R.S. Puram,<br />
|
||||
Coimbatore, Tamil Nadu 641002
|
||||
</p>
|
||||
<a
|
||||
href="https://maps.google.com/?q=424,+Diwan+Bahadur+Rd,+Opposite+To+Sri+Krishna+Sweets,+R.S.+Puram,+Coimbatore,+Tamil+Nadu+641002"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="mt-auto pt-4 text-label-sm text-primary hover:text-primary-container font-black flex items-center gap-1 group"
|
||||
>
|
||||
Get Directions
|
||||
<MaterialIcon icon="arrow_forward" size={14} className="group-hover:translate-x-1 transition-transform" />
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{/* Card 2: Phones */}
|
||||
<div className="bg-white rounded-[1.5rem] md:rounded-[2rem] p-7 border border-white/50 flex flex-col items-center text-center shadow-lg">
|
||||
<div className="w-14 h-14 rounded-2xl bg-secondary/5 text-secondary flex items-center justify-center mb-5">
|
||||
<MaterialIcon icon="call" size={28} className="text-secondary" />
|
||||
</div>
|
||||
<h3 className="font-display text-lg font-black text-brand-dark mb-2">Phones</h3>
|
||||
<p className="text-body-sm text-on-surface-variant leading-relaxed flex flex-col gap-1">
|
||||
<span>+91 80 4912 3456</span>
|
||||
<span>+91 422 491 2345</span>
|
||||
</p>
|
||||
<div className="mt-auto pt-4 flex gap-4">
|
||||
{/* ─── Four Contact Info Cards ─── */}
|
||||
<section className="bg-[#FAF8FC] rounded-[1.5rem] md:rounded-[2rem] border border-white/50 overflow-hidden py-12 px-6 md:px-12">
|
||||
<div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4">
|
||||
|
||||
{/* Card 1: Location */}
|
||||
<div className="bg-white rounded-[1.5rem] md:rounded-[2rem] p-7 border border-white/50 flex flex-col items-center text-center shadow-lg">
|
||||
<div className="w-14 h-14 rounded-2xl bg-primary/5 text-primary flex items-center justify-center mb-5">
|
||||
<MaterialIcon icon="location_on" size={28} className="text-primary" />
|
||||
</div>
|
||||
<h3 className="font-display text-lg font-black text-brand-dark mb-2">Our Location</h3>
|
||||
<p className="text-body-sm text-on-surface-variant leading-relaxed">
|
||||
Nearle HQ, 424, Diwan Bahadur Rd,<br />
|
||||
Opposite To Sri Krishna Sweets, R.S. Puram,<br />
|
||||
Coimbatore, Tamil Nadu 641002
|
||||
</p>
|
||||
<a
|
||||
href="tel:+918049123456"
|
||||
className="text-label-sm text-secondary hover:text-on-secondary-container font-black flex items-center gap-1 group"
|
||||
href="https://maps.google.com/?q=424,+Diwan+Bahadur+Rd,+Opposite+To+Sri+Krishna+Sweets,+R.S.+Puram,+Coimbatore,+Tamil+Nadu+641002"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="mt-auto pt-4 text-label-sm text-primary hover:text-primary-container font-black flex items-center gap-1 group"
|
||||
>
|
||||
Helpdesk
|
||||
<MaterialIcon icon="phone" size={14} className="group-hover:scale-110 transition-transform" />
|
||||
Get Directions
|
||||
<MaterialIcon icon="arrow_forward" size={14} className="group-hover:translate-x-1 transition-transform" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Card 3: Email */}
|
||||
<div className="bg-white rounded-[1.5rem] md:rounded-[2rem] p-7 border border-white/50 flex flex-col items-center text-center shadow-lg">
|
||||
<div className="w-14 h-14 rounded-2xl bg-primary/5 text-primary flex items-center justify-center mb-5">
|
||||
<MaterialIcon icon="mail" size={28} className="text-primary" />
|
||||
{/* Card 2: Phones */}
|
||||
<div className="bg-white rounded-[1.5rem] md:rounded-[2rem] p-7 border border-white/50 flex flex-col items-center text-center shadow-lg">
|
||||
<div className="w-14 h-14 rounded-2xl bg-secondary/5 text-secondary flex items-center justify-center mb-5">
|
||||
<MaterialIcon icon="call" size={28} className="text-secondary" />
|
||||
</div>
|
||||
<h3 className="font-display text-lg font-black text-brand-dark mb-2">Phones</h3>
|
||||
<p className="text-body-sm text-on-surface-variant leading-relaxed flex flex-col gap-1">
|
||||
<span>+91 80 4912 3456</span>
|
||||
<span>+91 422 491 2345</span>
|
||||
</p>
|
||||
<div className="mt-auto pt-4 flex gap-4">
|
||||
<a
|
||||
href="tel:+918049123456"
|
||||
className="text-label-sm text-secondary hover:text-on-secondary-container font-black flex items-center gap-1 group"
|
||||
>
|
||||
Helpdesk
|
||||
<MaterialIcon icon="phone" size={14} className="group-hover:scale-110 transition-transform" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<h3 className="font-display text-lg font-black text-brand-dark mb-2">Email Us</h3>
|
||||
<p className="text-body-sm text-on-surface-variant leading-relaxed flex flex-col gap-1">
|
||||
<a href="mailto:support@nearle.in" className="hover:text-primary transition-colors">support@nearle.in</a>
|
||||
<a href="mailto:partners@nearle.in" className="hover:text-primary transition-colors">partners@nearle.in</a>
|
||||
</p>
|
||||
<a
|
||||
href="mailto:support@nearle.in"
|
||||
className="mt-auto pt-4 text-label-sm text-primary hover:text-primary-container font-black flex items-center gap-1 group"
|
||||
>
|
||||
Write to us
|
||||
<MaterialIcon icon="drafts" size={14} className="group-hover:-translate-y-0.5 transition-transform" />
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{/* Card 4: Working Hours */}
|
||||
<div className="bg-white rounded-[1.5rem] md:rounded-[2rem] p-7 border border-white/50 flex flex-col items-center text-center shadow-lg">
|
||||
<div className="w-14 h-14 rounded-2xl bg-brand-accent/10 text-brand-accent flex items-center justify-center mb-5">
|
||||
<MaterialIcon icon="schedule" size={28} className="text-brand-accent" />
|
||||
{/* Card 3: Email */}
|
||||
<div className="bg-white rounded-[1.5rem] md:rounded-[2rem] p-7 border border-white/50 flex flex-col items-center text-center shadow-lg">
|
||||
<div className="w-14 h-14 rounded-2xl bg-primary/5 text-primary flex items-center justify-center mb-5">
|
||||
<MaterialIcon icon="mail" size={28} className="text-primary" />
|
||||
</div>
|
||||
<h3 className="font-display text-lg font-black text-brand-dark mb-2">Email Us</h3>
|
||||
<p className="text-body-sm text-on-surface-variant leading-relaxed flex flex-col gap-1">
|
||||
<a href="mailto:support@nearle.in" className="hover:text-primary transition-colors">support@nearle.in</a>
|
||||
<a href="mailto:partners@nearle.in" className="hover:text-primary transition-colors">partners@nearle.in</a>
|
||||
</p>
|
||||
<a
|
||||
href="mailto:support@nearle.in"
|
||||
className="mt-auto pt-4 text-label-sm text-primary hover:text-primary-container font-black flex items-center gap-1 group"
|
||||
>
|
||||
Write to us
|
||||
<MaterialIcon icon="drafts" size={14} className="group-hover:-translate-y-0.5 transition-transform" />
|
||||
</a>
|
||||
</div>
|
||||
<h3 className="font-display text-lg font-black text-brand-dark mb-2">Working Hours</h3>
|
||||
<p className="text-body-sm text-on-surface-variant leading-relaxed">
|
||||
Monday - Saturday<br />
|
||||
9:00 AM - 6:00 PM<br />
|
||||
<span className="font-bold text-secondary">24/7 Phone Helpdesk</span>
|
||||
</p>
|
||||
<div className="mt-auto pt-4">
|
||||
<span className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-[10px] font-black tracking-wider uppercase bg-secondary/10 text-secondary">
|
||||
<span className="w-2 h-2 rounded-full bg-secondary animate-pulse" />
|
||||
Helpdesk Active
|
||||
</span>
|
||||
|
||||
{/* Card 4: Working Hours */}
|
||||
<div className="bg-white rounded-[1.5rem] md:rounded-[2rem] p-7 border border-white/50 flex flex-col items-center text-center shadow-lg">
|
||||
<div className="w-14 h-14 rounded-2xl bg-brand-accent/10 text-brand-accent flex items-center justify-center mb-5">
|
||||
<MaterialIcon icon="schedule" size={28} className="text-brand-accent" />
|
||||
</div>
|
||||
<h3 className="font-display text-lg font-black text-brand-dark mb-2">Working Hours</h3>
|
||||
<p className="text-body-sm text-on-surface-variant leading-relaxed">
|
||||
Monday - Saturday<br />
|
||||
9:00 AM - 6:00 PM<br />
|
||||
<span className="font-bold text-secondary">24/7 Phone Helpdesk</span>
|
||||
</p>
|
||||
<div className="mt-auto pt-4">
|
||||
<span className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-[10px] font-black tracking-wider uppercase bg-secondary/10 text-secondary">
|
||||
<span className="w-2 h-2 rounded-full bg-secondary animate-pulse" />
|
||||
Helpdesk Active
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* ─── Map Section ─── */}
|
||||
<div className="w-full max-w-[1560px] mx-auto px-3 sm:px-4 md:px-5 lg:px-6 xl:px-8">
|
||||
<section className="bg-white rounded-[1.5rem] md:rounded-[2rem] border border-white/50 overflow-hidden p-6 md:p-8 shadow-lg">
|
||||
{/* ─── Map Section ─── */}
|
||||
<section className="bg-[#FAF8FC] rounded-[1.5rem] md:rounded-[2rem] border border-white/50 overflow-hidden p-6 md:p-8">
|
||||
<div className="relative w-full h-[450px]">
|
||||
<iframe
|
||||
title="Nearle Coimbatore Location Map"
|
||||
@@ -197,7 +193,6 @@ export default function ContactPage() {
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user