74 lines
2.0 KiB
JavaScript
74 lines
2.0 KiB
JavaScript
const LOCATIONS = [
|
||
{
|
||
name: "Downtown Branch",
|
||
address: "123 Main St",
|
||
phone: "(123) 456-7890",
|
||
email: "downtown@petshop.com",
|
||
},
|
||
{
|
||
name: "North Branch",
|
||
address: "456 North Ave",
|
||
phone: "(987) 654-3210",
|
||
email: "north@petshop.com",
|
||
},
|
||
{
|
||
name: "West Side Store",
|
||
address: "789 West Blvd",
|
||
phone: "(555) 123-4567",
|
||
email: "westside@petshop.com",
|
||
},
|
||
];
|
||
|
||
const PERSONNEL = [
|
||
{ name: "John Doe", role: "Store Manager" },
|
||
{ name: "Sara Smith", role: "Staff" },
|
||
{ name: "Michael Johnson", role: "Grooming Team" },
|
||
];
|
||
|
||
export default function ContactPage() {
|
||
return (
|
||
<main className="info-page">
|
||
<section className="info-hero">
|
||
<h1 className="info-title">Contact Us</h1>
|
||
<p className="info-subtitle">Reach the team, find a location, or connect with store personnel.</p>
|
||
<div className="title-decoration"></div>
|
||
</section>
|
||
|
||
<section className="info-content">
|
||
<div className="info-card">
|
||
<h2>General Contact</h2>
|
||
<p>Email: support@petshop.com</p>
|
||
<p>Phone: (000) 000-0000</p>
|
||
<p>Hours: Mon–Sat, 9:00 AM – 6:00 PM</p>
|
||
</div>
|
||
|
||
<div className="info-card">
|
||
<h2>Store Locations</h2>
|
||
<div className="info-card-grid">
|
||
{LOCATIONS.map((location) => (
|
||
<article key={location.name} className="info-mini-card">
|
||
<h3>{location.name}</h3>
|
||
<p>{location.address}</p>
|
||
<p>{location.phone}</p>
|
||
<p>{location.email}</p>
|
||
</article>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
<div className="info-card">
|
||
<h2>Store Personnel</h2>
|
||
<div className="info-card-grid">
|
||
{PERSONNEL.map((person) => (
|
||
<article key={person.name} className="info-mini-card">
|
||
<h3>{person.name}</h3>
|
||
<p>{person.role}</p>
|
||
</article>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
);
|
||
}
|