Files
group-2-threaded-project-pe…/web/app/about/page.js

43 lines
2.0 KiB
JavaScript

// Author: Shiv
// Date: April 2026
//About page
//Three info cards covering what the store does, its focus, and how to visit
export default function AboutPage() {
return (
<main className="bg-gradient-to-b from-[#f9f9f9] to-white">
<section className="text-center px-8 pt-10 pb-6">
<h1 className="text-[1.6rem] font-bold text-[#333] mb-2 uppercase tracking-[0.08em]">About Leon&apos;s Pet Store</h1>
<p className="text-base text-[#888] mb-4 max-w-[520px] mx-auto leading-relaxed">Pet care, adoption support, grooming, and everyday essentials in one place.</p>
<div className="w-[100px] h-1 bg-[#e68672] mx-auto mt-8 rounded-sm"></div>
</section>
<section className="max-w-[1200px] mx-auto px-8 pb-6 grid grid-cols-3 gap-6 max-[768px]:grid-cols-1">
<div className="bg-white rounded-2xl shadow-[0_4px_12px_rgba(0,0,0,0.08)] p-6">
<h2 className="mt-0 mb-4 text-[#222]">What We Do</h2>
<p>
Leon&apos;s Pet Store connects families with adoptable pets, helpful services, and quality products for day-to-day pet care.
</p>
</div>
<div className="bg-white rounded-2xl shadow-[0_4px_12px_rgba(0,0,0,0.08)] p-6">
<h2 className="mt-0 mb-4 text-[#222]">Our Focus</h2>
<ul className="m-0 pl-5 grid gap-2 list-disc">
<li>Support responsible pet adoption</li>
<li>Provide grooming and care services</li>
<li>Offer reliable pet supplies and essentials</li>
<li>Create a friendly experience for customers and staff</li>
</ul>
</div>
<div className="bg-white rounded-2xl shadow-[0_4px_12px_rgba(0,0,0,0.08)] p-6">
<h2 className="mt-0 mb-4 text-[#222]">Visit the Store</h2>
<p>
Browse adoptable pets, schedule appointments, shop products, or contact the team for help finding the right fit for a pet and household.
</p>
</div>
</section>
</main>
);
}