Aravind/nearle-next-new
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

footer section fix

Browse Source
This commit is contained in:
Aravind
2026-06-26 10:58:24 +05:30
parent 7f6b42153a
commit 48cafd07c6
16 changed files with 1276 additions and 483 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
src/components/layout/Footer.tsx
View File

@@ -33,7 +33,7 @@ export function Footer() {
<div className="section-card-dark p-8 md:p-12 lg:p-14 text-white relative">
{/* Background ambient glowing details */}
<div className="absolute right-[-10%] top-[-10%] w-[50%] h-[50%] rounded-full bg-brand-accent/5 blur-[120px] pointer-events-none" />
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-10 lg:gap-12 relative z-10 items-start text-left">
{/* Col 1: Brand info */}
<div className="flex flex-col gap-4">
@@ -53,10 +53,18 @@ export function Footer() {
</p>
{/* Social Links */}
<div className="flex gap-3 mt-2">
<a href="#" className="w-10 h-10 rounded-full bg-white/5 border border-white/10 flex items-center justify-center text-white hover:bg-[#E6D7EA] hover:text-[#17001F] transition-all duration-300" aria-label="Share">
<a
href="#"
className="w-10 h-10 rounded-full bg-white/5 border border-white/10 flex items-center justify-center text-white hover:bg-[#E6D7EA] hover:text-[#17001F] transition-all duration-300"
aria-label="Share"
>
<MaterialIcon icon="share" size={20} />
</a>
<a href="#" className="w-10 h-10 rounded-full bg-white/5 border border-white/10 flex items-center justify-center text-white hover:bg-[#E6D7EA] hover:text-[#17001F] transition-all duration-300" aria-label="Website">
<a
href="#"
className="w-10 h-10 rounded-full bg-white/5 border border-white/10 flex items-center justify-center text-white hover:bg-[#E6D7EA] hover:text-[#17001F] transition-all duration-300"
aria-label="Website"
>
<MaterialIcon icon="public" size={20} />
</a>
</div>
@@ -64,11 +72,16 @@ export function Footer() {
{/* Col 2: Company Links */}
<div>
<h5 className="text-sm font-bold uppercase tracking-wider text-white/50 mb-6">Company</h5>
<h5 className="text-sm font-bold uppercase tracking-wider text-white/50 mb-6">
Company
</h5>
<ul className="flex flex-col gap-3">
{COMPANY.map((l) => (
<li key={l.label}>
<Link href={l.href} className="text-sm text-white/70 hover:text-[#E6D7EA] hover:translate-x-1 transition-all inline-block">
<Link
href={l.href}
className="text-sm text-white/70 hover:text-[#E6D7EA] hover:translate-x-1 transition-all inline-block"
>
{l.label}
</Link>
</li>
@@ -78,11 +91,16 @@ export function Footer() {
{/* Col 3: Partnerships */}
<div>
<h5 className="text-sm font-bold uppercase tracking-wider text-white/50 mb-6">Partnerships</h5>
<h5 className="text-sm font-bold uppercase tracking-wider text-white/50 mb-6">
Partnerships
</h5>
<ul className="flex flex-col gap-3">
{PARTNERSHIPS.map((l) => (
<li key={l.label}>
<Link href={l.href} className="text-sm text-white/70 hover:text-[#E6D7EA] hover:translate-x-1 transition-all inline-block">
<Link
href={l.href}
className="text-sm text-white/70 hover:text-[#E6D7EA] hover:translate-x-1 transition-all inline-block"
>
{l.label}
</Link>
</li>
@@ -92,11 +110,16 @@ export function Footer() {
{/* Col 4: Support / Legal */}
<div>
<h5 className="text-sm font-bold uppercase tracking-wider text-white/50 mb-6">Support & Legal</h5>
<h5 className="text-sm font-bold uppercase tracking-wider text-white/50 mb-6">
Support & Legal
</h5>
<ul className="flex flex-col gap-3">
{LEGAL.map((l) => (
<li key={l.label}>
<Link href={l.href} className="text-sm text-white/70 hover:text-[#E6D7EA] hover:translate-x-1 transition-all inline-block">
<Link
href={l.href}
className="text-sm text-white/70 hover:text-[#E6D7EA] hover:translate-x-1 transition-all inline-block"
>
{l.label}
</Link>
</li>
@@ -107,11 +130,16 @@ export function Footer() {
{/* Col 5: HQ Address & Helpdesk */}
<div className="flex flex-col gap-4">
<div>
<h5 className="text-sm font-bold uppercase tracking-wider text-white/50 mb-4">Visit Nearle HQ</h5>
<h5 className="text-sm font-bold uppercase tracking-wider text-white/50 mb-4">
Visit Nearle
</h5>
<p className="text-xs leading-relaxed 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>
<a
@@ -126,13 +154,21 @@ export function Footer() {
</div>
<div className="border-t border-white/10 pt-4 flex flex-col gap-2">
<p className="text-[10px] font-bold text-white/40 uppercase tracking-widest">Neighborhood Helpdesk</p>
<p className="text-[10px] font-bold text-white/40 uppercase tracking-widest">
Neighborhood Helpdesk
</p>
<a
href="tel:+918049123456"
href="tel:+919092068666"
className="flex items-center gap-2 text-white hover:text-[#E6D7EA] transition-all"
>
<MaterialIcon icon="phone" size={16} className="text-[#E6D7EA] shrink-0" />
<span className="text-sm font-black tracking-tight">+91 80 4912 3456</span>
<MaterialIcon
icon="phone"
size={16}
className="text-[#E6D7EA] shrink-0"
/>
<span className="text-sm font-black tracking-tight">
+91 90920 68666
</span>
</a>
</div>
</div>