Skip to main content
The About Us page (/acercade) provides information about the Tienda ETCA e-commerce platform, the team behind it, and how to get in touch.

Accessing the About Us page

Navigate to the About Us page by:
  • Clicking Acerca de in the main navigation menu
  • Directly visiting /acercade in your browser

Page sections

Team showcase

The page displays the team members behind Tienda ETCA with their roles and profile images:
src/layout/AcercaDe.jsx:13-18
const equipo = [
  { nombre: 'Silvia', rol: 'Product Owner', imagen: 'https://i.pravatar.cc/150?img=21' },
  { nombre: 'Luis', rol: 'Diseñador UX/UI', imagen: 'https://i.pravatar.cc/400?img=8' },
  { nombre: 'Matías', rol: 'Desarrollador', imagen: 'https://placebeard.it/640/480' },
  { nombre: 'Sabrina', rol: 'Desarrolladora', imagen: 'https://loremflickr.com/cache/resized/defaultImage.small_320_240_nofilter.jpg' },
];
The team is rendered using the Equipo component, which displays each member in a responsive grid layout.

Welcome section

A brief introduction explaining the platform’s focus:
  • Offering excellent quality products
  • Customer satisfaction commitment
  • Simple, secure, and reliable shopping experience

Mission statement

Describes the platform’s core values:
  • Providing first-class products
  • Building lasting relationships based on trust and respect
  • Innovation and continuous improvement
  • Personalized attention

Contact information

The About Us page includes direct contact details:
src/layout/AcercaDe.jsx:47-50
<a href="mailto:[email protected]" className="text-primary fw-bold">[email protected]</a>
&nbsp;or call&nbsp;
<strong>+123 456 7890</strong>.
The page displays a featured image (ETCA pins) with responsive styling:
src/layout/AcercaDe.jsx:54-61
<img
  src={foto}
  alt="Pines ETCA"
  className="img-fluid rounded shadow"
  style={{ maxWidth: '500px' }}
/>

Component structure

The About Us page is built with the standard layout components:

Header

Navigation menu with cart access

Main content

Team, mission, and contact sections

Footer

Footer with additional links

Cart accessibility

The shopping cart remains accessible from the About Us page through:
  • The cart button in the header
  • The cart drawer overlay
src/layout/AcercaDe.jsx:64
<Cart isOpen={isCartOpen} onClose={() => setCartOpen(false)} />

Integration with context

The page uses CartContext to manage cart visibility state:
src/layout/AcercaDe.jsx:11
const { isCartOpen, setCartOpen } = useContext(CartContext);
This ensures the cart state is synchronized across all pages.

Responsive design

The About Us page uses Bootstrap classes for responsive layout:
  • Container with padding: container py-5
  • Responsive image: img-fluid
  • Text alignment adjusts for different screen sizes

Next steps

Contact form

Learn how to send messages through the contact form

Browse products

Explore the product catalog

Build docs developers (and LLMs) love