fix hero section layout in homepage
This commit is contained in:
@@ -57,7 +57,7 @@ export function Footer() {
|
||||
const [submitSuccess, setSubmitSuccess] = useState(false);
|
||||
|
||||
const handleInputChange = (
|
||||
e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
|
||||
e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
|
||||
) => {
|
||||
const { name, value } = e.target;
|
||||
setFormData((prev) => ({
|
||||
@@ -123,10 +123,7 @@ export function Footer() {
|
||||
|
||||
const brandCol = (
|
||||
<div className="footer-brand min-w-0 self-start">
|
||||
<Link
|
||||
href="/"
|
||||
className="mb-4 inline-block"
|
||||
>
|
||||
<Link href="/" className="mb-4 inline-block">
|
||||
<Image
|
||||
src="/logo-v2.png"
|
||||
alt="Nearle"
|
||||
@@ -137,23 +134,16 @@ export function Footer() {
|
||||
/>
|
||||
</Link>
|
||||
<p className="footer-desc mb-4 text-white/80">
|
||||
India's leading hyperlocal neighborhood network, empowering communities and verified local businesses within 2km.
|
||||
India's leading hyperlocal neighborhood network, empowering
|
||||
communities and verified local businesses within 2km.
|
||||
</p>
|
||||
|
||||
{/* Social Links */}
|
||||
<div className="flex gap-4">
|
||||
<a
|
||||
href="#"
|
||||
className="footer-social-link"
|
||||
aria-label="Share"
|
||||
>
|
||||
<a href="#" className="footer-social-link" aria-label="Share">
|
||||
<MaterialIcon icon="share" size={24} />
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
className="footer-social-link"
|
||||
aria-label="Website"
|
||||
>
|
||||
<a href="#" className="footer-social-link" aria-label="Website">
|
||||
<MaterialIcon icon="public" size={24} />
|
||||
</a>
|
||||
</div>
|
||||
@@ -161,8 +151,8 @@ export function Footer() {
|
||||
);
|
||||
|
||||
return (
|
||||
<footer className="bg-[#E6D7EA] px-3 sm:px-4 md:px-5 lg:px-6 xl:px-8 py-8 md:py-12 lg:py-14 w-full mt-24">
|
||||
<div className="mx-auto max-w-[1560px]">
|
||||
<footer className="bg-[#E6D7EA] px-3 sm:px-4 md:px-5 lg:px-6 xl:px-8 pb-0 w-full mt-3 md:mt-4">
|
||||
<div className="mx-auto" style={{ maxWidth: "min(100% - 48px, 1520px)" }}>
|
||||
<div className="bg-[#120217] rounded-[1.5rem] md:rounded-[2rem] lg:rounded-[2.5rem] overflow-hidden border border-white/10 shadow-[0_18px_45px_rgba(20,0,30,0.28)]">
|
||||
{/* Top Helpdesk Bar */}
|
||||
<div className="bg-[#2A0838] border-b border-white/10 px-5 py-4 md:px-8 md:py-5 flex flex-col md:flex-row justify-between items-center gap-6">
|
||||
@@ -171,7 +161,9 @@ export function Footer() {
|
||||
<MaterialIcon icon="headset_mic" size={24} />
|
||||
</div>
|
||||
<div className="text-left">
|
||||
<h4 className="text-headline-md font-black text-white">24/7 Neighborhood Helpdesk</h4>
|
||||
<h4 className="text-headline-md font-black text-white">
|
||||
24/7 Neighborhood Helpdesk
|
||||
</h4>
|
||||
<p className="text-sm font-semibold text-white/70 mt-0.5">
|
||||
Need immediate assistance with an order or local service?
|
||||
</p>
|
||||
@@ -181,18 +173,24 @@ export function Footer() {
|
||||
href="tel:+918049123456"
|
||||
className="flex items-center gap-3 bg-brand-accent hover:bg-brand-accent-light text-brand-dark font-black px-6 py-3 rounded-full text-base shadow-lg transition-all duration-300 hover:-translate-y-0.5 shrink-0"
|
||||
>
|
||||
<MaterialIcon icon="phone" size={20} className="animate-pulse-subtle" />
|
||||
<MaterialIcon
|
||||
icon="phone"
|
||||
size={20}
|
||||
className="animate-pulse-subtle"
|
||||
/>
|
||||
<span>+91 80 4912 3456</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{/* Main Footer Content */}
|
||||
<div className="px-5 pt-10 pb-8 md:px-8 md:pt-12 md:pb-10 lg:px-12 lg:pt-12 lg:pb-10 text-white">
|
||||
<div className={
|
||||
isContactPage
|
||||
? "grid grid-cols-1 sm:grid-cols-3 gap-8 lg:gap-10"
|
||||
: "grid grid-cols-1 lg:grid-cols-[minmax(0,1fr)_minmax(500px,560px)] gap-10 xl:gap-14 items-start"
|
||||
}>
|
||||
<div
|
||||
className={
|
||||
isContactPage
|
||||
? "grid grid-cols-1 sm:grid-cols-3 gap-8 lg:gap-10"
|
||||
: "grid grid-cols-1 lg:grid-cols-[minmax(0,1fr)_minmax(500px,560px)] gap-10 xl:gap-14 items-start"
|
||||
}
|
||||
>
|
||||
{isContactPage ? (
|
||||
<>
|
||||
{/* Brand Column */}
|
||||
@@ -237,9 +235,12 @@ export function Footer() {
|
||||
</h4>
|
||||
|
||||
<p className="mt-3 text-sm leading-6 text-white/60">
|
||||
424, Diwan Bahadur Rd,<br />
|
||||
Opposite to Sri Krishna Sweets,<br />
|
||||
R.S. Puram, Coimbatore,<br />
|
||||
424, Diwan Bahadur Rd,
|
||||
<br />
|
||||
Opposite to Sri Krishna Sweets,
|
||||
<br />
|
||||
R.S. Puram, Coimbatore,
|
||||
<br />
|
||||
Tamil Nadu 641002
|
||||
</p>
|
||||
|
||||
@@ -280,7 +281,12 @@ export function Footer() {
|
||||
|
||||
<div className="footer-form-row grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<div className="flex flex-col text-left">
|
||||
<label htmlFor="footer-field-name" className="text-xs font-black text-brand-dark/70 mb-1.5">Your Name</label>
|
||||
<label
|
||||
htmlFor="footer-field-name"
|
||||
className="text-xs font-black text-brand-dark/70 mb-1.5"
|
||||
>
|
||||
Your Name
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="footer-field-name"
|
||||
@@ -298,7 +304,12 @@ export function Footer() {
|
||||
)}
|
||||
</div>
|
||||
<div className="flex flex-col text-left">
|
||||
<label htmlFor="footer-field-phone" className="text-xs font-black text-brand-dark/70 mb-1.5">Your Phone</label>
|
||||
<label
|
||||
htmlFor="footer-field-phone"
|
||||
className="text-xs font-black text-brand-dark/70 mb-1.5"
|
||||
>
|
||||
Your Phone
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="footer-field-phone"
|
||||
@@ -318,7 +329,12 @@ export function Footer() {
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col text-left">
|
||||
<label htmlFor="footer-field-email" className="text-xs font-black text-brand-dark/70 mb-1.5">Your Email Address</label>
|
||||
<label
|
||||
htmlFor="footer-field-email"
|
||||
className="text-xs font-black text-brand-dark/70 mb-1.5"
|
||||
>
|
||||
Your Email Address
|
||||
</label>
|
||||
<input
|
||||
type="email"
|
||||
id="footer-field-email"
|
||||
@@ -337,7 +353,12 @@ export function Footer() {
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col text-left">
|
||||
<label htmlFor="footer-field-message" className="text-xs font-black text-brand-dark/70 mb-1.5">Your Message</label>
|
||||
<label
|
||||
htmlFor="footer-field-message"
|
||||
className="text-xs font-black text-brand-dark/70 mb-1.5"
|
||||
>
|
||||
Your Message
|
||||
</label>
|
||||
<textarea
|
||||
id="footer-field-message"
|
||||
name="message"
|
||||
@@ -382,7 +403,11 @@ export function Footer() {
|
||||
<p>© {new Date().getFullYear()} Nearle. All rights reserved.</p>
|
||||
<div className="flex flex-col md:flex-row gap-2 md:gap-6 text-left">
|
||||
{LEGAL.map((link) => (
|
||||
<Link key={link.label} href={link.href} className="hover:text-[#e0c8f7] transition-colors">
|
||||
<Link
|
||||
key={link.label}
|
||||
href={link.href}
|
||||
className="hover:text-[#e0c8f7] transition-colors"
|
||||
>
|
||||
{link.label}
|
||||
</Link>
|
||||
))}
|
||||
@@ -399,7 +424,6 @@ export function Footer() {
|
||||
// Ensure default export is also available for Next.js app router client components if needed
|
||||
export default Footer;
|
||||
|
||||
|
||||
function FooterCol({
|
||||
title,
|
||||
links,
|
||||
@@ -409,16 +433,11 @@ function FooterCol({
|
||||
}) {
|
||||
return (
|
||||
<div>
|
||||
<h5 className="footer-column-title">
|
||||
{title}
|
||||
</h5>
|
||||
<h5 className="footer-column-title">{title}</h5>
|
||||
<ul className="footer-links-list">
|
||||
{links.map((l) => (
|
||||
<li key={l.label}>
|
||||
<Link
|
||||
href={l.href}
|
||||
className="footer-link inline-block"
|
||||
>
|
||||
<Link href={l.href} className="footer-link inline-block">
|
||||
{l.label}
|
||||
</Link>
|
||||
</li>
|
||||
|
||||
Reference in New Issue
Block a user