121 lines
4.5 KiB
TypeScript
121 lines
4.5 KiB
TypeScript
'use client';
|
|
|
|
import React, { useEffect, useState } from 'react';
|
|
import Link from 'next/link';
|
|
import { Mail, MapPin, Phone, Smartphone, Wrench } from 'lucide-react';
|
|
import { AnnouncementBar } from '@/layout/AnnouncementBar';
|
|
import { Header } from '@/layout/Header';
|
|
import { Navbar } from '@/layout/Navbar';
|
|
import { Footer } from '@/layout/Footer';
|
|
import { StickyHeaderSpacer } from '@/components/StickyHeaderSpacer';
|
|
import { FloatingButtons } from '@/components/FloatingButtons';
|
|
import {
|
|
storefrontService,
|
|
type FooterInfo,
|
|
type StorefrontSettings,
|
|
MOCK_FOOTER_INFO,
|
|
} from '@/services/api/storefrontService';
|
|
|
|
export default function AboutPage() {
|
|
const [footer, setFooter] = useState<FooterInfo>(MOCK_FOOTER_INFO);
|
|
const [settings, setSettings] = useState<StorefrontSettings>({ store_name: 'iFixKart' });
|
|
|
|
useEffect(() => {
|
|
let cancelled = false;
|
|
Promise.all([
|
|
storefrontService.getFooterInfo(),
|
|
storefrontService.getSettings(),
|
|
]).then(([info, store]) => {
|
|
if (cancelled) return;
|
|
if (info) setFooter(info);
|
|
if (store) setSettings(store);
|
|
});
|
|
return () => {
|
|
cancelled = true;
|
|
};
|
|
}, []);
|
|
|
|
const storeName = settings.store_name || 'iFixKart';
|
|
const phone = footer.phone || settings.support_phone || '';
|
|
const email = footer.email || '';
|
|
const address = footer.address || '';
|
|
|
|
return (
|
|
<div className="min-h-screen bg-[#F8F9FB] text-[#1E293B] flex flex-col font-sans">
|
|
<AnnouncementBar />
|
|
<Header />
|
|
<StickyHeaderSpacer />
|
|
<Navbar />
|
|
|
|
<main className="flex-grow py-10 pb-20">
|
|
<div className="container mx-auto px-4 sm:px-6 lg:px-8 max-w-[860px]">
|
|
<h1 className="text-[28px] md:text-[32px] font-bold text-[#1E293B]">
|
|
About Us
|
|
</h1>
|
|
<p className="text-[15px] text-gray-600 leading-relaxed mt-3">
|
|
{storeName} sells tested refurbished phones and accessories, and books device repairs.
|
|
You can shop online, get a screen or battery replaced, or exchange the phone you
|
|
already have.
|
|
</p>
|
|
<p className="text-[15px] text-gray-600 leading-relaxed mt-3">
|
|
Repairs are done at our Bengaluru service center or at your doorstep. Refurbished
|
|
phones are checked before listing and sold with a limited warranty.
|
|
</p>
|
|
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4 mt-8">
|
|
<Link
|
|
href="/shop"
|
|
className="bg-white border border-gray-200 rounded-xl p-5 hover:border-primary/40 transition-colors"
|
|
>
|
|
<Smartphone className="w-5 h-5 text-primary mb-3" />
|
|
<h2 className="text-[16px] font-bold text-[#1E293B]">Shop</h2>
|
|
<p className="text-[13px] text-gray-500 mt-1 leading-relaxed">
|
|
Refurbished phones, spare parts, and accessories.
|
|
</p>
|
|
</Link>
|
|
<Link
|
|
href="/repair-services"
|
|
className="bg-white border border-gray-200 rounded-xl p-5 hover:border-primary/40 transition-colors"
|
|
>
|
|
<Wrench className="w-5 h-5 text-primary mb-3" />
|
|
<h2 className="text-[16px] font-bold text-[#1E293B]">Repair</h2>
|
|
<p className="text-[13px] text-gray-500 mt-1 leading-relaxed">
|
|
Screens, batteries, charging ports, and other common jobs.
|
|
</p>
|
|
</Link>
|
|
</div>
|
|
|
|
<div className="mt-8 bg-white border border-gray-200 rounded-xl p-5 md:p-6 space-y-4">
|
|
{address ? (
|
|
<div className="flex gap-3">
|
|
<MapPin className="w-4 h-4 text-gray-400 mt-0.5 shrink-0" />
|
|
<p className="text-[14px] text-gray-600 leading-relaxed">{address}</p>
|
|
</div>
|
|
) : null}
|
|
{phone ? (
|
|
<a
|
|
href={`tel:${phone.replace(/[^\d+]/g, '')}`}
|
|
className="flex gap-3 text-[14px] text-gray-600 hover:text-primary"
|
|
>
|
|
<Phone className="w-4 h-4 text-gray-400 mt-0.5 shrink-0" />
|
|
{phone}
|
|
</a>
|
|
) : null}
|
|
{email ? (
|
|
<a
|
|
href={`mailto:${email}`}
|
|
className="flex gap-3 text-[14px] text-gray-600 hover:text-primary"
|
|
>
|
|
<Mail className="w-4 h-4 text-gray-400 mt-0.5 shrink-0" />
|
|
{email}
|
|
</a>
|
|
) : null}
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<Footer />
|
|
<FloatingButtons />
|
|
</div>
|
|
);
|
|
}
|